西安营销型网站建设动力无限/西安seo报价
除了调用别人的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 都为开发者提供了新的可能性
后续会出应用类的文章,切记住本文的那一定点内容,后续的大模型进阶,基本上都是基于这个库,也默认你配置了国内镜像源
相关文章:

前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用别人的api接口使用transformer技术,你是否想过将大模型在浏览器中运行呢?尤其是WebGPU的出现,性能比WebGL高不少,很多小任务真的不再需要在一个中心运行了。 不少同学买课学python了,但我还是在坚持用js尝试&a…...

计算机性能指标之MFLOPS
1. MFLOPS的定义与计算方式 定义:MFLOPS,全称Million Floating-point Operations Per Second,即每秒百万次浮点运算,是衡量计算机系统浮点运算能力的一个重要技术指标。 计算方式:MFLOPS的计算公式为“浮点操作次数 /…...

Sharp.js:简单而又实用的图像处理库
前言 在现代Web开发中,图像处理是一个不可或缺的部分。 前端开发者经常需要处理图像,以确保它们在不同的设备和分辨率上都能保持良好的显示效果。 sharp.js是一个高性能的Node.js模块,它利用了libvips库,提供了快速且高效的图像…...

Rust环境安装配置
要加速安装 Rust 和 git-cliff,可以配置国内的镜像源。特别是在国内访问 Rust 官方的安装源时,可能会遇到速度较慢的问题。通过配置 TUNA(清华大学开源软件镜像站)的镜像源,可以大幅提升安装速度。 1. 配置国内镜像加…...

衡石分析平台系统管理手册-功能配置之全局 JS 设置
全局 JS 设置 衡石系统提供了全局 JS 设置功能,用户可以通过自定义 JS 代码实现系统的个性化需求,如使用第三方统计工具对系统平台的 PV 、UV 进行监测。 使用场景 场景1:增加百度统计 下图示例中使用 js 代码引用了百度网站统计功…...

