feat: 完善标注删除、AI 框选与视频传播交互
功能增加: - 在工作区增加按范围传播和传播全部可达入口，支持选中区域或当前帧全部 mask 作为 seed，并按前后帧范围调用 SAM2 传播后刷新已保存标注。 - 在 AI 智能分割中接入框选提示，支持 box prompt 以及 box + 正/反向点的 interactive prompt 细化流程。 - 在 AI 智能分割中增加提示点删除、最近锚点删除、清空锚点、选中 AI 候选删除和 Delete/Backspace 快捷删除。 - 在项目库删除项目后同步清理当前项目、帧、mask 与选区状态，避免删除后工作区残留旧数据。 - 将时间进度条上的已编辑帧提示改为覆盖在进度条上的琥珀色竖线，并保留已编辑帧计数。 - 将 AI 参数文案调整为局部专注模式（自动裁剪无锚区域）和严格除杂模式（自动清理干涉点），仅改善可读性，不改变内部字段。 Bugfix: - 修复 AI 框选工具无实际 prompt 输出的问题。 - 修复多次执行 AI 高精度语义分割时旧候选 mask 叠加显示的问题，改为替换本页 AI 候选。 - 修复删除 AI 候选后选区仍引用已删除 mask 的状态残留。 - 修复进度条当前帧提示与已编辑帧提示颜色/语义混淆的问题，当前帧继续由播放进度和缩略图高亮表达。 测试与文档: - 补充 AI 分割框选、候选替换、提示点删除和快捷删除相关测试。 - 补充工作区传播范围、传播全部可达、编辑区域删除和项目删除状态清理测试。 - 更新 README、AGENTS 和 doc 下需求冻结、设计冻结、接口契约、前端审计、实施计划、测试计划，记录当前真实功能和测试覆盖。
This commit is contained in:
@@ -218,14 +218,14 @@ uvicorn main:app --host 0.0.0.0 --port 8000 --reload
|
||||
## 主要业务流程
|
||||
|
||||
1. 登录：`Login.tsx` 调用 `POST /api/auth/login`，默认开发凭证为 `admin / 123456`。
|
||||
2. 项目管理：`ProjectLibrary.tsx` 调用项目 API 创建项目、拉取列表。
|
||||
2. 项目管理：`ProjectLibrary.tsx` 调用项目 API 创建项目、拉取列表、删除项目；删除当前项目后会清空工作区当前项目、帧、mask 和选区。
|
||||
3. 上传资源：视频走 `/api/media/upload`，只上传源文件并关联项目，不自动拆帧；DICOM 批量走 `/api/media/upload/dicom`。
|
||||
4. 生成帧入队：用户在项目库点击“生成帧”，选择目标 FPS 后前端调用 `/api/media/parse`；后端创建 `ProcessingTask` 并投递 Celery，接口支持 `parse_fps`、`max_frames` 和 `target_width` 标准帧序列参数。
|
||||
5. worker 执行：Celery worker 用 FFmpeg 优先拆视频帧，失败后用 OpenCV fallback，DICOM 使用 pydicom；视频帧按 `frame_%06d.jpg` 连续命名并记录 `timestamp_ms`、`source_frame_number` 和任务 `frame_sequence` 元数据。
|
||||
6. 帧展示：`VideoWorkspace.tsx` 调用 `/api/projects/{id}/frames`，`CanvasArea.tsx` 和 `FrameTimeline.tsx` 显示当前帧与时间轴缩略图；`FrameTimeline` 会根据当前项目帧内的 `masks` 在进度条和缩略图导航轴之间标出已有编辑/标注的帧；前端 `Frame` 会保留后端返回的帧序列时间戳和源帧号。
|
||||
6. 帧展示：`VideoWorkspace.tsx` 调用 `/api/projects/{id}/frames`，`CanvasArea.tsx` 和 `FrameTimeline.tsx` 显示当前帧与时间轴缩略图；`FrameTimeline` 会根据当前项目帧内的 `masks` 在顶部进度条上用琥珀色竖线标出已有编辑/标注的帧，当前帧位置由播放进度条末端、时间提示和缩略图高亮表达；前端 `Frame` 会保留后端返回的帧序列时间戳和源帧号。
|
||||
7. 手工标注：`CanvasArea.tsx` 支持多边形、矩形、圆、点区域和线段生成 polygon mask；多边形可按 Enter 或点击首节点闭合；绘制工具可在已有 mask 上继续落点；工具栏有“调整多边形”入口，点击 mask 可拖动/删除 polygon 顶点、通过边中点或双击边界插入新顶点，并能选择编辑多 polygon mask 的单个子区域；选中整块 mask 可用 Delete/Backspace 删除，已保存 mask 会同步后端删除；区域合并/去除会隐藏编辑手柄并显示已选数量，使用 `polygon-clipping` 做 union/difference，内含去除结果用 even-odd 规则渲染 hole；Zustand 维护 `maskHistory/maskFuture` 支持撤销/重做。
|
||||
8. AI 分割：前端工具包括 SAM 2.1 变体选择、正向点、反向点和框选；SAM 2.1 框选会建立候选 mask，后续正/反点通过 `interactive` prompt 携带原始框和累计点细化同一个候选 mask；包含反向点时工作区会传 `options.auto_filter_background=true` 和 `min_score=0.05`，如果后端过滤为空则移除旧候选 mask。后端 `ai.py` 期望按 `image_id`、`prompt_type`、`prompt_data`、`model` 和可选 `options` 调用 SAM registry。当前 registry 暴露 `sam2.1_hiera_tiny`、`sam2.1_hiera_small`、`sam2.1_hiera_base_plus`、`sam2.1_hiera_large`，并兼容 `sam2` 作为 tiny 别名；`model=sam3` 会被拒绝，`semantic` 文本提示也被禁用。SAM 2.1 支持点/框/interactive/自动分割和 video predictor 传播；多候选默认只采用最高分区域，避免重叠候选同时显示；AI 页面只渲染本页新生成的候选 mask，不会把工作区已有 mask 带入 AI 画布；AI 页面生成的 mask 会写入全局 `masks` 并自动选中，右侧分类树可直接改标签，推送到工作区会切到“调整多边形”并保留选择。`options.crop_to_prompt` 可对点/框/interactive prompt 做局部裁剪推理并回映射，`options.auto_filter_background` 可按分数和负向点过滤结果。
|
||||
9. 视频片段传播：工作区“传播片段”把当前选中 mask 或当前帧第一个 mask 作为 seed，调用 `POST /api/ai/propagate`；后端按项目帧序列下载片段帧，当前使用所选 SAM 2.1 变体的 `SAM2VideoPredictor.add_new_mask()` + `propagate_in_video()`，并把后续帧结果保存为 `Annotation`。
|
||||
8. AI 分割：前端工具包括 SAM 2.1 变体选择、正向点、反向点和框选；工作区和 AI 页面都可点击已有提示点删除单点，AI 页面也可删除最近锚点、删除选中候选或清空本页锚点；这些删除入口会限制在当前提示点/本页 AI 候选范围内，避免误删工作区已有 mask。SAM 2.1 框选会建立候选 mask，后续正/反点通过 `interactive` prompt 携带原始框和累计点细化同一个候选 mask；AI 页面框选会先固化 `promptBox`，执行分割时只框选发送 `box` prompt，框选后继续加正/反点发送 `interactive` prompt；重复执行高精度分割会替换上一次 AI 页候选，只保留最新一个候选。包含反向点时工作区会传 `options.auto_filter_background=true` 和 `min_score=0.05`，如果后端过滤为空则移除旧候选 mask。后端 `ai.py` 期望按 `image_id`、`prompt_type`、`prompt_data`、`model` 和可选 `options` 调用 SAM registry。当前 registry 暴露 `sam2.1_hiera_tiny`、`sam2.1_hiera_small`、`sam2.1_hiera_base_plus`、`sam2.1_hiera_large`，并兼容 `sam2` 作为 tiny 别名；`model=sam3` 会被拒绝，`semantic` 文本提示也被禁用。SAM 2.1 支持点/框/interactive/自动分割和 video predictor 传播；多候选默认只采用最高分区域，避免重叠候选同时显示；AI 页面只渲染本页最新生成的候选 mask，不会把工作区已有 mask 带入 AI 画布；AI 页面生成的 mask 会写入全局 `masks` 并自动选中，右侧分类树可直接改标签，推送到工作区会切到“调整多边形”并保留选择。`options.crop_to_prompt` 可对点/框/interactive prompt 做局部裁剪推理并回映射，`options.auto_filter_background` 可按分数和负向点过滤结果。
|
||||
9. 视频片段传播：工作区可选择“选中区域”或“当前帧全部”作为 seed，并用起止帧指定追踪范围；“传播全部可达”会把范围设为第 1 帧到最后 1 帧。前端会按 seed mask 和前/后方向顺序调用单 seed `POST /api/ai/propagate`，避免多个视频 tracker 并发抢占 GPU；后端按项目帧序列下载片段帧，当前使用所选 SAM 2.1 变体的 `SAM2VideoPredictor.add_new_mask()` + `propagate_in_video()`，并把后续帧结果保存为 `Annotation`。
|
||||
10. GT 导入：工作区“导入 GT Mask”调用 `/api/ai/import-gt-mask`；后端按非零像素值和连通域生成 polygon 标注，并用 distance transform 生成 seed point；前端回显 seed point，拖动后可归档更新。
|
||||
11. 模板管理：`TemplateRegistry.tsx` 管理分类、颜色和 z-index；`OntologyInspector.tsx` 在工作区显示当前模板分类树。
|
||||
12. 导出：后端支持 COCO JSON 和 PNG mask ZIP 导出；PNG ZIP 包含单标注 mask、按 zIndex 融合的语义 mask 和 `semantic_classes.json`。
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
|
||||
## 核心功能
|
||||
|
||||
- **多媒体资产管理** — 支持视频（MP4/AVI/MOV）和 DICOM 医学影像上传；视频导入与生成帧分离，生成帧时选择目标 FPS
|
||||
- **AI 智能分割引擎** — 当前产品入口启用 SAM 2.1 四个变体（tiny/small/base+/large）选择；支持点分割（point）、框分割（box）、交互式正/反点细化、自动分割（auto）和 video predictor 传播，前端默认只采用最高分候选避免重叠备选同时显示
|
||||
- **多媒体资产管理** — 支持视频（MP4/AVI/MOV）和 DICOM 医学影像上传；视频导入与生成帧分离，生成帧时选择目标 FPS，项目卡片可删除项目及其关联帧、标注和任务记录
|
||||
- **AI 智能分割引擎** — 当前产品入口启用 SAM 2.1 四个变体（tiny/small/base+/large）选择；支持点分割（point）、框分割（box）、交互式正/反点细化、提示点单点删除、AI 候选单独删除、自动分割（auto）和 video predictor 传播，前端默认只采用最高分候选避免重叠备选同时显示
|
||||
- **交互式画布标注** — 基于 Konva 的高性能 Canvas，支持缩放/平移/手工多边形/矩形/圆/点/线、polygon 顶点拖动/删除、边中点插点、双击边界插点、区域合并/去除、选点/框选、撤销/重做，实时渲染 Mask 遮罩
|
||||
- **GT Mask 导入** — 工作区可导入 GT mask 图片，后端按非零像素值和连通域生成 polygon 标注并用 distance transform 写入 seed point；前端可回显和拖动 seed point
|
||||
- **本体字典管理** — 可配置的分类体系、颜色映射、图层优先级（z-index）
|
||||
@@ -466,8 +466,8 @@ pip install -e . --no-build-isolation
|
||||
- 前端 `predictMask()` 已发送后端需要的 `image_id`、`prompt_type`、`prompt_data`，并把后端 `polygons` 转成 Konva `pathData`。
|
||||
- 工作区点选/框选会使用当前帧的数据库 `frame.id` 调用 `/api/ai/predict`。
|
||||
- 工作区 SAM 2.1 交互式细化包含反向点时会启用后端背景过滤；若反向点排除了当前候选区域并返回空结果，前端会移除旧候选 mask。
|
||||
- AI 页面只显示本页新生成的 SAM 2.1 候选，不会把工作区已有 mask 带入 AI 画布；新生成 mask 会写入全局 `masks` 并自动选中，右侧分类树可直接给生成结果换标签，“推送至工作区编辑”会切回工作区的多边形调整工具并保留选择。
|
||||
- 工作区“传播片段”会使用当前选中区域或当前帧第一个区域作为 seed，调用 `/api/ai/propagate`，并在完成后刷新已保存标注。
|
||||
- AI 页面只显示本页最新生成的 SAM 2.1 候选，不会把工作区已有 mask 带入 AI 画布；重复执行高精度分割会替换上一次 AI 页候选；新生成 mask 会写入全局 `masks` 并自动选中，右侧分类树可直接给生成结果换标签，“推送至工作区编辑”会切回工作区的多边形调整工具并保留选择。
|
||||
- 工作区传播功能会使用当前选中区域或当前帧全部区域作为 seed，按用户设置的起止帧向前/向后追踪；“传播全部可达”会覆盖项目第 1 帧到最后 1 帧。前端会按 seed 和方向顺序调用 `/api/ai/propagate`，并在完成后刷新已保存标注。
|
||||
- 前端 `exportCoco()` 已对齐到 `/api/export/{projectId}/coco`。
|
||||
- 工作区“导出 JSON 标注集”和“导出 PNG Mask ZIP”按钮已绑定下载流程；导出前会先保存当前待归档的前端 mask。
|
||||
- 工作区“导入 GT Mask”按钮已绑定 `/api/ai/import-gt-mask`，导入后会刷新并回显已保存标注和 seed point。
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
from models import Annotation, Frame, Mask, ProcessingTask, Project
|
||||
|
||||
|
||||
def test_project_crud_and_frames(client, monkeypatch):
|
||||
monkeypatch.setattr("routers.projects.get_presigned_url", lambda key, expires=3600: f"http://storage/{key}")
|
||||
|
||||
@@ -43,6 +46,42 @@ def test_project_crud_and_frames(client, monkeypatch):
|
||||
assert client.get(f"/api/projects/{project_id}").status_code == 404
|
||||
|
||||
|
||||
def test_delete_project_cascades_related_records(client, db_session):
|
||||
created = client.post("/api/projects", json={"name": "Cascade Delete"})
|
||||
assert created.status_code == 201
|
||||
project_id = created.json()["id"]
|
||||
|
||||
frame = client.post(f"/api/projects/{project_id}/frames", json={
|
||||
"project_id": project_id,
|
||||
"frame_index": 0,
|
||||
"image_url": "frames/0.jpg",
|
||||
"width": 640,
|
||||
"height": 360,
|
||||
})
|
||||
assert frame.status_code == 201
|
||||
frame_id = frame.json()["id"]
|
||||
|
||||
annotation = client.post("/api/ai/annotate", json={
|
||||
"project_id": project_id,
|
||||
"frame_id": frame_id,
|
||||
"mask_data": {"polygons": [[[0.1, 0.1], [0.2, 0.1], [0.2, 0.2]]]},
|
||||
})
|
||||
assert annotation.status_code == 201
|
||||
annotation_id = annotation.json()["id"]
|
||||
|
||||
db_session.add(Mask(annotation_id=annotation_id, mask_url="masks/1.png"))
|
||||
db_session.add(ProcessingTask(task_type="parse_video", project_id=project_id, status="queued"))
|
||||
db_session.commit()
|
||||
|
||||
deleted = client.delete(f"/api/projects/{project_id}")
|
||||
assert deleted.status_code == 204
|
||||
assert db_session.query(Project).filter(Project.id == project_id).count() == 0
|
||||
assert db_session.query(Frame).filter(Frame.project_id == project_id).count() == 0
|
||||
assert db_session.query(Annotation).filter(Annotation.project_id == project_id).count() == 0
|
||||
assert db_session.query(Mask).count() == 0
|
||||
assert db_session.query(ProcessingTask).filter(ProcessingTask.project_id == project_id).count() == 0
|
||||
|
||||
|
||||
def test_project_and_frame_404s(client):
|
||||
assert client.get("/api/projects/999").status_code == 404
|
||||
assert client.patch("/api/projects/999", json={"name": "x"}).status_code == 404
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
| 生成帧 FPS 滑块 | 真实可用 | 值传入 `/api/media/parse?parse_fps=...`，决定后台拆帧目标 FPS |
|
||||
| 导入 DICOM 序列 | 部分可用 | 可上传 `.dcm` 并触发解析；体验和错误反馈较粗 |
|
||||
| 项目状态徽标 | 真实可用 | 项目状态统一为 `pending/parsing/ready/error`，前端兼容归一化旧状态值 |
|
||||
| 更多按钮 | Mock / UI-only | 有图标，没有菜单或事件 |
|
||||
| 删除项目按钮 | 真实可用 | 点击垃圾桶按钮会确认删除，调用 `DELETE /api/projects/{id}`，成功后从项目库移除；若删除的是当前项目，会清空工作区当前项目、帧、mask 和选区 |
|
||||
| alert 成功/失败提示 | 真实可用但粗糙 | 使用浏览器 `alert` |
|
||||
|
||||
## 工作区 VideoWorkspace
|
||||
@@ -66,7 +66,8 @@
|
||||
| “导出 JSON 标注集”按钮 | 真实可用 | 导出前会保存未归档 mask，然后调用 `exportCoco()` 下载 JSON |
|
||||
| “导出 PNG Mask ZIP”按钮 | 真实可用 | 导出前会保存未归档 mask，然后调用 `GET /api/export/{project_id}/masks` 下载 ZIP；后端同时包含单标注 mask、每帧语义融合 mask 和 `semantic_classes.json` |
|
||||
| “导入 GT Mask”按钮 | 真实可用 | 选择图片后调用 `POST /api/ai/import-gt-mask`，后端按非零像素值和连通域生成 polygon 标注与距离变换 seed point，再回显到工作区 |
|
||||
| “传播片段”按钮 | 真实可用 | 使用当前选中 mask 或当前帧第一个 mask 作为 seed，调用 `POST /api/ai/propagate`；当前启用 SAM 2 video predictor，完成后刷新已保存标注 |
|
||||
| 传播对象/起止帧/按范围传播 | 真实可用 | 可选择“选中区域”或“当前帧全部”，并用起止帧定义从当前帧向前/向后的追踪范围；前端会按 seed mask 和方向顺序调用 `POST /api/ai/propagate`，当前启用 SAM 2 video predictor，完成后刷新已保存标注 |
|
||||
| “传播全部可达”按钮 | 真实可用 | 一键把传播范围设为项目第 1 帧到最后 1 帧，并按当前传播对象把当前帧区域向前后所有可达帧传播 |
|
||||
| “结构化归档保存”按钮 | 真实可用 | 未保存 mask 写入 `POST /api/ai/annotate`；dirty mask 写入 `PATCH /api/ai/annotations/{id}`；保存成功后会重新拉取后端标注，并用 saved annotation 替换本次提交的 draft mask，避免仍显示未保存 |
|
||||
|
||||
## CanvasArea 画布
|
||||
@@ -97,7 +98,7 @@
|
||||
| 调整多边形 | 真实可用 | 选中 polygon mask 后显示顶点和边中点；支持拖动顶点、点击边中点插点、双击边界按位置插点 |
|
||||
| 多边形/矩形/圆/点/线 | 真实可用 | 切换 activeTool 后由 `CanvasArea` 生成可保存的 polygon mask |
|
||||
| 区域合并/去除 | 真实可用 | 选择工具后点击多个 mask，右下角显示已选数量和操作按钮；合并/去除模式会隐藏 polygon 编辑手柄，避免手柄抢占多选点击；使用 `polygon-clipping` 做 union / difference；合并会保留主 mask 并移除被合并 mask，去除会从主 mask 扣除后续选中 mask；内含扣除会保留 hole ring 并用 even-odd 规则渲染 |
|
||||
| 正向选点/反向选点/框选 | 部分可用 | 会影响 Canvas 交互，并能触发已对齐的 AI 推理接口 |
|
||||
| 正向选点/反向选点/框选 | 部分可用 | 会影响 Canvas 交互，并能触发已对齐的 AI 推理接口；点击工作区内已有 SAM 提示点会优先删除该提示点并重新推理，不会冒泡成新增提示点或 mask 选择 |
|
||||
| 魔法棒 SAM 触发 | 部分可用 | 切到 AI 页面；不是直接执行推理 |
|
||||
| 撤销/重做 | 真实可用 | 绑定 Zustand `maskHistory/maskFuture`，支持工具栏按钮、AI 页按钮和 Canvas Ctrl+Z/Ctrl+Y |
|
||||
|
||||
@@ -109,7 +110,7 @@
|
||||
| 点击缩略图跳帧 | 真实可用 | 调用 `setCurrentFrame(idx)` |
|
||||
| 顶部 range 拖动 | 真实可用 | 改变当前帧 |
|
||||
| 具体时间显示 | 真实可用 | 根据项目 `parse_fps/original_fps` 显示当前时间和总时长，格式为 `mm:ss.cc` |
|
||||
| 已编辑帧标记带 | 真实可用 | 根据当前项目帧内的 `masks` 计算有编辑/标注的帧，在顶部进度条和缩略图导航轴之间显示标记；点击标记可跳转到对应帧 |
|
||||
| 已编辑帧进度线 | 真实可用 | 根据当前项目帧内的 `masks` 计算有编辑/标注的帧，并在顶部进度条上覆盖琥珀色竖线；当前帧位置由播放进度条末端、时间提示和缩略图高亮表达，点击已编辑竖线可跳转到对应帧 |
|
||||
| 播放/暂停 | 真实可用 | 当前代码按 `parse_fps/original_fps` 推进帧，最多 30fps |
|
||||
| 方向键切帧 | 真实可用 | 全局监听左右方向键切到上一帧/下一帧；焦点在 input、textarea、select 或 contentEditable 内时不会拦截 |
|
||||
|
||||
@@ -129,15 +130,18 @@
|
||||
| 元素 | 状态 | 说明 |
|
||||
|------|------|------|
|
||||
| SAM 2.1 变体选择 / 模型状态 | 真实可用 | AI 页可选 tiny/small/base+/large，调用 `GET /api/ai/models/status?selected_model=<variant>` 展示所选变体和 GPU 状态；只有本地存在 checkpoint 的变体显示可用 |
|
||||
| 正向/反向点 | 真实可用 | 可在当前项目帧上加点并调用 AI 推理接口；AI 页中点击已有候选 mask 时也会继续添加当前正/反向提示点；SAM 2.1 框选后会携带原始框和累计正/反点细化同一个候选 mask |
|
||||
| 正向/反向点 | 真实可用 | 可在当前项目帧上加点并调用 AI 推理接口；AI 页中点击已有候选 mask 时也会继续添加当前正/反向提示点，点击已有提示点会删除该点；SAM 2.1 框选后会携带原始框和累计正/反点细化同一个候选 mask |
|
||||
| 边界框选 | 真实可用 | AI 页选择工具后可在画布拖拽蓝色虚线框；执行分割时会随 `/api/ai/predict` 发送 `box`，框选后继续添加正/反点会发送 interactive prompt |
|
||||
| SAM 3 入口 | 当前禁用 | 因当前系统不提供文本提示，前端不再显示 SAM 3 模型选择、文本输入或 SAM 3 框选入口；后端 `model=sam3` 返回不支持 |
|
||||
| 语义文本输入 | 当前禁用 | AI 页不再提供文本语义输入；后端收到 `semantic` prompt 会返回 400 |
|
||||
| 参数开关 | 真实可用 | `cropMode` 会随 `/api/ai/predict` 发送 `crop_to_prompt`，后端对点/框 prompt 裁剪推理区域并回映射 polygon；`autoDeleteBg` 会发送 `auto_filter_background` 和 `min_score`，后端过滤低分结果和覆盖负向点的结果 |
|
||||
| 参数开关 | 真实可用 | UI 展示为“局部专注模式（自动裁剪无锚区域）”和“严格除杂模式（自动清理干涉点）”，只是为了让用户更容易理解，不重命名内部字段；`cropMode` 会随 `/api/ai/predict` 发送 `crop_to_prompt`，后端对点/框 prompt 裁剪推理区域并回映射 polygon；`autoDeleteBg` 会发送 `auto_filter_background` 和 `min_score`，后端过滤低分结果和覆盖负向点的结果 |
|
||||
| 遮罩清晰度 | 真实可用 | 调节 AI 页候选 mask 的预览透明度，只影响本页显示，不改变 mask 几何、分类或保存数据 |
|
||||
| 执行高精度语义分割 | 真实可用 | 使用当前项目帧和所选 SAM 2.1 变体调用 `/api/ai/predict`；SAM 2.1 需要点/框提示且只采用最高分候选；AI 页只渲染本页新生成候选，不显示工作区已有 mask；生成结果写入全局 masks 并自动选中，右侧分类树可立即换标签 |
|
||||
| 执行高精度语义分割 | 真实可用 | 使用当前项目帧和所选 SAM 2.1 变体调用 `/api/ai/predict`；SAM 2.1 需要点/框提示且只采用最高分候选；AI 页只渲染本页最新候选，不显示工作区已有 mask，重复执行会替换上一次 AI 页候选而不是叠加；生成结果写入全局 masks 并自动选中，右侧分类树可立即换标签 |
|
||||
| 推送至工作区编辑 | 真实可用 | 切回工作区并把工具切到“调整多边形”，保留 AI 页选中的未保存 mask；工作区回显后端标注时不会覆盖这类 draft mask |
|
||||
| 上传替换底图 | Mock / UI-only | 按钮无事件 |
|
||||
| 撤销/重做 | 真实可用 | 绑定全局 mask 历史栈 |
|
||||
| 删除最近锚点 | 真实可用 | 删除 AI 页最近一次放置的正/反向提示点，不影响已生成候选 mask 或工作区 mask |
|
||||
| 删除选中候选 | 真实可用 | 删除 AI 页当前选中的本页候选 mask；不会删除工作区已有 mask，Delete/Backspace 也遵循同一范围 |
|
||||
| 清空全体锚点 | 真实可用 | 清空 AI 页提示点和本页生成的候选 mask，不删除工作区已有 mask |
|
||||
| 退档推送至工作区重组 | 部分可用 | 只切回工作区，共用 masks store，但没有保存/确认流程 |
|
||||
| 背景图 | 部分可用 | 优先显示当前项目帧；没有项目帧时仍回退到 Unsplash 演示图 |
|
||||
|
||||
@@ -228,7 +228,9 @@ SAM 2 点提示和 auto fallback 当前只采用最高分候选 mask，避免同
|
||||
|
||||
### 视频片段传播请求体
|
||||
|
||||
工作区“传播片段”调用：
|
||||
后端接口仍以单个 seed 为单位。工作区前端的“按范围传播/传播全部可达”会在本地根据当前帧、起止帧和传播对象，把多个 seed 或前后双向范围拆成多次顺序调用，避免同时启动多个视频 tracker。
|
||||
|
||||
单次调用示例：
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
@@ -129,20 +129,21 @@ Word 方案中的完整版本包含距离变换、骨架提取和聚类。当前
|
||||
|
||||
## 阶段 7.5：视频片段传播（已完成基础闭环）
|
||||
|
||||
当前工作区“传播片段”会使用当前选中 mask 或当前帧第一个 mask 作为 seed，默认向后传播 30 帧并把结果写入后端标注表。
|
||||
当前工作区传播功能会使用当前帧的选中 mask 或当前帧全部 mask 作为 seed，按用户设置的起止帧向前、向后或双向传播，并把结果写入后端标注表。“传播全部可达”会把范围设置为项目第 1 帧到最后 1 帧。
|
||||
|
||||
已完成：
|
||||
|
||||
1. 前端 `propagateMasks()` 已接入 `POST /api/ai/propagate`。
|
||||
2. 工作区按钮会把 seed mask 的 normalized polygon、bbox、label、color 和 class 元数据传给后端。
|
||||
2. 工作区会把 seed mask 的 normalized polygon、bbox、label、color 和 class 元数据传给后端。
|
||||
3. SAM 2 路径使用官方 `SAM2VideoPredictor.add_new_mask()` 和 `propagate_in_video()`。
|
||||
4. SAM 3 video tracker 路径已从当前产品入口禁用，相关 helper 仅保留作后续恢复参考。
|
||||
5. 后端会跳过源帧，把传播结果保存到后续帧 `annotations`，并在完成后由前端刷新回显。
|
||||
6. 前端已经支持传播对象选择、起止帧范围和“传播全部可达”；多个 seed 或前后双向范围会拆成多次顺序调用单 seed 后端接口。
|
||||
|
||||
剩余建议：
|
||||
|
||||
1. 把传播任务改为异步任务，接入 Dashboard 和 WebSocket 进度。
|
||||
2. 前端增加传播方向、帧数和覆盖已有标注策略设置。
|
||||
2. 增加覆盖已有标注策略设置，例如跳过已有、覆盖同类、全部覆盖。
|
||||
3. 用真实长视频做 SAM 2 tracker smoke test 和质量评估；如果未来恢复 SAM 3，再单独补充 SAM 3 tracker 评估。
|
||||
|
||||
## 阶段 8：清理 UI 文案与 Mock
|
||||
|
||||
@@ -20,7 +20,9 @@
|
||||
- 用户可以导入视频文件，前端创建项目、上传文件并刷新项目列表；导入视频不自动拆帧。
|
||||
- 用户可以对已导入且尚未生成帧的视频项目点击“生成帧”，在弹窗中选择目标 FPS 后创建拆帧任务。
|
||||
- 用户可以导入 DICOM 序列，前端上传 DICOM、触发拆帧、刷新项目列表。
|
||||
- 用户可以在项目卡片上删除项目；前端调用 `DELETE /api/projects/{id}`，删除成功后从项目库移除，若删除当前项目则清空工作区当前项目、帧、mask 和选区。
|
||||
- 后端支持项目创建、列表、详情、局部更新和删除。
|
||||
- 后端删除项目时通过 ORM 级联删除项目帧、标注、导出 mask 元数据和后台任务记录。
|
||||
- 后端支持项目帧创建、列表和单帧查询。
|
||||
|
||||
## R3 媒体上传与拆帧
|
||||
@@ -49,7 +51,7 @@
|
||||
- 时间轴支持缩略图点击切帧、range 拖动切帧、键盘左右方向键切帧、播放/暂停顺序推进帧。
|
||||
- 播放帧率使用项目 `parse_fps` 或 `original_fps`，限制在 1 到 30 FPS。
|
||||
- 时间轴显示当前帧时间和总时长，时间基准使用项目 `parse_fps` 或 `original_fps`，格式为 `mm:ss.cc`。
|
||||
- 时间轴在顶部进度条和底部缩略图导航轴之间显示“已编辑”标记带，基于当前项目帧内的 `masks` 标出已有编辑/标注的帧；点击标记可跳转到对应帧。
|
||||
- 时间轴在顶部进度条上覆盖琥珀色竖线标记，基于当前项目帧内的 `masks` 标出已有编辑/标注的帧；当前帧位置由播放进度条末端、时间提示和缩略图高亮表达，点击已编辑竖线可跳转到对应帧。
|
||||
|
||||
## R5 工具栏
|
||||
|
||||
@@ -78,20 +80,28 @@
|
||||
- 前端发送后端契约：`image_id`、`prompt_type`、`prompt_data`、`model`。
|
||||
- 点提示传 `{ points, labels }`，正向点 label 为 1，反向点 label 为 0。
|
||||
- AI 页面在已有候选 mask 上点击正向/反向选点时，应继续添加提示点，不应被 mask 选择事件拦截。
|
||||
- AI 页面点击已有提示点应删除对应点；“删除最近锚点”只移除最近放置的提示点，不删除候选 mask 或工作区 mask。
|
||||
- AI 页面“删除选中候选”和 Delete/Backspace 只删除本页生成且已选中的 AI 候选 mask，不删除工作区已有 mask。
|
||||
- 工作区点击已有 SAM 提示点应优先删除该点并按剩余提示重新推理；该事件不得冒泡成新增提示点、mask 选择或其它画布点击行为。
|
||||
- 框选提示传归一化 `[x1, y1, x2, y2]`。
|
||||
- AI 页面边界框选应支持画布拖拽预览框；执行分割时只框选不加点发送 `box` prompt，框选后继续加点发送 `interactive` prompt。
|
||||
- 工作区 SAM 2.1 框选会建立一个候选 mask；后续正向点/反向点会携带原始框和累计点，以 `interactive` prompt 细化并替换同一个候选 mask。
|
||||
- 工作区 SAM 2.1 一旦包含反向点，会随请求启用 `auto_filter_background` 和 `min_score=0.05`；若后端判定反向点排除了当前候选区域并返回空结果，前端会移除旧候选 mask，避免继续显示已被否定的区域。
|
||||
- SAM 2.1 不支持文本语义提示；当前 AI 页面不提供文本语义输入，必须使用点/框提示。
|
||||
- SAM 2.1 点提示和 auto fallback 默认只采用一个最高分候选 mask，避免多个候选 mask 作为同一结果重叠显示。
|
||||
- AI 页面只渲染本页新生成的候选 mask；工作区已有手工、保存、传播或 GT 导入 mask 不会自动进入 AI 画布。
|
||||
- AI 页面只渲染本页最新生成的候选 mask；重复执行高精度分割会替换上一次 AI 页候选，工作区已有手工、保存、传播或 GT 导入 mask 不会自动进入 AI 画布，也不会被替换。
|
||||
- AI 页面提供“遮罩清晰度”滑杆，调节本页候选 mask 的预览透明度，不改变 mask 几何、分类或保存数据。
|
||||
- AI 页面参数开关展示文案使用“局部专注模式（自动裁剪无锚区域）”和“严格除杂模式（自动清理干涉点）”；这是 UI 可读性文案，不改变 `cropMode`、`autoDeleteBg` 或后端 `options` 字段。
|
||||
- AI 页面生成的 SAM 2.1 mask 会写入全局 `masks`，自动同步到当前项目帧，并写入全局 `selectedMaskIds`；右侧语义分类树可以直接给新生成 mask 换标签。
|
||||
- AI 页“清空全体锚点”只清空本页提示点和本页生成的候选 mask，不删除工作区已有 mask。
|
||||
- AI 页面“推送至工作区编辑”会切回工作区并把工具切到“调整多边形”，保留当前选中的 AI mask 以便继续编辑轮廓和归档保存。
|
||||
- 工作区加载后端已保存标注时，必须保留当前项目帧里尚未保存的 AI/手工 draft mask，避免 AI 页推送到工作区的候选 mask 被异步回显流程覆盖。
|
||||
- 语义文本提示 `semantic` 当前被后端禁用并返回 400。
|
||||
- SAM 3 源码和历史测试保留，但不属于当前产品可用功能；前端不再展示 SAM 3 入口，后端 registry 不暴露 `sam3`。
|
||||
- 工作区“传播片段”会把当前选中区域或当前帧第一个区域作为 seed，调用 `POST /api/ai/propagate`，默认从当前帧向后传播 30 帧并保存结果标注。
|
||||
- 工作区传播功能允许选择传播对象：“选中区域”或“当前帧全部”；选中区域模式需要当前帧至少一个已选 mask，全部模式会使用当前帧所有 mask。
|
||||
- 工作区传播功能允许设置起止帧；前端以当前帧为 seed，只向起止范围内位于当前帧之前和之后的帧传播，源帧不重复保存。
|
||||
- 工作区“传播全部可达”会把起止帧设为项目第 1 帧到最后 1 帧，并按当前传播对象传播到所有可达前后帧。
|
||||
- 前端复用单 seed 后端接口；多个 seed 或双向范围会被拆成多次顺序调用 `POST /api/ai/propagate`，避免并发抢占 GPU。
|
||||
- `POST /api/ai/propagate` 当前支持四个 SAM 2.1 变体；兼容 `model=sam2` 并归一化为 tiny。SAM 2.1 使用官方 `SAM2VideoPredictor.add_new_mask()` 和 `propagate_in_video()`。
|
||||
- 传播结果会写入后续帧 `annotations`，`mask_data.source` 标记为 `<model_id>_propagation`，并保留 label、color 和 class 元数据。
|
||||
- AI 页面会对未放置点提示、后端错误和返回 0 个 mask 的情况显示明确反馈。
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
| 模型状态 | `src/components/ModelStatusBadge.tsx` | 展示 GPU 与当前 SAM 模型真实可用状态 |
|
||||
| 登录页 | `src/components/Login.tsx` | 调用登录 API，写入 store |
|
||||
| Dashboard | `src/components/Dashboard.tsx` | 展示统计、任务控制、失败详情和 WebSocket 进度消息 |
|
||||
| 项目库 | `src/components/ProjectLibrary.tsx` | 项目列表、新建、导入视频/DICOM、显式生成帧 |
|
||||
| 项目库 | `src/components/ProjectLibrary.tsx` | 项目列表、新建、删除、导入视频/DICOM、显式生成帧 |
|
||||
| 工作区 | `src/components/VideoWorkspace.tsx` | 加载帧和模板，组织工具栏、Canvas、本体面板、时间轴 |
|
||||
| Canvas | `src/components/CanvasArea.tsx` | 显示帧、缩放平移、点/框提示、渲染 mask |
|
||||
| 工具栏 | `src/components/ToolsPalette.tsx` | 切换工具、跳转 AI 页面、触发 mask 撤销/重做 |
|
||||
@@ -103,7 +103,7 @@
|
||||
3. 帧数据映射为 store `Frame[]`，包含 `timestampMs` 和 `sourceFrameNumber`，供时间轴和后续视频传播使用。
|
||||
4. 工作区调用 `GET /api/ai/annotations` 回显已保存标注时，会替换当前项目帧中的已保存 mask，但保留没有 `annotationId` 的未保存 draft mask；这保证 AI 页推送到工作区的候选 mask 不会被异步回显覆盖，并会在合并完成后恢复仍然存在的已选 mask id。
|
||||
5. `CanvasArea` 会把全局 `selectedMaskIds` 中仍存在于当前帧的 id 同步回本地选区，避免帧初始化时的临时清空覆盖 AI 页推送过来的选中态。
|
||||
6. `FrameTimeline` 根据当前项目 `frames` 和全局 `masks` 计算有编辑/标注的帧，在进度条与缩略图导航轴之间渲染可点击标记。
|
||||
6. `FrameTimeline` 根据当前项目 `frames` 和全局 `masks` 计算有编辑/标注的帧，并在顶部时间进度条上覆盖可点击的琥珀色竖线；当前帧不额外渲染竖线，由播放进度条末端、时间提示和缩略图高亮表达。
|
||||
7. 当前帧传入 `CanvasArea`。
|
||||
|
||||
### AI 点/框推理
|
||||
@@ -116,24 +116,32 @@
|
||||
6. 后端加载帧图片并通过 SAM registry 分发到所选 SAM 2.1 变体；`model=sam2` 会兼容归一化为 tiny，`model=sam3` 会被拒绝。
|
||||
7. 前端把 `polygons` 转为 mask；交互式细化会替换同一个候选 mask，而不是新增多个 mask。
|
||||
8. 若带反向点的 SAM 2.1 细化返回空结果，前端会删除当前旧候选 mask 并提示反向点已排除该区域。
|
||||
9. AI 页面只按本页生成的候选 id 渲染 mask，不把工作区已有 mask 带入 AI 画布。
|
||||
9. AI 页面只按本页最新生成的候选 id 渲染 mask，不把工作区已有 mask 带入 AI 画布；每次 `runInference()` 都先过滤掉旧 `aiMaskIds` 对应候选，再写入本次最高分候选。
|
||||
10. AI 页面候选 mask 的 Path 点击事件会先判断当前工具；正向/反向选点工具下点击 mask 会继续追加提示点，其他工具下才选中 mask。
|
||||
11. AI 页面“遮罩清晰度”滑杆只调节候选 mask 的 Konva preview opacity，不写入 `Mask.segmentation`、分类元数据或后端 payload。
|
||||
12. Canvas 按当前帧过滤并渲染 mask。
|
||||
13. 新 mask 会带上当前选择的模板分类元数据，包括 `classId`、`className`、`classZIndex`、`metadata.source=ai_segmentation` 和保存状态 `draft`。
|
||||
14. 用户点击“结构化归档保存”后，前端将像素 `segmentation` 转成 normalized `mask_data.polygons`；未保存 mask 调用 `POST /api/ai/annotate`，dirty mask 调用 `PATCH /api/ai/annotations/{annotation_id}`；保存成功后本次提交的 draft mask id 会从本地保留列表中排除，并由后端 saved annotation 回显替换。
|
||||
15. 工作区加载项目帧后通过 `GET /api/ai/annotations` 取回已保存标注并转成前端 mask。
|
||||
16. 工作区“清空遮罩”删除当前帧已保存标注，并清除当前帧本地 mask。
|
||||
11. 工作区 SAM 提示点由 `CanvasArea` 本地 `points` 状态维护；点击已渲染提示点会先 `cancelBubble`，再删除对应点并按剩余提示重新调用 `runInference()`，避免同一次点击继续触发 Stage 加点或 Path 选择。
|
||||
12. AI 页面边界框选由 `promptBox/boxStart/boxCurrent` 维护；拖拽时渲染蓝色虚线框，鼠标释放后固化 `promptBox` 并清空旧提示点，避免旧点误绑定到新框。
|
||||
13. AI 页面执行分割时，如果只有 `promptBox` 则发送 `box` prompt；如果 `promptBox` 和 `points` 同时存在，`predictMask()` 会发送 interactive prompt。
|
||||
14. AI 页面提示点由本地 `points` 状态维护；点击已渲染提示点会按 index 删除对应点，“删除最近锚点”会删除数组最后一个点，不改动候选 mask 列表。
|
||||
15. AI 页面候选 mask 删除只接受当前 `aiMaskIds` 范围内的已选 id；“删除选中候选”和 Delete/Backspace 都复用该范围过滤，避免删除工作区已有 mask。
|
||||
16. AI 页面参数开关文案只做展示增强：“局部专注模式（自动裁剪无锚区域）”仍控制 `cropMode/crop_to_prompt`，“严格除杂模式（自动清理干涉点）”仍控制 `autoDeleteBg/auto_filter_background/min_score`。
|
||||
17. AI 页面“遮罩清晰度”滑杆只调节候选 mask 的 Konva preview opacity，不写入 `Mask.segmentation`、分类元数据或后端 payload。
|
||||
18. Canvas 按当前帧过滤并渲染 mask。
|
||||
19. 新 mask 会带上当前选择的模板分类元数据，包括 `classId`、`className`、`classZIndex`、`metadata.source=ai_segmentation` 和保存状态 `draft`。
|
||||
20. 用户点击“结构化归档保存”后，前端将像素 `segmentation` 转成 normalized `mask_data.polygons`；未保存 mask 调用 `POST /api/ai/annotate`，dirty mask 调用 `PATCH /api/ai/annotations/{annotation_id}`；保存成功后本次提交的 draft mask id 会从本地保留列表中排除，并由后端 saved annotation 回显替换。
|
||||
21. 工作区加载项目帧后通过 `GET /api/ai/annotations` 取回已保存标注并转成前端 mask。
|
||||
22. 工作区“清空遮罩”删除当前帧已保存标注，并清除当前帧本地 mask。
|
||||
|
||||
### 视频片段传播
|
||||
|
||||
1. 用户在工作区选中一个当前帧 mask；如果未显式选中，前端使用当前帧第一个 mask。
|
||||
2. `VideoWorkspace` 用 `buildAnnotationPayload()` 把 seed mask 转成 normalized polygon、bbox、label、color 和 class 元数据。
|
||||
3. 前端调用 `POST /api/ai/propagate`，默认 `direction=forward`、`max_frames=30`、`include_source=false`。
|
||||
4. 后端按项目帧序列截取片段，下载对应帧到临时 `frame_%06d.jpg` 目录，保持当前帧在片段中的相对索引。
|
||||
5. `model` 为任一 SAM 2.1 变体时，`sam2_engine` 使用对应 checkpoint/config 加载 `SAM2VideoPredictor.add_new_mask()` 注入 seed mask，再用 `propagate_in_video()` 传播。
|
||||
6. `model=sam3` 当前不支持；SAM 3 video tracker 代码保留但没有接入产品路径。
|
||||
7. 后端把传播返回的 normalized polygon 保存为后续帧 `Annotation`，跳过源帧，`mask_data.source` 记录模型传播来源。
|
||||
1. 用户在工作区选择传播对象：`selected` 表示当前帧已选 mask，`all` 表示当前帧所有 mask。
|
||||
2. 用户设置起止帧；“传播全部可达”会把起止帧设为 1 到项目总帧数。
|
||||
3. `VideoWorkspace` 以当前帧为 seed，将起止帧拆成 `backward` 和/或 `forward` 两段；只包含当前帧时不传播。
|
||||
4. `VideoWorkspace` 用 `buildAnnotationPayload()` 把每个 seed mask 转成 normalized polygon、bbox、label、color 和 class 元数据。
|
||||
5. 前端对每个 seed、每个方向顺序调用 `POST /api/ai/propagate`，`include_source=false`、`save_annotations=true`；顺序调用是为了避免多个视频 tracker 并发抢占 GPU。
|
||||
6. 后端按项目帧序列截取片段，下载对应帧到临时 `frame_%06d.jpg` 目录，保持当前帧在片段中的相对索引。
|
||||
7. `model` 为任一 SAM 2.1 变体时，`sam2_engine` 使用对应 checkpoint/config 加载 `SAM2VideoPredictor.add_new_mask()` 注入 seed mask，再用 `propagate_in_video()` 传播。
|
||||
8. `model=sam3` 当前不支持；SAM 3 video tracker 代码保留但没有接入产品路径。
|
||||
9. 后端把传播返回的 normalized polygon 保存为后续帧 `Annotation`，跳过源帧，`mask_data.source` 记录模型传播来源。
|
||||
8. 前端传播完成后重新调用 `GET /api/ai/annotations` 并回显新标注。
|
||||
|
||||
### 手工绘制与历史栈
|
||||
|
||||
@@ -15,11 +15,11 @@
|
||||
| 需求 | 测试文件 | 覆盖点 |
|
||||
|------|----------|--------|
|
||||
| R1 登录与会话 | `src/components/Login.test.tsx`, `backend/tests/test_auth.py` | 成功登录、失败提示、后端 401 |
|
||||
| R2 项目管理 | `src/lib/api.test.ts`, `backend/tests/test_projects.py` | 前端字段映射、PATCH 更新、后端 CRUD、帧列表 |
|
||||
| R2 项目管理 | `src/lib/api.test.ts`, `src/components/ProjectLibrary.test.tsx`, `backend/tests/test_projects.py` | 前端字段映射、PATCH 更新、项目卡片删除、DELETE 契约、后端 CRUD、删除级联、帧列表 |
|
||||
| R3 媒体上传与拆帧 | `src/components/ProjectLibrary.test.tsx`, `backend/tests/test_media.py`, `backend/tests/test_tasks.py` | 视频导入不自动拆帧、显式生成帧 FPS 选择、扩展名校验、自动建项目、关联项目、创建异步任务、标准帧序列参数、帧时间戳/源帧号、任务序列元数据、worker 注册帧、取消任务、重试任务、取消后 worker 停止 |
|
||||
| R4 工作区与帧浏览 | `src/components/VideoWorkspace.test.tsx`, `src/components/FrameTimeline.test.tsx` | 加载帧、无帧项目不自动解析并提示生成帧、回显已保存标注时保留本地未保存 draft mask、缩略图/range/已编辑帧标记/左右方向键切帧、播放、按项目 FPS 显示当前/总时长 |
|
||||
| R5 工具栏 | `src/components/ToolsPalette.test.tsx`, `src/components/CanvasArea.test.tsx`, `src/store/useStore.test.ts` | 工具切换、调整多边形工具、AI 跳转、矩形/圆/线/点/多边形手工 mask 绘制、点工具在已有 mask 上落点、多边形 Enter/首节点闭合、polygon 顶点拖动/删除、边中点插点、双击边界按位置插点、整块 mask 删除、区域合并/去除、内含去除 hole 渲染、合并模式隐藏编辑手柄、撤销/重做历史栈 |
|
||||
| R6 AI 推理 | `src/lib/api.test.ts`, `src/components/CanvasArea.test.tsx`, `src/components/AISegmentation.test.tsx`, `src/components/VideoWorkspace.test.tsx`, `src/components/ModelStatusBadge.test.tsx`, `backend/tests/test_ai.py`, `backend/tests/test_sam2_engine.py` | SAM 2.1 变体选择、点/框/interactive 契约、semantic 禁用、SAM 3 入口隐藏和后端拒绝、SAM 2.1 最高分候选去重、SAM 2.1 框选后正负点细化同一候选 mask、SAM 2.1 反向点启用背景过滤且空结果移除旧候选、AI 页不渲染工作区已有 mask、AI 页可在候选 mask 上继续添加正/反点、AI 页清空只移除本页候选、AI 页遮罩清晰度只改预览 opacity、AI 页生成 mask 自动选中并可通过分类树换标签、AI 页推送到工作区编辑保留选择、SAM 2.1 视频传播、空提示/空结果反馈、GPU/SAM2.1 状态、AI 参数 options、局部裁剪推理、背景过滤、状态徽标、坐标归一化、正负点 labels、polygons 转 path、后端 fake registry |
|
||||
| R4 工作区与帧浏览 | `src/components/VideoWorkspace.test.tsx`, `src/components/FrameTimeline.test.tsx` | 加载帧、无帧项目不自动解析并提示生成帧、回显已保存标注时保留本地未保存 draft mask、缩略图/range/已编辑帧进度条竖线标记、当前帧由进度条末端和缩略图高亮表达/左右方向键切帧、播放、按项目 FPS 显示当前/总时长 |
|
||||
| R5 工具栏 | `src/components/ToolsPalette.test.tsx`, `src/components/CanvasArea.test.tsx`, `src/store/useStore.test.ts` | 工具切换、调整多边形工具、AI 跳转、矩形/圆/线/点/多边形手工 mask 绘制、点工具在已有 mask 上落点、多边形 Enter/首节点闭合、polygon 顶点拖动/删除、边中点插点、双击边界按位置插点、整块 mask 删除、区域合并/去除、内含去除 hole 渲染、合并模式隐藏编辑手柄、工作区 SAM 提示点点击删除且不冒泡新增点、撤销/重做历史栈 |
|
||||
| R6 AI 推理 | `src/lib/api.test.ts`, `src/components/CanvasArea.test.tsx`, `src/components/AISegmentation.test.tsx`, `src/components/VideoWorkspace.test.tsx`, `src/components/ModelStatusBadge.test.tsx`, `backend/tests/test_ai.py`, `backend/tests/test_sam2_engine.py` | SAM 2.1 变体选择、点/框/interactive 契约、semantic 禁用、SAM 3 入口隐藏和后端拒绝、SAM 2.1 最高分候选去重、SAM 2.1 框选后正负点细化同一候选 mask、AI 页框选发送 box prompt、AI 页框选后加点发送 interactive prompt、AI 页重复执行替换旧候选、SAM 2.1 反向点启用背景过滤且空结果移除旧候选、AI 页不渲染工作区已有 mask、AI 页可在候选 mask 上继续添加正/反点、AI 页可单点删除提示点并删除最近锚点、AI 页可删除选中候选且不删除工作区 mask、AI 页清空只移除本页候选、AI 页参数开关可读性文案且 options 字段不变、AI 页遮罩清晰度只改预览 opacity、AI 页生成 mask 自动选中并可通过分类树换标签、AI 页推送到工作区编辑保留选择、SAM 2.1 视频按选中/全量 seed 和起止帧范围传播、传播全部可达、空提示/空结果反馈、GPU/SAM2.1 状态、AI 参数 options、局部裁剪推理、背景过滤、状态徽标、坐标归一化、正负点 labels、polygons 转 path、后端 fake registry |
|
||||
| R7 标注保存 | `src/components/VideoWorkspace.test.tsx`, `src/components/CanvasArea.test.tsx`, `src/lib/api.test.ts`, `backend/tests/test_ai.py` | 保存标注、保存后用后端 saved annotation 替换已提交 draft、加载回显、更新 dirty 标注、清空删除已保存标注、GT mask 多类别导入、seed point 回显/归一化、项目不存在、帧不存在 |
|
||||
| R8 模板库 | `src/components/TemplateRegistry.test.tsx`, `src/lib/api.test.ts`, `backend/tests/test_templates.py` | 前端模板加载/新建/编辑/删除、JSON 分类导入、mapping_rules 解包/打包、后端模板 CRUD |
|
||||
| R9 本体检查面板 | `src/components/OntologyInspector.test.tsx`, `src/components/CanvasArea.test.tsx`, `src/store/useStore.test.ts` | 模板选择、分类展示、具体分类选择、Canvas 选区同步、点击分类给已选 mask 换标签、自定义分类本地添加 |
|
||||
@@ -35,10 +35,10 @@
|
||||
| R1 | 登录页、默认开发凭证、token 写入、失败提示、后端 401 | `Login.test.tsx`, `test_auth.py` | 已覆盖 |
|
||||
| R2 | 项目列表/创建/选择、视频导入、DICOM 导入、后端项目和帧 CRUD | `ProjectLibrary.test.tsx`, `api.test.ts`, `test_projects.py` | 已覆盖 |
|
||||
| R3 | 文件类型校验、自动/指定项目上传、视频导入与生成帧分离、显式 FPS 生成帧、视频/DICOM 拆帧任务、`parse_fps/max_frames/target_width`、标准帧序列 metadata、任务查询、取消、重试、worker 取消停止 | `ProjectLibrary.test.tsx`, `test_media.py`, `test_tasks.py` | 已覆盖 |
|
||||
| R4 | 工作区加载帧、无帧项目不自动解析、后端标注回显保留本地未保存 draft mask、Canvas 底图、缩略图/range/已编辑帧标记/左右方向键切帧、播放、按 FPS 显示时间 | `VideoWorkspace.test.tsx`, `FrameTimeline.test.tsx`, `CanvasArea.test.tsx` | 已覆盖 |
|
||||
| R4 | 工作区加载帧、无帧项目不自动解析、后端标注回显保留本地未保存 draft mask、Canvas 底图、缩略图/range/已编辑帧进度条竖线标记、当前帧由进度条末端和缩略图高亮表达/左右方向键切帧、播放、按 FPS 显示时间 | `VideoWorkspace.test.tsx`, `FrameTimeline.test.tsx`, `CanvasArea.test.tsx` | 已覆盖 |
|
||||
| R5 | 工具切换、调整多边形入口、AI 跳转、矩形/圆/线/点/多边形绘制、已有 mask 上继续绘制 | `ToolsPalette.test.tsx`, `CanvasArea.test.tsx` | 已覆盖 |
|
||||
| R5 | 顶点编辑、边中点插点、双击边界按位置插点、顶点删除、整块删除、撤销/重做、区域合并、区域去除、hole even-odd 渲染 | `CanvasArea.test.tsx`, `useStore.test.ts` | 已覆盖 |
|
||||
| R6 | SAM 2.1 变体选择、点/框/interactive、semantic 禁用、SAM 3 入口隐藏和后端拒绝、SAM 2.1 最高分候选去重、AI 页不渲染工作区已有 mask、AI 页可在候选 mask 上继续添加正/反点、AI 页清空只移除本页候选、AI 页遮罩清晰度只改预览 opacity、AI 页生成 mask 自动选中并可换标签、AI 页推送到工作区编辑保留选择、SAM 2.1 视频传播、GPU/模型状态、参数 options、polygons 转 mask | `api.test.ts`, `CanvasArea.test.tsx`, `AISegmentation.test.tsx`, `VideoWorkspace.test.tsx`, `ModelStatusBadge.test.tsx`, `test_ai.py`, `test_sam2_engine.py` | 已覆盖 |
|
||||
| R5 | 顶点编辑、边中点插点、双击边界按位置插点、顶点删除、整块删除、工作区 SAM 提示点删除优先级、撤销/重做、区域合并、区域去除、hole even-odd 渲染 | `CanvasArea.test.tsx`, `useStore.test.ts` | 已覆盖 |
|
||||
| R6 | SAM 2.1 变体选择、点/框/interactive、semantic 禁用、SAM 3 入口隐藏和后端拒绝、SAM 2.1 最高分候选去重、AI 页框选/框选后加点、AI 页重复执行替换旧候选、AI 页不渲染工作区已有 mask、AI 页可在候选 mask 上继续添加正/反点、AI 页可删除提示点、AI 页可删除选中候选、AI 页清空只移除本页候选、AI 页遮罩清晰度只改预览 opacity、AI 页生成 mask 自动选中并可换标签、AI 页推送到工作区编辑保留选择、SAM 2.1 视频按范围/全部可达传播、GPU/模型状态、参数 options、polygons 转 mask | `api.test.ts`, `CanvasArea.test.tsx`, `AISegmentation.test.tsx`, `VideoWorkspace.test.tsx`, `ModelStatusBadge.test.tsx`, `test_ai.py`, `test_sam2_engine.py` | 已覆盖 |
|
||||
| R7 | 保存、保存后替换已提交 draft、查询、更新、删除标注、工作区回显、清空已保存标注、GT mask 导入和 seed point 回写 | `VideoWorkspace.test.tsx`, `CanvasArea.test.tsx`, `api.test.ts`, `test_ai.py` | 已覆盖 |
|
||||
| R8 | 模板加载、新建、编辑、删除、JSON 分类导入、mapping_rules 映射、后端 CRUD | `TemplateRegistry.test.tsx`, `api.test.ts`, `test_templates.py` | 已覆盖 |
|
||||
| R9 | 模板选择、分类展示、分类选择、已选 mask 换标签、自定义本地分类、占位状态 | `OntologyInspector.test.tsx`, `CanvasArea.test.tsx`, `useStore.test.ts` | 已覆盖 |
|
||||
|
||||
@@ -46,6 +46,9 @@ describe('AISegmentation', () => {
|
||||
apiMock.predictMask.mockResolvedValueOnce({ masks: [] });
|
||||
render(<AISegmentation onSendToWorkspace={vi.fn()} />);
|
||||
|
||||
expect(screen.getByText('局部专注模式（自动裁剪无锚区域）')).toBeInTheDocument();
|
||||
expect(screen.getByText('严格除杂模式（自动清理干涉点）')).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByText('正向选点'));
|
||||
fireEvent.click(screen.getByTestId('konva-stage'));
|
||||
fireEvent.click(await screen.findByText('执行高精度语义分割'));
|
||||
@@ -107,7 +110,148 @@ describe('AISegmentation', () => {
|
||||
fireEvent.click(await screen.findByText('执行高精度语义分割'));
|
||||
|
||||
expect(apiMock.predictMask).not.toHaveBeenCalled();
|
||||
expect(await screen.findByText('请先放置正/反向提示点。')).toBeInTheDocument();
|
||||
expect(await screen.findByText('请先放置正/反向提示点或框选区域。')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('uses a dragged box prompt for AI page inference without adding a point on click', async () => {
|
||||
apiMock.predictMask.mockResolvedValueOnce({ masks: [] });
|
||||
render(<AISegmentation onSendToWorkspace={vi.fn()} />);
|
||||
|
||||
fireEvent.click(screen.getByText('边界框选'));
|
||||
const stage = screen.getByTestId('konva-stage');
|
||||
fireEvent.mouseDown(stage, { clientX: 120, clientY: 80 });
|
||||
fireEvent.mouseMove(stage, { clientX: 260, clientY: 200 });
|
||||
fireEvent.mouseUp(stage, { clientX: 260, clientY: 200 });
|
||||
|
||||
expect(screen.getByTestId('konva-rect')).toHaveAttribute('data-width', '140');
|
||||
expect(await screen.findByText('已框选区域，可执行分割，或继续添加正/反向点细化。')).toBeInTheDocument();
|
||||
expect(screen.queryAllByTestId('konva-circle')).toHaveLength(0);
|
||||
expect(apiMock.predictMask).not.toHaveBeenCalled();
|
||||
|
||||
fireEvent.click(await screen.findByText('执行高精度语义分割'));
|
||||
|
||||
expect(apiMock.predictMask).toHaveBeenCalledWith(expect.objectContaining({
|
||||
imageId: 'frame-1',
|
||||
imageWidth: 640,
|
||||
imageHeight: 360,
|
||||
model: 'sam2.1_hiera_tiny',
|
||||
points: undefined,
|
||||
box: { x1: 120, y1: 80, x2: 260, y2: 200 },
|
||||
options: {
|
||||
crop_to_prompt: false,
|
||||
auto_filter_background: true,
|
||||
min_score: 0.05,
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
it('combines the AI page box prompt with later positive and negative refinement points', async () => {
|
||||
apiMock.predictMask.mockResolvedValueOnce({ masks: [] });
|
||||
render(<AISegmentation onSendToWorkspace={vi.fn()} />);
|
||||
|
||||
fireEvent.click(screen.getByText('边界框选'));
|
||||
const stage = screen.getByTestId('konva-stage');
|
||||
fireEvent.mouseDown(stage, { clientX: 100, clientY: 60 });
|
||||
fireEvent.mouseMove(stage, { clientX: 300, clientY: 180 });
|
||||
fireEvent.mouseUp(stage, { clientX: 300, clientY: 180 });
|
||||
|
||||
fireEvent.click(screen.getByText('正向选点'));
|
||||
fireEvent.click(stage, { clientX: 160, clientY: 100 });
|
||||
fireEvent.click(screen.getByText('反向选点'));
|
||||
fireEvent.click(stage, { clientX: 260, clientY: 150 });
|
||||
fireEvent.click(await screen.findByText('执行高精度语义分割'));
|
||||
|
||||
expect(apiMock.predictMask).toHaveBeenCalledWith(expect.objectContaining({
|
||||
points: [
|
||||
{ x: 160, y: 100, type: 'pos' },
|
||||
{ x: 260, y: 150, type: 'neg' },
|
||||
],
|
||||
box: { x1: 100, y1: 60, x2: 300, y2: 180 },
|
||||
}));
|
||||
});
|
||||
|
||||
it('replaces the previous AI page candidate when running the same box prompt again', async () => {
|
||||
useStore.setState({
|
||||
masks: [
|
||||
{
|
||||
id: 'workspace-mask',
|
||||
frameId: 'frame-1',
|
||||
pathData: 'M 0 0 L 10 0 L 10 10 Z',
|
||||
label: 'Manual Mask',
|
||||
color: '#ff0000',
|
||||
segmentation: [[0, 0, 10, 0, 10, 10]],
|
||||
metadata: { source: 'manual' },
|
||||
},
|
||||
],
|
||||
});
|
||||
apiMock.predictMask
|
||||
.mockResolvedValueOnce({
|
||||
masks: [
|
||||
{
|
||||
id: 'sam2-first',
|
||||
pathData: 'M 10 10 L 40 10 L 40 40 Z',
|
||||
label: 'AI Mask',
|
||||
color: '#06b6d4',
|
||||
segmentation: [[10, 10, 40, 10, 40, 40]],
|
||||
bbox: [10, 10, 30, 30],
|
||||
area: 900,
|
||||
},
|
||||
],
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
masks: [
|
||||
{
|
||||
id: 'sam2-second',
|
||||
pathData: 'M 20 20 L 50 20 L 50 50 Z',
|
||||
label: 'AI Mask',
|
||||
color: '#06b6d4',
|
||||
segmentation: [[20, 20, 50, 20, 50, 50]],
|
||||
bbox: [20, 20, 30, 30],
|
||||
area: 900,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
render(<AISegmentation onSendToWorkspace={vi.fn()} />);
|
||||
fireEvent.click(screen.getByText('边界框选'));
|
||||
const stage = screen.getByTestId('konva-stage');
|
||||
fireEvent.mouseDown(stage, { clientX: 120, clientY: 80 });
|
||||
fireEvent.mouseMove(stage, { clientX: 260, clientY: 200 });
|
||||
fireEvent.mouseUp(stage, { clientX: 260, clientY: 200 });
|
||||
|
||||
fireEvent.click(await screen.findByText('执行高精度语义分割'));
|
||||
await waitFor(() => expect(useStore.getState().masks.map((mask) => mask.id)).toEqual(['workspace-mask', 'sam2-first']));
|
||||
expect(useStore.getState().selectedMaskIds).toEqual(['sam2-first']);
|
||||
|
||||
fireEvent.click(screen.getByText('执行高精度语义分割'));
|
||||
|
||||
await waitFor(() => expect(useStore.getState().masks.map((mask) => mask.id)).toEqual(['workspace-mask', 'sam2-second']));
|
||||
expect(useStore.getState().selectedMaskIds).toEqual(['sam2-second']);
|
||||
expect(screen.getAllByTestId('konva-path')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('deletes prompt points individually and can remove the latest point', async () => {
|
||||
apiMock.predictMask.mockResolvedValueOnce({ masks: [] });
|
||||
render(<AISegmentation onSendToWorkspace={vi.fn()} />);
|
||||
|
||||
fireEvent.click(screen.getByText('正向选点'));
|
||||
fireEvent.click(screen.getByTestId('konva-stage'), { clientX: 120, clientY: 80 });
|
||||
fireEvent.click(screen.getByText('反向选点'));
|
||||
fireEvent.click(screen.getByTestId('konva-stage'), { clientX: 220, clientY: 140 });
|
||||
|
||||
await waitFor(() => expect(screen.getAllByTestId('konva-circle')).toHaveLength(4));
|
||||
fireEvent.click(screen.getAllByTestId('konva-circle')[0]);
|
||||
|
||||
await waitFor(() => expect(screen.getAllByTestId('konva-circle')).toHaveLength(2));
|
||||
fireEvent.click(await screen.findByText('执行高精度语义分割'));
|
||||
|
||||
expect(apiMock.predictMask).toHaveBeenCalledWith(expect.objectContaining({
|
||||
points: [{ x: 220, y: 140, type: 'neg' }],
|
||||
}));
|
||||
|
||||
fireEvent.click(screen.getByLabelText('删除最近锚点'));
|
||||
|
||||
await waitFor(() => expect(screen.queryAllByTestId('konva-circle')).toHaveLength(0));
|
||||
});
|
||||
|
||||
it('keeps only the best SAM2 candidate when the backend returns overlapping alternatives', async () => {
|
||||
@@ -141,7 +285,7 @@ describe('AISegmentation', () => {
|
||||
|
||||
await waitFor(() => expect(useStore.getState().masks).toHaveLength(1));
|
||||
expect(useStore.getState().masks[0].id).toBe('sam2-best');
|
||||
expect(useStore.getState().masks[0].metadata).toEqual({ source: 'ai_segmentation' });
|
||||
expect(useStore.getState().masks[0].metadata).toEqual(expect.objectContaining({ source: 'ai_segmentation' }));
|
||||
expect(useStore.getState().selectedMaskIds).toEqual(['sam2-best']);
|
||||
expect(await screen.findByText('SAM 2.1 Tiny 返回 2 个候选，已采用最高分区域。')).toBeInTheDocument();
|
||||
});
|
||||
@@ -253,6 +397,74 @@ describe('AISegmentation', () => {
|
||||
expect(useStore.getState().selectedMaskIds).toEqual([]);
|
||||
});
|
||||
|
||||
it('deletes only the selected AI candidate and preserves workspace masks', async () => {
|
||||
useStore.setState({
|
||||
masks: [
|
||||
{
|
||||
id: 'workspace-mask',
|
||||
frameId: 'frame-1',
|
||||
pathData: 'M 0 0 L 10 0 L 10 10 Z',
|
||||
label: 'Manual Mask',
|
||||
color: '#ff0000',
|
||||
segmentation: [[0, 0, 10, 0, 10, 10]],
|
||||
metadata: { source: 'manual' },
|
||||
},
|
||||
],
|
||||
});
|
||||
apiMock.predictMask.mockResolvedValueOnce({
|
||||
masks: [
|
||||
{
|
||||
id: 'sam2-mask',
|
||||
pathData: 'M 10 10 L 40 10 L 40 40 Z',
|
||||
label: 'AI Mask',
|
||||
color: '#06b6d4',
|
||||
segmentation: [[10, 10, 40, 10, 40, 40]],
|
||||
bbox: [10, 10, 30, 30],
|
||||
area: 900,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
render(<AISegmentation onSendToWorkspace={vi.fn()} />);
|
||||
fireEvent.click(screen.getByText('正向选点'));
|
||||
fireEvent.click(screen.getByTestId('konva-stage'));
|
||||
fireEvent.click(await screen.findByText('执行高精度语义分割'));
|
||||
await waitFor(() => expect(useStore.getState().selectedMaskIds).toEqual(['sam2-mask']));
|
||||
|
||||
fireEvent.click(screen.getByLabelText('删除选中候选'));
|
||||
|
||||
await waitFor(() => expect(useStore.getState().masks.map((mask) => mask.id)).toEqual(['workspace-mask']));
|
||||
expect(useStore.getState().selectedMaskIds).toEqual([]);
|
||||
});
|
||||
|
||||
it('lets Delete remove the selected AI candidate after a mask click selects it', async () => {
|
||||
apiMock.predictMask.mockResolvedValueOnce({
|
||||
masks: [
|
||||
{
|
||||
id: 'sam2-mask',
|
||||
pathData: 'M 10 10 L 40 10 L 40 40 Z',
|
||||
label: 'AI Mask',
|
||||
color: '#06b6d4',
|
||||
segmentation: [[10, 10, 40, 10, 40, 40]],
|
||||
bbox: [10, 10, 30, 30],
|
||||
area: 900,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
render(<AISegmentation onSendToWorkspace={vi.fn()} />);
|
||||
fireEvent.click(screen.getByText('正向选点'));
|
||||
fireEvent.click(screen.getByTestId('konva-stage'));
|
||||
fireEvent.click(await screen.findByText('执行高精度语义分割'));
|
||||
await waitFor(() => expect(screen.getByTestId('konva-path')).toBeInTheDocument());
|
||||
|
||||
fireEvent.click(screen.getByText('视口控制'));
|
||||
fireEvent.click(screen.getByTestId('konva-path'));
|
||||
fireEvent.keyDown(window, { key: 'Delete' });
|
||||
|
||||
await waitFor(() => expect(useStore.getState().masks).toEqual([]));
|
||||
});
|
||||
|
||||
it('lets a SAM2 result be selected and relabeled from the ontology panel', async () => {
|
||||
useStore.setState({
|
||||
templates: [
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
import React, { useState, useCallback, useEffect } from 'react';
|
||||
import { Target, PlusCircle, MinusCircle, SquareDashed, Sparkles, SendToBack, Image as ImageIcon, Undo, Redo, Loader2 } from 'lucide-react';
|
||||
import { Target, PlusCircle, MinusCircle, SquareDashed, Sparkles, SendToBack, Image as ImageIcon, Undo, Redo, Loader2, XCircle, Trash2 } from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
import { Stage, Layer, Image as KonvaImage, Circle, Path, Group } from 'react-konva';
|
||||
import { Stage, Layer, Image as KonvaImage, Circle, Path, Group, Rect } from 'react-konva';
|
||||
import useImage from 'use-image';
|
||||
import { OntologyInspector } from './OntologyInspector';
|
||||
import { SAM2_MODEL_OPTIONS, useStore } from '../store/useStore';
|
||||
import { SAM2_MODEL_OPTIONS, useStore, type Mask } from '../store/useStore';
|
||||
import { getAiModelStatus, predictMask, type AiRuntimeStatus } from '../lib/api';
|
||||
|
||||
interface AISegmentationProps {
|
||||
onSendToWorkspace: () => void;
|
||||
}
|
||||
|
||||
type PromptPoint = { x: number; y: number; type: 'pos' | 'neg' };
|
||||
type PromptBox = { x1: number; y1: number; x2: number; y2: number };
|
||||
|
||||
export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
const storeActiveTool = useStore((state) => state.activeTool);
|
||||
const setActiveTool = useStore((state) => state.setActiveTool);
|
||||
const masks = useStore((state) => state.masks);
|
||||
const addMask = useStore((state) => state.addMask);
|
||||
const setMasks = useStore((state) => state.setMasks);
|
||||
const selectedMaskIds = useStore((state) => state.selectedMaskIds);
|
||||
const setSelectedMaskIds = useStore((state) => state.setSelectedMaskIds);
|
||||
@@ -41,7 +43,10 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
// Canvas state
|
||||
const [scale, setScale] = useState(1);
|
||||
const [position, setPosition] = useState({ x: 0, y: 0 });
|
||||
const [points, setPoints] = useState<{ x: number, y: number, type: 'pos'|'neg' }[]>([]);
|
||||
const [points, setPoints] = useState<PromptPoint[]>([]);
|
||||
const [promptBox, setPromptBox] = useState<PromptBox | null>(null);
|
||||
const [boxStart, setBoxStart] = useState<{ x: number; y: number } | null>(null);
|
||||
const [boxCurrent, setBoxCurrent] = useState<{ x: number; y: number } | null>(null);
|
||||
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
|
||||
const currentFrame = frames[currentFrameIndex] || null;
|
||||
const previewUrl = currentFrame?.url || 'https://images.unsplash.com/photo-1549317661-bd32c8ce0be2?q=80&w=2070&auto=format&fit=crop';
|
||||
@@ -55,6 +60,24 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
|
||||
const effectiveTool = storeActiveTool;
|
||||
|
||||
const boxRect = React.useMemo(() => {
|
||||
const activeBox = boxStart && boxCurrent
|
||||
? {
|
||||
x1: Math.min(boxStart.x, boxCurrent.x),
|
||||
y1: Math.min(boxStart.y, boxCurrent.y),
|
||||
x2: Math.max(boxStart.x, boxCurrent.x),
|
||||
y2: Math.max(boxStart.y, boxCurrent.y),
|
||||
}
|
||||
: promptBox;
|
||||
if (!activeBox) return null;
|
||||
return {
|
||||
x: activeBox.x1,
|
||||
y: activeBox.y1,
|
||||
width: activeBox.x2 - activeBox.x1,
|
||||
height: activeBox.y2 - activeBox.y1,
|
||||
};
|
||||
}, [boxCurrent, boxStart, promptBox]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
getAiModelStatus(aiModel)
|
||||
@@ -105,11 +128,17 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
const imageY = (pos.y - position.y) / scale;
|
||||
setCursorPos({ x: imageX, y: imageY });
|
||||
}
|
||||
if (effectiveTool === 'box_select' && boxStart) {
|
||||
const relPos = stage.getRelativePointerPosition?.();
|
||||
if (relPos) {
|
||||
setBoxCurrent({ x: relPos.x, y: relPos.y });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const runInference = useCallback(async () => {
|
||||
if (points.length === 0) {
|
||||
setInferenceMessage('请先放置正/反向提示点。');
|
||||
if (points.length === 0 && !promptBox) {
|
||||
setInferenceMessage('请先放置正/反向提示点或框选区域。');
|
||||
return;
|
||||
}
|
||||
if (!currentFrame?.id) {
|
||||
@@ -134,7 +163,8 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
imageWidth,
|
||||
imageHeight,
|
||||
model: aiModel,
|
||||
points: points.map((p) => ({ x: p.x, y: p.y, type: p.type })),
|
||||
points: points.length > 0 ? points.map((p) => ({ x: p.x, y: p.y, type: p.type })) : undefined,
|
||||
box: promptBox || undefined,
|
||||
options: {
|
||||
crop_to_prompt: cropMode,
|
||||
auto_filter_background: autoDeleteBg,
|
||||
@@ -151,12 +181,10 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
? `${selectedModelStatus?.label || 'SAM 2.1'} 返回 ${result.masks.length} 个候选，已采用最高分区域。`
|
||||
: `已生成 ${masksToApply.length} 个候选区域。`);
|
||||
}
|
||||
const generatedMaskIds: string[] = [];
|
||||
masksToApply.forEach((m) => {
|
||||
const generatedMasks: Mask[] = masksToApply.map((m) => {
|
||||
const label = activeClass?.name || m.label;
|
||||
const color = activeClass?.color || m.color;
|
||||
generatedMaskIds.push(m.id);
|
||||
addMask({
|
||||
return {
|
||||
id: m.id,
|
||||
frameId: currentFrame.id,
|
||||
templateId: activeTemplateId || undefined,
|
||||
@@ -171,12 +199,26 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
segmentation: m.segmentation,
|
||||
bbox: m.bbox,
|
||||
area: m.area,
|
||||
metadata: { source: 'ai_segmentation' },
|
||||
});
|
||||
metadata: {
|
||||
source: 'ai_segmentation',
|
||||
promptBox: promptBox || null,
|
||||
promptPointCount: points.length,
|
||||
promptNegativePointCount: points.filter((point) => point.type === 'neg').length,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const previousAiMaskIds = new Set(aiMaskIds);
|
||||
const generatedMaskIds = generatedMasks.map((mask) => mask.id);
|
||||
setMasks([
|
||||
...masks.filter((mask) => !previousAiMaskIds.has(mask.id)),
|
||||
...generatedMasks,
|
||||
]);
|
||||
setAiMaskIds(generatedMaskIds);
|
||||
if (generatedMaskIds.length > 0) {
|
||||
setAiMaskIds((existingIds) => [...existingIds, ...generatedMaskIds]);
|
||||
setSelectedMaskIds(generatedMaskIds);
|
||||
} else {
|
||||
setSelectedMaskIds(selectedMaskIds.filter((id) => !previousAiMaskIds.has(id)));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('AI inference failed:', err);
|
||||
@@ -185,10 +227,13 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
} finally {
|
||||
setIsInferencing(false);
|
||||
}
|
||||
}, [activeClass, activeTemplateId, addMask, aiModel, autoDeleteBg, cropMode, currentFrame?.height, currentFrame?.id, currentFrame?.width, image?.height, image?.naturalHeight, image?.naturalWidth, image?.width, points, selectedModelStatus?.label, setSelectedMaskIds]);
|
||||
}, [activeClass, activeTemplateId, aiMaskIds, aiModel, autoDeleteBg, cropMode, currentFrame?.height, currentFrame?.id, currentFrame?.width, image?.height, image?.naturalHeight, image?.naturalWidth, image?.width, masks, points, promptBox, selectedMaskIds, selectedModelStatus?.label, setMasks, setSelectedMaskIds]);
|
||||
|
||||
const clearAiLayer = useCallback(() => {
|
||||
setPoints([]);
|
||||
setPromptBox(null);
|
||||
setBoxStart(null);
|
||||
setBoxCurrent(null);
|
||||
if (aiMaskIds.length === 0) return;
|
||||
const idsToRemove = new Set(aiMaskIds);
|
||||
setMasks(masks.filter((mask) => !idsToRemove.has(mask.id)));
|
||||
@@ -196,6 +241,27 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
setAiMaskIds([]);
|
||||
}, [aiMaskIds, masks, selectedMaskIds, setMasks, setSelectedMaskIds]);
|
||||
|
||||
const deleteAiMasksById = useCallback((maskIds: string[]) => {
|
||||
const aiIds = new Set(aiMaskIds);
|
||||
const idsToRemove = new Set(maskIds.filter((id) => aiIds.has(id)));
|
||||
if (idsToRemove.size === 0) return;
|
||||
setMasks(masks.filter((mask) => !idsToRemove.has(mask.id)));
|
||||
setAiMaskIds((currentIds) => currentIds.filter((id) => !idsToRemove.has(id)));
|
||||
setSelectedMaskIds(selectedMaskIds.filter((id) => !idsToRemove.has(id)));
|
||||
}, [aiMaskIds, masks, selectedMaskIds, setMasks, setSelectedMaskIds]);
|
||||
|
||||
const deleteSelectedAiMasks = useCallback(() => {
|
||||
deleteAiMasksById(selectedMaskIds);
|
||||
}, [deleteAiMasksById, selectedMaskIds]);
|
||||
|
||||
const removePromptPoint = useCallback((pointIndex: number) => {
|
||||
setPoints((currentPoints) => currentPoints.filter((_, index) => index !== pointIndex));
|
||||
}, []);
|
||||
|
||||
const removeLastPromptPoint = useCallback(() => {
|
||||
setPoints((currentPoints) => currentPoints.slice(0, -1));
|
||||
}, []);
|
||||
|
||||
const addPromptPointFromEvent = useCallback((event: any) => {
|
||||
if (effectiveTool !== 'point_pos' && effectiveTool !== 'point_neg') return false;
|
||||
const stage = event.target?.getStage?.();
|
||||
@@ -208,8 +274,50 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
return true;
|
||||
}, [effectiveTool]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
const target = event.target as HTMLElement | null;
|
||||
const tagName = target?.tagName?.toLowerCase();
|
||||
if (tagName === 'input' || tagName === 'textarea' || target?.isContentEditable) return;
|
||||
if (event.key !== 'Delete' && event.key !== 'Backspace') return;
|
||||
const selectedAiIds = selectedMaskIds.filter((id) => aiMaskIds.includes(id));
|
||||
if (selectedAiIds.length === 0) return;
|
||||
event.preventDefault();
|
||||
deleteAiMasksById(selectedAiIds);
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [aiMaskIds, deleteAiMasksById, selectedMaskIds]);
|
||||
|
||||
const handleStageMouseDown = useCallback((event: any) => {
|
||||
if (effectiveTool !== 'box_select') return;
|
||||
const stage = event.target?.getStage?.();
|
||||
const pos = stage?.getRelativePointerPosition?.();
|
||||
if (!pos) return;
|
||||
setBoxStart({ x: pos.x, y: pos.y });
|
||||
setBoxCurrent({ x: pos.x, y: pos.y });
|
||||
setInferenceMessage('');
|
||||
}, [effectiveTool]);
|
||||
|
||||
const handleStageMouseUp = useCallback(() => {
|
||||
if (effectiveTool !== 'box_select' || !boxStart || !boxCurrent) return;
|
||||
const x1 = Math.min(boxStart.x, boxCurrent.x);
|
||||
const y1 = Math.min(boxStart.y, boxCurrent.y);
|
||||
const x2 = Math.max(boxStart.x, boxCurrent.x);
|
||||
const y2 = Math.max(boxStart.y, boxCurrent.y);
|
||||
if (Math.abs(x2 - x1) > 5 && Math.abs(y2 - y1) > 5) {
|
||||
setPromptBox({ x1, y1, x2, y2 });
|
||||
setPoints([]);
|
||||
setInferenceMessage('已框选区域，可执行分割，或继续添加正/反向点细化。');
|
||||
}
|
||||
setBoxStart(null);
|
||||
setBoxCurrent(null);
|
||||
}, [boxCurrent, boxStart, effectiveTool]);
|
||||
|
||||
const handleStageClick = (e: any) => {
|
||||
if (effectiveTool === 'move') return;
|
||||
if (effectiveTool === 'box_select') return;
|
||||
addPromptPointFromEvent(e);
|
||||
};
|
||||
|
||||
@@ -308,14 +416,14 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
<h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3 flex items-center gap-2">核心参数设定</h3>
|
||||
<div className="space-y-4 bg-[#111] rounded-lg p-5 border border-white/5">
|
||||
<div className="flex items-center justify-between cursor-pointer group" onClick={() => setCropMode(!cropMode)}>
|
||||
<span className="text-[11px] text-gray-400 uppercase tracking-wider font-medium group-hover:text-gray-200 transition-colors">自动裁剪无锚区域</span>
|
||||
<span className="text-[11px] text-gray-400 uppercase tracking-wider font-medium group-hover:text-gray-200 transition-colors">局部专注模式（自动裁剪无锚区域）</span>
|
||||
<button className={cn("w-8 h-4 rounded-full transition-colors relative", cropMode ? "bg-cyan-500" : "bg-white/20")}>
|
||||
<div className={cn("absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full transition-transform shadow-sm", cropMode ? "translate-x-4" : "")} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between cursor-pointer group" onClick={() => setAutoDeleteBg(!autoDeleteBg)}>
|
||||
<span className="text-[11px] text-gray-400 uppercase tracking-wider font-medium group-hover:text-gray-200 transition-colors">自动清理干涉点</span>
|
||||
<span className="text-[11px] text-gray-400 uppercase tracking-wider font-medium group-hover:text-gray-200 transition-colors">严格除杂模式（自动清理干涉点）</span>
|
||||
<button className={cn("w-8 h-4 rounded-full transition-colors relative", autoDeleteBg ? "bg-cyan-500" : "bg-white/20")}>
|
||||
<div className={cn("absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full transition-transform shadow-sm", autoDeleteBg ? "translate-x-4" : "")} />
|
||||
</button>
|
||||
@@ -400,6 +508,24 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
<button className="flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-md border border-white/5">
|
||||
<ImageIcon size={14} /> 上传替换底图
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-md border border-white/5 disabled:opacity-30 disabled:hover:bg-white/5 disabled:hover:text-gray-400 disabled:cursor-not-allowed"
|
||||
onClick={removeLastPromptPoint}
|
||||
disabled={points.length === 0}
|
||||
title="删除最近锚点"
|
||||
aria-label="删除最近锚点"
|
||||
>
|
||||
<XCircle size={14} /> 删除最近锚点
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-md border border-white/5 disabled:opacity-30 disabled:hover:bg-white/5 disabled:hover:text-gray-400 disabled:cursor-not-allowed"
|
||||
onClick={deleteSelectedAiMasks}
|
||||
disabled={!selectedMaskIds.some((id) => aiMaskIds.includes(id))}
|
||||
title="删除选中候选"
|
||||
aria-label="删除选中候选"
|
||||
>
|
||||
<Trash2 size={14} /> 删除选中候选
|
||||
</button>
|
||||
<button className="text-xs text-gray-400 hover:text-white transition-colors px-3 py-1.5" onClick={clearAiLayer}>
|
||||
清空全体锚点
|
||||
</button>
|
||||
@@ -413,6 +539,8 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
height={window.innerHeight - 64 - 64}
|
||||
onWheel={handleWheel}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseDown={handleStageMouseDown}
|
||||
onMouseUp={handleStageMouseUp}
|
||||
onClick={handleStageClick}
|
||||
scaleX={scale}
|
||||
scaleY={scale}
|
||||
@@ -431,6 +559,19 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
/>
|
||||
)}
|
||||
|
||||
{boxRect && (
|
||||
<Rect
|
||||
x={boxRect.x}
|
||||
y={boxRect.y}
|
||||
width={boxRect.width}
|
||||
height={boxRect.height}
|
||||
fill="rgba(59, 130, 246, 0.12)"
|
||||
stroke="#60a5fa"
|
||||
strokeWidth={2 / scale}
|
||||
dash={[5 / scale, 5 / scale]}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* AI Returned Masks */}
|
||||
{frameMasks.map((mask) => {
|
||||
const isSelected = selectedMaskIds.includes(mask.id);
|
||||
@@ -475,10 +616,26 @@ export function AISegmentation({ onSendToWorkspace }: AISegmentationProps) {
|
||||
strokeWidth={2 / scale}
|
||||
shadowColor="black"
|
||||
shadowBlur={4}
|
||||
onClick={(event: any) => {
|
||||
event.cancelBubble = true;
|
||||
removePromptPoint(i);
|
||||
}}
|
||||
onTap={(event: any) => {
|
||||
event.cancelBubble = true;
|
||||
removePromptPoint(i);
|
||||
}}
|
||||
/>
|
||||
<Circle
|
||||
radius={1.5 / scale}
|
||||
fill="#ffffff"
|
||||
onClick={(event: any) => {
|
||||
event.cancelBubble = true;
|
||||
removePromptPoint(i);
|
||||
}}
|
||||
onTap={(event: any) => {
|
||||
event.cancelBubble = true;
|
||||
removePromptPoint(i);
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
))}
|
||||
|
||||
@@ -209,6 +209,75 @@ describe('CanvasArea', () => {
|
||||
expect(await screen.findByText(/反向点已排除当前候选区域/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('deletes a workspace SAM2 prompt point before the stage can add another point', async () => {
|
||||
apiMock.predictMask
|
||||
.mockResolvedValueOnce({
|
||||
masks: [
|
||||
{
|
||||
id: 'mask-prompt',
|
||||
pathData: 'M 10 10 L 90 10 L 90 90 Z',
|
||||
label: 'AI Mask',
|
||||
color: '#06b6d4',
|
||||
segmentation: [[10, 10, 90, 10, 90, 90]],
|
||||
bbox: [10, 10, 80, 80],
|
||||
area: 6400,
|
||||
},
|
||||
],
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
masks: [
|
||||
{
|
||||
id: 'mask-refined',
|
||||
pathData: 'M 20 20 L 80 20 L 80 80 Z',
|
||||
label: 'AI Mask',
|
||||
color: '#06b6d4',
|
||||
segmentation: [[20, 20, 80, 20, 80, 80]],
|
||||
bbox: [20, 20, 60, 60],
|
||||
area: 3600,
|
||||
},
|
||||
],
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
masks: [
|
||||
{
|
||||
id: 'mask-after-delete',
|
||||
pathData: 'M 30 30 L 70 30 L 70 70 Z',
|
||||
label: 'AI Mask',
|
||||
color: '#06b6d4',
|
||||
segmentation: [[30, 30, 70, 30, 70, 70]],
|
||||
bbox: [30, 30, 40, 40],
|
||||
area: 1600,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const { rerender } = render(<CanvasArea activeTool="point_pos" frame={frame} />);
|
||||
const stage = screen.getByTestId('konva-stage');
|
||||
fireEvent.click(stage, { clientX: 120, clientY: 80 });
|
||||
await waitFor(() => expect(apiMock.predictMask).toHaveBeenCalledTimes(1));
|
||||
|
||||
rerender(<CanvasArea activeTool="point_neg" frame={frame} />);
|
||||
fireEvent.click(stage, { clientX: 220, clientY: 140 });
|
||||
await waitFor(() => expect(apiMock.predictMask).toHaveBeenCalledTimes(2));
|
||||
const promptOuterCircles = () => screen.getAllByTestId('konva-circle')
|
||||
.filter((element) => ['#22c55e', '#ef4444'].includes(element.getAttribute('data-fill') || ''));
|
||||
expect(promptOuterCircles()).toHaveLength(2);
|
||||
|
||||
fireEvent.click(promptOuterCircles()[0]);
|
||||
|
||||
await waitFor(() => expect(apiMock.predictMask).toHaveBeenCalledTimes(3));
|
||||
expect(apiMock.predictMask).toHaveBeenLastCalledWith({
|
||||
imageId: 'frame-1',
|
||||
imageWidth: 640,
|
||||
imageHeight: 360,
|
||||
model: 'sam2.1_hiera_tiny',
|
||||
points: [{ x: 220, y: 140, type: 'neg' }],
|
||||
box: undefined,
|
||||
options: { auto_filter_background: true, min_score: 0.05 },
|
||||
});
|
||||
expect(promptOuterCircles()).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders only masks that belong to the current frame', () => {
|
||||
useStore.setState({
|
||||
masks: [
|
||||
|
||||
@@ -706,6 +706,25 @@ export function CanvasArea({ activeTool, frame, onClearMasks, onDeleteMaskAnnota
|
||||
}
|
||||
};
|
||||
|
||||
const removePromptPoint = useCallback((pointIndex: number, event?: any) => {
|
||||
if (event) event.cancelBubble = true;
|
||||
const nextPoints = points.filter((_, index) => index !== pointIndex);
|
||||
setPoints(nextPoints);
|
||||
|
||||
if (nextPoints.length > 0 || samPromptBox) {
|
||||
runInference(nextPoints, samPromptBox || undefined);
|
||||
return;
|
||||
}
|
||||
|
||||
if (samCandidateMaskId) {
|
||||
setMasks(masks.filter((mask) => mask.id !== samCandidateMaskId));
|
||||
setSamCandidateMaskId(null);
|
||||
setSelectedMaskId(null);
|
||||
setSelectedMaskIds([]);
|
||||
setInferenceMessage('已移除最后一个提示点和对应候选区域。');
|
||||
}
|
||||
}, [masks, points, runInference, samCandidateMaskId, samPromptBox, setMasks]);
|
||||
|
||||
const updatePolygonMask = useCallback((mask: Mask, nextPoints: CanvasPoint[], polygonIndex = 0) => {
|
||||
if (nextPoints.length < 3) return;
|
||||
const nextSegmentation = [...(mask.segmentation || [])];
|
||||
@@ -1128,10 +1147,14 @@ export function CanvasArea({ activeTool, frame, onClearMasks, onDeleteMaskAnnota
|
||||
strokeWidth={2 / scale}
|
||||
shadowColor="black"
|
||||
shadowBlur={4}
|
||||
onClick={(event: any) => removePromptPoint(i, event)}
|
||||
onTap={(event: any) => removePromptPoint(i, event)}
|
||||
/>
|
||||
<Circle
|
||||
radius={1.5 / scale}
|
||||
fill="#ffffff"
|
||||
onClick={(event: any) => removePromptPoint(i, event)}
|
||||
onTap={(event: any) => removePromptPoint(i, event)}
|
||||
/>
|
||||
</Group>
|
||||
))}
|
||||
|
||||
@@ -51,8 +51,9 @@ describe('FrameTimeline', () => {
|
||||
expect(screen.getAllByText('00:00.20').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('marks edited frames between the time progress bar and frame navigator', () => {
|
||||
it('overlays edited frame markers as amber vertical lines on the time progress bar', () => {
|
||||
useStore.setState({
|
||||
currentFrameIndex: 1,
|
||||
frames: [
|
||||
{ id: 'f1', projectId: 'p1', index: 0, url: '/1.jpg', width: 640, height: 360 },
|
||||
{ id: 'f2', projectId: 'p1', index: 1, url: '/2.jpg', width: 640, height: 360 },
|
||||
@@ -67,8 +68,11 @@ describe('FrameTimeline', () => {
|
||||
|
||||
render(<FrameTimeline />);
|
||||
|
||||
expect(screen.getByText('已编辑')).toBeInTheDocument();
|
||||
expect(screen.getByText('2 帧')).toBeInTheDocument();
|
||||
expect(screen.getByText('已编辑 2 帧')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('current-frame-line')).not.toBeInTheDocument();
|
||||
expect(screen.getByLabelText('跳转到已编辑帧 2').className).toContain('before:bg-amber-300');
|
||||
expect(screen.getByLabelText('跳转到已编辑帧 3').className).toContain('before:h-5');
|
||||
expect(screen.getByLabelText('跳转到已编辑帧 3').className).not.toContain('h-2 w-2');
|
||||
fireEvent.click(screen.getByLabelText('跳转到已编辑帧 3'));
|
||||
expect(useStore.getState().currentFrameIndex).toBe(2);
|
||||
});
|
||||
|
||||
@@ -95,8 +95,8 @@ export function FrameTimeline() {
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="h-36 bg-[#111] border-t border-white/5 flex flex-col shrink-0 z-20">
|
||||
<div className="h-4 bg-[#0d0d0d] flex items-center group relative">
|
||||
<div className="h-32 bg-[#111] border-t border-white/5 flex flex-col shrink-0 z-20">
|
||||
<div className="h-7 bg-[#0d0d0d] flex items-center group relative">
|
||||
<div className="absolute left-3 -top-5 text-[10px] font-mono text-gray-500 pointer-events-none">
|
||||
{formatTime(currentSeconds)}
|
||||
</div>
|
||||
@@ -117,25 +117,7 @@ export function FrameTimeline() {
|
||||
className="h-full bg-cyan-500 absolute left-0"
|
||||
style={{ width: `${totalFrames > 0 ? (currentFrame / totalFrames) * 100 : 0}%` }}
|
||||
/>
|
||||
<div
|
||||
className="w-3 h-3 bg-white rounded-full absolute top-1/2 -translate-y-1/2 -ml-1.5 shadow-sm transform scale-0 group-hover:scale-100 transition-transform shadow-cyan-500/50"
|
||||
style={{ left: `${totalFrames > 0 ? (currentFrame / totalFrames) * 100 : 0}%` }}
|
||||
/>
|
||||
<div
|
||||
className="absolute -top-7 -translate-x-1/2 rounded bg-black/80 border border-white/10 px-2 py-0.5 text-[10px] font-mono text-cyan-300 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
|
||||
style={{ left: `${totalFrames > 0 ? (currentFrame / totalFrames) * 100 : 0}%` }}
|
||||
>
|
||||
{formatTime(currentSeconds)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-5 bg-[#0f0f0f] border-y border-white/[0.03] px-4 flex items-center gap-3">
|
||||
<div className="w-20 text-[9px] font-mono uppercase tracking-widest text-gray-500 shrink-0">已编辑</div>
|
||||
<div className="relative h-3 flex-1">
|
||||
<div className="absolute left-0 right-0 top-1/2 h-px -translate-y-1/2 bg-white/5" />
|
||||
{editedFrameMarkers.map(({ frame, index }) => {
|
||||
const isCurrent = index === currentFrameIndex;
|
||||
const left = totalFrames > 0 ? ((index + 1) / totalFrames) * 100 : 0;
|
||||
return (
|
||||
<button
|
||||
@@ -145,17 +127,24 @@ export function FrameTimeline() {
|
||||
title={`已编辑帧 ${index + 1}`}
|
||||
onClick={() => setCurrentFrame(index)}
|
||||
className={cn(
|
||||
"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border transition-all",
|
||||
isCurrent
|
||||
? "h-3 w-3 bg-cyan-300 border-cyan-100 shadow-[0_0_12px_rgba(34,211,238,0.65)]"
|
||||
: "h-2 w-2 bg-amber-300 border-amber-100/80 hover:h-3 hover:w-3 hover:bg-cyan-300 hover:border-cyan-100"
|
||||
"absolute left-0 top-1/2 z-30 w-3 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-sm transition-all",
|
||||
"before:absolute before:left-1/2 before:top-1/2 before:w-px before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:content-['']",
|
||||
"before:h-5 before:bg-amber-300 before:shadow-[0_0_8px_rgba(251,191,36,0.5)] hover:before:h-7 hover:before:bg-amber-100"
|
||||
)}
|
||||
style={{ left: `${left}%` }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<div
|
||||
className="absolute -top-7 -translate-x-1/2 rounded bg-black/80 border border-white/10 px-2 py-0.5 text-[10px] font-mono text-cyan-300 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
|
||||
style={{ left: `${totalFrames > 0 ? (currentFrame / totalFrames) * 100 : 0}%` }}
|
||||
>
|
||||
{formatTime(currentSeconds)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-0 right-3 text-[9px] font-mono text-gray-500 pointer-events-none">
|
||||
已编辑 {editedFrameMarkers.length} 帧
|
||||
</div>
|
||||
<div className="w-20 text-right text-[9px] font-mono text-gray-500 shrink-0">{editedFrameMarkers.length} 帧</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex items-center px-4 gap-6">
|
||||
|
||||
@@ -10,6 +10,7 @@ const apiMock = vi.hoisted(() => ({
|
||||
uploadMedia: vi.fn(),
|
||||
parseMedia: vi.fn(),
|
||||
uploadDicomBatch: vi.fn(),
|
||||
deleteProject: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../lib/api', () => ({
|
||||
@@ -18,6 +19,7 @@ vi.mock('../lib/api', () => ({
|
||||
uploadMedia: apiMock.uploadMedia,
|
||||
parseMedia: apiMock.parseMedia,
|
||||
uploadDicomBatch: apiMock.uploadDicomBatch,
|
||||
deleteProject: apiMock.deleteProject,
|
||||
}));
|
||||
|
||||
describe('ProjectLibrary', () => {
|
||||
@@ -89,6 +91,32 @@ describe('ProjectLibrary', () => {
|
||||
await waitFor(() => expect(apiMock.parseMedia).toHaveBeenCalledWith('p4', { parseFps: 12 }));
|
||||
});
|
||||
|
||||
it('deletes a project from the project card without entering the workspace', async () => {
|
||||
const onProjectSelect = vi.fn();
|
||||
apiMock.getProjects.mockResolvedValueOnce([
|
||||
{ id: 'p5', name: 'Delete Me', status: 'ready', frames: 3, fps: '30FPS' },
|
||||
{ id: 'p6', name: 'Keep Me', status: 'ready', frames: 1, fps: '30FPS' },
|
||||
]);
|
||||
apiMock.deleteProject.mockResolvedValueOnce(undefined);
|
||||
useStore.setState({
|
||||
currentProject: { id: 'p5', name: 'Delete Me', status: 'ready' },
|
||||
frames: [{ id: 'f1', projectId: 'p5', index: 0, url: '/1.jpg', width: 640, height: 360 }],
|
||||
masks: [{ id: 'm1', frameId: 'f1', pathData: 'M 0 0 Z', label: 'Mask', color: '#06b6d4' }],
|
||||
selectedMaskIds: ['m1'],
|
||||
});
|
||||
|
||||
render(<ProjectLibrary onProjectSelect={onProjectSelect} />);
|
||||
fireEvent.click(await screen.findByRole('button', { name: '删除项目 Delete Me' }));
|
||||
|
||||
await waitFor(() => expect(apiMock.deleteProject).toHaveBeenCalledWith('p5'));
|
||||
expect(onProjectSelect).not.toHaveBeenCalled();
|
||||
expect(useStore.getState().projects.map((project) => project.id)).toEqual(['p6']);
|
||||
expect(useStore.getState().currentProject).toBeNull();
|
||||
expect(useStore.getState().frames).toEqual([]);
|
||||
expect(useStore.getState().masks).toEqual([]);
|
||||
expect(useStore.getState().selectedMaskIds).toEqual([]);
|
||||
});
|
||||
|
||||
it('imports only valid DICOM files and parses the returned project', async () => {
|
||||
apiMock.uploadDicomBatch.mockResolvedValueOnce({ project_id: 77, uploaded_count: 1, message: 'ok' });
|
||||
apiMock.parseMedia.mockResolvedValueOnce({ frames_extracted: 1 });
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { UploadCloud, Film, Settings2, MoreHorizontal, Plus, Loader2, Activity, Images } from 'lucide-react';
|
||||
import { UploadCloud, Film, Settings2, Plus, Loader2, Activity, Images, Trash2 } from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
import { useStore } from '../store/useStore';
|
||||
import { getProjects, createProject, uploadMedia, parseMedia, uploadDicomBatch } from '../lib/api';
|
||||
import { getProjects, createProject, uploadMedia, parseMedia, uploadDicomBatch, deleteProject } from '../lib/api';
|
||||
import type { Project } from '../store/useStore';
|
||||
|
||||
interface ProjectLibraryProps {
|
||||
@@ -12,8 +12,12 @@ interface ProjectLibraryProps {
|
||||
export function ProjectLibrary({ onProjectSelect }: ProjectLibraryProps) {
|
||||
const projects = useStore((state) => state.projects);
|
||||
const setProjects = useStore((state) => state.setProjects);
|
||||
const currentProject = useStore((state) => state.currentProject);
|
||||
const setCurrentProject = useStore((state) => state.setCurrentProject);
|
||||
const addProject = useStore((state) => state.addProject);
|
||||
const setFrames = useStore((state) => state.setFrames);
|
||||
const setMasks = useStore((state) => state.setMasks);
|
||||
const setSelectedMaskIds = useStore((state) => state.setSelectedMaskIds);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
@@ -26,6 +30,7 @@ export function ProjectLibrary({ onProjectSelect }: ProjectLibraryProps) {
|
||||
const [showFrameConfig, setShowFrameConfig] = useState(false);
|
||||
const [frameParseFps, setFrameParseFps] = useState(30);
|
||||
const [isGeneratingFrames, setIsGeneratingFrames] = useState(false);
|
||||
const [deletingProjectId, setDeletingProjectId] = useState<string | null>(null);
|
||||
const videoInputRef = useRef<HTMLInputElement>(null);
|
||||
const dicomInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
@@ -58,6 +63,30 @@ export function ProjectLibrary({ onProjectSelect }: ProjectLibraryProps) {
|
||||
onProjectSelect();
|
||||
};
|
||||
|
||||
const handleDeleteProject = async (project: Project, event: React.MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
if (deletingProjectId) return;
|
||||
const confirmed = window.confirm(`确认删除项目“${project.name}”？\n该操作会删除项目帧、标注、任务记录和相关 mask 元数据，无法撤销。`);
|
||||
if (!confirmed) return;
|
||||
|
||||
setDeletingProjectId(project.id);
|
||||
try {
|
||||
await deleteProject(project.id);
|
||||
setProjects(projects.filter((item) => item.id !== project.id));
|
||||
if (currentProject?.id === project.id) {
|
||||
setCurrentProject(null);
|
||||
setFrames([]);
|
||||
setMasks([]);
|
||||
setSelectedMaskIds([]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Delete project failed:', err);
|
||||
alert('删除项目失败，请检查后端服务');
|
||||
} finally {
|
||||
setDeletingProjectId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleVideoSelect = (file: File) => {
|
||||
setPendingFile(file);
|
||||
setShowVideoConfig(true);
|
||||
@@ -252,7 +281,16 @@ export function ProjectLibrary({ onProjectSelect }: ProjectLibraryProps) {
|
||||
<div className="p-4 flex flex-col gap-1">
|
||||
<div className="flex justify-between items-start">
|
||||
<h3 className="text-sm font-medium text-gray-200 truncate pr-4" title={proj.name}>{proj.name}</h3>
|
||||
<button className="text-gray-500 hover:text-gray-300"><MoreHorizontal size={16} /></button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`删除项目 ${proj.name}`}
|
||||
title="删除项目"
|
||||
disabled={deletingProjectId === proj.id}
|
||||
onClick={(event) => handleDeleteProject(proj, event)}
|
||||
className="text-gray-500 hover:text-red-400 disabled:opacity-50 disabled:cursor-wait transition-colors"
|
||||
>
|
||||
{deletingProjectId === proj.id ? <Loader2 size={16} className="animate-spin" /> : <Trash2 size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 font-mono mt-2">
|
||||
<span className="flex items-center gap-1.5"><Settings2 size={12} /> {proj.frames ?? 0} 帧节点</span>
|
||||
|
||||
@@ -380,7 +380,7 @@ describe('VideoWorkspace', () => {
|
||||
]));
|
||||
});
|
||||
|
||||
it('propagates the selected current-frame mask through the backend video tracker', async () => {
|
||||
it('propagates the selected current-frame mask through the configured frame range', async () => {
|
||||
apiMock.getProjectFrames.mockResolvedValueOnce([
|
||||
{ id: 10, project_id: 1, frame_index: 0, image_url: '/frame.jpg', width: 640, height: 360 },
|
||||
{ id: 11, project_id: 1, frame_index: 1, image_url: '/frame-1.jpg', width: 640, height: 360 },
|
||||
@@ -417,14 +417,14 @@ describe('VideoWorkspace', () => {
|
||||
});
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '传播片段' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '按范围传播' }));
|
||||
|
||||
await waitFor(() => expect(apiMock.propagateMasks).toHaveBeenCalledWith({
|
||||
project_id: 1,
|
||||
frame_id: 10,
|
||||
model: 'sam2.1_hiera_tiny',
|
||||
direction: 'forward',
|
||||
max_frames: 30,
|
||||
max_frames: 2,
|
||||
include_source: false,
|
||||
save_annotations: true,
|
||||
seed: {
|
||||
@@ -437,6 +437,95 @@ describe('VideoWorkspace', () => {
|
||||
template_id: 2,
|
||||
},
|
||||
}));
|
||||
await waitFor(() => expect(screen.getByText('已传播并保存 2 个区域')).toBeInTheDocument());
|
||||
await waitFor(() => expect(screen.getByText('已传播 1 个 seed，处理 3 帧次，保存 2 个区域')).toBeInTheDocument());
|
||||
});
|
||||
|
||||
it('propagates all current-frame masks to all reachable frames in both directions', async () => {
|
||||
apiMock.getProjectFrames.mockResolvedValueOnce([
|
||||
{ id: 10, project_id: 1, frame_index: 0, image_url: '/frame-0.jpg', width: 640, height: 360 },
|
||||
{ id: 11, project_id: 1, frame_index: 1, image_url: '/frame-1.jpg', width: 640, height: 360 },
|
||||
{ id: 12, project_id: 1, frame_index: 2, image_url: '/frame-2.jpg', width: 640, height: 360 },
|
||||
]);
|
||||
apiMock.propagateMasks.mockResolvedValue({
|
||||
model: 'sam2.1_hiera_tiny',
|
||||
direction: 'forward',
|
||||
source_frame_id: 11,
|
||||
processed_frame_count: 2,
|
||||
created_annotation_count: 1,
|
||||
annotations: [],
|
||||
});
|
||||
apiMock.buildAnnotationPayload
|
||||
.mockReturnValueOnce({
|
||||
project_id: 1,
|
||||
frame_id: 11,
|
||||
mask_data: {
|
||||
polygons: [[[0.1, 0.1], [0.2, 0.1], [0.2, 0.2]]],
|
||||
label: '胆囊',
|
||||
color: '#ff0000',
|
||||
},
|
||||
bbox: [0.1, 0.1, 0.1, 0.1],
|
||||
})
|
||||
.mockReturnValueOnce({
|
||||
project_id: 1,
|
||||
frame_id: 11,
|
||||
mask_data: {
|
||||
polygons: [[[0.4, 0.4], [0.5, 0.4], [0.5, 0.5]]],
|
||||
label: '肝脏',
|
||||
color: '#00ff00',
|
||||
},
|
||||
bbox: [0.4, 0.4, 0.1, 0.1],
|
||||
});
|
||||
|
||||
render(<VideoWorkspace />);
|
||||
await waitFor(() => expect(useStore.getState().frames).toHaveLength(3));
|
||||
act(() => {
|
||||
useStore.setState({
|
||||
currentFrameIndex: 1,
|
||||
masks: [
|
||||
{
|
||||
id: 'mask-a',
|
||||
frameId: '11',
|
||||
pathData: 'M 0 0 Z',
|
||||
label: '胆囊',
|
||||
color: '#ff0000',
|
||||
segmentation: [[64, 36, 128, 36, 128, 72]],
|
||||
},
|
||||
{
|
||||
id: 'mask-b',
|
||||
frameId: '11',
|
||||
pathData: 'M 1 1 Z',
|
||||
label: '肝脏',
|
||||
color: '#00ff00',
|
||||
segmentation: [[256, 144, 320, 144, 320, 180]],
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
fireEvent.change(screen.getByLabelText('传播对象'), { target: { value: 'all' } });
|
||||
fireEvent.click(screen.getByRole('button', { name: '传播全部可达' }));
|
||||
|
||||
await waitFor(() => expect(apiMock.propagateMasks).toHaveBeenCalledTimes(4));
|
||||
expect(apiMock.propagateMasks).toHaveBeenNthCalledWith(1, expect.objectContaining({
|
||||
direction: 'backward',
|
||||
max_frames: 2,
|
||||
seed: expect.objectContaining({ label: '胆囊' }),
|
||||
}));
|
||||
expect(apiMock.propagateMasks).toHaveBeenNthCalledWith(2, expect.objectContaining({
|
||||
direction: 'forward',
|
||||
max_frames: 2,
|
||||
seed: expect.objectContaining({ label: '胆囊' }),
|
||||
}));
|
||||
expect(apiMock.propagateMasks).toHaveBeenNthCalledWith(3, expect.objectContaining({
|
||||
direction: 'backward',
|
||||
max_frames: 2,
|
||||
seed: expect.objectContaining({ label: '肝脏' }),
|
||||
}));
|
||||
expect(apiMock.propagateMasks).toHaveBeenNthCalledWith(4, expect.objectContaining({
|
||||
direction: 'forward',
|
||||
max_frames: 2,
|
||||
seed: expect.objectContaining({ label: '肝脏' }),
|
||||
}));
|
||||
await waitFor(() => expect(screen.getByText('已传播 2 个 seed，处理 8 帧次，保存 4 个区域')).toBeInTheDocument());
|
||||
});
|
||||
});
|
||||
|
||||
@@ -19,7 +19,10 @@ import { ToolsPalette } from './ToolsPalette';
|
||||
import { OntologyInspector } from './OntologyInspector';
|
||||
import { FrameTimeline } from './FrameTimeline';
|
||||
import { ModelStatusBadge } from './ModelStatusBadge';
|
||||
import type { Frame } from '../store/useStore';
|
||||
import type { Frame, Mask } from '../store/useStore';
|
||||
|
||||
type PropagationTarget = 'selected' | 'all';
|
||||
type PropagationDirection = 'forward' | 'backward';
|
||||
|
||||
export function VideoWorkspace({ onNavigateToAI }: { onNavigateToAI?: () => void }) {
|
||||
const gtMaskInputRef = React.useRef<HTMLInputElement>(null);
|
||||
@@ -49,6 +52,9 @@ export function VideoWorkspace({ onNavigateToAI }: { onNavigateToAI?: () => void
|
||||
const [isImportingGt, setIsImportingGt] = useState(false);
|
||||
const [isPropagating, setIsPropagating] = useState(false);
|
||||
const [statusMessage, setStatusMessage] = useState('');
|
||||
const [propagationTarget, setPropagationTarget] = useState<PropagationTarget>('selected');
|
||||
const [propagationStartFrame, setPropagationStartFrame] = useState(1);
|
||||
const [propagationEndFrame, setPropagationEndFrame] = useState(1);
|
||||
|
||||
const hydrateSavedAnnotations = useCallback(async (
|
||||
projectId: string,
|
||||
@@ -135,8 +141,20 @@ export function VideoWorkspace({ onNavigateToAI }: { onNavigateToAI?: () => void
|
||||
}, [templates.length, setTemplates]);
|
||||
|
||||
const currentFrame = frames[currentFrameIndex] || null;
|
||||
const totalFrames = frames.length;
|
||||
const frameById = useMemo(() => new Map(frames.map((frame) => [frame.id, frame])), [frames]);
|
||||
const projectFrameIds = useMemo(() => new Set(frames.map((frame) => frame.id)), [frames]);
|
||||
const currentFrameNumber = currentFrameIndex + 1;
|
||||
|
||||
useEffect(() => {
|
||||
if (totalFrames === 0) {
|
||||
setPropagationStartFrame(1);
|
||||
setPropagationEndFrame(1);
|
||||
return;
|
||||
}
|
||||
setPropagationStartFrame(currentFrameNumber);
|
||||
setPropagationEndFrame(Math.min(totalFrames, currentFrameNumber + 29));
|
||||
}, [currentFrameNumber, totalFrames]);
|
||||
|
||||
const savePendingAnnotations = useCallback(async ({ silent = false } = {}) => {
|
||||
if (!currentProject?.id) return 0;
|
||||
@@ -314,47 +332,93 @@ export function VideoWorkspace({ onNavigateToAI }: { onNavigateToAI?: () => void
|
||||
}
|
||||
};
|
||||
|
||||
const handlePropagateSegment = async () => {
|
||||
const clampFrameNumber = useCallback((value: number) => {
|
||||
if (totalFrames <= 0) return 1;
|
||||
return Math.min(Math.max(value, 1), totalFrames);
|
||||
}, [totalFrames]);
|
||||
|
||||
const buildSeedPayload = useCallback((seedMask: Mask) => {
|
||||
if (!currentProject?.id || !currentFrame) return null;
|
||||
const seedPayload = buildAnnotationPayload(currentProject.id, seedMask, currentFrame, activeTemplateId);
|
||||
if (!seedPayload?.mask_data?.polygons?.length && !seedPayload?.bbox) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
polygons: seedPayload.mask_data?.polygons,
|
||||
bbox: seedPayload.bbox,
|
||||
points: seedPayload.points,
|
||||
label: seedPayload.mask_data?.label,
|
||||
color: seedPayload.mask_data?.color,
|
||||
class_metadata: seedPayload.mask_data?.class,
|
||||
template_id: seedPayload.template_id,
|
||||
};
|
||||
}, [activeTemplateId, currentFrame, currentProject?.id]);
|
||||
|
||||
const handlePropagateSegment = async (rangeOverride?: { startFrameNumber: number; endFrameNumber: number }) => {
|
||||
if (!currentProject?.id || !currentFrame?.id) return;
|
||||
const currentFrameMasks = masks.filter((mask) => mask.frameId === currentFrame.id);
|
||||
const selectedMask = selectedMaskIds
|
||||
const selectedMasks = selectedMaskIds
|
||||
.map((id) => currentFrameMasks.find((mask) => mask.id === id))
|
||||
.find((mask): mask is NonNullable<typeof mask> => Boolean(mask));
|
||||
const seedMask = selectedMask || currentFrameMasks[0];
|
||||
if (!seedMask) {
|
||||
setStatusMessage('请先选择或创建一个当前帧区域');
|
||||
.filter((mask): mask is Mask => Boolean(mask));
|
||||
const seedMasks = propagationTarget === 'all' ? currentFrameMasks : selectedMasks;
|
||||
if (seedMasks.length === 0) {
|
||||
setStatusMessage(propagationTarget === 'all' ? '当前帧没有可传播区域' : '请先选择一个或多个当前帧区域');
|
||||
return;
|
||||
}
|
||||
|
||||
const seedPayload = buildAnnotationPayload(currentProject.id, seedMask, currentFrame, activeTemplateId);
|
||||
if (!seedPayload?.mask_data?.polygons?.length && !seedPayload?.bbox) {
|
||||
setStatusMessage('当前区域缺少可传播的 polygon 或 bbox');
|
||||
const startFrameNumber = clampFrameNumber(rangeOverride?.startFrameNumber ?? propagationStartFrame);
|
||||
const endFrameNumber = clampFrameNumber(rangeOverride?.endFrameNumber ?? propagationEndFrame);
|
||||
const rangeStartIndex = Math.min(startFrameNumber, endFrameNumber) - 1;
|
||||
const rangeEndIndex = Math.max(startFrameNumber, endFrameNumber) - 1;
|
||||
const propagationDirections: Array<{ direction: PropagationDirection; maxFrames: number }> = [];
|
||||
if (rangeStartIndex < currentFrameIndex) {
|
||||
propagationDirections.push({
|
||||
direction: 'backward',
|
||||
maxFrames: currentFrameIndex - rangeStartIndex + 1,
|
||||
});
|
||||
}
|
||||
if (rangeEndIndex > currentFrameIndex) {
|
||||
propagationDirections.push({
|
||||
direction: 'forward',
|
||||
maxFrames: rangeEndIndex - currentFrameIndex + 1,
|
||||
});
|
||||
}
|
||||
if (propagationDirections.length === 0) {
|
||||
setStatusMessage('传播范围只包含当前帧，请选择前后至少一帧');
|
||||
return;
|
||||
}
|
||||
|
||||
const seeds = seedMasks
|
||||
.map((mask) => ({ mask, seed: buildSeedPayload(mask) }))
|
||||
.filter((item): item is { mask: Mask; seed: NonNullable<ReturnType<typeof buildSeedPayload>> } => Boolean(item.seed));
|
||||
if (seeds.length === 0) {
|
||||
setStatusMessage('所选区域缺少可传播的 polygon 或 bbox');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsPropagating(true);
|
||||
setStatusMessage(`${aiModel.toUpperCase()} 正在传播当前区域...`);
|
||||
setStatusMessage(`${aiModel.toUpperCase()} 正在传播 ${seeds.length} 个区域到第 ${rangeStartIndex + 1}-${rangeEndIndex + 1} 帧...`);
|
||||
try {
|
||||
const result = await propagateMasks({
|
||||
project_id: Number(currentProject.id),
|
||||
frame_id: Number(currentFrame.id),
|
||||
model: aiModel,
|
||||
direction: 'forward',
|
||||
max_frames: 30,
|
||||
include_source: false,
|
||||
save_annotations: true,
|
||||
seed: {
|
||||
polygons: seedPayload.mask_data?.polygons,
|
||||
bbox: seedPayload.bbox,
|
||||
points: seedPayload.points,
|
||||
label: seedPayload.mask_data?.label,
|
||||
color: seedPayload.mask_data?.color,
|
||||
class_metadata: seedPayload.mask_data?.class,
|
||||
template_id: seedPayload.template_id,
|
||||
},
|
||||
});
|
||||
let createdCount = 0;
|
||||
let processedCount = 0;
|
||||
for (const { seed } of seeds) {
|
||||
for (const { direction, maxFrames } of propagationDirections) {
|
||||
const result = await propagateMasks({
|
||||
project_id: Number(currentProject.id),
|
||||
frame_id: Number(currentFrame.id),
|
||||
model: aiModel,
|
||||
direction,
|
||||
max_frames: maxFrames,
|
||||
include_source: false,
|
||||
save_annotations: true,
|
||||
seed,
|
||||
});
|
||||
createdCount += result.created_annotation_count;
|
||||
processedCount += result.processed_frame_count;
|
||||
}
|
||||
}
|
||||
await hydrateSavedAnnotations(currentProject.id, frames);
|
||||
setStatusMessage(`已传播并保存 ${result.created_annotation_count} 个区域`);
|
||||
setStatusMessage(`已传播 ${seeds.length} 个 seed，处理 ${processedCount} 帧次，保存 ${createdCount} 个区域`);
|
||||
} catch (err) {
|
||||
console.error('Propagation failed:', err);
|
||||
setStatusMessage('传播失败，请检查模型状态或后端日志');
|
||||
@@ -363,6 +427,16 @@ export function VideoWorkspace({ onNavigateToAI }: { onNavigateToAI?: () => void
|
||||
}
|
||||
};
|
||||
|
||||
const handlePropagateAllReachable = () => {
|
||||
if (totalFrames <= 1) {
|
||||
setStatusMessage('当前项目没有可传播的前后帧');
|
||||
return;
|
||||
}
|
||||
setPropagationStartFrame(1);
|
||||
setPropagationEndFrame(totalFrames);
|
||||
void handlePropagateSegment({ startFrameNumber: 1, endFrameNumber: totalFrames });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col bg-[#0a0a0a]">
|
||||
{/* Top Header / Status bar */}
|
||||
@@ -393,12 +467,53 @@ export function VideoWorkspace({ onNavigateToAI }: { onNavigateToAI?: () => void
|
||||
>
|
||||
{isImportingGt ? '导入中...' : '导入 GT Mask'}
|
||||
</button>
|
||||
<div className="flex items-center gap-1 rounded-md border border-white/10 bg-white/[0.03] px-2 py-1">
|
||||
<select
|
||||
aria-label="传播对象"
|
||||
value={propagationTarget}
|
||||
onChange={(event) => setPropagationTarget(event.target.value as PropagationTarget)}
|
||||
disabled={isPropagating || isSaving || isExporting || isImportingGt}
|
||||
className="h-6 bg-transparent text-[10px] text-gray-300 outline-none disabled:opacity-40"
|
||||
>
|
||||
<option value="selected">选中区域</option>
|
||||
<option value="all">当前帧全部</option>
|
||||
</select>
|
||||
<span className="text-[10px] text-gray-600">帧</span>
|
||||
<input
|
||||
aria-label="传播起始帧"
|
||||
type="number"
|
||||
min={1}
|
||||
max={Math.max(totalFrames, 1)}
|
||||
value={propagationStartFrame}
|
||||
onChange={(event) => setPropagationStartFrame(clampFrameNumber(Number(event.target.value) || 1))}
|
||||
disabled={isPropagating || isSaving || isExporting || isImportingGt || totalFrames === 0}
|
||||
className="h-6 w-14 rounded bg-black/20 border border-white/10 px-1 text-[10px] text-gray-300 outline-none focus:border-cyan-500/50 disabled:opacity-40"
|
||||
/>
|
||||
<span className="text-[10px] text-gray-600">-</span>
|
||||
<input
|
||||
aria-label="传播结束帧"
|
||||
type="number"
|
||||
min={1}
|
||||
max={Math.max(totalFrames, 1)}
|
||||
value={propagationEndFrame}
|
||||
onChange={(event) => setPropagationEndFrame(clampFrameNumber(Number(event.target.value) || 1))}
|
||||
disabled={isPropagating || isSaving || isExporting || isImportingGt || totalFrames === 0}
|
||||
className="h-6 w-14 rounded bg-black/20 border border-white/10 px-1 text-[10px] text-gray-300 outline-none focus:border-cyan-500/50 disabled:opacity-40"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={handlePropagateSegment}
|
||||
onClick={() => handlePropagateSegment()}
|
||||
disabled={!currentProject?.id || !currentFrame?.id || isSaving || isExporting || isImportingGt || isPropagating}
|
||||
className="px-4 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-md text-xs transition-colors text-white disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isPropagating ? '传播中...' : '传播片段'}
|
||||
{isPropagating ? '传播中...' : '按范围传播'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePropagateAllReachable}
|
||||
disabled={!currentProject?.id || !currentFrame?.id || totalFrames <= 1 || isSaving || isExporting || isImportingGt || isPropagating}
|
||||
className="px-4 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-md text-xs transition-colors text-white disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
传播全部可达
|
||||
</button>
|
||||
<button
|
||||
onClick={handleExportMasks}
|
||||
|
||||
@@ -73,6 +73,15 @@ describe('api client contracts', () => {
|
||||
expect(axiosMock.client.patch).toHaveBeenCalledWith('/api/projects/3', { name: 'Renamed' });
|
||||
});
|
||||
|
||||
it('deletes projects through DELETE', async () => {
|
||||
const { deleteProject } = await import('./api');
|
||||
axiosMock.client.delete.mockResolvedValueOnce({ data: null });
|
||||
|
||||
await expect(deleteProject('3')).resolves.toBeUndefined();
|
||||
|
||||
expect(axiosMock.client.delete).toHaveBeenCalledWith('/api/projects/3');
|
||||
});
|
||||
|
||||
it('normalizes legacy project status values returned by existing databases', async () => {
|
||||
const { getProjects } = await import('./api');
|
||||
axiosMock.client.get.mockResolvedValueOnce({
|
||||
|
||||
Reference in New Issue
Block a user