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

Customize image generation in awesome-gpt-image-2 by modifying style definitions in data/style-library.json or passing additional parameters through the customOptions object in 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 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, while the style selection interface is implemented in src/image25/App.jsx. The client-side API wrapper 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. 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:

{
  "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 dynamically renders style buttons by reading the library. When you add a new entry to data/style-library.json, it automatically appears as a selectable option:

{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 accepts a third argument, customOptions, which spreads into the final payload:

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, you can invoke the generator with temporary overrides:

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 receives the constructed payload and forwards it to the APIMart model. Because the route uses the same field names that 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 and automatically populate the UI via src/image25/App.jsx.
• Parameter customization happens in src/apimartClient.js through the customOptions spread operator, allowing injection of fields like seed, guidanceScale, or temperature.
• Frontend entry point is src/main.jsx, which gathers user input and triggers the generation flow.
• Backend route 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. 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 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. 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 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 component maps over the styles array imported from 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.

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