YOLO12与Vue.js结合构建可视化目标检测平台

YOLO12与Vue.js结合构建可视化目标检测平台

最近在做一个智能安防项目，需要把YOLO12目标检测的结果实时展示在网页上。一开始我们用的是传统的后端渲染，每次检测完都要刷新页面，体验特别差。后来尝试了前后端分离的方案，用Vue.js做前端，YOLO12做后端推理，效果一下子就上来了。

整个平台搭建起来后，不仅检测结果能实时更新，还能在网页上直接上传图片、调整检测参数、查看历史记录，用户体验提升了好几个档次。今天我就把这个方案分享出来，如果你也需要在Web应用中展示目标检测结果，这个架构应该能帮到你。

1. 为什么选择Vue.js + YOLO12这个组合？

先说说为什么选这两个技术。YOLO12是YOLO系列的最新版本，最大的特点是引入了注意力机制，检测精度比之前的版本更高。虽然速度上可能比YOLO11慢一点，但对于很多Web应用来说，精度更重要一些。

Vue.js则是目前最流行的前端框架之一，它的响应式数据绑定特别适合做这种实时更新的应用。检测结果一出来，页面上的标注框、标签、置信度分数都能自动更新，不需要手动操作DOM。

还有一个很重要的点，Vue的生态很丰富。像Element Plus、Ant Design Vue这些UI组件库，能让我们快速搭建出漂亮的界面。Vue Router做页面路由，Pinia做状态管理，整个应用的结构会很清晰。

2. 整体架构设计

整个平台采用前后端分离的架构，前端用Vue.js，后端用Python的FastAPI框架，YOLO12负责目标检测。下面是具体的架构图：

┌─────────────────┐ HTTP请求 ┌─────────────────┐ Python调用 ┌─────────────────┐ │ │ ───────────> │ │ ───────────> │ │ │ Vue.js前端 │ │ FastAPI后端 │ │ YOLO12模型 │ │ │ <─────────── │ │ <─────────── │ │ │ (浏览器) │ JSON响应 │ (Python) │ 检测结果 │ (PyTorch) │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │ │ │ │ │ ▼ ▼ ▼ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 用户界面组件 │ │ RESTful API │ │ 模型推理引擎 │ │ - 图片上传 │ │ - 图片接收 │ │ - 加载模型 │ │ - 实时显示 │ │ - 调用YOLO12 │ │ - 预处理 │ │ - 参数调整 │ │ - 返回结果 │ │ - 推理 │ │ - 历史记录 │ │ │ │ - 后处理 │ └─────────────────┘ └─────────────────┘ └─────────────────┘

这个架构有几个好处。首先，前后端完全分离，前端可以独立开发和部署，后端也可以专注于算法和性能优化。其次，RESTful API的设计让接口很清晰，前端只需要调用几个简单的接口就能完成所有功能。最后，这种架构扩展性很好，以后如果想换别的检测模型，或者增加新的功能，改动起来都很方便。

3. 前端Vue.js实现细节

前端的核心是图片上传、实时显示和参数调整这三个功能。我用Vue 3的组合式API来写，代码结构会更清晰。

3.1 图片上传组件

图片上传用的是原生的<input type="file">，配合一个拖拽区域，用户体验会更好。上传的图片会先在前端预览，然后再发送到后端。

<template> <div class="upload-area" @dragover.prevent @drop="handleDrop"> <input type="file" ref="fileInput" @change="handleFileChange" accept="image/*" hidden> <div v-if="!previewImage" class="upload-placeholder"> <i class="upload-icon"></i> <p>拖拽图片到这里，或点击选择文件</p> <button @click="triggerFileInput">选择图片</button> </div> <div v-else class="preview-container"> <img :src="previewImage" alt="预览图片"> <div class="preview-actions"> <button @click="detectImage">开始检测</button> <button @click="clearImage">重新选择</button> </div> </div> </div> </template> <script setup> import { ref } from 'vue' import { useDetectionStore } from '@/stores/detection' const fileInput = ref(null) const previewImage = ref('') const detectionStore = useDetectionStore() // 触发文件选择 const triggerFileInput = () => { fileInput.value.click() } // 处理文件选择 const handleFileChange = (event) => { const file = event.target.files[0] if (file) { const reader = new FileReader() reader.onload = (e) => { previewImage.value = e.target.result detectionStore.setOriginalImage(e.target.result) } reader.readAsDataURL(file) } } // 处理拖拽 const handleDrop = (event) => { event.preventDefault() const file = event.dataTransfer.files[0] if (file && file.type.startsWith('image/')) { const reader = new FileReader() reader.onload = (e) => { previewImage.value = e.target.result detectionStore.setOriginalImage(e.target.result) } reader.readAsDataURL(file) } } // 开始检测 const detectImage = async () => { if (previewImage.value) { await detectionStore.detectImage(previewImage.value) } } // 清除图片 const clearImage = () => { previewImage.value = '' detectionStore.clearImage() fileInput.value.value = '' } </script>

3.2 检测结果显示组件

检测结果的显示是核心功能。我们需要在图片上画出检测框，显示类别标签和置信度分数。这里用Canvas来实现，因为Canvas画图性能比较好，而且能实时更新。

<template> <div class="result-container"> <div class="canvas-wrapper"> <canvas ref="canvasRef" :width="canvasWidth" :height="canvasHeight"></canvas> <img v-if="originalImage" :src="originalImage" alt="原图" ref="imageRef" @load="drawDetections"> </div> <div class="detection-list"> <h3>检测结果 ({{ detections.length }}个对象)</h3> <div class="detection-item" v-for="(det, index) in detections" :key="index"> <span class="class-label" :style="{ backgroundColor: getColor(det.class) }"> {{ det.class }} </span> <span class="confidence">{{ (det.confidence * 100).toFixed(1) }}%</span> <span class="bbox">[{{ det.bbox.join(', ') }}]</span> </div> </div> </div> </template> <script setup> import { ref, watch, onMounted } from 'vue' import { useDetectionStore } from '@/stores/detection' const canvasRef = ref(null) const imageRef = ref(null) const canvasWidth = ref(800) const canvasHeight = ref(600) const detectionStore = useDetectionStore() const originalImage = detectionStore.originalImage const detections = detectionStore.detections // 颜色映射，不同类别用不同颜色 const colorMap = { 'person': '#FF6B6B', 'car': '#4ECDC4', 'dog': '#FFD166', 'cat': '#06D6A0', 'bicycle': '#118AB2' } const getColor = (className) => { return colorMap[className] || '#888888' } // 在Canvas上绘制检测框 const drawDetections = () => { if (!canvasRef.value || !imageRef.value) return const canvas = canvasRef.value const ctx = canvas.getContext('2d') const img = imageRef.value // 清空Canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // 绘制图片 ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 绘制每个检测框 detections.forEach(det => { const [x1, y1, x2, y2] = det.bbox const color = getColor(det.class) // 画框 ctx.strokeStyle = color ctx.lineWidth = 2 ctx.strokeRect(x1, y1, x2 - x1, y2 - y1) // 画标签背景 ctx.fillStyle = color const label = `${det.class} ${(det.confidence * 100).toFixed(1)}%` const textWidth = ctx.measureText(label).width ctx.fillRect(x1, y1 - 20, textWidth + 10, 20) // 画标签文字 ctx.fillStyle = '#FFFFFF' ctx.font = '14px Arial' ctx.fillText(label, x1 + 5, y1 - 5) }) } // 监听检测结果变化，重新绘制 watch(detections, () => { drawDetections() }, { deep: true }) // 图片加载完成后绘制 watch(originalImage, () => { if (originalImage && imageRef.value) { imageRef.value.onload = drawDetections } }) onMounted(() => { drawDetections() }) </script>

