glow/first-home-diy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Integrate xAI Grok image generation into build pipeline for article hero images #37

New issue
Closed
opened 2026-06-09 20:37:42 +00:00 by glow · 1 comment
glow commented 2026-06-09 20:37:42 +00:00
Owner
Copy link

Problem

scripts/gen-placeholder.ts exists as a stopgap but the intended solution is xAI Grok image generation. There is no integration between the article build pipeline and the xAI image API.

Correct approach

Use xAI's grok-imagine-image model to auto-generate hero images for new articles during build:

  • When a new article is added with a hero.src path but no file found at public/
  • Call xAI API with a prompt based on the article title/description/pillar
  • Save as WebP to the expected path
  • Add responsive size variants (640w, 1024w, 1600w)

This replaces the manual gen-placeholder.ts approach.

Resources

  • xAI Grok image gen is wired into Hermes via grok-image-generation skill
  • xAI API key stored in secrets
  • Input format: { "model": "grok-imagine-image", "prompt": "...", "n": 1 }
  • Returns base64-encoded WebP

Suggested fix

Create a scripts/generate-hero-images.ts that:

  1. Reads all articles without an existing hero image file
  2. Generates a prompt from article metadata
  3. Calls xAI API to create the image
  4. Saves to public/<hero.src> as WebP
  5. Runs as a pre-build step
## Problem `scripts/gen-placeholder.ts` exists as a stopgap but the intended solution is xAI Grok image generation. There is no integration between the article build pipeline and the xAI image API. ## Correct approach Use xAI's grok-imagine-image model to auto-generate hero images for new articles during build: - When a new article is added with a `hero.src` path but no file found at `public/` - Call xAI API with a prompt based on the article title/description/pillar - Save as WebP to the expected path - Add responsive size variants (640w, 1024w, 1600w) This replaces the manual `gen-placeholder.ts` approach. ## Resources - xAI Grok image gen is wired into Hermes via `grok-image-generation` skill - xAI API key stored in secrets - Input format: `{ "model": "grok-imagine-image", "prompt": "...", "n": 1 }` - Returns base64-encoded WebP ## Suggested fix Create a `scripts/generate-hero-images.ts` that: 1. Reads all articles without an existing hero image file 2. Generates a prompt from article metadata 3. Calls xAI API to create the image 4. Saves to `public/<hero.src>` as WebP 5. Runs as a pre-build step
glow self-assigned this 2026-06-09 20:37:42 +00:00
glow changed title from No automated hero image generation in build pipeline to Integrate xAI Grok image generation into build pipeline for article hero images 2026-06-09 20:39:22 +00:00
glow closed this issue 2026-06-09 21:49:58 +00:00
glow commented 2026-06-09 21:50:00 +00:00
Author
Owner
Copy link

Implemented in commit cec9db6. Created scripts/gen-hero-images.ts which uses yaml frontmatter parsing and xAI grok-imagine-image API to generate missing hero images. Added images:generate script to package.json and wired it into the build pipeline after generate-sitemap. The script scans all articles, skips existing hero files, generates prompts from article metadata, calls the xAI API with 1.5s rate limiting, and saves WebP outputs to public/. Verified it runs cleanly — 12 articles scanned, all existing heroes detected.

Implemented in commit cec9db6. Created `scripts/gen-hero-images.ts` which uses yaml frontmatter parsing and xAI grok-imagine-image API to generate missing hero images. Added `images:generate` script to package.json and wired it into the build pipeline after generate-sitemap. The script scans all articles, skips existing hero files, generates prompts from article metadata, calls the xAI API with 1.5s rate limiting, and saves WebP outputs to public/. Verified it runs cleanly — 12 articles scanned, all existing heroes detected.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug
Bug fix

  
feature
New feature

  
improvement
Code improvements and refactors

No labels
bug
feature
improvement
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
glow
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
glow/first-home-diy#37
No description provided.