docs: add trace visualization catalog V1-V5 with priority

This commit is contained in:
Warren
2026-05-08 13:49:06 +08:00
parent 77598a4713
commit 6234972f37

View File

@@ -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)
一個人從上往下走,在畫面上的軌跡就是一條斜線: