WebAI.js

1. 简介

• WebAI.js 是一个基于 OpenCV.js 和 ONNXRuntime 开发的一个 Web 前端 AI 模型部署工具

• 可通过在线体验网站 Hello WebAI.js 进行快速的体验试用

  

2. 特性

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

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

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

• 2.x 版本添加了比较完善的 ts 支持，优化了代码大小，将内联的 opencv.wasm 改为文件加载，API 进行了一些改动，主要修改了模型加载的 API

• 2.x 添加了全新的 API 文档，可直接跳转至 API 参考 页面进行查看

• 3.x 版本更新了新版本的 ONNXRuntime，Demo 中的图像分类模型已支持 WebGPU 加速，可直接调用本地 GPU 实现推理加速，OpenCV 也同步更新至 5.x 版本

• 3.x 版本更换了依赖导入方式，使用原生的 ESM 模块导入

3. 安装

1. HTML script 标签引入

   <!-- 最新版本 --><scripttype="module" src="https://cdn.jsdelivr.net/gh/AgentMaker/WebAI.js@dev_v3/dist/webai.min.mjs"></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 modelnewWebAI.Model(modelURL,sessionOption={logSeverityLevel: 4},init=null,preProcess=null,postProcess=null)->model// Base CV modelnewWebAI.CV(modelURL,inferConfig,sessionOption={logSeverityLevel: 4},getFeeds=null,postProcess=null)->modelCV// Detection modelnewWebAI.Det(modelURL,inferConfig,sessionOption={logSeverityLevel: 4},getFeeds=null,postProcess=null)->modelDet// Classification modelnewWebAI.Cls(modelURL,inferConfig,sessionOption={logSeverityLevel: 4},getFeeds=null,postProcess=null)->modelCls// Segmentation modelnewWebAI.Seg(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): 自定义模型后处理函数
  

• 模型推理

  // 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. 部署

• 在线体验网页：Hello WebAI.js

• 除了在线体验网页，也可以通过 node.js 借助 vite 构建工具快速在本地部署这个体验网页

  # 安装依赖
  $ npm install
  # 启动服务器调试
  $ npm run dev

• 部署完成后，就可以使用浏览器访问 http://localhost:3000/ 进行体验使用

7. 更多

• OpenCV.js 快速入门