基于 PySide6 的 YOLOv8 目标检测可视化界面实现

也可以根据自己的需要安装对应的 torch 版本：

pip install torch==2.1.0 -i https://pypi.tuna.tsinghua.edu.cn/simple

2、安装 PySide6 工具包

**使用 pip 或者 conda 安装 PySide6，**打开你的终端或命令提示符，然后运行以下命令来安装 PySide6：

# 安装 PySide6 工具包 pip install PySide6 -i https://pypi.tuna.tsinghua.edu.cn/simple

3、安装 OpenCV 工具包

**使用 pip 或者 conda 安装 OpenCV，**打开你的终端或命令提示符，然后运行以下命令来安装 OpenCV：

# 安装 opencv 工具包 pip install opencv-python -i https://pypi.tuna.tsinghua.edu.cn/simple

这个命令会安装 OpenCV 的核心功能，包括图像处理、视频捕获等。如果你还需要额外的功能，比如对 OpenCV 的贡献模块（如 xfeatures2d、stitching 等），你可以安装 opencv-contrib-python:

# 安装 opencv 工具包 pip install opencv-contrib-python -i https://pypi.tuna.tsinghua.edu.cn/simple

三、导入必要的库

在你的 Python 脚本中，导入所需的库：

import os
from datetime import datetime
import json
import cv2
import torch
from PySide6.QtCore import pyqtSlot
from PySide6.QtGui import QIcon
from PySide6 import QtWidgets, QtCore, QtGui
from PySide6.QtCore import Qt, QDir
from ultralytics import YOLO

四、创建主窗口，初始化相关参数

class MyWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.init_gui()
        self.model = None
        self.timer = QtCore.QTimer()
        self.timer1 = QtCore.QTimer()
        self.cap = None
        self.video = None
        self.file_path = None
        self.base_name = None
        self.timer1.timeout.connect(self.video_show)

    def init_gui(self):
        self.folder_path = "./model_file" # 自定义修改：设置模型文件夹路径
        self.setFixedSize(1300, 650)
        self.setWindowTitle('目标检测') # 自定义修改：设置窗口名称
        self.setWindowIcon(QIcon("logo.jpg")) # 自定义修改：设置窗口图标
        central_widget = QtWidgets.QWidget(self)
        self.setCentralWidget(central_widget)
        main_layout = QtWidgets.QVBoxLayout(central_widget)

更换窗口背景图片：

# 自定义修改：设置窗口背景图 self.set_background_image('bg.jpg') 

五、编写页面布局

1、创建图片/视频展示区域

如上图所示，左侧是文件上传之后原图、原视频的展示区域；右侧是经模型加载并执行开始检测之后，用来展示预测结果的检测区。

页面布局代码如下：

# 界面上半部分：视频框 topLayout = QtWidgets.QHBoxLayout()
self.oriVideoLabel = QtWidgets.QLabel(self)
self.detectlabel = QtWidgets.QLabel(self)
self.oriVideoLabel.setFixedSize(530, 400)
self.detectlabel.setFixedSize(530, 400)
self.oriVideoLabel.setStyleSheet('border: 2px solid #ccc; border-radius: 10px; margin-top:75px;')
self.detectlabel.setStyleSheet('border: 2px solid #ccc; border-radius: 10px; margin-top: 75px;')
topLayout.addWidget(self.oriVideoLabel)
topLayout.addWidget(self.detectlabel)
main_layout.addLayout(topLayout)

在这段代码中，包含一个水平布局（QHBoxLayout），用于放置两个视频显示的标签（QLabel）。这两个标签分别用于显示原始视频（oriVideoLabel）和处理后的视频或检测结果（detectLabel）。

2、创建日志打印区域

在基于 YOLO 的目标检测当中，我们需要记录一些操作日志，从而方便后续维护。此外，在实际生产环境中，如果置信度大于我们所设定的阈值，需要产生告警信息，而这些信息需要记录标签预测框的坐标信息、产生告警的时间以及告警的标签内容。

如上图所示，在启动程序之后会提示加载模型文件，之后进行文件上传，最后点击开始检测。在这个过程中会生成操作日志。

在日志打印区当中会生成JSON 字符串格式的日志信息，信息内容为当前预测框中的**告警信息，**包括：

• 标签名称："name": "道路积水",
• 置信度："confidence": 0.9243840575218201,
• 横坐标："x": 452.06036376953125,
• 纵坐标："y": 409.8131103515625,
• 预测框宽度："width": 1142.6134033203125,
• 预测框高度："height": 571.2572021484375

