Architecture of Awesome-GPT-Image-2: Full-Stack Serverless Breakdown

Awesome-GPT-Image-2 is a full-stack, serverless web application that combines a React front-end, Vite-served API endpoints, and reusable agent skill libraries to orchestrate AI image generation, billing, and user management.

The freestylefly/awesome-gpt-image-2 repository implements a micro-service style architecture where each functional domain—authentication, generation, billing, and community—operates through isolated serverless functions. This design leverages Supabase for persistent storage, APIMart for AI model inference, and supports hybrid payment processing through Stripe and Alipay.

Core Architectural Layers

Frontend Layer (React + Vite)

The user interface is built as a React application bundled with Vite, serving static assets from the data/ directory. The build configuration in vite.config.js defines multiple entry points, including index.html for the main gallery and gpt-image-2-5/index.html for the GPT-Image-2.5 spotlight page. Client-side authentication and database interactions utilize src/supabaseClient.js, which initializes the Supabase client using environment variables VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY.

Serverless API Layer

All backend logic is deployed as serverless functions (optimized for Vercel) under the api/ directory. Each file exports a route-specific handler, such as api/generate-image.js for image creation or api/billing/checkout.js for payment initiation. Shared utilities—including APIMart wrappers, Supabase clients, and generation orchestrators—live in api/_lib/ to prevent code duplication across endpoints.

Database and Authentication (Supabase)

User accounts, credit balances, favorites, and community data persist in Supabase. The client-side integration in src/supabaseClient.js handles anonymous authentication, while privileged server-side operations import api/_lib/supabase.js configured with service-role permissions. The platform utilizes Supabase RPCs (Remote Procedure Calls) for atomic credit deductions and membership plan management.

AI Generation Backend (APIMart)

The core generation pipeline interfaces with APIMart (or HiAPI) through api/_lib/apimart.js, which wraps the external HTTP API for task submission, status polling, and refunds. When a user triggers generation, api/generate-image.js forwards the prompt payload to APIMart, stores the returned task ID in Supabase, and initiates cost deduction. Asynchronous result delivery is handled via polling endpoints in api/generation/status.js or webhook callbacks.

Payment and Community Systems

The architecture supports dual payment flows: Stripe for standard credit purchases and Alipay for QR-code-based community access. The Stripe implementation resides in api/billing/checkout.js and api/billing/webhook.js, while Alipay functionality is isolated under api/community/alipay/checkout.js. Both systems interact with Supabase to update user credit balances upon successful transaction confirmation.

Agent Skill Library

A distinct programmatic interface exposes the same prompt templates used by the UI to AI agents such as Claude and Codex. Packaged under agents/skills/gpt-image-2-style-library/, this layer reads from data/style-library.json—generated by scripts/generate-style-skill.mjs—allowing agents to retrieve and customize prompt templates via CLI commands.

Request Lifecycle and Data Flow

The architecture follows a strict request lifecycle that decouples the front-end from long-running AI processes:

1. Authentication: User visits the React UI, and Vite serves static assets while the client calls /api/me to fetch the user profile from Supabase.
2. Prompt Selection: The UI loads prompt templates from data/style-library.json, allowing variable modification before submission.
3. Task Submission: The front-end POSTs to /api/generate-image, which invokes api/_lib/apimart.js to submit the job to APIMart and records the task metadata and cost in Supabase.
4. Async Polling: The client periodically queries /api/generation/status?taskId={id} until the response returns { status: 'completed', imageUrl: string }.
5. Credit Management: If generation succeeds, Supabase RPCs deduct credits atomically; if credits are insufficient, the UI redirects to /api/billing/checkout (Stripe) or /api/community/alipay/checkout (Alipay).
6. Administration: Administrative routes under api/admin/* provide user statistics, manual credit adjustments, and community refund capabilities.

Implementation Examples

Submitting Generation Requests from React

The front-end communicates with the serverless API through standard fetch calls to the generation endpoint:

// src/apiClient.js (simplified)
export async function generateImage(prompt) {
  const resp = await fetch('/api/generate-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt })
  });
  const { taskId } = await resp.json();
  return taskId;
}

This corresponds to the server-side handler in api/generate-image.js, which orchestrates the APIMart submission.

Polling for Generation Status

After submitting a task, the client polls the status endpoint defined in api/generation/status.js:

export async function getGenerationStatus(taskId) {
  const resp = await fetch(`/api/generation/status?taskId=${taskId}`);
  return resp.json();   
  // Returns: { status: 'pending'|'completed', imageUrl?: string }
}

Integrating the Agent Skill Library

AI agents can access the prompt template library programmatically using the packaged skill:

# CLI command after installing the skill

npx gpt-image-2-style-library get template --category architecture

This retrieves structured data from data/style-library.json as documented in agents/skills/gpt-image-2-style-library/SKILL.md.

Processing Stripe Checkout

Credit purchases initiate through the billing endpoint implemented in api/billing/checkout.js:

// Example fetch from the React UI
fetch('/api/billing/checkout', { method: 'POST' })
  .then(r => r.json())
  .then(({ sessionUrl }) => window.location.href = sessionUrl);

Configuration and Build Artifacts

• vite.config.js: Configures the React plugin and multi-page entry points for the gallery and GPT-Image-2.5 spotlight.
• package.json: Declares dependencies including React, Vite, Supabase clients, and the Alipay SDK.
• scripts/generate-site-data.mjs: Generates the gallery JSON consumed by the front-end.
• scripts/alipay-webpay-sandbox-server.mjs: Provides a local sandbox environment for testing Alipay integrations.
• supabase/migrations/: Contains SQL schema definitions for credits, billing tables, and community features.

Summary

• Awesome-GPT-Image-2 employs a serverless micro-service architecture where each domain (auth, generation, billing) is isolated in separate API files under api/.
• The React + Vite front-end acts as a thin client, delegating all business logic to serverless functions and Supabase.
• APIMart integration via api/_lib/apimart.js handles asynchronous AI generation with webhook and polling support.
• Dual payment support includes Stripe for international billing and Alipay for community QR-code access, both updating Supabase credit balances.
• Agent skill reusability allows AI systems to consume the same data/style-library.json templates used by the web interface.

Frequently Asked Questions

What frontend technologies power Awesome-GPT-Image-2?

The application uses React bundled with Vite, as configured in vite.config.js. Static assets are served from the data/ directory, and client-side Supabase authentication is initialized in src/supabaseClient.js using environment variables VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY.

How does the system process AI image generation requests?

Generation flows through api/generate-image.js, which calls api/_lib/apimart.js to submit prompts to the APIMart API. The system stores task IDs in Supabase, deducts credits via RPCs, and retrieves results through asynchronous polling at api/generation/status.js or webhook callbacks.

Which payment providers are integrated into the platform?

The repository supports Stripe for standard credit card processing (implemented in api/billing/checkout.js) and Alipay for QR-code-based community payments (implemented in api/community/alipay/checkout.js). Both systems validate transactions and update user credit balances in Supabase.

Can external AI agents access the prompt templates?

Yes. The agents/skills/gpt-image-2-style-library/ directory contains an NPM-packaged skill that exposes data/style-library.json to agents such as Claude and Codex. Agents can programmatically retrieve and customize prompts using the skill's CLI interface, ensuring consistency between manual UI usage and automated generation workflows.

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