1. 前言

AI 自诞生以来就应用在各个科技前沿领域，随着发展进程加快，在娱乐方面也有越来越多的趣味性游戏开始将AI融入其中。『寻物大作战』正是一款基于 AI 能力打造的趣味性小游戏，目的就是让玩家通过游戏的方式感受 AI 的魅力。

『寻物大作战』项目的背后所依赖的正是目前 AI 领域最热门的深度学习技术，通过一套 端到端的图像分类模型 来实现物体识别的效果。虽然受限于数据，它目前还是一款初级阶段的游戏，不过麻雀虽小，五脏俱全，整体开发过程囊括了 数据处理、模型设计、模型训练、上线部署 ，四位一体的全部流程！所依赖的技术主要包含两大部分：百度飞桨图像分类套件 PaddleClas 和基于 JavaScript 的前端深度学习推理引擎 Paddle.js。接下来将对这两部分进行详细说明。

构建神经网络/深度学习模型的基本步骤

2. PaddleClas

PaddleClas 作为“开箱即用”的图像分类套件，拥有 180+ 预训练模型，都只需经过简单配置，即可完成从训练到部署的全流程工作。

近年来，深度学习技术越发的火热，计算机视觉在生活中得到了越来越多的应用，但受制于深度学习技术对庞大算力的需求，其在手机等算力有限设备上的应用总是捉襟见肘，以图像识别任务为例，高精度的网络模型往往意味着高算力的需求，『寻物大作战』能够在手机小程序中实现，而且可以针对视频流进行实时推理，其背后正是 PaddleClas 近期所推出的轻量骨干网络模型 PP-LCNet。相关模型下载链接：https://github.com/PaddlePaddle/PaddleClas。

PP-LCNet 模型以推理速度作为优化指标，特别针对 Intel CPU 平台所设计，同时兼顾 ARM 等移动端平台，在速度与精度的平衡上更为优秀，与现有SOTA模型相比，真正做到速度更快、精度更高。此外经过验证，PP-LCNet 在目标检测、语义分割等下游视觉任务上同样具有优秀的性能。与其他模型的对比如图1-1。

图 1-1 模型性能对比

3. Paddle.js

Paddle.js 是百度飞桨基于 JavaScript 的深度学习框架，也是国内首款开源前端推理框架，该项目发展至今已形成一套完整的全链路前端 AI 解决方案，如图2-1 所示。

图 2-1 Paddle.js 2.1.0

在模型预处理阶段，使用 X2Paddle 和 paddlejs-converter 模型转换工具，可将业内常用的模型转换为浏览器友好格式（model.json & chunk.dat ）；在推理预测阶段，通过 @paddlejs/paddlejs-core 注册推理引擎完成整个推理流程；在计算方案选择方面，目前支持 WebGL、WebGPU、WebAssembly、NodeGL、Plain JS 等多种计算方案。Paddle.js 考虑到使用者在落地 AI 应用时经常需要处理数据流，提供了paddlejs-mediapipe 数据流处理工具，支持 WebRTC 视频流、轻量 OpenCV 等工具。为了方便使用者快速落地常见 AI 能力，提供了 paddlejs-models，内含多种常见 AI 能力 SDK，目前已开源的有：HumanSeg 人像分割、MobileNetV2 物品分类、Gesture 手势识别、OCR 文本识别。在兼容性方面，Paddle.js 不仅覆盖了主流 PC 浏览器（Chrome、Safari、Edge 和 Firefox） 和手机浏览器，还支持在微信小程序和百度小程序上使用。『寻物大作战』落地在微信小程序中，接下来将详细说明整体开发过程。

使用 Paddle.js 开发AI应用过程总体可以概括为三大步骤：
1. 模型转换
2. Paddle.js 初始化
3. 结合业务使用推理能力

丨1. 模型转换

模型转换步骤主要目的是将模型转换为适用前端开发环境的格式，使用工具正是上文提及的 paddlejs-converter。该工具需要运行在 python 环境中，使用前请注意配置环境并控制 python 版本。转换过程仅需执行一行命令，执行 convertToPaddleJSModel.py 文件并指定原始模型文件地址、模型参数文件地址、最终模型输出地址。转换后会得到 modle.json 模型结构文件与 chunk_*.dat 二进制参数文件。

python convertToPaddleJSModel.py --modelPath=<fluid_model_file_path> --paramPath=<fluid_param_file_path> --outputDir=<paddlejs_model_directory