OpenHarmony(鸿蒙南向)——平台驱动开发【MIPI DSI】
往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ 持续更新中…… 概述 功能简介 DSI(Display Serial Interface&#x…...

C++_一篇文章让你弄懂各类(运算符)
运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。C 内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符关系运算符逻辑运算符位运算符赋值运算符杂项运算符 本章将逐一介绍算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符和…...

顺序表算法题 —— 移除元素、删除有序数组中的重复项、合并两个有序数组
目录 一、顺序表算法题 1、移除元素 2、删除有序数组中的重复项 3、 合并两个有序数组 二、顺序表问题与思考 一、顺序表算法题 1、移除元素 移除元素 - 力扣(LeetCode) 思路分析: 思路一:创建一个新数组,开辟…...

配置ssh后又报错git@github.com: Permission denied (publickey)
再添加一次ssh有用 ssh-add ~/.ssh/你的id_rsa的名字可以先运行 eval "$(ssh-agent -s)"再添加,Jesus每次重启terminal都要输入一遍 报错 gitgithub.com: Permission denied (publickey) 通常是由于 SSH 公钥没有正确配置或者 GitHub 上未能识别你的公钥…...

yolov10安装体验
按照官网 conda create -n yolov10 python=3.9 conda activate yolov10 pip install -r requirements.txt pip install -e . 一路安装,运行yolov10的问题,初次接触的同学可以注意。 Set arbitrary_types_allowed=True in the model_config to ignore this error f you got th…...

使用Docker-Compose部署SpringBoot项目的案例
Docker-Compose是Docker官方的一个开源项目,主要用于实现对Docker容器集群的快速编排和管理。该项目由Python编写,通过调用Docker服务提供的API来管理容器。只要所操作的平台支持Docker API,就可以利用Docker-Compose进行编排管理。Docker-Co…...

大话 RCU (read copy update)
还得是看官方文档。kernel/Document/RCU/WhatisRCU.rst. 首先,我们要搞清楚一件事,指针它是一个变量,他在内存上也是占了空间的,然后他里面的值,是你申请的内存块的首地址。文档开篇就讲咱们的基本原理,就…...

vue项目npm run serve 报错,Error: read ECONNRESET at TCP.onStreamRead
背景:vue2的项目,之前npm run serve一直可以正常使用,突然每次启动都会报错了,报错信息如下: node:events:492 throw er; // Unhandled error event ^ Error: read ECONNRESET at TCP.onStreamRead (n…...

十二、MySQL数据类型精讲
文章目录 1. MySQL中的数据类型2. 整数类型2.1 类型介绍2.2 可选属性2.2.1 M2.2.2 UNSIGNED2.2.3 ZEROFILL 2.3 适用场景2.4 如何选择? 3. 浮点类型3.1 类型介绍3.2 数据精度说明3.3 精度误差说明 4. 定点数类型4.1 类型介绍4.2 开发中经验 5. 位类型:BI…...

不同参数对分类精度的影响以及思考
1 问题 探索不同的batch_size对分类精度的影响探索不同的损失函数对分类精度的影响 2 方法 问题一 要知道的是Batch_size的作用:决定了下降的方向。在合理范围内,增大Batch_size的好处: 一是提高了内存利用率以及大矩阵乘法的并行化效率&…...

开源AI智能名片小程序源码:私域电商构建独特竞争力的新机遇
摘要:本文旨在探讨私域电商如何利用开源AI智能名片小程序源码构建独特竞争力。在强调独特性是通向成功的必要条件的基础上,分析开源AI智能名片小程序源码在私域电商发展独特性方面的作用及相关策略。 一、引言 在竞争激烈的商业环境中,让自己…...

从Web2到Web3:探索下一代互联网的无限可能性
互联网经历了从Web1到Web2的重大变革,现在正迈向Web3。Web2通过社交媒体、电子商务和内容平台改变了我们的数字生活,但同时也伴随着中心化平台的垄断和用户数据被广泛控制的问题。而Web3的出现,则试图通过去中心化技术解决这些挑战࿰…...

POE供电支持画中画的摄像头解决方案
首先他的主芯片由嵌入式操作系统和高性能硬件处理平台,具有较高稳定性和可靠性,有丰富的接口,可以支持二次开发定制的. 首先,什么是poe供电呢?Poe供电是通过网络线(网线)供电的一种技术&#x…...

Python 3 字典
Python 3 字典 引言 Python 字典(Dictionary)是一种非常有用的内置数据类型,用于存储键值对。在 Python 3 中,字典保持了一些基本特性,同时也有一些新的改进和特性。本文将详细介绍 Python 3 中的字典,包括其基本操作、常用方法以及一些高级特性。 字典的基本操作 创…...

CFR( Java 反编译器)
一、安装教程 CFR(Class File Reader)是一个流行的Java反编译器,它可以将编译后的.class文件或整个.jar文件转换回Java源代码。以下是CFR的下载和使用教程: 下载CFR 访问CFR的官方网站或GitHub仓库:CFR的最新版本和所…...

单片机的两种看门狗原理解析——IWDG和WWDG
一、IWDG独立开门狗的主要性能 计时机制: 递减计数器 独立开门狗的初始频率: LSI低速内部时钟:RC震荡器,40kHz 独立开门狗是以LSI为初始频率的,所以独立开门狗的初始时钟频率取决与单片机本身,因此在使…...

SQL进阶技巧:如何获取状态一致的分组? | 最大、最小值法
目录 0 需求描述 1 数据准备 2 问题分析 方法1:最大、最小值法(技巧) 方法2:常规思路 3 小结 如果觉得本文对你有帮助,那么不妨也可以选择去看看我的博客专栏 ,部分内容如下: 数字化建设通…...

windows10使用bat脚本安装前后端环境之msyql5.7安装配置并重置用户密码
首先需要搞清楚msyql在本地是怎么安装配置、然后在根据如下步骤编写bat脚本: 思路 1.下载mysql5.7 zip格式安装包 2.新增data文件夹与my.ini配置文件 3.初始化数据库 4.安装mysql windows服务 5.启动并修改root密码(新增用户初始化授予权限)…...

文件上传、amrkdown编辑器
一、文件上传 这里我以图片为例,进行上传,上传到阿里云oss(对象存在中) 首先,我们先梳理一下,图片上传的流程 1、前端选择文件,提交文件 前端提交文件,我们可以使用ElementUI中的…...

Linux防火墙-4表5链
作者介绍:简历上没有一个精通的运维工程师。希望大家多多关注作者,下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们经过上小章节讲了Linux的部分进阶命令,我们接下来一章节来讲讲Linux防火墙。由于目前以云服务器为主&#x…...

(最新已验证)stm32 + 新版 onenet +dht11+esp8266/01s + mqtt物联网上报温湿度和控制单片机(保姆级教程)
物联网实践教程:微信小程序结合OneNET平台MQTT实现STM32单片机远程智能控制 远程上报和接收数据——汇总 前言 之前在学校获得了一个新玩意:ESP-01sWIFI模块,去搜了一下这个小东西很有玩点,远程控制LED啥的,然后我就想…...

无环SLAM系统集成后端回环检测模块(loop):SC-A-LOAM以及FAST_LIO_SLAM
最近在研究SLAM目标检测相关知识,看到一篇论文,集成了SC-A-LOAM作为后端回环检测模块,在学习了论文相关内容后决定看一下代码知识,随后将其移植,学习过程中发现我找的论文已经集成了回环检测模块,但是我的另…...

速盾:视频开cdn合适还是视频点播合适?
在选择视频服务时,许多企业和个人面临了一个重要的决策,那就是选择是使用开CDN(内容分发网络)还是使用视频点播服务。这两种选择都有各自的优势和适用场景,因此在做出决定之前,我们需要仔细评估自身的需求和…...

Mac电脑安装FFmpeg和卸载FFmpeg
Mac电脑安装FFmpeg 在Mac上安装FFmpeg有几种方法,以下是通过Homebrew安装的最简单方法: 1. 使用Homebrew安装FFmpeg 如果你已经安装了Homebrew,可以通过以下命令来安装FFmpeg: 打开终端 (Terminal)。更新Homebrew:…...

数据结构:栈 及其应用
逻辑结构: 栈(Stack)是一种遵循后进先出(LIFO, Last In First Out)原则的有序集合 (受限的线性表)。这种数据结构只允许在栈顶进行添加(push)或删除(pop&…...