使用Transformers.js在瀏覽器中實現影像與語音的多模態AI

在本文中，您將學習如何構建完全在瀏覽器中執行的多模態AI功能——包括影像分類、影像描述和語音轉錄——使用Transformers.js實現，無需伺服器、API金鑰，且資料不會離開使用者裝置。

大多數瀏覽器AI教程都專注於文本，因為這是一個自然的起點，但使用者實際想要構建的應用很少只涉及文本。使用者會拍攝照片、錄製語音筆記、上傳截圖。資料是多模態的，AI也應如此。

Transformers.js原生支援多模態。它支援計算機視覺（影像分類、目標檢測、分割）、音訊（自動語音識別、音訊分類、文本轉語音）以及多模態任務，所有這些都在瀏覽器中本地執行，無需伺服器、API金鑰，資料不會離開使用者裝置。

本教程按順序構建三個功能：影像分類、影像描述和語音轉錄。每個功能都是一個獨立的HTML檔案，可以在瀏覽器中開啟。最後一部分將這三個功能整合到一個統一的多模態媒體分析器中。

所需環境

• 現代瀏覽器：Chrome 109+、Edge 109+或Firefox 90+。這些版本支援ES模組和WebAssembly，這是Transformers.js所必需的。
• 本地Web伺服器：瀏覽器安全策略阻止從file:// URL匯入ES模組——直接雙擊開啟HTML檔案將無法工作。您需要透過HTTP提供檔案。

您不需要Node.js、npm或任何構建工具。CDN匯入即可處理庫檔案。

啟動本地伺服器

選擇您已安裝的任一方法：

• Python：python3 -m http.server 8080
• Node.js：npx serve .
• VS Code：安裝Live Server擴充套件，然後右鍵單擊任何HTML檔案並選擇“Open with Live Server”

伺服器執行後，在瀏覽器中開啟http://localhost:8080。

專案結構

建立一個專案資料夾。每個任務對應一個HTML檔案：

• multimodal-demo/

- image-classifier.html - image-captioner.html - speech-transcriber.html - media-analyzer.html

模型與下載大小

每個模型在首次執行時下載一次並快取在瀏覽器中。後續載入即時而離線可用。首次執行預估下載：

• 影像分類：Xenova/vit-base-patch16-224，約88 MB
• 影像描述：Xenova/vit-gpt2-image-captioning，約246 MB
• 語音轉錄：Xenova/whisper-tiny.en，約78 MB

組合應用載入所有模型，首次執行約400 MB。每個模型的進度指示器是必不可少的使用者體驗。

任務1：影像分類

影像分類將輸入影像分配到固定類別集合。此處使用ViT-Base/16模型，它是Google在ImageNet-21k上訓練並在ImageNet-1k上微調的Vision Transformer，已轉換為ONNX格式用於瀏覽器。它可將影像分類為1000個ImageNet類別，並返回帶置信度分數的排名列表。

輸出格式示例：

[
  { label: 'golden retriever', score: 0.9421 },
  { label: 'Labrador retriever', score: 0.0312 },
  { label: 'Sussex spaniel', score: 0.0098 },
  // ... top_k results total
]

每個物件包含label字串（ImageNet類名）和0到1之間的score浮點數。預設返回5個結果，可透過top_k引數調整。

程式碼示例（簡化）：

import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';
let classifier;
pipeline('image-classification', 'Xenova/vit-base-patch16-224', {
  dtype: 'q8',
  progress_callback: (p) => { /* 更新進度 */ }
}).then(pipe => { classifier = pipe; });
async function classifyImage(dataUrl) {
  const results = await classifier(dataUrl, { top_k: 5 });
  // 顯示結果
}

任務2：影像描述

影像描述生成描述影像內容的自然語句。與分類不同，它生成自由文本，更具描述性和靈活性。模型為Xenova/vit-gpt2-image-captioning，使用Vision Transformer編碼器與GPT-2解碼器組合。ONNX版本約246 MB。

輸出格式：

[{ generated_text: 'a dog is playing on a tennis court' }]

任務3：語音轉錄

使用OpenAI的Whisper模型（whisper-tiny.en）實現瀏覽器內語音轉錄。透過Web Audio API捕獲麥克風輸入。

多模態媒體分析器

整合上述三個功能，提供統一儀表板，並行載入模型以加速。

總之，本教程提供了在瀏覽器中實現客戶端多模態AI的完整指南，強調了隱私保護和離線能力。