丨2. Paddle.js 初始化

Paddle.js 的引入和其他的前端依赖库一样。不同点在于，当在小程序环境中使用 Paddle.js 时，还需要额外引入 paddlejsPlugin 小程序插件，引入该插件的原因是由于小程序个别 API 与浏览器 API 存在差别，插件正是抹平二者之间的不同。引入插件的过程在微信小程序插件文档中已详细说明。

参考链接：https://mp.weixin.qq.com/wxopen/plugindevdoc？appid=wx7138a7bb793608c3&token=1208574117&lang=zh_CN

引入完成后，就可以在业务代码中注册 Paddle.js。

// 引入 paddlejs 和 paddlejs-plugin，注册小程序环境变量和合适的 backend

import* as paddlejs from'@paddlejs/paddlejs-core';

import'@paddlejs/paddlejs-backend-webgl';

const plugin = requirePlugin('paddlejs-plugin');

plugin.register(paddlejs, wx);



...



// 初始化

const runner = new paddlejs.Runner({modelPath, feedShape, mean, std});

await runner.init();

Paddle.js 注册首先需要创建 Runner 类的引擎实例，需指明所使用的模型地址及相关参数，随后调用 init API 即可完成整个初始化过程。

丨3.结合业务使用推理能力

在完成上述两步后，小程序就已经具备了 AI 能力，接下来结合『寻物大作战』业务场景说明如何使用 Paddle.js 的推理能力。

『寻物大作战』小游戏主体玩法是在规定时间内利用手机摄像头去匹配题目中的物品。（微信扫码 图2-2 即可体验）

图 2-2 「寻物大作战」小程序码

主体实现思路可以归纳为，利用 Paddle.js 持续预测摄像头视频流中的图像信息，判断和题目物品是否相符。

// 注册回调数 处理视频流帧

const listener = cameraContext.onCameraFrame(frame => {

// 推理

const weightArr = await runner.predict(frame);

// 获取置信度数组最大项的索引

const maxIdx = res.index0f(Math.max.apply(null, weightArr));

// 从物品列表中找到索引对应的物品

const result = mobilenetMap[`${maxItem}`];

// 结合业务场景选择结果使用方式

// ...

});



//开始捕获视频流

listener.start();

核心代码如上，小程序相机组件的 onCameraFrame 方法接收一个回调函数，会实时向回调函数中传入当前摄像头中的图像。针对传入的每帧图像使用 Paddle.js 进行预测，预测方法是 Paddle.js 的 predict API。该函数作为 Paddle.js 的推理 API，会根据不同的模型而产出具有不同意义的结果。本次使用的是物品分类模型，产出的结果是一个置信度数组，代表当前图像与各个物品匹配的置信度，置信度数组中最大一项所对应的物品就是最终的预测物品索引，从代码层面来看，需要对 predict 的输出 weightArr 取数值最大项的索引 maxIdx，从物品列表 mobilenetMap 中获取对应物品信息。

4. 性能分析

推理运算耗时在一定程度上会影响游戏的流畅度，耗时越少，用户感受越好。那么 Paddle.js 的推理耗时性能究竟如何？

我们在使用 WebGL 计算方案的情况下，针对不同系统机型进行了推理耗时测试，在红米 K30 Pro上单帧推理耗时为 32.1 毫秒，在 iPhoneX 上为 49.24 毫秒。从数据结果可以看出，使用 Paddle.js 进行预测的方案对比采用网络传输数据至服务端进行推理的方案，性能优势显而易见！因此在处理需要推理结果具有较好实时性的需求时，采用 Paddle.js 的方案将是更优的选择。

Paddle.js 作为前端深度学习推理框架，不仅提供了模型转换、模型优化、性能工具和预训练模型库，其中预训练模型库包含了人像分割、文字识别、手势识别及物品分类等模型的SDK， 提供了开箱即用的 AI 能力，帮助用户快速实现 AI 效果。在性能方面通过图优化（算子融合）、计算向量化、GPU 全流程以及 FP16 量化等优化策略提升推理性能，给用户更好的使用体验。同时 Paddle.js 也提供了全套的模型加密方案保证用户模型安全。

说了这么多，感兴趣的同学们肯定迫不及待了，下面就送上 Paddle.js 项目的传送门：https://github.com/PaddlePaddle/Paddle.js。

点击进入获得更多技术信息~~