How to Regenerate the Site Data for awesome-gpt-image-2: Complete Guide

Run npm run generate:site-data to rebuild the case catalog from Markdown source files into the JSON payload consumed by the Vite frontend.

The awesome-gpt-image-2 repository powers a searchable gallery of GPT-Image-2 prompts and examples. Its dynamic data layer is not hand-maintained but generated programmatically from structured Markdown files. Understanding how to regenerate this site data is essential when adding new cases, updating existing entries, or deploying fresh builds.

What the Generation Script Does

The Node.js script at scripts/generate-site-data.mjs transforms raw documentation into structured data. According to the source code, the script performs four core operations:

  • Collects source files – reads docs/gallery-part-1.md and docs/gallery-part-2.md as input sources
  • Parses each case – extracts titles, prompts, image URLs, source links, and infers categories and tags using helper functions like extractPrompt(), extractSource(), inferCategory(), and inferTags()
  • Builds a payload – aggregates overall statistics (totalCases, categories, styles, scenes) plus an array of case objects with complete metadata
  • Writes JSON output – serializes the payload to data/cases.json, creating the directory if necessary

The resulting data/cases.json is consumed by src/main.jsx to render the interactive gallery, filters, and case detail views.

Quick Regeneration Steps

Follow these commands to regenerate the site data from scratch:


# 1. Clone the repository

git clone https://github.com/freestylefly/awesome-gpt-image-2.git
cd awesome-gpt-image-2

# 2. Install dependencies

npm install

# 3. Regenerate site data for awesome-gpt-image-2

npm run generate:site-data

This single command executes node scripts/generate-site-data.mjs as declared in package.json lines 6–9.

Alternative: Direct Node Execution

Bypass npm scripts by invoking Node directly:

node scripts/generate-site-data.mjs

Both approaches produce identical output at data/cases.json.

Automating Full Regeneration

The repository includes npm lifecycle hooks that streamline workflows. The predev and prebuild hooks automatically trigger both generation scripts before starting the development server or creating a production build (see package.json lines 13–16).

For manual full regeneration including the Agent skill library:


# Regenerate site data

npm run generate:site-data

# Regenerate style-skill data (optional)

npm run generate:style-skill

# Start development server with fresh data

npm run dev

Key Files and Their Roles

File Purpose
scripts/generate-site-data.mjs Core generator script that parses Markdown and outputs JSON
package.json Declares generate:site-data and generate:style-skill npm scripts
data/cases.json Generated output consumed by the Vite frontend
docs/gallery-part-1.md, docs/gallery-part-2.md Source Markdown files containing case definitions
scripts/generate-style-skill.mjs Companion generator for Agent skill data

Regenerating After Content Changes

When you modify case data in the docs/ directory, the site frontend does not automatically detect changes. You must explicitly regenerate the site data for awesome-gpt-image-2 to reflect updates:

  1. Edit docs/gallery-part-1.md or docs/gallery-part-2.md
  2. Run npm run generate:site-data
  3. Restart npm run dev or rebuild with npm run build

The generation script re-parses all cases from scratch on every run, ensuring consistency across the entire catalog.

Summary

  • Primary command: npm run generate:site-data executes the generation pipeline
  • Input sources: Markdown files in docs/ directory
  • Output target: data/cases.json consumed by src/main.jsx
  • Automation: predev and prebuild hooks auto-regenerate when running npm run dev or npm run build
  • Direct execution: node scripts/generate-site-data.mjs works identically

Frequently Asked Questions

What Node version is required to run the generation script?

The repository expects Node.js 18 or higher. The script uses modern ESM syntax (import statements) and fs/promises APIs that require contemporary Node versions.

Why is my frontend not showing updated cases after editing Markdown?

The Vite development server does not watch docs/ files for changes. After modifying source Markdown, you must manually run npm run generate:site-data to rebuild data/cases.json, then restart the dev server.

Can I regenerate both site data and style skills in one command?

While no single script combines both, the predev and prebuild npm hooks automatically execute both generate:site-data and generate:style-skill before their respective main commands, ensuring synchronized regeneration.

What happens if data/cases.json already exists?

The generation script unconditionally overwrites the file. It creates the data/ directory if missing, then writes fresh JSON, making repeated regeneration safe and idempotent.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"

Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →