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

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
Vite Build	Development server (npm run dev) and production bundling	vite.config.js
Supabase Auth	User sign-in, favorites sync, and credit balance management	src/supabaseClient.js
APIMart Integration	Async image generation API client	src/apimartClient.js
Static Data	Case library and style definitions	data/style-library.json, docs/gallery.md
Analytics	Google Analytics 4 via environment variables	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:

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 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) provides five primary sections:

• Cases — Full prompt gallery with 544 curated entries
• Templates — Industrial prompt patterns from 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, 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, making localization straightforward:

// 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:

// 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:

Method 1: Platform Credits (Requires Sign-In)

Authenticated users consume platform credits through Supabase-managed balances:

// 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:

// 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 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:

// 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) handles concurrent updates safely.

Exploring Templates and Style Libraries

Industrial Prompt Templates

The Templates section sources from docs/templates.md, containing reusable prompt patterns for:

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

JSON Style Library

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. This ensures consistency across the GPT-Image2 ecosystem.

// 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) 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 (UI), src/apimartClient.js (generation), src/supabaseClient.js (auth)
• Two generation modes: Platform credits (authenticated) or personal APIMart API key (localStorage)
• Data sources: docs/gallery.md (cases), data/style-library.json (styles), 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 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 (544 cases, split for performance) and data/style-library.json. Dynamic features (favorites, credits) use Supabase.

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