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

> Explore the full-stack serverless architecture of Awesome-GPT-Image-2. Learn how React, Vite, and AI agents power image generation, billing, and user management.

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

---

**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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js) defines multiple entry points, including [`index.html`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/index.html) for the main gallery and [`gpt-image-2-5/index.html`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/gpt-image-2-5/index.html) for the GPT-Image-2.5 spotlight page. Client-side authentication and database interactions utilize [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) for image creation or [`api/billing/checkout.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) handles anonymous authentication, while privileged server-side operations import [`api/_lib/supabase.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/billing/checkout.js) and [`api/billing/webhook.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/billing/webhook.js), while Alipay functionality is isolated under [`api/community/alipay/checkout.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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:

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

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

```bash

# 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) as documented in [`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).

### Processing Stripe Checkout

Credit purchases initiate through the billing endpoint implemented in [`api/billing/checkout.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/billing/checkout.js):

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js)**: Configures the React plugin and multi-page entry points for the gallery and GPT-Image-2.5 spotlight.
- **[`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js). Static assets are served from the `data/` directory, and client-side Supabase authentication is initialized in [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js), which calls [`api/_lib/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/billing/checkout.js)) and **Alipay** for QR-code-based community payments (implemented in [`api/community/alipay/checkout.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.