Transformers.js:Web 上的最新机器学习技术(1)

下面是来自transformers.js的作者的技术分享视频:Transformers.js:Web 上的最新机器学习技术
第二篇:Transformers.js:Web 上的最新机器学习技术(2)

前言

本文介绍Hugging Face是如何将其AI生态系统引入到Web中的。通过transformers.js,您可以直接在浏览器中运行Hugging Face的transfrmers模型。

介绍

什么是Transformers.js

简单介绍一下什么是transformers.js,transformers.js是一个库,提供了在JavaScript中运行先进预训练模型的高级抽象。这意味着任何人都可以轻松地将机器学习功能添加到他们的Web应用程序中。

而且我们还有一个了不起的开源社区,汇集了来自世界各地真正看到Web上机器学习潜力的人。在NPM上周下载量也达到了15万次。迄今为止人们已经用它创造了举世瞩目的成就。经过这个库只有几个月的历史,但是我们已经支持了对50多种最流行的模型架构。

为什么要在Web上运行

为什么HuggingFace要探索WebML技术呢,答案可以在HuggingFace的使命中找到:让优秀的机器学习走向大众。我们知道HuggingFace上有大量的库,但是这些库都是Python实现的,这意味着大部分Web开发者不容易利用他们。因此Transformers.js的目标就是降低Web开发者的使用门槛。这个库还旨在帮助开发者构建前所未见的Web应用,这将在稍后进行展示。说到软件分发,Web真的是一骑绝尘,如今一旦有新模型或者应用推出,人们首先看到的都是Web Demo。无干扰,免安装,我相信没人会不喜欢。

它是怎么工作的呢

那么它是如何工作的呢,用户可以使用HuggingFace的Optimum库,将他们的pytorch、tensorflow或者JAX模型转换为ONNX模型。当然如果想直接使用预转换的模型,可以跳过这一步,直接使用HuggingFace上的模型。

接下来编写JavaScript代码,最简单方法是使用popeline函数,正如前面提到的,这个函数把机器学习背后的许多复杂任务抽象化了,用户不必关系如何实现,就可以完成任务。

如果用户希望对整个过程有更精细的控制,可以使用公开的Model、Tokenizer、Processsor类以及其他相关函数。最后,打开浏览器运行项目,就这么简单。

应用

下面我们再来看看使用Transformers.js构建的应用程序,首先是BlindChat,一个基于浏览器的ChatGPT版本,使用的模型是经过指令微调的FLAN-T5版本,能力可能不如ChatGPT强大,但仍然能胜任一些工作。

来看个例子,问一下:"什么是爱情?",这些对话都将只在本设备上产生,第一次运行时,浏览器将会下载并缓存模型,可以看到效果还算不错。

我看了一下,大概会下载800MB左右的小模型,好像这个模型不支持中文,用中文提问就不能正常回答了。

虽然有一些提问无法回答,但是这个项目旨在演示基于浏览器的机器学习的隐私优势,因为没有任何数据被传输到其他地方。可以想象将类似的应用部署为浏览器拓展,充当您浏览Web时的个人助理,这样您就无需担心敏感数据(比如银行卡和支付密码)泄露到某个服务器。随着模型越来越小越来越强大,我相信很快就能见到类似的应用了。

除了对话式AI,我们还要为特定用例进行微调的模型示例,比如代码生成。即使是相对较小的3亿参数模型,也能产生高质量的代码,

项目演示地址:huggingface.co/spaces/Xeno... 右键-generate,生成代码。默认的模型大概300MB

另一个使用十大语言模型的例子是对语言翻译和转换器,transformers.js也支持这个功能,比如这个例子,使用的是一个600亿参数的模型,通过200多种不同语言的训练。

项目演示地址:huggingface.co/spaces/Xeno... 好像翻译成中文不是那么准确,hhhh

下一个例子是语音转文本的例子:Whisper Web

你可以从URL加载、从本地加载或者使用麦克风录制,一旦音频加载完毕,点击Transcribe Audio,即可开始转录,您可以导出为txt或者json。你也可以选择其他的模型,如果你的带宽比较小,也可以选择一个量化版本。即使是量化版的小模型,只有40MB左右,也能产出高质量的转录文本。Whisper Web还支持多语言转录和翻译,这意味着可以选择大于100种不同语言进行转录或者翻译成英语。

这个例子强调了在设备上使用机器学习处理敏感数据的重要性,比如麦克风或者摄像头输入。很多情况下用户不希望将他们的语音录音发送到服务器,他们更希望只在他们自己的设备上进行处理。

另一个有趣的应用是语义图像搜索,在这个例子中,用户会下载一个包含25000个剪辑的嵌入式数据库,大小大概在50MB左右。加载完成后,就可以用自然语言搜索图像,比如搜索一下cat

或者我们搜索一下更具象化的,比如叼着棍子的狗:

有意思的是,加载完模型和数据库后,文本计算只需要大概50毫秒,即可在25000张图像中进行相似性搜索,这没有使用任何酷炫的向量数据库,只是普通的JavaScript代码。

最后一个案例,doodle-dash (不知道怎么翻译了,涂鸦冲鸭?哈哈哈哈) , 这是一个实时的ML驱动的网页游戏,完全在浏览器中运行,感谢Transformers.js。游戏灵感来源于谷歌的 Quick,Draw ,你根据一个单词进行涂鸦,神经网络有20秒的时间来猜测你在画什么。事实上,我们使用了他们的训练数据来训练我们的轻量级草图检测模型。

因为检测是在浏览器实时运行,所以根本不用担心网络或者服务器延迟。

上面展示的例子都是开源的,而且有demo网站进行体验

Name Description Links
Whisper Web Speech recognition w/ Whisper code, demo
Doodle Dash Real-time sketch-recognition game blog, code, demo
Code Playground In-browser code completion website code, demo
Semantic Image Search (client-side) Search for images with text code, demo
Semantic Image Search (server-side) Search for images with text (Supabase) code, demo
Vanilla JavaScript In-browser object detection video, code, demo
React Multilingual translation website code, demo
Text to speech (client-side) In-browser speech synthesis code, demo
Browser extension Text classification extension code
Electron Text classification application code
Next.js (client-side) Sentiment analysis (in-browser inference) code, demo
Next.js (server-side) Sentiment analysis (Node.js inference) code, demo
Node.js Sentiment analysis API code

下一章就开始讲解如何使用这个框架构建我们自己的ai网站。Transformers.js:Web 上的最新机器学习技术(2)

相关推荐
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半7 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O28 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage8 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
你好龙卷风!!!8 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
shenweihong10 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
巧克力小猫猿10 小时前
基于ant组件库挑选框组件-封装滚动刷新的分页挑选框
前端·javascript·vue.js
嚣张农民10 小时前
一文简单看懂Promise实现原理
前端·javascript·面试