转载自AI Studio

标题 项目链接https://aistudio.baidu.com/aistudio/projectdetail/3437461

1. 简介

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

  • Github: AgentMaker/WebAI.js

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

  • PS. 因为 AIStudio 不太好使用 JavaScript 和部署网络服务，所以本项目仅包含文档介绍不包含任何可运行代码，如需使用请在本地进行调试运行

2. 特性

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

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

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

3. 安装

  1. HTML script 标签引入

    <!-- 最新版本 -->
<script src='https://cdn.jsdelivr.net/npm/webai-js/dist/webai.min.js'></script>

<!-- 1.1.4 版本 -->
<script src='https://cdn.jsdelivr.net/npm/webai-js@1.1.4/dist/webai.min.js'></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 提供预训练模型，具体的导出教程和兼容性表格将很快更新，更多其他套件、工具链的兼容适配也在稳步进行

    ModelTypeSource
    BlazeFace_1000eDetectionPaddleDetection
    PPYOLO_tiny_650e_cocoDetectionPaddleDetection
    SSD_mobilenet_v1_300_120e_vocDetectionPaddleDetection
    SSDLite_mobilenet_v3_small_320_cocoDetectionPaddleDetection
    EfficientNetB0_imagenetClassificationPaddleClas
    MobileNetV3_small_x0_5_imagenetClassificationPaddleClas
    PPLCNet_x0_25_imagenetClassificationPaddleClas
    PPSEG_lite_portrait_398x224SegmentationPaddleSeg
    STDC1_seg_voc12aug_512x512_40kSegmentationPaddleSeg
    BiseNet_cityscapes_1024x1024_160kSegmentationPaddleSeg

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): 自定义模型后处理函数

  • 模型推理

    // 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，另一个用于实现网页的功能

    • 具体的代码如下：

      <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebAI.js PaddleDet Example</title>
</head>
<body>
    <div>
        Image:
        <!-- 上传按钮 -->
        <input type="file" accept="image/*" id="inputFile" disabled='true'>
    </div>
    <div>
        <!-- 图像元素 -->
        <img src="" alt="" id="imgDom" style="display: none">

        <!-- 画布元素 -->
        <canvas id='canvasDom'></canvas>
    </div>

    <!-- 加载 WebAI.js -->
    <script src='https://cdn.jsdelivr.net/npm/webai-js/dist/webai.min.js'></script>

    <!-- 功能脚本 -->
    <script>
    // 获取各个网页元素
    const imgDom = document.getElementById('imgDom')
    const canvasDom = document.getElementById('canvasDom')
    const inputFile = document.getElementById('inputFile')

    // 设置模型的路径
    const modelURL = './blazeface_1000e/model.onnx'
    const modelConfig = './blazeface_1000e/configs.json'

    // 当窗口加载完成时
    window.onload = async function (e) {
        // 加载模型
        window.model = await WebAI.Det.create(modelURL, modelConfig)

        // 启用图片上传按钮
        inputFile.disabled = false
    }

    // 当上传的图像改变时
    inputFile.onchange = function (e) {
        // 设置图像
        if (e.target.files[0]) {
            imgDom.src = URL.createObjectURL(e.target.files[0])
        }
    }

    // 当图像完成加载时
    imgDom.onload = async function (e) {
        // 读取图像
        let imgRGBA = cv.imread(imgDom)

        // 获取检测结果
        let bboxes = await model.infer(imgRGBA)

        // 绘制检测结果
        let imgShow = await WebAI.drawBBoxes(imgRGBA, bboxes)

        // 显示结果图像
        cv.imshow(canvasDom, imgShow)

        // 删除图像对象
        imgRGBA.delete()
        imgShow.delete()
    }
    </script>
</body>
</html>

  • 网页部署

    1. 下载模型文件

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

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

      $ npx light-server -s . -p 8080

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

    5. 更多细节可参考文档：WebAI.js 快速使用

7. 教程（后续更新）

  1. PaddleDetection 模型导出、转换和部署

  2. PaddleClas 模型导出、转换和部署

  3. PaddleSeg 模型导出、转换和部署

  4. OpenCV.js 快速入门和 API 速览

  5. ONNXRuntime.js 快速入门和 API 速览

# 前端 # javascript # python # paddlepaddle
Logo
百度飞桨AI Studio社区

学大模型，用大模型上飞桨星河社区！每天8点V100G算力免费领！免费领取ERNIE 4.0 100w Token >>>

更多推荐

cover

利用Amazon Bedrock畅玩Claude 3等多种领先模型，抢占AI高地(体验倒计时4小时)

avatar 百度飞桨星河社区
cover

RAPTOR：索引树状 RAG，使用树结构来捕捉文本的高级和低级细节

avatar 百度飞桨星河社区

RAG介绍

LlamaIndex是一个基于大型语言模型（LLM）的应用程序数据框架，旨在连接LLM与外部数据，特别是私有或特定领域的数据，以实现更准确的文本生成和知识增强。

avatar 百度飞桨星河社区