NennAI.js

1. 简介

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

2. 特性

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

3. 安装

1. HTML script 标签引入

 <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/nennai.min.js'></script>
   ```
   
2. Npm 安装

   ```bash
   $ npm install nennweb-js
   ```

## 4. 模型
* NennWeb.js 使用 ONNX 模型进行模型推理，通过配置文件对模型的预处理进行配置

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

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

   ```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"
       ] // 标签列表
   }
   ```
## 5. API 
* 模型加载

   ```js
   // Base model
   new NennAI.Model(modelURL, sessionOption = { logSeverityLevel: 4 }, init = null, preProcess = null, postProcess = null) -> model

   // Base CV model
   new NennAI.CV(modelURL, inferConfig, sessionOption = { logSeverityLevel: 4 }, getFeeds = null, postProcess = null) -> modelCV

   // Detection model
   new NennAI.Det(modelURL, inferConfig, sessionOption = { logSeverityLevel: 4 }, getFeeds = null, postProcess = null) -> modelDet

   // Classification model
   new NennAI.Cls(modelURL, inferConfig, sessionOption = { logSeverityLevel: 4 }, getFeeds = null, postProcess = null) -> modelCls

   // Segmentation model
   new NennAI.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: NennAI.Model) => void): 自定义模型初始化函数
       preProcess(function(...args) => feeds: object): 自定义模型预处理函数
       postProcess(function(resultsTensors: object, ...args) => result: any): 自定义模型后处理函数

* 模型推理

   ```js
   // 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）
           }[]
       }): 图像分割结果

## 6. 部署
* 通过 node.js 借助 vite 构建工具快速在本地部署这个体验网页

   ```bash
   # 安装依赖
   $ npm install

   # 启动服务器调试
   $ npm run dev
   ```

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

## 7. 更多
* [OpenCV.js 快速入门](./docs/tutorials/opencv.md)