xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 10 Pull Requests 2 Actions Packages Projects Releases 7 Wiki Activity

[P1] 多视频批量生成：多预览+多标题+多配音+多封面 #1677

New Issue
Closed
opened 2026-09-04 00:38:01 +08:00 by xiaoxia · 1 comment
xiaoxia commented 2026-09-04 00:38:01 +08:00
Owner
Copy Link
Copy Source

需求概述

用户在选择模板后，可以设置一次生成 1~10 个视频。选1个时现有流程零改动；选多个时，素材共用、AI随机剪辑出不同版本，每个视频有独立的标题文字、配音（可选共用或独立）、封面，最终勾选满意的批量生成。

核心原则：不破坏现有能力。 生成1个和生成多个的逻辑完全一样，只是数量区别，不搞两套流程。

后端已具备的基础（无需重做）

  • ✅ 预览 API schema 已有 preview_count 参数
  • ✅ clone_plan_for_variant() 批量生成时每个变体克隆独立 plan（独立 clips、独立随机起点）
  • ✅ 预览 enqueue 前克隆独立变体 plan
  • ✅ 正式生成 count>1 时第2条起自动克隆独立 plan（PR #1549）

交互设计

1. 数量选择弹窗（Step 1 → Step 2 之间）

  • 用户在 Step 1 选好模板，点击「下一步」时弹出弹窗
  • 弹窗标题：「要生成几个视频？」
  • 默认值 1，可选 1~10
  • 用户直接敲回车 = 选1个，零额外操作
  • 每次选完模板都弹（不记忆，不跳过）
  • 选1个 → 后续流程与现在完全一致
  • 选N个 → 后续步骤从「1份配置」变为「N份配置」，但步骤结构不变

2. 布局调整：标题设置与预览视频位置对调

当前布局（Step 4 标题步骤）：

  • 左侧：标题设置表单（字体/颜色/位置/标题文字）
  • 右侧：预览视频（单个播放器）

改造后：

  • 左侧（大区域）：预览视频
    • 1个视频 → 单个大播放器（与现在右侧播放器同样大小或更大）
    • N个视频 → 网格排列，每个独立可播放
  • 右侧（边栏）：标题设置
    • 标题样式（字体/颜色/位置/大小）：全局统一，改一次全部生效
    • 标题文字：1个视频时1个输入框；N个视频时N个输入框，各自独立
    • 标题通过 CSS TitleOverlay 浮层实时叠加在预览视频上，改标题即时可见

注意：只换位置，不改逻辑和功能。 标题设置面板的所有功能（预设、字体、颜色、位置拖拽、粗体斜体描边阴影）保持不变。

3. 多预览视频

  • 进入标题步骤后自动触发预览生成（现有逻辑，无需额外点击）
  • N个预览视频并行生成，总耗时 ≈ 单个预览耗时
  • 每个预览使用不同的随机素材组合/截取方式（后端 clone_plan_for_variant 已实现）
  • 每个预览视频必须包含用户选择的配音音频
  • 网格展示，点击某个视频可放大播放
  • 视频上叠加各自的标题文字浮层

4. 多配音

  • 默认模式：所有视频共用同一个配音（与现有操作完全一致）
  • 独立模式：提供切换开关，开启后展示 N 个配音选择器，每个视频独立选择
  • 配音选择在 Step 3，共用模式 UI 不变

5. 多封面（Step 5）

  • 1个视频 → 现有封面流程不变
  • N个视频 → N张封面卡片，每张封面带对应视频的标题文字
  • 可逐个重新生成或上传自定义封面

6. 确认生成合并到标题页（Step 4）⚠️ 方案更新

原方案（已废弃）：独立的 Step 5 确认生成页面，全宽视频网格+勾选+底部按钮。

新方案：确认生成直接合并到 Step 4（选择标题），不单独设步骤。

  • Step 4 底部区域：
    • 1个视频 → 现有「确认生成视频」按钮（与当前行为一致）
    • N个视频 → 底部固定「确认生成 N 个视频」按钮（N = 默认全选，可取消勾选不满意的）
    • 勾选框叠加在每个视频预览卡片上
  • 用户在标题页完成：配标题 → 看预览 → 勾选满意的 → 点击确认生成，一步到位
  • 不再需要独立的确认生成步骤

步骤流程（5步）

  1. 选择模板（选完点下一步弹数量弹窗）
  2. 选择素材（共用，不变）
  3. 选择配音（共用不变；N个时可切换独立配音）
  4. 选择标题 + 确认生成（布局对调：左侧预览视频，右侧标题设置；N个时N个标题输入框 + 视频勾选 + 底部「确认生成 N 个视频」按钮）
  5. 选择封面（N个时N张封面）

技术实现要点

前端

全局状态新增

previewCount: number          // 生成数量（1~10），默认1
previewTitles: string[]       // 每个视频的标题文字，长度=previewCount
previewCovers: CoverConfig[]  // 每个视频的封面配置，长度=previewCount
voiceModePerVideo: boolean    // false=共用配音，true=独立配音
voiceLibraryIds: string[]     // 独立配音时每个视频的配音ID
selectedVariantIds: number[]  // 确认时勾选的视频索引

需要改动的文件

文件 改动
generate/types.ts 新增上述全局状态类型
generate/hooks/useGenerateFormState/ 新增 previewCount 等状态管理
components/Step1TemplateSelect.tsx 点「下一步」时弹数量选择弹窗
components/PreviewVideoPanel.tsx 支持多视频网格展示（单个时大播放器，多个时网格）；N个时每个卡片带勾选框
hooks/useServerPreview.ts 支持管理多个预览任务（taskId 数组、videoUrl 数组）
api/generation/types.ts CreatePreviewRequest 新增 preview_count?: number
api/generation/preview.ts 预览 API 传 preview_count
components/Step4TitleSettings.tsx 移到右侧边栏；N个视频时N个标题输入框；底部增加确认生成按钮（N个视频时显示勾选数量）
components/Step5VoiceSelect.tsx 新增共用/独立配音切换
components/Step6CoverSettings.tsx N个视频时N张封面卡片
components/Step7ConfirmGenerate.tsx 删除（功能合并到 Step4）
components/step7-confirm/SummaryCard.tsx 删除
GeneratePage.tsx 布局调整（左右对调）、状态透传、步骤从7步改为5步
generate/constants.ts STEPS 更新为5步定义
generate.css 网格布局、弹窗、视频卡片样式

步骤定义更新

export const STEPS = [
  { key: 1, label: "选择模板" },
  { key: 2, label: "选择素材" },
  { key: 3, label: "选择配音" },
  { key: 4, label: "选择标题" },  // 包含确认生成按钮
  { key: 5, label: "选择封面" },
]

后端

  • 预览 API 已支持 preview_count，无需改动
  • 正式生成 API 已支持 count 参数，无需改动
  • 需确认：多个预览任务的 taskId 数组返回格式是否满足前端需求
