Transformers.js：让大模型跑进浏览器

掘金安东尼

于 2025-10-27 10:18:52 发布

阅读量473

点赞数 12

CC 4.0 BY-SA版权

分类专栏：字节、阿里、腾讯我都面了：高频面试套路全记录文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Anthony1453/article/details/153961967

字节、阿里、腾讯我都面了：高频面试套路全记录专栏收录该内容

73 篇文章

订阅专栏

一篇让你彻底搞懂 Hugging Face 在前端的“奇迹工程”

一、为什么浏览器也需要大模型？

在 AI 火热的今天，我们已经习惯了在云端调用 ChatGPT、Claude 或文心一言，输入问题、等待回答。但想一想：为什么每次都得依赖服务器？

为什么不能让大模型，直接在浏览器里运行？

这种想法听起来像天方夜谭——毕竟，模型动辄几百兆、上百亿参数，浏览器哪受得了？但 Hugging Face 和一群疯狂的开发者真的把这件事干成了。他们打造了一个前端版本的 Transformers 库——Transformers.js。

它的出现，意味着我们可以：

不依赖 Python；
不搭建后端；
不用 GPU 服务器；
在浏览器里直接跑情感分析、翻译、文本生成，甚至语音识别。

一句话：大模型，从云端走向你的网页。

二、Transformers.js 是什么？

Transformers.js 是 Hugging Face 官方支持的 JavaScript 版 Transformers 库，由社区贡献者 @Xenova 主导开发。

它的核心目标是：

“让任何 Hugging Face 模型都能在浏览器或 Node.js 中直接推理。”

这意味着，无论你在写 React、Vue、Next.js、Vite、Electron，甚至 Chrome 插件，都可以直接加载预训练模型，在本地完成推理，而不必依赖后端 API。

你可以这么写👇：

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

const generator = await pipeline('text-generation', 'Xenova/gpt2');
const output = await generator('Transformers.js 是');
console.log(output[0].generated_text);

没看错，这行代码会在浏览器本地生成文本，就像 ChatGPT 一样。
模型会自动下载、缓存、推理，整个过程不需要任何服务器。

三、幕后技术：它是怎么做到的？

那么问题来了：JavaScript 怎么能扛得住大模型的推理计算？

秘密就在于两件事：

1. WebAssembly & WebGPU：浏览器的算力革命

过去浏览器运行 AI 几乎不可能，因为 JavaScript 解释执行太慢。
而现在，多亏了 WebAssembly (WASM) 和 WebGPU，浏览器也能像“轻量服务器”一样跑模型。

WebAssembly：一种接近原生性能的二进制格式，让 C/C++/Rust 编译到浏览器；
WebGPU：下一代浏览器 GPU API，可调度显卡并行计算。

Transformers.js 正是基于这两者构建，使用 ONNX Runtime Web 作为底层推理引擎。
这意味着模型计算不再由 JS 完成，而是由 GPU / CPU 直接加速完成。

2. 模型转换与压缩

Hugging Face Hub 上的模型一般是 PyTorch / TensorFlow 格式，而浏览器无法直接读。
于是 Transformers.js 使用工具链将模型转换为 ONNX 格式，并进一步量化（减少参数精度，如 FP32 → INT8），以降低模型体积与内存占用。

Mermaid 图可以帮你理解整个流程 👇：

graph TD
  A[Hugging Face 模型] --> B[转换为 ONNX]
  B --> C[部署到 Hub / CDN]
  C --> D[Transformers.js 加载模型]
  D --> E[ONNX Runtime Web 推理]
  E --> F[WebGPU / WASM 加速计算]
  F --> G[浏览器显示结果]

整个架构像极了一条“模型分发管线”：

后端负责模型准备；
前端负责下载与推理；
用户只看到丝滑的智能响应。

四、为什么它重要：前端的 AI 自由

传统上，AI 属于后端：训练、部署、推理都在服务器。
但 Transformers.js 的出现，让“智能”第一次进入了 纯前端世界。

这背后有三个关键意义：

（1）彻底摆脱后端

无论是学生、独立开发者，还是小团队，都可以在不搭建服务器的前提下完成 AI 应用。

比如：

用 Vue + Transformers.js 做一个网页翻译工具；
用 React + Transformers.js 构建离线 Chatbot；
用 Electron 打包成桌面端 AI 应用。

