Paddle.js&PaddleClas实战——『寻物大作战』AI小游戏

冷面豪情

关键词：AI、Paddle.js 、PaddleClas、WebRTC、WebGL、小程序、视频流1. 前言AI 自诞生以来就应用在各个科技前沿领域，随着发展进程加快，在娱乐方面也有越来越多的趣味性游戏开始将AI融入其中。『寻物大作战』正是一款基于 AI 能力打造的趣味性小游戏，目的就是让玩家通过游戏的方式感受 AI 的魅力。『寻物大作战』项目的背后所依赖的正是目前 AI 领域最热门的深度学习技术，通过一套?端到端的图像分类模型?来实现物体识别的效果。虽然受限于数据，它目前还是一款初级阶段的游戏，不过麻雀虽小，五脏俱全，整体开发过程囊括了?数据处理、模型设计、模型训练、上线部署?，四位一体的全部流程！所依赖的技术主要包含两大部分：百度飞桨图像分类套件?PaddleClas?和基于 JavaScript 的前端深度学习推理引擎?Paddle.js。接下来将对这两部分进行详细说明。构建神经网络/深度学习模型的基本步骤2.?PaddleClasPaddleClas?作为“开箱即用”的图像分类套件，拥有?180+?预训练模型，都只需经过简单配置，即可完成从训练到部署的全流程工作。近年来，深度学习技术越发的火热，计算机视觉在生活中得到了越来越多的应用，但受制于深度学习技术对庞大算力的需求，其在手机等算力有限设备上的应用总是捉襟见肘，以图像识别任务为例，高精度的网络模型往往意味着高算力的需求，『寻物大作战』能够在手机小程序中实现，而且可以针对视频流进行实时推理，其背后正是?PaddleClas?近期所推出的轻量骨干网络模型?PP-LCNet。相关模型下载链接：https://github.com/PaddlePaddle/PaddleClas。PP-LCNet?模型以推理速度作为优化指标，特别针对?Intel CPU?平台所设计，同时兼顾?ARM?等移动端平台，在速度与精度的平衡上更为优秀，与现有SOTA模型相比，真正做到速度更快、精度更高。此外经过验证，PP-LCNet?在目标检测、语义分割等下游视觉任务上同样具有优秀的性能。与其他模型的对比如图1-1。图 1-1 模型性能对比3. Paddle.jsPaddle.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=?--paramPath=?--outputDir= ?{//?推理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。此次小游戏是我们为大家提供底层基础能力抛砖引玉，我们将集思广益，带来更多的创意和玩法。欢迎各位扫码入群，和开发者们一起交流，共同建设 Paddle.js 吧！Paddle.js 技术交流群