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

YOLO12模型WebUI开发入门：Python+Flask前后端整合教程

news 2026/3/26 19:58:19

YOLO12模型WebUI开发入门：Python+Flask前后端整合教程

1. 引言

想给自己的YOLO12模型做个漂亮的Web界面吗？今天我就手把手教你如何用Python和Flask框架，快速搭建一个功能完整的YOLO12模型WebUI。不需要前端经验，跟着步骤走，一两个小时就能做出一个能上传图片、实时检测、显示结果的Web应用。

学完这篇教程，你将掌握：

Flask后端API的搭建方法
前端页面与后端的交互技巧
YOLO12模型的集成调用
完整的Web应用部署流程

无论你是算法工程师想展示模型效果，还是开发者想学习Web开发，这篇教程都能给你实用的指导。

2. 环境准备与快速部署

2.1 安装必要的库

首先确保你的Python版本在3.7以上，然后安装所需的依赖库：

pip install flask ultralytics pillow opencv-python

这些库的作用分别是：

flask: Web框架，用于构建后端API
ultralytics: YOLO12模型的官方库
pillow: 图像处理库
opencv-python: 计算机视觉库，用于图像处理

2.2 项目结构规划

创建一个清晰的项目结构能让开发更顺利：

yolo12-webui/ ├── app.py # Flask主程序 ├── static/ # 静态文件目录 │ ├── uploads/ # 上传图片存储 │ ├── results/ # 检测结果存储 │ └── css/ # 样式文件 ├── templates/ # HTML模板 │ └── index.html # 主页面 └── requirements.txt # 依赖列表

3. Flask后端开发

3.1 创建Flask应用

新建一个app.py文件，开始编写后端代码：

from flask import Flask, render_template, request, jsonify from werkzeug.utils import secure_filename from ultralytics import YOLO import os import cv2 app = Flask(__name__) app.config['UPLOAD_FOLDER'] = 'static/uploads' app.config['RESULT_FOLDER'] = 'static/results' app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # 16MB限制 # 确保目录存在 os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True) os.makedirs(app.config['RESULT_FOLDER'], exist_ok=True) # 加载YOLO12模型 model = YOLO('yolo12n.pt') # 使用nano版本，可根据需要更换 @app.route('/') def index(): return render_template('index.html')

3.2 实现图片上传接口

添加文件上传处理功能：

@app.route('/upload', methods=['POST']) def upload_file(): if 'file' not in request.files: return jsonify({'error': '没有选择文件'}) file = request.files['file'] if file.filename == '': return jsonify({'error': '没有选择文件'}) if file: filename = secure_filename(file.filename) filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename) file.save(filepath) # 调用YOLO12进行检测 results = model(filepath) # 保存检测结果 result_filename = f"result_{filename}" result_path = os.path.join(app.config['RESULT_FOLDER'], result_filename) results[0].save(result_path) return jsonify({ 'success': True, 'original': f'/static/uploads/{filename}', 'result': f'/static/results/{result_filename}' })

3.3 添加模型检测接口

为了更好的灵活性，我们可以单独创建一个检测接口：

@app.route('/detect', methods=['POST']) def detect_objects(): data = request.json image_path = data.get('image_path') if not image_path or not os.path.exists(image_path): return jsonify({'error': '图片路径无效'}) # 使用YOLO12进行检测 results = model(image_path) # 获取检测结果信息 detections = [] for result in results: boxes = result.boxes for box in boxes: detections.append({ 'class': model.names[int(box.cls)], 'confidence': float(box.conf), 'bbox': box.xyxy[0].tolist() }) return jsonify({ 'detections': detections, 'total_objects': len(detections) })

4. 前端页面开发

4.1 创建基础HTML模板

