Images du blog

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.

23 mars 2025

 Generated by 🤖 AI 

Nous générons des images de couverture pour le blog, ce qui en soi est complètement inintéressant… mais le script qui a généré les images vaut le coup d’œil.

La génération d’une image de couverture pour un article de blog se fait en 3 étapes :

convertir le markdown du blog en une invite d’image
générer une image à partir de l’invite d’image
générer une description de texte alternatif à partir de l’invite d’image
redimensionner, copier l’image et mettre à jour les métadonnées de l’article de blog

script({ parameters: { force: false }, accept: ".md,.mdx" })
const file = env.files[0]
const target = path.changeext(file.filename, ".png")

const fm = MD.frontmatter(file.content)
if (env.vars.force || !(await workspace.stat(target))) {
    // 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 gpt-image-1 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: "landscape",
            maxHeight: 762,
            model: "image",
        }
    )
    if (!image) cancel("image generation failed")

    // 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,
        label: "alt-text",
    })

    // phase 4: patch frontmatter
    fm.cover = {
        alt,
        image: "./" + path.basename(target),
    }
    await workspace.copyFile(image.image.filename, target)
}

if (env.vars.force || !fm.tags?.length) {
    const res = await prompt`
Generate 5 keyword tags from <BLOG_POST>. The tags are used for SEO purposes in a blog.
Respond with 1 tag per line.

<BLOG_POST>
${MD.content(file.content)}
</BLOG_POST>`.options({
        responseType: "text",
        systemSafety: false,
        label: "tags",
    })
    if (!res.error)
        fm.tags = res.text
            ?.split(/\r?\n/g)
            .map((tag) => tag.trim())
            .filter(Boolean)
}

if (!fm.excerpt) {
    const res = await prompt`
Generate an excerpt from <BLOG_POST>.
- Do not use "Excerpt", "Unlock", "Master".
- Maximize engagement on LinkedIn. Your tone is friendly and technical.
- Do not be excited.
- Do not add code snippets or sections.

<BLOG_POST>
${MD.content(file.content)}
</BLOG_POST>`.options({
        responseType: "text",
        systemSafety: false,
        label: "excerpt",
    })
    if (!res.error) fm.excerpt = res.text.trim()
}

// phase 5: save files
file.content = MD.updateFrontmatter(file.content, fm)
await workspace.writeFiles(file)

Une fois que ce script a fonctionné pour quelques articles, nous avons utilisé la commande convert pour générer les images pour tous les articles du blog.

genaiscript convert blog-image blog/*.md*

Et les images ?

Les images sont quelque peu abstraites, mais elles sont générées à partir du contenu de l’article de blog. L’invite d’image pourrait certainement être améliorée, mais c’est un bon début.