# How to Customize Image Generation in awesome-gpt-image-2: A Complete Guide

> Unlock advanced image customization in awesome-gpt-image-2. Learn to modify style definitions and use custom options for unique AI-generated visuals. Get the complete guide now.

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

---

**Customize image generation in `awesome-gpt-image-2` by modifying style definitions in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) or passing additional parameters through the `customOptions` object in [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js), which merges with the request payload sent to the backend `/api/generate-image` endpoint.**

The `freestylefly/awesome-gpt-image-2` repository is a Vite-powered React application that generates images using the APIMart GPT-Image-2 model. Customizing the output requires understanding how the frontend constructs requests via the **apimartClient** and how the backend [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) route processes them.

## Understanding the Image Generation Architecture

The application follows a clear data flow from UI to model:

```

UI → apimartClient → /api/generate-image → APIMart model → image URL → UI

```

The frontend logic resides in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx), while the style selection interface is implemented in [`src/image25/App.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/App.jsx). The client-side API wrapper [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) constructs the payload, which the backend route forwards to the `APIMART_MODEL` (set to `"gpt-image-2"`). Any modifications to the generation behavior happen either in the **style library** configuration or by extending the client payload.

## Customizing Image Styles via the Style Library

The predefined aesthetics and generation parameters live in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json). Each style entry controls keywords, temperature, and dimensions.

### Adding New Styles to data/style-library.json

To create a new visual style, add an object to the JSON array with the required fields:

```json
{
  "styles": [
    {
      "name": "Neon-Cyberpunk",
      "description": "Bright neon colours, futuristic cityscape",
      "keywords": ["neon", "cyberpunk", "high-contrast"],
      "temperature": 0.9,
      "size": "1024x1024"
    }
  ]
}

```

The `keywords` array defines the stylistic tokens passed to the model, while `temperature` and `size` override default generation settings. The backend route passes these values directly to the APIMart API.

### Rendering Available Styles in the UI

The component [`src/image25/App.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/App.jsx) dynamically renders style buttons by reading the library. When you add a new entry to [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json), it automatically appears as a selectable option:

```jsx
{styles.map(s => (
  <button key={s.name}
          className={s.name === selected ? 'active' : ''}
          onClick={() => setSelected(s.name)}>
    {s.name}
  </button>
))}

```

This mapping ensures the UI stays synchronized with the JSON configuration without requiring manual component updates.

## Extending Generation Parameters with Custom Options

For per-request customization beyond static style definitions, the client supports dynamic parameter injection.

### Modifying apimartClient.js to Accept Extra Options

The `generateImage` function in [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) accepts a third argument, `customOptions`, which spreads into the final payload:

```javascript
export async function generateImage(prompt, styleName, customOptions = {}) {
  const style = await getStyleByName(styleName);   // reads from style-library.json
  const payload = {
    prompt,
    style: style.keywords,
    temperature: style.temperature ?? 0.7,
    size: style.size ?? "1024x1024",
    ...customOptions               // ← new fields are merged here
  };

  const response = await fetchImpl('/api/generate-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
  return response.json();   // { imageUrl: "..."}
}

```

This pattern allows you to pass model-specific flags like `seed` or `guidanceScale` without modifying the backend logic.

### Passing Dynamic Parameters from the UI

In [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx), you can invoke the generator with temporary overrides:

```jsx
import { generateImage } from './apimartClient';

function onGenerate() {
  const prompt = promptInputRef.current.value;
  const style = selectedStyle;               // comes from UI selection
  const extra = { seed: 42, guidanceScale: 7 }; // any extra model-specific flags
  generateImage(prompt, style, extra)
    .then(({ imageUrl }) => setImageSrc(imageUrl));
}

```

These values override the defaults from the style library for that specific request only.

## Backend Integration Points

The server-side route [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) receives the constructed payload and forwards it to the APIMart model. Because the route uses the same field names that [`apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/apimartClient.js) sends, any keys you add to the client payload automatically flow through to the image generation API without requiring server-side changes.

## Summary

- **Style definitions** are stored in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) and automatically populate the UI via [`src/image25/App.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/App.jsx).
- **Parameter customization** happens in [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) through the `customOptions` spread operator, allowing injection of fields like `seed`, `guidanceScale`, or `temperature`.
- **Frontend entry point** is [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx), which gathers user input and triggers the generation flow.
- **Backend route** [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) transparently forwards all payload fields to the APIMart GPT-Image-2 model.

## Frequently Asked Questions

### Where are image style definitions stored in awesome-gpt-image-2?

Style definitions reside in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json). Each entry includes a `name`, `description`, `keywords` array for model tokens, and optional generation parameters like `temperature` and `size`. The UI component [`src/image25/App.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/App.jsx) reads this file to render available style buttons.

### How do I pass custom parameters like seed or guidance scale?

Pass an object as the third argument to `generateImage()` in [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js). The function spreads `customOptions` into the request payload, merging your values with the selected style's defaults. For example: `generateImage(prompt, style, { seed: 12345, guidanceScale: 8 })`.

### Can I modify the image generation endpoint or model?

The backend route [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) handles all requests. It forwards the payload to `APIMART_MODEL` (currently set to `"gpt-image-2"`). While you can modify the route file to point to different endpoints, the existing implementation passes through all client-provided fields, making it flexible enough for most customization needs without changing the endpoint URL.

### How does the UI know which styles are available?

The [`src/image25/App.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/App.jsx) component maps over the styles array imported from [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json). Adding a new style object to the JSON file immediately adds a new button to the interface, as the component dynamically generates the selection UI based on the library contents.