# 实现方案

开始时间：2026-05-18-19-06-50

## Web 端改造

1. 信息架构
   - 顶部状态栏显示服务状态、当前任务和输出视频入口。
   - 左侧工作流区域包含上传/样例、算法、参数和运行按钮。
   - 右侧结果区域包含预览、指标总览、结果帧网格和单帧详情。

2. 交互增强
   - 文件拖拽上传。
   - 样例视频一键加载为 `File` 对象后提交。
   - 算法使用卡片式单选，保留 `<select>` 作为表单值。
   - 运行中显示进度条和状态文案。
   - 点击结果卡片可打开详情弹窗，查看原图、叠加图、掩膜和指标。

3. 后端补充
   - 增加 `/api/samples`，返回可用样例文件和 URL，便于前端加载样例。

4. 视觉方向
   - 医学影像控制台风格：深色工作台、琥珀高亮、青绿色状态色、紧凑信息密度。
   - 避免营销页布局，首屏就是工具。

## 影响范围

- `frontend/index.html`
- `frontend/styles.css`
- `frontend/app.js`
- `backend/main.py`
- `README.md`
- 相关测试与工程分析文档