一、 系统引言

随着精准农业和智慧植保的快速发展，利用计算机视觉技术对农作物病虫害进行快速、准确的识别与监测，已成为现代农业信息化的重要研究方向。昆虫作为影响农作物健康生长的关键生物因子，其早期发现与种类鉴定对于有效实施防治措施、减少农药滥用、保障粮食安全具有重要意义。然而，传统的人工田间调查方式存在效率低、主观性强、专业知识要求高等局限性。

为解决上述问题，我们设计并开发了这款 “基于YOLOv8/v10/v11/v12与SpringBoot的前后端分离昆虫识别检测系统” 。本系统深度融合了前沿的深度学习目标检测技术与现代化的Web开发框架，旨在为用户提供一个高效、精准、易用且功能完备的智能昆虫识别与分析平台。

系统核心采用了一系列先进的YOLO模型（涵盖YOLOv8至最新的YOLOv12），确保了检测算法在精度与速度上的前沿性。同时，我们创新性地集成了DeepSeek大语言模型的AI分析能力，使系统不仅能“识别”昆虫，更能“理解”和“解读”检测结果，提供专业的分析洞察。通过SpringBoot构建的后端API和响应式的前端界面，系统实现了用户管理、多模态检测（图像、视频、实时摄像头）、数据可视化与记录管理等全套功能，为农业技术人员、科研工作者及广大农户提供了一个强有力的数字化工具。

目录

 一、 系统引言

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

二、 系统核心特性概述

功能模块

登录注册模块

可视化模块

更换导航栏背景颜色

图像检测模块

视频检测模块

实时检测模块

图片识别记录管理

视频识别记录管理

摄像头识别记录管理

用户管理模块

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

模型训练结果

YOLOv8

YOLOv10

YOLOv11

YOLOv12

前端代码展示

部分代码

后端代码展示

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

 项目安装教程

项目源码+数据集

哔哩哔哩视频下方简介内

基于YOLOv8/v10/v11/v12与SpringBoot的前后端分离昆虫识别检测系统（DeepSeek智能分析+web交互界面）_哔哩哔哩_bilibili

https://www.bilibili.com/video/BV1V814B2EfS

视频介绍https://www.bilibili.com/video/BV1V814B2EfS

二、 系统核心特性概述

本系统围绕智能化、可视化和易管理三大核心理念构建，主要特性如下：

  1. 先进的深度学习检测引擎

    • 多模型支持：用户可在 YOLOv8, YOLOv10, YOLOv11, YOLOv12 四种先进的检测模型间自由切换，便于比较不同模型的性能或选择最适合的版本进行部署。

    • 专注的检测目标：模型基于一个包含 10类 重要农业昆虫的数据集进行训练，具体包括：

      • army worm (粘虫)

      • legume blister beetle (豆芫菁)

      • red spider (红蜘蛛)

      • rice gall midge (稻瘿蚊)

      • rice leaf roller (稻纵卷叶螟)

      • rice leafhopper (稻叶蝉)

      • rice water weevil (稻水象甲)

      • wheat phloeothrips (小麦皮蓟马)

      • white backed plant hopper (白背飞虱)

      • yellow rice borer (三化螟)

    • 数据集规模：模型训练充分，共使用训练集696张、验证集199张、测试集100张图像进行迭代优化。

  2. 全面的检测与交互模式

    • 多模态检测：全面支持图像上传检测、视频文件分析以及摄像头实时流检测，满足田间实时巡查与事后资料分析等多种应用场景。

    • DeepSeek智能分析：在图片检测后，系统可将检测结果（如昆虫种类、数量、位置）发送至DeepSeek API，获取关于虫害发生情况、潜在危害及防治建议的智能文本分析，极大提升了系统的实用价值。

  3. 完善的数据管理与可视化

    • 数据持久化：所有检测记录（图片、视频、摄像头）均会连同详细结果（检测时间、目标种类、置信度等）保存至MySQL数据库，便于历史追溯与分析。

    • 信息可视化：通过丰富的图表（如饼图、柱状图）对识别记录进行多维度数据可视化，直观展示各类昆虫的出现频率、时间分布等统计信息。

    • 记录管理：提供独立的模块用于管理图片、视频和摄像头的历史识别记录，支持查询、浏览和删除操作。

  4. 人性化的用户与系统管理

    • 用户体系：完善的用户登录/注册功能，支持密码强度检测，保障账户安全。

    • 权限管理：设有用户管理模块，管理员可对系统内所有用户进行增、删、改、查操作。

    • 个人中心：用户可随时在个人中心修改昵称、密码、头像等个人信息。

    • 个性化设置：支持更换导航栏背景颜色，满足不同用户的审美偏好，提升用户体验。

功能模块


✅ 用户登录注册：支持密码检测，保存到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>Computer 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-success="handleAvatarSuccessone" 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 accent">{{ 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, 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 = ref<UploadInstance>();
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的前后端分离昆虫识别检测系统（DeepSeek智能分析+web交互界面）_哔哩哔哩_bilibili

https://www.bilibili.com/video/BV1V814B2EfS

视频介绍https://www.bilibili.com/video/BV1V814B2EfS

# spring boot # 前端 # 计算机视觉
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

【机器学习】决策树三兄弟：ID3、C4.5、CART 一篇搞懂

学决策树最容易卡在三个地方：熵（Entropy）到底在算什么？为什么“越乱越大”？信息增益（Information Gain）怎么就能选出“更好的特征”？基尼指数（Gini）为什么越小越好？和熵有什么区别？光看公式会头大，但一旦带着数字手算一遍就通了。ID3（信息增益）C4.5（增益率）CART（基尼指数）并且用“带数字的例子”把指标讲透。第二部分我会再写：Titanic 实战、CART 回归树、

avatar 2048 AI社区
cover

论文去AI味测评：DeepSeek免费降AI指令与3款工具深度横评（2026最新）

avatar 2048 AI社区
cover

【大模型后训练综述】A SURVEY ON POST-TRAINING OF LARGE LANGUAGE MODELS

avatar 2048 AI社区