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

[Feature] 智能剪辑生成预览真实化：第3步真正生成竖屏预览视频，后续步骤基于预览实时调整 #1197

New Issue
Closed
opened 2026-07-30 10:10:55 +08:00 by xiaoxia · 0 comments
xiaoxia commented 2026-07-30 10:10:55 +08:00
Owner
Copy Link
Copy Source

需求背景

智能剪辑 Step3 "生成预览" 目前是纯前端 Mock（setTimeout + 文字统计卡片），没有真实的视频预览窗口。用户点击下一步直接去设置标题，完全看不到剪辑效果。

核心需求

Step3 真正生成预览视频，且后续步骤（标题、配音、封面）都基于这个预览视频实时调整。

1. 真生成预览视频

  • Step3 点击"生成预览"后，后端真实生成预览视频，前端展示视频播放器
  • 视频比例为 竖屏 9:16（不是横屏 16:9）
  • 预览是完整视频的低清版本（480p + 低码率），保证和正式生成效果一致，只是清晰度低，不要只生成前15秒截断

2. 支持生成多个预览视频

  • 同一个模板 + 同一批素材，可以生成 1 个或多个不重复的视频版本
  • 多个版本通过「变体引擎」从以下维度随机化保证不重复：
    • 素材选择/排序
    • 配音（可选音色/语速变化）
    • 标题文案
    • BGM 选择
    • 转场效果
    • 剪辑节奏
  • 生成的所有预览视频列在左侧列表，每个有简短标签（如"版本A""节奏版""经典版"），用户可点击切换查看
  • 右侧显示当前选中的预览视频

3. 后续步骤基于预览实时调整

  • Step4 标题设置：修改标题后，预览视频上实时叠加新标题
  • Step5 配音选择：切换配音后，预览视频的音频实时切换
  • Step6 封面设置：在预览视频上选择封面帧
  • Step7 确认生成：选中满意的预览版本，一键 promote 为正式全分辨率生成

技术方案摘要

后端方案（v2）

  • 复用现有生成链路 + is_preview 标记，代码复用率 90%+
  • 变体引擎：6个维度随机化，保证 N 个版本互不重复
  • 批次管理：preview_batch_id 打包一组预览任务，前端按批次轮询
  • 预览转正式：满意版本一键 promote，复用素材缓存全分辨率重渲
  • 接口路径对齐 generation-tasks 体系，前端不用多写一套封装

前端方案

  • Phase1：Step3 mock 换真实接口 + 轮询 + 竖屏比例统一 + 右侧预览常驻（约1天）
  • Phase2：左侧预览列表 + 多版本切换 + 生成数量配置（约2天）
  • Phase3：promote 转正式 + 各步骤实时叠加（约1天）
  • 合计约 4 天前端工作量

三阶段实施计划

Phase 1 — 单版本预览（快速上线）

  • 后端：预览生成接口（单版本）+ 任务状态查询
  • 前端：Step3 真生成 + 竖屏视频播放器 + 右侧预览常驻 + 加载/错误状态
  • 目标：Step3 不再是假的，用户能看到真实剪辑效果

Phase 2 — 多版本预览

  • 后端：变体引擎 + 批次管理 + 多版本生成
  • 前端：左侧预览列表 + 切换选中 + 生成数量配置
  • 目标：支持一次生成多个版本，用户挑最喜欢的

Phase 3 — 实时叠加 + 转正式

  • 后端：promote 接口 + 各步骤参数实时叠加
  • 前端：标题/配音/封面实时调整预览效果 + 一键生成正式版
  • 目标：完整闭环，所见即所得

进度

  • ✅ 后端：技术方案 v2 已出（文档：docs/1197_preview_generation_proposal_v2.md）
  • ⚠️ 前端：框架和 UI 已搭好（PR #1200），当前为 mock 实现，等接口契约确定后联动
  • 🔄 待对齐：同步→异步状态机、入参完整性、接口路径命名、variant_label 字段

责任人

  • 后端：saas后端程序员（方案已完成，待对齐后写代码）
  • 前端：saas前端工程师（UI框架已搭，待接口契约确定）
