Files
Pre_Seg_Server/doc/03-frontend-element-audit.md
admin 689a9ba283 feat: 建立 SAM2 标注闭环基线
- 打通工作区真实标注闭环:支持手工多边形、矩形、圆形、点区域和线段生成 mask,并可保存、回显、更新和删除后端 annotation。

- 增强 polygon 编辑器:支持顶点拖动、顶点删除、边中点插入、多 polygon 子区域选择编辑,以及区域合并和区域去除。

- 接入 GT mask 导入:后端支持二值/多类别 mask 拆分、contour 转 polygon、distance transform seed point,前端支持导入、回显和 seed point 拖动编辑。

- 完善导出能力:COCO JSON 导出对齐前端,PNG mask ZIP 同时包含单标注 mask、按 zIndex 融合的 semantic_frame 和 semantic_classes.json。

- 打通异步任务管理:新增任务取消、重试、失败详情接口与 Dashboard 控件,worker 支持取消状态检查并通过 Redis/WebSocket 推送 cancelled 事件。

- 对接 Dashboard 后端数据:概览统计、解析队列和实时流转记录从 FastAPI 聚合接口与 WebSocket 更新。

- 增强 AI 推理参数:前端发送 crop_to_prompt、auto_filter_background 和 min_score,后端支持点/框 prompt 局部裁剪推理、结果回映射和负向点/低分过滤。

- 接入 SAM3 基础设施:新增独立 Python 3.12 sam3 环境安装脚本、外部 worker helper、后端桥接和真实 Python/CUDA/包/HF checkpoint access 状态检测。

- 保留 SAM3 授权边界:当前官方 facebook/sam3 gated 权重未授权时状态接口会返回不可用,不伪装成可推理。

- 增强前端状态管理:新增 mask undo/redo 历史栈、AI 模型选择状态、保存状态 dirty/draft/saved 流转和项目状态归一化。

- 更新前端 API 封装:补充 annotation CRUD、GT mask import、mask ZIP export、task cancel/retry/detail、AI runtime status 和 prediction options。

- 更新 UI 控件:ToolsPalette、AISegmentation、VideoWorkspace 和 CanvasArea 接入真实操作、导入导出、撤销重做、任务控制和模型状态。

- 新增 polygon-clipping 依赖,用于前端区域 union/difference 几何运算。

- 完善后端 schemas/status/progress:补充 AI 模型外部状态字段、任务 cancelled 状态和进度事件 payload。

- 补充测试覆盖:新增后端任务控制、SAM3 桥接、GT mask、导出融合、AI options 测试;补充前端 Canvas、Dashboard、VideoWorkspace、ToolsPalette、API 和 store 测试。

- 更新 README、AGENTS 和 doc 文档:冻结当前需求/设计/测试计划,标注真实功能、剩余 Mock、SAM3 授权边界和后续实施顺序。
2026-05-01 15:26:25 +08:00

11 KiB
Raw Blame History

前端逐元素审计

状态说明:

  • 真实可用:接真实状态或后端接口,可以完成主要动作。
  • 部分可用:能展示或完成一部分,但存在关键缺口。
  • Mock / UI-only只有展示或本地状态变化没有真实业务效果。
  • 接口不通:前端调用与后端接口不一致,按当前代码大概率失败。

App 与导航

元素 位置 状态 说明
登录拦截 App.tsx 真实可用 未登录显示 Login,登录后显示主界面
模块切换 Sidebar.tsx + App.tsx 真实可用 切换 dashboard/projects/workspace/ai/templates
Logo Sidebar.tsx 真实可用 使用 /logo.png,文件存在于 public/logo.png
GPU 状态圆标 Sidebar.tsx 真实可用 通过 GET /api/ai/models/status 显示 GPU/CPU 和当前模型可用性

登录页

元素 状态 说明
用户名/密码输入 真实可用 默认填入 admin / 123456
安全登录按钮 真实可用 调用 POST /api/auth/login
错误提示 真实可用 捕获后端错误并显示
安全审计说明文字 Mock / UI-only UI 文案,没有真实审计功能

Dashboard 系统概况

