使用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.mzph.cn/web/57817.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt 练习做一个登录界面

练习做一个登录界面 效果 UI图 UI代码 <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0"><class>Dialog</class><widget class"QDialog" name"Dialog"><property name"ge…

ArcGIS软件之“新建中学最适合地址”地图制作

目录 最终效果图(全文图中的颜色类似即可&#xff0c;形状一样为标准&#xff09;第一步、设置现有中学的欧式距离第二步、将计算好的欧式距离 进行重分类第三步、进行核密度分析第四步、进行人口密度的重分类第五步、进行土地使用的要素转栅格第六步、对上一步进行重分类第七步…

就业市场变革:AI时代,我们将如何评估人才?

内容概要 在这个充满变革的时代&#xff0c;就业市场正被人工智能&#xff08;AI&#xff09;技术深刻改变。随着技术的进步&#xff0c;传统的人才评估方式逐渐显示出其局限性。例如&#xff0c;过去依赖于纸质简历和面试评估的方式在快速变化的环境中难以准确识别真实的人才…

Linux Kernel Programming (个人读书笔记)

目录 Before everything begins 笔者的环境 关于如何在Arch Linux下载Virtual Box 下载一个镜像&#xff0c;然后开启一个简单的虚拟机 在Ubuntu虚拟机下东西 配置我们的内核 啥是KConfig和KBuild? 构建内核配置选择 启动&#xff01;一个好的内核配置的开始 使用分发…

【传知代码】智慧医疗:纹理特征VS卷积特征

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;传知代码 欢迎大家点赞收藏评论&#x1f60a; 目录 论文概述纹理特征和深度卷积特征算法流程数据预处理方法纹理特征提取深度卷积特征提取分类网络搭建代码复现BLS_Model.py文件——分类器搭建py…

算法深度剖析:前缀和

文章目录 前言一、一维前缀和模板二、二维前缀和模板三、寻找数组的中心下标四、除自身以外数组的乘积五、和为 K 的子数组六、和可被 K 整除的子数组七、连续数组八、矩阵区域和 前言 本章将深度剖析前缀和&#xff0c;以及总结前缀和模板。 前缀和是一种在算法和数据处理中…

leetcode双指针题目总结

文章目录 283. 移动零题目描述解题 11. 盛最多水的容器题目描述解法解释时间复杂度 15. 三数之和题目描述解法思路解释优势 42. 接雨水题目描述解答具体思路 283. 移动零 题目描述 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非…

Android——显式/隐式Intent

概述 在Android中&#xff0c;Intent是各个组件之间信息通信的桥梁&#xff0c;它用于Android各组件的通信。 Intent 的组成部分 一、显式 Intent 第一种方式 Intent intent new Intent(this, ActFinishActivity.class);startActivity(intent);第二种方式 Intent intent …

时序预测 | Matlab基于TSA-LSTM-Attention被囊群优化算法优化长短期记忆网络融合注意力机制多变量多步时间序列预测

时序预测 | Matlab基于TSA-LSTM-Attention多变量多步预测 目录 时序预测 | Matlab基于TSA-LSTM-Attention多变量多步预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 时序预测 | Matlab基于TSA-LSTM-Attention被囊群优化算法优化长短期记忆网络融合注意力机制多变量多…

PAT甲级-1041 Be Unique

题目 题目大意 从一组数字中选出第一个唯一出现的数&#xff0c;输出该数。如果没有&#xff0c;则输出None。 思路 哈希的思想&#xff0c;将数值作为索引&#xff0c;对应该数值出现的次数&#xff0c;然后遍历数组即可。 注意第一个数字是指数字的个数&#xff0c;不是数…

LLM 使用 Elastic 实现可观察性:Azure OpenAI (二)

作者&#xff1a;来自 Elastic Muthukumar Paramasivam•Lalit Satapathy 我们为 Azure OpenAI GA 包添加了更多功能&#xff0c;现在提供提示和响应监控、PTU 部署性能跟踪和计费洞察&#xff01; 我们最近宣布了 Azure OpenAI 集成的 GA。你可以在我们之前的博客 LLM 可观察性…

Python画图3个小案例之“一起看流星雨”、“爱心跳动”、“烟花绚丽”

源码如下&#xff1a; import turtle # 导入turtle库&#xff0c;用于图形绘制 import random # 导入random库&#xff0c;生成随机数 import math # 导入math库&#xff0c;进行数学计算turtle.setup(1.0, 1.0) # 设置窗口大小为屏幕大小 turtle.title("流星雨动画&…

二十九、Python基础语法(继承-上)

一、概念介绍 继承&#xff1a;继承描述的是类与类之间的关系&#xff0c;集成之后子类对象可以直接使用父类中定义的方法的属性&#xff0c;可以减少代码冗余&#xff0c;提高编码效率。 二、继承语法 三、继承例子 # 定义一个父类 Animal class Animal:def __init__(self,…

‌频率和波长之间存在反比关系‌

‌频率和波长之间存在反比关系‌。根据波速公式vλf&#xff0c;在同种介质中&#xff0c;波的传播速度相同&#xff0c;因此波长和频率的乘积不变&#xff0c;即λv/f。这意味着频率越高&#xff0c;波长越短&#xff1b;频率越低&#xff0c;波长越长。 ‌频率和波数的转换公…

Rust 力扣 - 238. 除自身以外数组的乘积

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 这题主要有个关键点&#xff0c;就是元素能取0&#xff0c;然后我们分类讨论元素为0的数量 如果数组中存在至少两个元素为0&#xff0c;则每个元素的除自身以外的乘积为0如果数组中仅存在一个0&#xff0c;则为…

我们来学mysql -- 连接(原理版)

我们来学mysql -- 连接 题记两张表驱动表 题记 回到初学者的视角&#xff0c;navicat或命令窗口&#xff0c;呈现一行行数据&#xff0c;类比为excel工作薄更是深入人心通过join将多表的记录关联起来&#xff0c;这似乎也没啥问题只是好像是那么回事&#xff0c;又…似乎有想说…

Ubuntu 22.04安装部署

一、部署环境 表 1‑1 环境服务版本号系统Ubuntu22.04 server lts运行环境1JDK1.8前端WEBNginx1.8数据库postgresqlpostgresql13postgis3.1pgrouting3.1消息队列rabbitmq3.X(3.0以上)运行环境2erlang23.3.3.1 二、安装系统 2.1安装 1.安装方式&#xff0c;选第一条。 2.选择…

红队-windows基础篇

声明 通过学习 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频,做出的文章如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 一.Windows&linux介绍 微软windows操作系统&#xff0c;…

QT 从ttf文件中读取图标

最近在做项目时&#xff0c;遇到需要显示一些特殊字符的需求&#xff0c;这些特殊字符无法从键盘敲出来&#xff0c;于是乎&#xff0c;发现可以从字体库文件ttf中读取显示。 参考博客&#xff1a;QT 图标字体类IconHelper封装支持Font Awesome 5-CSDN博客 该博客封装的很不错…

AnaTraf | 探秘计算机网络:网络流量分析与 TCP 标志位解析

AnaTraf 网络性能监控系统NPM | 全流量回溯分析 | 网络故障排除工具AnaTraf网络流量分析仪是一款基于全流量&#xff0c;能够实时监控网络流量和历史流量回溯分析的网络性能监控与诊断系统&#xff08;NPMD&#xff09;。通过对网络各个关键节点的监测&#xff0c;收集网络性能…