# 实现方案

开始时间：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` 映射，并在用户拖动时选择最近的分割帧。