影片筆記：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 啟動本地伺服器。

1. 主執行緒 (UI) 操作：

• 使用者點擊錄音按鈕。
• Recorder 邏輯啟動，開始錄製音訊 Blob。
• 音訊被切片（Chunk）。
• 使用 FileReader 解碼音訊。
• 透過 postMessage 將切片音訊發送給 Worker。

1. Worker 執行緒 (後台) 操作：

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

1. 結果顯示：

• 主執行緒接收 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，是否支援其他語音辨識模型在瀏覽器端運行？