源码：

「yolov11检测网页版（HTML+Fastapi）」
链接：https://pan.quark.cn/s/03c2cb3ce559

链接：https://pan.quark.cn/s/03c2cb3ce559

链接：https://pan.quark.cn/s/03c2cb3ce559

前言

有很多小伙伴因为学校作业，需要搞yolo，还有很多零基础的，甚至不是计算机专业的

这对于他们来说很折磨，这里就提供了最简单的方法，直接HTML网页+Fastapi后端

1、网页打开即可使用

2、后端只需要有对应Python解释器和第三方库即可运行

网页打开即可使用（双击：yolov11网页.html）

后端如何启动？

1、Python环境 （3.9以上）

2、安装第三方库 

pip install fastapi uvicorn ultralytics opencv-python-headless pillow numpy pydantic python-multipart python-dotenv

3、运行main.py

项目介绍

后端（Python + FastAPI）

1. 框架与库：

   • FastAPI：构建高性能 API，支持 HTTP 和 WebSocket 通信。
   • ultralytics：集成 YOLOv8 模型，提供图像 / 视频帧检测功能。
   • OpenCV/Pillow：处理图像解码、绘制检测框和标签。
   • WebSocket：实现实时视频流的帧传输与检测结果返回。

1. 核心功能：

   • 模型管理：动态加载 YOLO 模型（如 yolov8n.pt）并缓存，支持自定义模型（如车辆检测模型 car-80.pt）。
   • 图像检测：通过 /api/detect 接口接收 Base64 图像数据，返回标注后的检测结果。
   • 视频流检测：通过 WebSocket 实时接收视频帧，处理后返回检测结果，支持暂停 / 继续、进度跳转等控制。

1. 关键代码逻辑：

   • 模型加载：get_model 函数从 models 目录加载模型，使用缓存避免重复加载。
   • 图像标注：draw_annotations 函数在检测结果上绘制边框、类别标签和置信度。
   • 稳健解码：WebSocket 处理中增加对 Base64 数据的完整性校验，避免无效帧导致服务崩溃。

前端（Vue.js + Element-UI）

1. 框架与库：

   • Vue.js 2.x：构建响应式界面，管理组件状态。
   • Element-UI：提供 UI 组件（如菜单、滑块、对话框等），快速实现布局和交互。
   • WebSocket：与后端实时通信，传输视频帧并接收检测结果。

2. 核心功能：

   • 多模态检测：
     • 图片检测：支持上传图片，显示原图与检测结果对比。
     • 视频检测：选择本地视频文件，实时显示原始视频与检测后的视频帧，支持播放控制和连接状态监控。
   • 参数配置：动态调整模型、置信度阈值（conf）、交并比阈值（IoU）。
   • 用户交互：图片预览弹窗（支持缩放和平移）、检测状态提示、错误信息反馈。

3. 关键代码逻辑：

   • WebSocket 连接：setupWebSocket 函数建立与后端的实时连接，同步视频帧与检测结果。
   • 帧处理：sendFrame 函数从视频元素中抓取当前帧，转为 Base64 格式发送至后端，并在接收到结果后更新界面。
   • 性能优化：使用 requestAnimationFrame 控制帧发送频率，避免资源占用过高。

环境准备

1. 后端依赖安装：

   pip install fastapi uvicorn ultralytics opencv-python-headless pillow numpy pydantic python-multipart
   

启动服务

1. 后端启动：服务运行于 http://127.0.0.1:8000，支持热重载（reload=True）

2. python main.py
   

3. 前端运行：

   • 直接在浏览器中打开   或者把 HTML 文件部署到静态服务器（如 Nginx）

三、功能扩展与优化方向

1. 模型扩展：

   • 支持更多 YOLO 模型（如 yolov8s.pt/yolov8m.pt）或自定义训练模型。
   • 添加模型列表接口，前端动态获取可选模型（当前为硬编码）。

2. 性能优化：

   • 后端启用 GPU 加速（需安装 CUDA 版 PyTorch）。
   • 前端优化帧发送频率（如限制为 10-15 FPS，避免网络拥塞）。

3. 用户体验：

   • 添加视频上传进度条、检测耗时显示。
   • 支持摄像头实时流检测（通过浏览器 getUserMedia API）。

4. 生产环境适配：

   • 移除开发模式（reload=False），使用 Gunicorn + Uvicorn 部署后端。
   • 前端打包为静态文件，优化资源加载速度。

实时目标检测解决方案，适合用于图像 / 视频中的物体识别场景（如安防、智能监控、工业检测等）。项目结构清晰，前后端分工明确，可通过扩展模型和优化性能适配不同需求。若需进一步开发，可参考 Ultralytics 官方文档集成更多功能（如分割、姿态估计）或自定义训练流程。

闲言碎语：

最近在工作，没有时间搞这些了，都是空闲玩玩了

钱难赚，屎难吃，唉，怀念读书的时光啊！！