当前位置：首页 > news >正文

YOLOv8cls（分类/检测）算法结合Django + Vue3 前后端分离架构 TasselScan_Yolo8cls 玉米雄蕊检测系统开发基于Django+Vue与YOLOv8的玉米雄蕊智能

news 2026/7/13 19:43:50

智慧农业-TasselScan_Yolo8cls 玉米雄蕊检测系统开发图片视频摄像头多源检测

TasselScan_Yolo8cls，玉米雄蕊检测，YOLOv8cls目标检测，Django开发，Vue3前端，Element Plus，单图检测，批量图片检测，视频抽帧检测，摄像头实时检测，模型训练，模型验证，权重加载，权重切换，MySQL数据库，ECharts可视化大屏，CSV导出，知识问答，检测建议，用户管理，管理员端，GPU推理，CPU推理，农业作物检测，智能农业系统
1

这是一套专注于精准农业与智慧育种的全栈 AI 系统。“TasselScan”标识、数据大屏、检测记录以及黄色的 UI 主题，该系统专为玉米雄蕊（Tassel）检测设计，采用了YOLOv8cls（分类/检测）算法结合Django + Vue3前后端分离架构。

以下是为您整理的项目核心代码构建指南，涵盖了从数据库设计到 YOLO 推理的关键实现。

1. 项目架构与技术栈

前端：Vue 3 + Vite + Element Plus（UI 组件）+ ECharts（大屏可视化）。
后端：Django + Django REST Framework (DRF)。
AI 算法：Ultralytics YOLOv8（用于识别玉米雄蕊）。
数据库：MySQL。

2. 数据库设计 (Django Models)

根据截图中的“检测记录”、“用户管理”和“数据大屏”需求，我们需要设计以下核心模型。

文件路径：backend/tassel_scan/models.py

fromdjango.dbimportmodelsfromdjango.contrib.auth.modelsimportAbstractUser# 1. 用户表 (扩展 Django 自带用户)classUser(AbstractUser):phone=models.CharField(max_length=11,blank=True,null=True,verbose_name="手机号")avatar=models.ImageField(upload_to='avatars/',default='avatars/default.png',verbose_name="头像")role=models.CharField(max_length=10,choices=[('admin','管理员'),('user','普通用户')],default='user')# 2. 检测记录表 (对应截图中的检测记录列表)classDetectionRecord(models.Model):user=models.ForeignKey(User,on_delete=models.CASCADE,verbose_name="检测用户")image_file=models.ImageField(upload_to='detections/%Y%m%d/',verbose_name="检测图片")result_image=models.ImageField(upload_to='results/%Y%m%d/',blank=True,null=True,verbose_name="结果图片")# 统计信息tassel_count=models.IntegerField(default=0,verbose_name="雄蕊数量")confidence=models.FloatField(default=0.0,verbose_name="平均置信度")# 模式：image(单图), batch(批量), video(视频)detect_mode=models.CharField(max_length=10,choices=[('image','单图'),('batch','批量'),('video','视频')],default='image')created_at=models.DateTimeField(auto_now_add=True,verbose_name="检测时间")classMeta:ordering=['-created_at']verbose_name="检测记录"verbose_name_plural="检测记录"# 3. 农业知识问答/建议表classAgriKnowledge(models.Model):question=models.CharField(max_length=200,verbose_name="问题关键词")answer=models.TextField(verbose_name="防治/种植建议")created_at=models.DateTimeField(auto_now_add=True)def__str__(self):returnself.question

3. AI 核心推理逻辑 (YOLOv8)

这是系统的核心，负责加载模型并处理图片、视频流。

文件路径：backend/tassel_scan/utils/yolo_detector.py

