TSL-RhythmNet：以 CNN-Transformer 集成辨識為核心的音樂同步台灣手語學習系統

§1 緒論

台灣手語（TSL）是台灣約 50,000 名聽障及重聽人士的主要溝通媒介。儘管其重要性不言而喻，有效的自學工具仍相當匱乏——尤其是能對手勢執行品質提供即時、客觀反饋的工具。現有的電腦輔助手語辨識系統存在三大核心缺陷：（1）需要專用硬體或受控實驗室環境；（2）將辨識視為與學習者參與度脫鉤的孤立分類任務；（3）無法提供能適應學習者程度的漸進式、分級詞彙課程。

TSL-RhythmNet 透過緊密整合的技術設計，一次解決上述三項缺陷。系統的核心創新如下：

1. 72 維生物力學手部特徵表示：採用肩部錨定正規化與選擇性關節點修剪，達成尺度、位置與方向不變性，並補充三個幾何描述符，捕捉單純原始座標中所缺失的精細手形資訊。
2. CNN-Transformer 混合時序分類器：透過一維卷積擷取局部動作模式，再經多頭自注意力機制對 30 幀滑動窗口內的全局時序依賴性進行建模，並結合均值-最大池化進行穩健的序列聚合。
3. 貝氏優化五折交叉驗證訓練策略：融合 ASL 跨語言權重遷移、標籤平滑正則化，以及每折獨立的 ONNX 匯出，打造在所有資料分割上均維持 90% 以上準確率的穩定集成模型。
4. 基於 Web Audio API 的音樂節拍偵測引擎：將任意音訊分解為三個頻段，對每個頻段進行帶有自適應門限搜尋的起音偵測，生成帶時間標記的事件排程表，驅動遊戲中的同步炸彈生成。
5. 動態重疊窗口時序表決機制：每 5 幀步距執行一次推論，維護至多 6 個預測窗口的近因加權佇列，當加權共識分數超過 0.40 後才將辨識到的手語提交至遊戲狀態。

§2 相關研究

2.1 手部手勢與手語辨識

早期手語辨識系統依賴資料手套或深度感測器。隨著 RGB 網路攝影機的普及以及 MediaPipe Hands [Zhang et al., 2020] 的發布，研究重心轉向基於骨架的方法，可在一般消費級硬體上執行。Transformer 架構已在時序任務上展現最先進的效能 [Vaswani et al., 2017]，CNN-Transformer 混合模型也被應用於動作辨識 [Arnab et al., 2021] 與手語定位 [Albanie et al., 2020]。本研究的差異性在於：（a）將混合 CNN-Transformer 專門應用於台灣手語領域，並採用源自身體錨定正規化的緊湊生物力學特徵集；（b）將辨識系統與互動遊戲循環共同設計，提供自然、持續的學習動機。

2.2 教育遊戲與遊戲化

Guitar Hero、Beat Saber 等節奏遊戲框架表明，節拍同步互動能大幅提升學習者的參與度與動作記憶保留率 [Hamari et al., 2014]。據我們所知，本系統是首個將音樂同步節拍偵測與手勢手語辨識整合進統一教育遊戲的系統——將詞彙練習轉化為由學習者自選音樂驅動的節奏遊戲互動。

2.3 Web 端裝置上推論

ONNX Runtime Web [ONNX community, 2021] 讓模型能在瀏覽器 WebAssembly 環境中部署，無需 Python 伺服器依賴。本系統的雙後端架構（PyTorch 伺服器為主要路徑、ONNX Web 為容錯備援）遵循此趨勢，並確保在後端網路不可用時能優雅降級。

§3 特徵擷取流程

3.1 MediaPipe Holistic 地標擷取

每幀影像由 MediaPipe Holistic（模型：holistic_landmarker.task）處理，最多可產生 543 個地標，涵蓋臉部（468）、姿態（33）、左手（21）和右手（21）關鍵點。其中，姿態地標僅用於全局正規化，手部地標用於特徵構建。

設姿態地標集合為 $\mathbf{P} = \{p_i \in \mathbb{R}^3 \mid i = 0, \ldots, 32\}$，其中 $p_{11}$ 與 $p_{12}$ 分別為左、右肩地標。左手地標集合為 $\mathbf{L} = \{\ell_i \in \mathbb{R}^3 \mid i = 0, \ldots, 20\}$，右手地標集合為 $\mathbf{R} = \{r_i \in \mathbb{R}^3 \mid i = 0, \ldots, 20\}$。

AI 圖解提示詞 展示 MediaPipe Holistic 於人體上偵測到的三類地標：臉部 468 點（網格）、姿態 33 點（骨架）、雙手各 21 點（手指骨架）。

Technical scientific diagram of a human upper body with MediaPipe Holistic landmark overlay on white background. Face covered with 468 small blue dots forming a mesh. Pose skeleton shown as 33 orange dots connected by thin orange lines on shoulders, arms and torso. Both hands show 21 green dots connected by green lines forming finger skeleton structures. Annotation arrows label each group: "468 face landmarks", "33 pose landmarks (used for normalization)", "21 hand landmarks × 2". Clean flat vector art, academic paper illustration style, labeled, no shadows.

AI 圖解

3.2 肩部錨定全局正規化

為達到對拍攝位置與攝影機距離的強健性，我們定義以肩部中點 $\mathbf{c}_s$ 為中心、以肩寬 $d_s$ 為縮放尺度的全局參考座標系：

若姿態地標不可用，系統回退至 $\mathbf{c}_s = (0.5, 0.5, 0.0)$，$d_s = 1.0$。每隻手的手腕地標相對於此全局座標系進行正規化：

AI 圖解提示詞 展示以肩部中點為原點、肩寬 $d_s$ 為縮放尺度的全局正規化座標系，以及同一手形在下巴旁與胸前兩位置的正規化座標差異。

Technical diagram of a human torso front view (upper body silhouette, white background). Two orange shoulder dots labeled p11 (left) and p12 (right) connected by a bracket labeled "ds = inter-shoulder distance". A red cross marker at the midpoint labeled "cs = shoulder center". Coordinate axes (x, y) emanate from cs. One hand near chin labeled "Position A: sign near face" with a vector arrow showing normalized coordinates; another hand near chest labeled "Position B: sign near chest" with a different vector. Dashed guide lines from cs to each hand. Caption note: "Same handshape, different spatial meaning in TSL". Clean flat vector academic diagram, labeled with mathematical notation, white background.

AI 圖解

3.3 手部內部縮放正規化

在每隻手的內部，我們進一步相對於手腕至中指掌指關節距離 $s_h$ 進行正規化，此距離與手的物理大小成比例：

每個非手腕地標以手腕為原點、以 $s_h$ 為單位進行編碼：

此雙層正規化（全局肩部尺度 ＋ 局部手部尺度）對每隻手產生 63 維表示 $\hat{\mathbf{L}}_{63} \in \mathbb{R}^{63}$，同時對拍攝位置、攝影機距離及個體手部大小具有不變性。

3.4 選擇性關節點修剪至 33 維

完整的 21 點骨架存在解剖冗餘——中間指骨被遠端與近端指骨緊密約束。我們僅保留 11 個攜帶最多判別性關節屈曲資訊的關節點：

此集合包含手腕（0）以及五根手指的遠端與中端指骨（配對 3–4、7–8、11–12、15–16、19–20）。修剪後的表示 $\hat{\mathbf{L}}_{33} \in \mathbb{R}^{33}$ 保留了每根手指鏈的端點，這也是手語音韻學家用於描述台灣手語正式手形的同一組地標。

AI 圖解提示詞 展示手部 21 個關節點中被保留的 11 個（藍色實心）與被修剪的 10 個（灰色空心），直觀呈現選擇性修剪策略及其 48% 降維效果。

Technical anatomy diagram of an open right hand skeleton on white background with 21 labeled landmark points. Points 0,3,4,7,8,11,12,15,16,19,20 shown as solid filled blue circles labeled with index numbers (Wrist=0, Thumb-mid=3, Thumb-tip=4, Index-mid=7, Index-tip=8, Middle-mid=11, Middle-tip=12, Ring-mid=15, Ring-tip=16, Pinky-mid=19, Pinky-tip=20). Remaining 10 points shown as small hollow gray circles. Finger bone connections drawn as thin gray lines. Legend shows "● Retained key joints (11, blue) → 33D" and "○ Pruned redundant joints (10, gray)". Annotation: "Dimensionality reduced 48%: 63D → 33D". Clean flat technical illustration, scientific diagram style, minimalist design, white background.

AI 圖解

3.5 幾何特徵擴增（每手 3 維）

原始正規化座標捕捉手指位置但無法表達手部構型。我們以從完整 21 點集合計算的三個幾何標量特徵擴增每個修剪後的地標集：

特徵 1 — 拇指-食指捏合距離 $f_1$：

衡量拇指指尖與食指指尖之間的開口，編碼張開掌心與閉合/捏合手形的對比。可區別「謝謝」（開掌）與「好吃」（捏合）等手語。

特徵 2 — 食指-中指展開角度 $f_2$：

其中 $\varepsilon = 10^{-6}$ 防止除以零。此角度捕捉兩根主要手指之間的側向展開，區分 V 手形與食指指向手形。

特徵 3 — 食指指尖至掌面距離 $f_3$：

設 $\mathbf{n}$ 為掌面單位法向量，由手腕至食指掌指關節與小指掌指關節的向量叉積定義：

當 $f_3 \approx 0$ 時，食指平躺於掌面（彎曲/捲曲）；當 $f_3$ 較大時，食指向掌面外延伸（指向/伸直）。

AI 圖解提示詞 於手部解剖圖上標註三個幾何特徵的幾何意義：拇食指捏合距離 $f_1$、食中指展開角 $f_2$、食指指尖至掌面距離 $f_3$，展示其音韻學捕捉能力。

Technical hand anatomy diagram on white background showing three geometric feature measurements on a 3D-perspective hand drawing. Feature 1: a dashed orange double-headed arrow between thumb tip and index fingertip labeled "f1 = pinch distance ||tip4 - tip8||". Feature 2: a blue arc drawn between the extended index and middle finger labeled "f2 = spread angle arccos(...)". Feature 3: a green perpendicular arrow from index fingertip toward the palm plane labeled "f3 = curl depth". Palm plane shown as a semi-transparent gray surface with normal vector n. Three small inset icons showing examples: closed-pinch hand (f1≈0), V-shape spread hand (f2 large), curled fist (f3≈0) vs pointing finger (f3 large). Clean technical illustration, academic diagram style, labeled with mathematical symbols, white background.

AI 圖解

3.6 最終 72 維特徵向量

完整的每幀特徵向量 $\mathbf{x}_t \in \mathbb{R}^{72}$ 組裝如下：

此 72 維特徵向量既緊湊（每幀不到 0.3 KB），又具備跨平台一致性——完全相同的擷取邏輯同時實作於 holistic_features.js（瀏覽器端）和 Python 訓練流程中，消除了訓練-服務特徵分佈漂移問題。

AI 圖解提示詞 以分段色塊橫條圖呈現 72 維特徵向量的四個組成區段（左手關節 33D、左手幾何 3D、右手關節 33D、右手幾何 3D）及各區段的索引範圍。

Horizontal stacked bar infographic on white background showing the 72-dimensional feature vector composition. A long horizontal bar divided into four colored segments: indices 0-32 in blue labeled "Left hand key joints (33D)"; indices 33-35 in cyan labeled "Left geometric f1,f2,f3 (3D)"; indices 36-68 in orange labeled "Right hand key joints (33D)"; indices 69-71 in amber labeled "Right geometric f1,f2,f3 (3D)". Total bar width labeled "72 dimensions total". Index tick marks below at 0, 33, 36, 69, 72. Small left-hand and right-hand skeleton icons above respective segments. Clean flat infographic style, academic paper color palette, white background.

AI 圖解

§4 CNN-Transformer 混合模型

4.1 架構概覽

模型 CNNTransformerTSL（實作於 ensemble_server.py）接受 $T=30$ 幀連續影格的輸入序列 $\mathbf{X} = (\mathbf{x}_1, \ldots, \mathbf{x}_T) \in \mathbb{R}^{T \times 72}$，輸出原始類別 logit $\hat{\mathbf{y}} \in \mathbb{R}^{50}$。架構由四個功能區塊串接組成：

1. 時序 CNN 區塊——局部動作模式擷取
2. 可學習位置編碼器——時序順序注入
3. Transformer 編碼器——全局時序自注意力
4. 均值-最大池化分類頭——穩健序列聚合與分類

AI 圖解提示詞 以從左到右的模組流程圖展示完整 CNN-Transformer 架構：輸入張量依序流過時序 CNN、可學習位置編碼、Transformer 編碼器、均值-最大池化頭，最終輸出 50 個手語類別 logit。

Neural network architecture block diagram with left-to-right data flow on white background. Input tensor box on the left labeled "Input [B × 30 × 72]". Connected by arrows through four sequential blocks: (1) blue rectangle "Temporal CNN Block" with two Conv1D icons, BatchNorm and ReLU symbols, output "[B × 30 × 128]"; (2) purple rectangle "Learnable Positional Encoding Epos [1 × 30 × 128]"; (3) green rectangle "Transformer Encoder ×2" showing multi-head attention (Nh=8) and FFN (dff=256) sub-layers; (4) orange rectangle "Mean-Max Pooling Head" with two parallel pooling streams merging with a ⊕ operator. Final red box "FC 128→50" with output "50 class logits". Tensor dimensions annotated below each arrow. Clean flat 2D technical illustration, academic paper style, white background.

AI 圖解

4.2 時序 CNN 區塊

CNN 區塊應用兩個帶有批次正規化與 Dropout 的一維卷積層。輸入從 $(B, T, D)$ 轉置為 $(B, D, T)$ 以沿時間軸卷積，再轉置回來：

其中 $d_h = 128$。兩個卷積均使用 padding=1 以保持序列長度 $T$。

4.3 可學習位置編碼

與固定正弦編碼不同，我們使用以 $\mathcal{N}(0, 1)$ 樣本初始化的可學習參數張量：

4.4 Transformer 編碼器

位置編碼後的嵌入通過 $N_L = 2$ 層堆疊 Transformer 編碼器：

每層內的多頭自注意力：

Transformer 的全局感受野對於建模長程時序共依賴性至關重要——例如，第 1 幀的初始手部方向與第 30 幀的最終掌心方向之間的相關性，這兩者共同決定許多台灣手語中的兩段式手語，如「說話」或「忘記」。

4.5 均值-最大池化聚合

輸出序列 $\mathbf{Z} \in \mathbb{R}^{B \times T \times d_h}$ 通過結合全局平均池化與全局最大池化進行聚合：

AI 圖解提示詞 以圖解對比均值池化（捕捉平均時序輪廓）與最大池化（捕捉峰值啟動事件）兩條路徑，並展示加法聚合如何在保持 128D 維度的同時融合兩種互補資訊。

Technical diagram showing temporal sequence aggregation with additive mean-max pooling on white background. Center: a 3D stacked tensor Z [30 × 128] shown as 30 vertical slices. Two parallel downward arrows: left arrow in blue with a mean symbol (μ) and label "Global Mean Pool → z_mean [128]: captures average motion profile across all 30 frames"; right arrow in orange with a max symbol (↑) and label "Global Max Pool → z_max [128]: captures peak activation at most expressive frame". Both arrows converge to a large ⊕ box labeled "z = z_mean + z_max [128]". Comparison sidebar: "Additive fusion: stays 128D" vs. "Concat would give 256D → 2x FC cost". Clean flat technical diagram, color-coded blue/orange paths, white background.

AI 圖解

4.6 分類頭

其中 $W_1 \in \mathbb{R}^{128 \times d_h}$，$W_2 \in \mathbb{R}^{50 \times 128}$。輸出 $\hat{\mathbf{y}} \in \mathbb{R}^{50}$ 包含原始 logit。argmax 給出預測類別；預測索引處的原始 logit 值直接作為置信度分數（門限 $\tau = 0.75$）。

4.7 完整前向傳遞（演算法虛擬碼）

輸入：X : [B, T=30, D=72]
輸出：ŷ : [B, 50]

 1.  H = X.transpose(1,2)                       # [B, 72, 30]
 2.  H = Conv1D_{72→128, k=3, pad=1}(H)          # [B, 128, 30]
 3.  H = Dropout(ReLU(BatchNorm1D(H)))
 4.  H = Conv1D_{128→128, k=3, pad=1}(H)         # [B, 128, 30]
 5.  H = Dropout(ReLU(BatchNorm1D(H)))
 6.  H = H.transpose(1,2)                        # [B, 30, 128]
 7.  H = H + E_pos[:, :T, :]                     # 加入可學習位置編碼
 8.  Z = TransformerEncoder(H, layers=2)         # [B, 30, 128]
 9.  z_mean = Z.mean(dim=1)                      # [B, 128]
10.  z_max  = Z.max(dim=1).values                # [B, 128]
11.  z      = z_mean + z_max                     # [B, 128]（加法聚合）
12.  ŷ = FC_{128→50}(Dropout(ReLU(FC_{128→128}(z))))  # [B, 50]
13.  return ŷ

4.8 模型參數摘要

模型設計刻意保持緊湊——約 303K 參數——使其非常適合在 CPU 硬體上部署，以及匯出為 ONNX 格式進行瀏覽器端推論。

§5 訓練策略

5.1 貝氏超參數優化

我們採用貝氏優化（Optuna 框架）對以下超參數空間進行聯合搜尋：

優化後的 Dropout 率 $p = 0.532$（接近 50%）顯示模型在相對較小的台灣手語資料集上容易過擬合，需要積極的隨機正則化。適中的標籤平滑 $\varepsilon_s = 0.059$ 可防止過度自信的預測，同時不懲罰模型區分相近手語的能力。

5.2 ASL 跨語言遷移初始化

在台灣手語資料上訓練之前，模型權重先在美國手語（ASL）序列上進行預訓練。此跨語言遷移利用了手部關節屈曲基元——手指捲曲、側向展開、捏合、手腕旋轉——是跨手語的通用生物力學操作這一事實。CNN 時序區塊尤其受益，因為低階動作模式在美國手語和台灣手語中均存在。

AI 圖解提示詞 以兩階段流程圖展示跨語言遷移學習：Phase 1 在 ASL 上預訓練 CNN-Transformer 主體，Phase 2 凍結主體權重並以 TSL 資料重新訓練分類頭，實現生物力學動作先驗的遷移。

Two-phase transfer learning diagram on white background. Left panel labeled "Phase 1: Pre-train on ASL" showing a gray CNN-Transformer architecture block with American Sign Language hand gesture sequence icons as training data and a gray output head labeled "50-class ASL vocabulary (discarded)". A wide horizontal arrow in the middle labeled "Transfer CNN + Transformer weights →" pointing right. Right panel labeled "Phase 2: Fine-tune on TSL" showing the same CNN-Transformer (blue, with a padlock icon indicating transferred/frozen core weights) with TSL hand gesture icons as input and a new orange output head labeled "50-class TSL vocabulary (trained from scratch)". Bottom note: "Low-level biomechanical priors shared across sign languages: finger curl, spread, rotation". Clean flat diagram, academic style, white background.

AI 圖解

5.3 分層五折交叉驗證

對於第 $k$ 折，訓練集為 $\mathcal{D}_{\text{train}}^k = \bigcup_{j \neq k} \mathcal{D}_j$，測試集為 $\mathcal{D}_{\text{test}}^k = \mathcal{D}_k$。訓練目標為帶標籤平滑和 $L_2$ 正則化的交叉熵損失：

其中 $y^*$ 為真實類別索引，$C = 50$，$\hat{p}_j = \text{softmax}(\hat{y}_j)$。

5.4 滑動窗口資料擴增

每個總長度為 $L$ 的手語序列被分解為多個步距 $s = 5$ 幀的 $T = 30$ 幀窗口，每個原始序列可產生 $\lfloor (L - T) / s \rfloor + 1$ 個訓練樣本。

AI 圖解提示詞 以時序圖展示滑動窗口資料擴增策略：一段完整手語序列（長度 L）如何以步距 $s=5$ 幀、窗口大小 $T=30$ 幀切割為多個重疊訓練樣本，與推論時的窗口策略保持一致。

Timeline diagram showing sliding window data augmentation on white background. Top: a long horizontal bar representing a full sign language sequence of length L frames, with a smooth hand motion gesture curve drawn above it. Below, multiple overlapping rectangular windows of width T=30 sliding right with stride s=5, each window highlighted in a different translucent color (blue, green, orange, purple, teal). Bracket annotations: double-headed arrow labeled "T=30" for window width, single arrow labeled "stride s=5" between window starts. Downward arrows from each window to training sample boxes labeled "Sample 1", "Sample 2", ..., "Sample N = floor((L-T)/s)+1". Key insight note box: "Inference also uses stride=5 overlapping windows → no train/deploy distribution mismatch". Clean flat technical illustration, academic diagram style, white background.

AI 圖解

§6 音樂節拍偵測引擎

6.1 三頻道頻譜分解

音樂節拍偵測流程完全在瀏覽器中使用 Web Audio API 的 OfflineAudioContext 實作。三個並行 IIR 濾波器產生感知上相異的頻率通道：

此多頻段分解防止特定音樂類型的主導頻段獨佔節拍偵測，產生與音樂類型無關的事件排程。

AI 圖解提示詞 以音訊波形圖展示三頻道頻譜分解：全頻訊號如何被低通（≤150 Hz 大鼓）、帶通（~1000 Hz 小鼓）、高通（≥3000 Hz 踩鈸）三個濾波器分離為特性迥異的節拍訊號。

Audio signal processing diagram on white background. Top: a full-spectrum audio waveform in gray labeled "Full audio signal (all frequencies)". Three parallel output waveforms below connected by filter icons: (1) low-pass filter symbol → red waveform with slow wide pulses labeled "Ch.0: Low band ≤150 Hz — Bass drum / sub-bass" with text "captures kick drum beats"; (2) band-pass filter symbol → green waveform with medium-speed transients labeled "Ch.1: Mid band ~1000 Hz — Snare drum / mid percussion"; (3) high-pass filter symbol → blue waveform with rapid sharp spikes labeled "Ch.2: High band ≥3000 Hz — Hi-hat / high-frequency transients". Each waveform visually distinct in temporal density and amplitude. Clean scientific diagram style, labeled with filter specifications, academic illustration, white background.

AI 圖解

6.2 每通道能量起音偵測

對每個通道 $c$，使用寬度 $w = \lfloor 0.05 f_s \rfloor$、步距 $\delta = \lfloor 0.01 f_s \rfloor$ 樣本的滑動窗口擷取 RMS 能量包絡 $E_c[n]$：

包絡被最小-最大正規化至 $\hat{E}_c[n] \in [0, 1]$，滿足 $\hat{E}_c[n] > \tau_c$ 且 $\hat{E}_c[n] > \hat{E}_c[n \pm 1]$ 的局部極大值被擷取為起音事件。

6.3 自適應門限搜尋

門限 $\tau_c$ 由目標每秒節拍密度 $[\text{BPS}_{\min}, \text{BPS}_{\max}] = [0.5, 1.0]$ 的迭代二元搜尋確定：

輸入：Ê_c（正規化能量）、duration（秒數）
輸出：節拍事件列表

τ ← 0.35
for attempt in 1..6:
    events ← {n : Ê_c[n] > τ  AND  Ê_c[n] > Ê_c[n±1]}
    bps    ← |events| / duration
    if   bps < BPS_min :  τ ← τ − 0.08   # 門限太高，降低
    elif bps > BPS_max :  τ ← τ + 0.06   # 門限太低，提高
    else: break
    τ ← clip(τ, 0.05, 0.80)
return events

AI 圖解提示詞 以時序訊號圖展示正規化能量包絡、自適應門限的迭代調整過程（BPS 過高則上調門限、過低則下調），及最終偵測到的節拍起音事件點。

Time-series signal visualization on white background. X-axis "Time (seconds)", Y-axis "Normalized RMS Energy E-hat [0.0 to 1.0]". A smooth orange energy envelope curve with multiple peaks of varying heights at irregular intervals. A horizontal dashed red threshold line labeled "Adaptive threshold τ" with two small annotated arrows: upward arrow "τ + 0.06 if BPS > 1.0 (too dense)" and downward arrow "τ − 0.08 if BPS < 0.5 (too sparse)". Blue filled circles at each local maximum above threshold labeled "onset events". A small iteration counter badge: "Max 6 iterations, τ ∈ [0.05, 0.80]". BPS density annotation: "Final BPS in target range [0.5, 1.0]". Clean data visualization style, scientific plot aesthetic, gray grid lines, academic diagram, white background.

AI 圖解

6.4 節拍合併與間隔補填

最小間距過濾（防止手勢節奏超載）：

間隔補填插值（防止超過 5 秒的遊戲靜止期）：對每個間隔 > 5 秒的連續配對，以 3 秒為間隔插入合成填充事件：

最終事件排程 $\mathcal{B} = \{(t_j, \ell_j)\}_{j=1}^{N_B}$ 提供時間 $t_j$ 和通道識別符 $\ell_j \in \{0, 1, 2\}$，用於炸彈水平位置的空間多樣性。

6.5 基於物理的預測性炸彈生成

設 $y_{\text{start}}$ 為炸彈生成點，$v_{\text{bomb}} = 1.5 \times 60 = 90$ px/s 為終端速度，$H_{\text{bomb}}$ 為炸彈精靈高度。從生成點至地板的飛行時間：

炸彈在絕對時間 $t$ 的垂直位置：

音頻補償偏移 $\delta_{\text{audio}} = 0.08$ 秒修正瀏覽器音頻排程延遲：

AI 圖解提示詞 以遊戲畫面截面示意圖展示物理預測式炸彈生成公式：在節拍時刻 $t_j$ 前 $\tau_{\text{travel}}$ 秒生成炸彈，使其恰好在節拍點落地，並以音頻時鐘錨定消除幀率抖動。

Rhythm game screen cross-section diagram with dark navy blue background and neon colors. Portrait-oriented game canvas showing: a small pixel-art airplane at the top center; a yellow star spawn marker near top labeled "t_spawn = t_j − τ_travel" and "y_start"; a falling bomb pixel sprite mid-screen with a dashed white vertical trajectory arrow pointing downward; a floor line at bottom labeled "y = H − H_bomb, beat time t_j". Below the canvas, a horizontal timeline with two markers: yellow star at left "t_spawn: bomb created" and red explosion at right "t_j: beat hit time", double-headed bracket between labeled "τ_travel". Neon orange equation overlay on canvas: "y(t) = y_start + (t − t_spawn) · v_bomb". A small note: "position anchored to audio currentTime, not frame counter → eliminates drift". Pixel art / game UI aesthetic, bright neon accents on dark background.

