使用onnxruntime-web 运行yolov8-nano推理

ONNX(Open Neural Network Exchange)模型具有以下两个特点促成了我们可以使用onnxruntime-web 直接在web端上运行推理模型,为了让这个推理更直观,我选择了试验下yolov8 识别预览图片:

1. 跨平台兼容性

ONNX 是一种开放的格式,可以在不同的深度学习框架之间共享模型,如 PyTorch、TensorFlow、MXNet 和 Caffe2。这使得用户可以在一个框架中训练模型,然后在另一个框架中进行推理。

2. 模型标准化

ONNX 提供了一种标准化的模型表示,定义了操作符、数据类型和模型结构。这种标准化使得不同工具和库可以一致地理解和处理模型。

3. 高效性

ONNX 模型在推理时通常能够实现更高的效率,特别是在使用 ONNX Runtime 时。ONNX Runtime 是一个高性能的推理引擎,支持多种硬件加速(如 GPU、TPU 等)。

YOLOv8n 是 YOLOv8 系列中的 "nano" 版本,通常是指模型较小,参数较少,计算需求低。适合在资源受限的环境中使用,如移动设备和嵌入式系统。

首先需要下载这两个模型

yolov8n.onnx

nms-yolov8.onnx

https://huggingface.co/SpotLab/YOLOv8Detection/blob/3005c6751fb19cdeb6b10c066185908faf66a097/yolov8n.onnx

关于这两个模型可以多说两句,YOLOv8 和非极大值抑制(NMS)是目标检测任务中的两个关键组成部分。它们一起工作,以实现高效且精确的目标检测。以下是它们如何协同工作的详细说明:

1. YOLOv8 的工作原理

  • 目标检测:YOLOv8 模型接收输入图像,并通过其深度神经网络对图像进行处理,生成多个候选边界框和相应的置信度分数。这些边界框用于定位检测到的对象。
  • 多类别检测:模型还能为每个边界框预测对象的类别,通常是通过 softmax 函数生成类别概率。

2. NMS 的作用

  • 去除冗余检测:由于模型可能会为同一对象生成多个重叠的边界框,NMS 被用来过滤这些冗余的框。NMS 通过以下步骤工作:
    • 排序:根据置信度分数对所有预测框进行排序,选择置信度最高的框作为参考框。
    • 计算重叠:计算参考框与其他框之间的交并比(IoU)。
    • 阈值过滤:如果其他框与参考框的 IoU 超过设定的阈值,则认为这些框是冗余的,并将其移除。
    • 重复处理:对剩余框重复上述过程,直到所有框都被处理完。

3. 工作流程

  1. 输入图像:将图像输入到 YOLOv8 模型。
  2. 生成候选框:模型输出多个候选边界框和相应的置信度分数。
  3. 应用 NMS
    • 将所有候选框传递给 NMS。
    • NMS 处理并返回最终的边界框和类别标签,去除了冗余框,确保每个对象只保留一个最优框

使用python 代码进行检测的时候是这样用的

# 假设 model 是 YOLOv8 模型,image 是输入图像
boxes, scores, class_ids = model.predict(image)# 应用 NMS
final_boxes, final_scores, final_class_ids = nms(boxes, scores, threshold)# 结果可视化
for box, score, class_id in zip(final_boxes, final_scores, final_class_ids):draw_box(image, box, score, class_id)

在web项目里使用onnxruntime-web 要简单些

import React, { useState, useRef } from "react";
import cv from "@techstark/opencv-js";
import { Tensor, InferenceSession } from "onnxruntime-web";
import Loader from "./components/loader";
import { detectImage } from "./utils/detect";
import { download } from "./utils/download";
import "./style/App.css";const App = () => {const [session, setSession] = useState(null);const [loading, setLoading] = useState({ text: "Loading OpenCV.js", progress: null });const [image, setImage] = useState(null);const inputImage = useRef(null);const imageRef = useRef(null);const canvasRef = useRef(null);// Configsconst modelName = "yolov8n.onnx";const modelInputShape = [1, 3, 640, 640];const topk = 100;const iouThreshold = 0.45;const scoreThreshold = 0.25;// wait until opencv.js initializedcv["onRuntimeInitialized"] = async () => {const baseModelURL = `${process.env.PUBLIC_URL}/model`;// create sessionconst url =`${baseModelURL}/${modelName}`console.log(`url:${url}`)const arrBufNet = await download(url, // url["加载 YOLOv8", setLoading] // logger);const yolov8 = await InferenceSession.create(arrBufNet);const arrBufNMS = await download(`${baseModelURL}/nms-yolov8.onnx`, // url["加载 NMS model", setLoading] // logger);const nms = await InferenceSession.create(arrBufNMS);// warmup main modelsetLoading({ text: "model 预热...", progress: null });const tensor = new Tensor("float32",new Float32Array(modelInputShape.reduce((a, b) => a * b)),modelInputShape);await yolov8.run({ images: tensor });setSession({ net: yolov8, nms: nms });setLoading(null);};return (<div className="App">{loading && (<Loader>{loading.progress ? `${loading.text} - ${loading.progress}%` : loading.text}</Loader>)}<div className="header"><h1>onnxruntime-web 测试</h1></div><div className="content"><imgref={imageRef}src="#"alt=""style={{ display: image ? "block" : "none" }}onLoad={() => {detectImage(imageRef.current,canvasRef.current,session,topk,iouThreshold,scoreThreshold,modelInputShape);}}/><canvasid="canvas"width={modelInputShape[2]}height={modelInputShape[3]}ref={canvasRef}/></div><inputtype="file"ref={inputImage}accept="image/*"style={{ display: "none" }}onChange={(e) => {// handle next image to detectif (image) {URL.revokeObjectURL(image);setImage(null);}const url = URL.createObjectURL(e.target.files[0]); // create image urlimageRef.current.src = url; // set image sourcesetImage(url);}}/><div className="btn-container"><buttononClick={() => {inputImage.current.click();}}>打开图片</button>{image && (/* show close btn when there is image */<buttononClick={() => {inputImage.current.value = "";imageRef.current.src = "#";URL.revokeObjectURL(image);setImage(null);}}>关闭图片</button>)}</div></div>);
};export default App;
  • session 用于存储模型的推理会话。
  • loading 用于管理加载状态和进度。
  • image 存储用户选择的图像。
  • inputImageimageRefcanvasRef 是对 DOM 元素的引用。