fromultralyticsimportYOLOimportcv2importosfromdjango.confimportsettings# 加载预训练的玉米雄蕊模型 (假设权重文件在 weights 目录下)MODEL_PATH=os.path.join(settings.BASE_DIR,'weights','best_tassel.pt')model=YOLO(MODEL_PATH)defdetect_tassel(image_path,save_path,conf_threshold=0.5):""" 单张图片检测逻辑 """# 运行推理results=model(image_path,conf=conf_threshold)# 解析结果result=results[0]boxes=result.boxes num_tassels=len(boxes)# 绘制结果并保存im_array=result.plot()# 绘制 BBox 和标签im=Image.fromarray(im_array[...,::-1])# RGBim.save(save_path)return{"count":num_tassels,"saved_image":save_path,"boxes":boxes.xyxy.cpu().numpy().tolist(),# 返回坐标给前端展示"confidences":boxes.conf.cpu().numpy().tolist()}defdetect_video_stream(source=0):""" 摄像头实时检测 (供前端 Video 标签推流或 WebSocket 使用) """cap=cv2.VideoCapture(source)whilecap.isOpened():success,frame=cap.read()ifsuccess:# YOLO 推理results=model(frame)# 绘制annotated_frame=results[0].plot()# 这里通常需要将帧编码为 JPEG 并通过生成器返回yieldannotated_frameelse:breakcap.release()

4. 后端 API 接口 (Django REST Framework)

文件路径：backend/tassel_scan/views.py

fromrest_framework.decoratorsimportapi_view,permission_classesfromrest_framework.responseimportResponsefromrest_framework.permissionsimportIsAuthenticatedfrom.modelsimportDetectionRecordfrom.serializersimportDetectionRecordSerializerfrom.utils.yolo_detectorimportdetect_tassel# 1. 图片检测接口@api_view(['POST'])@permission_classes([IsAuthenticated])defdetect_image_view(request):image=request.FILES.get('image')# 保存原始图片record=DetectionRecord.objects.create(user=request.user,image_file=image,detect_mode='image')# 执行 AI 检测save_path=os.path.join(settings.MEDIA_ROOT,'results',f'res_{record.id}.jpg')result_data=detect_tassel(record.image_file.path,save_path)# 更新记录record.result_image=f'results/res_{record.id}.jpg'record.tassel_count=result_data['count']record.save()returnResponse({"msg":"检测成功","count":result_data['count'],"image_url":request.build_absolute_uri(record.result_image.url)})# 2. 数据大屏接口 (ECharts 数据源)@api_view(['GET'])@permission_classes([IsAuthenticated])defdashboard_stats_view(request):# 统计总检测数total=DetectionRecord.objects.count()# 统计雄蕊总数total_tassels=DetectionRecord.objects.aggregate(models.Sum('tassel_count'))['tassel_count__sum']or0returnResponse({"total_records":total,"total_tassels":total_tassels,# 这里可以添加更多按日期分组的统计数据用于折线图})

5. 前端实现思路 (Vue3 + Element Plus)

根据截图的 UI 风格，前端主要包含以下部分：

数据大屏 (Dashboard)

组件：使用vue-echarts。
布局：使用 CSS Grid 或 Flex 布局，背景色设为浅米黄色（对应截图风格）。
逻辑：在onMounted钩子中调用/api/dashboard/接口，获取数据并渲染饼图（雄蕊分布）、折线图（趋势）。

检测中心 (Detection Center)

上传组件：使用<el-upload>实现拖拽上传或点击上传。
交互：上传成功后，调用检测接口，并在右侧展示返回的带有检测框的图片。
参数设置：使用<el-slider>调整置信度阈值，传递给后端。

代码片段 (Vue3 上传图片)

<template><divclass="detect-container"><el-uploadclass="upload-demo"dragaction="/api/detect/image/":headers="{ 'Authorization': 'Bearer ' + token }":on-success="handleSuccess"><el-iconclass="el-icon--upload"><upload-filled/></el-icon><divclass="el-upload__text">拖拽图片到此处或<em>点击上传</em></div></el-upload><divv-if="resultImage"class="result-view"><h3>检测结果</h3><img:src="resultImage"alt="Result"/></div></div></template><scriptsetup>import{ref}from'vue'constresultImage=ref('')consthandleSuccess=(response)=>{resultImage.value=response.image_url ElMessage.success(`检测完成，发现${response.count}个雄蕊`)}</script>