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 常见问题解决

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

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

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})

6.3 性能优化建议

对于生产环境，可以考虑以下优化措施：

  1. 使用生产级服务器：用Gunicorn代替Flask开发服务器
  2. 添加缓存机制：对相同图片的检测结果进行缓存
  3. 异步处理：使用Celery处理耗时的检测任务
  4. 模型优化：使用量化或剪枝后的模型提升推理速度

7. 总结

通过这个教程，我们完整地实现了一个YOLO12模型的WebUI界面。从Flask后端的搭建，到前端页面的开发，再到模型的集成调用，每个步骤都提供了详细的代码示例和解释。

这个WebUI虽然简单，但包含了现代Web应用的核心要素：文件上传、实时处理、结果展示等。你可以在此基础上继续扩展，比如添加用户认证、历史记录、模型切换等功能。

实际开发中可能会遇到各种问题，比如模型加载慢、内存占用高等，这时候就需要根据具体情况进行优化。建议先从简单功能开始，逐步添加复杂特性，这样更容易维护和调试。

获取更多AI镜像

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

# 目标检测
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

我测试了一个0.9B模型，它竟然能自动区分多人讲话）

avatar AI Agent技术社区
cover

从一张商品图到正式上架：实测店匠 Shoplazza Athena，AI Agent 不只是聊天框

avatar AI Agent技术社区
cover

【AI Agent】《2026年9月 AI Agent全栈开发技术选型专项面试宝典》

avatar AI Agent技术社区