使用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的完整指南，強調了隱私保護和離線能力。