How Template Categories Are Defined in the Style Library

Template categories in the Awesome‑GPT‑Image‑2 project are defined as structured JSON objects within the categories array of data/style-library.json, each containing unique identifiers, localization fields, and anchor references that drive the UI navigation and template organization.

The Awesome‑GPT‑Image‑2 repository organizes its prompt templates into a hierarchical taxonomy managed through a central style library. Understanding how template categories are structured in the source data is essential for contributors adding new styles or developers integrating the library into custom front‑ends. This article examines the schema definition located in data/style-library.json and illustrates how the codebase consumes these definitions to render category navigation and link templates to their parent groups.

The Category Taxonomy Structure

The canonical definition for all template categories resides in the data/style-library.json file, specifically within the categories array at lines 32–88. This array contains the complete taxonomy used throughout the application, with each entry representing a distinct visual domain such as UI design, infographics, or photography.

The JSON structure follows a predictable schema designed to support both machine‑readable operations and human‑readable presentation:

"categories": [
  {
    "id": "cat-ui",
    "value": "UI & Interfaces",
    "anchor": "cat-ui",
    "templateAnchor": "tpl-ui",
    "cover": "/images/category-covers/ui.jpg",
    "title": { "en": "UI & Interfaces", "zh": "UI 与界面" },
    "description": {
      "en": "Apps, websites, dashboards, social screenshots, and product interfaces.",
      "zh": "App、网页、仪表盘、社媒截图与产品界面。"
    }
  }
]

Category Object Schema

Each category object in the categories array implements a consistent interface with seven required fields. These fields enable routing, localization, and visual presentation without requiring additional mapping logic in the application code.

id
A unique, machine‑readable identifier used to reference the category in code and URLs. According to the source, this follows the pattern cat-{slug}, such as "cat-ui" or "cat-infographic".

value
The canonical English display name for the category, used as a fallback and for internal reference.

anchor
The URL fragment identifier that links directly to the category’s section on the site. This typically mirrors the id field (e.g., "cat-ui"), enabling hash‑based navigation.

templateAnchor
A prefix string that establishes the relationship between categories and their child templates. All templates belonging to a category use this prefix in their own identifiers (e.g., templates under the UI category use "tpl-ui-*"). This field is critical for the getCategoryByTemplateAnchor lookup utility.

cover
An absolute path to the category’s cover image, displayed on category cards in the grid layout. Example: "/images/category-covers/ui.jpg".

title
A localization object containing display strings for supported languages. The schema mandates keys for "en" (English) and "zh" (Chinese), allowing the UI to switch languages without conditional logic.

description
A localization object containing short explanatory text for each language. This appears beneath the category title in the card interface.

Implementation in the Codebase

The frontend consumes the categories array directly from data/style-library.json to build navigation components. Below is a reference implementation demonstrating how the taxonomy drives the UI.

Rendering Category Cards

This React component iterates over the categories array to generate the grid interface:

// src/components/CategoryList.jsx
import categories from '../../data/style-library.json';

export default function CategoryList() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {categories.categories.map(cat => (
        <a href={`#${cat.anchor}`} key={cat.id} className="card">
          <img src={cat.cover} alt={cat.title.en} />
          <h3>{cat.title.en}</h3>
          <p>{cat.description.en}</p>
        </a>
      ))}
    </div>
  );
}

Linking Templates to Categories

The templateAnchor field enables reverse‑lookup functionality, allowing the application to determine a template’s parent category from its identifier prefix:

// src/utils/templateLookup.js
import library from '../../data/style-library.json';

/**
 * Return the category object for a given template anchor.
 * @param {string} tplAnchor – e.g. "tpl-ui"
 * @returns {object|null}
 */
export function getCategoryByTemplateAnchor(tplAnchor) {
  return library.categories.find(cat => cat.templateAnchor === tplAnchor) || null;
}

How Categories Drive Application Logic

The template categories defined in style-library.json serve three primary functions within the architecture:

1. Navigation and UI Rendering – The front‑end builds the category list using the title, description, and cover fields to render localized category cards without hardcoding content.

2. Template Linking – The templateAnchor prefix creates a clean mapping between categories and their associated templates. This convention allows the system to filter templates by category using simple string matching rather than complex relational queries.

3. Localization Support – By embedding en and zh strings directly in the category objects, the application supports bilingual interfaces natively. Components access the appropriate translation using bracket notation (e.g., category.title[locale]) without requiring external i18n libraries for this data.

Summary

• Template categories are defined in data/style-library.json within the categories array (lines 32–88).
• Each category requires seven fields: id, value, anchor, templateAnchor, cover, title, and description.
• The templateAnchor field uses a prefix convention (e.g., "tpl-ui") to link templates to their parent categories.
• Localization is handled inline via title and description objects containing en and zh keys.
• The React frontend consumes this JSON directly to render navigation and support bilingual content switching.

Frequently Asked Questions

What file contains the template category definitions?

All template categories are defined in data/style-library.json at the root of the Awesome‑GPT‑Image‑2 repository. The specific array containing category objects begins at line 32 and extends through line 88 in the current version of the main branch.

How does the templateAnchor field work?

The templateAnchor field acts as a namespace prefix. Every template belonging to a specific category uses this value as the prefix for its own identifier. For example, all UI templates use identifiers starting with "tpl-ui", allowing the getCategoryByTemplateAnchor utility to match templates to their category by checking if the template’s ID begins with the category’s templateAnchor value.

Does the style library support languages other than English?

Yes, the schema supports bilingual localization. The title and description fields are objects containing both "en" (English) and "zh" (Chinese) keys. This structure allows the frontend to render category names and descriptions in either language by simply accessing the appropriate object key without additional translation logic.

How do I add a new template category to the project?

To add a new category, append a new object to the categories array in data/style-library.json. Ensure you provide a unique id (following the cat-{name} convention), a corresponding templateAnchor (following tpl-{name}), paths to a cover image, and localized strings for both English and Chinese in the title and description fields.

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