上面加载的顺序是 在 OpenCV.js 加载完成后,异步加载 YOLOv8 和 NMS 模型。使用 download 函数从指定 URL 下载模型,并创建推理会话。模型有个预热的过程

创建一个形状为 const modelInputShape = [1, 3, 640, 640]  的空张量,并运行一次模型以进行预热,确保模型准备就绪。

页面使用 <canvas> 元素来绘制检测结果。

运行测试下效果

web使用onnx这个事给我很多启发,之前训练的一些模型完全可以在前端就实现推理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/3876.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

软件测试学习笔记丨测试平台的价值与体系

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/23405 测试平台的价值与体系 开发测试平台的前提&#xff1a; 已有的开源测试平台不能满足需要&#xff0c;不要轻易造轮子公司的测试体系健全当体系、测试技术等游刃有余&#xff0c;构建平台…

练习LabVIEW第四十题

学习目标&#xff1a; 用labvIEW做一个循环闪烁指示灯&#xff0c;要能够在前面板调节周期和占空比。 开始编写&#xff1a; 前面板 一个布尔指示灯一维数组&#xff0c;两个数值输入控件&#xff1b; 程序框图 添加一个while循环&#xff0c;循环内添加初始化数组&…

基于TRIZ理论的便携式光伏手机充电装置创新

随着智能手机功能的日益强大&#xff0c;电量消耗问题也日益凸显&#xff0c;尤其是在户外活动时&#xff0c;电量告急常常让人措手不及。面对这一挑战&#xff0c;基于TRIZ&#xff08;发明问题解决理论&#xff09;的创新思维&#xff0c;一款全新的便携式光伏手机充电装置应…

OpenOCD之flash write_image和program命令的区别

OpenOCD&#xff1a;Open On-Chip Debugger&#xff0c;自由开源的片上调试和编程工具。 OpenOCD所有的命令索引链接&#xff1a;请点击这里 OpenOCD官方使用手册&#xff1a;https://openocd.org/doc-release/pdf/openocd.pdf [flash write_image]命令 Command: flash write…

无需懂代码!用AI工具Bolt一键生成网站的入门指南!

​ ​ 随着AI技术的不断发展&#xff0c;许多原本需要技术门槛的操作正在被大大简化&#xff0c;甚至零基础的用户也可以轻松实现。 例如&#xff0c;AI生成网站工具Bolt就是这样一个可以帮助我们快速创建、实时预览并自动部署网站的平台。接下来&#xff0c;本文将带你深入了…

作为一名测试人,快来恶补F12的用法!

浏览器都内嵌了一个神奇的开发助手&#xff0c;只需轻敲 F12&#xff0c;它就能即刻现身&#xff0c;这就是我们常说的F12调试工具。 无论你是前端开发还是测试工程师&#xff0c;F12工具都是不可或缺的伙伴。 F12调试工具&#xff0c;简单、轻量&#xff0c;却功能强大。 一…

开源AI智能语音转写系统,提升法庭效率与透明度:精准记录庭审,助力智能司法

一、系统概述 在司法领域&#xff0c;庭审记录的精准度和完整性直接影响案件处理的公平公正。法庭实时语音转写系统通过思通数科AI多模态平台&#xff0c;结合尖端的语音识别技术和自然语言处理&#xff08;NLP&#xff09;&#xff0c;实现实时记录和精准转写&#xff0c;为司…

Linux上部署DNS服务器

1.搭建dns服务器能够对自定义的正向或者反向域完成数据解析查询。 2.配置从DNS服务器&#xff0c;对主dns服务器进行数据备份。 一&#xff0c;正反向解析&#xff1a; 关闭防火墙和selinux [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 在…

