The environment

  • 10 64 – bit Windows
  • gtx 1050Ti
  • Yolov5 5.0 + PyTORch1.7 + Cu110
  • pyqt5

preface

Can you make a GUI interface for YoloV5, such as pyQt5 framework? This article, we will realize, nonsense not to say, first look at the effect

Interface elements are very simple, 2 function buttons, corresponding to the image and video detection, 1 image display area, display the image or video target detection results

Installation of basic Environment

Here we use the latest release 5.0 of YoloV5. The installation of dependent libraries is not covered in this article, but can be referred to as yoloV5 release 5.0

Next, install PyQt5 using the following command

pip install pyqt5 pyqt5-tools
Copy the code

UI Interface Design

The interface part of the design, the use of PyQT5 graphics design tool Designer, the advantage is easy to use, WHAT you see is what you get. The UI files generated when the design is complete can be easily converted into Python code by executing a single command.

First open Designer.exe and create the Main Window

The interface has two buttons and a text box (using text boxes to display images), corresponding to the Push button and label in PyQt5, searched and dragged from the widget box on the left into the middle workspace, and the attributes of the element can be modified on the right

2 buttons, arranged in a vertical layout

For button layouts and text boxes, use horizontal layouts

For adaptive layout, that is, to zoom in and out of the window while maintaining the scale of the interface elements, right-click in a blank space and choose Layout -> Horizontal layout

Layout properties are also modified as appropriate

Adjusted interface

Finally, save and generate a. UI file. Then, using the conversion tools provided by PyQt5, convert the UI file into Python code, as shown below

pyuic5.bat -o main.py untitled.ui
Copy the code

The generated code main.py looks like this

# -*- coding: utf-8 -*- # Form implementation generated from reading ui file '.\untitled.ui' # # Created by: PyQt5 UI Code Generator 5.9.2 # # WARNING! All changes made in this file will be lost! from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setObjectName("MainWindow") MainWindow.resize(800, 600) self.centralwidget = QtWidgets.QWidget(MainWindow) self.centralwidget.setObjectName("centralwidget") self.horizontalLayout_2 = QtWidgets.QHBoxLayout(self.centralwidget) self.horizontalLayout_2.setObjectName("horizontalLayout_2") self.horizontalLayout = QtWidgets.QHBoxLayout() self.horizontalLayout.setSizeConstraint(QtWidgets.QLayout.SetNoConstraint) self.horizontalLayout.setObjectName("horizontalLayout") self.verticalLayout = QtWidgets.QVBoxLayout() self.verticalLayout.setContentsMargins(-1, -1, 0, -1) self.verticalLayout.setSpacing(80) self.verticalLayout.setObjectName("verticalLayout") self.pushButton_img = QtWidgets.QPushButton(self.centralwidget) sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.MinimumExpanding) sizePolicy.setHorizontalStretch(0) sizePolicy.setVerticalStretch(0) sizePolicy.setHeightForWidth(self.pushButton_img.sizePolicy().hasHeightForWidth()) self.pushButton_img.setSizePolicy(sizePolicy) self.pushButton_img.setMinimumSize(QtCore.QSize(150, 100)) self.pushButton_img.setMaximumSize(QtCore.QSize(150, 100)) font = QtGui.QFont() font.setFamily("Agency FB") font.setPointSize(12) self.pushButton_img.setFont(font) self.pushButton_img.setObjectName("pushButton_img") self.verticalLayout.addWidget(self.pushButton_img, 0, QtCore.Qt.AlignHCenter) self.pushButton_video = QtWidgets.QPushButton(self.centralwidget) sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Expanding) sizePolicy.setHorizontalStretch(0) sizePolicy.setVerticalStretch(0) sizePolicy.setHeightForWidth(self.pushButton_video.sizePolicy().hasHeightForWidth()) self.pushButton_video.setSizePolicy(sizePolicy) self.pushButton_video.setMinimumSize(QtCore.QSize(150, 100)) self.pushButton_video.setMaximumSize(QtCore.QSize(150, 100)) font = QtGui.QFont() font.setFamily("Agency FB") font.setPointSize(12) self.pushButton_video.setFont(font) self.pushButton_video.setObjectName("pushButton_video") self.verticalLayout.addWidget(self.pushButton_video, 0, QtCore.Qt.AlignHCenter) self.verticalLayout.setStretch(0, 1) self.verticalLayout.setStretch(1, 1) self.horizontalLayout.addLayout(self.verticalLayout) self.label = QtWidgets.QLabel(self.centralwidget) self.label.setObjectName("label") self.horizontalLayout.addWidget(self.label) self.horizontalLayout.setStretch(0, 1) self.horizontalLayout.setStretch(1, 3) self.horizontalLayout_2.addLayout(self.horizontalLayout) MainWindow.setCentralWidget(self.centralwidget) self.menubar  = QtWidgets.QMenuBar(MainWindow) self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 23)) self.menubar.setObjectName("menubar") MainWindow.setMenuBar(self.menubar) self.statusbar = QtWidgets.QStatusBar(MainWindow) self.statusbar.setObjectName("statusbar") MainWindow.setStatusBar(self.statusbar) self.retranslateUi(MainWindow) QtCore.QMetaObject.connectSlotsByName(MainWindow) def retranslateUi(self, MainWindow): _translate = QtCore.QCoreApplication.translate MainWindow.setWindowTitle(_translate("MainWindow", Self.pushbutton_img. setText(_translate("MainWindow", Self.pushbutton_video.settext (_translate("MainWindow", "video ")) self.label.settext (_translate("MainWindow"," video ")) self.label.settext (_translate("MainWindow", "TextLabel"))Copy the code

Integrate YOLOv5 and PyQt5

With the main.py interface code above, we can add the yolov5 detection code to it. In plain English, this means porting the corresponding code from detect.py in Yolov5.

  1. Add a program entry

    The usual form of PyQt5

    if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    ui = Ui_MainWindow()
    ui.show()
    sys.exit(app.exec_())
Copy the code

  2. Add the constructor __init__ to the Ui_MainWindow class

    Here is mainly the call of several methods, including the construction of the interface, initialization of the slot function, initialization of the timer, initialization of the model

  3. Image detection

    Image selection and detection of YoloV5 are put in a method. After detection, the image with detection box is displayed in the text box

  4. Video detection

    Video selection and video detection are processed in two methods (both slot). If a video is selected, the timer starts, and then the video detection method starts

The code download

The project has been posted on Github, github.com/xugaoxiang/… If you feel useful, please give a star.

The resources

  • Install CUDA and CUDNN for Windows 10
  • Yolov5 model training
  • PyQt5 series tutorials