# How to Use the GPT-Image2 Gallery Browser Website: A Complete Guide

> Master the GPT-Image2 gallery browser website. Browse, edit, and generate AI images from 544+ prompts. Use credits or your own API key for stunning visuals.

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

---

**TLDR:** The GPT-Image2 gallery browser is a React-based single-page application where you can browse 544+ curated AI image prompts, copy and edit them, and generate test images using either platform credits or your own APIMart API key.

The **GPT-Image2** gallery browser, available at `https://gpt-image2.canghe.ai`, is an open-source React application designed for exploring, testing, and sharing AI-generated image prompts. Built with Vite and integrated with Supabase for auth and APIMart for image generation, it serves both as a prompt discovery tool and a lightweight testing environment. This guide walks through every feature based on the actual source code implementation in the `freestylefly/awesome-gpt-image-2` repository.

## Core Architecture and Key Components

Understanding the component structure helps you navigate the codebase and troubleshoot issues. The application follows a clean separation between UI rendering, data storage, and external API calls.

| Component | Role | Key Source File |
|-----------|------|---------------|
| **React UI** | Renders gallery, search, modals, and generation dialogs using `lucide-react` icons | [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) |
| **Vite Build** | Development server (`npm run dev`) and production bundling | [`vite.config.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js) |
| **Supabase Auth** | User sign-in, favorites sync, and credit balance management | [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) |
| **APIMart Integration** | Async image generation API client | [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) |
| **Static Data** | Case library and style definitions | [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json), [`docs/gallery.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery.md) |
| **Analytics** | Google Analytics 4 via environment variables | [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) (line 69) |

## Getting Started: Local Development vs. Production

### Running the Gallery Locally

To explore or modify the GPT-Image2 gallery browser website, clone the repository and start the Vite development server:

```bash
git clone https://github.com/freestylefly/awesome-gpt-image-2.git
cd awesome-gpt-image-2
npm install
npm run dev

```

The [`vite.config.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js) configures the build pipeline, while environment variables (prefixed with `VITE_`) control external integrations like GA4 measurement ID via `VITE_GA_MEASUREMENT_ID`.

### Production Deployment

The live site runs at `https://gpt-image2.canghe.ai`. All features described below work identically in both environments, though local development requires manual APIMart API key configuration for generation testing.

## Navigating the GPT-Image2 Gallery Interface

### Main Navigation Structure

The navigation bar (`navCases` in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)) provides five primary sections:

- **Cases** — Full prompt gallery with 544 curated entries
- **Templates** — Industrial prompt patterns from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)
- **Skill** — Documentation for the GPT-Image2 Agent skill
- **Community** — WeChat group QR code (`communityQrAlt`)
- **Membership** — Paid features via Stripe/Alipay (Supabase RPCs)

### Browsing and Filtering Cases

