当前位置： 首页 > article >正文

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

article 2024/9/28 12:36:18

除了调用别人的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)icon-default.png?t=O83Ahttps://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.jsTensorFlow.js
主要用途自然语言处理 (NLP) 推理通用机器学习任务（推理与训练）
支持模型Transformer 模型（GPT、BERT、T5 等）各类神经网络模型（CNN、RNN、强化学习等）
推理与训练能力仅支持推理支持推理和训练
计算加速WebAssembly, WebGPUWebGL, 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 都为开发者提供了新的可能性

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


http://www.kler.cn/news/323171.html

相关文章：

  • Kafka与RabbitMQ：深入理解两者之间的区别
  • Rce脚本自动化amp；批量
  • 目标检测系列（三）yolov2的全面讲解
  • ComfyUI 完全入门：基本功能详细介绍（附ComfyUI整合包）
  • 【开源免费】基于SpringBoot+Vue.JS体育馆管理系统（JAVA毕业设计）
  • Matlab基础练习
  • 一步步带你Linux内核编译与安装
  • AI编辑器CURSOR_CURSOR安装教程_使用AI进行编码的最佳方式。
  • 论文阅读《Co-clustering for Federated Recommender System》
  • Transformers 引擎，vLLM 引擎，Llama.cpp 引擎，SGLang 引擎，MLX 引擎
  • 每日OJ_牛客_OR59字符串中找出连续最长的数字串_双指针_C++_Java
  • 新茶饮卷出海，本土化成胜败关键
  • 牛肉高脂猫粮，福派斯猫粮新选择？乳鸽猫粮
  • zookeeper 服务搭建（单机）
  • 远程访问软路由
  • [半导体检测-8]：KLA Surfscan 系统设备组成
  • 深度学习----------------------语言模型
  • yolov10安装体验
  • ICM20948 DMP代码详解（48）
  • C# 字符串（String）的应用说明一
  • 机器学习入门
  • 单通道串口服务器
  • 【华为HCIP实战课程一】OSPF相关基础介绍及基础配置，网络工程师必修
  • 华为认证HCIA篇--网络通信基础
  • 3.5k star 一款开源简单好用的前端TAG标签组建库
  • 2024年最新C# ASP.NET+Vue斯诺克球馆购票系统，快速部署，抢占市场先机，优化球馆服务
  • vue-baidu-map的基本使用
  • SSM框架VUE电影售票管理系统开发mysql数据库redis设计java编程计算机网页源码maven项目
  • 2024/9/28 英语每日一段
  • git基础 -- 在 Git 中查找文件