7个步骤掌握Transformers.js：在浏览器中构建AI应用的终极指南

Transformers.js是一个突破性的机器学习库，让开发者能够直接在浏览器中运行最先进的AI模型，无需依赖后端服务器。本文将通过7个简单步骤，带你从零开始掌握这个强大工具，快速构建属于自己的Web AI应用。## 为什么选择在浏览器中运行AI模型？传统的AI应用通常需要将数据发送到远程服务器进行处理，这不仅会产生网络延迟，还可能引发隐私 concerns。Transformers.j

余媛奕Lowell

1040人浏览 · 2026-02-27 02:49:18

余媛奕Lowell · 2026-02-27 02:49:18 发布

7个步骤掌握Transformers.js：在浏览器中构建AI应用的终极指南

【免费下载链接】transformers.js State-of-the-art Machine Learning for the web. Run 🤗 Transformers directly in your browser, with no need for a server! 项目地址: https://gitcode.com/GitHub_Trending/tr/transformers.js

Transformers.js是一个突破性的机器学习库，让开发者能够直接在浏览器中运行最先进的AI模型，无需依赖后端服务器。本文将通过7个简单步骤，带你从零开始掌握这个强大工具，快速构建属于自己的Web AI应用。

为什么选择在浏览器中运行AI模型？

传统的AI应用通常需要将数据发送到远程服务器进行处理，这不仅会产生网络延迟，还可能引发隐私 concerns。Transformers.js通过在本地浏览器中运行模型，完美解决了这些问题：

即时响应：无需等待网络传输，模型推理在本地完成
隐私保护：用户数据不会离开设备
离线可用：即使没有网络连接也能正常工作
降低服务器成本：无需维护昂贵的GPU服务器

步骤1：环境准备与安装

首先，确保你的开发环境满足以下要求：

Node.js 14.0.0或更高版本
npm或yarn包管理器
现代浏览器（Chrome 90+、Firefox 89+、Safari 14.1+）

通过以下命令安装Transformers.js：

# 使用npm
npm install @xenova/transformers

# 或使用yarn
yarn add @xenova/transformers

对于纯前端项目，也可以直接通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"></script>

步骤2：第一个Transformers.js应用

创建一个简单的文本分类应用，只需几行代码：

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

// 创建文本分类管道
const classifier = await pipeline('text-classification');

// 使用模型进行预测
const result = await classifier('I love using Transformers.js in my projects!');
console.log(result);

这段代码会自动下载预训练模型并在浏览器中运行，输出文本的情感分析结果。

步骤3：支持的模型与任务

Transformers.js支持多种主流AI任务，包括：

自然语言处理：文本分类、命名实体识别、问答系统、文本生成
计算机视觉：图像分类、目标检测、图像分割
音频处理：语音识别、音频分类

你可以在src/models/目录下查看所有支持的模型架构，从BERT、GPT到ViT、CLIP等应有尽有。

步骤4：高级配置与优化

为了获得更好的性能和用户体验，可以进行以下优化：

模型选择：根据需求选择合适大小的模型，平衡性能和速度
量化处理：使用INT8量化模型减小体积，加快推理速度
预加载模型：在应用启动时预加载常用模型
WebGPU加速：启用WebGPU支持以获得硬件加速

// 使用WebGPU加速和INT8量化
const pipe = await pipeline('text-generation', 'Xenova/gpt2', {
  device: 'webgpu',
  quantized: true
});

步骤5：框架集成

Transformers.js可以与主流前端框架无缝集成：

React集成

import { useRef, useEffect, useState } from 'react';
import { pipeline } from '@xenova/transformers';

function TextGenerator() {
  const [generator, setGenerator] = useState(null);
  const [result, setResult] = useState('');
  const inputRef = useRef('');

  useEffect(() => {
    // 组件挂载时加载模型
    pipeline('text-generation', 'Xenova/distilgpt2').then(setGenerator);
  }, []);

  const generateText = async () => {
    if (!generator) return;
    const output = await generator(inputRef.current, { max_new_tokens: 50 });
    setResult(output[0].generated_text);
  };

  return (
    <div>
      <input ref={inputRef} placeholder="输入提示词..." />
      <button onClick={generateText}>生成文本</button>
      <p>{result}</p>
    </div>
  );
}

更多框架集成示例可以在docs/source/tutorials/目录中找到，包括Next.js、Electron等。