diff --git a/docs_v1.0/API_V1.0.0/TRACE/TRACE_HEATMAP_SPEC_V1.0.0.md b/docs_v1.0/API_V1.0.0/TRACE/TRACE_HEATMAP_SPEC_V1.0.0.md index 65d6210..2f57966 100644 --- a/docs_v1.0/API_V1.0.0/TRACE/TRACE_HEATMAP_SPEC_V1.0.0.md +++ b/docs_v1.0/API_V1.0.0/TRACE/TRACE_HEATMAP_SPEC_V1.0.0.md @@ -209,6 +209,100 @@ Y% | 兩條線交叉 ✕ | 兩人同時出現在同一區域 | | 平行線 ═══ | 兩人同方向移動(一起走) | +--- + +## Trace Visualization Catalog + +### V1: Face Thumbnail Timeline (臉孔縮圖時間軸) + +水平時間軸直接嵌入 sample 臉孔縮圖,一眼看出誰在什麼時候出現。 + +``` +0s────20s────40s────60s────80s────100s───120s───140s───160s───180s───200s + [😀]──[😀]──[😀] [😀]──[😀]──[😀] + trace 2 trace 5 trace 8 trace 150 trace 155 trace 160 + Cary Grant Audrey Hepburn +``` + +**前端**: 目前 FaceTraceTimeline.vue 的 expand 區已實作類似概念(frame thumbnail grid),但可改為水平時間軸 + 縮圖 + 身分名稱。 + +### V2: Identity Swimlane (身分泳道圖) + +每列一個 identity,橫軸為時間,用 bar 顯示該 identity 哪些時段出現在畫面中。 + +``` +Cary Grant ████████░░░░████████░░░░████ +Audrey ░░░░████████░░░░████████░░░░ +Walter Matthau░░░░░░░░████░░░░░░░░░░░░░░░░ +James Coburn ░░░░░░░░░░░░████░░░░░░░░░░░░ +``` + +**適用**: 快速對比多個角色的出現頻率與時段。 + +### V3: Trace Duration Histogram (持續時間分布圖) + +顯示 trace 長度分布 — 大多數 trace 很短,少數很長。 + +``` +5000 ┤██ + │██ +4000 ┤██ + │██ ██ +3000 ┤██ ██ + │██ ██ ██ +2000 ┤██ ██ ██ + │██ ██ ██ ██ ██ +1000 ┤██ ██ ██ ██ ██ ██ ██ + └─────────────────────→ duration (s) + 1 2 5 10 20 44 +``` + +**適用**: 評估 face tracker 效能、辨識「長時間主角」vs「短暫過場人物」。 + +### V4: Similarity Matrix (相似度矩陣) + +trace vs trace 的 embedding cosine similarity 熱力圖,找出「可能是同一人但被鏡頭切斷」的 traces。 + +``` + t1 t2 t3 t4 t5 +t1 1.00 0.12 0.08 0.15 0.89 ← t1 和 t5 很相似 +t2 0.12 1.00 0.91 0.88 0.11 ← t2 和 t3-t4 相似 +t3 0.08 0.91 1.00 0.90 0.09 +t4 0.15 0.88 0.90 1.00 0.10 +t5 0.89 0.11 0.09 0.10 1.00 +``` + +**亮色區塊 = 可能是同一人**。可自動建議合併 trace。 + +### V5: 3D Space-Time Cube (3D 時空立方體) + +將 trace 的 (x, y) 畫面位置 + 時間 t 以 3D 呈現,可旋轉視角。 + +``` + t + ↗ + │ ●────────● + │ / \ + │/ ● + ●───────────── + ╱ y + ╱ + x +``` + +**適用**: MR/VR 場景 — trace 直接變成 3D 空間中的運動軌跡。 +**後端需求**: 回傳 (x, y, t) 三元組陣列,前端 Three.js / WebGL 渲染。 + +### Summary + +| 名稱 | 維度 | 資料需求 | 前端元件 | 優先級 | +|------|:----:|---------|---------|:------:| +| V1 Face Thumbnail Timeline | 1D (t) + 縮圖 | trace list + sample face ID | FaceTraceTimeline.vue (改) | ⭐ | +| V2 Identity Swimlane | 1D (t) + 多列 | trace list + identity mapping | SwimlaneView.vue (新) | ⭐⭐ | +| V3 Duration Histogram | 1D (duration) | trace list | — | 🟡 | +| V4 Similarity Matrix | 2D (trace×trace) | trace embeddings | — | 🟡 | +| V5 3D Space-Time Cube | 3D (x, y, t) | trace detections | — (MR) | 🔴 | + #### 縱向軌跡範例 (axis=y) 一個人從上往下走,在畫面上的軌跡就是一條斜線: