*B/S架构计算机视觉应用 毕业设计项目 基于YOLOv12+DeepSeek的道路缺陷智能检测系统

基于YOLOv12+DeepSeek的道路缺陷智能检测系统

【核心功能】
✅ 一键检测：上传图片/视频,自动识别道路裂缝、坑洼、车辙等缺陷
✅ 实时监测：支持摄像头实时检测,边检测边展示结果
✅ 检测精准：AI算法检测准确率90%以上,远超人工
✅ 报告生成：自动生成检测报告,支持导出PDF
✅ 数据管理：检测历史记录查询、统计分析

【技术亮点】
独创A2C2f_KAN注意力机制,检测精度比传统方法提升5.8%
优化的YOLO12检测模型,单张图片处理<1秒
完整的用户权限管理,支持多人协同使用
响应式Web界面,电脑手机都能用
含数据集

这是一个非常典型的B/S架构计算机视觉应用。为毕业设计项目，我为你整理了系统的核心功能模块代码，重点实现了YOLOv12 模型集成、DeepSeek AI 报告生成以及前后端交互逻辑。

第一部分：系统核心代码实现

本方案采用Python (Flask) + Vue.js的轻量级架构，既保证了 AI 推理的性能，又提供了现代化的用户界面。

1. 后端核心：AI 推理与服务 (Python Flask)

这是系统的“大脑”，负责加载 YOLOv12 模型、处理图片/视频流，并调用 DeepSeek 生成分析报告。

文件：app.py

fromflaskimportFlask,request,jsonify,send_filefromflask_corsimportCORSfromultralyticsimportYOLOimportcv2importnumpyasnpimportbase64importioimportrequestsimportjsonfromdatetimeimportdatetimeimportos app=Flask(__name__)CORS(app)# 允许跨域# ================= 配置区域 =================# 1. 加载 YOLOv12 模型 (请确保已安装 ultralytics 最新版)# 如果没有 v12 权重，可以用 v8/v10/v11 替代，接口通用MODEL_PATH='weights/yolo12n.pt'model=YOLO(MODEL_PATH)# 2. DeepSeek API 配置DEEPSEEK_API_KEY="YOUR_DEEPSEEK_API_KEY"DEEPSEEK_URL="https://api.deepseek.com/v1/chat/completions"# ================= 辅助函数 =================defencode_image(image_path):"""将图片转换为 Base64 以便前端显示"""withopen(image_path,"rb")asimage_file:returnbase64.b64encode(image_file.read()).decode('utf-8')defcall_deepseek_for_report(detections):""" 将检测结果发送给 DeepSeek，生成专业报告 """ifnotdetections:return"未检测到明显道路缺陷。"# 构造提示词context=json.dumps(detections,ensure_ascii=False)prompt=f""" 你是一名道路养护专家。根据以下 AI 检测到的道路缺陷数据（类别和置信度），请生成一份简短的评估报告。 数据：{context}要求： 1. 总结主要问题（如：发现多处裂缝）。 2. 评估风险等级（轻微/中度/严重）。 3. 给出维修建议。 """headers={"Authorization":f"Bearer{DEEPSEEK_API_KEY}","Content-Type":"application/json"}payload={"model":"deepseek-chat","messages":[{"role":"system","content":"你是一个专业的道路检测分析助手。"},{"role":"user","content":prompt}]}try:resp=requests.post(DEEPSEEK_URL,headers=headers,json=payload)returnresp.json()['choices'][0]['message']['content']exceptExceptionase:returnf"AI 分析服务暂不可用：{str(e)}"# ================= API 接口 =================@app.route('/api/detect/image',methods=['POST'])defdetect_image():""" 单张图片检测接口 """if'file'notinrequest.files:returnjsonify({"error":"No file uploaded"}),400file=request.files['file']img_bytes=np.frombuffer(file.read(),np.uint8)img=cv2.imdecode(img_bytes,cv2.IMREAD_COLOR)# 1. YOLO 推理results=model(img)result=results[0]# 2. 提取数据detections=[]forboxinresult.boxes:cls_id=int(box.cls[0])conf=float(box.conf[0])name=model.names[cls_id]# 只保留置信度高于 0.5 的结果ifconf>0.5:detections.append({"class":name,"confidence":round(conf,2),"bbox":box.xyxy[0].tolist()})# 3. 绘制结果图annotated_frame=result.plot()_,buffer=cv2.imencode('.jpg',annotated_frame)img_base64=base64.b64encode(buffer).decode('utf-8')# 4. 调用 AI 生成报告ai_report=call_deepseek_for_report(detections)returnjsonify({"status":"success","image":f"data:image/jpeg;base64,{img_base64}","detections":detections,"report":ai_report,"count":len(detections)})@app.route('/api/dashboard/stats',methods=['GET'])defget_dashboard_stats():""" 模拟仪表盘数据 (实际项目中应从数据库查询) """returnjsonify({"user_count":2,"login_count":6,"operation_count":10,"detect_count":0,"trend_data":[2,1,3]# 对应截图中的折线图})if__name__=='__main__':app.run(host='0.0.0.0',port=5000,debug=True)

2. 前端核心：检测结果展示 (Vue 3)

对应你提供的第三张截图（目标检测页面），实现图片上传、结果展示和 AI 报告渲染。

组件：TargetDetection.vue

<template><divclass="detection-page"><h2>📷 目标检测</h2><pclass="subtitle">上传图像或视频进行道路目标检测分析</p><divclass="upload-area"><inputtype="file"@change="handleFileUpload"accept="image/*"/><button@click="uploadImage":disabled="!selectedFile">开始检测</button></div><divv-if="loading"class="loading">正在分析中...</div><divv-if="result"class="result-container"><!-- 左侧：图片展示 --><divclass="image-box"><h3>✅ 检测结果</h3><divclass="tabs"><button:class="{ active: showOriginal }"@click="showOriginal = true">原始图像</button><button:class="{ active: !showOriginal }"@click="showOriginal = false">检测结果</button></div><img:src="showOriginal ? originalImage : result.image"alt="Result"/></div><!-- 右侧：详情与报告 --><divclass="info-box"><h3>📋 检测详情</h3><ul><li>检测时间：{{ new Date().toLocaleTimeString() }}</li><li>识别物体：{{ result.count }} 个</li></ul><divclass="detection-list"><divv-for="(item, index) in result.detections":key="index"class="item"><spanclass="tag">{{ item.class }}</span><spanclass="conf">置信度：{{ (item.confidence * 100).toFixed(1) }}%</span></div></div><divclass="ai-report"><h3>🤖 AI 助手分析报告</h3><divclass="report-content">{{ result.report }}</div></div></div></div></div></template><scriptsetup>import{ref}from'vue';importaxiosfrom'axios';constselectedFile=ref(null);constloading=ref(false);constresult=ref(null);constshowOriginal=ref(true);constoriginalImage=ref('');consthandleFileUpload=(event)=>{selectedFile.value=event.target.files[0];// 预览原图constreader=newFileReader();reader.onload=(e)=>originalImage.value=e.target.result;reader.readAsDataURL(selectedFile.value);};constuploadImage=async()=>{if(!selectedFile.value)return;loading.value=true;constformData=newFormData();formData.append('file',selectedFile.value);try{constresponse=awaitaxios.post('http://localhost:5000/api/detect/image',formData);result.value=response.data;}catch(error){alert("检测失败："+error.message);}finally{loading.value=false;}};</script><stylescoped>.detection-page{padding:20px;max-width:1200px;margin:0 auto;}.upload-area{margin:20px 0;display:flex;gap:10px;}.result-container{display:flex;gap:20px;margin-top:20px;}.image-box, .info-box{flex:1;border:1px solid #eee;padding:15px;border-radius:8px;}img{width:100%;border-radius:4px;}.tabs button{padding:5px 10px;cursor:pointer;}.tabs button.active{background:#1890ff;color:white;border:none;}.ai-report{margin-top:20px;background:#f6ffed;padding:10px;border-radius:4px;border:1px solid #b7eb8f;}</style>

3. 前端核心：仪表盘 (Vue 3)

对应你提供的第二张截图（系统仪表盘），展示统计数据。

组件：Dashboard.vue

<template><divclass="dashboard"><h2>📊 系统仪表盘</h2><p>欢迎回来，miaozi1！查看系统最新状态和活动数据。</p><!-- 顶部卡片 --><divclass="cards"><divclass="card"v-for="stat in stats":key="stat.label"><h3>{{ stat.label }}</h3><pclass="number">{{ stat.value }}</p></div></div><!-- 图表区域 --><divclass="charts"><divclass="chart-box"><h3>登录活动趋势</h3><!-- 这里可以使用 ECharts 或 Chart.js 渲染折线图 --><divclass="mock-chart">📈 [折线图占位符]</div></div><divclass="quick-actions"><h3>快速操作</h3><buttonclass="btn-primary">🚀 开始检测</button><buttonclass="btn-secondary">🤖 AI聊天助手</button><buttonclass="btn-gray">👤 个人资料</button></div></div></div></template><scriptsetup>import{ref,onMounted}from'vue';importaxiosfrom'axios';conststats=ref([]);onMounted(async()=>{// 模拟获取后端数据constres=awaitaxios.get('http://localhost:5000/api/dashboard/stats');constdata=res.data;stats.value=[{label:'用户数量',value:data.user_count},{label:'登录次数',value:data.login_count},{label:'操作记录',value:data.operation_count},{label:'检测次数',value:data.detect_count}];});</script><stylescoped>.dashboard{padding:20px;}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px;}.card{background:white;padding:20px;border-radius:8px;box-shadow:0 2px 8pxrgba(0,0,0,0.1);}.number{font-size:24px;font-weight:bold;color:#1890ff;}.charts{display:flex;gap:20px;}.chart-box, .quick-actions{flex:1;background:white;padding:20px;border-radius:8px;}.btn-primary{background:#1890ff;color:white;border:none;padding:10px;width:100%;margin-bottom:10px;cursor:pointer;}</style>

如何运行这个项目？

1. 准备环境：
   • 安装 Python 库：pip install flask flask-cors ultralytics requests opencv-python
   • 安装 Node.js 用于运行前端。
2. 启动后端：
   • 将app.py保存，替换YOUR_DEEPSEEK_API_KEY。
   • 运行python app.py。
3. 启动前端：
   • 使用 Vue CLI 创建项目：npm create vue@latest。
   • 将上面的 Vue 代码复制到对应组件文件中。
   • 运行npm run dev。
4. 测试：
   • 访问前端地址，上传一张包含道路裂缝或车辆的图片，即可看到类似截图中的检测效果和 AI 分析报告。

适合作为毕业设计的源码基础。