可以将上述告警信息封装之后以接口的形式传入相关数据平台进行分析和处理。

日志区域的页面布局代码如下：

# 创建日志打印文本框 self.outputField = QtWidgets.QTextBrowser()
self.outputField.setFixedSize(530, 180)

3、加载 YOLO 模型

下载 YOLO 预训练模型，选择自己的预测模型进行加载.....

修改模型本地路径：

def init_gui(self):
    self.folder_path = "./models" # 自定义修改：设置文件夹路径
    self.setFixedSize(1300, 650)
    self.setWindowTitle('目标检测') # 自定义修改：设置窗口名称
    self.setWindowIcon(QIcon("logo.jpg")) # 自定义修改：设置窗口图标
    central_widget = QtWidgets.QWidget(self)
    self.setCentralWidget(central_widget)
    main_layout = QtWidgets.QVBoxLayout(central_widget)

代码如下：

# 遍历文件夹并添加文件名到下拉框 for filename in os.listdir(self.folder_path):
    file_path = os.path.join(self.folder_path, filename)
    if os.path.isfile(file_path) and filename.endswith('.pt'): # 确保是文件且后缀为.pt
        base_name = os.path.splitext(filename)[0]
        self.selectModel.addItem(base_name) # 添加加载模型按钮
        self.loadModel = QtWidgets.QPushButton('🔄️加载模型') # 新建加载模型按钮
        self.loadModel.setFixedSize(100, 50)
        self.loadModel.setStyleSheet("""
            QPushButton { background-color: white; /* 正常状态下的背景颜色 */ border: 2px solid gray; /* 正常状态下的边框 */ border-radius: 10px; padding: 5px; font-size: 14px; }
            QPushButton:hover { background-color: #f0f0f0; /* 悬停状态下的背景颜色 */ }
        """)
        self.loadModel.clicked.connect(self.load_model) # 绑定 load_model 函数进行模型加载
        selectModel_layout.addWidget(self.selectModel) # 将下拉框加入到页面布局当中
        selectModel_layout.addWidget(self.loadModel) # 将按钮加入到页面布局当中

load_model 函数代码如下：

def load_model(self):
    filename = self.selectModel.currentText()
    full_path = os.path.join(self.folder_path, filename + '.pt')
    self.base_name = os.path.splitext(os.path.basename(full_path))[0]
    if full_path.endswith('.pt'): # 加载预训练模型
        self.model = YOLO(full_path)
        self.start_detect.setEnabled(True)
        self.stopDetectBtn.setEnabled(True)
        self.openImageBtn.setEnabled(True)
        self.confidence_slider.setEnabled(True)
        self.outputField.append(f'{datetime.now().strftime("%Y-%m-%d %H:%M:%S")} - 模型加载成功：{filename}')
        self.outputField.append(f'{datetime.now().strftime("%Y-%m-%d %H:%M:%S")} - 请选择置信度阈值')
    else:
        self.outputField.append(f'{datetime.now().strftime("%Y-%m-%d %H:%M:%S")} - 请重新选择模型文件！')
        print("Reselect model")

4、创建置信度阈值滑动条

你可以根据自己的需求自定义置信度阈值，value值会绑定模型预测的conf，在预测过程中实时生效，效果图如下：

页面布局代码如下：

# 创建一个置信度阈值滑动条 self.con_label = QtWidgets.QLabel('置信度阈值', self)
self.con_label.setStyleSheet('font-size: 14px; font-family: "Microsoft YaHei";') # 创建一个 QSlider，范围从 0 到 99（代表 0.01 到 0.99）
self.slider = QtWidgets.QSlider(Qt.Horizontal, self)
self.slider.setMinimum(1) # 0.01
self.slider.setMaximum(99) # 0.99
self.slider.setValue(50) # 0.5
self.slider.setTickInterval(10)
self.slider.setTickPosition(QtWidgets.QSlider.TicksBelow)
self.slider.setFixedSize(170, 30) # 创建一个 QDoubleSpinBox 用于显示和设置滑动条的值
self.spinbox = QtWidgets.QDoubleSpinBox(self)
self.spinbox.setButtonSymbols(QtWidgets.QAbstractSpinBox.NoButtons)
self.spinbox.setMinimum(0.01)
self.spinbox.setMaximum(0.99)
self.spinbox.setSingleStep(0.01)
self.spinbox.setValue(0.5)
self.spinbox.setDecimals(2)
self.spinbox.setFixedSize(60, 30)
self.spinbox.setStyleSheet('border: 2px solid gray; border-radius: 10px; ' 'padding: 5px; background-color: #f0f0f0; font-size: 14px;')
self.confidence_slider = QtWidgets.QWidget()
layout = QtWidgets.QVBoxLayout()
hlayout = QtWidgets.QHBoxLayout()
self.confidence_slider.setFixedSize(250, 64)
layout.addWidget(self.con_label)
hlayout.addWidget(self.slider)
hlayout.addWidget(self.spinbox)
layout.addLayout(hlayout)
self.confidence_slider.setLayout(layout)
self.confidence_slider.setEnabled(False) # 连接信号和槽
self.slider.valueChanged.connect(self.updateSpinBox)
self.spinbox.valueChanged.connect(self.updateSlider)

