基于Flask与YOLO的航拍小目标实时检测Web平台开发

1. 项目概述

最近在做一个机场航拍小目标实时检测的项目，需要构建一个完整的Web平台来实现检测、可视化和结果管理。这个平台需要支持图片、视频和浏览器摄像头三种输入方式，能够实时显示检测结果，并提供丰富的交互功能。经过一番技术选型，最终决定采用Flask+SocketIO作为后端框架，配合HTML/CSS/JS前端技术栈来实现。

这个平台的主要特点包括：

• 支持左右等宽双画面对比（原图/检测结果）
• 提供进度控制（播放/暂停/继续/停止与拖拽）
• 可调节置信度阈值(Conf)和IoU阈值
• 支持类别筛选
• 检测结果可导出为CSV格式
• 带检测框的结果图片可一键下载
• 检测日志和关键元数据写入SQLite数据库
• 支持登录/注册功能（可跳过）

在模型方面，平台内置了从YOLOv5到YOLOv12共8种模型的切换功能，可以方便地比较不同模型的性能表现。后端会统一评测并可视化mAP、F1、PR曲线、训练曲线等指标。同时支持批量离线评估与在线误检回溯，形成从数据到部署的完整闭环。

2. 技术选型与架构设计

2.1 后端技术选型

选择Flask作为后端框架主要基于以下考虑：

1. 轻量级：相比Django等全功能框架，Flask更加轻量灵活，适合快速开发小型Web应用
2. 扩展性强：通过Flask扩展可以方便地添加所需功能
3. Python生态：与我们的深度学习模型无缝集成
4. 开发效率高：简单易学，开发速度快

Flask-SocketIO的加入是为了实现前后端的实时通信，这对于视频流的实时检测和结果显示至关重要。相比传统的HTTP轮询，WebSocket协议能提供更高效的实时数据传输。

2.2 前端技术设计

前端采用经典的HTML/CSS/JS组合，没有使用复杂的前端框架，主要考虑：

1. 轻量快速：避免前端框架带来的额外开销
2. 直接控制：对视频流和画布操作需要精细控制
3. 兼容性：纯前端技术栈兼容性更好

界面设计上采用响应式布局，确保在不同设备上都能良好显示。主要功能区域包括：

• 视频显示区（左右双画面）
• 控制面板（播放控制、参数调节）
• 结果展示区（检测统计、导出功能）

2.3 数据存储方案

选用SQLite作为数据库主要基于以下原因：

1. 零配置：无需单独安装数据库服务
2. 单文件：便于项目部署和迁移
3. 足够性能：对于中小规模应用完全够用
4. ACID支持：确保数据完整性

数据库主要存储三类数据：

1. 用户账户信息（哈希加密存储）
2. 检测记录和结果
3. 系统日志和审计信息

3. 核心功能实现

3.1 视频流处理管道

视频处理是系统的核心功能之一，实现流程如下：

python复制@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
        else:
            # 执行目标检测
            processed_frame = detect_objects(frame)
            # 编码为JPEG格式
            ret, buffer = cv2.imencode('.jpg', processed_frame)
            frame = buffer.tobytes()
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

3.2 双画面对比实现

左右双画面显示是通过HTML的flex布局和两个canvas元素实现的：

html复制<div class="video-container">
    <div class="video-wrapper">
        <canvas id="originalCanvas"></canvas>
        <span>原始画面</span>
    </div>
    <div class="video-wrapper">
        <canvas id="processedCanvas"></canvas>
        <span>检测结果</span>
    </div>
</div>

对应的CSS样式：

css复制.video-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.video-wrapper {
    width: 49%;
    position: relative;
}
canvas {
    width: 100%;
    background-color: #000;
}

3.3 实时通信实现

使用SocketIO实现前后端实时通信的关键代码：

python复制# 后端
@socketio.on('connect')
def handle_connect():
    print('Cli