How to Add New Case Studies to the Gallery Documentation in awesome-gpt-image-2

To add a new case study to the gallery documentation, place your image in public/images/, append a case object to src/image25/cases.js, and insert a Markdown link in docs/gallery-part-1.md or docs/gallery-part-2.md depending on the case ID.

The freestylefly/awesome-gpt-image-2 repository maintains a curated gallery of GPT-4o image generation examples powered by a React and Vite frontend. When you need to add new case studies to the gallery documentation, you must synchronize three distinct layers: the JavaScript data models, the Markdown navigation files, and the static image assets.

Understanding the Gallery Architecture

The gallery system relies on a tightly-coupled three-tier architecture that separates data from presentation.

Data Source Layer (src/image25/cases.js)

The primary data store is src/image25/cases.js, which exports the comparisonCases array. Each case object must include an id, bilingual title (Chinese and English), the full prompt string, an image path, bilingual alt text, source metadata, sourceUrl, and a focus description highlighting the technical emphasis.

Markdown Navigation Layer (docs/gallery-part-*.md)

Human-readable indexes live in docs/gallery-part-1.md (covering cases 1–165) and docs/gallery-part-2.md (covering cases 166–544). These files contain Markdown links that point to anchor fragments (#case-<id>) automatically generated by the React router based on the id field in the data source.

Static Asset Layer (public/images/)

Images referenced by the image field (e.g., /images/case550.jpg) resolve to files inside public/images/. Vite serves this directory directly at the site root, requiring no additional build configuration for new assets.

Step-by-Step Guide to Adding a Case Study

Follow this workflow to ensure your new case appears correctly in the rendered gallery.

Step 1: Prepare the Image Asset

Place your PNG or JPG file in public/images/ using a consistent naming convention like case{id}.jpg. The path you specify in the data object should be relative to the site root (e.g., /images/case550.jpg).

Step 2: Define the Case Object in cases.js

Open src/image25/cases.js and append a new object to the comparisonCases array. Ensure the id uses the format gallery-{number} and that sourceCaseId matches the numeric identifier used in the documentation.

Step 3: Update the Markdown Gallery Index

Choose the correct Markdown file based on the case number. For cases 1–165, edit docs/gallery-part-1.md; for cases 166 and above, use docs/gallery-part-2.md. Insert a list entry following this pattern:

- [例 {number}: {Title}](./gallery-part-{X}.md#case-{number})

Step 4: Verify with the Dev Server

Run npm run dev to start the Vite development server. Navigate to the gallery and confirm that the new entry renders the image, displays bilingual metadata, and scrolls correctly to the anchor generated from the id field.

Implementation Example: Adding Case #550

Here is a complete walkthrough for adding a hypothetical "Winter Ski Resort Poster" as case 550.

First, define the data structure in src/image25/cases.js:

// src/image25/cases.js
export const comparisonCases = [
  // …existing cases
  {
    id: 'gallery-550',
    sourceCaseId: 550,
    title: {
      zh: '滑雪度假海报 · 场景与氛围',
      en: 'Ski resort poster · Scene & atmosphere'
    },
    prompt: `Create a premium winter ski‑resort travel poster in the style of a high‑end tourism magazine. The composition features a snow‑covered mountain valley, a sleek ski lift, and a cozy chalet with warm light spilling from the windows. Use cool blue‑white tones, soft sunrise glow, subtle cloud reflections, and elegant sans‑serif typography that reads “WINTER ESCAPE” and “EXPLORE THE SNOW‑CAPPED PEAKS • 2026”.`,
    image: '/images/case550.jpg',
    alt: {
      zh: '雪山度假海报，滑雪缆车与小木屋的温暖灯光',
      en: 'Winter ski‑resort poster with lift and chalet lights'
    },
    source: {
      zh: '原案例 #550 · @SnowArtist（仅作示意）',
      en: 'Original case #550 · @SnowArtist (illustration only)'
    },
    sourceUrl: 'https://x.com/SnowArtist/status/1234567890123456789',
    focus: {
      zh: '场景氛围、光影与排版',
      en: 'Atmosphere, lighting and typography'
    }
  }
];

Next, add the navigation link to docs/gallery-part-2.md since case 550 exceeds 165:

<!-- docs/gallery-part-2.md -->
- [例 550：滑雪度假海报 · 场景与氛围](./gallery-part-2.md#case-550)

Finally, ensure the image file exists at public/images/case550.jpg.

Critical Files and Their Roles

Understanding these file paths is essential for maintaining the gallery:

• src/image25/cases.js – The canonical data source containing the comparisonCases array; defines all metadata and anchor IDs.
• src/image25/realCases.js – Optional secondary store for "real" user recreation cases that include actual generated result images.
• docs/gallery-part-1.md – Markdown index for cases 1 through 165.
• docs/gallery-part-2.md – Markdown index for cases 166 through 544 and beyond.
• public/images/ – Static directory where all case images must reside for Vite to serve them correctly.
• src/main.jsx – React entry point that reads the case arrays and renders each section with the appropriate #case-<id> anchor.

Summary

• Store images in public/images/ and reference them with root-relative paths (/images/filename.jpg).
• Append case objects to src/image25/cases.js, ensuring all bilingual fields (title, alt, source, focus) and the id are populated.
• Update Markdown indexes in docs/gallery-part-1.md or docs/gallery-part-2.md based on the case number, linking to #case-<id> fragments.
• Verify changes using npm run dev; the Vite hot-module replacement reflects updates to cases.js instantly without rebuilding.

Frequently Asked Questions

Do I need to manually create HTML anchors in the Markdown files?

No. The React component in src/main.jsx automatically generates the anchor tags from the id field in your case object. You only need to reference the anchor in the Markdown link using the format #case-<id>.

Can I add cases to realCases.js instead of cases.js?

Yes. If your case represents a "real" user recreation with an actual generated result image, you can add it to src/image25/realCases.js. Ensure you import and merge this array into the main application logic if it is not already included in src/main.jsx.

What image formats are supported?

The gallery accepts standard web formats including JPG, PNG, and WebP. Store files in public/images/ and reference them with absolute paths starting with /images/ to ensure Vite resolves them correctly during both development and production builds.

Why is my new case not appearing in the gallery?

Verify that the id field in your case object matches the fragment used in the Markdown link (e.g., gallery-550 generates #case-550). Also confirm the image file exists in public/images/ and that the npm run dev server has been restarted if you added new files to the public directory.

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