WebAI.js 是基于 OpenCV.js 和 ONNXRuntime 的 Web 前端 AI 模型部署工具，支持 HTML 和 node.js 调用，可部署目标检测、图像分类、图像分割等 CV 模型，兼容 Paddle 系列套件部分模型，提供模型加载与推理 API 及使用示例。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
WebAI.js 是一个基于 OpenCV.js 和 ONNXRuntime 开发的一个 Web 前端 AI 模型部署工具
Github: AgentMaker/WebAI.js
可通过在线体验网站 Hello WebAI.js 进行快速的体验试用
PS. 因为 AIStudio 不太好使用 JavaScript 和部署网络服务，所以本项目仅包含文档介绍不包含任何可运行代码，如需使用请在本地进行调试运行
立即学习“前端免费学习笔记（深入）”；
WebAI.js 支持 HTML script 标签引入和 node.js 两种方式进行使用
目前支持目标检测 (Yolo / ssd / ...)、图像分类 (MobileNet / EfficientNet / ...)、图像分割(BiseNet / PPSeg / ...) 三类 CV 模型
目前支持 PaddleDetection / PaddleClas / PaddleSeg 三个套件部分导出模型的部署
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>
Npm 安装
$ npm install webai-js
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 |
模型加载
// 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) -> modelSegmodelURL(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 参考
以人脸检测模型为例，简单介绍如何使用 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>网页部署
下载模型文件
根据模型文件路径修改 HTML 代码，并将 HTML 代码保存为 index.html 文件
在 index.html 所在目录使用如下命令可以快速启动一个服务器：
$ npx light-server -s . -p 8080
通过浏览器访问网页：http://localhost:8080/ ，网页效果如下图所示：
以上就是WebAI.js：一个简单的网页前端部署工具的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
270
收藏