3.3 参数调整面板

不同的应用场景可能需要不同的检测参数。比如安防监控需要高召回率，宁可误报也不能漏报；而内容审核可能需要高精度，确保每个检测都准确。

<template> <div class="parameter-panel"> <h3>检测参数</h3> <div class="parameter-item"> <label>置信度阈值</label> <div class="slider-container"> <input type="range" min="0" max="100" v-model="confidenceThreshold" @change="updateParameters"> <span>{{ (confidenceThreshold / 100).toFixed(2) }}</span> </div> </div> <div class="parameter-item"> <label>NMS阈值</label> <div class="slider-container"> <input type="range" min="0" max="100" v-model="nmsThreshold" @change="updateParameters"> <span>{{ (nmsThreshold / 100).toFixed(2) }}</span> </div> </div> <div class="parameter-item"> <label>模型尺寸</label> <select v-model="modelSize" @change="updateParameters"> <option value="n">Nano (最快)</option> <option value="s">Small</option> <option value="m">Medium</option> <option value="l">Large</option> <option value="x">XLarge (最准)</option> </select> </div> <div class="parameter-item"> <label>检测类别过滤</label> <div class="category-filters"> <label v-for="category in availableCategories" :key="category"> <input type="checkbox" v-model="selectedCategories" :value="category" @change="updateParameters"> {{ category }} </label> </div> </div> <button @click="applyParameters" class="apply-btn">应用参数并重新检测</button> </div> </template> <script setup> import { ref } from 'vue' import { useDetectionStore } from '@/stores/detection' const detectionStore = useDetectionStore() const confidenceThreshold = ref(25) // 默认0.25 const nmsThreshold = ref(45) // 默认0.45 const modelSize = ref('m') const selectedCategories = ref(['person', 'car', 'dog', 'cat']) const availableCategories = [ 'person', 'bicycle', 'car', 'motorcycle', 'airplane', 'bus', 'train', 'truck', 'boat', 'traffic light', 'fire hydrant', 'stop sign', 'parking meter', 'bench', 'bird', 'cat', 'dog', 'horse', 'sheep', 'cow' ] const updateParameters = () => { detectionStore.updateParameters({ confidence: confidenceThreshold.value / 100, iou: nmsThreshold.value / 100, model_size: modelSize.value, classes: selectedCategories.value }) } const applyParameters = async () => { updateParameters() if (detectionStore.originalImage) { await detectionStore.detectImage(detectionStore.originalImage) } } </script>

4. 后端FastAPI与YOLO12集成

后端的主要工作是接收前端传来的图片，调用YOLO12进行检测，然后把结果返回给前端。我用FastAPI是因为它简单易用，性能也不错。

4.1 后端主程序

