摘要本文设计并实现了一套基于YOLOv8/v10/v11/v12算法与SpringBoot框架的前后端分离火灾检测Web系统。系统旨在通过深度学习技术实现对火灾早期特征——火焰fire与烟雾smoke——的精准、实时识别。项目采用自建数据集包含6,744张高质量标注图像训练集4,832张、验证集1,000张、测试集912张确保了模型的鲁棒性。系统核心提供了一个集用户管理、实时视频流检测、识别结果管理与可视化分析于一体的综合性Web平台DeepSeek智能分析给出预防措施有效解决了传统监控效率低下、响应迟缓的问题为现代智慧消防提供了一种高效、可行的技术解决方案。目录摘要引言1.1 项目背景与意义1.2 系统设计目标1.3 数据集与模型基础功能模块登录注册模块可视化模块更换导航栏背景颜色图像检测模块视频检测模块实时检测模块图片识别记录管理视频识别记录管理摄像头识别记录管理用户管理模块数据管理模块MySQL表设计数据集介绍1. 数据集概述2. 数据集构成与划分3. 数据来源与多样性模型训练结果YOLOv8YOLOv10YOLOv11YOLOv12前端代码展示部分代码后端代码展示项目源码数据集下载链接视频介绍基于YOLOv8/v10/v11/v12与SpringBoot的前后端分离火灾检测Web系统DeepSeek智能分析_哔哩哔哩_bilibili基于YOLOv8/v10/v11/v12与SpringBoot的前后端分离火灾检测Web系统DeepSeek智能分析项目环境配置安装教程https://www.bilibili.com/video/BV1YLsXzJE2X/?spm_id_from333.1387.homepage.video_card.click引言1.1 项目背景与意义火灾作为最具破坏性的灾害之一其早期的及时发现与预警是减少生命财产损失的关键。然而传统的烟感、温感探测器受限于物理范围与灵敏度而普遍部署的监控系统则高度依赖人工值守存在易疲劳、漏报率高、响应延迟等诸多弊端。随着计算机视觉与深度学习技术的迅猛发展基于视频流的智能分析为实现自动化、高精度的火灾早期预警提供了全新的技术路径。1.2 系统设计目标为解决上述问题本项目旨在研发一个智能火灾检测系统其核心设计目标如下高精度检测能够准确识别火灾早期的主要视觉特征即火焰fire和烟雾smoke两类目标。实时性系统需能对视频流进行实时分析与响应延迟低满足预警时效性要求。易用性与可管理性通过友好的Web界面提供服务支持用户管理、历史数据查询与可视化降低使用门槛。技术先进性与灵活性采用主流且高效的YOLO系列模型v8-v12作为检测核心并设计兼容多版本模型的架构便于后续算法迭代与升级。1.3 数据集与模型基础为训练和评估系统核心的检测模型我们构建了一个大规模、高质量的数据集。该数据集共包含6,744张图像并严格划分为训练集4,832张用于训练模型学习fire与smoke的特征。验证集1,000张用于在训练过程中调整超参数、监控模型性能并防止过拟合。测试集912张作为独立的评估集用于最终衡量模型在未知数据上的泛化能力与精确度、召回率等关键指标。功能模块✅ 用户登录注册支持密码检测保存到MySQL数据库。✅ 支持四种YOLO模型切换YOLOv8、YOLOv10、YOLOv11、YOLOv12。✅ 信息可视化数据可视化。✅ 图片检测支持AI分析功能deepseek✅ 支持图像检测、视频检测和摄像头实时检测检测结果保存到MySQL数据库。✅ 图片识别记录管理、视频识别记录管理和摄像头识别记录管理。✅ 用户管理模块管理员可以对用户进行增删改查。✅ 个人中心可以修改自己的信息密码姓名头像等等。✅ 支持更换导航栏背景颜色登录注册模块可视化模块更换导航栏背景颜色图像检测模块YOLO模型集成(v8/v10/v11/v12)DeepSeek多模态分析支持格式JPG/PNG/MP4/RTSP视频检测模块实时检测模块图片识别记录管理视频识别记录管理摄像头识别记录管理用户管理模块数据管理模块MySQL表设计users- 用户信息表imgrecords- 图片检测记录表videorecords- 视频检测记录表camerarecords- 摄像头检测记录表数据集介绍1. 数据集概述为训练和评估本系统的核心火灾检测模型我们构建了一个大规模、高质量、并针对真实场景进行优化的专用数据集。该数据集的核心目标是让模型能够精准学习并识别火灾的两种关键早期视觉特征明火‘fire’和烟雾‘smoke’。经过严格的清洗与标注该数据集共包含6,744 张图像为确保模型性能的客观性与泛化能力数据集被划分为标准的训练集、验证集和测试集。2. 数据集构成与划分数据集的具体划分如下表所示该划分遵循机器学习的最佳实践确保了模型训练的有效性和评估的公正性。数据集类型图片数量张功能与用途描述训练集4,832用于模型的核心训练过程让模型学习“火焰”与“烟雾”的特征模式。验证集1,000在训练过程中用于评估模型在未见过的数据上的表现辅助调整超参数如学习率并监控是否过拟合是模型优化的关键依据。测试集912作为模型的“最终考场”仅在模型训练完成后使用一次用于客观、公正地评估模型的最终泛化性能、精确度、召回率等核心指标。总计6,7443. 数据来源与多样性为确保模型在复杂多变的真实环境中保持鲁棒性本数据集从多个来源采集涵盖了丰富的场景和条件场景多样性包括室内如厨房、仓库、楼道和室外如森林、田野、街道环境。时间多样性包含白天、夜晚、黄昏等不同光照条件下的图像。火源多样性涵盖了从小火苗到熊熊大火从薄烟到浓烟的各种形态和规模。模型训练结果#coding:utf-8 #根据实际情况更换模型 # yolon.yaml (nano)轻量化模型适合嵌入式设备速度快但精度略低。 # yolos.yaml (small)小模型适合实时任务。 # yolom.yaml (medium)中等大小模型兼顾速度和精度。 # yolob.yaml (base)基本版模型适合大部分应用场景。 # yolol.yaml (large)大型模型适合对精度要求高的任务。 from ultralytics import YOLO model_path pt/yolo12s.pt data_path data.yaml if __name__ __main__: model YOLO(model_path) results model.train(datadata_path, epochs500, batch64, device0, workers0, projectruns, nameexp, )YOLOv8YOLOv10YOLOv11YOLOv12前端代码展示部分代码template div classbrain-detection-container idid v-loadingstate.loading !-- 顶部导航栏 -- div classtop-nav div classlogo i classicon-brain/i spanComputer Vision/span /div div classuser-info el-avatar :size32 :srcuserInfos.avatar / span classusername{{ userInfos.userName }}/span /div /div div classmain-content !-- 左侧功能区 -- div classleft-panel div classpanel-section h3 classsection-title模型配置/h3 div classconfig-item label选择模型/label el-select v-modelweight placeholder请选择模型 sizelarge el-option v-foritem in state.weight_items :keyitem.value :labelitem.label :valueitem.value / /el-select /div div classconfig-item labelAI助手/label el-select v-modelai placeholder请选择AI助手 sizelarge changegetData el-option v-foritem in state.ai_items :keyitem.value :labelitem.label :valueitem.value / /el-select /div div classconfig-item label置信度阈值: {{ (conf/100).toFixed(2) }}/label el-slider v-modelconf :format-tooltipformatTooltip show-stops :max100 :step5 / /div div classaction-buttons el-button typeprimary clickupData classpredict-btn i classicon-scan/i 开始检测 /el-button el-button clickresetForm classreset-btn i classicon-reset/i 重置 /el-button /div /div div classpanel-section h3 classsection-title历史记录/h3 div classhistory-list div v-for(item, index) in state.history :keyindex classhistory-item div classhistory-time{{ item.time }}/div div classhistory-result{{ item.result }}/div /div div v-ifstate.history.length 0 classempty-history 暂无历史记录 /div /div /div /div !-- 中间内容区 -- div classcenter-panel div classupload-section el-card classupload-card template #header div classcard-header span上传图片/span el-button typetext clickshowExample查看示例/el-button /div /template el-upload v-modelstate.img refuploadFile classavatar-uploader actionhttp://localhost:9999/files/upload :show-file-listfalse :on-successhandleAvatarSuccessone drag div classupload-area el-icon v-if!imageUrl classupload-icon Plus / /el-icon img v-else :srcimageUrl classuploaded-image / div v-if!imageUrl classupload-text p将图片拖拽到此处或em点击上传/em/p p classupload-tip支持 JPG、PNG 格式大小不超过 10MB/p /div /div /el-upload /el-card /div div classresult-section v-ifstate.predictionResult.label el-card classresult-card template #header div classcard-header span检测结果/span el-button typeprimary click() htmlToPDF(id, 检测报告) sizesmall i classicon-download/i 导出报告 /el-button /div /template div classresult-content div classresult-overview div classresult-item div classresult-icon diagnosis/div div classresult-info div classresult-label诊断结果/div div classresult-value highlight{{ state.predictionResult.label || - }}/div /div /div div classresult-item div classresult-icon confidence/div div classresult-info div classresult-label置信度/div div classresult-value accent{{ state.predictionResult.confidence || - }}/div /div /div div classresult-item div classresult-icon time/div div classresult-info div classresult-label分析用时/div div classresult-value{{ state.predictionResult.allTime ? ${state.predictionResult.allTime} : - }}/div /div /div /div div classdetailed-results h4详细分析/h4 el-table :datastate.data stylewidth: 100% el-table-column proplabel label预测结果 aligncenter / el-table-column propconfidence label置信度 aligncenter / el-table-column propallTime label用时(秒) aligncenter / /el-table /div /div /el-card /div /div !-- 右侧AI建议区 -- div classright-panel v-ifstate.predictionResult.suggestion div classpanel-section h3 classsection-titleAI建议/h3 div classai-suggestion div v-htmlstate.predictionResult.suggestion classmarkdown-body/div /div div classsuggestion-actions el-button typetext clickcopySuggestion i classicon-copy/i 复制建议 /el-button el-button typetext clicksaveSuggestion i classicon-save/i 保存建议 /el-button /div /div /div /div !-- 底部状态栏 -- div classstatus-bar div classstatus-item i classicon-status/i span系统状态: 正常/span /div div classstatus-item i classicon-time/i span最后更新: {{ currentTime }}/span /div /div /div /template script setup langts namebrainDetection import { reactive, ref, onMounted, computed } from vue; import type { UploadInstance, UploadProps } from element-plus; import { ElMessage } from element-plus; import request from //utils/request; import { Plus } from element-plus/icons-vue; import { useUserInfo } from //stores/userInfo; import { storeToRefs } from pinia; import { formatDate } from //utils/formatTime; import { htmlToPDF } from //utils/pdf import { marked } from marked; import { SocketService } from //utils/socket; const imageUrl ref(); const ai ref(); const conf ref(60); const weight ref(); const uploadFile refUploadInstance(); const stores useUserInfo(); const { userInfos } storeToRefs(stores); // 新增功能当前时间显示 const currentTime computed(() { return formatDate(new Date(), YYYY-mm-dd HH:MM:SS); }); const state reactive({ loading: false, weight_items: [] as any, img: , data: [] as any, history: [] as any, // 新增历史记录功能 predictionResult: { label: , confidence: , allTime: , suggestion: as any }, ai_items: [ { value: DeepSeek, label: DeepSeek, }, { value: Qwen, label: Qwen, }, { value: 不使用AI, label: 不使用AI, }, ], form: { username: , inputImg: null as any, weight: , conf: null as any, ai: , startTime: }, }); // 新增功能格式化工具提示 const formatTooltip (val: number) { return val / 100 } // 新增功能重置表单 const resetForm () { imageUrl.value ; state.img ; state.predictionResult { label: , confidence: , allTime: , suggestion: }; state.data []; ai.value ; conf.value 60; weight.value ; ElMessage.success(已重置表单); }; // 新增功能显示示例图片 const showExample () { ElMessage.info(示例功能开发中...); }; // 新增功能复制AI建议 const copySuggestion () { const suggestionText state.predictionResult.suggestion.replace(/[^]*/g, ); navigator.clipboard.writeText(suggestionText).then(() { ElMessage.success(建议已复制到剪贴板); }); }; // 新增功能保存AI建议 const saveSuggestion () { ElMessage.info(保存功能开发中...); }; const socketService new SocketService(); socketService.on(message, (data) { console.log(Received message:, data); ElMessage({ message: data, type: success, duration: 3000 }) }); const handleAvatarSuccessone: UploadProps[onSuccess] (response, uploadFile) { imageUrl.value URL.createObjectURL(uploadFile.raw!); state.img response.data; }; const getData () { request.get(/api/flask/file_names).then((res) { if (res.code 0) { res.data JSON.parse(res.data); state.weight_items res.data.weight_items; } else { ElMessage.error(res.msg); } }); }; const transformData (rawData: any): any { return rawData.label.map((label, index) ({ allTime: rawData.allTime, confidence: rawData.confidence[index], label: label, })); } const upData () { state.loading true; state.form.weight weight.value; state.form.conf (parseFloat(conf.value.toString()) / 100); state.form.username userInfos.value.userName; state.form.inputImg state.img; state.form.ai ai.value; state.form.startTime formatDate(new Date(), YYYY-mm-dd HH:MM:SS); request.post(/api/flask/predict, state.form).then((res) { if (res.code 0) { try { state.loading false; res.data JSON.parse(res.data); state.predictionResult.label JSON.parse(res.data.label); state.predictionResult.confidence JSON.parse(res.data.confidence); state.predictionResult.allTime res.data.allTime; state.predictionResult.suggestion marked(res.data.suggestion); state.data transformData(state.predictionResult); // 新增功能添加到历史记录 state.history.unshift({ time: currentTime.value, result: state.predictionResult.label }); // 限制历史记录数量 if (state.history.length 5) { state.history.pop(); } // 覆盖原图片 if (res.data.outImg) { imageUrl.value res.data.outImg; } } catch (error) { console.error(解析 JSON 时出错:, error); } ElMessage.success(检测完成); } else { state.loading false; ElMessage.error(res.msg); } }); }; onMounted(() { getData(); }); /script后端代码展示项目源码数据集下载链接完整代码在哔哩哔哩视频下方简介内获取基于YOLOv8/v10/v11/v12与SpringBoot的前后端分离火灾检测Web系统DeepSeek智能分析_哔哩哔哩_bilibili基于YOLOv8/v10/v11/v12与SpringBoot的前后端分离火灾检测Web系统DeepSeek智能分析项目安装教程https://www.bilibili.com/video/BV1YLsXzJE2X/?spm_id_from333.1387.homepage.video_card.clickYOLOspring bootvue项目环境部署教程YOLOv8、YOLOv10、YOLOv11、YOLOv12