Skip to content
GenAIScript
Blog

Blog Images

A retro-style 8-bit illustration features a computer screen with a visible code script. Surrounding it are symbolic representations of image generation: a markdown document, an image prompt morphing into abstract art, and a fading alt-text bubble. The design uses corporate colors, simple geometric shapes, and is limited to five colors, without including people or text.
Peli
Peli
GenAIScript developer

We generate cover images to the blog, this in itself is completely unterresting… but the script that generated the images is worth a look.

The generation of an blog post cover is done in 3 phases:

  • convert the blog markdown into an image prompt
  • generate an image from the image prompt
  • generate an alt text description from the image prompt
  • resize, copy image and patch the blog post frontmatter
blog-image.genai.mts
script({ parameters: { force: false } })
const file = env.files.find(({ filename }) => /\.mdx?$/.test(filename))
const target = path.changeext(file.filename, ".png")
if (!env.vars.force && (await workspace.stat(target)))
    cancel("blog image already exists")


// phase 1: generate image prompt
const style =
    "iconic, 2D, 8-bit, corporate, 5-color, simple, geometric, no people, no text"
const { text: imagePrompt } = await runPrompt(
    (_) => {
        _.def("BLOG_POST", MD.content(file.content))
        _.$`Generate an image prompt for DALLE-3 that illustrates the contents of <BLOG_POST>.
Include specific description related to the content of <BLOG_POST>.
    ${style}`
    },
    { responseType: "text", systemSafety: false }
)


// phase 2: generate image
const image = await generateImage(
    `${imagePrompt}
    STYLE:
    ${style}`,
    {
        mime: "image/png",
        size: "1792x1024",
        scale: 768 / 1792,
        maxHeight: 762,
        style: "vivid",
    }
)


// phase 3: generate alt text
const { text: alt } = await prompt`
Generate an alt text description from <IMAGE_PROMPT>.
Rephrase the prompt in a way that would be useful for someone who cannot see the image.
Do not start with "Alt Text:".


IMAGE_PROMPT:
${imagePrompt}`.options({ responseType: "text", systemSafety: false })


// phase 4: patch fronmatter
const fm = MD.frontmatter(file.content)
fm.cover = {
    alt,
    image: "./" + path.basename(target),
}
file.content = MD.updateFrontmatter(file.content, fm)


// phase 5: save files
await workspace.copyFile(image.image.filename, target)
await workspace.writeFiles(file)

Once this script worked for a couple posts, use used the convert command to generate the images for all the blog posts.

Terminal window
genaiscript convert blog-image blog/*.md*

What about the images?

The images are somewhat abstract, but they are generated from the blog post content. The image prompt could definitely be improved, but it’s a good start.

Tags: