WebAI.js: exportación e implementación del modelo PaddleDetection

1. Introducción

• Este tutorial presentará cómo usar la suite PaddleDetection para exportar un modelo de inferencia e implementarlo en la parte frontal de la página web usando WebAI.js
• Proyecto de ejemplo GitHub: AgentMaker/WebAI.js-Examples

2. Código de sincronización

• Clona el código de PaddleDetection

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

2. Exportar modelo de inferencia de Paddle

• El script de exportación de PaddleDetection se encuentra en PaddleDetection/tools/export_model.py

• Para un uso más detallado, consulte la documentación oficial de PaddleDetection

• Como demostración, use el modelo de preentrenamiento diminuto oficial de PPYOLO para exportar, los pasos específicos son los siguientes:

1. cambiar directorio de trabajo

   $ cd ./PaddleDetection
   

2. instalar dependencias

   $ pip install -r requirements.txt
   

3. Exportar el modelo de inferencia en formato 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. Convertir al modelo ONNX

1. Instalar Paddle2ONNX

   $ pip install paddle2onnx
   

2. conversión de modelo

   # 使用时通过命令行参数指定 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. Generar archivos de configuración

1. Usa el convertidor de perfiles

   • El sitio web de experiencia de WebAI incluye un generador de conversión de perfiles

   • Este programa puede convertir rápidamente el archivo de configuración de PaddleDetection al archivo de configuración requerido para la inferencia de WebAI.js

   • El convertidor aún está en desarrollo continuo y es posible que no sea compatible con todos los perfiles de PaddleDetection en este momento

   • El archivo de configuración de inferencia exportado por PaddleDetection se encuentra en ./inference_model/infer_cfg.yml

2. Escriba manualmente el archivo de configuración, el ejemplo es el siguiente:

   // 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. Despliegue rápido

1. Clone el proyecto WebAI.js-Examples:

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

2. Cambie al directorio de ejemplos:

   $ cd ./ppdet
   

3. Modifique la ruta del modelo en el código:

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

4. Dependencias de instalación:

   $ npm install
   

5. Desarrollar página web:

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

6. Construye la página web:

   $ npm run build
   

7. Vista previa de la página web completa:

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

8. Cree la página web en el directorio '…/docs':

   $ npm run build:docs
   

9. Implemente la página web en Github/Gitee Page:

   1. bifurcar este proyecto

   2. Desarrollo web completo

   3. Cree la página web en el directorio '…/docs'

   4. Habilitar la función de página del proyecto

   5. Establezca el directorio '…/docs' como el directorio de origen para la funcionalidad de la página

6. Vista previa de la página web

• La imagen de vista previa de la página web desplegada es la siguiente: