WebAI.js：快速部署 PaddleSeg 模型至网页前端

1. 介绍

本教程将介绍如何使用 PaddleSeg 套件导出推理模型并使用 WebAI.js 部署到网页前端

转载自AI Studio 项目链接https://aistudio.baidu.com/aistudio/projectdetail/3482364

2. 同步代码

克隆 PaddleSeg 代码

!git clone https://github.com/PaddlePaddle/PaddleSeg --depth 1

2. 导出 Paddle 推理模型

PaddleSeg 的导出脚本位于 PaddleSeg/export.py
更多详细的使用方法可参考 PaddleSeg 官方文档
作为演示，所以使用官方文档中提供的示例模型进行模型导出，具体步骤如下：

%cd ./PaddleSeg

下载官方提供的 BiseNet V2 预训练模型

!wget https://paddleseg.bj.bcebos.com/dygraph/cityscapes/bisenet_cityscapes_1024x1024_160k/model.pdparams -P bisenet_cityscapes_1024x1024_160k

导出 Paddle 格式的推理模型
- 目前导出时无需加上 argmax 算子

!python export.py \
    --config configs/bisenet/bisenet_cityscapes_1024x1024_160k.yml \
    --model_path bisenet_cityscapes_1024x1024_160k/model.pdparams \
    --save_dir bisenet_cityscapes_1024x1024_160k \
    --without_argmax

3. 转换为 ONNX 模型

安装 Paddle2ONNX

!pip install paddle2onnx

模型转换

!paddle2onnx \
    --model_dir=./bisenet_cityscapes_1024x1024_160k \
    --model_filename=model.pdmodel \
    --params_filename=model.pdiparams \
    --save_file=./bisenet_cityscapes_1024x1024_160k/model.onnx \
    --opset_version=12

4. 生成配置文件

使用配置文件转换器
- WebAI 的体验网站中包含一个配置文件转换生成器
- 可通过这个程序快速将 PaddleSeg 导出的配置文件转换为 WebAI.js 推理所需的配置文件
- 转换器目前仍在持续开发中，目前可能无法兼容所有 PaddleSeg 的配置文件
- PaddleSeg 导出的推理配置文件位于 deploy.yaml

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

// 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 ./ppseg
```

目录结构：

- public # 服务器公开目录
  - ppseg_lite_portrait_398x224 # 模型文件目录
    - configs.json # 配置文件
    - model.onnx # 模型文件
- index.html # 网页
- main.js # 功能代码
- package.json # 项目配置文件

项目详情：
- 网页中包含如下几个简单组件：
  - 图像上传按钮：用于上传图像
  - 隐藏图像：用于读取图像
  - 画布：用于显示分割结果图像
  - 功能代码：用于实现功能
- 网页功能：
  1. 加载图像分割模型
  2. 对上传的图像进行分割
  3. 将分割结果图像输出显示至网页中
- 网页预览：
- 更多详情请参考代码实现：index.html / main.js

在代码中修改模型路径（如果需要）:

// main.js
// 模型和配置文件建议放置于 'public' 目录下，使用路径 '/*' 即可以引用该目录中的文件

...
const modelURL = "/bisenet_cityscapes_1024x1024_160k/model.onnx"
const modelConfig = "/bisenet_cityscapes_1024x1024_160k/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:
1. fork 这个项目
2. 完成网页开发
3. 构建网页至 ‘…/docs’ 目录中
4. 启用项目的 Page 功能
5. 设置 ‘…/docs’ 目录为 Page 功能的源目录