前端大模型入门：Transformer.js 和 Xenova-引领浏览器端的机器学习变革

除了调用别人的api接口使用transformer技术，你是否想过将大模型在浏览器中运行呢？尤其是WebGPU的出现，性能比WebGL高不少，很多小任务真的不再需要在一个中心运行了。

不少同学买课学python了，但我还是在坚持用js尝试，相信一切都可以用js实现的，下面就介绍下我是如何实现的吧~~

随着人工智能和深度学习的普及，越来越多的应用开始借助强大的预训练模型来处理文本、图像等数据。然而，大多数这类模型需要依赖于云端服务器，用户端必须通过网络调用后端的API，这不仅带来了延迟问题，还可能引发隐私和数据安全的担忧。为了解决这些挑战，Xenova 团队推出了 Transformer.js，一个基于 JavaScript 的库，让开发者可以在浏览器中本地加载和执行预训练模型，摆脱服务器的依赖。

前置知识和准备

javascript 相关的web知识，创建一个html文件，引入库

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>网页大模型</title>
</head>
<body>
  <div id="app">
    <div id="zh">
    </div>
    <div id="en">
    </div>
    <div id="info">
    </div>
  </div>
  <script type="module">
    import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/dist/transformers.min.js";
    // 后续的代码在这里
</script>
</body>
</html>

国内HF模型镜像站（如果有代理可忽略）

javascript 复制代码

env.remoteHost = 'https://hf-mirror.com'

什么是 Transformer.js？

Transformer.js 是 Xenova 团队开发的一个 JavaScript 库，旨在让用户能够在浏览器或 Node.js 环境中运行 Transformer 模型，而不需要依赖于后端服务器。这个库的核心功能是使用 WebAssembly（Wasm）和 WebGPU 等技术，将复杂的深度学习任务本地化执行。

Transformer.js 支持的模型涵盖了 Hugging Face 的 Transformers 模型库，包括 GPT、BERT、T5 等，广泛应用于自然语言处理任务，如文本生成、情感分析、翻译等。

Transformer是一种架构，现在很多模型，包括大语言模型，大都基于此构建，这里就不展开了，感兴趣的可以看相关论文，尤其是Attention is all you need。

Xenova系列

Xenova 的核心目标是让机器学习技术更加普及且易于访问。他们的愿景是通过提供开源工具，让每个人都能在任意设备上高效使用 AI 模型，甚至无需依赖强大的后端服务器。Transformer.js 便是这个愿景的关键实现，用户能够直接在浏览器中使用这些强大的 Transformer 模型。

欢迎pr构建生态，因为它是ONNX Runtime 的web/node端实现，所以PyTorch, TensorFlow, JAX 等构建的模型都可以转化成onnx的，想要构建自己的模型参考下面的github仓库说明xenova/transformers.js: State-of-the-art Machine Learning for the web. Run 🤗 Transformers directly in your browser, with no need for a server! (github.com)https://github.com/xenova/transformers.js

Transformer.js 的主要特点

1. 无后端依赖

Transformer.js 使用户可以在浏览器中本地运行 Transformer 模型，不再依赖服务器端的推理服务。所有的计算都在客户端完成，既减少了延迟，又消除了数据传输的隐私隐患。

2. 模型加载和使用便捷

通过简单的几行代码，开发者可以加载和使用 Hugging Face Transformers 模型。例如，以下代码展示了加载一个中文转英文模型：

javascript 复制代码

// 定义要使用的模型和任务类型 
    const task = "text-classification";
    const model = "Xenova/opus-mt-zh-en";
    const infoEl = document.getElementById('info');
    const pipe = pipeline("text2text-generation", model, {
      progress_callback: d=>{
        infoEl.innerHTML = JSON.stringify(d);
      },
    });

然后我们调用这个定义好的管道

javascript 复制代码

    const zhEl = document.getElementById('zh');
    const enEl = document.getElementById('en');
    const app = document.getElementById('app');
    const start = Date.now();
    async function main() {
      const zh = "你好吗？";
      zhEl.innerHTML = `中文：${zh}`;
      const transfer1 = await pipe;
      const res1 = await transfer1(zh);
      const en = res1[0].generated_text;
      enEl.innerHTML = '英文：' + en;
      infoEl.innerHTML = `耗时：${Date.now() - start}ms`;
    }

    main();

右键html文件，选择打开方式->chrome，首次打开需要等待模型加载，后续就不用了（可以试试别的中文，测试下效果）

3. 跨平台支持 - Web+Nodejs

Transformer.js 在浏览器和 Node.js 环境中都可以无缝运行，适用于各种设备和操作系统。同时，借助 WebAssembly，Transformer.js 可以在大多数现代浏览器中提供原生般的性能表现。

4. 性能优化

通过使用 WebAssembly 和 WebGPU，Transformer.js 能够显著提高模型推理的速度，尤其是在具有高性能图形处理单元（GPU）的设备上。相比传统的 JavaScript 数学库，它能够更高效地执行深度学习模型。

5. 开源与社区支持

Transformer.js 是一个完全开源的项目，任何人都可以参与贡献或者在项目的 GitHub 仓库中提出问题。Xenova 致力于维护活跃的开发者社区，不断优化和扩展该项目。

Transformer.js 的应用场景

由于 Transformer.js 使得模型推理可以完全在客户端完成，因此它非常适合以下应用场景：

1. 隐私保护

在一些敏感应用中，如医疗数据处理或个人隐私数据的分析，用户的数据无需发送到服务器端进行处理，而是直接在本地完成推理，减少数据泄露的风险。

2. 离线应用

许多应用在没有网络连接的情况下仍然需要处理任务，比如离线聊天机器人、离线翻译工具等。Transformer.js 使得这些离线应用的实现变得更加简单和高效。

3. 低延迟交互

通过消除与服务器的往返延迟，Transformer.js 能够提供实时的推理结果。例如，用户可以在网页上直接使用实时的文本生成或情感分析功能，而不会因为网络延迟而影响体验。

4. 教育与研究

学生和研究人员可以使用 Transformer.js 在本地实验机器学习模型，无需租用昂贵的云计算资源，也不必担心学习过程中的数据外泄问题。

Transformer.js 与 TensorFlow.js 的对比

随着浏览器端机器学习技术的不断发展，多个工具库应运而生。Transformer.js 和 TensorFlow.js 是其中两个重要的框架，它们都旨在让开发者能够在浏览器或客户端上运行机器学习模型。虽然二者的目标有相似之处，但在设计思路、使用场景和技术实现上却有显著差异。以下章节将对 Transformer.js 和 TensorFlow.js 进行详细对比，帮助开发者根据具体需求选择适合的工具。

方面	Transformer.js	TensorFlow.js
主要用途	自然语言处理 (NLP) 推理	通用机器学习任务（推理与训练）
支持模型	Transformer 模型（GPT、BERT、T5 等）	各类神经网络模型（CNN、RNN、强化学习等）
推理与训练能力	仅支持推理	支持推理和训练
计算加速	WebAssembly, WebGPU	WebGL, Wasm, WebGPU
生态支持	紧密集成 Hugging Face	丰富的社区与官方支持，支持 TensorFlow 生态
学习曲线	简单易用，适合 NLP 应用	较为复杂，适合广泛的机器学习任务

Transformer.js 更适合专注于 NLP 推理的场景，而 TensorFlow.js 则是一个通用性更强的框架，适合涉及不同领域的机器学习任务以及模型训练的需求。根据具体的项目需求和开发者的熟悉程度，选择合适的工具将帮助更高效地实现目标。

未来发展方向-端云结合

随着浏览器技术的不断进步，如 WebGPU 的广泛应用，Transformer.js 的性能和适用范围将进一步提升。Xenova 计划在未来添加更多预训练模型的支持，并优化其在移动设备等低性能环境下的表现。同时，随着 JavaScript 生态的持续扩展，Transformer.js 有潜力成为构建浏览器端 AI 应用的核心工具之一。

正如我在最新llama3.2小参数版本1B的古董机测试中说的那样，端云结合才是趋势。

结论

Transformer.js 通过让 Transformer 模型直接在浏览器或 Node.js 环境中运行，解决了传统机器学习应用中的许多痛点。无论是出于隐私保护、实时性需求，还是离线应用的需求，Transformer.js 都为开发者提供了新的可能性

后续会出应用类的文章，切记住本文的那一定点内容，后续的大模型进阶，基本上都是基于这个库，也默认你配置了国内镜像源