摘要：介绍了在微信小程序上应用的端智能技术方案，聚焦于 TensorFlow.js 推理和微信原生推理两种方案。今日前端早读课文章由 @You Chen 分享，公号：vivo 互联网技术授权。
前言
介绍了在微信小程序上应用的端智能技术方案，聚焦于 TensorFlow.js 推理和微信原生推理两种方案。今日前端早读课文章由 @You Chen 分享，公号：vivo 互联网技术授权。
正文从这开始～～
介绍可以在微信小程序上应用的端智能技术方案，聚焦 TensorFlow.js 推理和微信原生推理，详细讲解这两种方案在项目中的应用过程，为小程序开发者提供可复用的端智能技术选型策略与工程化解决方案。
1 分钟看图掌握核心观点
随着 AI 浪潮的到来，各行各业都在利用 AI 赋能自身的业务，我们在 vivo + 云店项目上也进行了端智能探索，并成功应用到个性化商品推荐业务上，小程序端直接本地调用 AI 模型进行商品推荐，上线后商品点击率提升了 30%，取得了不错的业务效果，接下来介绍如何让微信小程序具备端智能能力。
【第3579期】OODA 循环与 Git Worktrees：来自 AI 辅助开发的九个启示
在项目启动之前我们进行了相关技术调研，发现完备的微信小程序端智能方案并不是很多，最终锁定了 TensorFlow.js 推理和微信原生推理这两种方案，它们有着相对完善的说明介绍，整体对比如下表所示。
推理方案
提供方
最低基础库版本
接入复杂度
TensorFlow.js 推理
谷歌
2.7.3
复杂
微信原生推理
微信
2.30.0
简单
TensorFlow.js 推理TensorFlow.js 是谷歌开发的机器学习开源项目，致力于为 Javascript 提供具有硬件加速的机器学习模型训练和部署，在小程序端以插件的方式封装了 TensorFlow.js 库，方便小程序进行调用，同时需要配合安装相应的 TensorFlow.js npm 包来使用，接入步骤相对繁琐，但支持更低的微信基础库版本。
【第3535期】滴滴开源新项目Dimina星河，打造灵活轻量的小程序框架
微信原生推理是指调用小程序 AI 通用接口来进行推理，它是一套官方提供的通用 AI 模型推理解决方案，开发者无需关注其内部实现，只需要提供训练好的 ONNX 模型，小程序内部就可以自动完成推理。该方案接入步骤很少，目前还处于 Beta 阶段，所需要的微信基础库版本更高。
技术方案选定好以后进入到项目接入环节，接下来将会分别介绍 TensorFlow.js 推理和微信原生推理方案的接入细节以及在项目接入过程中遇到的一些问题。
模型处理在开始之前需要准备一个训练好的个性化商品推荐模型，本次模型是基于 TensorFlow 框架来进行训练的，模型训练完保存的格式是默认的 SavedModel 格式，但这个格式无法在小程序上直接使用，还需要进行相应的格式转换。
如果使用 TensorFlow.js 推理方案，要将 SavedModel 格式转换成 TensorFlow.js 格式，可以安装 @tensorflow/tfjs-converter 包，这个包专门用来将 TensorFlow 模型格式转换成 Web 端可加载的 TensorFlow.js 格式，具体转换命令如下： tensorflowjs_converter --input_format=keras_saved_model output output/tfjs_model执行命令后会生成 model.json 模型拓扑文件和后缀为.bin 的二进制权重文件。
ONNX 格式
如果使用微信原生推理方案，同样要将 SavedModel 格式转换成 ONNX 模型格式，可以安装 tf2onnx 库，这个库可以将 TensorFlow 模型格式转换成 ONNX 模型格式，具体转换命令如下：
python -m tf2onnx.convert --saved-model output --output output/model.onnx执行命令后会生成一个后缀为.onnx 的文件。
模型更新
通过前面的操作得到了不同格式的模型文件，我们将这些模型文件放到静态资源服务器上，小程序端远程加载模型文件，需要注意模型需要定期用最新的数据进行训练更新，因此在获取模型链接时我们通过服务端接口来获取，方便随时进行更新。
【第3525期】架起桥梁：在 Dart 中运行 JavaScript 模块
小程序 AI 能力封装小程序端相对于其它端有很大的不同，小程序代码包体积受限，单个包体积不能超过 2MB，因此在设计 AI 模型调用方案时需要考虑到代码体积问题。vivo + 云店项目是基于 uniapp 框架开发的小程序，接下来介绍不同推理方案的接入细节。
TensorFlow.js 推理接入
TensorFlow.js 推理在接入之前需要在小程序管理后台安装一下 TensorFlow.js 插件，直接搜索 wx6afed118d9e81df9 即可完成添加：
接着在项目代码仓启用该插件，并安装 TensorFlow.js 相关依赖，可以按需加载必要的依赖，本次项目使用了 tfjs-core、tfjs-layers、tfjs-backend-webgl 和 fetch-wechat 这几个包。安装完相关依赖以后，还需要初始化插件：
const plugin = requirePlugin('tfjsPlugin')plugin.configPlugin({
// polyfill fetch function
fetchFunc: fetchWechat.fetchFunc,
// inject tfjs runtime
tf,
// inject webgl backend
webgl,
// provide webgl canvas
canvas: wx.createOffscreenCanvas
})
初始化完成以后就可以加载使用模型了，然而在小程序打包上传的时候提示主包体积严重超包，原因是 TensorFlow.js 相关依赖包体积太大了，达到了 1.3MB 左右，严重影响了正常的业务代码体积，因此还要解决超包问题。我们最终采用了分包异步加载的方式将相关依赖剥离出主包，具体步骤如下：
【第1393期】小程序多业务线融合【完整分包业务接入】
1、封装分包组件
将 TensorFlow.js 相关依赖的引入和插件初始化逻辑封装到分包组件当中，采用事件传递的方式将引入的 TensorFlow 模块传递给父页面。
// 组件路径/sdkPackages/tensorflow/indeximport * as tf from '@tensorflow/tfjs-core'
import * as tfLayers from '@tensorflow/tfjs-layers'
...
export default {
mounted {
this.initTf
},
methods: {
initTf {
// 插件初始化
...
// 将引入的依赖模块以事件的方式抛出
this.$emit('start', { tf, tfLayers })
}
}
}
2、异步分包加载
{"path": "pages/demo/index",
"style": {
"navigationBarTitleText": "demo",
"componentPlaceholder": {
"tf-com": "view"
},
"usingComponents": {
"tf-com": "/sdkPackages/tensorflow/index"
}
}
}需要注意，父页面获取的异步分包组件传递的事件值和普通 Vue 组件传递的事件值不太一样，需要在 e.detail.args[0] 中获取到。
来源：云阳好先生做实事
