<p>Making blog thumbnails and images is tedious. I don't want to fight with Gimp or whatever and I don't think anyone cares what the image really is.</p>
<p>To make publishing easier, this site now checks for the image in each markdown post during the build to see if it already exists. If not, a prompt is built from the post title and content and sent to OpenAI's image API. The returned art is saved alongside the post and a 70×70 thumbnail is produced using Sharp.</p>
<p>To make the image for this post it cost me about $0.12 CAD in OpenAI credits. Entertainingly that's probably more than what hosting this site will cost for like a week due to the setup I'm using to host this.</p>
<p>This automation was initially coded with Codex, but it didn't work quite right. I fixed it up with Cursor, then a bit manually to get it across the finish line. This was as much about playing with the AI dev tools as building the feature.</p>
<p>Check it out here <a href="https://github.com/kylep/multi/blob/main/apps/blog/blog/scripts/generate-images.mjs">generate-images.mjs</a>.</p>
<h1 id="how-it-works">How It Works</h1>
<p>The image generation system is integrated into the build pipeline through the <code>package.json</code> build script:</p>
<pre><code class="language-json">"build": "node scripts/generate-images.mjs &#x26;&#x26; next build"
</code></pre>
<p>Before Next.js builds the static site, the <code>generate-images.mjs</code> script runs and:</p>
<ol>
<li><strong>Scans all markdown files</strong> in <code>markdown/posts/</code> for front matter</li>
<li><strong>Checks for missing images</strong> referenced in the <code>image</code> and <code>thumbnail</code> fields</li>
<li><strong>Generates missing images</strong> using OpenAI's DALL·E API if <code>OPENAI_API_KEY</code> is set</li>
<li><strong>Creates thumbnails</strong> by resizing generated images to 70×70 pixels using Sharp</li>
</ol>
<h2 id="the-generation-process">The Generation Process</h2>
<p>It's all pretty straightforward:</p>
<p>High level script logic:</p>
<ol>
<li>If there's no image defined, do nothing</li>
<li>If the image is defined in the front matter but doesn't exist, generate it.</li>
<li>If the image does exist but thumbnail doesn't, resize it and save that too.</li>
</ol>
<p>Generating the image is also simple:</p>
<ol>
<li>If the front matter has <code>imgprompt</code> in it, use that as the <code>summary</code> of the post.</li>
<li>If <code>imgprompt</code> is not present get <code>gpt-4o-mini'</code> to write a <code>summary</code> of the post.</li>
<li>Use <code>dall-e-3</code> to create the image.</li>
<li>Complain that it didn't look right, tweak the prompt, repeat until sufficiently frustrated, move on.</li>
</ol>
<h3 id="prompts">Prompts</h3>
<p>At time of writing (I won't keep this updated, check the code), I used these for the prompts:</p>
<p>Making the summary:</p>
<pre><code class="language-javascript">async function summarizeBlogContent(data, content) {
  const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
  const prompt = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: `In max 20 words, describe a simple logo image that would represent this blog post: ${content}` }],
  });
  const summary = prompt.choices[0].message.content;
  console.log(`✨📝 Created summary of "${data.title}" → ${summary}`);
  return summary;
}
</code></pre>
<p>Making the image</p>
<pre><code class="language-javascript">async function getPromptFromContent(data, content) {
  const subject = data.imgprompt
    ? data.imgprompt
    : await summarizeBlogContent(data, content);
  const prompt = [
    "Simple minimalist flat vector icon.",
    `Subject: "${subject}".`,
    "Style: clean flat SVG-style vector, crisp edges, no gradients, no shadows, no textures, no lighting effects.",
    "Colors: limited palette, high contrast, modern minimal. Black, white, and primary colors only.",
    "Composition: centered subject with generous whitespace, 1:1 icon framing.",
    "Background: pure solid white (#FFFFFF) and completely filled. Nothing around the logo.",
    "No transparency. No checkerboard. No grid. No background elements.",
    "No text. No words. Just a simple image centered in white space."
  ].join("\n");
  return prompt;
}
</code></pre>
<h3 id="environment-setup">Environment Setup</h3>
<p>Set your OpenAI API key</p>
<pre><code class="language-bash">export OPENAI_API_KEY="your-api-key-here"
</code></pre>
<p>Without this key the build just skips image generation with a warning.</p>
<hr>
<h1 id="outstanding-problem">Outstanding Problem</h1>
<p>Dalle-3 is super frustrating when it comes to just making a white background. I spent a couple hours trying different prompts and it just refuses. Here's what the code came up with as a prompt for this page:</p>
<pre><code class="language-text">Simple minimalist flat vector icon.
Subject: "A simple logo featuring a stylized laptop and a paintbrush, symbolizing effortless content creation and automated design.".                     
Style: clean flat SVG-style vector, crisp edges, no gradients, no shadows, no textures, no lighting effects.                                                                                                
Colors: limited palette, high contrast, modern minimal. Black, white, and primary colors only.   
Composition: centered subject with generous whitespace, 1:1 icon framing.                             
Background: pure solid white (#FFFFFF) and completely filled. Nothing around the logo.                
No transparency. No checkerboard. No grid. No background elements.                                    
No text. No words. Just a simple image centered in white space. 
</code></pre>
<p>It does not seem to care for my preference. If anyone has any tricks for this I'd love to hear about it.</p>


Kyle Pericak

"It works in my environment"

Categories

Tags