基于YOLOv8/v10/v11/v12与SpringBoot的前后端分离杂草识别检测系统（DeepSeek智能分析+web交互界面）-前端-CSS教程网

一、系统全面简介

核心概述：
本系统是一个深度融合了当代最前沿的深度学习目标检测技术、大语言模型分析能力与现代企业级Web开发框架的综合型智能应用平台。系统以高性能、可迭代的YOLO系列模型（涵盖v8, v10, v11, v12） 作为其核心的视觉感知引擎，专门用于对特定杂草物种—— 进行高精度、高效率的识别与定位。通过基于SpringBoot的鲁棒后端架构，系统构建了一套完整的用户认证、数据管理，并辅以清晰明了的响应式前端交互界面，最终为用户提供了一个集多模态检测、智能分析、数据可视化、记录管理与系统管理于一体的一站式杂草防控决策支持系统。

系统核心定位：
本系统的定位超越了单一的检测工具，它旨在成为一个服务化的智能分析平台。它将复杂的AI模型封装成易于调用的服务，降低了农业技术人员直接使用算法的门槛，并通过Web界面和数据库管理，实现了检测任务的流程化、识别结果的结构化以及历史数据的价值化。

详尽技术架构亮点：

后端架构：
- 框架： 采用SpringBoot作为核心框架，实现了依赖注入、事务管理和应用的快速启动与部署。
- API设计： 遵循RESTful API设计规范，为前端提供清晰、统一的数据接口，支持前后端的独立开发与部署。
AI引擎层：
- 核心检测器： 动态支持YOLOv8, YOLOv10, YOLOv11, YOLOv12四个版本的模型。用户可根据实际场景对检测速度和精度的侧重，灵活选择最优模型，实现了算法性能的“按需分配”。
- 大模型增强： 创新性地集成DeepSeek大语言模型API。在YOLO完成基础的目标框选后，将识别信息送入DeepSeek进行二次分析与语义生成，提供诸如生物学特性描述、潜在危害预警、生态影响分析等深层次信息，极大地拓展了系统的认知维度。
前端与交互层：
- 技术选型： 采用Vue.jst等现代化前端框架，构建了组件化、高内聚、低耦合的单页面应用。
- 用户体验： 实现了高度交互性的数据可视化图表，支持用户更换导航栏背景颜色等个性化设置，提升了平台的易用性和亲和力。
任务支持广度：
- 图像检测： 支持用户上传静态图片进行即时分析，适用于单点、快速的杂草鉴定。
- 视频检测： 支持处理视频文件，能够逐帧分析视频中的杂草出现情况，适用于分析一段时期内的杂草动态。
- 实时检测： 支持调用电脑摄像头进行实时视频流检测，为田间实时监控、自动化农机作业等场景提供了技术可能性。

哔哩哔哩视频演示

https://www.bilibili.***/video/BV1TD1hBUEpj

哔哩哔哩视频演示https://www.bilibili.***/video/BV1TD1hBUEpj

项目源码

项目环境配置安装教程

YOLO+spring boot+vue项目环境部署教程（YOLOv8、YOLOv10、YOLOv11、YOLOv12）_哔哩哔哩_bilibili

YOLO+spring boot+vue项目环境部署教程（YOLOv8、YOLOv10、YOLOv11、YOLOv12）_哔哩哔哩_bilibilihttps://www.bilibili.***/video/BV1YLsXzJE2X/?spm_id_from=333.1387.homepage.video_card.click&vd_source=549d0b4e2b8999929a61a037f***e3b0f

一、系统全面简介

二、详细引言

数据集

功能模块

登录注册模块

可视化模块

更换导航栏背景颜色

图像检测模块

视频检测模块

实时检测模块

图片识别记录管理

视频识别记录管理

摄像头识别记录管理

用户管理模块

数据管理模块（MySQL表设计）

模型训练结果

YOLOv8

YOLOv10

YOLOv11

YOLOv12

前端代码展示

部分代码

后端代码展示

项目源码+数据集下载链接

项目安装教程

二、详细引言

在全球范围内推动精准农业与数字化生态管理的大趋势下，如何高效、精准、低成本地进行农田杂草监测与防控，始终是制约农业生产效率与可持续发展的关键瓶颈之一。传统依赖人工经验的巡查方式，不仅耗费巨大人力物力，其识别准确率也极易受制于个人经验、疲劳程度及环境因素，难以实现大规模、标准化的应用。与此同时，计算机视觉领域，特别是以YOLO为代表的一系列深度学习目标检测模型，近年来取得了突破性进展，其在速度与精度上的卓越平衡，为解决上述农业痛点提供了强有力的技术武器。

然而，顶尖的算法模型若不能转化为用户友好、稳定可靠且功能完备的应用系统，其潜在价值将无法得到有效释放。正是在这一现实需求的驱动下，我们设计并研发了本款“智能杂草识别与精准管理平台”。该系统旨在构建一个从感知到认知、从分析到管理的完整技术闭环，具体应对以下多层次的核心需求：

追求极致的识别性能与算法民主化： 系统并未固守单一模型，而是创造性地支持了从YOLOv8到v12的多种先进模型架构。这一设计允许用户根据自身硬件条件和对实时性的要求，自由选择最适合的检测引擎。例如，在需要快速响应的实时监控场景下，用户可能选择速度更快的YOLOv12-n版本；而在对精度要求极高的科研分析中，则可能启用精度更高的YOLOv8x模型。这种“可切换”的架构也使得系统能够平滑地融入未来更新的YOLO版本，具备了良好的前瞻性与扩展性。
实现从“感知”到“认知”的智能跃迁： 本系统的核心创新点之一在于突破了传统检测系统仅提供“定位与分类”的局限。通过无缝集成DeepSeek大语言模型，系统在YOLO输出“何处有何物”的基础上，进一步生成了“此物为何重要”的语义级描述。例如，系统不仅能框出图中的“骑士酸模”，还能通过DeepSeek的分析，生成关于该杂草的生长习性、对作物的竞争性危害、以及推荐的环境友好型防治策略等文本报告。这为使用者，尤其是非植物学专家的普通农户，提供了更具操作性的决策支持。
构建全链路、多模态的业务支持体系： 系统深刻理解了杂草防控工作的多样性，因此提供了覆盖图像、视频、实时流三种模态的全面检测方案。从单张图片的快速确认，到视频录像的回顾性分析，再到通过摄像头的持续性田间监测，本系统能够渗透到杂草管理的各个环节，成为一个真正全场景适用的工具。
打造结构化、可追溯的数据管理中枢： 所有检测操作及其结果均被系统化地保存至MySQL数据库。这不仅使得用户可以方便地回查历史记录、进行纵向对比分析，更为后续进行大数据挖掘（如杂草时空分布分析、发生规律统计）奠定了坚实的数据基础。结合信息可视化面板，用户能够直观地掌握杂草发生的整体态势。
提供企业级的安全与管理功能： 完善的用户权限管理、管理员对用户和记录的增删改查能力、以及个人中心的个性化设置，确保了系统的安全、稳定与有序运行，使其能够胜任团队协作与小规模商业部署的要求。

数据集

本系统卓越的识别能力，根植于一个高质量、专门化的标注数据集。该数据集聚焦于单一杂草类别——骑士酸模，精心收集和标注了总计 2,486张 在不同光照、背景、生长阶段下的田间图像。并按照机器学习的最佳实践，严格划分为：训练集（1,661张） 用于模型参数学习，验证集（580张） 用于调优超参数和模型选择，测试集（245张） 用于最终客观评估模型的泛化性能。这一数据集的规模与质量，是保障模型高召回率与低误检率的根本前提。

功能模块

✅ 用户登录注册：支持密码检测，保存到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(data=data_path,
                          epochs=500,
                          batch=64,
                          device='0',
                          workers=0,
                          project='runs',
                          name='exp',
                          )

YOLOv8

YOLOv10

YOLOv11

YOLOv12

前端代码展示

部分代码

