2026-05-18-19-06-50 构建网页端分割工作台

工程分析/实现方案-2026-05-18-19-06-50.md

@@ -0,0 +1,33 @@
+# 实现方案
+
+开始时间：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`
+- 相关测试与工程分析文档

工程分析/测试方案-2026-05-18-19-06-50.md

@@ -0,0 +1,34 @@
+# 测试方案
+
+开始时间：2026-05-18-19-06-50
+
+## 自动化测试
+
+- `pytest -q`
+- 新增或更新 API 测试，验证 `/api/samples` 返回样例清单。
+
+## 运行验证
+
+- `curl -s http://127.0.0.1:8001/api/health`
+- `curl -s http://127.0.0.1:8001/api/samples`
+- 使用 Chrome headless 截图首页，确认网页端可渲染。
+- 调用 `python3 scripts/record_demo.py` 重新生成演示视频，确认网页端仍可作为演示素材。
+
+## 手工验收路径
+
+1. 打开 `http://127.0.0.1:8001`。
+2. 点击“加载样例”。
+3. 选择融合模式或多方法对比。
+4. 点击“运行分割”。
+5. 查看结果卡片、详情弹窗和输出视频链接。
+
+## 执行结果
+
+- `pytest -q`：通过，4 个测试全部通过。
+- `python3 -m py_compile backend/main.py`：通过。
+- `curl -s http://127.0.0.1:8001/api/health`：通过，返回 `status=ok`。
+- `curl -s http://127.0.0.1:8001/api/samples`：通过，返回样例视频和样例图像。
+- 首页截图：通过，Chrome headless 成功渲染新工作台，截图文件 `/tmp/isiseg_web_fixed.png`。
+- 样例视频 API 分割：通过，返回 `job_id=02a3d8ff9aac` 和叠加视频链接。
+- `python3 scripts/record_demo.py`：通过，重新生成 `storage/demos/isiseg_usage_demo.mp4`。
+- `ffprobe` 校验演示视频：通过，时长 21 秒，大小约 3.4 MB。

工程分析/经验记录.md

@@ -45,3 +45,15 @@ B. 产生问题原因：Playwright 包体积较大，当前网络下载速度或
 C. 解决问题方案：终止该安装进程，改用系统已有 `google-chrome --headless` 截取首页，并使用当前已安装的 OpenCV 将真实页面截图和真实 API 分割结果合成为演示 mp4。
 
 D. 后续如何避免问题：演示录制优先复用本机已有工具；只有确实需要完整浏览器交互录屏时，再单独安装 Playwright 并预留下载时间。
+
+## 2026-05-18-19-06-50 网页端工作台增强
+
+### 1. CSS 覆盖 hidden 导致初始预览控件显示
+
+A. 具体问题：Chrome headless 截图发现初始页面里本应隐藏的视频控件和图像预览同时显示，破坏首屏布局。
+
+B. 产生问题原因：CSS 中对 `#videoPreview`、`#imagePreview` 设置了 `display: block`，其选择器优先级覆盖了浏览器对 `hidden` 属性的默认 `display: none`。
+
+C. 解决问题方案：在全局 CSS 中增加 `[hidden] { display: none !important; }`，确保所有使用 `hidden` 的状态元素都能可靠隐藏。
+
+D. 后续如何避免问题：前端页面涉及显隐状态时，必须用 headless 截图检查初始状态；如果自定义了 display 样式，需要显式保护 `[hidden]`。

工程分析/需求分析-2026-05-18-19-06-50.md

@@ -0,0 +1,22 @@
+# 需求分析
+
+开始时间：2026-05-18-19-06-50
+
+## 用户目标
+
+用户强调“网页端构建”，说明第一版虽然已有静态页面，但需要更明确地完成 Web 端可交互工作台，而不仅是后端接口或演示脚本。
+
+## 本轮目标
+
+- 强化首页为真正的导丝分割 Web 操作台。
+- 支持拖拽上传、样例视频一键加载、原始文件预览、算法卡片选择、运行状态、结果详情查看。
+- 结果区展示叠加图、掩膜、指标和输出视频，能直接从网页端完成完整使用流程。
+- 保持无需前端构建工具的部署方式，FastAPI 直接服务静态页面。
+
+## 验收标准
+
+- 访问 `http://127.0.0.1:8001` 可以看到完整网页端工作台。
+- 可以点击“加载样例”并直接运行分割。
+- 可以上传图片或视频并运行分割。
+- 分割完成后网页端展示结果帧、指标、输出视频链接。
+- `pytest -q` 通过，健康检查通过。