AI 圖解

§7 系統整合

7.1 三層式系統架構

AI 圖解

▲ 圖 7.1：TSL-RhythmNet 三層式系統架構 — 瀏覽器層、Python 後端層、雲端服務層

7.2 端到端手勢辨識流程

1. 影格擷取與地標擷取。MediaPipe Holistic 以最高 60 fps 處理每個視訊影格，產生姿態、左手和右手地標。姿態地標建立全局正規化座標系。
2. 72 維特徵擷取。holistic_features.js:extractFrame72 應用肩部錨定正規化、手部內部縮放、選擇性關節點修剪和幾何特徵計算，產生 $\mathbf{x}_t \in \mathbb{R}^{72}$。
3. 循環特徵緩衝區更新。緩衝區 $\mathcal{F} = [\mathbf{x}_{t-29}, \ldots, \mathbf{x}_t]$（FIFO，最多 30 幀）持續維護。連續 $T_{\text{persist}} = 30$ 幀偵測不到手部後清空緩衝區。
4. 能量驗證閘門。僅當 $\bar{E} > 0.03$ 且峰值幀比例 $> 0.15$ 時才進行推論，防止手部靜止期的假陽性。$$E_h(t) = \frac{1}{3}\sum_{d}\text{std}\!\left(\{x_{h,j,d}\}_{j=0}^{10}\right), \quad \bar{E} = \frac{1}{|\mathcal{F}|}\sum_t \frac{E_L(t)+E_R(t)}{2}$$
5. 滑動窗口推論（步距 = 5 幀）。每 5 幀，透過非同步 HTTP POST 將 30 幀緩衝區以 $[30, 72]$ JSON 陣列格式傳送至 localhost:5001/predict。
6. 難度感知 logit 遮蔽。當前難度層以外詞彙項目的 logit 被遮蔽為 $-\infty$，在 argmax 前將有效分類問題從 50 類縮小至 15–20 類。$$\hat{y}_j^{\text{masked}} = \begin{cases} \hat{y}_j & \text{若 label}_j \in \mathcal{V}_{\text{active}} \\ -\infty & \text{其他} \end{cases}$$
7. 近因加權時序表決。推論結果以近因權重 $w_i = 0.5 + \tfrac{i}{M} \cdot 0.5$ 插入佇列 $\mathcal{Q}$（最多 $M=6$）。當標籤 $\ell^*$ 的加權投票份額 $s(\ell^*) > 0.40$ 時，穩定辨識成功。$$s(\ell) = \frac{\sum_{i:\mathcal{Q}_i.\text{label}=\ell} w_i}{\sum_i w_i}$$
8. 遊戲狀態提交。穩定辨識 $\ell^*$ 後，對應炸彈被消除，分數遞增，並啟動 30 幀推論冷卻期以防止重複計數。

AI 圖解提示詞 以瀏覽器介面佈局展示系統端到端運作流程：攝影機影像（含 MediaPipe 骨架疊加）→ 72 維特徵提取 → Flask 推論伺服器 → 遊戲畫面即時更新。

Browser application interface mockup on light gray background. Three side-by-side panels connected by labeled arrows: Left panel "Webcam Feed" showing a person performing a hand sign with green MediaPipe hand skeleton overlay (21 landmark dots and connections on hands). Center panel "HTML5 Canvas Game" showing a dark game screen with falling bomb objects labeled with Chinese characters (謝謝, 飛機, 你好), a pixel airplane sprite at bottom, score display "Score: 1250", heart icons for lives. Right panel "Inference Result" showing "辨識結果: 謝謝 ✓" with a blue confidence bar "87%". Connecting arrows between panels labeled: "① 72D features [30×72]" (left to center), "② HTTP POST /predict" (center to right), "③ label + confidence" (right to center), "④ bomb cleared" (center). Modern flat UI design, technical system diagram style, blue and dark navy color scheme.

AI 圖解

7.3 雙後端容錯機制

ONNX session 透過 loadONNXAsync 非同步載入，不阻塞遊戲初始化。若後端 HTTP 請求失敗，備援路徑靜默切換，確保遊戲在完全離線環境中仍可運行。

7.4 三級詞彙難度系統

7.5 Firebase 雲端排行榜整合