<template>
	<div class="brain-detection-container" id="id" v-loading="state.loading">
		<!-- 顶部导航栏 -->
		<div class="top-nav">
			<div class="logo">
				<i class="icon-brain"></i>
				<span>***puter Vision</span>
			</div>
			<div class="user-info">
				<el-avatar :size="32" :src="userInfos.avatar" />
				<span class="username">{{ userInfos.userName }}</span>
			</div>
		</div>
 
		<div class="main-content">
			<!-- 左侧功能区 -->
			<div class="left-panel">
				<div class="panel-section">
					<h3 class="section-title">模型配置</h3>
					<div class="config-item">
						<label>选择模型</label>
						<el-select v-model="weight" placeholder="请选择模型" size="large">
							<el-option v-for="item in state.weight_items" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div class="config-item">
						<label>AI助手</label>
						<el-select v-model="ai" placeholder="请选择AI助手" size="large" @change="getData">
							<el-option v-for="item in state.ai_items" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div class="config-item">
						<label>置信度阈值: {{ (conf/100).toFixed(2) }}</label>
						<el-slider v-model="conf" :format-tooltip="formatTooltip" show-stops :max="100" :step="5" />
					</div>
					<div class="action-buttons">
						<el-button type="primary" @click="upData" class="predict-btn">
							<i class="icon-scan"></i>
							开始检测
						</el-button>
						<el-button @click="resetForm" class="reset-btn">
							<i class="icon-reset"></i>
							重置
						</el-button>
					</div>
				</div>
 
				<div class="panel-section">
					<h3 class="section-title">历史记录</h3>
					<div class="history-list">
						<div v-for="(item, index) in state.history" :key="index" class="history-item">
							<div class="history-time">{{ item.time }}</div>
							<div class="history-result">{{ item.result }}</div>
						</div>
						<div v-if="state.history.length === 0" class="empty-history">
							暂无历史记录
						</div>
					</div>
				</div>
			</div>
 
			<!-- 中间内容区 -->
			<div class="center-panel">
				<div class="upload-section">
					<el-card class="upload-card">
						<template #header>
							<div class="card-header">
								<span>上传图片</span>
								<el-button type="text" @click="showExample">查看示例</el-button>
							</div>
						</template>
						<el-upload v-model="state.img" ref="uploadFile" class="avatar-uploader"
							action="http://localhost:9999/files/upload" :show-file-list="false"
							:on-su***ess="handleAvatarSu***essone" drag>
							<div class="upload-area">
								<el-icon v-if="!imageUrl" class="upload-icon">
									<Plus />
								</el-icon>
								<img v-else :src="imageUrl" class="uploaded-image" />
								<div v-if="!imageUrl" class="upload-text">
									<p>将图片拖拽到此处，或<em>点击上传</em></p>
									<p class="upload-tip">支持 JPG、PNG 格式，大小不超过 10MB</p>
								</div>
							</div>
						</el-upload>
					</el-card>
				</div>
 
				<div class="result-section" v-if="state.predictionResult.label">
					<el-card class="result-card">
						<template #header>
							<div class="card-header">
								<span>检测结果</span>
								<el-button type="primary" @click="() => htmlToPDF('id', '检测报告')" size="small">
									<i class="icon-download"></i>
									导出报告
								</el-button>
							</div>
						</template>
						<div class="result-content">
							<div class="result-overview">
								<div class="result-item">
									<div class="result-icon diagnosis"></div>
									<div class="result-info">
										<div class="result-label">诊断结果</div>
										<div class="result-value highlight">{{ state.predictionResult.label || '-' }}</div>
									</div>
								</div>
								<div class="result-item">
									<div class="result-icon confidence"></div>
									<div class="result-info">
										<div class="result-label">置信度</div>
										<div class="result-value a***ent">{{ state.predictionResult.confidence || '-' }}</div>
									</div>
								</div>
								<div class="result-item">
									<div class="result-icon time"></div>
									<div class="result-info">
										<div class="result-label">分析用时</div>
										<div class="result-value">{{ state.predictionResult.allTime ? `${state.predictionResult.allTime}` : '-' }}</div>
									</div>
								</div>
							</div>
 
							<div class="detailed-results">
								<h4>详细分析</h4>
								<el-table :data="state.data" style="width: 100%">
									<el-table-column prop="label" label="预测结果" align="center" />
									<el-table-column prop="confidence" label="置信度" align="center" />
									<el-table-column prop="allTime" label="用时(秒)" align="center" />
								</el-table>
							</div>
						</div>
					</el-card>
				</div>
			</div>
 
			<!-- 右侧AI建议区 -->
			<div class="right-panel" v-if="state.predictionResult.suggestion">
				<div class="panel-section">
					<h3 class="section-title">AI建议</h3>
					<div class="ai-suggestion">
						<div v-html="state.predictionResult.suggestion" class="markdown-body"></div>
					</div>
					<div class="suggestion-actions">
						<el-button type="text" @click="copySuggestion">
							<i class="icon-copy"></i>
							复制建议
						</el-button>
						<el-button type="text" @click="saveSuggestion">
							<i class="icon-save"></i>
							保存建议
						</el-button>
					</div>
				</div>
			</div>
		</div>
 
		<!-- 底部状态栏 -->
		<div class="status-bar">
			<div class="status-item">
				<i class="icon-status"></i>
				<span>系统状态: 正常</span>
			</div>
			<div class="status-item">
				<i class="icon-time"></i>
				<span>最后更新: {{ currentTime }}</span>
			</div>
		</div>
	</div>
