WebAI.js：PaddleDetection 模型导出和部署

1. 介绍

• 本教程将介绍如何使用 PaddleDetection 套件导出推理模型并使用 WebAI.js 部署到网页前端
• 示例项目 GitHub：AgentMaker/WebAI.js-Examples

2. 同步代码

• 克隆 PaddleDetection 代码

  $ git clone https://github.com/PaddlePaddle/PaddleDetection --depth 1
  

2. 导出 Paddle 推理模型

• PaddleDetection 的导出脚本位于 PaddleDetection/tools/export_model.py

• 更多详细的使用方法可参考 PaddleDetection 官方文档

• 作为演示，所以使用官方提供的 PPYOLO tiny 预训练模型进行导出，具体步骤如下：

1. 切换工作目录

   $ cd ./PaddleDetection
   

2. 安装依赖

   $ pip install -r requirements.txt
   

3. 导出 Paddle 格式的推理模型

   # 使用脚本时通过命令行参数指定模型的配置文件、预训练模型、保存目录和当前运行的设备类型
   
   $ python tools/export_model.py \
       -c configs/ppyolo/ppyolo_tiny_650e_coco.yml \
       --output_dir=../inference_model \
       -o weights=https://paddledet.bj.bcebos.com/models/ppyolo_tiny_650e_coco.pdparams \
       use_gpu=False
   

3. 转换为 ONNX 模型

1. 安装 Paddle2ONNX

   $ pip install paddle2onnx
   

2. 模型转换

   # 使用时通过命令行参数指定 Paddle 推理模型的模型路径、模型文件名、参数文件名、保存文件路径和 ONNX 算子集的版本
   
   $ paddle2onnx \
       --model_dir ../inference_model/ppyolo_tiny_650e_coco \
       --model_filename model.pdmodel \
       --params_filename model.pdiparams \
       --save_file ../inference_model/ppyolo_tiny_650e_coco/model.onnx \
       --opset_version 12
   

4. 生成配置文件

1. 使用配置文件转换器

   • WebAI 的体验网站 中包含一个配置文件转换生成器

   • 可通过这个程序快速将 PaddleDetection 的配置文件转换为 WebAI.js 推理所需的配置文件

   • 转换器目前仍在持续开发中，目前可能无法兼容所有 PaddleDetection 的配置文件

   • PaddleDetection 导出的推理配置文件位于 ./inference_model/infer_cfg.yml

2. 手动编写配置文件，样例如下：

   // configs.json
   {
       "Preprocess": [
           {
               "type": "Decode", // 图像解码
               "mode": "RGB" // RGB 或 BGR
           },
           {
               "type": "Resize", //  图像缩放
               "interp": 1, // 插值方式
               "keep_ratio": false, // 保持长宽比
               "limit_max": false, // 限制图片的最大尺寸
               "target_size": [300, 300] // 目标尺寸 [H, W]
           },
           /*
           {
               "type": "Crop", // 图像中心裁切
               "crop_size": [224, 224] // 目标尺寸 [H, W]
           },
           */
           {
               "type": "Normalize", // 归一化
               "is_scale": false, // 是否缩放 (img /= 255.0)
               "mean": [127.5, 127.5, 127.5], // 均值
               "std": [127.5, 127.5, 127.5] // 标准差
           },
           {
               "type": "Permute" // 转置 (HWC -> CHW)
           }
       ],
       "label_list": [
           "aeroplane", "bicycle", "bird", "boat", "bottle", "bus", "car", 
           "cat", "chair", "cow", "diningtable", "dog", "horse", "motorbike", 
           "person", "pottedplant", "sheep", "sofa", "train", "tvmonitor"
       ] // 标签列表
   }
   

5. 快速部署

1. 克隆 WebAI.js-Examples 项目：

   $ git clone https://github.com/AgentMaker/WebAI.js-Examples
   

2. 切换至示例目录：

   $ cd ./ppdet
   

3. 在代码中修改模型路径:

   // main.js
   // 模型和配置文件建议放置于 'public' 目录下，使用路径 '/*' 即可以引用该目录中的文件
   
   ...
   const modelURL = "/ppyolo_tiny_650e_coco/model.onnx"
   const modelConfig = "/ppyolo_tiny_650e_coco/configs.json"
   ...
   

4. 安装依赖:

   $ npm install
   

5. 开发网页:

   $ npm run dev
   
   # 通过浏览器访问 http://localhost:3000 来查看和测试网页
   

6. 构建网页:

   $ npm run build
   

7. 预览构建完成的网页:

   $ npm run preview
   
   # 通过浏览器访问 http://localhost:5000 来预览构建完成的网页
   

8. 构建网页至 ‘…/docs’ 目录中:

   $ npm run build:docs
   

9. 部署网页至 Github/Gitee Page:

   1. fork 这个项目

   2. 完成网页开发

   3. 构建网页至 ‘…/docs’ 目录中

   4. 启用项目的 Page 功能

   5. 设置 ‘…/docs’ 目录为 Page 功能的源目录

6. 网页预览

• 部署完成的网页预览图如下：