# freestylefly/awesome-gpt-image-2 architecture

> Architecture diagram of the GitHub repository freestylefly/awesome-gpt-image-2, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/freestylefly/awesome-gpt-image-2
- Repository: https://github.com/freestylefly/awesome-gpt-image-2

## Overview

This repository is a GPT-Image2 prompt-and-case gallery with account-backed image generation, billing, and community features. The main user workflow is browsing cases and prompts, then signing in and submitting a generation; the separate Image 2.5 spotlight provides model and result comparisons. The graph also preserves documented templates and the style-library Skill, plus supporting account, payment, and administration capabilities. Several routes and subsystems are represented by their exact enclosing paths because their source was not sampled; links are limited to documented behavior or visible calls.

Main entry points: [`api/community`](https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api/community) (Community Orders), [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) (Generation API), [`api/_lib/alipay.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/alipay.js) (Alipay Services), [`api/_lib/supabase.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/supabase.js) (Authentication Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_gallery["Gallery Experience"]
  node_gallery_app["Case Gallery<br/>[main.jsx]"]
  node_case_data["Case Library<br/>[cases.js]"]
  node_spotlight_app["Image 2.5 Spotlight<br/>[App.jsx]"]
  node_real_cases["Recreation Cases<br/>[realCases.js]"]
  node_templates_skill["Templates and Skill"]
end

subgraph group_generation["Image Generation"]
  node_personal_client["Personal API Client<br/>[apimartClient.js]"]
  node_generation_api["Generation API<br/>[generate-image.js]"]
  node_generation_routes["Task Callbacks and Status"]
  node_apimart_service["APIMart Service<br/>[apimart.js]"]
  node_apimart_platform{{"APIMart Platform"}}
  node_generation_rules["Generation Rules<br/>[generation.js]"]
end

subgraph group_identity["Accounts and Community"]
  node_account_routes["Account and Favorites"]
  node_auth_service["Authentication Service<br/>[supabase.js]"]
  node_supabase[("Supabase")]
  node_community["Community Support<br/>[community.jsx]"]
  node_community_api["Community Orders"]
  node_community_payments["Community Alipay"]
end

subgraph group_commerce["Billing and Credits"]
  node_billing_ui_api["Plans and Checkout"]
  node_billing_logic["Billing Services<br/>[billing.js]"]
  node_alipay_logic["Alipay Services<br/>[alipay.js]"]
  node_stripe{{"Stripe"}}
  node_alipay{{"Alipay"}}
end

subgraph group_operations["Admin and Insights"]
  node_admin_api["Admin Operations"]
  node_admin_metrics["Usage Metrics<br/>[metrics.js]"]
  node_analytics{{"Google Analytics"}}
end

node_visitor(("Visitor"))

node_visitor -->|"browses cases"| node_gallery_app
node_visitor -->|"compares models"| node_spotlight_app
node_gallery_app -->|"reads cases"| node_case_data
node_spotlight_app -->|"loads comparisons"| node_case_data
node_gallery_app -->|"submits personal runs"| node_personal_client
node_personal_client -->|"submits and polls"| node_apimart_platform
node_generation_api -->|"authenticates"| node_auth_service
node_generation_api -->|"builds response"| node_generation_rules
node_generation_api -->|"submits task"| node_apimart_service
node_generation_api -->|"reserves usage"| node_supabase
node_apimart_service -->|"calls API"| node_apimart_platform
node_generation_routes -->|"updates task state"| node_supabase
node_community -->|"manages support"| node_community_api
node_community_api -->|"authenticates"| node_auth_service
node_community_api -->|"reconciles payments"| node_community_payments
node_community_api -->|"handles payments"| node_alipay_logic
node_community_api -->|"reads and updates orders"| node_supabase
node_community_payments -->|"queries orders"| node_alipay
node_billing_ui_api -->|"authenticates"| node_auth_service
node_billing_ui_api -->|"processes billing"| node_billing_logic
node_billing_ui_api -->|"handles Alipay"| node_alipay_logic
node_billing_logic -->|"creates and verifies payments"| node_stripe
node_billing_logic -->|"updates orders and credits"| node_supabase
node_alipay_logic -->|"creates and queries payments"| node_alipay
node_admin_api -->|"authorizes admins"| node_auth_service
node_admin_api -->|"manages users and orders"| node_supabase
node_admin_api -->|"handles refunds"| node_alipay_logic
node_admin_metrics -.->|"reads metrics"| node_analytics

click node_gallery_app "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx"
click node_case_data "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js"
click node_spotlight_app "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/App.jsx"
click node_real_cases "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/realCases.js"
click node_templates_skill "https://github.com/freestylefly/awesome-gpt-image-2/tree/main/agents/skills/gpt-image-2-style-library"
click node_personal_client "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js"
click node_generation_api "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js"
click node_generation_routes "https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api/generation"
click node_apimart_service "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/apimart.js"
click node_generation_rules "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/generation.js"
click node_account_routes "https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api"
click node_auth_service "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/supabase.js"
click node_community "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/community.jsx"
click node_community_api "https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api/community"
click node_community_payments "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/community-alipay.js"
click node_billing_ui_api "https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api/billing"
click node_billing_logic "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/billing.js"
click node_alipay_logic "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/alipay.js"
click node_admin_api "https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api/admin"
click node_admin_metrics "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/admin/metrics.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_gallery_app,node_case_data,node_spotlight_app,node_real_cases,node_templates_skill toneBlue
class node_personal_client,node_generation_api,node_generation_routes,node_apimart_service,node_apimart_platform,node_generation_rules toneAmber
class node_account_routes,node_auth_service,node_supabase,node_community,node_community_api,node_community_payments toneMint
class node_billing_ui_api,node_billing_logic,node_alipay_logic,node_stripe,node_alipay toneRose
class node_admin_api,node_admin_metrics,node_analytics,node_visitor toneIndigo
```

## Components

### Gallery Experience

- [Case Gallery](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx): `src/main.jsx`
- [Case Library](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/cases.js): `src/image25/cases.js`
- [Image 2.5 Spotlight](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/App.jsx): `src/image25/App.jsx`
- [Recreation Cases](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/image25/realCases.js): `src/image25/realCases.js`
- [Templates and Skill](https://github.com/freestylefly/awesome-gpt-image-2/tree/main/agents/skills/gpt-image-2-style-library): `agents/skills/gpt-image-2-style-library`

### Image Generation

- [Personal API Client](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js): `src/apimartClient.js`
- [Generation API](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js): `api/generate-image.js`
- [Task Callbacks and Status](https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api/generation): `api/generation`
- [APIMart Service](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/apimart.js): `api/_lib/apimart.js`
- **APIMart Platform**
- [Generation Rules](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/generation.js): `api/_lib/generation.js`

### Accounts and Community

- [Account and Favorites](https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api): `api`
- [Authentication Service](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/supabase.js): `api/_lib/supabase.js`
- **Supabase**
- [Community Support](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/community.jsx): `src/community.jsx`
- [Community Orders](https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api/community): `api/community`
- [Community Alipay](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/community-alipay.js): `api/_lib/community-alipay.js`

### Billing and Credits

- [Plans and Checkout](https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api/billing): `api/billing`
- [Billing Services](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/billing.js): `api/_lib/billing.js`
- [Alipay Services](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/alipay.js): `api/_lib/alipay.js`
- **Stripe**
- **Alipay**

### Admin and Insights

- [Admin Operations](https://github.com/freestylefly/awesome-gpt-image-2/tree/main/api/admin): `api/admin`
- [Usage Metrics](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/admin/metrics.js): `api/admin/metrics.js`
- **Google Analytics**

### Other components

- **Visitor**

## Connections

- Visitor → Case Gallery: browses cases
- Visitor → Image 2.5 Spotlight: compares models
- Case Gallery → Case Library: reads cases
- Image 2.5 Spotlight → Case Library: loads comparisons
- Case Gallery → Personal API Client: submits personal runs
- Personal API Client → APIMart Platform: submits and polls
- Generation API → Authentication Service: authenticates
- Generation API → Generation Rules: builds response
- Generation API → APIMart Service: submits task
- Generation API → Supabase: reserves usage
- APIMart Service → APIMart Platform: calls API
- Task Callbacks and Status → Supabase: updates task state
- Community Support → Community Orders: manages support
- Community Orders → Authentication Service: authenticates
- Community Orders → Community Alipay: reconciles payments
- Community Orders → Alipay Services: handles payments
- Community Orders → Supabase: reads and updates orders
- Community Alipay → Alipay: queries orders
- Plans and Checkout → Authentication Service: authenticates
- Plans and Checkout → Billing Services: processes billing
- Plans and Checkout → Alipay Services: handles Alipay
- Billing Services → Stripe: creates and verifies payments
- Billing Services → Supabase: updates orders and credits
- Alipay Services → Alipay: creates and queries payments
- Admin Operations → Authentication Service: authorizes admins
- Admin Operations → Supabase: manages users and orders
- Admin Operations → Alipay Services: handles refunds
- Usage Metrics → Google Analytics: reads metrics