How to Generate Brand Logos with GPT-Image-2: A Complete Technical Guide

To generate brand logos with GPT-Image-2, structure your prompt using the Subject → Scene → Composition → Style → Details → Output template, then POST to the Ciyuan API endpoint with model gpt-image-2, or use the built-in React frontend in src/main.jsx which handles credit reservation and returns a base64-encoded PNG.

The freestylefly/awesome-gpt-image-2 repository provides a full-stack implementation for creating images with OpenAI's GPT-Image-2 model. For brand logos specifically, the codebase implements a structured prompting system via data/style-library.json and a credit-managed generation pipeline. This guide explains how to generate professional brand logos using the repository's API endpoints, frontend components, and template system.

Understanding the GPT-Image-2 Generation Pipeline

The generation flow in freestylefly/awesome-gpt-image-2 follows a five-step process that ensures reliable quota management and clean image delivery.

Front-End Request Collection

In src/main.jsx, the UI collects the user's prompt and sends a POST request to the internal endpoint api/generate-image.js. The frontend stores successful generations in localStorage under the key gpt-image-2-generated-tests:v1 for persistence across page reloads.

Authentication and Credit Reservation

The api/generate-image.js file validates user sessions via api/_lib/supabase.js, checking credit balances before generation. If the user lacks quota, the API returns a 402 CREDITS_REQUIRED status. The system creates a reservation via reserveGeneration or reserveCreditGeneration to ensure credits are only deducted after successful image creation.

Ciyuan API Integration

The core generateImage(prompt) function in api/generate-image.js issues a POST request to https://ciyuan.today/v1/images/generations with the model parameter set to gpt-image-2. The service returns a base64 JPEG that the API converts to a data URL format (data:image/jpeg;base64,…) before responding to the client.

Crafting High-Conversion Brand Logo Prompts

Effective logo generation depends on structured prompts that guide the model toward vector-style, scalable outputs.

The Template Structure

According to the source code in src/main.jsx, prompts should follow the formatTemplatePrompt structure:

• Subject: a modern logo for [Brand Name]
• Scene: placed on a clean white background
• Composition: centered, scalable vector style
• Style: [primary color], [secondary color], minimal line work
• Text: optional tagline in [font style]
• Details: keep the icon simple, avoid gradients
• Output: high-resolution PNG, transparent background

Leveraging the Style Library

The data/style-library.json file contains a "Brand" category with predefined tags like logo, brand-palette, minimal, and vector-style. Including these tags reduces model hallucination and ensures consistent visual direction.

Code Implementation Examples

Direct API Call with Node.js

For server-side implementations, call the Ciyuan API directly:

// Replace with your own CIYUAN_API_KEY (set in .env)
const CIYUAN_API_KEY = process.env.CIYUAN_API_KEY;

// Prompt that follows the "brand logo" template
const prompt = `Subject: a sleek logo for "SolarPulse"
Scene: white background
Composition: centered, vector-style
Style: deep-blue and bright-orange, minimal line art
Text: optional "SolarPulse" in a clean sans-serif font
Details: no gradients, keep the icon simple
Output: 1024x1024 PNG with transparent background`;

fetch('https://ciyuan.today/v1/images/generations', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${CIYUAN_API_KEY}`,
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
  body: JSON.stringify({
    model: 'gpt-image-2',
    prompt,
    n: 1,
    size: '1024x1024',
    quality: 'low',
    format: 'png',
  }),
})
  .then(r => r.json())
  .then(({ data }) => {
    const b64 = data?.[0]?.b64_json;
    console.log('Logo data URL:', `data:image/png;base64,${b64}`);
  })
  .catch(console.error);

React Frontend Integration

Use the repository's built-in UI pattern for client-side generation:

import { useState } from 'react';
import { copy } from './main.jsx';   // localisation bundle
import { generateImage } from '../api/generate-image.js'; // internal helper

function BrandLogoGenerator() {
  const [prompt, setPrompt] = useState(
    `Subject: logo for "NimbusTech"
Scene: clean white canvas
Composition: centered, vector-style
Style: teal & charcoal, minimal line work
Text: "NimbusTech" in modern sans-serif
Details: no gradients, keep shapes simple
Output: 1024x1024 PNG`);
  const [image, setImage] = useState(null);
  const [status, setStatus] = useState('idle');

  const handleGenerate = async () => {
    setStatus('generating');
    try {
      // fake caseId = 0 because we are not using a stored case
      const res = await fetch('/api/generate-image', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt, caseId: 0 }),
      });
      const json = await res.json();
      if (json.ok) setImage(json.image);
      else alert(`Error: ${json.error}`);
    } catch (e) {
      console.error(e);
    } finally {
      setStatus('idle');
    }
  };

  return (
    <div>
      <textarea value={prompt} onChange={e => setPrompt(e.target.value)} rows={6} />
      <button onClick={handleGenerate} disabled={status === 'generating'}>
        {status === 'generating' ? copy.en.generating : copy.en.generateImage}
      </button>
      {image && <img src={image} alt="Generated brand logo" />}
    </div>
  );
}

Using Predefined Templates

Access the style library programmatically:

import styleLibrary from '../data/style-library.json';
import { formatTemplatePrompt } from '../src/main.jsx';

// Grab the "Brand" template (id 23 in the library, for example)
const brandTemplate = styleLibrary.templates.find(t => t.category === 'Brand');
const prompt = formatTemplatePrompt(brandTemplate, 'en', styleLibrary);
console.log('Prompt ready for GPT-Image-2:', prompt);

Summary

• The generation pipeline in api/generate-image.js handles authentication via Supabase, credit reservation, and Ciyuan API communication
• Structure brand logo prompts using the Subject → Scene → Composition → Style → Details → Output template format recognized by formatTemplatePrompt
• Reference the "Brand" category in data/style-library.json for consistent tag usage including vector-style and minimal
• Store generated images in localStorage using key gpt-image-2-generated-tests:v1 for persistence across sessions
• Handle 402 CREDITS_REQUIRED errors when users exhaust their generation quota before calling the external service

Frequently Asked Questions

What file handles the credit check before generating a logo?

The api/generate-image.js endpoint validates user credits through api/_lib/supabase.js using the reserveGeneration RPC call. If insufficient credits exist, it returns HTTP status 402 before calling the external API, preventing quota exhaustion.

How do I ensure my logo prompts generate vector-style outputs?

Include specific constraints in the Details section of your prompt template, such as "minimal line work," "no gradients," and "scalable vector style." The data/style-library.json Brand category includes the vector-style tag specifically for this purpose, reducing the likelihood of photorealistic renders.

Can I use the repository's frontend components for commercial logo generation?

The React components in src/main.jsx support commercial use through the credit reservation system implemented in api/_lib/supabase.js. The code checks user quotas via Supabase before each generation, making it suitable for paid tier implementations where you charge per logo generation.

What is the maximum resolution for GPT-Image-2 brand logos?

According to the API implementation in api/generate-image.js, specify size: '1024x1024' and format: 'png' in your request payload to receive high-resolution outputs suitable for brand assets. The Ciyuan service returns base64-encoded JPEGs that the API converts to data URLs for immediate frontend display.

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