# 影片筆記：How to use Real Time In-Browser Transcription with WebGPU Whisper and Transformer.js


<!-- VIDEONOTE_PUBLICATION_WARNINGS_BEGIN -->
## ⚠️ 可先使用，仍有待修正項目

本筆記已完成可閱讀的逐字稿與時間跳轉；下列為待處理問題，建議播放原片確認。

- 待修正：逐字稿全文快速校讀未完成（已保留自動字幕/原始逐字稿並繼續生成筆記。；未完成的全文速讀項目可在精進模式回聽確認。）

<!-- VIDEONOTE_PUBLICATION_WARNINGS_END -->

## 一句話總結

本影片演示如何使用 **WebGPU** 與 **Transformers.js** (V3 Branch) 在瀏覽器端實現即時語音辨識，透過 **Whisper Base** 模型與 **Web Worker** 架構，在不依賴後端伺服器的情況下，於客戶端完成音訊切片、模型推理與即時轉錄。

## 核心重點

*   **瀏覽器端即時轉錄**：利用 WebGPU 加速與 Transformers.js 庫，直接在瀏覽器內運行 Whisper 模型，無需將音訊傳送至後端（如 OpenAI API）。
*   **技術堆疊**：
    *   **WebGPU**：提供硬體加速。
    *   **Transformers.js (V3)**：實驗性分支，支援瀏覽器端的模型運行。
    *   **Whisper Base**：7300 萬參數的語音辨識模型，轉換為 ONNX 格式以適應瀏覽器環境。
    *   **Web Worker**：將模型載入與推理邏輯移至背景執行緒，避免阻塞主 UI 執行緒。
*   **效能表現**：模型載入速度快（約 4MB），透過 Fetch 與 WASM 技術實現快速初始化。
*   **架構設計**：
    *   **主執行緒 (Main Thread)**：負責 UI 渲染、錄音控制（開始/停止）、音訊切片（Chunking）及透過 `postMessage` 傳遞資料。
    *   **Worker 執行緒**：負責載入模型、建立 Pipeline、執行推理（Generate）、處理 Tokenizer 與串流輸出（Streamer），並回傳轉錄結果與效能指標（TPS、Token 數量）。

## 詳細大綱

### 1. 演示與概念介紹
*   **歡迎與主題**：介紹如何在瀏覽器內實現即時語音辨識（Real-time in-browser speech recognition）。
*   **技術優勢**：
    *   無需後端呼叫，避免依賴 OpenAI 或其他需後端支援的閉源/開源模型。
    *   應用場景：聊天系統中整合語音輸入。
*   **Hugging Face Space 演示**：
    *   展示 Whisper WebGPU 範例。
    *   使用 Whisper Base 模型（73 million parameter speech recognition model）。
    *   結合 ONNX 與 Transformers.js。
    *   即時顯示音訊視覺化與轉錄文字。
    *   效能觀察：Fetch 與 WASM 載入速度極快（約 4MB）。

### 2. 程式碼結構與環境設置
*   **倉庫位置**：進入 Transformers.js 倉庫（Repo）。
*   **版本要求**：必須使用 **V3 Branch**（實驗性，下一版本）。
*   **本地運行步驟**：
    *   路徑：`examples` -> `web GPU` -> `whisper`。
    *   指令：執行 `npm install` 後，運行 `npm run Dev`。
    *   透過 Localhost 啟動開發伺服器。

### 3. 核心檔案邏輯分析
*   **App 檔案 (`app.js`)**：主要入口點。
*   **Worker 檔案 (`worker.js`)**：
    *   負責 Transformers.js 的核心邏輯。
    *   載入模型並透過 `postMessage` 與主執行緒通訊。
    *   監聽事件類型並傳遞資料。
*   **Recorder 邏輯（主執行緒）**：
    *   控制開始/停止錄音。
    *   將音訊 Blob 切片（Chunk）。
    *   使用 `FileReader` 讀取並解碼音訊。
    *   切片後透過 `postMessage` 發送給 Worker 進行即時轉錄。
*   **HTML**：負責介面顯示。

### 4. Worker 內部運作機制
*   **載入階段**：
    *   匯入模組：`Transformers`、`AutoTokenizer`、`AutoProcessor`、`Whisper`、`TextStreamer`、`pipeline`。
    *   建立 `Pipeline` 類別與 `instance`。
    *   設定模型 ID、Tokenizer、Processor。
    *   設定 `dtype` 與 `device: webGPU`。
    *   建立 Git instance（註：逐字稿用詞，疑點見下文）。
*   **載入函數與狀態管理**：
    *   處理進度條訊息。
    *   監聽 `generate` 函數。
    *   檢查處理狀態（`processing`），若未處理則設為 `True`。
    *   發送 `start` 狀態訊息。
*   **生成與串流處理 (`generate`)**：
    *   獲取 Tokenizer、Processor 與 Model instance。
    *   回呼函數（Callback）：處理 `postMessage` 的 `update` 訊息，提供 TPS、Token 數量與輸出。
    *   Streamer：處理音訊輸入，透過 Processor 處理。
    *   基於模型與 `generate` 進行轉錄。
    *   傳遞相同輸入與語言設定，串流輸出事件。
    *   Tokenizer 顯示右下角 Token 數量。
    *   發送完成文字區塊。
*   **訊息傳遞循環**：
    *   `onmessage` 接收 Worker 回傳的 TPS 與訊息。
    *   `on ready` 傳遞更新後的文字資訊。
    *   **流程總結**：音訊切片 -> 模型處理 -> 轉錄生成 -> Tokenizer -> 串流回傳 -> 更新 UI。

## 工具 / 模型 / 名詞整理

*   **Nning IO**：影片頻道名稱（逐字稿聽寫，疑點見下文）。
*   **JD**：講者名稱。
*   **Hugging Face Space**：演示平台。
*   **Whisper WebGPU**：演示專案名稱。
*   **Whisper Base**：模型名稱，73 million parameter speech recognition model。
*   **ONNX**：模型格式。
*   **Transformer JS / Transformers.js**：JavaScript 版本的 Hugging Face Transformers 庫。
*   **WASM**：WebAssembly，用於提升瀏覽器端效能。
*   **Open AI**：提及作為需後端呼叫的閉源模型範例。
*   **Cursor**：開發工具。
*   **Git**：版本控制工具（逐字稿提及 "git instance"，疑點見下文）。
*   **NPM**：套件管理工具。
*   **Web Worker**：瀏覽器背景執行緒技術。
*   **postMessage**：Worker 與主執行緒通訊的 API。
*   **Pipeline**：Transformers.js 中的高階抽象，用於簡化模型推理流程。
*   **Tokenizer**：將文字轉換為 Token 的組件。
*   **Processor**：處理音訊輸入的組件。
*   **Streamer**：處理串流輸出的組件。
*   **TPS**：Tokens Per Second，效能指標。

## 操作流程整理

1.  **環境準備**：
    *   克隆或進入 Transformers.js 倉庫。
    *   切換至 **V3 Branch**。
    *   進入 `examples/web GPU/whisper` 目錄。
    *   執行 `npm install` 安裝依賴。
    *   執行 `npm run Dev` 啟動本地伺服器。

2.  **主執行緒 (UI) 操作**：
    *   使用者點擊錄音按鈕。
    *   `Recorder` 邏輯啟動，開始錄製音訊 Blob。
    *   音訊被切片（Chunk）。
    *   使用 `FileReader` 解碼音訊。
    *   透過 `postMessage` 將切片音訊發送給 Worker。

3.  **Worker 執行緒 (後台) 操作**：
    *   **初始化**：匯入必要模組，建立 Pipeline，設定 `device: webGPU` 與 `dtype`。
    *   **載入模型**：下載並載入 Whisper Base 模型（ONNX 格式）。
    *   **接收音訊**：監聽來自主執行緒的音訊資料。
    *   **推理處理**：
        *   使用 Processor 處理音訊輸入。
        *   呼叫 `generate` 函數進行轉錄。
        *   使用 Streamer 處理串流輸出。
    *   **狀態回報**：
        *   計算並回報 TPS 與 Token 數量。
        *   透過 `postMessage` 將轉錄文字與狀態更新發送回主執行緒。

4.  **結果顯示**：
    *   主執行緒接收 Worker 回傳的文字。
    *   更新 UI 顯示即時轉錄內容。
    *   顯示效能指標（TPS、Token 數量）。

## 值得注意的限制或風險

*   **版本依賴**：需使用 Transformers.js 的 **V3 Branch**（實驗性版本），穩定性可能較低。
*   **硬體要求**：依賴 **WebGPU**，需瀏覽器與硬體支援 WebGPU 技術。
*   **模型大小**：雖為 Base 模型（73 million parameter），但仍需下載約 4MB 的模型檔案，首次載入需時間。
*   **瀏覽器相容性**：WebGPU 與特定瀏覽器 API 的相容性可能影響功能運作。
*   **音訊切片策略**：即時轉錄依賴音訊切片（Chunking），切片大小與頻率可能影響轉錄準確性與延遲。

## 逐字稿辨識疑點

*   **Nning IO**：逐字稿開頭為 "hey everyone welcome to nning IO"，疑為頻道名稱聽寫錯誤，需查證正確頻道名稱。
*   **whisper webGPO**：逐字稿中出現 "webGPO"，疑為 "WebGPU" 之聽寫錯誤。
*   **speech recognition mod model**：重複單字 "mod model"，疑為口誤或聽寫錯誤。
*   **audio audio visualizer**：重複單字 "audio"，疑為口誤。
*   **addpunctuation**：逐字稿寫為 "addpunctuation"，疑為 "add punctuation" 之連寫或聽寫錯誤。
*   **token count downhere**：語意稍顯模糊，指代畫面下方的 token 計數。
*   **wasm tab**：指瀏覽器開發者工具中的 WASM 標籤頁。
*   **V3 Branch**：指 Transformers.js 的分支版本。
*   **git instance**：逐字稿中說 "our git instance has been established"，在程式碼上下文通常指 "pipeline instance" 或 "model instance"，"git" 疑為聽寫錯誤。
*   **firsthing**：逐字稿寫為 "firsthing"，疑為 "first thing" 之聽寫錯誤。
*   **AO audio**：逐字稿寫為 "AO audio"，疑為 "audio" 之聽寫錯誤或口誤。
*   **transcription BAS**：逐字稿寫為 "transcription BAS"，疑為 "transcription based" 之聽寫錯誤。
*   **e're**：逐字稿寫為 "e're actually passing"，疑為 "we're" 之聽寫錯誤。
*   **hat's being updated**：逐字稿寫為 "hat's being updated"，疑為 "that's" 之聽寫錯誤。
*   **after after it passes passes**：重複單字，疑為口誤。
*   **happy nerding**：逐字稿結尾用語，疑為頻道或社群特定用語。

## 可延伸追問

*   WebGPU 在不同瀏覽器（Chrome, Firefox, Safari）中的支援程度與效能差異為何？
*   Whisper Base 模型在瀏覽器端的轉錄準確率與伺服器端相比如何？
*   如何優化音訊切片（Chunking）策略以平衡延遲與準確性？
*   Transformers.js V3 Branch 的穩定性與未來版本規劃為何？
*   除了 Whisper，是否支援其他語音辨識模型在瀏覽器端運行？