Awesome GPT Image 2 Demo and Example Usage: Complete Guide

The awesome-gpt-image-2 repository provides multiple live demo URLs showcasing GPT-Image-2 and GPT-Image-2.5 models, plus a full-stack React and Node.js reference implementation you can run locally.

The freestylefly/awesome-gpt-image-2 project demonstrates how to integrate OpenAI's image generation APIs into a production-ready web gallery. This guide covers the hosted demo instances, breaks down the Vite and React architecture, and provides copy-paste code examples extracted directly from the source.

Live Demo URLs for GPT-Image-2

The project maintains four public "real recreation" galleries accessible via query-string parameters. Each URL loads the React interface defined in src/image25/App.jsx and renders a side-by-side comparison of source prompts and AI-generated results:

• Lemon Campaign: https://gpt-image2.canghe.ai/gpt-image-2-5/?lang=en&case=gallery-532-test
• Rio Diorama: https://gpt-image2.canghe.ai/gpt-image-2-5/?lang=en&case=gallery-527-test
• Manhattan Watercolor: https://gpt-image2.canghe.ai/gpt-image-2-5/?lang=en&case=gallery-523-test
• Bichon Shop Icon: https://gpt-image2.canghe.ai/gpt-image-2-5/?lang=en&case=gallery-510-test

These endpoints read case metadata from data/cases.json and route to the specific generation task IDs stored in src/image25/cases.js.

Architecture Overview

The demo consists of three primary layers: a Vite-powered React frontend, an Express-style API backend, and Supabase for authentication and credit management.

Frontend Layer

The browser interface handles gallery navigation, case selection, and image display. Key responsibilities include:

• Case Management: Static case lists are imported from src/image25/cases.js and src/image25/additionalCases.js, while dynamic metadata resides in data/cases.json.
• Demo Mode Logic: When generated === false in the case data, the UI displays an "Illustration" label as implemented in src/image25/App.jsx.
• Styling: Component-specific styles live in src/image25/styles.css, with global utilities in src/styles.css.

API Layer

The backend proxies requests to OpenAI's image generation endpoints and manages asynchronous task status:

• api/generate-image.js: Accepts prompts, forwards them to the image model, and returns a task ID.
• api/generation/status.js: Polls for generation progress (queued, running, or finished).
• api/generation/callback.js: Handles webhook callbacks for asynchronous completion events.

Data and Client Layers

• Supabase Integration: src/supabaseClient.js initializes the client for user authentication and credit tracking, ensuring secrets remain in environment variables.
• Apimart Client: src/apimartClient.js wraps the internal billing service for plan management and usage metering.

Code Examples from the Repository

The following snippets demonstrate how to embed the demo components or interact with the API directly. All file paths reference the freestylefly/awesome-gpt-image-2 source tree.

1. Embedding the Gallery Component

To integrate the image comparison gallery into your own React application, import the main App component from the image25 module:

import React from 'react';
import Gallery from './src/image25/App.jsx';

function MyDemoPage() {
  // Initialize with a specific case ID from data/cases.json
  return <Gallery initialCaseId="gallery-532-test" />;
}

export default MyDemoPage;

This renders the same interface shown at the live demo URLs, including the case selector and before/after views.

2. Generating Images via the API

Use the apimartClient wrapper to submit generation requests through the backend:

import { createClient } from './src/apimartClient.js';

const client = createClient({ apiKey: process.env.APIMART_API_KEY });

async function generateImage(prompt) {
  const response = await client.post('/api/generate-image', { prompt });
  return response.data; // Returns { taskId, imageUrl, status }
}

The client handles authentication headers and base URL configuration automatically.

3. Checking Generation Status

Poll for completion using the status endpoint defined in api/generation/status.js:

async function checkStatus(taskId) {
  const { data } = await client.get(`/api/generation/status?taskId=${taskId}`);
  console.log('Generation status:', data.status);
  // Status values: 'queued', 'running', 'completed', 'failed'
}

4. User Authentication with Supabase

Implement login functionality using the Supabase client wrapper:

import { createClient as createSupabase } from './src/supabaseClient.js';

const supabase = createSupabase({
  supabaseUrl: process.env.SUPABASE_URL,
  supabaseKey: process.env.SUPABASE_ANON_KEY
});

async function signInUser(email, password) {
  const { user, error } = await supabase.auth.signIn({ email, password });
  if (error) throw error;
  return user;
}

Key Source Files

Understanding the repository structure helps you navigate the demo implementation effectively:

• src/main.jsx: Vite entry point that mounts the React application.
• src/image25/App.jsx: Core gallery component managing case display and demo state logic.
• src/image25/cases.js: Static array of primary demonstration cases.
• src/image25/additionalCases.js: Extended list of example scenarios.
• data/cases.json: JSON catalog containing prompts, metadata, and generation flags for all demos.
• src/apimartClient.js: HTTP client wrapper for the Apimart billing and plan API.
• src/supabaseClient.js: Supabase client initialization for auth and database operations.
• api/generate-image.js: Backend route interfacing with OpenAI's image generation API.
• api/generation/status.js: Endpoint for retrieving asynchronous task status.

Running the Demo Locally

To launch the example usage on your development machine:

1. Clone the repository: git clone https://github.com/freestylefly/awesome-gpt-image-2.git
2. Install dependencies: npm install
3. Configure environment variables by copying .env.example to .env and filling in your Supabase and Apimart credentials.
4. Start the development server: npm run dev
5. Navigate to http://localhost:5173 to view the demo.

The Vite dev server serves the React frontend while concurrently running the API routes under the /api path.

Summary

• Live demos are accessible via four permanent URLs hosted at gpt-image2.canghe.ai, each loading a specific case study via query parameters.
• The frontend is a React/Vite application located in src/image25/, with case logic centralized in App.jsx.
• The backend provides image generation endpoints in api/generate-image.js and status tracking in api/generation/status.js.
• Authentication and billing are handled through Supabase (supabaseClient.js) and Apimart (apimartClient.js) integrations.
• All demo metadata is stored in data/cases.json, making it easy to add new examples without modifying component code.

Frequently Asked Questions

How do I view a specific demo case without browsing the gallery?

Append the case query parameter to the base URL with the ID found in data/cases.json. For example, https://gpt-image2.canghe.ai/gpt-image-2-5/?lang=en&case=gallery-532-test loads the Lemon Campaign demo directly. The src/image25/App.jsx component parses this parameter on mount and sets the active case accordingly.

What is the difference between "demo" and "real" cases in the codebase?

Demo cases have generated: false in data/cases.json, which triggers the UI to display an "Illustration" label and disclaimer that the images are simulated. Real cases have generated: true and display actual API-generated results retrieved from the backend.

Can I use the image generation API without the React frontend?

Yes. The api/generate-image.js endpoint accepts raw POST requests with a JSON payload containing the prompt. You can call this endpoint directly using curl, Postman, or any HTTP client, provided you include valid authentication headers managed by src/apimartClient.js.

Where are the API credentials configured?

Sensitive configuration resides in environment variables referenced by .env.example. The src/supabaseClient.js and src/apimartClient.js files import SUPABASE_URL, SUPABASE_ANON_KEY, and APIMART_API_KEY from process.env, ensuring credentials never appear in the source code.

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