最近在忙集团的项目申报，连熬了几个大夜，感觉头发都要掉光了，一直想把六月中旬搞出来的人脸检测算法给大家分享，一直没时间，今天必须写完，给兄弟们分享一下。

闲话不多说，直接上今天的干货，主要是用yolo v8做了人脸检测+Qt实现了实时显示界面的设计，先看看效果

今天主要分享的是交互界面的设计，如果有需要了解yolo怎么训练的兄弟可以留下自己的需求，争取下期出一个yolo训练的纯享版。

1. 界面介绍

先给兄弟们介绍一下这个界面的四个部分，

1. 左上是我们需要检测的画面，支持摄像头实时以及自己上传图片
2. 右上是经过算法检测后显示的结果
3. 左下是系统检测的日志
4. 右下是主要的按键区，分别代表开启监控、关闭监控、导出日志为txt文件，关闭系统

可以看出，我设计的界面布局还是比较常规的，但是我优化了按键区域的按钮显示效果，修改了日志区域的边框形式，整体看上去美观很多，做检测做到最后发现竟然是审美的比拼。

系统一开始启动时候是这样的：

单击左上角灰色区域的时候，相当于是用户自己上传图片，效果如下：

2. 实现步骤

1. 自己训练出.pt文件，或者直接从github或者csdn上面下载训练好的.pt文件
2. 写代码，初步实现界面布局
3. 规定每一个模块的功能
4. 优化界面显示

其实看起来步骤很简单，真正实现起来也很简单。我之前也没接触过PyQT，但是还是在一天之内就掌握了。

现在技术很发达，很多资源都可以在网上找到，有时候，会用就行，先跑起来，边用边优化。

3. tips

1. .pt文件要和界面文件放在同一个文件夹
2. 不明白的代码可以交给AI帮你解读
3. 先模仿再超越

4. 关键代码

界面的banner部分

        #显示文字
        banner_label.setText("监控系统 - 实时人脸检测（YOLOv8）")
        banner_label.setFixedHeight(50)
        #banner_label.setStyleSheet("font-size: 34px; font-weight: bold; background-color: #ddeeff;")
        banner_label.setStyleSheet("color: #4b5cc4;")
        banner_font = QFont("KaiTi", 32, QFont.Bold)  # 楷体，16号字，加粗
        banner_label.setFont(banner_font)

界面的布局

# === 主网格布局 ===
grid = QGridLayout()
# grid.setSpacing(30)
grid.setContentsMargins(20, 10, 20, 10)  # 上下左右边距
grid.setSpacing(20)  # 控件间距

左上角窗口–原始图片

        # 图像窗口1（左上：原始）
        self.image_label1 = ClickableLabel("原始图像")
        self.image_label1.setFixedSize(460, 330)

        self.image_label1.setStyleSheet("background-color: lightgray; border: 2px solid #75664d; color: #1f4e79;")
        self.image_label1.setAlignment(Qt.AlignCenter)
        self.image_label1.clicked_callback = self.on_image_label_clicked

        label_font = QFont("Microsoft YaHei", 24, QFont.Bold)
        self.image_label1.setFont(label_font)

右上角窗口–检测后的显示

        # 图像窗口2（右上：检测后）
        self.image_label2 = QLabel("检测结果")
        self.image_label2.setFixedSize(460, 330)

        self.image_label2.setStyleSheet("background-color: lightgray; border: 2px solid #75664d; color: #1f4e79;")
        self.image_label2.setAlignment(Qt.AlignCenter)


        self.image_label2.setFont(label_font)

左下角窗口–日志窗口

        # 日志窗口
        self.log_text = QTextEdit()
        self.log_text.setFixedHeight(120)
        self.log_text.setFixedWidth(460)
        self.log_text.setReadOnly(True)
        # self.log_text.setStyleSheet("background-color: #f5f5f5; border: 2px solid black;")
        self.log_text.setStyleSheet(log_style)
        self.log_text.setText("日志输出：\n系统启动成功...")

右下角窗口–按钮区域（最复杂）

 # 按钮区域
        button_grid = QGridLayout()
        self.btn1 = QPushButton("开始监控")
        self.btn2 = QPushButton("停止监控")
        self.btn3 = QPushButton("保存日志")
        self.btn4 = QPushButton("退出系统")

        # 你原始颜色的渐变色示例（深浅渐变）
        colors = {
            'btn1': {
                'start_color': '#a0c1b8',  # 稍微亮一点
                'end_color': '#688c81',  # 稍微深一点
                'hover_start': '#b3d1ca',
                'hover_end': '#799b8e',
                'pressed_start': '#506a62',
                'pressed_end': '#3b504b',
            },
            'btn2': {
                'start_color': '#f3d7db',
                'end_color': '#d9aeb4',
                'hover_start': '#f8e3e6',
                'hover_end': '#dca5af',
                'pressed_start': '#b69196',
                'pressed_end': '#936f75',
            },
            'btn3': {
                'start_color': '#8d9fb0',
                'end_color': '#4c5a6a',
                'hover_start': '#a1afbf',
                'hover_end': '#5a6776',
                'pressed_start': '#394251',
                'pressed_end': '#2d3440',
            },
            'btn4': {
                'start_color': '#66c0f4',
                'end_color': '#2e84bd',
                'hover_start': '#8ad0f7',
                'hover_end': '#4294d4',
                'pressed_start': '#246a9a',
                'pressed_end': '#1c4f6f',
            }
        }

        self.btn1.setStyleSheet(btn_style_template.format(**colors['btn1']))
        self.btn2.setStyleSheet(btn_style_template.format(**colors['btn2']))
        self.btn3.setStyleSheet(btn_style_template.format(**colors['btn3']))
        self.btn4.setStyleSheet(btn_style_template.format(**colors['btn4']))

其实写起来发现，每一个部分介绍，其实不如直接给兄弟们最终版代码，对照着看，往往学的更快。但是也会导致一部分人有了代码根本不打开，只是下载了，实际上并没有产生任何分享的意义。

如果有需要的兄弟可以斯我留下你的邮箱

5. 预告

下一期，帮兄弟们整理怎么训练yolo算法的，欢迎关注啊！