docs: add trace visualization catalog V1-V5 with priority
This commit is contained in:
@@ -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)
|
||||
|
||||
一個人從上往下走,在畫面上的軌跡就是一條斜線:
|
||||
|
||||
Reference in New Issue
Block a user