TensorFlow.js，让你的应用更加高级，更具逼格

作者: 前端架构巴拉啦 | 来源:发表于2023-11-28 14:16 被阅读0次

哦哦哦，最近，又有一个新词蹦进俺这本就不大的脑里，并在脑子里来回转圈，在好奇心的促使下，我开始试着去了解了一下它，那它究竟是什么呢，标题已经告诉你答案了，TensorFlow.js。

可能会有人问了：TensorFlow.js 不是早就推出了吗，咋现在才知道。俺吧，天生脑子就不太好，学东西就慢，对知识这种东西有选择性障碍，这样解释你可还满意。

image.png

唠叨唠叨

TensorFlow 对于学习前端的应该比较陌生，它主要是用在人工智能领域的，俺在网上找了一篇文章TensorFlow 简介_tensorflow简介-CSDN博客，帮助你简单理解 TensorFlow 是干啥的，其实吧，这东西本来是跟咱们干前端的是毫无关系的，但谁知道，前端都是卷王，一个比一个能卷。就在2018， TensorFlow 开发者峰会上，TensorFlow 宣布重大更新：增加支持JavaScript，并推出开源库 TensorFlow.js ，用户可以完全在浏览器定义、训练和运行机器学习模型。好家伙，这下，跟咱们前端就有关系了（俺只能说，谷歌，你是懂得卷死前端滴）。

TensorFlow.js 相当于把 TensorFlow 中的一些核心功能移植到了JavaScript中去，它主要是可以应用在开发一些比较轻量级的前端应用上的一些小的功能模块。

啥是TensorFlow.js

TensorFlow.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

image.png

引入 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">
   <h1>Hello TensorFlow</h1>
 </div>
</template>

接着打开浏览器控制台，如果会打印如下内容，则说明运行成功：

image.png

使用脚本标签，也就是cdn

新建一个html文件（俺这是TensorFlow.html），复制官网的cdn：

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>TensorFlow</title>
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
 </head>
 <body>
   <h1>Hello TensorFlow</h1>
 </body>
</html>

在浏览器（俺这用的是Google Chrome）上运行，打开控制台 Console 如果加载出来后没有报错（要是报错的话，你可以刷新一下试试看），那就没问题：

image.png

导入成功后，你可以在控制台中输入一些内容，比如，你想知道 TensorFlow.js 当前的版本：

tf.version

image.png

接着找到官网的运行示例，该示例以便于我们快速测试 TensorFlow.js 库提供的，复制它：

<!DOCTYPE html>
<html lang="en">
// 略
 <body>
   <h1>Hello TensorFlow</h1>
   <div id="micro-out-div">Training...</div>
   <script>
     // Create a simple model.
     const model = tf.sequential();
     model.add(tf.layers.dense({ units: 1, inputShape: [1] }));

     // Prepare the model for training: Specify the loss and the optimizer.
     model.compile({ loss: "meanSquaredError", optimizer: "sgd" });

     // Generate some synthetic data for training. (y = 2x - 1)
     const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
     const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

     // Train the model using the data.
     model.fit(xs, ys, { epochs: 250 });
     // Use the model to do inference on a data point the model hasn't seen.
     // Should print approximately 39.
     document.getElementById("micro-out-div").innerText = model
      .predict(tf.tensor2d([20], [1, 1]))
      .dataSync();
   </script>
 </body>
</html>

image.png

刷新后，数字也会发生变化。如果到这一步了，没用出现任何问题，那就说明你已经成功导入并正常运行 TensorFlow.js 了。

nodeJs中使用

初始化：

pnpm init

安装依赖：

pnpm install @tensorflow/tfjs

新建js文件（俺这是TensorFlow.js）:

image.png

4. 编写测试代码：

const tf = require("@tensorflow/tfjs");
const xs = tf.randomNormal([100, 10]);
const ys = tf.randomNormal([100, 1]);
const sum = xs.add(ys);
const xsSum = xs.sum();
const xsMean = xs.mean();

console.log("Sum of xs and ys");
sum.print();
console.log("Sum of xs");
xsSum.print();
console.log("Mean of xs");
xsMean.print();

当我们想要查看底层数据时，我们在张量上调用print()函数。如果我们使用默认的console.log，我们会得到Tensor对象。

运行js文件：

node TensorFlow.js

出现如下输出，说明运行测试成功：

image.png

当TensorFlow.js遇上了微信小程序

谷歌在上海开发者大会（GDD）上，介绍了基于微信小程序的 TensorFlow.js 插件，该插件可帮助开发者将机器学习能力简洁地带到小程序里，它的识别类型包括图像、语音、文字等。现在，机器学习的能力在小程序中应用十分广泛，为各类行业带来了便利。那么接下来，让俺来瞅瞅能摩擦出什么样的火花。

创建微信小程序项目

首先进入这个网站：TensorFlowJS | 小程序插件 | 微信公众平台 (qq.com)，如果没添加，点击添加即可。

image.png

创建一个微信小程序的基础项目（如果你没有安装微信开发工具，那需要先安装一下，并注册个微信小程序的账号。不会微信小程序开发的话可以去网上搜索相关教程学一下）：

image.png

删除无用代码段

删除app.js多余代码：

App({
 onLaunch() {}
})

删除 logs 日志目录，并删除 app.json 对应的文件路径

目前代码目录：

image.png

安装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：

image.png

包都安装好后，选择菜单栏上的工具-构建npm：

image.png

牢记： 每次安装一个新的包的时候，都需要进行一次构建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: no test specified" && exit 1"
},
 "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"
}
}

相关包的解释，在文档中都有解释，俺这就不一一说明了：TensorFlowJS | 小程序插件 | 微信公众平台 (qq.com)

使用插件

在app.js的onLaunch里调用插件configPlugin函数：

var fetchWechat = require('fetch-wechat');
var tf = require('@tensorflow/tfjs-core');
var webgl = require('@tensorflow/tfjs-backend-webgl');
var plugin = requirePlugin('tfjsPlugin');
App({
 onLaunch() {
   plugin.configPlugin({
     // polyfill fetch function
     fetchFunc: fetchWechat.fetchFunc(),
     // inject tfjs runtime
     tf,
     // inject webgl backend
     webgl,
     // provide webgl canvas
     canvas: wx.createOffscreenCanvas()
  });
}
})

在控制台打印一下，测试插件是否引入成功：

App({
 onLaunch() {
   plugin.configPlugin({});
   tf.tensor([1,2,3,4]).print()
}
})

image.png

如果控制台打印以下内容，则说明插件引入成功了。

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() {
   const ctx = wx.createCameraContext()
   ctx.takePhoto({
     quality: 'high',
     success: (res) => {
       this.setData({
         src: res.tempImagePath
      })
    }
  })
},
 error(e) {
   console.log(e.detail)
}
})

image.png

俺也就暂时学到这里，后面还没开始，等学到了，俺再来继续分享。

好了，广大网友们，开喷

作者：doudou_sir
链接： https://juejin.cn/post/7302965547087298601

TensorFlow.js，让你的应用更加高级，更具逼格

唠叨唠叨

啥是TensorFlow.js

它能在前端开发上干啥用

作为前端开发人员学习这个有啥用

在浏览器中使用

在 nodeJs 中使用

上手试一试

浏览器中使用

使用包管理器（npm、yarn、pnpm）以及构建工具（vite、webpack）

使用脚本标签，也就是cdn

nodeJs中使用

当TensorFlow.js遇上了微信小程序

创建微信小程序项目

删除无用代码段

安装TensorFlow.js相关

引入插件包

使用插件

camera对象和canvas对象

调取摄像头

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

让前端飞