遊戲結束後，系統執行以下步驟：（1）暫停背景音樂；（2）提示玩家輸入名稱；（3）將 {name, score, serverTimestamp()} 寫入 Firestore 集合 leaderboard；（4）發送 orderBy("score","desc").limit(10) 查詢取得全球前十名成績；（5）在 CSS 動畫彈窗中渲染結果。此雲端整合引入了競技社交維度，為反複練習提供外在動機。

§8 實驗結果

8.1 交叉驗證效能

五折標準差僅 0.43% 極為出色，表明無論使用哪 80% 的資料進行訓練，泛化能力均保持一致。此穩定性歸因於貝氏超參數優化、標籤平滑正則化和滑動窗口擴增的共同作用。

AI 圖解提示詞 以學術分組長條圖呈現五折交叉驗證結果：對比每折的準確率（約 90%）與巨觀 F1（約 84–88%），並在均值柱上標示 ±0.43% 標準差誤差棒。

Academic publication quality grouped bar chart on white background. X-axis with six groups: "Fold 1", "Fold 2", "Fold 3", "Fold 4", "Fold 5", "Mean±Std". Y-axis labeled "Performance (%)" ranging from 80% to 100% with gridlines. Two grouped bars per fold: solid blue bars for "Accuracy" with values (90.97, 89.86, 90.94, 90.22, 90.58, 90.51%); hatched orange bars for "Macro F1" with values (84.01, 84.31, 86.57, 87.26, 88.27, 86.08%). Numeric value labels on top of each bar. A horizontal dashed red reference line at 90% labeled "90% accuracy target". Error bars on the rightmost "Mean" bars showing ±0.43% std deviation. Legend in upper left corner. Minimalist academic chart style, no chart junk, white background.

AI 圖解

8.2 各類別分析（第 1 折）

高效能類別（F1 = 1.00）：不客氣、今天（現在）、休息、再見、告訴、可以、幾點、忘記、放學、沒關係、火車、機車、要、計程車、認真、還沒、飛機、高鐵、對不起、有、蘋果。這些類別共同具備清晰、獨特的雙側手形構型或軌跡。

具挑戰性類別（F1 ≈ 0）：有沒有、爸爸、記得。這些案例每折訓練樣本極少（2–3 個），且涉及與視覺相近手語之間的細微手形區別——這是小資料集手語辨識的已知侷限。

8.3 音畫同步精度

在典型瀏覽器條件（穩定 60 fps）下，排程節拍時間與炸彈到達地板幀之間的最大同步誤差為：

此值滿足低於 150 ms 的要求——即節奏感知研究文獻中人類感知節拍-動作耦合「緊密」的門限值。

8.4 端到端系統延遲

57–200 ms 的總延遲遠低於互動式教育應用 500 ms 的響應性門限，且非同步推論設計確保其不阻塞 60 fps 的遊戲渲染循環。

§9 創新設計摘要

§10 結論

TSL-RhythmNet 是一套在手語學習技術與教學兩個維度均達到最先進水準的全棧互動式教育系統。系統的核心創新在四個不同層次上發揮作用：

在表示層，72 維生物力學特徵向量透過肩部錨定全局正規化、手部內部縮放正規化、選擇性關節點修剪，以及三個音韻學動機的幾何描述符，達成多尺度不變性——產生跨平台一致的表示，在丟棄無關位置變異的同時，暴露關鍵手形資訊。

在模型層，CNN-Transformer 混合架構將時序卷積的局部動作敏感性與多頭自注意力的長程時序推理相結合。加法式均值-最大池化聚合、可學習位置編碼，以及貝氏優化正則化共同打造出 303K 參數的模型，在所有 5 折交叉驗證上達到 90.51% 準確率和 86.08% 巨觀 F1——標準差僅 0.43%，展現部署就緒的穩定性。

在同步層，三頻道頻譜起音偵測器結合自適應門限二元搜尋，從任何上傳的音訊檔案產生與音樂類型無關的節拍排程。錨定至 Web Audio 時鐘的基於物理預測性炸彈生成達成低於 100 ms 的同步精度，以工程嚴謹性將音訊訊號轉化為遊戲互動時間軸。

在執行期推論層，重疊滑動窗口推論、近因加權時序表決、能量閘門、難度感知 logit 遮蔽和雙後端容錯共同構成一套對自然手勢變異性、遊戲情境雜訊和基礎設施故障均具強健性的辨識流程。

這些創新共同打造出一套系統，在辨識架構上科學嚴謹、在三級難度漸進上教學合理、並透過音樂驅動的遊戲化引人入勝——這種結合使其在提升台灣手語學習可及性和學習者留存率方面具有獨特優勢。