3.4 KiB
3.4 KiB
全局架构图 — 文生图提示词
你是一位技术架构可视化专家。请根据以下描述，生成一张 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 (管线编排)
- 四个节点从上到下，箭头连接：
- PromptOptimizer (提示词优化 + 风格合并)
- AssetGenerator (AI 推理 API 调用)
- QualitySupervisor (视觉模型质检)
- FormatAdapter (格式转换 + spritesheet 打包)
- 在第 3 步右侧标注分支逻辑：pass → FormatAdapter；fail → 回到 PromptOptimizer (最多 3 次)
- 在管线框下方放置 中间件栏：Logger (slog), JWT Auth, Panic Recovery
3c. Model 层 (最右)
- 数据模型：PipelineInput, PipelineState, PipelineOutput
第四层：数据与基础设施层 (底部)
放置三个并排的框：
- SQLite — 标注 5 张表：user, project, project_style, task, asset；附带 ER 关系简写 "1→N cascade"
- 七牛云 Kodo (对象存储) — 标注存储路径
${user}/${project}/${task}/output/和 CDN URL 签名访问 - LLM API (外部) — 标注 OpenAI 兼容接口
/v1/images/generations和 Chat Completions
在前端和后端之间画出与这三个组件的连线，标注数据流方向。
色彩建议
- Frontend 区域：蓝紫色调 (#4A90D9 或类似)
- Backend 区域：青绿色调 (#00B4AB 或类似)
- 管线节点：用不同深浅区分四个阶段
- 数据层：灰色调 (#6B7280 或类似)
- 外部服务：橙色 (#F59E0B 或类似)
- 箭头：实线 = 同步调用，虚线 = 异步/回调
附加约束
- 不要使用过于花哨的 3D 效果或阴影
- 文字要清晰可读，字体大小不小于图中主体元素的 1/20
- 请用英文标注组件名称（与代码库一致），中文可用于辅助说明
- 整体比例适合 16:9 宽屏展示