## 需求概述 用户在选择模板后，可以设置一次生成 1~10 个视频。选1个时现有流程零改动；选多个时，素材共用、AI随机剪辑出不同版本，每个视频有独立的标题文字、配音（可选共用或独立）、封面，最终勾选满意的批量生成。 **核心原则：不破坏现有能力。** 生成1个和生成多个的逻辑完全一样，只是数量区别，不搞两套流程。 ## 后端已具备的基础（无需重做） - ✅ 预览 API schema 已有 `preview_count` 参数 - ✅ `clone_plan_for_variant()` 批量生成时每个变体克隆独立 plan（独立 clips、独立随机起点） - ✅ 预览 enqueue 前克隆独立变体 plan - ✅ 正式生成 count>1 时第2条起自动克隆独立 plan（PR #1549） ## 交互设计 ### 1. 数量选择弹窗（Step 1 → Step 2 之间） - 用户在 Step 1 选好模板，点击「下一步」时弹出弹窗 - 弹窗标题：「要生成几个视频？」 - 默认值 1，可选 1~10 - 用户直接敲回车 = 选1个，零额外操作 - 每次选完模板都弹（不记忆，不跳过） - 选1个 → 后续流程与现在完全一致 - 选N个 → 后续步骤从「1份配置」变为「N份配置」，但步骤结构不变 ### 2. 布局调整：标题设置与预览视频位置对调 **当前布局（Step 4 标题步骤）：** - 左侧：标题设置表单（字体/颜色/位置/标题文字） - 右侧：预览视频（单个播放器） **改造后：** - **左侧（大区域）**：预览视频 - 1个视频 → 单个大播放器（与现在右侧播放器同样大小或更大） - N个视频 → 网格排列，每个独立可播放 - **右侧（边栏）**：标题设置 - 标题样式（字体/颜色/位置/大小）：全局统一，改一次全部生效 - 标题文字：1个视频时1个输入框；N个视频时N个输入框，各自独立 - 标题通过 CSS TitleOverlay 浮层实时叠加在预览视频上，改标题即时可见 **注意：只换位置，不改逻辑和功能。** 标题设置面板的所有功能（预设、字体、颜色、位置拖拽、粗体斜体描边阴影）保持不变。 ### 3. 多预览视频 - 进入标题步骤后自动触发预览生成（现有逻辑，无需额外点击） - N个预览视频并行生成，总耗时 ≈ 单个预览耗时 - 每个预览使用不同的随机素材组合/截取方式（后端 clone_plan_for_variant 已实现） - 每个预览视频必须包含用户选择的配音音频 - 网格展示，点击某个视频可放大播放 - 视频上叠加各自的标题文字浮层 ### 4. 多配音 - **默认模式**：所有视频共用同一个配音（与现有操作完全一致） - **独立模式**：提供切换开关，开启后展示 N 个配音选择器，每个视频独立选择 - 配音选择在 Step 3，共用模式 UI 不变 ### 5. 多封面（Step 5） - 1个视频 → 现有封面流程不变 - N个视频 → N张封面卡片，每张封面带对应视频的标题文字 - 可逐个重新生成或上传自定义封面 ### 6. 确认生成合并到标题页（Step 4）⚠️ 方案更新 **原方案（已废弃）**：独立的 Step 5 确认生成页面，全宽视频网格+勾选+底部按钮。 **新方案**：确认生成直接合并到 Step 4（选择标题），不单独设步骤。 - Step 4 底部区域： - 1个视频 → 现有「确认生成视频」按钮（与当前行为一致） - N个视频 → 底部固定「确认生成 N 个视频」按钮（N = 默认全选，可取消勾选不满意的） - 勾选框叠加在每个视频预览卡片上 - 用户在标题页完成：配标题 → 看预览 → 勾选满意的 → 点击确认生成，**一步到位** - **不再需要独立的确认生成步骤** ## 步骤流程（5步） 1. 选择模板（选完点下一步弹数量弹窗） 2. 选择素材（共用，不变） 3. 选择配音（共用不变；N个时可切换独立配音） 4. 选择标题 + 确认生成（**布局对调**：左侧预览视频，右侧标题设置；N个时N个标题输入框 + 视频勾选 + 底部「确认生成 N 个视频」按钮） 5. 选择封面（N个时N张封面） ## 技术实现要点 ### 前端 #### 全局状态新增 ```ts previewCount: number // 生成数量（1~10），默认1 previewTitles: string[] // 每个视频的标题文字，长度=previewCount previewCovers: CoverConfig[] // 每个视频的封面配置，长度=previewCount voiceModePerVideo: boolean // false=共用配音，true=独立配音 voiceLibraryIds: string[] // 独立配音时每个视频的配音ID selectedVariantIds: number[] // 确认时勾选的视频索引 ``` #### 需要改动的文件 | 文件 | 改动 | |------|------| | `generate/types.ts` | 新增上述全局状态类型 | | `generate/hooks/useGenerateFormState/` | 新增 previewCount 等状态管理 | | `components/Step1TemplateSelect.tsx` | 点「下一步」时弹数量选择弹窗 | | `components/PreviewVideoPanel.tsx` | 支持多视频网格展示（单个时大播放器，多个时网格）；N个时每个卡片带勾选框 | | `hooks/useServerPreview.ts` | 支持管理多个预览任务（taskId 数组、videoUrl 数组）| | `api/generation/types.ts` | CreatePreviewRequest 新增 `preview_count?: number` | | `api/generation/preview.ts` | 预览 API 传 preview_count | | `components/Step4TitleSettings.tsx` | 移到右侧边栏；N个视频时N个标题输入框；底部增加确认生成按钮（N个视频时显示勾选数量） | | `components/Step5VoiceSelect.tsx` | 新增共用/独立配音切换 | | `components/Step6CoverSettings.tsx` | N个视频时N张封面卡片 | | `components/Step7ConfirmGenerate.tsx` | **删除**（功能合并到 Step4） | | `components/step7-confirm/SummaryCard.tsx` | **删除** | | `GeneratePage.tsx` | 布局调整（左右对调）、状态透传、步骤从7步改为5步 | | `generate/constants.ts` | STEPS 更新为5步定义 | | `generate.css` | 网格布局、弹窗、视频卡片样式 | #### 步骤定义更新 ```ts export const STEPS = [ { key: 1, label: "选择模板" }, { key: 2, label: "选择素材" }, { key: 3, label: "选择配音" }, { key: 4, label: "选择标题" }, // 包含确认生成按钮 { key: 5, label: "选择封面" }, ] ``` ### 后端 - 预览 API 已支持 `preview_count`，无需改动 - 正式生成 API 已支持 `count` 参数，无需改动 - 需确认：多个预览任务的 taskId 数组返回格式是否满足前端需求
xiaoxia added this to the 技术债务与优化 milestone 2026-09-04 00:38:01 +08:00
xiaoxia added the frontendbackendP1feature labels 2026-09-04 00:38:01 +08:00
xiaoxia commented 2026-09-05 11:06:00 +08:00
Author
Owner
Copy Link
Copy Source

