# How Template Categories Are Defined in the Style Library

> Discover how template categories are defined in the style library using structured JSON objects. Learn about identifiers, localization, and anchor references for UI organization.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-08-28

---

**Template categories in the Awesome‑GPT‑Image‑2 project are defined as structured JSON objects within the `categories` array of [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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:

```json
"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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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:

```jsx
// 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:

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.