style: optimize gen2D deck layout, animations, and visual hierarchy

- style-keys.md: add v-clicks to 3x2 grid for staggered animation
- eino-graph.md: two-column layout (code left, Items right)
- eino-deep-dive.md: two-column layout for both slides, code+Items side-by-side
- async-deep-dive.md: two-column layout for both slides, SVG integrated
- harness.md: two-column layout for slide 1 (code left, Items right)
- request-journey.md: two-column layout for journey steps
- data-model.md: add v-clicks to grid items, increase diagram height
- architecture/pipeline/prompt-agent: increase SVG max-height for better visibility
This commit is contained in:
2026-05-30 23:13:23 +08:00
parent 663e04ab24
commit 5f99d2481a
10 changed files with 101 additions and 33 deletions
+26 -10
View File
@@ -10,26 +10,42 @@ POST /api/v1/generate {prompt: "像素风骑士", assetType: "sprite", style: {
</div>
<div class="grid grid-cols-2 gap-4 mt-2">
<div>
<v-clicks>
<Item title="① Middleware 层(~1ms)">
JWT 认证 → 解析 userID → 用户级限流检查(Redis Lua)→ 全局限流检查 → 放行
JWT 认证 → 解析 userID → 用户级限流(Redis Lua)→ 全局限流 → 放行
</Item>
<Item title="② Handler 层(~5ms)">
参数绑定 + 校验 → 去重检查 `hash(prompt+type+params)` → 创建 Task(DB 写入)→ 入队 TaskQueue → 返回 `taskId`
</Item>
<Item title="③ Pipeline 执行(~30s)">
goroutine 取出任务 → PromptOptimizer(风格合并 + LLM)→ AssetGenerator(文生图 API)→ QualitySupervisor(视觉模型质检,可能重试)→ FormatAdapter(精灵表拆分 + GIF)
</Item>
<Item title="④ 收尾(~2s)">
上传素材到七牛云 Kodo → 写入 Asset 表 → 更新 Task status=completed → WebSocket 推送完成通知
参数校验 → 去重检查 → 创建 Task(DB 写入)→ 入队 TaskQueue → 返回 `taskId`
</Item>
</v-clicks>
</div>
<div>
<v-clicks>
<Item title="③ Pipeline 执行(~30s)">
goroutine 取任务 → PromptOptimizer → AssetGenerator → QualitySupervisor(可能重试)→ FormatAdapter(精灵表 + GIF)
</Item>
<Item title="④ 收尾(~2s)">
上传七牛云 Kodo → 写入 Asset 表 → 更新 Task 完成 → WebSocket 推送
</Item>
</v-clicks>
</div>
</div>
<div v-click class="mt-2 text-center text-gray-400 text-sm">
全程异步:前端拿到 taskId 后通过 WebSocket 实时监听进度变化
</div>