# Awesome GPT Image 2 Demo and Example Usage: Complete Guide

> Explore the awesome-gpt-image-2 repo for live demos and a local React Node.js implementation. Get hands-on experience with GPT-Image-2 models today.

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

---

**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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) and route to the specific generation task IDs stored in [`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js) and [`src/image25/additionalCases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/additionalCases.js), while dynamic metadata resides in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/App.jsx).
- **Styling**: Component-specific styles live in [`src/image25/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/styles.css), with global utilities in [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css).

### API Layer

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

- **[`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js)**: Accepts prompts, forwards them to the image model, and returns a task ID.
- **[`api/generation/status.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generation/status.js)**: Polls for generation progress (queued, running, or finished).
- **[`api/generation/callback.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generation/callback.js)**: Handles webhook callbacks for asynchronous completion events.

### Data and Client Layers

- **Supabase Integration**: [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) initializes the client for user authentication and credit tracking, ensuring secrets remain in environment variables.
- **Apimart Client**: [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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:

```javascript
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:

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

```javascript
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:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)**: Vite entry point that mounts the React application.
- **[`src/image25/App.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/App.jsx)**: Core gallery component managing case display and demo state logic.
- **[`src/image25/cases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js)**: Static array of primary demonstration cases.
- **[`src/image25/additionalCases.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/additionalCases.js)**: Extended list of example scenarios.
- **[`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json)**: JSON catalog containing prompts, metadata, and generation flags for all demos.
- **[`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js)**: HTTP client wrapper for the Apimart billing and plan API.
- **[`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js)**: Supabase client initialization for auth and database operations.
- **[`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js)**: Backend route interfacing with OpenAI's image generation API.
- **[`api/generation/status.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/App.jsx).
- The **backend** provides image generation endpoints in [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) and status tracking in [`api/generation/status.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generation/status.js).
- **Authentication and billing** are handled through Supabase ([`supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/supabaseClient.js)) and Apimart ([`apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/apimartClient.js)) integrations.
- All demo metadata is stored in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js).

### Where are the API credentials configured?

Sensitive configuration resides in environment variables referenced by `.env.example`. The [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) and [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.