5、文件上传

文件上传操作包括图片上传、视频上传，支持 JPG 格式和 MP4 格式，以文件流的形式读取需要被检测的文件。

# 对上传的文件根据后缀名称进行过滤 file_path, file_type = file_dialog.getOpenFileName(self, "选择检测文件", filter='*.jpg *.mp4')

修改图片/视频上传路径：

def upload_file(self):
    self.outputField.append(f'{datetime.now().strftime("%Y-%m-%d %H:%M:%S")} - 请选择检测文件')
    file_dialog = QtWidgets.QFileDialog()
    file_dialog.setDirectory(QDir("./valid_file")) # 修改上传文件路径 

页面布局代码如下：

# 文件上传按钮 self.openImageBtn = QtWidgets.QPushButton('🖼️文件上传')
self.openImageBtn.setFixedSize(100, 65)
self.openImageBtn.setStyleSheet("""
    QPushButton { background-color: white; /* 正常状态下的背景颜色 */ border: 2px solid gray; /* 正常状态下的边框 */ border-radius: 10px; padding: 5px; font-size: 14px; margin-bottom: 15px; }
    QPushButton:hover { background-color: #f0f0f0; /* 悬停状态下的背景颜色 */ }
""")
self.openImageBtn.clicked.connect(self.upload_file) # 绑定 upload_file 事件
self.openImageBtn.setEnabled(False) # 初始化按钮默认不可操作，加载模型之后可以操作

文件上传成功之后会呈现在左侧的展示区域，效果图如下：

上传视频效果如下：

6、执行预测

图片预测效果图如下：

使用 **OpenCV（cv2）**库进行视频抽帧是一个常见的任务，可以用于从视频中提取特定的帧进行进一步处理或分析。

视频预测效果图如下：

页面布局代码如下：

# 执行预测按钮 self.start_detect = QtWidgets.QPushButton('🔍开始检测')
self.start_detect.setFixedSize(100, 50)
self.start_detect.setStyleSheet("""
    QPushButton { background-color: white; /* 正常状态下的背景颜色 */ border: 2px solid gray; /* 正常状态下的边框 */ border-radius: 10px; padding: 5px; font-size: 14px; }
    QPushButton:hover { background-color: #f0f0f0; /* 悬停状态下的背景颜色 */ }
""")
self.start_detect.clicked.connect(self.show_detect) # 绑定 show_detect 函数事件
self.start_detect.setEnabled(False)

模型预测的核心代码：

将视频帧进行抽取之后转为 QImage 格式对预测结果进行展示。

frame = self.model(frame, imgsz=[448, 352], device='cuda', conf=self.value) if torch.cuda.is_available() \
else self.model(frame, imgsz=[448, 352], device='cpu', conf=self.value)

7、停止检测

在视频检测的过程中可能发现上传错误，此时为了防止视频一直在后台检测导致占用内存，需要及时中断检测程序。

界面效果图如下所示：

日志打印区会输出'检测中断！'，检测区也会停在该视频的当前帧。

代码如下：

# 停止检测按钮 self.stopDetectBtn = QtWidgets.QPushButton('🛑停止')
self.stopDetectBtn.setFixedSize(100, 50)
self.stopDetectBtn.setEnabled(False)
self.stopDetectBtn.clicked.connect(self.stop_detect) # 绑定 stop_detect 中断检测事件
# 中断检测事件 def stop_detect(self):
    if self.timer.isActive():
        self.timer.stop()
    if self.timer1.isActive():
        self.timer1.stop()
    if self.cap is not None:
        self.cap.release()
        self.cap = None
        self.video = None
        self.ini_labels()
        self.outputField.append(f'{datetime.now().strftime("%Y-%m-%d %H:%M:%S")} - 检测中断！')
        self.file_path = None