代码随想录算法训练营第三十三天 | 62.不同路径 63.不同路径

LeetCode 62.不同路径&#xff1a; 文章链接 题目链接&#xff1a;62.不同路径 思路&#xff1a; 动态规划 使用二维数组保存递推结果 ① dp数组及下标含义 dp[i][j]&#xff1a;表明从(0, 0)到下标为(i, j)的点有多少条不同的路径 ② 递推式&#xff1a; 机器人只能向下或向…

模板

1.非类型模板参数 模板参数分为类型形参与非类型形参&#xff08;都可以用缺省值&#xff09; 类型形参&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的参数类型名称 非类型形参&#xff1a;就是用一个常量作为类&#xff08;函数&#xff09;模板…

diffusion model 学习笔记

条件引导的 diffusion 对于无条件的DDPM 而言 p ( x t ∣ x 0 ) ∼ N ( α t ˉ x 0 , 1 − α t ˉ ⋅ I ) p(x_t | x_0) \sim \mathcal{N}( \sqrt{\bar{\alpha_t}} x_0, 1-\bar{\alpha_t} \cdot \mathrm{I} ) p(xt​∣x0​)∼N(αt​ˉ​ ​x0​,1−αt​ˉ​⋅I) 可以得到…

阿里云高并发测试-Redis缓存机制

创建接口 这里使用的是阿里云提供的接口服务直接做的测试&#xff0c;接口地址 curl http://localhost:8080/initData?tokenAppWithRedis 这里主要通过参数cacheFirstfalse和true来区分是否走缓存&#xff0c;正常的业务机制可能是通过后台代码逻辑自行控制的&#xff0c;这…

设计卷积神经网络CNN为什么不是编程?

上一篇&#xff1a;《搞清楚这个老六的真面目&#xff01;逐层‘剥开’人工智能中的卷积神经网络&#xff08;CNN&#xff09;》 序言&#xff1a;现在让我们开始走进卷积神经网络&#xff08;CNN&#xff09;的世界里。和传统编程完全不同&#xff0c;在人工智能的程序代码里…

气象仿真数据在光伏行业里面的作用

选址与规划 确定资源潜力区域&#xff1a;不同地区的太阳能资源、气候条件差异很大。通过对大量的气象仿真数据进行分析&#xff0c;可以准确评估不同地区的太阳辐射强度、日照时长、温度、湿度、风速风向以及降水情况等气象要素。规避潜在风险&#xff1a;一些地区可能存在极…

鸿蒙开发——进程模型与进程通信

1、进程模型 ❓ 什么是进程&#xff1f; 进程是一个正在执行的程序的实例。当我们启动一个程序时&#xff0c;操作系统会创建一个进程&#xff0c;分配给它所需的资源&#xff0c;如内存和CPU时间。每个进程至少有一个线程&#xff0c;即执行线程&#xff0c;负责执行程序的指…

Pod安装软件将CDN改为国内的镜像

1、碰到错误 在pod install的时候碰到以下的下载错误&#xff1a; 文字错误如下&#xff1a; CDN: trunk URL couldnt be downloaded: https://cdn.jsdelivr.net/cocoa/Specs/5/b/d/OpenCV/2.4.11/OpenCV.podspec.json Response: Timeout was reached CDN: trunk URL couldn…

Windows常用命令-病毒

1.常见端口对应的服务 ftp 21 tenlnet 23 80 web 80-89可能是web 443 ssl心脏滴血漏洞以及一些web漏洞测试 445 smb 1433 mssql 1521 oracle 2082/2083 cpanel主机管理系统登陆(国外用的较多) 2222 da虚拟主机管理系统登陆(国外较多) 3128 squid代理默认端口-漫游内…

DDD中的一些基础概念 观点摘录

系统复杂度来源于哪&#xff1f;也就是DDD存在意义 软件系统的复杂性主要体现在三个方面。 隐晦&#xff1a;一是抽象层面的隐晦&#xff0c;抽象系统时&#xff0c;每个人都有自己特定的视角&#xff0c;你需要站在对方的角度才能明白他为什么这么做&#xff1b;其次是实现层…

统信UOS开发环境支持shell

内置了Bash等流行的Shell环境,用户可编写自动化脚本,极大地提高了系统管理和应用开发效率。 文章目录 一、环境部署1. shell开发环境安装2. shell开发环境配置二、代码示例shell开发案例三、常见问题1. 文件处理2. 错误处理3. 跨平台兼容性一、环境部署 1. shell开发环境安装…

使用compare做简单的点云滤波,并另存为文件

一、打开compare软件后&#xff0c;打开一个pcd文件 二、点击显示的pcd文件对象&#xff0c;出现如图黄色框框 三、点击上边的菜单栏的这个标志 四、出现如下图&#xff0c;此时调整红绿蓝就可以简单的做一下背景的滤波操作 五、我调整蓝色按钮后将背景点云去除&#xff0c;点…