尧图网站建设 
简介基于YOLOv8与Flask实现的目标检测系统设计源码专为毕业设计、课程实践及Web端目标检测应用开发打造。项目将YOLOv8模型推理、Flask后端接口与前端可视化界面整合为完整可运行的技术方案并附带Anaconda3、Python3.8、torch1.9.0cu111、ultralytics8.2.2等测试环境说明便于读者解决从模型训练到Web服务部署的衔接问题。压缩包共1895个文件大小约29.81MB核心内容包括Python业务代码、YOLOv8模型权重pt、HTML/CSS/JS前端资源、配置文件与文本笔记另含少量演示视频其中前端基于AdminLTE框架界面组件较全目录结构清晰可直观看出前端展示层、后端接口层与模型调用层的分层设计。目前已有962人学习下载资料完整度和工程性兼备既适合快速启动目标检测毕业设计项目也可作为学习FlaskYOLOv8集成开发的实际参考。1. 基于 YOLOv8Flask 的目标检测系统从模型训练到 Web 服务很多工程师复现完 YOLOv8 的目标检测效果后只能对着控制台输出的坐标和置信度发愣或者用cv2.imshow在本地弹个窗口给同事看。一旦需要演示、远程访问或嵌入到现有业务系统这种交付方式就会显得笨重且不可维护。这个标题的价值恰恰在于解决“模型跑起来了但别人用不上”的尴尬通过 Flask 将 YOLOv8 包装成 HTTP 接口前端浏览器只需上传一张图片或打开一个网页就能看到实时推流和检测结果。对于做工业质检、安防巡检以及自动化脚本的开发者来说这一套组合足够轻量、足够快也足够灵活。接下来直接拆解这套系统的核心设计与可复现代码。2. 初始化工程结构与加载 YOLOv8 模型2.1 为什么选择 Flask 承载 YOLOv8 推理服务在 AI 推理场景中常见选项有 Flask、FastAPI 和 Django。YOLOv8 的推理属于 CPU/GPU 密集型计算其耗时瓶颈在模型前向传播而不在 Web 框架的路由分发。Flask 的同步 WSGI 模型配合线程池在这种短请求、重计算的场景下开发效率和调试体验明显更好。FastAPI 的异步特性虽然能提升 IO 并发但遇到 PyTorch 的 GIL 锁收益会被极大稀释。Flask 原生支持multipart/x-mixed-replace流式响应配合生成器函数可以直接实现视频推流接口不需要额外引入 WebSocket 协议大幅降低代码复杂度。2.2 搭建可复现的 YOLOv8 项目环境目标检测系统的依赖管理需要精确锁定版本否则训练与推理行为会不一致。项目根目录下的requirements.txt应包含以下核心库ultralytics8.2.0 flask3.0.3 opencv-python4.9.0.80 torch2.2.2 torchvision0.17.2 numpy1.26.4 onnxruntime-gpu1.18.0安装时建议使用pip install -r requirements.txt -i指定国内镜像源避免网络波动导致安装中断。ultralytics包会同时引入pandas与matplotlib如果仅做推理不想训练可以在安装后手动卸载这两个依赖能减少约 100MB 的磁盘占用。YOLOv8 对 Python 版本要求较高3.10至3.11最为稳妥过旧的版本会导致torch找不到预编译的whl包。2.3 模型加载、设备选择与首次预热机制模型加载看似只有一行代码但在实际部署中GPU 显存分配和 CUDA 内核初始化会带来不可忽略的时延。为提高推理速度需要显式指定计算设备并设置精度模式。from ultralytics import YOLO import torch # 根据当前环境自动选择设备避免硬编码导致 CUDA 不可用时报错 device cuda if torch.cuda.is_available() else cpu model YOLO(yolov8n.pt, taskdetect) # Edge 设备如 RK3588、Jetson建议导出为 ONNX 后再加载 model.to(device) # 预热驱逐懒加载状态确保首次请求时不需要重新编译 CUDA 内核 for _ in range(5): dummy_input torch.randn((1, 3, 640, 640), devicedevice) _ model.predict(dummy_input, imgsz640, verboseFalse) print(f模型已加载至: {device})YOLO构造函数的第一个参数既可以是本地权重文件.pt也可以是 Ultralytics 官方预训练权重的名称。taskdetect用于强制指定任务类型防止权重文件中包含分割或姿态估计头时引发歧义。预热循环的目的是触发 PyTorch 的 cuDNN autotune 机制让卷积算法在正式请求前完成基准测试从而选择最优的 kernel 实现。如果省去这 5 次空转线上环境的第一次检测请求往往会额外消耗 500ms 甚至更多时间。YOLOv8 官方提供了多种尺寸的权重不同模型的推理速度和精度差异极大部署选型时应根据实际 GPU 或 CPU 性能均衡考虑。模型权重参数量 (M)mAPval50-95CPU 推理耗时 (ms)适用场景yolov8n.pt3.237.3约 45边缘设备、实时视频流yolov8s.pt11.244.9约 90普通显卡、单路视频yolov8m.pt25.950.2约 180高精度图片审核yolov8l.pt43.752.9约 300离线批处理任务yolov8x.pt68.253.9约 500追求极致精度上表基于imgsz640的输入分辨率测算。若部署环境为 GTX 1660 Ti 这类 6GB 显存的显卡建议直接选用yolov8s.pt并开启halfTrue的 FP16 推理显存占用可控制在 2GB 以内。3. 核心接口设计图片上传与视频流实时分析3.1 图片检测接口base64 编码与 JSON 结构设计Flask 后端需要接收前端上传的图片文件执行推理后返回结构化 JSON方便前端渲染或存入日志。接口设计应遵循“输入二进制输出纯文本”的原则避免返回图片字节流时给前端带来解析负担。import base64 import io import json from PIL import Image from flask import Flask, request, jsonify app Flask(__name__) app.route(/detect/image, methods[POST]) def detect_image(): if file not in request.files: return jsonify({code: 400, msg: 缺少 file 参数}), 400 file request.files[file] # 使用 PIL 打开自动处理 EXIF 方向信息 img Image.open(io.BytesIO(file.read())).convert(RGB) # 置信度阈值与 IoU 阈值可通过表单动态传入默认取服务端配置 conf float(request.form.get(conf, 0.25)) iou float(request.form.get(iou, 0.7)) results model.predict(img, imgsz640, confconf, iouiou, verboseFalse) boxes results[0].boxes.xyxy.cpu().numpy().tolist() classes results[0].boxes.cls.cpu().numpy().tolist() scores results[0].boxes.conf.cpu().numpy().tolist() names results[0].names detections [ { class: names[int(cls)], score: round(float(score), 4), bbox: [round(x, 2) for x in box], } for box, cls, score in zip(boxes, classes, scores) ] return jsonify({code: 0, data: detections})这里必须注意request.form.get与request.args.get的区别前者解析multipart/form-data表单后者解析 URL 查询字符串。前端使用FormData对象上传文件时额外字段混在表单里因此要用form。model.predict返回的Result对象包含多个属性其中boxes.xyxy是左上角和右下角绝对坐标。names属性是一个字典键为类别 ID值为可读的类别名。在目标检测系统中这种 JSON 结构可以直接被前端 Canvas 覆盖层消费也可以存入数据库作为审计记录。3.2 视频流式检测multipart 与生成器函数实时视频检测不能采用请求-响应模式否则每分析一帧都要重新建立一次 HTTP 连接开销巨大。常见做法是使用 Flask 的流式响应通过multipart/x-mixed-replace协议持续推送 JPEG 帧。这种技术来源于浏览器对image/pjpeg的多部分文档支持至今仍是搭建目标检测监控页面的高效方案。import cv2 from flask import Response def generate_frames(): cap cv2.VideoCapture(0) # 0 代表默认摄像头也可以是 RTSP 地址 cap.set(cv2.CAP_PROP_FRAME_WIDTH, 1280) cap.set(cv2.CAP_PROP_FRAME_HEIGHT, 720) while True: success, frame cap.read() if not success: break # 在此处调用 YOLOv8 进行检测并绘制结果 results model.predict(frame, imgsz640, conf0.3, devicedevice, verboseFalse) annotated results[0].plot() # 直接在图像上绘制矩形框与标签 # 压缩为 JPEG 格式质量设为 80兼顾画质与传输带宽 ret, buffer cv2.imencode(.jpg, annotated, [cv2.IMWRITE_JPEG_QUALITY, 80]) frame_byte buffer.tobytes() yield ( b--frame\r\n bContent-Type: image/jpeg\r\n bContent-Length: str(len(frame_byte)).encode() b\r\n\r\n frame_byte b\r\n ) cap.release() app.route(/detect/video) def video_feed(): return Response( generate_frames(), mimetypemultipart/x-mixed-replace; boundaryframe )boundaryframe是流式协议的分隔标识客户端浏览器会依据它在同一个 HTTP 长连接中识别出连续的 JPEG 图像。Content-Length头字段虽然不是multipart协议强制要求的但加上后能让浏览器提前分配缓冲区减少花屏概率。这个生成器函数是阻塞式的意味着单线程模型下同一时间只能有一个客户端拉流。若需支持多路并发访问必须将摄像头帧拷贝放入多线程或使用独立进程捕获。这里还需要留意摄像头资源的释放逻辑当客户端断连后Response会调用生成器的GeneratorExit异常若不包裹try-finallycap.release()可能不会执行导致摄像头被一直占用。3.3 结果后处理与可视化plot 方法与 NMS 参数results[0].plot()是 Ultralytics 提供的高层封装内部会读取坐标、类名、置信度并调用 OpenCV 绘制矩形和文字。对于需要自定义品牌色的场景可以禁用内置绘图改为手动遍历boxes进行绘制。# 手动绘制示例 # cv2.rectangle(frame, (x1, y1), (x2, y2), (255, 0, 0), 2) # cv2.putText(frame, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2)NMS 参数iou对重叠目标的处理至关重要。在行人拥挤场景下iou0.7会导致多个高度重叠的检测框被合并成一个而iou0.3会保留更多低分框误检率显著上升。实际项目中建议为不同业务场景配置不同的 NMS 阈值。4. Web 前端实时展示与源码工程化拆分4.1 使用原生 HTML 与 JavaScript 构建检测控制台前端的核心诉求是无刷新展示检测结果。对于实时视频流直接在img标签的src属性中指向后端路由即可。浏览器会自动解析multipart流并逐帧更新图片内容实现零代码的实时预览。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleYOLOv8 目标检测系统/title /head body h2实时视频检测/h2 img src{{ url_for(video_feed) }} width960 height540 h3图片检测上传/h3 input typefile idimageInput acceptimage/* button onclickuploadImage()开始检测/button pre idresultArea/pre script async function uploadImage() { const file document.getElementById(imageInput).files[0]; if (!file) return alert(请先选择图片); const formData new FormData(); formData.append(file, file); formData.append(conf, 0.35); formData.append(iou, 0.5); const resp await fetch(/detect/image, { method: POST, body: formData }); const text await resp.text(); document.getElementById(resultArea).innerText text; } /script /body /htmlurl_for是 Flask 自带的模板反转函数在templates/index.html中会被渲染为实际的访问路径。fetch提交FormData时不要手动设置Content-Type头浏览器会依据boundary自动生成带有正确分隔符的multipart/form-data请求。检测结果显示为 JSON 文本虽然直观但在生产环境建议改为 Canvas 画布将原图和检测框叠加绘制体验更专业。4.2 模块化拆分config.py、utils.py 与 app.py直接在一个app.py中写路由和模型调用项目规模扩大后会陷入逻辑混乱。标准工程做法是将配置、模型推理、API 路由拆分到不同模块使得单元测试和后续移植到 TensorRT 服务时无需改动 Web 层代码。# config.py import os MODEL_PATH os.getenv(YOLO_MODEL_PATH, yolov8s.pt) CONF_THRESHOLD float(os.getenv(YOLO_CONF, 0.25)) IOU_THRESHOLD float(os.getenv(YOLO_IOU, 0.6)) PORT int(os.getenv(PORT, 5000)) DEVICE cuda# utils.py from ultralytics import YOLO import config _model None def get_model() - YOLO: 全局复用同一个模型实例避免重复加载造成显存泄漏 global _model if _model is None: _model YOLO(config.MODEL_PATH, taskdetect) _model.to(config.DEVICE) return _model def infer(image, confNone, iouNone): model get_model() return model.predict( image, confconf or config.CONF_THRESHOLD, iouiou or config.IOU_THRESHOLD, verboseFalse )在app.py中只需要引入utils.infer不再关心模型内部实现。get_model采用懒加载单例模式第一次请求时初始化模型之后进程内共享同一个YOLO对象。每个 worker 进程都会独立复刻一份模型启动时会看到多份模型加载日志这是正常现象不是资源泄漏。4.3 异步推理与请求阻塞问题Flask 默认的dev服务器是单进程多线程模型当多个请求同时到达时CPU 推理阶段的 GIL 会阻塞线程切换。常见做法是引入concurrent.futures.ThreadPoolExecutor将推理任务提交到后台线程池主线程直接返回任务 ID前端通过轮询结果接口获取推理状态。from concurrent.futures import ThreadPoolExecutor executor ThreadPoolExecutor(max_workers4) app.route(/detect/async, methods[POST]) def detect_async(): file request.files[file] future executor.submit(utils.infer, file.stream) task_id hash(future) tasks[task_id] future return jsonify({task_id: task_id}) app.route(/detect/result/) def detect_result(task_id): future tasks.get(task_id) if future and future.done(): result future.result() return jsonify({status: done, data: parse_result(result)}) return jsonify({status: pending})ThreadPoolExecutor的线程数建议设置为 CPU 物理核心数的两倍避免线程切换开销超过并行计算收益。对于视频流接口异步化意义不大因为生成器占用的线程在持续执行推理不能通过同样的方式调度。5. YOLOv8Flask 系统的加速优化与部署避坑5.1 显存碎片化与 GPU 内存清理推理服务运行数小时后GPU 显存占用往往会比初始时高出许多。PyTorch 的显存分配器会缓存空闲块nvidia-smi看到的占用率虚高。在每次请求结束后的finally块中执行以下操作能有效防止显存增长过快import gc import torch finally: gc.collect() torch.cuda.empty_cache()torch.cuda.empty_cache()只是释放 PyTorch 缓存中未使用的显存块并不会影响已分配张量。频繁调用会降低性能适合在批量任务结束后调用不适合在每条短视频帧上执行。5.2 导出 ONNX 并切换到 onnxruntime 推理对于 CPU 部署环境PyTorch 的算子合并与指令集优化远不及 ONNX Runtime。对于 GPU 环境TensorRT 更是能将推理速度提升 2 到 3 倍。导出命令如下yolo export modelyolov8s.pt formatonnx dynamicTrue simplifyTrue yolo export modelyolov8s.pt formattensorrt halfTrue导出后在 Flask 中替换推理后端import onnxruntime as ort session ort.InferenceSession( yolov8s.onnx, providers[CUDAExecutionProvider, CPUExecutionProvider] ) def ort_infer(image): input_tensor image.transpose((2, 0, 1))[None, ...].astype(float32) / 255.0 outputs session.run(None, {session.get_inputs()[0].name: input_tensor}) return outputshalfTrue在英伟达 GPU 上显著有效但在 CPU 上因不兼容 AVX512 浮点运算而性能回退必须按部署设备分别导出。切换 ONNX 后Flask 的推理代码与具体框架解耦这使得后续将服务迁移到 RK3588 这样的边缘设备时只需要替换utils.py中的后端路由与前端代码无需任何改动。5.3 Gunicorn 多进程部署的 worker 类型选择生产环境中直接用python app.py启动服务是非常不推荐的。使用 Gunicorn 作为 WSGI 服务器时默认的syncworker 会阻塞在同一时刻只能处理一个请求视频拉流接口一旦被客户端占用其他所有接口进入饥饿状态。必须改用gthreadworker 类型gunicorn -w 4 -b 0.0.0.0:5000 -k gthread app:app --threads 16 --timeout 120-w 4表示启动 4 个进程每个进程拥有独立的模型副本和显存上下文意味着显存占用会翻四倍在 8GB 显存环境下建议使用-w 2。--threads 16指定每个进程内的线程数用于处理视频流长连接和普通图片请求。--timeout 120必须大于预热时间和首次推理耗时的总和否则 YOLOv8 的首次请求会被 Gunicorn 强制杀掉。验证部署是否成功时应查看gunicorn的访问日志确认请求响应时间在p50与p99之间保持稳定而不是直接观察nvidia-smi。本文还有配套的精品资源点击获取 YOLOv8+Flask目标检测系统：从模型训练到Web服务部署实战
简介基于YOLOv8与Flask实现的目标检测系统设计源码专为毕业设计、课程实践及Web端目标检测应用开发打造。项目将YOLOv8模型推理、Flask后端接口与前端可视化界面整合为完整可运行的技术方案并附带Anaconda3、Python3.8、torch1.9.0cu111、ultralytics8.2.2等测试环境说明便于读者解决从模型训练到Web服务部署的衔接问题。压缩包共1895个文件大小约29.81MB核心内容包括Python业务代码、YOLOv8模型权重pt、HTML/CSS/JS前端资源、配置文件与文本笔记另含少量演示视频其中前端基于AdminLTE框架界面组件较全目录结构清晰可直观看出前端展示层、后端接口层与模型调用层的分层设计。目前已有962人学习下载资料完整度和工程性兼备既适合快速启动目标检测毕业设计项目也可作为学习FlaskYOLOv8集成开发的实际参考。1. 基于 YOLOv8Flask 的目标检测系统从模型训练到 Web 服务很多工程师复现完 YOLOv8 的目标检测效果后只能对着控制台输出的坐标和置信度发愣或者用cv2.imshow在本地弹个窗口给同事看。一旦需要演示、远程访问或嵌入到现有业务系统这种交付方式就会显得笨重且不可维护。这个标题的价值恰恰在于解决“模型跑起来了但别人用不上”的尴尬通过 Flask 将 YOLOv8 包装成 HTTP 接口前端浏览器只需上传一张图片或打开一个网页就能看到实时推流和检测结果。对于做工业质检、安防巡检以及自动化脚本的开发者来说这一套组合足够轻量、足够快也足够灵活。接下来直接拆解这套系统的核心设计与可复现代码。2. 初始化工程结构与加载 YOLOv8 模型2.1 为什么选择 Flask 承载 YOLOv8 推理服务在 AI 推理场景中常见选项有 Flask、FastAPI 和 Django。YOLOv8 的推理属于 CPU/GPU 密集型计算其耗时瓶颈在模型前向传播而不在 Web 框架的路由分发。Flask 的同步 WSGI 模型配合线程池在这种短请求、重计算的场景下开发效率和调试体验明显更好。FastAPI 的异步特性虽然能提升 IO 并发但遇到 PyTorch 的 GIL 锁收益会被极大稀释。Flask 原生支持multipart/x-mixed-replace流式响应配合生成器函数可以直接实现视频推流接口不需要额外引入 WebSocket 协议大幅降低代码复杂度。2.2 搭建可复现的 YOLOv8 项目环境目标检测系统的依赖管理需要精确锁定版本否则训练与推理行为会不一致。项目根目录下的requirements.txt应包含以下核心库ultralytics8.2.0 flask3.0.3 opencv-python4.9.0.80 torch2.2.2 torchvision0.17.2 numpy1.26.4 onnxruntime-gpu1.18.0安装时建议使用pip install -r requirements.txt -i指定国内镜像源避免网络波动导致安装中断。ultralytics包会同时引入pandas与matplotlib如果仅做推理不想训练可以在安装后手动卸载这两个依赖能减少约 100MB 的磁盘占用。YOLOv8 对 Python 版本要求较高3.10至3.11最为稳妥过旧的版本会导致torch找不到预编译的whl包。2.3 模型加载、设备选择与首次预热机制模型加载看似只有一行代码但在实际部署中GPU 显存分配和 CUDA 内核初始化会带来不可忽略的时延。为提高推理速度需要显式指定计算设备并设置精度模式。from ultralytics import YOLO import torch # 根据当前环境自动选择设备避免硬编码导致 CUDA 不可用时报错 device cuda if torch.cuda.is_available() else cpu model YOLO(yolov8n.pt, taskdetect) # Edge 设备如 RK3588、Jetson建议导出为 ONNX 后再加载 model.to(device) # 预热驱逐懒加载状态确保首次请求时不需要重新编译 CUDA 内核 for _ in range(5): dummy_input torch.randn((1, 3, 640, 640), devicedevice) _ model.predict(dummy_input, imgsz640, verboseFalse) print(f模型已加载至: {device})YOLO构造函数的第一个参数既可以是本地权重文件.pt也可以是 Ultralytics 官方预训练权重的名称。taskdetect用于强制指定任务类型防止权重文件中包含分割或姿态估计头时引发歧义。预热循环的目的是触发 PyTorch 的 cuDNN autotune 机制让卷积算法在正式请求前完成基准测试从而选择最优的 kernel 实现。如果省去这 5 次空转线上环境的第一次检测请求往往会额外消耗 500ms 甚至更多时间。YOLOv8 官方提供了多种尺寸的权重不同模型的推理速度和精度差异极大部署选型时应根据实际 GPU 或 CPU 性能均衡考虑。模型权重参数量 (M)mAPval50-95CPU 推理耗时 (ms)适用场景yolov8n.pt3.237.3约 45边缘设备、实时视频流yolov8s.pt11.244.9约 90普通显卡、单路视频yolov8m.pt25.950.2约 180高精度图片审核yolov8l.pt43.752.9约 300离线批处理任务yolov8x.pt68.253.9约 500追求极致精度上表基于imgsz640的输入分辨率测算。若部署环境为 GTX 1660 Ti 这类 6GB 显存的显卡建议直接选用yolov8s.pt并开启halfTrue的 FP16 推理显存占用可控制在 2GB 以内。3. 核心接口设计图片上传与视频流实时分析3.1 图片检测接口base64 编码与 JSON 结构设计Flask 后端需要接收前端上传的图片文件执行推理后返回结构化 JSON方便前端渲染或存入日志。接口设计应遵循“输入二进制输出纯文本”的原则避免返回图片字节流时给前端带来解析负担。import base64 import io import json from PIL import Image from flask import Flask, request, jsonify app Flask(__name__) app.route(/detect/image, methods[POST]) def detect_image(): if file not in request.files: return jsonify({code: 400, msg: 缺少 file 参数}), 400 file request.files[file] # 使用 PIL 打开自动处理 EXIF 方向信息 img Image.open(io.BytesIO(file.read())).convert(RGB) # 置信度阈值与 IoU 阈值可通过表单动态传入默认取服务端配置 conf float(request.form.get(conf, 0.25)) iou float(request.form.get(iou, 0.7)) results model.predict(img, imgsz640, confconf, iouiou, verboseFalse) boxes results[0].boxes.xyxy.cpu().numpy().tolist() classes results[0].boxes.cls.cpu().numpy().tolist() scores results[0].boxes.conf.cpu().numpy().tolist() names results[0].names detections [ { class: names[int(cls)], score: round(float(score), 4), bbox: [round(x, 2) for x in box], } for box, cls, score in zip(boxes, classes, scores) ] return jsonify({code: 0, data: detections})这里必须注意request.form.get与request.args.get的区别前者解析multipart/form-data表单后者解析 URL 查询字符串。前端使用FormData对象上传文件时额外字段混在表单里因此要用form。model.predict返回的Result对象包含多个属性其中boxes.xyxy是左上角和右下角绝对坐标。names属性是一个字典键为类别 ID值为可读的类别名。在目标检测系统中这种 JSON 结构可以直接被前端 Canvas 覆盖层消费也可以存入数据库作为审计记录。3.2 视频流式检测multipart 与生成器函数实时视频检测不能采用请求-响应模式否则每分析一帧都要重新建立一次 HTTP 连接开销巨大。常见做法是使用 Flask 的流式响应通过multipart/x-mixed-replace协议持续推送 JPEG 帧。这种技术来源于浏览器对image/pjpeg的多部分文档支持至今仍是搭建目标检测监控页面的高效方案。import cv2 from flask import Response def generate_frames(): cap cv2.VideoCapture(0) # 0 代表默认摄像头也可以是 RTSP 地址 cap.set(cv2.CAP_PROP_FRAME_WIDTH, 1280) cap.set(cv2.CAP_PROP_FRAME_HEIGHT, 720) while True: success, frame cap.read() if not success: break # 在此处调用 YOLOv8 进行检测并绘制结果 results model.predict(frame, imgsz640, conf0.3, devicedevice, verboseFalse) annotated results[0].plot() # 直接在图像上绘制矩形框与标签 # 压缩为 JPEG 格式质量设为 80兼顾画质与传输带宽 ret, buffer cv2.imencode(.jpg, annotated, [cv2.IMWRITE_JPEG_QUALITY, 80]) frame_byte buffer.tobytes() yield ( b--frame\r\n bContent-Type: image/jpeg\r\n bContent-Length: str(len(frame_byte)).encode() b\r\n\r\n frame_byte b\r\n ) cap.release() app.route(/detect/video) def video_feed(): return Response( generate_frames(), mimetypemultipart/x-mixed-replace; boundaryframe )boundaryframe是流式协议的分隔标识客户端浏览器会依据它在同一个 HTTP 长连接中识别出连续的 JPEG 图像。Content-Length头字段虽然不是multipart协议强制要求的但加上后能让浏览器提前分配缓冲区减少花屏概率。这个生成器函数是阻塞式的意味着单线程模型下同一时间只能有一个客户端拉流。若需支持多路并发访问必须将摄像头帧拷贝放入多线程或使用独立进程捕获。这里还需要留意摄像头资源的释放逻辑当客户端断连后Response会调用生成器的GeneratorExit异常若不包裹try-finallycap.release()可能不会执行导致摄像头被一直占用。3.3 结果后处理与可视化plot 方法与 NMS 参数results[0].plot()是 Ultralytics 提供的高层封装内部会读取坐标、类名、置信度并调用 OpenCV 绘制矩形和文字。对于需要自定义品牌色的场景可以禁用内置绘图改为手动遍历boxes进行绘制。# 手动绘制示例 # cv2.rectangle(frame, (x1, y1), (x2, y2), (255, 0, 0), 2) # cv2.putText(frame, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2)NMS 参数iou对重叠目标的处理至关重要。在行人拥挤场景下iou0.7会导致多个高度重叠的检测框被合并成一个而iou0.3会保留更多低分框误检率显著上升。实际项目中建议为不同业务场景配置不同的 NMS 阈值。4. Web 前端实时展示与源码工程化拆分4.1 使用原生 HTML 与 JavaScript 构建检测控制台前端的核心诉求是无刷新展示检测结果。对于实时视频流直接在img标签的src属性中指向后端路由即可。浏览器会自动解析multipart流并逐帧更新图片内容实现零代码的实时预览。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleYOLOv8 目标检测系统/title /head body h2实时视频检测/h2 img src{{ url_for(video_feed) }} width960 height540 h3图片检测上传/h3 input typefile idimageInput acceptimage/* button onclickuploadImage()开始检测/button pre idresultArea/pre script async function uploadImage() { const file document.getElementById(imageInput).files[0]; if (!file) return alert(请先选择图片); const formData new FormData(); formData.append(file, file); formData.append(conf, 0.35); formData.append(iou, 0.5); const resp await fetch(/detect/image, { method: POST, body: formData }); const text await resp.text(); document.getElementById(resultArea).innerText text; } /script /body /htmlurl_for是 Flask 自带的模板反转函数在templates/index.html中会被渲染为实际的访问路径。fetch提交FormData时不要手动设置Content-Type头浏览器会依据boundary自动生成带有正确分隔符的multipart/form-data请求。检测结果显示为 JSON 文本虽然直观但在生产环境建议改为 Canvas 画布将原图和检测框叠加绘制体验更专业。4.2 模块化拆分config.py、utils.py 与 app.py直接在一个app.py中写路由和模型调用项目规模扩大后会陷入逻辑混乱。标准工程做法是将配置、模型推理、API 路由拆分到不同模块使得单元测试和后续移植到 TensorRT 服务时无需改动 Web 层代码。# config.py import os MODEL_PATH os.getenv(YOLO_MODEL_PATH, yolov8s.pt) CONF_THRESHOLD float(os.getenv(YOLO_CONF, 0.25)) IOU_THRESHOLD float(os.getenv(YOLO_IOU, 0.6)) PORT int(os.getenv(PORT, 5000)) DEVICE cuda# utils.py from ultralytics import YOLO import config _model None def get_model() - YOLO: 全局复用同一个模型实例避免重复加载造成显存泄漏 global _model if _model is None: _model YOLO(config.MODEL_PATH, taskdetect) _model.to(config.DEVICE) return _model def infer(image, confNone, iouNone): model get_model() return model.predict( image, confconf or config.CONF_THRESHOLD, iouiou or config.IOU_THRESHOLD, verboseFalse )在app.py中只需要引入utils.infer不再关心模型内部实现。get_model采用懒加载单例模式第一次请求时初始化模型之后进程内共享同一个YOLO对象。每个 worker 进程都会独立复刻一份模型启动时会看到多份模型加载日志这是正常现象不是资源泄漏。4.3 异步推理与请求阻塞问题Flask 默认的dev服务器是单进程多线程模型当多个请求同时到达时CPU 推理阶段的 GIL 会阻塞线程切换。常见做法是引入concurrent.futures.ThreadPoolExecutor将推理任务提交到后台线程池主线程直接返回任务 ID前端通过轮询结果接口获取推理状态。from concurrent.futures import ThreadPoolExecutor executor ThreadPoolExecutor(max_workers4) app.route(/detect/async, methods[POST]) def detect_async(): file request.files[file] future executor.submit(utils.infer, file.stream) task_id hash(future) tasks[task_id] future return jsonify({task_id: task_id}) app.route(/detect/result/) def detect_result(task_id): future tasks.get(task_id) if future and future.done(): result future.result() return jsonify({status: done, data: parse_result(result)}) return jsonify({status: pending})ThreadPoolExecutor的线程数建议设置为 CPU 物理核心数的两倍避免线程切换开销超过并行计算收益。对于视频流接口异步化意义不大因为生成器占用的线程在持续执行推理不能通过同样的方式调度。5. YOLOv8Flask 系统的加速优化与部署避坑5.1 显存碎片化与 GPU 内存清理推理服务运行数小时后GPU 显存占用往往会比初始时高出许多。PyTorch 的显存分配器会缓存空闲块nvidia-smi看到的占用率虚高。在每次请求结束后的finally块中执行以下操作能有效防止显存增长过快import gc import torch finally: gc.collect() torch.cuda.empty_cache()torch.cuda.empty_cache()只是释放 PyTorch 缓存中未使用的显存块并不会影响已分配张量。频繁调用会降低性能适合在批量任务结束后调用不适合在每条短视频帧上执行。5.2 导出 ONNX 并切换到 onnxruntime 推理对于 CPU 部署环境PyTorch 的算子合并与指令集优化远不及 ONNX Runtime。对于 GPU 环境TensorRT 更是能将推理速度提升 2 到 3 倍。导出命令如下yolo export modelyolov8s.pt formatonnx dynamicTrue simplifyTrue yolo export modelyolov8s.pt formattensorrt halfTrue导出后在 Flask 中替换推理后端import onnxruntime as ort session ort.InferenceSession( yolov8s.onnx, providers[CUDAExecutionProvider, CPUExecutionProvider] ) def ort_infer(image): input_tensor image.transpose((2, 0, 1))[None, ...].astype(float32) / 255.0 outputs session.run(None, {session.get_inputs()[0].name: input_tensor}) return outputshalfTrue在英伟达 GPU 上显著有效但在 CPU 上因不兼容 AVX512 浮点运算而性能回退必须按部署设备分别导出。切换 ONNX 后Flask 的推理代码与具体框架解耦这使得后续将服务迁移到 RK3588 这样的边缘设备时只需要替换utils.py中的后端路由与前端代码无需任何改动。5.3 Gunicorn 多进程部署的 worker 类型选择生产环境中直接用python app.py启动服务是非常不推荐的。使用 Gunicorn 作为 WSGI 服务器时默认的syncworker 会阻塞在同一时刻只能处理一个请求视频拉流接口一旦被客户端占用其他所有接口进入饥饿状态。必须改用gthreadworker 类型gunicorn -w 4 -b 0.0.0.0:5000 -k gthread app:app --threads 16 --timeout 120-w 4表示启动 4 个进程每个进程拥有独立的模型副本和显存上下文意味着显存占用会翻四倍在 8GB 显存环境下建议使用-w 2。--threads 16指定每个进程内的线程数用于处理视频流长连接和普通图片请求。--timeout 120必须大于预热时间和首次推理耗时的总和否则 YOLOv8 的首次请求会被 Gunicorn 强制杀掉。验证部署是否成功时应查看gunicorn的访问日志确认请求响应时间在p50与p99之间保持稳定而不是直接观察nvidia-smi。本文还有配套的精品资源点击获取