from fastapi import FastAPI, File, UploadFile, HTTPException from fastapi.middleware.cors import CORSMiddleware from fastapi.responses import JSONResponse import cv2 import numpy as np from ultralytics import YOLO import json from typing import List, Dict, Any import time app = FastAPI(title="YOLO12 Detection API") # 配置CORS，允许前端访问 app.add_middleware( CORSMiddleware, allow_origins=["http://localhost:5173"], # Vue开发服务器地址 allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) # 加载YOLO12模型 model_cache = {} def get_model(model_size: str = "m"): """获取指定尺寸的YOLO12模型""" model_key = f"yolo12{model_size}" if model_key not in model_cache: try: # 加载预训练模型 model = YOLO(f"yolo12{model_size}.pt") model_cache[model_key] = model print(f"Loaded model: {model_key}") except Exception as e: print(f"Error loading model {model_key}: {e}") # 如果指定尺寸的模型不存在，使用默认模型 model = YOLO("yolo12m.pt") model_cache[model_key] = model return model_cache[model_key] @app.post("/api/detect") async def detect_objects( file: UploadFile = File(...), confidence: float = 0.25, iou: float = 0.45, model_size: str = "m", classes: List[str] = None ): """ 目标检测接口 """ try: start_time = time.time() # 读取图片 contents = await file.read() nparr = np.frombuffer(contents, np.uint8) image = cv2.imdecode(nparr, cv2.IMREAD_COLOR) if image is None: raise HTTPException(status_code=400, detail="无法读取图片") # 获取模型 model = get_model(model_size) # 准备检测参数 kwargs = { "conf": confidence, "iou": iou, "verbose": False } # 如果有指定类别，转换为类别ID if classes and len(classes) > 0: # 这里需要根据你的类别名称映射到YOLO的类别ID class_names = model.names class_ids = [] for class_name in classes: for idx, name in class_names.items(): if name == class_name: class_ids.append(idx) break if class_ids: kwargs["classes"] = class_ids # 运行检测 results = model(image, **kwargs) # 解析检测结果 detections = [] for result in results: boxes = result.boxes if boxes is not None: for box in boxes: # 获取边界框坐标 x1, y1, x2, y2 = box.xyxy[0].tolist() # 获取类别和置信度 class_id = int(box.cls[0]) confidence_score = float(box.conf[0]) class_name = model.names[class_id] detections.append({ "bbox": [x1, y1, x2, y2], "class": class_name, "confidence": confidence_score, "class_id": class_id }) # 计算处理时间 processing_time = time.time() - start_time # 返回结果 return JSONResponse({ "success": True, "detections": detections, "image_size": { "width": int(image.shape[1]), "height": int(image.shape[0]) }, "processing_time": processing_time, "model_used": f"yolo12{model_size}" }) except Exception as e: print(f"Detection error: {e}") raise HTTPException(status_code=500, detail=f"检测失败: {str(e)}") @app.get("/api/models") async def get_available_models(): """获取可用的模型列表""" return { "models": [ {"id": "n", "name": "YOLO12-Nano", "description": "最快，适合移动设备"}, {"id": "s", "name": "YOLO12-Small", "description": "平衡速度和精度"}, {"id": "m", "name": "YOLO12-Medium", "description": "推荐用于大多数应用"}, {"id": "l", "name": "YOLO12-Large", "description": "高精度，速度稍慢"}, {"id": "x", "name": "YOLO12-XLarge", "description": "最高精度，适合专业应用"} ] } @app.get("/api/classes") async def get_available_classes(): """获取可检测的类别列表""" try: model = get_model("m") class_names = model.names return { "classes": [ {"id": idx, "name": name} for idx, name in class_names.items() ] } except Exception as e: return {"classes": [], "error": str(e)} if __name__ == "__main__": import uvicorn uvicorn.run(app, host="0.0.0.0", port=8000)

4.2 前端状态管理

前端用Pinia来管理状态，把图片、检测结果、参数这些都放在store里，这样各个组件都能访问到。

// stores/detection.js import { defineStore } from 'pinia' import { ref } from 'vue' import axios from 'axios' export const useDetectionStore = defineStore('detection', () => { const originalImage = ref('') const detections = ref([]) const isLoading = ref(false) const error = ref(null) const processingTime = ref(0) // 检测参数 const parameters = ref({ confidence: 0.25, iou: 0.45, model_size: 'm', classes: ['person', 'car', 'dog', 'cat'] }) // 设置原始图片 const setOriginalImage = (imageData) => { originalImage.value = imageData } // 清除图片和结果 const clearImage = () => { originalImage.value = '' detections.value = [] error.value = null } // 更新参数 const updateParameters = (newParams) => { parameters.value = { ...parameters.value, ...newParams } } // 执行检测 const detectImage = async (imageData) => { if (!imageData) return isLoading.value = true error.value = null try { // 将base64图片转换为Blob const base64Data = imageData.split(',')[1] const byteCharacters = atob(base64Data) const byteNumbers = new Array(byteCharacters.length) for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i) } const byteArray = new Uint8Array(byteNumbers) const blob = new Blob([byteArray], { type: 'image/jpeg' }) // 创建FormData const formData = new FormData() formData.append('file', blob, 'image.jpg') formData.append('confidence', parameters.value.confidence) formData.append('iou', parameters.value.iou) formData.append('model_size', parameters.value.model_size) // 添加类别参数 parameters.value.classes.forEach(cls => { formData.append('classes', cls) }) // 发送请求 const response = await axios.post('http://localhost:8000/api/detect', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) if (response.data.success) { detections.value = response.data.detections processingTime.value = response.data.processing_time } else { throw new Error('检测失败') } } catch (err) { error.value = err.response?.data?.detail || err.message console.error('Detection error:', err) } finally { isLoading.value = false } } return { originalImage, detections, isLoading, error, processingTime, parameters, setOriginalImage, clearImage, updateParameters, detectImage } })