元素 状态 说明
WebSocket 连接状态 真实可用 前端通过 src/lib/config.ts 推导或读取 VITE_WS_PROGRESS_URL,后端有 /ws/progress
解析队列任务 真实可用 初始数据来自 GET /api/dashboard/overview,按 processing_tasks queued/running/failed/cancelled 任务生成
任务取消 真实可用 queued/running 任务显示取消按钮,调用 POST /api/tasks/{task_id}/cancel
任务重试 真实可用 failed/cancelled 任务显示重试按钮,调用 POST /api/tasks/{task_id}/retry 创建新任务
失败详情 真实可用 任务详情按钮调用 GET /api/tasks/{task_id},弹窗展示 error、payload、result、Celery ID 和时间
WebSocket 更新任务 真实可用 Celery worker 更新 processing_tasks 后发布 Redis seg:progressFastAPI 广播 progress/complete/error/cancelled
项目、任务、标注、系统负载统计 真实可用 初始数据来自 GET /api/dashboard/overview,系统负载按主机 load average 估算
近期实时流转记录 真实可用 初始数据来自任务、项目、标注和模板记录WebSocket status/complete/error 会继续追加

项目库 ProjectLibrary

元素 状态 说明
项目列表 真实可用 调用 GET /api/projects
项目卡片缩略图 真实可用 后端返回 MinIO 预签名 thumbnail_url 时显示
点击项目进入工作区 真实可用 设置 currentProject 后切到 workspace
新建项目 真实可用 调用 POST /api/projects
导入视频文件 真实可用 创建项目、上传文件、触发拆帧、刷新项目列表
解析 FPS 滑块 真实可用 值传入 createProject({ parse_fps })
导入 DICOM 序列 部分可用 可上传 .dcm 并触发解析;体验和错误反馈较粗
项目状态徽标 真实可用 项目状态统一为 pending/parsing/ready/error,前端兼容归一化旧状态值
更多按钮 Mock / UI-only 有图标,没有菜单或事件
alert 成功/失败提示 真实可用但粗糙 使用浏览器 alert

工作区 VideoWorkspace

元素 状态 说明
当前项目名 真实可用 读取 currentProject.name
自动加载项目帧 真实可用 调用 GET /api/projects/{id}/frames
无帧时触发解析 真实可用 如果 video_path 存在会调用 parseMedia() 创建异步任务,并轮询 GET /api/tasks/{id} 等待完成
SAM 模型状态徽标 真实可用 调用 GET /api/ai/models/status,显示当前选择的 SAM 2/SAM 3 是否可用
已保存标注回显 真实可用 加载工作区帧后调用 GET /api/ai/annotations 并渲染已保存 mask
“导出 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 写入 POST /api/ai/annotatedirty mask 写入 PATCH /api/ai/annotations/{id}

CanvasArea 画布

元素 状态 说明
当前帧底图显示 真实可用 useImage(frameUrl) 加载当前帧 URL
滚轮缩放 真实可用 改变 Konva Stage scale
拖拽平移 真实可用 activeTool 为 move 时 Stage draggable
光标坐标显示 真实可用 根据 pointer position 计算
正向/反向选点 真实可用 UI 能加点,并按当前帧 frame.id 调用 /api/ai/predict;结果需点击归档保存才持久化
框选 真实可用 UI 能画框,并把框坐标归一化后调用后端推理;结果需点击归档保存才持久化
AI 推理中提示 真实可用 请求期间会显示
手工多边形/矩形/圆/点/线 真实可用 多边形点击取点后 Enter 完成;矩形/圆/线拖拽生成 polygon点工具生成小区域均写入 Mask.segmentation,可归档保存
Mask 渲染 真实可用 前端会把推理、手工绘制、GT 导入和已保存标注转成 Konva pathData 渲染
Polygon 逐点编辑 真实可用 点击 mask 后显示 polygon 顶点;拖动顶点会重算 pathData/segmentation/bbox/area,已保存 mask 标为 dirty选中顶点后 Delete/Backspace 可删点但保留至少三点
GT seed point 回显/编辑 真实可用 已保存标注的 points 会显示为黄色 seed 点;拖动后标记为 dirty归档保存会更新后端
应用分类 真实可用 将当前选择的模板分类应用到本帧 mask已保存 mask 会标为 dirty归档保存时更新后端
清空遮罩 真实可用 工作区中会删除当前帧已保存标注并清空当前帧本地 mask
保存状态计数 真实可用 底部显示已保存、未保存、待更新数量
当前图层树文字 Mock / UI-only 固定显示 OBJECT_VEHICLE_01

ToolsPalette 工具栏

