49 lines
1.8 KiB
Markdown
49 lines
1.8 KiB
Markdown
# 实现方案
|
||
|
||
开始时间：2026-05-18-19-56-47
|
||
|
||
## 后端改造
|
||
|
||
1. 视频分割返回时间映射
|
||
- 在 `_process_video` 中读取源视频 `fps`、总帧数、时长。
|
||
- 每个返回帧增加：
|
||
- `source_time`：源视频中的时间。
|
||
- `result_time`：结果视频中的时间。
|
||
- `result_index`：结果视频内部帧序号。
|
||
- 返回 `source_fps`、`result_fps`、`duration`、`result_duration`。
|
||
|
||
2. 新增单帧多方法对比接口
|
||
- `POST /api/compare-frame`
|
||
- 参数：文件、`frame_index`、`sensitivity`。
|
||
- 后端定位到对应帧和上一帧，对该帧运行 `compare_frame`，返回多方法图片结果。
|
||
|
||
## 前端改造
|
||
|
||
1. 双视频区域
|
||
- 左侧：原始视频。
|
||
- 右侧：结果视频。
|
||
- 右侧标题改为“预览与结果视频”。
|
||
|
||
2. 视频同步
|
||
- 维护 `currentFrame` 和后端返回的时间映射。
|
||
- 点击下方帧列表时同时 seek 原始视频与结果视频。
|
||
- 用户 seek/play/pause 任一视频时同步另一个视频，使用锁避免递归触发。
|
||
|
||
3. 下方帧列表
|
||
- 新增“预览与结果查看”区域。
|
||
- 复用现有结果图片卡片；点击后设置当前帧并同步两个视频。
|
||
|
||
4. 多方法对比
|
||
- 控制面板中移除方法卡片里的“多方法对比”，改为运行按钮下方的独立按钮。
|
||
- 默认禁用。
|
||
- 分割完成且当前帧存在时启用。
|
||
- 点击后调用 `/api/compare-frame`，在弹窗中显示当前帧多方法对比。
|
||
|
||
5. 进度条
|
||
- 移除 CSS 无限动画。
|
||
- 使用 JS 设置固定阶段进度：准备、上传处理、生成结果、完成。
|
||
|
||
## 注意
|
||
|
||
结果视频目前由抽样帧组成，因此同步采用返回的 `source_time` 与 `result_time` 映射，并在用户拖动时选择最近的分割帧。
|