5. 实际应用效果

这个平台搭建好后，我们在几个实际场景中测试了一下，效果挺不错的。

5.1 智能安防监控

在安防监控场景中，我们接入了摄像头的实时流。前端用WebSocket接收后端推送的检测结果，每秒能处理10-15帧，对于人、车这些主要目标的检测准确率能达到90%以上。界面上除了实时视频，还有报警记录、统计图表等功能。

5.2 工业质检

在工业生产线质检中，我们用了YOLO12的XLarge模型，虽然速度慢一点，但精度很高。能检测出产品表面的微小瑕疵，比如划痕、气泡、颜色不均等。前端界面做了优化，把检测结果按严重程度分类，方便质检员快速处理。

5.3 智慧零售

在零售店的人流统计和热区分析中，这个平台也发挥了作用。能实时统计店内人数，分析顾客在哪些区域停留时间最长，哪些商品被关注最多。这些数据用图表展示在前端，店主可以很直观地了解店铺运营情况。

6. 遇到的问题和解决方案

在实际开发中，也遇到了一些问题，这里分享一下解决方案。

问题1：大图片上传慢有些用户上传的图片很大，有10MB以上，上传和检测都很慢。我们的解决方案是在前端先压缩图片，用Canvas的drawImage方法把图片缩放到合适尺寸，然后再上传。这样既减少了上传时间，也减轻了后端压力。

问题2：实时视频流卡顿刚开始做实时视频检测时，画面经常卡顿。后来我们优化了几个地方：一是降低视频流的分辨率，二是后端用多线程处理，三是前端用Web Worker来解码视频。优化后，流畅度提升了很多。

问题3：不同浏览器兼容性Chrome上运行好好的，到了Safari或Firefox就有问题。主要是Canvas的某些API和CSS特性支持不一样。我们用了autoprefixer来处理CSS前缀，用babel转译ES6+语法，还做了详细的浏览器测试。

问题4：模型加载慢YOLO12的Large和XLarge模型文件比较大，第一次加载要几十秒。我们做了模型缓存，第一次加载后就把模型保存在内存中。还提供了模型切换功能，用户可以根据需要选择不同大小的模型。

7. 总结

用Vue.js和YOLO12搭建可视化目标检测平台，这个方案在实际项目中验证过，效果确实不错。Vue的响应式特性和丰富的生态让前端开发很高效，YOLO12的高精度检测能满足大多数应用需求。

整个平台的核心思路就是前后端分离，前端负责展示和交互，后端负责算法推理。这种架构让两个部分可以独立开发和优化，也方便以后扩展新功能。

如果你也想做类似的项目，建议先从简单的功能开始，比如图片上传和检测结果展示。等这些基础功能跑通了，再逐步添加实时视频、参数调整、历史记录这些高级功能。遇到性能问题不要怕，一步步优化，总能有解决方案的。

这个平台的代码我已经整理好了，包含前后端的完整实现。你可以根据自己的需求修改，比如换用其他检测模型，或者增加新的可视化功能。希望这个方案能给你带来启发，做出更棒的目标检测应用。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。