## 需求背景 智能剪辑 Step3 "生成预览" 目前是纯前端 Mock（setTimeout + 文字统计卡片），没有真实的视频预览窗口。用户点击下一步直接去设置标题，完全看不到剪辑效果。 ## 核心需求 Step3 真正生成预览视频，且后续步骤（标题、配音、封面）都基于这个预览视频实时调整。 ### 1. 真生成预览视频 - Step3 点击"生成预览"后，后端真实生成预览视频，前端展示视频播放器 - 视频比例为 **竖屏 9:16**（不是横屏 16:9） - 预览是完整视频的低清版本（480p + 低码率），保证和正式生成效果一致，只是清晰度低，不要只生成前15秒截断 ### 2. 支持生成多个预览视频 - 同一个模板 + 同一批素材，可以生成 1 个或多个不重复的视频版本 - 多个版本通过「变体引擎」从以下维度随机化保证不重复： - 素材选择/排序 - 配音（可选音色/语速变化） - 标题文案 - BGM 选择 - 转场效果 - 剪辑节奏 - 生成的所有预览视频列在**左侧列表**，每个有简短标签（如"版本A""节奏版""经典版"），用户可点击切换查看 - 右侧显示当前选中的预览视频 ### 3. 后续步骤基于预览实时调整 - Step4 标题设置：修改标题后，预览视频上实时叠加新标题 - Step5 配音选择：切换配音后，预览视频的音频实时切换 - Step6 封面设置：在预览视频上选择封面帧 - Step7 确认生成：选中满意的预览版本，一键 promote 为正式全分辨率生成 ## 技术方案摘要 ### 后端方案（v2） - **复用现有生成链路** + `is_preview` 标记，代码复用率 90%+ - **变体引擎**：6个维度随机化，保证 N 个版本互不重复 - **批次管理**：`preview_batch_id` 打包一组预览任务，前端按批次轮询 - **预览转正式**：满意版本一键 promote，复用素材缓存全分辨率重渲 - 接口路径对齐 `generation-tasks` 体系，前端不用多写一套封装 ### 前端方案 - Phase1：Step3 mock 换真实接口 + 轮询 + 竖屏比例统一 + 右侧预览常驻（约1天） - Phase2：左侧预览列表 + 多版本切换 + 生成数量配置（约2天） - Phase3：promote 转正式 + 各步骤实时叠加（约1天） - 合计约 4 天前端工作量 ## 三阶段实施计划 ### Phase 1 — 单版本预览（快速上线） - 后端：预览生成接口（单版本）+ 任务状态查询 - 前端：Step3 真生成 + 竖屏视频播放器 + 右侧预览常驻 + 加载/错误状态 - 目标：Step3 不再是假的，用户能看到真实剪辑效果 ### Phase 2 — 多版本预览 - 后端：变体引擎 + 批次管理 + 多版本生成 - 前端：左侧预览列表 + 切换选中 + 生成数量配置 - 目标：支持一次生成多个版本，用户挑最喜欢的 ### Phase 3 — 实时叠加 + 转正式 - 后端：promote 接口 + 各步骤参数实时叠加 - 前端：标题/配音/封面实时调整预览效果 + 一键生成正式版 - 目标：完整闭环，所见即所得 ## 进度 - ✅ 后端：技术方案 v2 已出（文档：docs/1197_preview_generation_proposal_v2.md） - ⚠️ 前端：框架和 UI 已搭好（PR #1200），当前为 mock 实现，等接口契约确定后联动 - 🔄 待对齐：同步→异步状态机、入参完整性、接口路径命名、variant_label 字段 ## 责任人 - 后端：saas后端程序员（方案已完成，待对齐后写代码） - 前端：saas前端工程师（UI框架已搭，待接口契约确定）
xiaoxia changed title from [Bug] 智能剪辑生成预览步骤被跳过，没有真正生成预览视频 to [Feature] 智能剪辑生成预览真实化：第3步真正生成竖屏预览视频，后续步骤基于预览实时调整 2026-07-31 11:15:40 +08:00
xiaoxia added the frontendbackendP0feature labels 2026-07-31 11:56:55 +08:00
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 P0 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#1197
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?