TensorFlow.js，让你的应用更加高级，更具逼格 点击小卡片参与粉丝专属福利 哦哦哦，最近，又有一个新词蹦进俺这本就不大的脑里，并在脑子里来回转圈，在好奇心的促使下，我开始试着去了解了一下它，那它究竟是什么呢，标题已经告诉你答案了，「TensorFlow.js」。 可能会有人问了：TensorFlow.js 不是早就推出了吗，咋现在才知道。俺吧，天生脑子就不太好，学东西就慢，对知识这种东西有选择性障碍，这样解释你可还满意??。 唠叨唠叨TensorFlow 对于学习前端的应该比较陌生，它主要是用在人工智能领域的，俺在网上找了一篇文章TensorFlow 简介_tensorflow简介-CSDN博客，帮助你简单理解 TensorFlow 是干啥的，其实吧，这东西本来是跟咱们干前端的是毫无关系的，但谁知道，前端都是卷王，一个比一个能卷。就在2018， TensorFlow 开发者峰会上，TensorFlow 宣布重大更新：增加支持JavaScript，并推出开源库 TensorFlow.js ，用户可以完全在浏览器定义、训练和运行机器学习模型。好家伙，这下，跟咱们前端就有关系了（俺只能说，谷歌，你是懂得卷死前端滴??）。 TensorFlow.js 相当于把 TensorFlow 中的一些核心功能移植到了JavaScript中去，它主要是可以应用在开发一些比较轻量级的前端应用上的一些小的功能模块。 啥是TensorFlow.jsTensorFlow.js(tfjs) 是一个用于在浏览器或 Node.js 中创建、训练和部署机器学习模型的 JavaScript 库，由 Nikhil Thorat 和 Daniel Smilkov 在谷歌创建，最初名为 Deeplearn.js，2018 年被合并到 TensorFlow 团队，更名为 TensorFlow.js。 它能在前端开发上干啥用「运行模型」它可以在我们的浏览器上运行一些已经训练好的一些简单的模型； 「再训练模型」如果你已经有模型了，先把它在浏览器上运行起来，然后通过使用 JavaScript 做再训练，这样可以把它更加贴近我们所需要的应用场景； 「用JS开发机器学习」你可以不用 Python ，采用 JavaScript 就可以开发属于自己的机器模型（那这就有点高级了，俺有点完不来）。 「小提示：」 可能有人会问那个模型指的是什么，俺在网上搜了搜，简单理解就是 「如何对现实当中的一些真实事件进行简化的理解，就是通过这个模型去实现的，就例如咱们常用的高德地图，它就是对真实事件进行了简化的理解从而实现在应用上的」 作为前端开发人员学习这个有啥用?前端开发领域，不是在浏览器中用到就是在 nodeJS 中用到，通过这两种采用 JavaScript 使用 TensorFlow.js 。真的，干前端的没有一个不是卷王，俺认为的，因为俺身边的，干前端的，都比俺还能卷，一个比一个卷，「嘴讲着我不卷，半夜偷偷去了解」。 ?在浏览器中使用利于用户交互，对于许多产品和公司来讲，一个网站是与客户或用户互动的主要方式，也可能有一个应用程序，但通常这些应用程序是使用与网站，因此，对于面向用户的应用程序，直接集成机器学习模型可能会非常有益进入用户界面；现在的 web api 使我们可以访问许多设备输入。例如，相机，无论是在手机上还是在电脑上。因此，在用户允许的情况下，我们可以在机器学习任务中使用来自相机的图像，这种环境的另一个优点是我们正在利用设备的计算能力，因此，它是用户的设备，而不是中央处理器或云环境，这极大的有助于扩展产品，因为我们不必去使用昂贵的集中式资源。它可以保护用户的隐私。如果我们可以在浏览器中，在用户的设备上进行机器学习，那我们不一定需要向服务器发送可能是个人数据。根据应用程序和目标受众，这可能会让用户放心。在 nodeJs 中使用如果我们的后端是采用 nodeJs 写的，那么使用 JavaScript 添加机器学习会容易得多。基于框架，而不是必须与另一种语言如 Python 集成，特别是使用 JavaScript 环境中的 TensorFlow.js 对于初创企业来说是一种很好的文化契合。nodeJs 是初创企业非常受欢迎的选择，因为它允许后端快速 开发和在相同的语言 JavaScript 作为前端。 上手试一试?俺会在浏览器和nodeJs两个环境都使用一下 ?浏览器中使用在浏览器中可通过两种方法去使用它： 使用包管理器（npm、yarn、pnpm）以及构建工具（vite、webpack）可以通过npm或yarn或pnpm等包管理器安装tfjs。当您需要在客户端项目（如 React 和 Vue 项目）中使用tfjs时，这会非常有用（俺这里用 pnpm，采用vue构建）。 构建vue（这里就不去说咱构建了）：pnpm create vue 引入 TensorFlow.js 包：pnpm install @tensorflow/tfjs 在 components/HelloWorld.vue 下添加如下代码（俺这用另一个测试代码去测试一下 TensorFlow.js 是否运行成功）：script setup import * as tf from "@tensorflow/tfjs"; const x = tf.tensor2d([1, 2, 3, 4], [2, 2]); const y = tf.tensor2d([1, 3, 5, 7], [2, 2]); const sum = x.add(y); sum.print(); /script template div class="greetings" h1Hello TensorFlow/h1 /div /template 接着打开浏览器控制台，如果会打印如下内容，则说明运行成功： 使用脚本标签，也就是cdn新建一个html文件（俺这是TensorFlow.html），复制官网的cdn： !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleTensorFlow/title scriptsrc="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"/script /head body h1HelloTensorFlow/h1 /body /html 在浏览器（俺这用的是Google Chrome）上运行，打开控制台 Console 如果加载出来后没有报错（要是报错的话，你可以刷新一下试试看），那就没问题： 导入成功后，你可以在控制台中输入一些内容，比如，你想知道 TensorFlow.js 当前的版本： tf.version 接着找到官网的运行示例，该示例以便于我们快速测试 TensorFlow.js 库提供的，复制它： !DOCTYPEhtml htmllang="en" //略 body h1HelloTensorFlow/h1 divid="micro-out-div"Training.../div script //Createasimplemodel. constmodel=tf.sequential(); model.add(tf.layers.dense({units:1,inputShape:[1] //Preparethemodelfortraining:Specifythelossandtheoptimizer. model.compile({loss:"meanSquaredError",optimizer:"sgd" //Generatesomesyntheticdatafortraining.(y=2x-1) constxs=tf.tensor2d([-1,0,1,2,3,4],[6,1]); constys=tf.tensor2d([-3,-1,1,3,5,7],[6,1]); //Trainthemodelusingthedata. model.fit(xs,ys,{epochs:250 //Usethemodeltodoinferenceonadatapointthemodelhasn'tseen. //Shouldprintapproximately39. document.getElementById("micro-out-div").innerText=model .predict(tf.tensor2d([20],[1,1])) .dataSync(); /script /body /html 刷新后，数字也会发生变化。如果到这一步了，没用出现任何问题，那就说明你已经成功导入并正常运行 TensorFlow.js 了。 nodeJs中使用初始化：pnpm init 安装依赖：pnpm install @tensorflow/tfjs 新建js文件（俺这是TensorFlow.js）:4. 编写测试代码： consttf=require("@tensorflow/tfjs"); constxs=tf.randomNormal([100,10]); constys=tf.randomNormal([100,1]); constsum=xs.add(ys); constxsSum=xs.sum(); constxsMean=xs.mean(); console.log("Sumofxsandys"); sum.print(); console.log("Sumofxs"); xsSum.print(); console.log("Meanofxs"); xsMean.print(); 当我们想要查看底层数据时，我们在张量上调用print()函数。如果我们使用默认的console.log，我们会得到Tensor对象。 运行js文件：node TensorFlow.js 出现如下输出，说明运行测试成功： 当TensorFlow.js遇上了微信小程序?谷歌在上海开发者大会（GDD）上，介绍了基于微信小程序的 TensorFlow.js 插件，该插件可帮助开发者将机器学习能力简洁地带到小程序里，它的识别类型包括图像、语音、文字等。现在，机器学习的能力在小程序中应用十分广泛，为各类行业带来了便利。那么接下来，让俺来瞅瞅能摩擦出什么样的火花。 ?创建微信小程序项目首先进入这个网站：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx6afed118d9e81df9&token=776787123&lang=zh_CN，如果没添加，点击添加即可。 创建一个微信小程序的基础项目（如果你没有安装微信开发工具，那需要先安装一下，并注册个微信小程序的账号。不会微信小程序开发的话可以去网上搜索相关教程学一下）： 删除无用代码段删除app.js多余代码： App({ onLaunch(){} }) 删除 logs 日志目录，并删除 app.json 对应的文件路径 目前代码目录： 安装TensorFlow.js相关接下来通过 pnpm/npm/yarn （俺用的pnpm）,安装第一个项目所需要的包： # 打开控制台，进入项目根目录，初始化 pnpm init # 安装相关依赖， 暂时只用这两个后面需要的话再安 pnpm i @tensorflow/tfjs-core @tensorflow/tfjs-converter @tensorflow/tfjs-backend-webgl fetch-wechat 将index.js修改为app.js： 包都安装好后，选择菜单栏上的工具-构建npm： 「牢记：」 每次安装一个新的包的时候，都需要进行一次构建npm，不然项目就无法使用这些包。 引入插件包在 app.json 中声明需要使用的插件： { //略 "plugins":{ "tfjsPlugin":{ "version":"0.2.0", "provider":"wx6afed118d9e81df9" } }, //略 } 对于小程序而言，由于有2M的app大小限制，不建议直接使用联合包，而是按照需求加载分包 //package.json { "name":"tensor-flow", "version":"1.0.0", "description":"tensorflow", "main":"app.js", "scripts":{ "test":"echo"Error:notestspecified"exit1" }, "keywords":[], "author":"https://gitee.com/tease-not-bald", "license":"ISC", "dependencies":{ "@tensorflow/tfjs-backend-webgl":"^4.13.0", "@tensorflow/tfjs-converter":"^4.13.0", "@tensorflow/tfjs-core":"^4.13.0", "fetch-wechat":"^0.0.3" } } 相关包的解释，在文档中都有解释，俺这就不一一说明了：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx6afed118d9e81df9&token=776787123&lang=zh_CN#tensorflow-js- 使用插件在app.js的onLaunch里调用插件configPlugin函数： varfetchWechat=require('fetch-wechat'); vartf=require('@tensorflow/tfjs-core'); varwebgl=require('@tensorflow/tfjs-backend-webgl'); varplugin=requirePlugin('tfjsPlugin'); App({ onLaunch(){ plugin.configPlugin({ //polyfillfetchfunction fetchFunc:fetchWechat.fetchFunc(), //injecttfjsruntime tf, //injectwebglbackend webgl, //providewebglcanvas canvas:wx.createOffscreenCanvas() } }) 在控制台打印一下，测试插件是否引入成功： App({ onLaunch(){ plugin.configPlugin({}); tf.tensor([1,2,3,4]).print() } }) 如果控制台打印以下内容，则说明插件引入成功了。 camera对象和canvas对象再index.wxml添加camera，修改index目录下相关文件的代码段： scroll-view class="scrollarea" scroll-y type="list" view class="container" camera/camera /view /scroll-view page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } 删除 app.wxss 内的 padding 调取摄像头通过微信文档里的代码段，测试摄像头是否启用： // index.wxml view class="container" camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"/camera button type="primary" bindtap="takePhoto"/button view/view image mode="widthFix" src="{{src}}"/image /view //index.js Page({ takePhoto(){ constctx=wx.createCameraContext() ctx.takePhoto({ quality:'high', success:(res)={ this.setData({ src:res.tempImagePath }) } }) }, error(e){ console.log(e.detail) } }) 俺也就暂时学到这里，后面还没开始，等学到了，俺再来继续分享。 好了，广大网友们，开喷?? 如果文章对你有帮助的话欢迎「关注+点赞+收藏」 阅读原文