这些应用都可以零成本上线，不依赖任何 OpenAI API。

（2）隐私友好：数据不出浏览器

在金融、医疗、教育等领域，数据隐私是最大痛点。
通过本地推理，文本、语音、图片都不会上传到服务器。

这就让：

浏览器成为“安全的智能体运行沙盒”；
用户数据得到最大限度保护；
企业级场景也能放心部署。

（3）激发 Web AI 的创造力

Web 开发者不再是“AI 使用者”，而是“AI 创造者”。
借助 Transformers.js，我们可以在网页上实现：

AI 写作；
实时语音识别；
图片理解；
视频字幕生成；
甚至 LangChain.js 级的智能体流程。

AI 开发门槛，从此被前端打穿。

五、如何上手：五分钟跑一个模型

Transformers.js 的使用门槛非常低，下面是一个最小可运行的例子。

💡 例子：文本情感分析

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

  const classifier = await pipeline('sentiment-analysis');
  const result = await classifier('I love Transformers.js!');
  console.log(result);
</script>

运行后输出：

[ { label: 'POSITIVE', score: 0.999 } ]

就是这么简单。整个过程发生在浏览器里。

💬 例子：文本生成（GPT2）

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

const generator = await pipeline('text-generation', 'Xenova/gpt2');
const result = await generator('在未来，浏览器将');
console.log(result[0].generated_text);

可以生成一整段文本。
虽然性能不如 GPT-4，但对前端来说，这已经是奇迹。

🎨 例子：图像识别（Image Classification）

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

const classifier = await pipeline('image-classification', 'Xenova/vit-base-patch16-224');
const output = await classifier('cat.jpg');
console.log(output);

你甚至可以用 <input type="file"> 上传图片、直接识别。

六、性能表现：真的快吗？

性能取决于设备、浏览器和模型大小。
在 MacBook M2 或高端 PC 上，使用 WebGPU 推理一个 BERT 模型大约只需 100ms–200ms。

若使用 WebAssembly 模式（CPU），则耗时约 1s–3s。
虽然比不上云端 GPU，但在多数交互式场景中已经足够。

一个简化对比表如下：

模式	平台	平均延迟（BERT-base）	是否离线
WebGPU	Chrome / Edge	~150ms	✅
WebAssembly	Safari / Firefox	~2s	✅
OpenAI API	云端	~80ms	❌
Python Transformers	本地 GPU	~50ms	✅

可以看出，Transformers.js 让“可接受的智能体验”在本地变得可行。

七、生态系统与兼容性

Transformers.js 并不是孤立的项目，它正成为 Hugging Face 全家桶的重要组成部分：

生态模块	作用
🤗 Transformers	模型训练、导出、部署
🧩 Transformers.js	浏览器/Node 端推理
🪶 ONNX Runtime Web	运行引擎
🖥 WebGPU / WebAssembly	硬件加速层
☁️ Hugging Face Hub	模型下载与缓存中心

社区还在积极扩展模型支持：

GPT2 / DistilBERT / Whisper / CLIP / T5 / BART / ViT 等；
正在测试 Whisper（语音转文本）和 CLIP（图文对齐）等多模态模型；
支持量化模型以减少加载时间。

换句话说：

Transformers.js 不是玩具，而是浏览器端真正的 AI 引擎。

八、应用案例：从工具到智能体

让我们看看社区的一些创新应用。

1️⃣ Chatbot：前端自带“小型 ChatGPT”

开发者 @Xenova 的 Demo 展示了一个纯前端的 GPT 聊天机器人。
它基于 GPT2，在本地推理文本，无需 API Key。
虽然生成内容较短，但延迟低、隐私安全，体验极佳。

2️⃣ 网页 AI 助手：浏览即问

结合 LangChain.js 或 MCP 协议，可以让模型直接与网页 DOM 交互。
想象一下，你在看一篇论文时，浏览器侧边就有一个本地 AI 帮你解释术语、总结段落。

这就是 浏览器智能体（Browser Agent） 的雏形。

3️⃣ 本地语音识别 & 翻译

通过加载 Whisper 模型：

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

可以实现纯前端的语音转文本功能。
再配合 speechSynthesis 或 TTS 模型，就能完成“听说读写”闭环。