How to Add New Categories and Cases to the Awesome-GPT-Image-2 Gallery

To add new categories and cases to the gallery, edit the categories and cases arrays in data/cases.json, place your image assets in data/images/, and run node scripts/generate-site-data.mjs to regenerate the static markdown pages.

The Awesome-GPT-Image-2 gallery is a static site generated entirely from a single JSON data source. All category filters, style tags, and gallery entries are defined in data/cases.json, which is processed by a Node.js script to produce the browsable documentation at build time. Understanding this pipeline is essential for contributors who want to add new categories and cases to the gallery correctly.

Understanding the Data Architecture

The gallery frontend is built from three main data structures inside data/cases.json:

• categories – A flat array of category names that powers the filter dropdown UI.
• styles – A flat array of style tags used by the style-library skill.
• cases – An array of case objects, each representing a single gallery tile with prompts, metadata, and image references.

During the build process, scripts/generate-site-data.mjs reads this JSON and writes static markdown files to docs/gallery-part-1.md and docs/gallery-part-2.md. These files contain anchored headings (e.g., #case-544) that enable direct linking to specific examples.

Step-by-Step Guide to Adding Categories and Cases

Step 1: Define a New Category

To add a new category, append a unique string to the categories array in data/cases.json. The gallery UI pulls filter options directly from this list, and the order here determines the dropdown order.

{
  "categories": [
    "Architecture & Spaces",
    "Brand & Logos",
    "Characters & People",
    "New Category Name"
  ]
}

Ensure you also update data/style-library.json with the same category additions to maintain consistency across the repository’s skills.

Step 2: Create a New Case Object

Append a new object to the cases array. Each case requires a unique id, a valid category (matching an entry from the categories array), and specific metadata fields.

{
  "id": 545,
  "title": "Minimalist Geometric Poster",
  "image": "/images/case545.jpg",
  "imageAlt": "Minimalist geometric poster design",
  "sourceLabel": "@YourHandle",
  "sourceUrl": "https://x.com/YourHandle/status/1234567890",
  "prompt": "Design a minimalist poster featuring a single geometric shape...",
  "promptPreview": "Design a minimalist poster featuring...",
  "category": "Posters & Typography",
  "styles": ["Poster", "UI"],
  "scenes": ["Tech", "Design"],
  "featured": false,
  "githubUrl": "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery-part-2.md#case-545"
}

Key fields include:

• id – A unique integer not used by other cases.
• category – Must exactly match a string from the categories array.
• styles and scenes – Arrays of tags for filtering.
• githubUrl – Points to the generated markdown anchor; according to the source code, this is automatically refreshed by the generation script.

Step 3: Add the Image Asset

Place your image file (JPG or PNG) inside the data/images/ directory. The image field in your case object should reference this file using the path format /images/case545.jpg, where the leading slash represents the data folder root.

Step 4: Regenerate the Static Site

Run the generation script from the repository root to update the markdown anchors and Table-of-Contents links:

node scripts/generate-site-data.mjs

This script parses data/cases.json, sorts cases by ID, and updates docs/gallery-part-1.md and docs/gallery-part-2.md with the new anchored headings.

Source Files Involved in Gallery Generation

• data/cases.json – Master data source containing categories, styles, scenes, and case definitions.
• data/style-library.json – Mirrors the categories array for the style-library skill; keep synchronized with cases.json.
• scripts/generate-site-data.mjs – Node.js script that transforms the JSON into static markdown gallery pages.
• docs/gallery-part-1.md & docs/gallery-part-2.md – Generated markdown files containing the clickable gallery anchors.
• data/images/ – Directory holding all image assets referenced by case objects.

Summary

• The gallery is generated from a single JSON source at data/cases.json.
• To add content, modify the categories and cases arrays, then place images in data/images/.
• Always run node scripts/generate-site-data.mjs to regenerate the static markdown files; manual edits to docs/gallery-part-*.md will be overwritten.
• Keep data/style-library.json synchronized with cases.json when modifying categories to maintain consistency across the repository.

Frequently Asked Questions

Can I add a case without creating a new category?

Yes. You can assign any existing category from the categories array to your case object's category field. New categories are only required when introducing a classification that does not already exist in the dropdown filter.

What happens if I forget to run the generation script?

The new case will exist in the JSON data but will not appear in the public gallery pages. The markdown files in docs/ remain unchanged until you execute node scripts/generate-site-data.mjs, which writes the necessary anchors and updates the Table-of-Contents links.

Can I edit the generated markdown files directly?

No. Manual edits to docs/gallery-part-1.md or docs/gallery-part-2.md will be overwritten the next time the generation script runs. All persistent changes must be made in data/cases.json, which serves as the single source of truth.

What image formats are supported?

While the examples predominantly use .jpg, the gallery accepts standard web formats including .png and .jpg. Ensure the file extension in the image field matches the actual file placed in data/images/ and that the path format follows /images/filename.ext.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}