Transformers.js：在浏览器里跑 AI 模型，不需要服务器

yoso
6 阅读6分钟

Transformers.js：在浏览器里跑 AI 模型，不需要服务器

前言

你有没有想过，NLP、图像识别、语音转文字这些"重量级"AI 能力，能直接在浏览器里跑，完全不需要后端服务器？

Hugging Face 推出的 Transformers.js 就做到了这件事。它将 Python 生态中最流行的 transformers 库搬到了 JavaScript 世界，让你用几行代码就能在前端调用上千个预训练模型，而且数据从不离开用户的设备。

目前项目在 GitHub 上已经获得 15,700+ Star，是浏览器端 AI 推理的事实标准。

一、Transformers.js 是什么？

简单来说：Transformers.js = Hugging Face Transformers 的 JavaScript 版本。

它的核心设计理念是与 Python 版 API 保持一致，让熟悉 Python 生态的开发者可以无缝迁移。底层使用 ONNX Runtime（WebAssembly / WebGPU）作为推理引擎，模型从 Hugging Face Hub 自动下载并缓存。

Python 版本                          JavaScript 版本
─────────                           ──────────────
from transformers import pipeline    import { pipeline } from '@huggingface/transformers'
pipe = pipeline('sentiment-analysis') const pipe = await pipeline('sentiment-analysis')
pipe('I love this!')                 await pipe('I love this!')

核心特性：

  • 浏览器/Node.js/Bun/Deno/Electron 全平台支持
  • 1,000+ 预训练模型，开箱即用
  • 支持 WebGPU GPU 加速（v4）
  • 内置分词器、图像处理器、音频处理器
  • 支持 fp32 / fp16 / q8 / q4 多种量化精度
  • 首次下载后自动缓存，支持完全离线运行

二、它能做什么？

Transformers.js 覆盖了 NLP、计算机视觉、语音、多模态 四大领域，支持 25+ 种任务类型。

自然语言处理（NLP）

任务说明典型场景
文本分类 / 情感分析判断文本情绪、分类评论分析、内容审核
命名实体识别（NER）提取人名、地名、组织名合同解析、信息抽取
问答系统给定上下文回答问题智能客服、文档搜索
文本生成GPT 式文本续写写作辅助、代码补全
摘要生成长文本压缩新闻摘要、会议纪要
翻译多语言互译国际化工具
零样本分类无需训练即可分类灵活的内容标签系统
文本嵌入生成语义向量RAG、语义搜索

计算机视觉

任务说明典型场景
图像分类识别图片内容相册自动整理
目标检测定位图中物体安防、零售分析
图像分割像素级语义分割背景移除、抠图
深度估计预测图像深度信息3D 重建、AR
背景移除自动去除背景电商产品图处理

语音 & 音频

任务说明典型场景
语音识别（ASR）语音转文字（Whisper）会议记录、字幕生成
音频分类识别声音类型环境音检测
文本转语音（TTS）文字合成语音无障碍阅读、语音助手

多模态

任务说明
文档问答基于文档图片回答问题
图片描述自动生成图片文字描述
零样本目标检测用自然语言描述来检测物体

支持的模型架构超过 100+，包括：LLaMA、Mistral、Qwen、Gemma、Phi、Whisper、CLIP、SAM、ViT、BERT、T5 等主流模型。

三、快速上手

安装

npm install @huggingface/transformers

或者直接用 CDN（无需构建工具）：

<script type="module">
  import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.0.0';
</script>

示例 1：情感分析

import { pipeline } from '@huggingface/transformers';

const classifier = await pipeline('sentiment-analysis');
const result = await classifier('这个产品真的太好用了！');

console.log(result);
// [{ label: 'POSITIVE', score: 0.9998 }]

示例 2：语音转文字（Whisper）

const transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-small');
const result = await transcriber('audio.mp3');

console.log(result.text);
// "大家好，欢迎来到今天的分享..."

示例 3：图像分类

const classifier = await pipeline('image-classification');
const result = await classifier('https://example.com/cat.jpg');

console.log(result);
// [{ label: 'tiger cat', score: 0.867 }]

示例 4：文本嵌入（适合做 RAG）

const extractor = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2');
const embeddings = await extractor('这是一段需要向量化的文本', {
  pooling: 'mean',
  normalize: true
});

console.log(embeddings.dims); // [1, 384]

示例 5：开启 WebGPU 加速

const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
  device: 'webgpu',  // 使用 GPU 加速
  dtype: 'q4',       // 4-bit 量化，最小体积
});

四、技术架构

