0


使用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 代码进行检测的时候是这样用的

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

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

  1. import React, { useState, useRef } from "react";
  2. import cv from "@techstark/opencv-js";
  3. import { Tensor, InferenceSession } from "onnxruntime-web";
  4. import Loader from "./components/loader";
  5. import { detectImage } from "./utils/detect";
  6. import { download } from "./utils/download";
  7. import "./style/App.css";
  8. const App = () => {
  9. const [session, setSession] = useState(null);
  10. const [loading, setLoading] = useState({ text: "Loading OpenCV.js", progress: null });
  11. const [image, setImage] = useState(null);
  12. const inputImage = useRef(null);
  13. const imageRef = useRef(null);
  14. const canvasRef = useRef(null);
  15. // Configs
  16. const modelName = "yolov8n.onnx";
  17. const modelInputShape = [1, 3, 640, 640];
  18. const topk = 100;
  19. const iouThreshold = 0.45;
  20. const scoreThreshold = 0.25;
  21. // wait until opencv.js initialized
  22. cv["onRuntimeInitialized"] = async () => {
  23. const baseModelURL = `${process.env.PUBLIC_URL}/model`;
  24. // create session
  25. const url =`${baseModelURL}/${modelName}`
  26. console.log(`url:${url}`)
  27. const arrBufNet = await download(
  28. url, // url
  29. ["加载 YOLOv8", setLoading] // logger
  30. );
  31. const yolov8 = await InferenceSession.create(arrBufNet);
  32. const arrBufNMS = await download(
  33. `${baseModelURL}/nms-yolov8.onnx`, // url
  34. ["加载 NMS model", setLoading] // logger
  35. );
  36. const nms = await InferenceSession.create(arrBufNMS);
  37. // warmup main model
  38. setLoading({ text: "model 预热...", progress: null });
  39. const tensor = new Tensor(
  40. "float32",
  41. new Float32Array(modelInputShape.reduce((a, b) => a * b)),
  42. modelInputShape
  43. );
  44. await yolov8.run({ images: tensor });
  45. setSession({ net: yolov8, nms: nms });
  46. setLoading(null);
  47. };
  48. return (
  49. <div className="App">
  50. {loading && (
  51. <Loader>
  52. {loading.progress ? `${loading.text} - ${loading.progress}%` : loading.text}
  53. </Loader>
  54. )}
  55. <div className="header">
  56. <h1>onnxruntime-web 测试</h1>
  57. </div>
  58. <div className="content">
  59. <img
  60. ref={imageRef}
  61. src="#"
  62. alt=""
  63. style={{ display: image ? "block" : "none" }}
  64. onLoad={() => {
  65. detectImage(
  66. imageRef.current,
  67. canvasRef.current,
  68. session,
  69. topk,
  70. iouThreshold,
  71. scoreThreshold,
  72. modelInputShape
  73. );
  74. }}
  75. />
  76. <canvas
  77. id="canvas"
  78. width={modelInputShape[2]}
  79. height={modelInputShape[3]}
  80. ref={canvasRef}
  81. />
  82. </div>
  83. <input
  84. type="file"
  85. ref={inputImage}
  86. accept="image/*"
  87. style={{ display: "none" }}
  88. onChange={(e) => {
  89. // handle next image to detect
  90. if (image) {
  91. URL.revokeObjectURL(image);
  92. setImage(null);
  93. }
  94. const url = URL.createObjectURL(e.target.files[0]); // create image url
  95. imageRef.current.src = url; // set image source
  96. setImage(url);
  97. }}
  98. />
  99. <div className="btn-container">
  100. <button
  101. onClick={() => {
  102. inputImage.current.click();
  103. }}
  104. >
  105. 打开图片
  106. </button>
  107. {image && (
  108. /* show close btn when there is image */
  109. <button
  110. onClick={() => {
  111. inputImage.current.value = "";
  112. imageRef.current.src = "#";
  113. URL.revokeObjectURL(image);
  114. setImage(null);
  115. }}
  116. >
  117. 关闭图片
  118. </button>
  119. )}
  120. </div>
  121. </div>
  122. );
  123. };
  124. export default App;
  • session 用于存储模型的推理会话。
  • loading 用于管理加载状态和进度。
  • image 存储用户选择的图像。
  • inputImageimageRefcanvasRef 是对 DOM 元素的引用。

上面加载的顺序是 在 OpenCV.js 加载完成后,异步加载 YOLOv8 和 NMS 模型。使用

  1. download

函数从指定 URL 下载模型,并创建推理会话。模型有个预热的过程

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

页面使用

  1. <canvas>

元素来绘制检测结果。

运行测试下效果

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

标签: YOLO

本文转载自: https://blog.csdn.net/u011564831/article/details/143441017
版权归原作者 狂奔solar 所有, 如有侵权,请联系我们删除。

“使用onnxruntime-web 运行yolov8-nano推理”的评论:

还没有评论