---
theme: frankfurt
infoLine: true
title: gen2D - AI 驱动的 2D 游戏素材生成
author: 栈无不胜
transition: slide-left
mdc: true
drawings:
  persist: false
---

# gen2D

AI 驱动的 2D 游戏素材生成工具

<div class="text-xl mt-4 text-gray-400">
  文本描述 + 风格参数 → 风格一致、管线友好的游戏素材
</div>

<div class="mt-8 text-lg">
  <b>团队</b>：栈无不胜 &nbsp;|&nbsp;
  <b>赛道</b>：七牛云 XEngineer 暑期实训营
</div>

---

# 痛点：2D 游戏素材制作

<div class="grid grid-cols-2 gap-8 mt-6">
<div>

### 🎨 美术成本高

- 像素画 / 手绘需专业美术人员
- 独立开发者难以负担外包费用
- 迭代周期长，试错成本高

</div>
<div>

### 🔧 管线适配难

- 生成素材尺寸 / 格式不统一
- 精灵表需手动拆分与对齐
- 风格一致性难以保证

</div>
</div>

<div class="mt-6 text-center text-gray-400">
  <b>核心诉求</b>：低门槛、风格一致、管线友好
</div>

---

# gen2D 的解决方案

<div class="mt-4">

| 输入 | 处理 | 输出 |
|------|------|------|
| 文本描述 + 风格参数 | 多智能体协作管线 | Sprite、背景、UI 元素、动画帧 |

</div>

<v-clicks>

- **自然语言驱动** — 用文字描述你想要的素材，AI 自动生成
- **风格一致性** — 工程级风格预设，保证同一项目素材风格统一
- **管线友好** — 标准尺寸、格式适配 Unity / Godot 等主流引擎
- **质量可控** — 自动质检 + 重试机制，不合格素材自动优化

</v-clicks>

---
layout: section
section: '产品演示'
---

# 产品演示

---
layout: default
---

# 核心生成管线

基于 Eino `compose.Graph` 的四阶段智能体协作管线

```mermaid {scale: 0.85}
graph LR
    A[用户输入] --> B[PromptOptimizer<br/>提示词优化]
    B --> C[AssetGenerator<br/>素材生成]
    C --> D{QualitySupervisor<br/>质检}
    D -->|通过| E[FormatAdapter<br/>格式适配]
    D -->|不通过| B
    E --> F[输出素材]
    D -->|重试 ≥ 3| E
```

<v-clicks>

- **PromptOptimizer** — 合并工程风格 + 任务风格覆盖，生成三段式规范提示词
- **AssetGenerator** — 调用文生图 API 生成素材
- **QualitySupervisor** — 自动质检，不合格触发重优化（最多 3 次）
- **FormatAdapter** — 组装输出素材与元数据，降级兜底

</v-clicks>

---
layout: two-cols
---

# 风格系统

两层风格架构，保证一致性与灵活性

### 工程风格（Project Style）

- 工程级别的风格配置
- 保证同一工程下所有素材风格一致

### 任务风格覆盖（Task Override）

- 单次生成任务的风格差异
- 仅覆盖需要变化的键

<div class="mt-4 text-sm text-gray-400">
  合并逻辑：finalStyle = merge(project, task)
</div>

::right::

<div class="pl-4 text-sm mt-12">

### 预设风格键

| 分类 | 示例 |
|------|------|
| 美术风格 | pixel, cartoon, vector |
| 色调 | warm, cool, vibrant |
| 线条 | thin, medium, thick |
| 场景 | forest, dungeon, city |
| 光照 | bright, dramatic, neon |
| 情绪 | cheerful, dark, epic |

</div>

---
layout: section
section: '技术架构'
---

# 技术架构

---
layout: two-cols
---

# 系统架构

<div class="text-sm">

```
┌─────────────────────────────┐
│   Frontend (React + Vite)    │
│   画廊 / 工作台 / 结果预览    │
└──────────────┬──────────────┘
               │ HTTP / WS
┌──────────────▼──────────────┐
│   Backend (Go + Gin + Eino) │
│   ┌───────────────────────┐ │
│   │  Eino Graph Pipeline  │ │
│   │  4-Stage Agent Flow   │ │
│   └───────────────────────┘ │
│   ┌────┐ ┌─────┐ ┌──────┐  │
│   │ DB │ │ Kodo│ │ LLM  │  │
│   └────┘ └─────┘ └──────┘  │
└─────────────────────────────┘
```

</div>

::right::

<div class="pl-4 text-sm mt-12">

### 技术栈

| 层 | 技术 |
|----|------|
| 后端 | Go + Gin + Eino |
| ORM | GORM + SQLite |
| 认证 | JWT + bcrypt |
| 存储 | 七牛云 Kodo |
| 前端 | React + TypeScript |
| 状态 | Zustand |
| 构建 | Vite 6 |
| 部署 | Docker Compose |

</div>

---

# 核心亮点

<v-clicks>

- **多智能体协作管线** — Eino `compose.Graph` 编排四阶段智能体，支持质检重试与降级输出
- **提示词优化 Agent** — Eino Chain 驱动，支持任意 OpenAI 兼容 API，无 key 自动回退模板
- **实时进度推送** — WebSocket 推送管线各阶段状态、进度与质检重试信息
- **请求去重** — 相同 prompt + 参数的并发请求自动合并，返回已有 taskId
- **异步任务模型** — goroutine 并发控制，支持失败重试（最多 3 次）与降级输出
- **一键部署** — Docker Compose 双容器架构 + deploy.sh 脚本

</v-clicks>

---
layout: default
---

# 技术栈一览

<div class="grid grid-cols-3 gap-6 mt-4 text-sm">
<div>

### 后端

- Go 1.26 + Gin
- Eino 管线编排
- GORM + SQLite
- JWT 认证
- 七牛云 Kodo

</div>
<div>

### 前端

- React 18 + TS
- Vite 6
- Zustand 状态管理
- react-router v7
- CSS Modules 主题

</div>
<div>

### 基础设施

- Docker 多阶段构建
- nginx 反向代理
- Gitee CI/CD
- SQLite 嵌入式 DB
- 暗色主题支持

</div>
</div>

---

# 路线图

<div class="grid grid-cols-2 gap-8 mt-4">
<div>

### ✅ 已完成

- 提示词优化 Agent（Eino Chain）
- 多智能体生成管线（Eino Graph）
- 工程风格系统 + 任务级覆盖
- 用户认证（JWT + bcrypt）
- 异步任务 + 实时进度推送
- 素材帧预览、GIF 动画与导出
- 自定义标签系统

</div>
<div>

### 🔲 规划中

- WebSocket 实时进度推送
- 批量生成与队列调度
- 文生图多模型适配
- 素材版本管理与历史记录
- 分布式令牌桶限流
- 自定义协程池
- RabbitMQ 消息队列

</div>
</div>

---
layout: center
class: text-center
---

# 感谢聆听

<div class="text-xl mt-4 text-gray-400">
  gen2D — 让 2D 游戏素材创作更简单
</div>

<div class="mt-8 text-lg">
  🔗 <b>在线体验</b>：http://47.121.181.112:10000
</div>

<div class="mt-2 text-lg">
  🎬 <b>B站视频</b>：https://www.bilibili.com/video/BV1jAGo6DEbC
</div>

<div class="mt-6 text-gray-400">
  栈无不胜 · 七牛云 XEngineer 暑期实训营
</div>