wordpress头像变圆seo见到效果再付费

wordpress头像变圆,seo见到效果再付费,超链接 网站,沙洋建设局网站摘要 本研究设计并实现了一套高效、可扩展且用户友好的实时人脸表情识别系统。系统核心采用最前沿的深度学习目标检测架构——YOLO系列模型#xff08;支持YOLOv8至YOLOv12的动态切换#xff09;#xff0c;在包含‘愤怒’、‘厌恶’、‘恐惧’、‘快乐’、‘中性’、‘悲伤…摘要本研究设计并实现了一套高效、可扩展且用户友好的实时人脸表情识别系统。系统核心采用最前沿的深度学习目标检测架构——YOLO系列模型支持YOLOv8至YOLOv12的动态切换在包含‘愤怒’、‘厌恶’、‘恐惧’、‘快乐’、‘中性’、‘悲伤’、‘惊讶’七类表情的自有数据集上进行训练与优化。为实现便捷的交互与高效的管理本系统创新性地构建了前后端分离的现代化Web应用前端基于Vue.js框架提供直观的图形界面后端业务逻辑由Spring Boot框架处理而核心检测服务则通过Python实现确保了算法性能与系统可维护性的平衡。系统功能全面不仅支持图像、视频及摄像头实时流的在线检测与结果记录还集成了DeepSeek大型语言模型的智能分析模块对检测结果进行深度语义解读。所有检测记录与用户信息均持久化存储于MySQL数据库并配备了完善的数据可视化看板与用户管理体系。实验结果表明该系统在测试集上达到了优异的识别准确率并通过多模型支持与模块化设计为表情识别的研究与应用提供了一个功能强大且灵活的技术平台。关键词人脸表情识别YOLO深度学习前后端分离Web应用智能分析数据可视化目录摘要1. 引言2. 背景与相关工作3. 数据集介绍功能模块登录注册模块可视化模块图像检测模块视频检测模块实时检测模块图片识别记录管理视频识别记录管理摄像头识别记录管理用户管理模块数据管理模块MySQL表设计模型训练结果YOLOv8YOLOv10YOLOv11YOLOv12前端代码展示后端代码展示项目源码数据集下载链接项目安装教程1. 引言人脸表情作为人类最直接、最丰富的非语言情感交流方式在人机交互、心理健康评估、智能驾驶、安防监控及远程教育等领域具有极高的应用价值。传统表情识别方法多依赖于手工设计的特征如LBP、HOG与浅层分类器在复杂光照、头部姿态变化及个体差异下鲁棒性不足。近年来以卷积神经网络为代表的深度学习技术凭借其强大的特征自动提取与表征学习能力已成为表情识别领域的主流解决方案。特别是以YOLO系列为代表的单阶段目标检测模型以其卓越的实时性能与高精度为部署实用的实时表情识别系统奠定了基础。然而一个完整的应用系统不仅需要强大的算法内核还需易用的交互界面、稳定的数据管理以及可扩展的架构设计。基于此本研究旨在解决算法研究与实际应用之间的鸿沟开发一个集最新算法、智能交互、数据管理于一体的综合性人脸表情识别系统。本系统的主要贡献如下多模型集成与兼容性无缝集成YOLOv8至YOLOv12等多个版本的先进检测模型用户可根据需求在精度与速度之间灵活权衡系统具备良好的算法迭代适应性。三层架构与智能增强采用“Vue.js前端 Spring Boot后端 Python算法服务”的前后端分离架构实现高内聚、低耦合。创新性地引入DeepSeek大模型提供超越简单分类标签的上下文分析与情感解读。全功能应用平台提供从用户登录注册、多源媒体图/视频/实时流检测、记录管理、数据可视化到用户权限控制的完整闭环功能所有流程均与数据库联动形成一个真正的生产级应用。高质量数据集构建收集并标注了一个包含7类基本表情、总计超过5500张人脸图像的数据集为模型的训练与评估提供了可靠保障。本论文后续章节将详细介绍系统的背景与相关工作、数据集构建、核心方法、系统设计与实现细节以及实验结果与分析。2. 背景与相关工作2.1 人脸表情识别技术演进人脸表情识别技术发展经历了从基于几何特征、表观特征到深度学习方法的历程。早期的AAM、ASM模型以及结合LBP、SIFT等特征的算法受限于手工特征的表达能力。深度学习尤其是CNN通过端到端的学习方式彻底改变了这一领域。从AlexNet、VGG在静态图像上的应用到专注于表情的FER2013数据集挑战再到利用注意力机制、多任务学习如同时检测人脸与表情的最新研究识别精度和鲁棒性不断提升。2.2 YOLO系列目标检测模型YOLO将目标检测重构为单一回归问题实现了速度与精度的革命性平衡。从YOLOv1到最新的YOLOv12其改进主要体现在更高效的网络骨干如CSPDarknet、更强的特征金字塔网络如PANet、更先进的损失函数如CIoU Loss以及无锚框Anchor-Free设计等。本系统选择集成YOLOv8及其后续变体正是看中了其在保持高精度的同时为实时检测提供的卓越性能以及其活跃的社区支持和易于部署的特性。2.3 表情识别系统开发现状当前不少研究止步于算法模型在标准数据集上的精度报告缺乏将其转化为具有完整业务流程的实用系统。现有的一些演示系统往往功能单一仅支持图片上传、架构陈旧前后端耦合、或缺乏数据管理与分析能力。本系统旨在填补这一空白通过采用现代化的软件开发范式前后端分离、微服务思想构建一个集算法验证、用户交互、数据运营于一体的综合性平台。3. 数据集介绍本系统模型训练与评估基于一个自主收集并精细标注的人脸表情数据集。数据内容与类别数据集涵盖人类七种基本表情符合心理学中普遍认可的“Ekman基本情绪”分类。具体类别名称与标签为Angry愤怒、Disgusted厌恶、Fearful恐惧、Happy快乐、Neutral中性、Sad悲伤、Surprised惊讶。数据划分为科学地进行模型训练、验证与测试数据集被严格划分为三个互斥的子集训练集包含4483张图像用于模型权重的学习与更新。验证集包含550张图像用于在训练过程中监控模型性能进行超参数调优及早停判断防止过拟合。测试集包含566张图像作为完全独立的“黑盒”数据仅在最终评估时使用以客观反映模型对未知数据的泛化能力。功能模块✅ 用户登录注册支持密码检测保存到MySQL数据库。✅ 支持四种YOLO模型切换YOLOv8、YOLOv10、YOLOv11、YOLOv12。✅ 信息可视化数据可视化。✅ 图片检测支持AI分析功能deepseek✅ 支持图像检测、视频检测和摄像头实时检测检测结果保存到MySQL数据库。✅ 图片识别记录管理、视频识别记录管理和摄像头识别记录管理。✅ 用户管理模块管理员可以对用户进行增删改查。✅ 个人中心可以修改自己的信息密码姓名头像等等。登录注册模块可视化模块图像检测模块YOLO模型集成(v8/v10/v11/v12)DeepSeek多模态分析支持格式JPG/PNG/MP4/RTSP视频检测模块实时检测模块图片识别记录管理视频识别记录管理摄像头识别记录管理用户管理模块数据管理模块MySQL表设计users- 用户信息表imgrecords- 图片检测记录表videorecords- 视频检测记录表camerarecords- 摄像头检测记录表模型训练结果#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 classhome-container layout-pd el-row :gutter15 classhome-card-two mb15 el-col :xs24 :sm12 :md12 :lg12 :xl12 div classhome-card-item div styleheight: 100% refhomeLineRef/div /div /el-col el-col :xs24 :sm12 :md12 :lg12 :xl12 classhome-media div classhome-card-item div styleheight: 100% refhomePieRef/div /div /el-col /el-row el-row :gutter15 classhome-card-three el-col :xs24 :sm12 :md12 :lg12 :xl12 classhome-media div classhome-card-item div styleheight: 100% refhomeradarRef/div /div /el-col el-col :xs24 :sm12 :md12 :lg12 :xl12 div classhome-card-item div classhome-card-item-title实时表情识别记录/div div classhome-monitor div classflex-warp el-table :datastate.paginatedData stylewidth: 100% height360 v-loadingstate.loading el-table-column propusername label操作用户 aligncenter width120 / el-table-column proplabel label识别结果 aligncenter width120 template #defaultscope el-tag :typegetResultType(scope.row.label) effectlight {{ formatLabel(scope.row.label) }} /el-tag /template /el-table-column el-table-column propconfidence label置信度 aligncenter width120 template #defaultscope {{ formatConfidence(scope.row.confidence) }} /template /el-table-column el-table-column propweight label模型权重 aligncenter width120 / el-table-column propconf label识别阈值 aligncenter width120 / el-table-column propstartTime label识别时间 aligncenter width180 / el-table-column label操作 aligncenter width100 template #defaultscope el-button link typeprimary sizesmall clickhandleViewDetail(scope.row) 详情 /el-button /template /el-table-column /el-table div classpagination-container el-pagination v-model:current-pagestate.currentPage v-model:page-sizestate.pageSize :page-sizes[10, 20, 50, 100] :smalltrue :layoutlayout :totalstate.total size-changehandleSizeChange current-changehandleCurrentChange / /div /div /div /div /el-col /el-row !-- 详情弹窗 -- el-dialog v-modelstate.detailDialogVisible :title表情识别记录详情 - ${state.selectedRecord?.username || } width80% :close-on-click-modalfalse :close-on-press-escapefalse center div classdetail-container v-loadingstate.detailLoading el-row :gutter20 !-- 人脸图片 -- el-col :xs24 :sm12 :md12 :lg12 :xl12 div classdetail-section h3 classdetail-title原始图片/h3 div classimage-container div classimg-wrapper clickpreviewImage(getImageUrl(state.selectedRecord?.inputImg), 原始图片) img :srcgetImageUrl(state.selectedRecord?.inputImg) alt原始图片 classdetection-image v-ifstate.selectedRecord?.inputImg / div classimg-overlay v-ifstate.selectedRecord?.inputImg el-iconView //el-icon /div div v-else classimage-placeholder el-iconPicture //el-icon span暂无原始图片/span /div /div /div /div /el-col !-- 识别信息 -- el-col :xs24 :sm12 :md12 :lg12 :xl12 div classdetail-section h3 classdetail-title识别信息/h3 el-descriptions :column1 border el-descriptions-item label操作用户 {{ state.selectedRecord?.username || 未知 }} /el-descriptions-item el-descriptions-item label识别结果 el-tag :typegetResultType(state.selectedRecord?.label || ) effectlight {{ formatLabel(state.selectedRecord?.label || ) }} /el-tag /el-descriptions-item el-descriptions-item label置信度 {{ formatConfidence(state.selectedRecord?.confidence || ) }} /el-descriptions-item el-descriptions-item label模型权重 {{ state.selectedRecord?.weight || 未知 }} /el-descriptions-item el-descriptions-item label识别阈值 {{ state.selectedRecord?.conf || 未知 }} /el-descriptions-item el-descriptions-item label识别时间 {{ state.selectedRecord?.startTime || 未知 }} /el-descriptions-item el-descriptions-item label表情分析详情 v-ifhasDetectionDetails div classdetection-details div v-for(item, index) in getDetectionDetails() :keyindex classdetail-item span classdetail-label{{ item.label }}:/span span classdetail-value{{ item.confidence }}/span /div /div /el-descriptions-item /el-descriptions /div /el-col /el-row !-- 原图与识别结果对比 -- el-row :gutter20 v-ifstate.selectedRecord?.inputImg || state.selectedRecord?.outImg el-col :xs24 :sm12 :md12 :lg12 :xl12 div classdetail-section h3 classdetail-title原始图片/h3 div classimage-container div classimg-wrapper clickpreviewImage(getImageUrl(state.selectedRecord.inputImg), 原始图片) img :srcgetImageUrl(state.selectedRecord.inputImg) alt原始图片 classdetection-image v-ifstate.selectedRecord?.inputImg / div classimg-overlay v-ifstate.selectedRecord?.inputImg el-iconView //el-icon /div div v-else classimage-placeholder el-iconPicture //el-icon span暂无原始图片/span /div /div /div /div /el-col el-col :xs24 :sm12 :md12 :lg12 :xl12 div classdetail-section h3 classdetail-title标注图片/h3 div classimage-container div classimg-wrapper clickpreviewImage(getImageUrl(state.selectedRecord.outImg), 标注图片) img :srcgetImageUrl(state.selectedRecord.outImg) alt标注图片 classdetection-image v-ifstate.selectedRecord?.outImg / div classimg-overlay v-ifstate.selectedRecord?.outImg el-iconView //el-icon /div div v-else classimage-placeholder el-iconPicture //el-icon span暂无标注图片/span /div /div /div /div /el-col /el-row /div template #footer span classdialog-footer el-button clickstate.detailDialogVisible false关闭/el-button el-button typeprimary clickhandleDownloadImage :disabled!state.selectedRecord?.inputImg el-iconDownload //el-icon 下载识别图片 /el-button /span /template /el-dialog !-- 图片预览弹窗 -- el-dialog v-modelstate.previewDialog.visible :titlestate.previewDialog.title width60% align-center classimage-preview-dialog div classpreview-content img :srcstate.previewDialog.imageUrl :altstate.previewDialog.title classpreview-image / /div /el-dialog /div /template script setup langts namehome import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw, computed } from vue; import * as echarts from echarts; import { storeToRefs } from pinia; import { useThemeConfig } from //stores/themeConfig; import { useTagsViewRoutes } from //stores/tagsViewRoutes; import { ElMessage, ElMessageBox } from element-plus; import { Picture, Download, View } from element-plus/icons-vue; import request from //utils/request; // 定义变量内容 const homeLineRef ref(); const homePieRef ref(); const homeradarRef ref(); const storesTagsViewRoutes useTagsViewRoutes(); const storesThemeConfig useThemeConfig(); const { themeConfig } storeToRefs(storesThemeConfig); const { isTagsViewCurrenFull } storeToRefs(storesTagsViewRoutes); // 表情类型定义 const EMOTION_TYPES [愤怒, 厌恶, 恐惧, 快乐, 中性, 悲伤, 惊讶]; // 表情颜色映射 const EMOTION_COLORS: Recordstring, string { 愤怒: #ff4d4f, // 红色 厌恶: #fa8c16, // 橙色 恐惧: #722ed1, // 紫色 快乐: #52c41a, // 绿色 中性: #1890ff, // 蓝色 悲伤: #13c2c2, // 青色 惊讶: #fadb14, // 黄色 }; const state reactive({ data: [] as any, paginatedData: [] as any, loading: false, currentPage: 1, pageSize: 10, total: 0, global: { homeChartOne: null, homeChartTwo: null, homeCharFour: null, dispose: [null, , undefined], } as any, myCharts: [] as any[], charts: { theme: , bgColor: , color: #303133, }, // 详情弹窗相关 detailDialogVisible: false, detailLoading: false, selectedRecord: null as any, // 图片预览弹窗 previewDialog: { visible: false, title: , imageUrl: , }, }); // 响应式分页数据 const layout computed(() { return window.innerWidth 768 ? prev, pager, next : total, sizes, prev, pager, next, jumper; }); // 获取图片URL const getImageUrl (imagePath: string) { if (!imagePath) return ; if (imagePath.startsWith(http)) return imagePath; return /api${imagePath.startsWith(/) ? : /}${imagePath}; }; // 是否有检测详情 const hasDetectionDetails computed(() { if (!state.selectedRecord) return false; try { const labels JSON.parse(state.selectedRecord.label || []); const confidences JSON.parse(state.selectedRecord.confidence || []); return labels.length 0 confidences.length 0; } catch { return false; } }); // 获取检测详情 const getDetectionDetails () { if (!state.selectedRecord) return []; try { const labels JSON.parse(state.selectedRecord.label || []); const confidences JSON.parse(state.selectedRecord.confidence || []); return labels .map((label: string, index: number) { // 如果是表情索引转换为表情名称 const emotionIndex parseInt(label); const emotionLabel emotionIndex 0 emotionIndex EMOTION_TYPES.length ? EMOTION_TYPES[emotionIndex] : ${label}; return { label: emotionLabel, confidence: confidences[index] ? ${(parseFloat(confidences[index]) * 100).toFixed(1)}% : 0%, color: EMOTION_COLORS[emotionLabel] || #1890ff }; }) .filter((item: any, index: number) labels[index] ! undefined); } catch { return []; } }; // 图片预览 const previewImage (imageUrl: string, title: string) { if (!imageUrl) { ElMessage.warning(没有可预览的图片); return; } state.previewDialog.imageUrl imageUrl; state.previewDialog.title title; state.previewDialog.visible true; }; // 分页处理 const handleSizeChange (val: number) { state.pageSize val; state.currentPage 1; updatePaginatedData(); }; const handleCurrentChange (val: number) { state.currentPage val; updatePaginatedData(); }; const updatePaginatedData () { const start (state.currentPage - 1) * state.pageSize; const end start state.pageSize; state.paginatedData state.data.slice(start, end); }; // 格式化标签显示 - 表情识别逻辑 const formatLabel (label: string) { try { const labels JSON.parse(label); if (labels.length 0) { const firstLabel labels[0]; const emotionIndex parseInt(firstLabel); if (emotionIndex 0 emotionIndex EMOTION_TYPES.length) { return EMOTION_TYPES[emotionIndex]; } return ${firstLabel}; } return 未识别到表情; } catch { if (label label.length 0 label ! [] label ! ) { // 尝试直接转换 const emotionIndex parseInt(label); if (!isNaN(emotionIndex) emotionIndex 0 emotionIndex EMOTION_TYPES.length) { return EMOTION_TYPES[emotionIndex]; } return 检测到表情; } return 未识别到表情; } }; // 根据识别结果设置标签类型 - 表情识别逻辑 const getResultType (label: string) { try { const labels JSON.parse(label); if (labels.length 0) { const emotionIndex parseInt(labels[0]); if (emotionIndex 0 emotionIndex EMOTION_TYPES.length) { const emotion EMOTION_TYPES[emotionIndex]; // 根据表情类型设置不同的tag样式 switch(emotion) { case 快乐: return success; case 中性: return info; case 愤怒: return danger; case 悲伤: return warning; case 惊讶: return warning; case 厌恶: return danger; case 恐惧: return warning; default: return primary; } } return primary; } return info; } catch { if (label label.length 0 label ! [] label ! ) { return primary; } return info; } }; // 格式化置信度显示 const formatConfidence (confidence: string) { try { const confidences JSON.parse(confidence); if (confidences.length 0) return 0%; const maxConfidence Math.max(...confidences.map((conf: any) { if (typeof conf number) return conf * 100; if (typeof conf string) { const num parseFloat(conf.replace(%, )); return isNaN(num) ? 0 : num; } return 0; })); return ${maxConfidence.toFixed(1)}%; } catch { if (typeof confidence number) { return ${(confidence * 100).toFixed(1)}%; } return confidence || 0%; } }; // 查看详情 const handleViewDetail async (row: any) { state.selectedRecord row; state.detailDialogVisible true; state.detailLoading true; try { const res await request.get(/api/imgRecords/${row.id}); if (res.code 0) { const record res.data; state.selectedRecord { ...record, inputImg: record.inputImg || record.imagePath, outImg: record.outImg || record.resultImagePath }; } } catch (error) { console.error(获取详情失败:, error); state.selectedRecord row; } finally { state.detailLoading false; } }; // 下载图片 const handleDownloadImage async () { if (!state.selectedRecord?.inputImg) { ElMessage.warning(没有可下载的图片); return; } try { const imageUrl getImageUrl(state.selectedRecord.inputImg); const response await fetch(imageUrl); const blob await response.blob(); const url window.URL.createObjectURL(blob); const a document.createElement(a); a.href url; const filename state.selectedRecord.inputImg.split(/).pop() || emotion_detection_${state.selectedRecord.username}_${state.selectedRecord.startTime?.replace(/[: ]/g, -) || unknown}.jpg; a.download filename; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); ElMessage.success(图片下载成功); } catch (error) { console.error(下载图片失败:, error); ElMessage.error(图片下载失败); } }; // 折线图 - 近十日识别数量 const initLineChart () { if (!state.global.dispose.some((b: any) b state.global.homeChartOne)) state.global.homeChartOne?.dispose(); state.global.homeChartOne markRaw(echarts.init(homeLineRef.value, state.charts.theme)); // 统计每天的识别数量 const counts: Recordstring, number {}; state.data.forEach((detection: any) { if (detection.startTime) { const date detection.startTime.split( )[0]; counts[date] (counts[date] || 0) 1; } }); const sortedDatesDesc Object.keys(counts).sort((a, b) b.localeCompare(a)); const latestDatesDesc sortedDatesDesc.slice(0, 10); const latestDates latestDatesDesc.sort((a, b) a.localeCompare(b)); const result { dateData: latestDates, valueData: latestDates.map(date counts[date]) }; const option { backgroundColor: state.charts.bgColor, title: { text: 近十日表情识别数量趋势, x: left, textStyle: { fontSize: 15, color: state.charts.color }, }, grid: { top: 70, right: 20, bottom: 30, left: 30 }, tooltip: { trigger: axis, formatter: (params: any) { const data params[0]; return ${data.name}br/表情识别数量: ${data.value}; } }, xAxis: { data: result.dateData, axisLabel: { color: state.charts.color, rotate: 45 }, }, yAxis: [ { type: value, name: 识别数量, splitLine: { show: true, lineStyle: { type: dashed, color: state.charts.theme dark ? #444 : #f5f5f5 } }, axisLabel: { color: state.charts.color, }, }, ], series: [ { name: 表情识别数量, type: line, symbolSize: 6, symbol: circle, smooth: true, data: result.valueData, lineStyle: { color: #52c41a }, // 使用绿色表示情感分析 itemStyle: { color: #52c41a, borderColor: #52c41a }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #52c41ab3 }, { offset: 1, color: #52c41a03 }, ]), }, }, ], }; state.global.homeChartOne.setOption(option); state.myCharts.push(state.global.homeChartOne); }; // 饼图 - 表情类型分布 const initPieChart () { if (!state.global.dispose.some((b: any) b state.global.homeChartTwo)) state.global.homeChartTwo?.dispose(); state.global.homeChartTwo markRaw(echarts.init(homePieRef.value, state.charts.theme)); const emotionCounts: Recordstring, number {}; state.data.forEach((detection: any) { try { const labels JSON.parse(detection.label || []); if (labels.length 0) { const emotionIndex parseInt(labels[0]); if (emotionIndex 0 emotionIndex EMOTION_TYPES.length) { const emotion EMOTION_TYPES[emotionIndex]; emotionCounts[emotion] (emotionCounts[emotion] || 0) 1; } else if (labels[0] in EMOTION_COLORS) { // 如果已经是表情名称 emotionCounts[labels[0]] (emotionCounts[labels[0]] || 0) 1; } } } catch { // 如果解析失败尝试直接使用 if (detection.label in EMOTION_COLORS) { emotionCounts[detection.label] (emotionCounts[detection.label] || 0) 1; } } }); // 确保所有表情类型都有数据 EMOTION_TYPES.forEach(emotion { if (!emotionCounts[emotion]) { emotionCounts[emotion] 0; } }); const pieData EMOTION_TYPES.map(emotion ({ name: emotion, value: emotionCounts[emotion], itemStyle: { color: EMOTION_COLORS[emotion] } })).filter(item item.value 0); const option { backgroundColor: state.charts.bgColor, title: { text: 表情类型分布统计, x: left, textStyle: { fontSize: 15, color: state.charts.color }, }, legend: { top: bottom, textStyle: { color: state.charts.color } }, tooltip: { trigger: item, formatter: {a} br/{b}: {c} ({d}%) }, series: [ { type: pie, radius: [40%, 70%], center: [50%, 50%], avoidLabelOverlap: true, itemStyle: { borderRadius: 10, borderColor: state.charts.bgColor, borderWidth: 2 }, label: { show: true, formatter: {b}: {c}次, color: state.charts.color }, emphasis: { label: { show: true, fontSize: 14, fontWeight: bold } }, data: pieData } ] }; state.global.homeChartTwo.setOption(option); state.myCharts.push(state.global.homeChartTwo); }; // 雷达图 - 用户置信度分析 const initradarChart () { if (!state.global.dispose.some((b: any) b state.global.homeCharFour)) state.global.homeCharFour?.dispose(); state.global.homeCharFour markRaw(echarts.init(homeradarRef.value, state.charts.theme)); const userConfidenceStats: Recordstring, { total: number, count: number } {}; state.data.forEach((detection: any) { const username detection.username || 未知用户; let avgConfidence 0; try { const confidences JSON.parse(detection.confidence || []); if (confidences.length 0) { const validConfidences confidences.filter((conf: any) { if (typeof conf number) return true; if (typeof conf string) { const num parseFloat(conf.replace(%, )); return !isNaN(num); } return false; }); if (validConfidences.length 0) { const numericConfidences validConfidences.map((conf: any) { if (typeof conf number) return conf; if (typeof conf string) { const num parseFloat(conf.replace(%, )) / 100; return isNaN(num) ? 0 : num; } return 0; }); avgConfidence numericConfidences.reduce((sum: number, conf: number) sum conf, 0) / numericConfidences.length; } } } catch { if (typeof detection.confidence number) { avgConfidence detection.confidence; } else if (typeof detection.confidence string) { const num parseFloat(detection.confidence.replace(%, )) / 100; avgConfidence isNaN(num) ? 0 : num; } } if (!userConfidenceStats[username]) { userConfidenceStats[username] { total: avgConfidence, count: 1 }; } else { userConfidenceStats[username].total avgConfidence; userConfidenceStats[username].count 1; } }); const userAvgConfidences Object.keys(userConfidenceStats).map(username ({ username, avgConf: userConfidenceStats[username].total / userConfidenceStats[username].count, count: userConfidenceStats[username].count })); const topUsers userAvgConfidences .filter(user user.count 3) .sort((a, b) b.avgConf - a.avgConf) .slice(0, 7); if (topUsers.length 0) { const option { backgroundColor: state.charts.bgColor, title: { text: 用户识别置信度分析, x: left, textStyle: { fontSize: 15, color: state.charts.color }, }, graphic: { type: text, left: center, top: center, style: { text: 数据不足无法生成置信度分析, fontSize: 14, fill: state.charts.color } } }; state.global.homeCharFour.setOption(option); state.myCharts.push(state.global.homeCharFour); return; } const data topUsers.map(user Number((user.avgConf * 100).toFixed(2))); const indicatorNames topUsers.map(user user.username); const indicator indicatorNames.map((name) ({ name, max: 100 })); const option { backgroundColor: state.charts.bgColor, title: { text: 用户识别置信度分析, x: left, textStyle: { fontSize: 15, color: state.charts.color }, }, tooltip: { formatter: (params: any) { const userIndex indicatorNames.findIndex(name name params.name); const user topUsers[userIndex]; return ${params.name}br/平均置信度: ${params.value}%br/识别次数: ${user?.count || 0}次; } }, radar: { radius: 65%, splitNumber: 4, indicator: indicator, axisName: { color: state.charts.color, fontSize: 12 }, splitArea: { areaStyle: { color: [rgba(82,196,26,0.1), rgba(82,196,26,0.05)], } }, splitLine: { lineStyle: { color: rgba(82,196,26,0.3) } }, axisLine: { lineStyle: { color: rgba(82,196,26,0.5) } } }, series: [{ type: radar, data: [{ value: data, name: 平均置信度, areaStyle: { color: rgba(82,196,26,0.3) }, lineStyle: { color: #52c41a }, itemStyle: { color: #52c41a }, label: { show: true, formatter: (params: any) { return params.value %; } } }] }] }; state.global.homeCharFour.setOption(option); state.myCharts.push(state.global.homeCharFour); }; // 批量设置 echarts resize const initEchartsResizeFun () { nextTick(() { for (let i 0; i state.myCharts.length; i) { setTimeout(() { state.myCharts[i]?.resize(); }, i * 1000); } }); }; const initEchartsResize () { window.addEventListener(resize, initEchartsResizeFun); }; // 加载数据 const loadData async () { state.loading true; try { const res await request.get(/api/imgRecords/all); if (res.code 0) { state.data res.data.map((record: any, index: number) { const transformedRecord { id: record.id, num: index 1, inputImg: record.inputImg || record.imagePath, outImg: record.outImg || record.resultImagePath, weight: record.weight, conf: record.conf, ai: record.ai, suggestion: record.suggestion, startTime: record.startTime, username: record.username, label: record.label, confidence: record.confidence, family: record.family || [] }; if (!transformedRecord.family || transformedRecord.family.length 0) { try { const labels JSON.parse(record.label || []); const confidences JSON.parse(record.confidence || []); transformedRecord.family labels.map((label: string, idx: number) { const emotionIndex parseInt(label); const emotionLabel emotionIndex 0 emotionIndex EMOTION_TYPES.length ? EMOTION_TYPES[emotionIndex] : ${label}; return { label: emotionLabel, confidence: confidences[idx] || 0, color: EMOTION_COLORS[emotionLabel] || #1890ff, startTime: record.startTime }; }); } catch (error) { console.error(构建family字段失败:, error); transformedRecord.family []; } } return transformedRecord; }).reverse(); state.total state.data.length; updatePaginatedData(); setTimeout(() { initLineChart(); initradarChart(); initPieChart(); }, 100); } else { ElMessage.error(res.msg || 加载数据失败); } } catch (error) { console.error(加载数据失败:, error); ElMessage.error(加载数据失败请检查网络连接); } finally { state.loading false; } }; // 页面加载时 onMounted(() { loadData(); initEchartsResize(); }); // 由于页面缓存原因keep-alive onActivated(() { initEchartsResizeFun(); }); // 监听相关状态变化 watch( () isTagsViewCurrenFull.value, () { initEchartsResizeFun(); } ); watch( () themeConfig.value.isIsDark, (isIsDark) { nextTick(() { state.charts.theme isIsDark ? dark : ; state.charts.bgColor isIsDark ? transparent : ; state.charts.color isIsDark ? #dadada : #303133; setTimeout(() { initLineChart(); initradarChart(); initPieChart(); }, 500); }); }, { deep: true, immediate: true, } ); /script style scoped langscss .home-container { overflow: hidden; .home-card-one, .home-card-two, .home-card-three { .home-card-item { width: 100%; height: 400px; border-radius: 4px; transition: all ease 0.3s; padding: 20px; overflow: hidden; background: var(--el-color-white); color: var(--el-text-color-primary); border: 1px solid var(--next-border-color-light); :hover { box-shadow: 0 2px 12px var(--next-color-dark-hover); transition: all ease 0.3s; } -title { font-size: 15px; font-weight: bold; height: 30px; margin-bottom: 15px; color: var(--el-text-color-primary); border-bottom: 1px solid var(--next-border-color-light); padding-bottom: 10px; } } } } /* 详情弹窗样式 */ .detail-container { padding: 10px 0; } .detail-section { margin-bottom: 20px; } .detail-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; color: var(--el-text-color-primary); border-left: 4px solid var(--el-color-primary); padding-left: 10px; } .image-container { width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--next-border-color-light); border-radius: 8px; overflow: hidden; background-color: var(--el-fill-color-light); margin-bottom: 10px; } .img-wrapper { position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 6px; overflow: hidden; height: 100%; width: 100%; :hover { .img-overlay { opacity: 1; } .detection-image { transform: scale(1.05); } } .detection-image { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; border: 1px solid var(--next-border-color-light); transition: transform 0.3s ease; } .img-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; .el-icon { color: white; font-size: 24px; } } } .image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--el-text-color-secondary); .el-icon { font-size: 48px; margin-bottom: 10px; } } .detection-details { display: flex; flex-direction: column; gap: 8px; } .detail-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; } .detail-label { font-weight: 500; color: var(--el-text-color-primary); } .detail-value { color: var(--el-text-color-regular); } .dialog-footer { display: flex; justify-content: flex-end; gap: 10px; } // 图片预览弹窗样式 .image-preview-dialog { .preview-content { display: flex; justify-content: center; align-items: center; .preview-image { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; } } } /* 响应式调整 */ media (max-width: 768px) { .home-media { margin-top: 15px; } .pagination-container { justify-content: center; } .image-container { height: 250px; } .detail-section { margin-bottom: 15px; } } /style后端代码展示项目源码数据集下载链接完整代码在哔哩哔哩视频下方简介内获取项目安装教程https://www.bilibili.com/video/BV1YLsXzJE2X/?spm_id_from333.1387.homepage.video_card.clickYOLOspring bootvue项目环境部署教程YOLOv8、YOLOv10、YOLOv11、YOLOv12_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1YLsXzJE2X/?spm_id_from333.1387.homepage.video_card.clickvd_source549d0b4e2b8999929a61a037fcce3b0f