</template>
 
<script setup lang="ts" name="brainDetection">
import { reactive, ref, onMounted, ***puted } 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 = ref<UploadInstance>();
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
 
// 新增功能：当前时间显示
const currentTime = ***puted(() => {
	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.su***ess('已重置表单');
};
 
// 新增功能：显示示例图片
const showExample = () => {
	ElMessage.info('示例功能开发中...');
};
 
// 新增功能：复制AI建议
const copySuggestion = () => {
	const suggestionText = state.predictionResult.suggestion.replace(/<[^>]*>/g, '');
	navigator.clipboard.writeText(suggestionText).then(() => {
		ElMessage.su***ess('建议已复制到剪贴板');
	});
};
 
// 新增功能：保存AI建议
const saveSuggestion = () => {
	ElMessage.info('保存功能开发中...');
};
 
const socketService = new SocketService();
 
socketService.on('message', (data) => {
	console.log('Received message:', data);
	ElMessage({
		message: data,
		type: 'su***ess',
		duration: 3000
	})
});
 
const handleAvatarSu***essone: UploadProps['onSu***ess'] = (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.su***ess('检测完成！');
		} else {
			state.loading = false;
			ElMessage.error(res.msg);
		}
	});
};
 
onMounted(() => {
	getData();
});
</script>

后端代码展示

项目源码+数据集下载链接

完整代码在哔哩哔哩视频下方简介内获取

https://www.bilibili.***/video/BV1TD1hBUEpj

哔哩哔哩视频演示https://www.bilibili.***/video/BV1TD1hBUEpj

项目安装教程

https://www.bilibili.***/video/BV1YLsXzJE2X/?spm_id_from=333.1387.homepage.video_card.click

转载请说明出处内容投诉
CSS教程网 » 基于YOLOv8/v10/v11/v12与SpringBoot的前后端分离杂草识别检测系统（DeepSeek智能分析+web交互界面）

柒威网

分享到：

一、 系统全面简介

哔哩哔哩视频演示

项目环境配置安装教程

二、 详细引言

数据集

功能模块

登录注册模块

可视化模块

更换导航栏背景颜色

图像检测模块

视频检测模块

实时检测模块

图片识别记录管理

视频识别记录管理

摄像头识别记录管理

用户管理模块

数据管理模块（MySQL表设计）

模型训练结果

YOLOv8

YOLOv10

YOLOv11

YOLOv12

前端代码展示

部分代码

后端代码展示

项目源码+数据集下载链接

项目安装教程

柒威网

发表评论

一个令你着迷的主题！

一、系统全面简介

二、详细引言