Feature #186
已結束AI 分割工具、ROI Boolean 運算、Eraser 工具、Debug 計分與考試 UI 改善
概述
功能新增
- AI 自動分割工具(TeacherTool + Server + Python AI Service)
- 新增 AI Segment 工具按鈕(CT 模式限定),點擊病灶自動產生多邊形 ROI
- 新增 AI Propagate 功能,將 anchor slice 的分割結果沿 Z 軸自動擴展至 ±15 slices
- Circle / Polygon 完成後也可觸發 Propagate(以 ROI 中心為 anchor)
- Propagate 成功後自動清除 lastAiSegment,按鈕消失避免重複觸發
- Server 端新增 /api/ai-segment 與 /api/ai-propagate proxy 端點,座標自動在 pixel ↔ % 之間轉換
- 新增 Python AI 服務(server/ai/):SAM 模型分割 + Z 軸 propagation
- Eraser 橡皮擦工具(TeacherTool)
- 新增 Eraser 工具:拖曳擦除 ROI,支援即時預覽(紅色虛線圓圈)
- Eraser 大小透過 Slider 調整(1%-15%)
- 滾輪在 Eraser 模式下恢復 CT slice 滾動(不再改變 eraser 大小)
- 離開 canvas 或切換工具自動結束 eraser 操作
- Undo/Redo 支援 eraser 操作
- ROI Boolean 運算(roiGeometry.js)
- 新增 client/src/utils/roiGeometry.js 模組,使用 polygon-clipping 函式庫
- mergeROIs():新 ROI 與同 slice 現有 ROI 做 boolean union,自動合併重疊區域並保留 lesionId
- subtractFromROIs():eraser 從 ROI 扣除區域,保留 metadata(含 lesionId)
- createEraserCirclePoly():產生 eraser 用的圓形多邊形
- Debug 計分模式(Server + GameClient + PracticeGame)
- 教師後台新增 Debug Scoring 開關,控制是否向學生顯示計分明細
- scoreAnswer() 重構:回傳 { score, breakdown } 包含 lesion hit/miss、flag 命中詳情、計分公式
- 支援以 lesionId 群組化 ROI(同一 3D 病灶跨 slice 視為同一 lesion)
- 學生端提交答案後顯示 breakdown panel:lesion 命中狀態、flag 座標、計分公式、Export JSON
- 回顧畫面與成績表也顯示 breakdown 資訊
- Truth ROI 上方標示 lesionId label(綠色 monospace)
- Ctrl+Z / Ctrl+Y 快捷鍵(TeacherTool)
- 支援 Ctrl+Z(Undo)、Ctrl+Y / Ctrl+Shift+Z(Redo)全域鍵盤快捷鍵
- 排除 input/textarea 焦點狀態
UI/UX 改善
- 考試介面按鈕佈局穩定化(GameClient + PracticeGame)
- Normal/Abnormal/Submit 按鈕從浮動位置移入底部控制欄
- Flag hint 列("Click to place flags" + Undo Flag)使用 invisible 佔位,按下 Abnormal 時不會造成按鈕位置移動
- Flag hint 右對齊,位於按鈕列下方、題號導覽列上方
- PracticeGame:按鈕保持右上角,flag hint 移至底部欄右對齊
- 其他改善
- Server express.json() limit 提升至 50mb(支援大型 AI payload)
- Score feedback panel 加上 max-w-xs max-h-[70vh] overflow-y-auto 避免溢出
- 儲存題目與切換題目時清除 AI 相關 state
修改檔案
| 檔案 | 異動類型 |
| client/src/components/TeacherTool.jsx | AI 工具、Eraser、ROI merge、Propagate、Ctrl+Z/Y |
| client/src/components/GameClient.jsx | Debug breakdown、lesionId label、底部按鈕佈局 |
| client/src/components/PracticeGame.jsx | Debug breakdown、lesionId label、flag hint 佈局 |
| client/src/utils/roiGeometry.js | 新增 — ROI boolean 運算模組 |
| client/package.json | 新增 polygon-clipping 依賴 |
| server/index.js | AI proxy、debug mode、scoreAnswer 重構、lesionId 群組計分 |
| server/ai/* | 新增 — Python AI 分割服務 |
部署/安裝須知
前端新增依賴:
cd client && npm install
新增 polygon-clipping(ROI boolean union/difference 運算)。
Python AI 服務(新增):
cd server/ai && pip install -r requirements.txt
依賴:fastapi、uvicorn、torch>=2.5.0、torchvision>=0.20.0、opencv-python-headless、Pillow、numpy
AI 服務需獨立啟動:cd server/ai && uvicorn main:app --port 5001
Server 透過 AI_SERVICE_URL 環境變數連接(預設 http://localhost:5001)。