基于YOLOv8 Web的安全帽佩戴识别检测系统的研究和设计，数据集+训练结果+Web源码

在这里插入图片描述

摘要

在工地，制造工厂，发电厂等地方，施工人佩戴安全帽能有效降低事故发生概率，在工业制造、发电等领域需要进行施工人员安全帽监测。目前大多数的 YOLO 模型还拘泥于公司、企业开发生产的具体产品中，大多数无编程基础的人们并不能直接使用深度学习模型，如施工监测采用的方案大多是人工巡逻监控和査看监控视频，这类方式往往会出现人力资源消耗大，管理成本高，效率低，漏检和误检概率相对较高的问题。在手机、电脑人手一台的时代，方便快捷的网页无疑是最好的选择，它不占用任何内存，随用随开。Gradio 调用简单、接口丰富可以直观呈现深度学习模型，而 Hugging Face 能够提供计算资源，实现永久托管。基于此，本文基于 Gradio 设计了一个 Web 端的安全帽佩戴识别检测系统，用户只需要上传图像，就可以得到自己的预测结果，可支持图片检测、视频实时检测、摄像头实时检测。因此，搭建基于YOLOv8 Web 目标识别算法的无人监管检测系统来实时监测现场施工人员是否佩戴安全帽，具有工程价值和实用意义。

🎓一、YOLOv8原始版本代码下载

官网的源码下载地址： YOLOv8官网代码

官网打不开的话，从我的网盘下载就行，网盘下载地址: YOLOv8原始版本源码下载，提取码: rpe7

注意注意注意：如果在我之前的文章下载过 YOLOv8 源码，不用重新下载了，没有特殊说明都是用同一个版本的源码

🍀🍀1.YOLOv8模型结构图

根据 yolov8n.yaml 画出 yolo 整体结构图，如下图所示

🍀🍀2.目标检测通用模型训练教程

模型训练链接: 手把书教你使用YOLOv8训练自己的数据集(附YOLOv8模型结构图)

🎓二、Web界面设计与实现

🍀🍀1.界面设计

本文旨在设计一个结构简洁、直观明了、服务于社区应用和个人用户的系统。此系统主要由前端界面和后台模块两部分组成。用户通过前端界面提交待预测图像、视频、摄像头、后台模块做出分类判断，再反馈给用户预测结果。系统整体框架设计图如下所示：

在这里插入图片描述

🍀🍀1.界面实现

用户访问网页链接，即可进入到我们的安全帽佩戴识别检测系统，界面如下所示：

在这里插入图片描述
运行结果如下：

基于 Gradio 构建的安全帽佩戴识别检测系统，给出了前端交互界面和后台模块的整体架构图，并加以实现，最后进行了系统的演示，界面简洁、操作简单、交互友好，适合日常和社区基层级别用户的应用。

🎓三、代码实现细节

（1）gradio 调试模型

为了方便 debug，需要设置 gr.Blocks() 等于 demo，这个是 grdaio 框架目前写死的方式，不知道以后会不会有其他方式更方便调试，意思就是我们在该文件修改了代码，后端会数据实时更新到前端，不用重新在运行一次代码，进入调试模式，在控制台输入 gradio 文件名 就行，如我的代码都写在 WebUI.py 文件，那么运行命令就是：gradio WebUI.py

with gr.Blocks() as demo:
    """
	该方法体这里可以定义一些前端组件，也可以自定义 CSS 样式，
	具体可以参考官网，来选择不同组件，如按钮、文本框、图片显示组件等。
	"""

if __name__ == '__main__':
    demo.launch()

（2）自定义CSS

.custom-upload 是上传文件按钮的类名的元素
.gradio-container 是背景的类名的元素
.lg.secondary 是按钮的类名的元素
.lg.secondary:hover 是鼠标放到按钮处改变样式的类名的元素

css = """
       <style>
            .custom-upload {
                width: 300px;
                height: 175px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 2px dashed #ccc;
                border-radius: 5px;
                padding: 10px;
                margin-top: 10px;
                font-size: 16px;
                color: #555;
            }
            
            
            
            .gradio-container{
               background: linear-gradient(200deg,#e3c5eb,#a9c1ed);
            }

             .lg.secondary{
                background: #b0d4f1; /* 浅蓝色背景 */
                t
            }

            .lg.secondary:hover {
                background: #91c2eb; 
            }
            /* 文件上传样式
            .block.custom-upload.svelte-12cmxck{
             background: #b0d4f1;
            }
             */


            footer.svelte-1rjryqp {
                display: none !important;
            }   

        </style>

    """
    gr.HTML(css)
    gr.HTML("<h1 style='text-align: center'>基于深度学习的佩戴安全帽检测系统</h1>")
    gr.Markdown(value="<hr>")

把 css 定义的样式传入 gr.HTML 就可以生效了

（3）模型预测核心代码

模型预测核心代码，首先读取训练好的模型，使用 model.predict 方法进行图片、视频、摄像头的预测，calculate_category_counts 方法是统计结果的，之后返回结果，界面直接调用输出界面就可以展示了，这个相对比较简单

    model = YOLO(model=f'pt/{model_id}')
    img = cv2.imread(video_file.name)
    results = model.predict(source=img, imgsz=640, conf=conf_threshold,iou=iou_threshold)
    category_info = calculate_category_counts(results, model.names)
    annotated_img = results[0].plot()
    annotated_img_rgb = cv2.cvtColor(annotated_img, cv2.COLOR_BGR2RGB)
    return annotated_img_rgb,category_info