WebAI.js：一个简单的网页前端部署工具
WebAI.js 是基于 OpenCV.js 和 ONNXRuntime 的 Web 前端 AI 模型部署工具，支持 HTML 和 node.js 调用，可部署目标检测、图像分类、图像分割等 CV 模型，兼容 Paddle 系列套件部分模型，提供模型加载与推理 API 及使用示例。
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. 安装
HTML script 标签引入
登录后复制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 提供预训练模型，具体的导出教程和兼容性表格将很快更新，更多其他套件、工具链的兼容适配也在稳步进行
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，另一个用于实现网页的功能
具体的代码如下：
登录后复制WebAI.js PaddleDet Example Image:@@##@@
网页部署
下载模型文件
根据模型文件路径修改 HTML 代码，并将 HTML 代码保存为 index.html 文件
在 index.html 所在目录使用如下命令可以快速启动一个服务器：
$ npx light-server -s . -p 8080登录后复制
通过浏览器访问网页：https://localhost:8080/ ，网页效果如下图所示：
相关攻略
FDUSD脱锚惊魂夜：币安生态稳定币的信任危机与系统性风险 2025年4月2日夜间，加密货币市场经历了一场突如其来的“压力测试”。由香港First Digital Trust Limited发行的美元稳定币FDUSD，在市场上演了惊心动魄的脱锚跳水，其兑USDT价格一度暴跌至0 8726美元。这场震
最近又折腾了下 Obsidian 的 Git 插件，虽然也有点麻烦，但它是适合我的。下面介绍下怎么配置和使用。 第一次使用 Obsidian 是在 2024 年，这是翻阅之前的文章 《Obsidia
这项由华为技术有限公司、南洋理工大学、香港大学和香港中文大学联合完成的突破性研究发表于2026年1月，论文编号为arXiv:2601 01426v1。研究团队通过一种名为SWE-Lego的创新训练方
12 月 27 日消息，科技媒体 NeoWin 今天（12 月 27 日）发布博文，报道称 AI 代码编辑器 Windsurf 本周发布 Wave 13 版，通过大幅升级多智能体工作流、性能可访问
NEO（小蚁区块链）旨在构建智能经济网络。NEO通过资产数字化和智能合约实现自动化管理，用户需在支持NEO交易的平台注册账户并获取数字货币，选择合适的交易对后，即可下单交易并确认。交易完成后，可在账户中查看NEO资产，或转移至个人数字储存中安全保管NEO。
热门专题
热门推荐
加密货币行业翘首以盼的监管里程碑，终于有了实质性进展。美国证券交易委员会（SEC）主席保罗·阿特金斯（Paul Atkins）近日证实，那份允许加密项目在早期获得注册豁免权的“安全港”框架提案，已经正式送抵白宫，进入了最终审查阶段。 在范德堡大学与区块链协会联合举办的数字资产峰会上，阿特金斯透露了这
微策略Strategy报告：第一季录得144 6亿美元浮亏 再斥资约3 3亿美元买进4871枚比特币 市场震荡的威力有多大？看看Strategy的最新季报就明白了。根据其最新向美国证管会(SEC)提交的8-K报告，受市场剧烈波动影响，这家公司所持的比特币在第一季度录得了一笔惊人的数字——144 6亿
稳定币巨头Tether的动向，向来是加密世界的风向标。这不，它向Web3基础设施的版图扩张，又迈出了关键一步。公司执行长Paolo Ardoino在社交平台X上透露，其工程团队正在全力“烹制”一个新项目——去中心化搜索引擎 “Hypersearch”。这个消息一出，立刻引发了行业的广泛猜想。 采用D
基地位于Coinbase旗下以太坊Layer2网络Base的Seamless Protocol，日前正式宣告了服务的终结。这个曾经吸引了超过20万用户的原生DeFi借贷协议，在运营不到三年后，终究没能跑赢时间。它主打的核心产品是Integrated Leverage Markets（ILMs）——一
PAAL代币揭秘：深度解析Web3社区治理的核心钥匙 在去中心化自治组织的浪潮中，谁真正掌握了项目的话语权？PAAL代币提供了一套系统化的答案。它不仅是生态内流转的价值媒介，更是开启链上治理大门的核心凭证。通过持有并质押PAAL代币，用户能够对协议升级、资金分配乃至战略方向等关键事务投出决定性的一票