WebAI.js：一个简单的网页前端部署工具

2. 特性

• WebAI.js 支持 HTML script 标签引入和 node.js 两种方式进行使用

• 目前支持目标检测 (Yolo / ssd / ...)、图像分类 (MobileNet / EfficientNet / ...)、图像分割(BiseNet / PPSeg / ...) 三类 CV 模型

• 目前支持 PaddleDetection / PaddleClas / PaddleSeg 三个套件部分导出模型的部署

3. 安装

1. HTML script 标签引入

2. Npm 安装

   $ npm install webai-js

4. 模型

• WebAI.js 使用 ONNX 模型进行模型推理，通过配置文件对模型的预处理进行配置

• 一个常规的模型包含如下两个文件: model.onnx / configs.json

• 其中 model.onnx 为模型文件，记录了模型的计算图和每层的参数，configs.json 为配置文件，记录了模型预处理的一些配置，如下为一个配置文件的具体内容：

  {    "Preprocess": [
          {            "type": "Decode", // 图像解码
              "mode": "RGB" // RGB 或 BGR
          },
          {            "type": "Resize", //  图像缩放
              "interp": 1, // 插值方式
              "keep_ratio": false, // 保持长宽比
              "limit_max": false, // 限制图片尺寸
              "target_size": [300, 300] // 目标尺寸
              
          },
          {            "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"
      ] // 标签列表}

• 项目中提供了多个已经过测试的预训练模型文件，具体文件位于 ./docs/pretrained_models 目录，也可在在线体验网页 Hello WebAI.js 中快速试用如下的模型，以下模型均来自 PaddleDetection / PaddleClas / PaddleSeg 提供预训练模型，具体的导出教程和兼容性表格将很快更新，更多其他套件、工具链的兼容适配也在稳步进行

  Model	Type	Source
  BlazeFace_1000e	Detection	PaddleDetection
  PPYOLO_tiny_650e_coco	Detection	PaddleDetection
  SSD_mobilenet_v1_300_120e_voc	Detection	PaddleDetection
  SSDLite_mobilenet_v3_small_320_coco	Detection	PaddleDetection
  EfficientNetB0_imagenet	Classification	PaddleClas
  MobileNetV3_small_x0_5_imagenet	Classification	PaddleClas
  PPLCNet_x0_25_imagenet	Classification	PaddleClas
  PPSEG_lite_portrait_398x224	Segmentation	PaddleSeg
  STDC1_seg_voc12aug_512x512_40k	Segmentation	PaddleSeg
  BiseNet_cityscapes_1024x1024_160k	Segmentation	PaddleSeg

5. API

• 模型加载

  // Base model(async) WebAI.Model.create(modelURL, sessionOption = { logSeverityLevel: 4 }, init = null, preProcess = null, postProcess = null) -> model// Base CV model(async) WebAI.CV.create(modelURL, inferConfig, sessionOption = { logSeverityLevel: 4 }, getFeeds = null, postProcess = null) -> modelCV// Detection model(async) WebAI.Det.create(modelURL, inferConfig, sessionOption = { logSeverityLevel: 4 }, getFeeds = null, postProcess = null) -> modelDet// Classification model(async) WebAI.Cls.create(modelURL, inferConfig, sessionOption = { logSeverityLevel: 4 }, getFeeds = null, postProcess = null) -> modelCls// Segmentation model(async) WebAI.Seg.create(modelURL, inferConfig, sessionOption = { logSeverityLevel: 4 }, getFeeds = null, postProcess = null) -> modelSeg

    modelURL(string): 模型链接/路径
    inferConfig(string): 模型配置文件链接/路径
    sessionOption(object): ONNXRuntime session 的配置
    getFeeds(function(imgTensor: ort.Tensor, imScaleX: number, imScaleY: number) => feeds:object): 自定义模型输入函数
    init(function(model: WebAI.Model) => void): 自定义模型初始化函数
    preProcess(function(...args) => feeds: object): 自定义模型预处理函数
    postProcess(function(resultsTensors: object, ...args) => result: any): 自定义模型后处理函数

• 模型推理

  

  网奇英文商城外贸系统

  网奇Eshop是一个带有国际化语言支持的系统，可以同时在一个页面上显示全球任何一种语言而没有任何障碍、任何乱码。在本系统中您可以发现，后台可以用任意一种语言对前台进行管理、录入而没有阻碍。而任何一个国家的浏览者也可以用他们的本国语言在你的网站上下订单、留言。用户可以通过后台随意设定软件语言，也就是说你可以用本软件开设简体中文、繁体中文与英文或者其他语言的网上商店。网奇Eshop系统全部版本都使用模

  下载

  // Base model(async) model.infer(...args)// Base CV model(async) modelCV.infer(...args)// Detection model(async) modelDet.infer(imgRGBA, drawThreshold=0.5) ->  bboxes// Classification model(async) modelCls.infer(imgRGBA, topK=5) ->  probs// Segmentation model(async) modelSeg.infer(imgRGBA) ->  segResults

    // 注：目前只能实现 BatchSize=1 的模型推理
  
    imgRGBA(cv.Mat): 输入图像
    drawThreshold(number): 检测阈值
    topK(number): 返回置信度前 K (K>0) 个结果，如果 K<0 返回所有结果
  
    bboxes({
        label: string, // 标签
        score: number, // 置信度
        color: number[], // 颜色（RGBA）
        x1: number, // 左上角 x 坐标
        y1: number, // 左上角 y 坐标
        x2: number, // 右下角 x 坐标
        y2: number // 右下角 y 坐标
    }[]): 目标检测包围框结果
    probs({
        label: string, // 标签
        prob: number // 置信度
    }[]): 图像分类置信度结果
    segResults({
        gray: cv.Mat, // 最大值索引图像（Gray）
        colorRGBA: cv.Mat, // 伪彩色图（RGBA）
        colorMap: { // 调色板
            lable: string, // 标签
            color: number[] // 颜色（RGBA）
        }[]
    }): 图像分割结果

• 更多 API 请参考文档：API 参考

6. 使用

• 以人脸检测模型为例，简单介绍如何使用 WebAI.js 在网页前端完成模型部署

• 作为演示，示例网页的搭建非常简单，只包含一个简单的 HTML 网页

• 编写网页

  • 网页比较简单，其中只包含如下几个元素:

    • 上传按钮：用于上传图像

    • 画布：用于绘制结果图像

    • 隐藏的图像：用于读取图像

    • 两个 JavaScript 脚本：一个用于加载 WebAI.js，另一个用于实现网页的功能

  • 具体的代码如下：

    
        
        
        
        
    
            Image:        
            
        
        
    
            
            @@##@@
    
            
            
        
    
        
        
    
        
        

• 网页部署

  1. 下载模型文件

  2. 根据模型文件路径修改 HTML 代码，并将 HTML 代码保存为 index.html 文件

  3. 在 index.html 所在目录使用如下命令可以快速启动一个服务器：

     $ npx light-server -s . -p 8080

  4. 通过浏览器访问网页：http://localhost:8080/ ，网页效果如下图所示：