使用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的完整指南，强调了隐私保护和离线能力。