How Is the Style Library Structured in GPT-Image2? A Deep Dive into the JSON Architecture

The GPT-Image2 style library is a single JSON document (data/style-library.json) that declaratively defines categories, styles, scenes, and templates with full localization support, enabling the React frontend to render the gallery and generate prompts without hardcoded UI logic.

The freestylefly/awesome-gpt-image-2 repository implements a data-driven architecture where the entire visual catalog, multilingual labels, and prompt guidance system live in one authoritative file. Understanding how the style library is structured in GPT-Image2 reveals a scalable approach to managing complex template relationships while supporting runtime localization for English and Chinese users.

Core Architecture of the Style Library

The library follows a single-source-of-truth pattern. Rather than scattering definitions across components, every building block lives in data/style-library.json. This enables non-developers to extend the catalog by editing JSON, while the React UI consumes the schema dynamically.

The Master JSON Schema

The top-level object in style-library.json contains seven primary properties that organize the content hierarchy:

• version – Currently set to 1, enabling future schema migrations.
• repository – URL referencing https://github.com/freestylefly/awesome-gpt-image-2 for attribution.
• templateDocument – Path to docs/templates.md, linking human-readable documentation.
• tagLabels – Localization dictionary mapping tag identifiers to English (en) and Chinese (zh) strings.
• categories – Array defining the high-level taxonomy of the gallery.
• styles – Array of visual aesthetic descriptors (e.g., "UI", "3D").
• scenes – Array of contextual environments (e.g., "Tech", "Commerce").
• templates – Array of ready-made prompt templates combining the above elements.

Key Data Structures in style-library.json

Categories, Styles, and Scenes

Each taxonomy level follows a consistent identity pattern with localized titles.

Categories contain:

• id – Stable identifier (e.g., cat-ui)
• value – Human-readable name (e.g., UI & Interfaces)
• anchor / templateAnchor – URL hash fragments for deep linking
• cover – Thumbnail image path for the gallery grid
• title and description – Objects with en and zh strings

Styles and scenes share a similar structure but serve different semantic roles. Styles define the visual aesthetic, while scenes define the subject context. Both include:

• id and value identifiers
• title objects for localization
• Optional keywords arrays (styles only) to power UI search suggestions

{
  "id": "ui",
  "value": "UI",
  "title": { "en": "UI", "zh": "界面" },
  "keywords": ["ui", "interface", "dashboard"]
}

Template Definitions

The templates array forms the core of the library. Each template object binds categories, styles, and scenes into actionable prompt guidance. A complete template includes:

• id and anchor – Unique identifiers and URL hashes (e.g., ui-screenshot-system)
• cover – Preview image path displayed in the gallery
• title and description – Localized strings for the UI card
• category – Human name matching a categories.value entry
• styles, scenes, tags – Arrays of identifiers linking to the taxonomy sections
• useWhen – Guidance criteria describing appropriate usage contexts
• guidance – Actionable tips for prompt authors
• pitfalls – Common mistakes to avoid when using the template
• exampleCases – IDs of example outputs shown in the detail view

Localization Support

The tagLabels property provides a fallback localization layer for tags that appear across multiple templates. When the UI encounters a tag identifier, it resolves the display string by checking tagLabels[tagId][lang] first, then falling back to style or scene titles if no explicit label exists.

{
  "tagLabels": {
    "Art": { "en": "Art", "zh": "艺术" }
  }
}

Runtime Consumption in the React Frontend

Loading the Library at Runtime

The React entry point fetches the JSON asynchronously at runtime rather than bundling it. In src/main.jsx (line 3124), the application initializes the library state:

// src/main.jsx – line 3124
fetch('/style-library.json')
  .then(response => response.json())
  .then(data => setStyleLibrary(data));

Once loaded, the object persists in the styleLibrary React state hook and propagates to components like TemplateSection, CategorySection, and filter pills throughout the component tree.

Data Resolution Helper Functions

Three utility functions (located at lines 756–770 in the source) handle the translation from JSON identifiers to localized UI strings:

• localizeLabel – Resolves category, style, or scene IDs to human-readable text
• localizeTemplateTag – Looks up tag identifiers in the tagLabels map
• formatTemplatePrompt – Combines category, styles, scenes, and tags into a comma-separated prompt string for clipboard copying

function formatTemplatePrompt(item, lang, lib) {
  const parts = [
    localizeLabel(item.category, lang, lib),
    ...(item.styles || []).map(s => localizeLabel(s, lang, lib)),
    ...(item.scenes || []).map(s => localizeLabel(s, lang, lib)),
    ...(item.tags || []).map(t => localizeTemplateTag(t, lang, lib)),
  ];
  return parts.join(', ');
}

Build Pipeline and Distribution

The repository includes a Node.js script that packages the JSON for external consumption. scripts/generate-style-skill.mjs reads data/style-library.json and generates the gpt-image-2-style-library npm package, allowing other projects to install the taxonomy as a versioned dependency rather than copying the raw JSON.

Summary

• The style library in GPT-Image2 is a single JSON file (data/style-library.json) serving as the single source of truth for all visual templates and taxonomies.
• The schema separates categories (gallery organization), styles (visual aesthetics), scenes (context), and templates (ready-made prompts) into distinct but linked arrays.
• Localization is built into every display field through title objects and the tagLabels mapping, supporting English and Chinese without code changes.
• The React frontend loads the library at runtime via fetch in src/main.jsx, storing it in global state for consumption by helper functions like formatTemplatePrompt.
• A build script (generate-style-skill.mjs) packages the JSON into a distributable npm module for external reuse.

Frequently Asked Questions

What file contains the complete style library in GPT-Image2?

The complete style library resides in data/style-library.json at the repository root. This single file contains the version metadata, taxonomy definitions, and all template configurations used by the application.

How does GPT-Image2 handle multiple languages in the style library?

The library uses a localization-first schema where every display string is stored as an object with en (English) and zh (Chinese) properties. The UI resolves the correct language at runtime using helper functions like localizeLabel and localizeTemplateTag, which check the tagLabels section when explicit translations are not embedded in the style or scene definitions.

Can I add new templates to GPT-Image2 without modifying the React code?

Yes. Because the UI consumes the JSON at runtime, you can add new templates, categories, styles, or scenes by editing data/style-library.json and redeploying. The frontend dynamically renders new entries based on the schema, requiring no JavaScript changes for content additions.

How are the style library templates converted into usable npm packages?

The repository includes scripts/generate-style-skill.mjs, which reads data/style-library.json and programmatically generates the gpt-image-2-style-library npm package. This allows other projects to install the taxonomy via npm install rather than manually managing the JSON file.

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