元素 状态 说明
拖拽/选择 真实可用 控制 Canvas 是否可拖拽
多边形/矩形/圆/点/线 真实可用 切换 activeTool 后由 CanvasArea 生成可保存的 polygon mask
区域合并/去除 真实可用 选择工具后点击多个 mask使用 polygon-clipping 做 union / difference合并会保留主 mask 并移除被合并 mask去除会从主 mask 扣除后续选中 mask
正向选点/反向选点/框选 部分可用 会影响 Canvas 交互,并能触发已对齐的 AI 推理接口
魔法棒 SAM 触发 部分可用 切到 AI 页面;不是直接执行推理
撤销/重做 真实可用 绑定 Zustand maskHistory/maskFuture支持工具栏按钮、AI 页按钮和 Canvas Ctrl+Z/Ctrl+Y

FrameTimeline 时间轴

元素 状态 说明
帧缩略图 真实可用 使用 frames[].url
点击缩略图跳帧 真实可用 调用 setCurrentFrame(idx)
顶部 range 拖动 真实可用 改变当前帧
播放/暂停 真实可用 当前代码按 parse_fps/original_fps 推进帧,最多 30fps
方向键切帧 Mock / UI-only Word 提到,但当前没有键盘监听

OntologyInspector 本体面板

元素 状态 说明
模板选择 部分可用 读取全局 templates可切换 activeTemplateId
分类树展示 真实可用 显示模板 classes 和本地 customClasses
添加自定义分类 部分可用 只存在组件本地状态,不保存到后端
置信度条 Mock / UI-only 固定 0.9412
拓扑锚点数量 Mock / UI-only 固定 12 节点
重新提取骨架按钮 Mock / UI-only 无事件

AISegmentation 独立 AI 页

元素 状态 说明
模型选择 SAM2/SAM3 真实可用 选择写入 ZustandpredictMask() 会把 model 传给后端 SAM registry
正向/反向点 部分可用 可在当前项目帧上加点,并可调用 AI 推理接口
语义文本输入 部分可用 纯文本会以 semantic prompt 调用后端;选择 SAM 3 且独立 Python 3.12 环境、CUDA、官方包和 Hugging Face gated 权重访问均满足时走 SAM 3 文本语义推理,否则状态接口会标明不可用
参数开关 真实可用 cropMode 会随 /api/ai/predict 发送 crop_to_prompt,后端对点/框 prompt 裁剪推理区域并回映射 polygonautoDeleteBg 会发送 auto_filter_backgroundmin_score,后端过滤低分结果和覆盖负向点的结果
执行高精度语义分割 部分可用 使用当前项目帧调用 /api/ai/predict;没有当前帧时按钮禁用
上传替换底图 Mock / UI-only 按钮无事件
撤销/重做 真实可用 绑定全局 mask 历史栈
清空全体锚点 部分可用 清空前端 points 和 masks
退档推送至工作区重组 部分可用 只切回工作区,共用 masks store但没有保存/确认流程
背景图 部分可用 优先显示当前项目帧;没有项目帧时仍回退到 Unsplash 演示图

TemplateRegistry 模板库

元素 状态 说明
模板列表 真实可用 调用 GET /api/templates
新建方案 真实可用 调用 POST /api/templates
编辑模板 真实可用 调用 PATCH /api/templates/{id}
删除模板 真实可用 调用 DELETE /api/templates/{id}
添加/删除分类 真实可用 保存在模板 mapping_rules.classes
拖拽排序 真实可用 重算 zIndex保存时写后端
JSON 批量导入 部分可用 前端解析 JSON 并加入编辑态,保存后才落库
载入腹腔镜 35 分类 真实可用 前端内置数据;后端也 seed 默认模板
mapping rules 部分可用 可存 rules,但无实际映射执行引擎

总体结论

当前前端真实可用的主链路是登录、Dashboard 后端概览、项目列表、新建项目、上传视频/DICOM、拆帧、浏览帧、播放帧、工作区手工绘制、点/框 AI 推理、GT mask 导入、标注保存/回显、COCO 导出、PNG mask ZIP 导出、模板 CRUD。

当前最主要的 Mock 或未打通链路是polygon 插点/边编辑增强、真正的文本语义分割、骨架/HDBSCAN 级别的 mask 降维增强、任务历史筛选、项目更多菜单和若干检查面板指标。