# 全局架构图 — 文生图提示词

你是一位技术架构可视化专家。请根据以下描述，生成一张 **gen2d 全局系统架构图**，风格：**简洁现代的技术架构图，深色背景，使用清晰的方框和箭头表示组件与数据流**。

## 标题

gen2d 系统架构总览

## 技术栈标注（顶部或底部小字）

Go + Gin + Eino / Vite + React + TypeScript + zustand / SQLite / 七牛云 Kodo

## 架构层次（自上而下）

### 第一层：前端层 (Frontend)

放置一个圆角矩形框，标题为 **Frontend (Vite + React + TypeScript)**，内部包含：

- **Pages (页面层)**：Login, Register, HomePage, ProjectDetailPage, ResultPage，以上下文无关方式排列
- **State & Router (横跨栏)**：
  - 左侧标注 **react-router-dom v6** (SPA Routing)
  - 右侧标注 **zustand** (7 stores: auth, project, projectList, task, generation, theme, toast)
- **Components (组件层)**：StyleSelector, CustomTagsEditor, PromptEditor, GenerateForm, ProgressBar, AssetPreview

在 Frontend 框内用水平虚线或分组分隔三个子层（页面 → 路由/状态 → 组件），展示分层关系。

### 第二层：通信层

在 Frontend 和 Backend 之间画一个横向箭头带，标注：

- **HTTP REST /api/v1/***（实线）
- **WebSocket /api/v1/tasks/:taskId/ws**（虚线）
- 旁边小字标注 "JWT Bearer Token 认证"

### 第三层：后端层 (Backend)

放置一个圆角矩形框，标题为 **Backend (Go + Gin + Eino)**，内部自左向右分三层：

#### 3a. Handler 层 (最左)
- Gin Router 入口
- 薄层：参数绑定 + 校验 + 调用 Service
- 关键 Handler：health, auth, project, generate, prompt, storage

#### 3b. Service 层 (中间，核心)
- 标题：**Eino compose.Graph (管线编排)**
- 四个节点从上到下，箭头连接：
  1. **PromptOptimizer** (提示词优化 + 风格合并)
  2. **AssetGenerator** (AI 推理 API 调用)
  3. **QualitySupervisor** (视觉模型质检)
  4. **FormatAdapter** (格式转换 + spritesheet 打包)
- 在第 3 步右侧标注分支逻辑：pass → FormatAdapter；fail → 回到 PromptOptimizer (最多 3 次)
- 在管线框下方放置 **中间件栏**：Logger (slog), JWT Auth, Panic Recovery

#### 3c. Model 层 (最右)
- 数据模型：PipelineInput, PipelineState, PipelineOutput

### 第四层：数据与基础设施层 (底部)

放置三个并排的框：

1. **SQLite** — 标注 5 张表：user, project, project_style, task, asset；附带 ER 关系简写 "1→N cascade"
2. **七牛云 Kodo (对象存储)** — 标注存储路径 `${user}/${project}/${task}/output/` 和 CDN URL 签名访问
3. **LLM API (外部)** — 标注 OpenAI 兼容接口 `/v1/images/generations` 和 Chat Completions

在前端和后端之间画出与这三个组件的连线，标注数据流方向。

## 色彩建议

- **Frontend 区域**：蓝紫色调 (#4A90D9 或类似)
- **Backend 区域**：青绿色调 (#00B4AB 或类似)
- **管线节点**：用不同深浅区分四个阶段
- **数据层**：灰色调 (#6B7280 或类似)
- **外部服务**：橙色 (#F59E0B 或类似)
- **箭头**：实线 = 同步调用，虚线 = 异步/回调

## 附加约束

- 不要使用过于花哨的 3D 效果或阴影
- 文字要清晰可读，字体大小不小于图中主体元素的 1/20
- 请用英文标注组件名称（与代码库一致），中文可用于辅助说明
- 整体比例适合 16:9 宽屏展示