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
  1. 安装依赖
$ pip install -r requirements.txt
  1. 导出 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
  1. 模型转换
# 使用时通过命令行参数指定 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
  1. 手动编写配置文件，样例如下：
// 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
  1. 切换至示例目录：
$ cd ./ppdet
  1. 在代码中修改模型路径:
// main.js
// 模型和配置文件建议放置于 'public' 目录下，使用路径 '/*' 即可以引用该目录中的文件

...
const modelURL = "/ppyolo_tiny_650e_coco/model.onnx"
const modelConfig = "/ppyolo_tiny_650e_coco/configs.json"
...
  1. 安装依赖:
$ npm install
  1. 开发网页:
$ npm run dev

# 通过浏览器访问 http://localhost:3000 来查看和测试网页
  1. 构建网页:
$ npm run build
  1. 预览构建完成的网页:
$ npm run preview

# 通过浏览器访问 http://localhost:5000 来预览构建完成的网页
  1. 构建网页至 ‘…/docs’ 目录中:
$ npm run build:docs
  1. 部署网页至 Github/Gitee Page:
  1. fork 这个项目
  2. 完成网页开发
  3. 构建网页至 ‘…/docs’ 目录中
  4. 启用项目的 Page 功能
  5. 设置 ‘…/docs’ 目录为 Page 功能的源目录

6. 网页预览

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

paddlenlp调用本地模型 paddle模型部署_深度学习