The gallery loads case data from [`docs/gallery.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery.md), split into two parts for performance optimization. Use these interaction patterns:

1. **Keyword search** — Type in the top-right search field (`search` state) to filter by content
2. **Category filtering** — Filter by *Category*, *Style*, or *Scene* using the dropdown menus
3. **Pagination** — Large datasets render incrementally to maintain responsiveness

All UI text is centralized in the `copy` object within [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx), making localization straightforward:

```javascript
// From src/main.jsx - UI string structure
const copy = {
  title: 'Live GPT-Image2 prompt gallery',
  subtitle: 'Browse, copy, and test professional AI image prompts',
  // ... additional strings
};

```

## Viewing Case Details and Copying Prompts

### The Details Modal

Clicking any case opens `viewDetails` modal containing:

- **Original generated image** — Full-resolution preview
- **Editable prompt** — `editablePrompt` field for modification
- **Copy functionality** — `copyPrompt` copies to clipboard
- **Metadata** — Category, style tags, and generation parameters

### Prompt Editing Best Practices

The `editablePrompt` field accepts any text modification. Consider these patterns when adapting prompts:

```javascript
// Example: Copy and modify a case prompt
const originalPrompt = `A hyper-realistic portrait of an elderly craftsman in his woodworking studio, golden hour lighting, dust particles in sunbeams, 85mm lens, shallow depth of field, film grain texture`;

// Modified version for your use case
const modifiedPrompt = originalPrompt
  .replace('woodworking studio', 'blacksmith forge')
  .replace('elderly craftsman', 'young apprentice');

```

## Generating Test Images in the GPT-Image2 Gallery

The GPT-Image2 gallery browser website supports two generation modes via [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js):

### Method 1: Platform Credits (Requires Sign-In)

Authenticated users consume platform credits through Supabase-managed balances:

```javascript
// From src/apimartClient.js - Platform generation flow
import { submitPlatformGeneration } from './apimartClient';

submitPlatformGeneration(prompt, {
  userId: supabase.auth.user().id,
  onProgress: (percentage) => updateProgressBar(percentage),
  onSuccess: (result) => displayGeneratedImage(result.url),
  onError: (error) => showErrorToast(error.message),
});

```

### Method 2: Personal APIMart API Key

Unauthenticated or quota-exhausted users can use personal API keys:

```javascript
// Complete personal generation example
import { submitPersonalGeneration } from './apimartClient';

// Retrieve key from browser localStorage
const getStoredApimartKey = () => localStorage.getItem('apimart_api_key');

// Submit generation with progress tracking
submitPersonalGeneration(prompt, {
  apiKey: getStoredApimartKey(),
  onProgress: pct => {
    console.log(`Generation progress: ${pct}%`);
    // Update UI: apimartProgress state
  },
  onSuccess: result => {
    console.log('Image URL:', result.url);
    // Display in gallery or download
  },
  onError: err => {
    console.error('Generation failed:', err);
    // Handle rate limits, invalid keys, etc.
  },
});

```

**Security note:** The `apimartKeysUrl` parameter only stores keys in browser localStorage—never transmitted to the gallery's backend servers.

### Monitoring Generation Progress

Both methods expose `apimartProgress` callbacks. The APIMart async API requires polling; [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) handles this automatically with configurable intervals.

## Managing Favorites and User Data

### Saving Favorite Cases

Signed-in users toggle favorites via the heart icon, persisted to Supabase:

```javascript
// Favorite toggle implementation
import { supabase } from './supabaseClient';

async function toggleFavorite(caseId, currentFavStatus) {
  const user = supabase.auth.user();
  
  const { data, error } = await supabase
    .from('favorites')
    .upsert({
      case_id: caseId,
      user_id: user.id,
      favorited: !currentFavStatus,
      updated_at: new Date().toISOString()
    }, {
      onConflict: 'case_id,user_id'
    });
    
  if (error) {
    console.error('Failed to update favorite:', error);
    return false;
  }
  
  return !currentFavStatus;
}

```

### Data Synchronization

Favorites sync across devices via Supabase real-time subscriptions. The `saveFavoriteCase` RPC (defined in migration files like [`supabase/migrations/20260721090000_alipay_webpay.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/supabase/migrations/20260721090000_alipay_webpay.sql)) handles concurrent updates safely.

## Exploring Templates and Style Libraries

### Industrial Prompt Templates

The **Templates** section sources from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), containing reusable prompt patterns for:

- Product photography
- Architectural visualization
- Character design
- Landscape generation

### JSON Style Library

[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) provides structured style definitions shared between the website and the Agent skill at [`agents/skills/gpt-image-2-style-library/SKILL.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/SKILL.md). This ensures consistency across the GPT-Image2 ecosystem.

```json
// Excerpt from data/style-library.json
{
  "styles": [
    {
      "id": "cinematic",
      "name": "Cinematic",
      "descriptors": ["anamorphic lens", "dramatic lighting", "color grading"],
      "negative_prompt": "blurry, overexposed"
    }
  ]
}

```

## Community and Membership Features

### Joining the WeChat Community

The **Community** page displays `communityQrAlt`—a QR code linking to the active user group. No authentication required to view.

### Membership Tiers

Paid features (processed via Stripe and Alipay per [`supabase/migrations/20260721090000_alipay_webpay.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/supabase/migrations/20260721090000_alipay_webpay.sql)) include:

- Extended generation quotas
- Priority API access
- Commercial usage rights

Membership state queries use Supabase RPCs for secure server-side payment verification.

## Summary

- **The GPT-Image2 gallery browser** is a React + Vite single-page app for exploring 544+ curated AI image prompts
- **Core files:** [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) (UI), [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) (generation), [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) (auth)
- **Two generation modes:** Platform credits (authenticated) or personal APIMart API key (localStorage)
- **Data sources:** [`docs/gallery.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery.md) (cases), [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) (styles), [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) (templates)
- **Favorites and membership** require Supabase authentication with real-time sync

## Frequently Asked Questions

### How do I add my own API key for image generation?

Navigate to the **APIMart API settings** panel and paste your key. It stores locally in browser `localStorage` only—never on gallery servers. Use `submitPersonalGeneration` from [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) for testing.

### Can I use the GPT-Image2 gallery without creating an account?

Yes. Browse all cases, copy prompts, and generate images using a personal APIMart API key. Favorites, platform credits, and membership features require Supabase sign-in.

### Where does the gallery load its case data from?

Static content comes from [`docs/gallery.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/gallery.md) (544 cases, split for performance) and [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json). Dynamic features (favorites, credits) use Supabase.