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應用過程總體可以概括為三大步驟：

模型轉換

Paddle.js 初始化

結合業務使用推理能力

丨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，注冊小程序環境變量和合適的 backendimport* 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。
點擊進入獲得更多技術信息~~

總結

以上是生活随笔為你收集整理的Paddle.js PaddleClas 实战 ——『寻物大作战』AI 小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。