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. 网页预览

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

    WebAI.js:PaddleDetection 模型导出和部署_第1张图片

你可能感兴趣的:(WebAI.js,模型部署,javascript,深度学习,paddlepaddle,前端)