在templates目录下创建index.html：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YOLO12目标检测WebUI</title> <style> body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; } .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .upload-area { border: 2px dashed #ccc; padding: 40px; text-align: center; margin-bottom: 20px; cursor: pointer; } .upload-area:hover { border-color: #007bff; } .results { display: none; margin-top: 30px; } .image-comparison { display: flex; gap: 20px; margin-top: 20px; } .image-comparison img { max-width: 100%; height: auto; border: 1px solid #ddd; } button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; } button:hover { background: #0056b3; } </style> </head> <body> <div class="container"> <h1>YOLO12目标检测演示</h1> <div class="upload-area" id="uploadArea"> <h3>点击或拖拽图片到这里上传</h3> <p>支持JPG、PNG格式，最大16MB</p> <input type="file" id="fileInput" style="display: none;" accept="image/*"> </div> <div class="results" id="resultsSection"> <h2>检测结果</h2> <div class="image-comparison"> <div> <h3>原始图片</h3> <img id="originalImage" src="" alt="原始图片"> </div> <div> <h3>检测结果</h3> <img id="resultImage" src="" alt="检测结果"> </div> </div> <div id="detectionInfo"></div> </div> </div> <script> // JavaScript代码将在下一节实现 </script> </body> </html>

4.2 添加前端交互逻辑

在index.html的script标签中添加JavaScript代码：

document.getElementById('uploadArea').addEventListener('click', () => { document.getElementById('fileInput').click(); }); document.getElementById('fileInput').addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return; // 显示加载状态 const uploadArea = document.getElementById('uploadArea'); uploadArea.innerHTML = '<h3>处理中...</h3><p>正在上传并检测图片</p>'; const formData = new FormData(); formData.append('file', file); try { const response = await fetch('/upload', { method: 'POST', body: formData }); const data = await response.json(); if (data.success) { // 显示结果 document.getElementById('originalImage').src = data.original; document.getElementById('resultImage').src = data.result; document.getElementById('resultsSection').style.display = 'block'; // 获取详细的检测信息 const detectionResponse = await fetch('/detect', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({image_path: '.' + data.original}) }); const detectionData = await detectionResponse.json(); displayDetectionInfo(detectionData); } else { alert('上传失败: ' + data.error); resetUploadArea(); } } catch (error) { alert('发生错误: ' + error.message); resetUploadArea(); } }); function displayDetectionInfo(data) { const infoDiv = document.getElementById('detectionInfo'); infoDiv.innerHTML = ` <h3>检测统计</h3> <p>共检测到 <strong>${data.total_objects}</strong> 个对象</p> ${data.detections.length > 0 ? ` <h3>检测详情</h3> <ul> ${data.detections.map(det => ` <li>${det.class} - 置信度: ${(det.confidence * 100).toFixed(2)}%</li> `).join('')} </ul> ` : ''} `; } function resetUploadArea() { document.getElementById('uploadArea').innerHTML = ` <h3>点击或拖拽图片到这里上传</h3> <p>支持JPG、PNG格式，最大16MB</p> <input type="file" id="fileInput" style="display: none;" accept="image/*"> `; document.getElementById('fileInput').addEventListener('change', arguments.callee); }

5. 完整应用测试

5.1 启动Flask应用

在项目根目录下运行：

export FLASK_APP=app.py flask run --host=0.0.0.0 --port=5000

或者直接运行Python文件：

if __name__ == '__main__': app.run(debug=True, host='0.0.0.0', port=5000)

然后在终端执行：

python app.py

5.2 测试WebUI功能

打开浏览器访问http://localhost:5000，你应该能看到上传界面。尝试上传一张包含常见物体的图片（如街道场景、室内环境等），系统会自动调用YOLO12模型进行检测，并在页面上显示原始图片和检测结果。

5.3 常见问题解决

如果遇到问题，可以检查以下几点：

模型加载失败：确保已下载YOLO12模型权重文件
图片上传失败：检查static/uploads目录权限
检测结果不显示：查看浏览器控制台是否有错误信息
内存不足：如果使用较大模型，可能需要更多内存

6. 实用技巧与进阶功能

6.1 添加实时视频检测

如果你想扩展支持实时视频检测，可以添加以下代码：

@app.route('/video_feed') def video_feed(): return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame') def generate_frames(): cap = cv2.VideoCapture(0) # 使用默认摄像头 while True: success, frame = cap.read() if not success: break # 使用YOLO12检测 results = model(frame) annotated_frame = results[0].plot() # 转换为JPEG格式 ret, buffer = cv2.imencode('.jpg', annotated_frame) frame = buffer.tobytes() yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

6.2 添加批量处理功能

对于需要处理多张图片的场景，可以添加批量上传功能：

@app.route('/batch_upload', methods=['POST']) def batch_upload(): if 'files' not in request.files: return jsonify({'error': '没有选择文件'}) files = request.files.getlist('files') results = [] for file in files: if file.filename == '': continue filename = secure_filename(file.filename) filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename) file.save(filepath) # 处理图片 processed_results = process_image(filepath) results.append(processed_results) return jsonify({'results': results})