前端大模型入门：Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用别人的api接口使用transformer技术，你是否想过将大模型在浏览器中运行呢？尤其是WebGPU的出现，性能比WebGL高不少，很多小任务真的不再需要在一个中心运行了。
不少同学买课学python了，但我还是在坚持用js尝试，相信一切都可以用js实现的，下面就介绍下我是如何实现的吧~~
随着人工智能和深度学习的普及，越来越多的应用开始借助强大的预训练模型来处理文本、图像等数据。然而，大多数这类模型需要依赖于云端服务器，用户端必须通过网络调用后端的API，这不仅带来了延迟问题，还可能引发隐私和数据安全的担忧。为了解决这些挑战，Xenova 团队推出了 Transformer.js，一个基于 JavaScript 的库，让开发者可以在浏览器中本地加载和执行预训练模型，摆脱服务器的依赖。
前置知识和准备
- javascript 相关的web知识，创建一个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模型镜像站 （如果有代理可忽略）
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 模型。例如，以下代码展示了加载一个中文转英文模型：
// 定义要使用的模型和任务类型 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);},});然后我们调用这个定义好的管道
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 都为开发者提供了新的可能性
后续会出应用类的文章，切记住本文的那一定点内容，后续的大模型进阶，基本上都是基于这个库，也默认你配置了国内镜像源