【方案修正·最终】批量生成流程定为 6 步，预览不渲染（2026-09-05）

PR #1704 的批量预览错误地调后端 POST /generation/preview?preview_count=N 真渲染，导致预览卡死/429/容器重启打断。预览不需要渲染，最终方案：

流程（单视频与批量完全一致，6 步）：

  1. 选择模板 2. 选择素材 3. 选择配音 4. 选择标题 5. 确认生成 6. 选择封面
  • 第4步 选择标题：左侧纯前端 Canvas 实时预览（单视频 1 个播放器；批量 N 个 FrontendPreviewPlayer 网格，加变体种子使素材排布/起点不同），右侧标题设置。批量补 N 个独立标题输入框 + AI 智能生成 + 标题库选择；标题样式全局共用。预览浏览器实时播放，不调任何后端渲染接口。
  • 第4步底部按钮：单视频「✨ 确认生成视频」/ 批量「✨ 确认生成 N 个视频」；点击后按 PR #1701 契约调正式生成接口（count + titles[]/voice_library_ids[]/cover_urls[]），成功后跳转第5步。
  • 第5步 确认生成：展示正式视频渲染实时进展（每视频独立进度/状态/失败重试），数据来自正式生成任务轮询；全部完成后「下一步」进第6步封面，逐视频选封面。
  • 删除 useBatchPreview/ServerPreviewGrid 及 preview 渲染接口的前端调用（后端接口保留不删）；恢复/重建第5步确认生成进度页。
  • N=1 全程零回归；CI 全绿。

后端配套（另发）：worker 重启孤儿任务重置 failed + 429 限流明确提示。

**【方案修正·最终】批量生成流程定为 6 步，预览不渲染（2026-09-05）** PR #1704 的批量预览错误地调后端 `POST /generation/preview?preview_count=N` 真渲染，导致预览卡死/429/容器重启打断。**预览不需要渲染**，最终方案： **流程（单视频与批量完全一致，6 步）：** 1. 选择模板 2. 选择素材 3. 选择配音 4. 选择标题 5. 确认生成 6. 选择封面 - **第4步 选择标题**：左侧纯前端 Canvas 实时预览（单视频 1 个播放器；批量 N 个 FrontendPreviewPlayer 网格，加变体种子使素材排布/起点不同），右侧标题设置。批量补 N 个独立标题输入框 + AI 智能生成 + 标题库选择；标题样式全局共用。预览浏览器实时播放，不调任何后端渲染接口。 - **第4步底部按钮**：单视频「✨ 确认生成视频」/ 批量「✨ 确认生成 N 个视频」；点击后按 PR #1701 契约调正式生成接口（count + titles[]/voice_library_ids[]/cover_urls[]），成功后跳转第5步。 - **第5步 确认生成**：展示正式视频渲染实时进展（每视频独立进度/状态/失败重试），数据来自正式生成任务轮询；全部完成后「下一步」进第6步封面，逐视频选封面。 - 删除 useBatchPreview/ServerPreviewGrid 及 preview 渲染接口的前端调用（后端接口保留不删）；恢复/重建第5步确认生成进度页。 - N=1 全程零回归；CI 全绿。 **后端配套（另发）**：worker 重启孤儿任务重置 failed + 429 限流明确提示。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label P1 backend feature frontend
Milestone
No items
No Milestone 技术债务与优化
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1677
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?