小鱼开发
23 KiB
23 KiB
视频生成交互流程设计
一、正常流程（批量生成）
┌─────────────────────────────────────────────────────────────────┐
│ Step 0: 检查前置条件 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 点击【生成视频】按钮 │
│ │ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ 检查本地状态 │ │
│ │ 如果正在生成中 │───► 提示"已有任务进行中，请等待完成" │
│ └─────────────────┘ 或者"是否取消当前任务？" │
│ │ │
│ ▼ 无进行中任务 │
│ ┌─────────────────┐ │
│ │ 检查是否选形象 │ │
│ │ 未选择 │───► 弹出形象选择弹窗 │
│ └─────────────────┘ │
│ │ │
│ ▼ 已选择 │
│ 继续下一步 │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Step 1: 确认弹窗 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 开始生成视频 │ │
│ ├─────────────────────────────────────────┤ │
│ │ │ │
│ │ 将生成 8 个分镜视频 │ │
│ │ 预计耗时：约 15-20 分钟 │ │
│ │ │ │
│ │ ⚠️ 生成过程中请勿关闭应用 │ │
│ │ 您可以最小化窗口，但不要关闭 │ │
│ │ │ │
│ │ ┌────────────┐ ┌──────────────────┐ │ │
│ │ │ 取消 │ │ 开始生成 │ │ │
│ │ └────────────┘ └──────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Step 2: 进入生成状态（界面锁定） │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 【生成】按钮变为【生成中...】且 disabled │
│ │
│ 顶部显示全局状态栏： │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ 🎬 视频生成中 ━━━━━━━━⏳━━━━ 预计还需 12 分钟 [?] ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 显示模态弹窗（不可关闭）： │
│ ┌─────────────────────────────────────────┐ │
│ │ 视频生成 │ │
│ ├─────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌─────────────┐ │ │
│ │ │ 状态标签 │ │ │
│ │ │ 任务已开启 │ │ │
│ │ └─────────────┘ │ │
│ │ │ │
│ │ 正在为空镜生成参考图片... │ │
│ │ │ │
│ │ 预计还需 12 分钟 │ │
│ │ │ │
│ │ [最小化到后台] │ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 界面锁定状态： │
│ - 禁用：生成按钮、新建项目、添加/删除分镜 │
│ - 可浏览：但不能修改任何内容 │
│ - 可退出应用：但会提示"任务将后台继续，确定退出？" │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Step 3: 状态流转 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 状态标签流转： │
│ │
│ 分镜（omni-video）： │
│ 任务已开启 ──► 排队生成中 ──► 任务已完成 │
│ │
│ 空镜（文生图+图生视频）： │
│ 任务已开启 ──► 生成参考图片... ──► 排队生成中 ──► 任务已完成 │
│ │
│ 详细描述文字实时更新（SSE 推送）： │
│ - "正在初始化任务..." │
│ - "正在为空镜生成参考图片..." │
│ - "图片生成完成，开始生成视频..." │
│ - "正在生成视频，请稍候..." │
│ - "已完成 3/8 个分镜" │
│ - "整理生成结果..." │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Step 4: 完成 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 模态弹窗更新： │
│ ┌─────────────────────────────────────────┐ │
│ │ 视频生成 │ │
│ ├─────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌─────────────┐ │ │
│ │ │ 任务已完成 │ │ │
│ │ └─────────────┘ │ │
│ │ │ │
│ │ 成功生成 8 个视频 │ │
│ │ │ │
│ │ ┌──────────────────────────────────┐ │ │
│ │ │ 确定 │ │ │
│ │ └──────────────────────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 用户点击【确定】： │
│ 1. 关闭弹窗 │
│ 2. 解锁界面 │
│ 3. 自动滚动到第一个有视频的分镜 │
│ 4. 播放第一个视频 │
│ │
└─────────────────────────────────────────────────────────────────┘
二、单个重新生成流程
┌─────────────────────────────────────────────────────────────────┐
│ 差异点 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 入口：分镜卡片上的【重新生成】按钮 │
│ │
│ 确认弹窗简化： │
│ ┌─────────────────────────────────────────┐ │
│ │ 重新生成视频 │ │
│ ├─────────────────────────────────────────┤ │
│ │ 将重新生成分镜 3 的视频 │ │
│ │ 预计耗时：约 3-5 分钟 │ │
│ │ │ │
│ │ ⚠️ 生成过程中请勿关闭应用 │ │
│ │ │ │
│ │ [取消] [确定] │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 完成后：自动选中该分镜并播放 │
│ │
└─────────────────────────────────────────────────────────────────┘
三、异常流程
3.1 用户尝试关闭应用
用户点击关闭窗口（或 Cmd+Q / Alt+F4）
│
▼
┌─────────────────────────────────────────┐
│ ⚠️ 确认关闭 │
├─────────────────────────────────────────┤
│ │
│ 视频生成任务仍在进行中 │
│ │
│ 如果选择关闭： │
│ - 任务将在后台继续运行 │
│ - 生成完成后会推送系统通知 │
│ - 下次打开应用可查看结果 │
│ │
│ [取消] [最小化到托盘] [关闭应用] │
│ │
└─────────────────────────────────────────┘
3.2 应用崩溃/强制退出后恢复
用户重新打开应用
│
▼
┌─────────────────────────────────────────┐
│ 📋 恢复未完成任务 │
├─────────────────────────────────────────┤
│ │
│ 检测到上次有未完成的视频生成任务 │
│ │
│ 项目：厨房改造方案 │
│ 进度：已完成 5/8 个分镜 │
│ 状态：仍在后台处理中 │
│ │
│ [查看进度] [我知道了] │
│ │
└─────────────────────────────────────────┘
点击【查看进度】：
- 跳转到视频生成页面
- 自动恢复进度弹窗显示
- 继续监听 SSE/轮询
3.3 生成失败
┌─────────────────────────────────────────┐
│ ❌ 生成失败 │
├─────────────────────────────────────────┤
│ │
│ 视频生成过程中发生错误 │
│ │
│ 错误信息：Kling API 超时 │
│ │
│ 已生成的视频已保存 │
│ 失败的分镜：分镜3、分镜7 │
│ │
│ [返回查看] [重试失败项] │
│ │
└─────────────────────────────────────────┘
点击【重试失败项】：
- 只重新生成失败的那几个分镜
- 复用现有参数
3.4 网络断开
SSE 连接断开
│
▼
状态栏显示："网络异常，正在重连...（1/3）"
│
▼
自动重连 SSE（最多 3 次）
│
├─► 重连成功：继续接收进度
│
└─► 重连失败：切换到轮询模式
│
▼
每 5 秒轮询一次状态
│
▼
网络恢复后：自动切回 SSE
四、本地状态管理
// localStorage: meijiaka_generation_state
interface GenerationState {
// 任务标识
jobId: string;
projectId: string;
// 任务状态
status: 'pending' | 'generating' | 'completed' | 'failed';
// 任务信息（用于恢复显示）
shots: Array<{
id: string;
type: 'segment' | 'empty_shot';
}>;
totalShots: number;
// 时间戳
startedAt: number;
lastUpdatedAt: number;
// 结果（完成后填写）
results?: Array<{
shotId: string;
status: 'completed' | 'failed';
videoPath?: string;
errorMessage?: string;
}>;
// 错误信息
errorMessage?: string;
}
五、状态流转图
┌─────────────┐
│ IDLE │
└──────┬──────┘
│ 点击生成
▼
┌─────────────┐
┌───────────────►│ CONFIRM │◄───────────────┐
│ │ 确认弹窗 │ │
│ └──────┬──────┘ │
│ 取消 │ 确认 │
│ ▼ │
│ ┌─────────────┐ │
│ │ GENERATING │────────────────┤
│ │ 生成中 │ 应用崩溃/关闭 │
│ └──────┬──────┘ │
│ │ │
│ ┌────────────┼────────────┐ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │SUCCESS │ │ FAILED │ │ TIMEOUT │ │
│ └────┬────┘ └────┬────┘ └────┬────┘ │
│ │ │ │ │
│ ▼ └────────────┘ │
│ ┌─────────┐ │ │
└───┤ RESULT │◄──────────────┘ │
│ 结果弹窗 │ │
└────┬────┘ │
│ │
▼ │
┌─────────┐ │
│ IDLE │───────────────────────────────┘
└─────────┘ 下次启动检测恢复
六、关键决策点
| 决策 | 选择 | 理由 |
|---|---|---|
| 生成中能否关闭应用 | ✅ 可以，但提示后台继续 | 用户有急事时需要关闭 |
| 生成中能否切换项目 | ❌ 不能 | 避免状态混乱 |
| 生成中能否修改脚本 | ❌ 不能 | 避免参数不一致 |
| 失败后能否重试 | ✅ 可以，只重试失败的 | 减少重复等待 |
| 是否需要系统通知 | ✅ 需要（第二阶段） | 用户最小化后能感知完成 |