WebAI.js:快速部署 PaddleDetection 模型至网页前端_副本
使用 WebAI.js 将 PaddleDetection 导出的模型部署至网页前端。
·
转载自AI Studio
标题项目链接https://aistudio.baidu.com/aistudio/projectdetail/3386266
1. 介绍
- 本教程将介绍如何使用 PaddleDetection 套件导出推理模型并使用 WebAI.js 部署到网页前端
2. 同步代码
- 克隆 PaddleDetection 代码
!git clone https://github.com/PaddlePaddle/PaddleDetection --depth 1
2. 导出 Paddle 推理模型
-
PaddleDetection 的导出脚本位于 PaddleDetection/tools/export_model.py
-
更多详细的使用方法可参考 PaddleDetection 官方文档
-
作为演示,所以使用官方提供的 PPYOLO tiny 预训练模型进行导出,具体步骤如下:
- 切换工作目录
%cd ./PaddleDetection
- 安装依赖
!pip install -r requirements.txt
- 导出 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 模型
- 安装 Paddle2ONNX
!pip install paddle2onnx
- 模型转换
!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 \
nx \
--opset_version 12
4. 生成配置文件
-
使用配置文件转换器
-
手动编写配置文件,样例如下:
// 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. 快速部署
-
克隆 WebAI.js-Examples 项目:
$ git clone https://github.com/AgentMaker/WebAI.js-Examples
-
切换至示例目录:
$ cd ./ppdet
-
在代码中修改模型路径:
// main.js // 模型和配置文件建议放置于 'public' 目录下,使用路径 '/*' 即可以引用该目录中的文件 ... const modelURL = "/inference_model/model.onnx" const modelConfig = "/inference_model/configs.json" ...
-
安装依赖:
$ npm install
-
开发网页:
$ npm run dev # 通过浏览器访问 http://localhost:3000 来查看和测试网页
-
构建网页:
$ npm run build
-
预览构建完成的网页:
$ npm run preview # 通过浏览器访问 http://localhost:5000 来预览构建完成的网页
-
构建网页至 ‘…/docs’ 目录中:
$ npm run build:docs
-
部署网页至 Github/Gitee Page:
-
fork 这个项目
-
完成网页开发
-
构建网页至 ‘…/docs’ 目录中
-
启用项目的 Page 功能
-
设置 ‘…/docs’ 目录为 Page 功能的源目录
-
6. 网页预览
-
部署完成的网页预览图如下:
更多推荐
已为社区贡献1438条内容
所有评论(0)