┌──────────────────────────────────┐
│  你的 JavaScript 代码             │
│  pipeline('task', 'model')       │
├──────────────────────────────────┤
│  Transformers.js                 │
│  ├─ 分词器 (Tokenizer)           │
│  ├─ 图像/音频处理器               │
│  └─ 后处理 (PostProcessor)       │
├──────────────────────────────────┤
│  ONNX Runtime                    │
│  ├─ WASM 后端 (CPU, 兼容性最好)   │
│  └─ WebGPU 后端 (GPU, 速度更快)   │
├──────────────────────────────────┤
│  Hugging Face Hub                │
│  (自动下载 + 本地缓存 ONNX 模型)  │
└──────────────────────────────────┘

关键技术点：

  1. ONNX 格式：模型通过 Hugging Face Optimum 从 PyTorch/TF/JAX 转换为 ONNX，实现跨平台推理
  2. 量化策略：q4 比 fp32 体积小 8 倍，适合浏览器；q8 是 WASM 默认精度，平衡质量和性能
  3. WebGPU（v4 新特性）：用 C++ 重写的运行时，BERT 类模型推理速度提升 4 倍
  4. 大模型支持：v4 已测试 20B 参数模型（q4f16），在 M4 Pro Max 上达到 ~60 tokens/s

五、v4 版本重大更新

2025 年 3 月发布的 v4.0.0 是一次质的飞跃：

特性说明
WebGPU 运行时重写与 ONNX Runtime 团队合作，C++ 实现
200+ 模型架构新增 Mamba、MoE、MLA 等独占架构
ModelRegistry API查询缓存状态、下载大小、可用精度
WASM 离线缓存env.useWasmCache = true 实现完全离线
独立分词器包@huggingface/tokenizers，仅 8.8kB
构建优化迁移至 esbuild，构建时间从 2s 降至 200ms
import { ModelRegistry } from '@huggingface/transformers';

// 检查模型是否已缓存
const cached = await ModelRegistry.is_pipeline_cached(
  'feature-extraction',
  'onnx-community/all-MiniLM-L6-v2-ONNX',
  { dtype: 'fp32' }
);

// 查看可用量化精度
const dtypes = await ModelRegistry.get_available_dtypes('onnx-community/all-MiniLM-L6-v2-ONNX');
// ['fp32', 'fp16', 'q4', 'q4f16']

六、与 TensorFlow.js 对比

维度Transformers.jsTensorFlow.js
模型生态1,000+ HF Hub 模型TF Hub 模型
API 设计pipeline 高级 API底层 Tensor API
预处理内置分词器/处理器需手动处理
量化fp32/fp16/q8/q4 开箱即用有限支持
WebGPU完整支持实验性
学习曲线低（熟悉 HF 生态即可）中（需了解 TF 概念）
适用场景NLP/视觉/语音全栈自定义训练 + 推理

总结：如果你的需求是"快速在前端用上预训练模型"，Transformers.js 是更好的选择；如果需要在浏览器里训练模型，TensorFlow.js 更合适。

七、实际应用场景

1. 隐私优先的 AI 功能

  • 浏览器端情感分析、内容审核，数据不出设备
  • 医疗、法律等敏感领域的本地 AI 辅助

2. 离线优先的应用

  • PWA 离线语音转文字
  • 边缘设备上的图像识别

3. 降低服务端成本

  • 把 AI 推理从服务器转移到客户端
  • 不需要 GPU 服务器，省钱省心

4. 快速原型验证

  • 几行代码验证模型效果，不用搭 Python 环境
  • 前端工程师也能玩转 AI

5. Electron / 桌面应用

  • 桌面端本地 AI 能力（文档分析、语音助手）

八、上手建议

  1. 从 pipeline API 开始，不要一上来就研究底层
  2. 优先使用量化模型（q8 或 q4），浏览器场景不需要 fp32
  3. 开启 WebGPU（如果目标用户用 Chrome），性能提升显著
  4. 关注 onnx-community，这是 HF 社区维护的 ONNX 模型集合，v4 优化过的模型都在这里
  5. 参考官方示例：transformers.js-examples 有 21+ 个完整 demo

总结

Transformers.js 把原本只能在 Python + GPU 服务器上跑的 AI 能力，带到了每一个浏览器标签页里。v4 版本在性能和模型支持上的飞跃，让它从"能用"变成了"好用"。

如果你是前端开发者，想给应用加上 AI 能力又不想维护后端 AI 服务，Transformers.js 是目前最成熟的选择。

GitHub: github.com/huggingface/transformers.js 文档: huggingface.co/docs/transformers.js NPM: npm install @huggingface/transformers

avatar
文章
阅读
粉丝