项目地址yolo-object-detection-lab:基于 FastAPI 与 Ultralytics YOLO 的图像目标检测实验项目 - AtomGit前面几篇文章里我一直围绕 MNIST 做图像分类实验从 CNN、Feature Map、CNN vs MLP一直做到 ResNet Grad-CAM。但图像分类解决的问题始终是“这张图片是什么”这一次我想继续往前走一步开始做目标检测。目标检测不仅需要判断图片里有什么还需要回答“目标在哪里”所以这次我继续使用码道 Agent从零搭建了一个基于Ultralytics YOLO FastAPI的目标检测 Web 实验平台。最终效果可以直接上传图片并得到检测类别置信度Bounding Box检测目标数量检测结果图每个目标的详细检测信息一、从 Image Classification 到 Object Detection前面的 CNN、ResNet 都属于图像分类任务。比如输入一张手写数字Input Image ↓ CNN / ResNet ↓ Class 8模型只需要告诉我们这张图是什么但 YOLO 做的是 Object Detection。它的输出更像Input Image ↓ YOLO ↓ Dog 93.2% [x1, y1, x2, y2] Person 80.4% [x1, y1, x2, y2] Backpack 83.9% [x1, y1, x2, y2] ...不仅知道是什么还能给出目标的位置。因此这次我单独创建了一个新项目yolo-object-detection-lab而没有继续往之前的 MNIST 项目里塞功能。二、项目整体结构这次后端使用Python FastAPI Ultralytics YOLO OpenCV Pillow前端仍然保持比较轻量HTML CSS JavaScript检测流程大致是用户上传图片 ↓ FastAPI ↓ 图片解析与校验 ↓ YOLO11 ↓ 目标检测 ↓ 解析 Bounding Box ↓ 绘制检测框 ↓ 返回 Base64 图片 Detection List ↓ 浏览器可视化前端本身不生成任何假框。页面中看到的类别、置信度和 Bounding Box 全部来自后端真实 YOLO 推理结果。三、使用 YOLO11n这次使用的模型是yolo11n.pt其中n对应 Nano 版本。对于一个目标检测实验平台来说它体积比较小推理速度也比较快很适合先把完整流程跑通。本地环境中使用PyTorch 2.14.0cu130 Ultralytics 8.4.165 NVIDIA GeForce RTX 4090 CUDA Available True一开始启动项目以后我发现页面中的模型信息显示Device: cpu也就是说虽然机器有 RTX 4090但项目默认实际上还在使用 CPU。于是启动服务时指定YOLO_DEVICE0 python -m uvicorn app.main:app --reload再次查看模型状态{ model_name: yolo11n.pt, device: 0, model_loaded: true, class_count: 80 }这时才真正切换到 GPU。四、先做真实测试而不是直接相信页面Agent 完成项目以后我首先运行了完整 pytestpytest -v最终结果34 passed, 1 warning in 0.91s34 个测试覆盖了API 状态模型信息无文件上传空文件非图片损坏图片文件过大权重缺失推理异常Bounding Box 格式Confidence 范围Detection Schema图片绘制Base64 编码不过这里需要注意部分 YOLO 推理测试使用的是 Mock。所以 pytest 全通过以后我又单独进行了真实模型推理。直接加载model YOLO(yolo11n.pt)然后指定device0真实推理中模型本身的 inference 时间大约只有9.7 ms说明 CUDA 和 YOLO 模型都已经正常工作。五、真实多目标检测效果为了测试多目标场景我准备了一张同时包含多种常见物体的测试图片。图片中包含人狗背包植物笔记本电脑杯子椅子床 / 沙发区域书籍等目标上传以后点击Start DetectionYOLO 最终检测到了16 个目标图片尺寸为1634 × 962这次检测结果中比较明显的几个目标包括ClassConfidenceDog93.2%Potted Plant86.5%Backpack83.9%Person80.4%比如 Dog 对应的检测结果Class: Dog Confidence: 93.2% BBox: [182, 410, 642, 934]BackpackClass: Backpack Confidence: 83.9% BBox: [1205, 584, 1584, 962]PersonClass: Person Confidence: 80.4% BBox: [726, 47, 1175, 924]也就是说现在平台已经不再只是输出一个类别而是能够真正返回Class Confidence Bounding Box六、Bounding Box 到底是什么目标检测里的 Bounding Box 本质上就是一个矩形框。当前接口返回x1 y1 x2 y2分别表示(x1, y1) 左上角 (x2, y2) 右下角例如BBox: [182, 410, 642, 934]可以理解为左上角 (182, 410) 右下角 (642, 934)然后 OpenCV 根据这些坐标在原始图片上绘制矩形。因此最终页面中看到的框并不是前端根据图片尺寸“猜”的而是 YOLO 模型真实预测出来的位置。七、这次还遇到了一个很有意思的前端 Bug第一次真实上传图片以后页面出现了一个现象YOLO 一直在转圈。页面始终停留在Running YOLO inference...一开始我还以为是YOLO 太慢 GPU 没工作 模型加载卡住但继续排查以后发现后端其实完全正常。我直接绕开网页调用curl -F file/tmp/yolo_test.jpg \ http://127.0.0.1:8000/api/detect结果大约 4 秒就正常返回image: 640 x 640 detection_count: 0 detections: [] result_image exists: True这就说明YOLO 后端早就跑完了只是前端 Loading 没消失。最后定位到了 CSS。JavaScript 中实际上已经正确执行function hideOverlay() { dom.overlay.hidden true; }而且finally也会执行finally { hideOverlay(); busy false; dom.detectBtn.disabled false; }真正的问题是.overlay的 CSS 显示规则覆盖了 HTML 的hidden属性。最终只需要补充[hidden] { display: none !important; }问题就解决了。这个 Bug 其实挺典型后端没有卡模型没有卡真正卡住的是 UI 状态。八、现在这个平台已经实现了什么目前项目已经能够完成图片上传 Drag Drop 原图预览 YOLO11 模型加载 GPU 推理 Confidence Threshold IoU Threshold 多目标检测 类别识别 置信度显示 Bounding Box 绘制 检测数量统计 图片尺寸统计 Detection List 异常处理 FastAPI API pytest 测试模型信息也能直接显示Model: yolo11n.pt Device: 0 Confidence: 0.25 IoU: 0.70 Loaded: yes Classes: 80对于一个从零开始搭建的 YOLO 实验平台来说第一阶段的基本功能已经完整跑通。九、从 CNN 到 YOLO任务发生了什么变化做到这里以后之前几篇文章的路线就比较清晰了。最开始CNN ↓ 这张图片是什么然后Feature Map ↓ 卷积层提取了什么再到ResNet Grad-CAM ↓ 当前类别主要响应在哪里而现在进入YOLO ↓ 图片里有什么 它们分别在哪里这实际上就是从Image Classification正式进入Object Detection总结这一次我使用码道 Agent 从零完成了一个 YOLO Object Detection Lab。最终真实运行结果包括Model: YOLO11n GPU: RTX 4090 Classes: 80 pytest: 34 passed Multi-object Test: 16 detected objects Dog: 93.2% Potted Plant: 86.5% Backpack: 83.9% Person: 80.4%同时开发过程中还真实遇到了CPU / GPU 配置问题 ↓ 真实 YOLO 推理验证 ↓ API 独立测试 ↓ Loading 一直不消失 ↓ 定位 hidden CSS 问题 ↓ 完成修复所以这一篇对我来说也不只是“调用了一次 YOLO”。而是把模型 → 后端 → API → 前端 → 测试 → GPU → 可视化整个目标检测流程真正串起来了。项目地址yolo-object-detection-lab:基于 FastAPI 与 Ultralytics YOLO 的图像目标检测实验项目 - AtomGit下一步可以继续在这个项目上加入Confidence / Class Filter、摄像头实时检测、视频检测以及自定义数据集训练。 用码道做一个 YOLO 目标检测平台：从“这是什么”到“它在哪里”
项目地址yolo-object-detection-lab:基于 FastAPI 与 Ultralytics YOLO 的图像目标检测实验项目 - AtomGit前面几篇文章里我一直围绕 MNIST 做图像分类实验从 CNN、Feature Map、CNN vs MLP一直做到 ResNet Grad-CAM。但图像分类解决的问题始终是“这张图片是什么”这一次我想继续往前走一步开始做目标检测。目标检测不仅需要判断图片里有什么还需要回答“目标在哪里”所以这次我继续使用码道 Agent从零搭建了一个基于Ultralytics YOLO FastAPI的目标检测 Web 实验平台。最终效果可以直接上传图片并得到检测类别置信度Bounding Box检测目标数量检测结果图每个目标的详细检测信息一、从 Image Classification 到 Object Detection前面的 CNN、ResNet 都属于图像分类任务。比如输入一张手写数字Input Image ↓ CNN / ResNet ↓ Class 8模型只需要告诉我们这张图是什么但 YOLO 做的是 Object Detection。它的输出更像Input Image ↓ YOLO ↓ Dog 93.2% [x1, y1, x2, y2] Person 80.4% [x1, y1, x2, y2] Backpack 83.9% [x1, y1, x2, y2] ...不仅知道是什么还能给出目标的位置。因此这次我单独创建了一个新项目yolo-object-detection-lab而没有继续往之前的 MNIST 项目里塞功能。二、项目整体结构这次后端使用Python FastAPI Ultralytics YOLO OpenCV Pillow前端仍然保持比较轻量HTML CSS JavaScript检测流程大致是用户上传图片 ↓ FastAPI ↓ 图片解析与校验 ↓ YOLO11 ↓ 目标检测 ↓ 解析 Bounding Box ↓ 绘制检测框 ↓ 返回 Base64 图片 Detection List ↓ 浏览器可视化前端本身不生成任何假框。页面中看到的类别、置信度和 Bounding Box 全部来自后端真实 YOLO 推理结果。三、使用 YOLO11n这次使用的模型是yolo11n.pt其中n对应 Nano 版本。对于一个目标检测实验平台来说它体积比较小推理速度也比较快很适合先把完整流程跑通。本地环境中使用PyTorch 2.14.0cu130 Ultralytics 8.4.165 NVIDIA GeForce RTX 4090 CUDA Available True一开始启动项目以后我发现页面中的模型信息显示Device: cpu也就是说虽然机器有 RTX 4090但项目默认实际上还在使用 CPU。于是启动服务时指定YOLO_DEVICE0 python -m uvicorn app.main:app --reload再次查看模型状态{ model_name: yolo11n.pt, device: 0, model_loaded: true, class_count: 80 }这时才真正切换到 GPU。四、先做真实测试而不是直接相信页面Agent 完成项目以后我首先运行了完整 pytestpytest -v最终结果34 passed, 1 warning in 0.91s34 个测试覆盖了API 状态模型信息无文件上传空文件非图片损坏图片文件过大权重缺失推理异常Bounding Box 格式Confidence 范围Detection Schema图片绘制Base64 编码不过这里需要注意部分 YOLO 推理测试使用的是 Mock。所以 pytest 全通过以后我又单独进行了真实模型推理。直接加载model YOLO(yolo11n.pt)然后指定device0真实推理中模型本身的 inference 时间大约只有9.7 ms说明 CUDA 和 YOLO 模型都已经正常工作。五、真实多目标检测效果为了测试多目标场景我准备了一张同时包含多种常见物体的测试图片。图片中包含人狗背包植物笔记本电脑杯子椅子床 / 沙发区域书籍等目标上传以后点击Start DetectionYOLO 最终检测到了16 个目标图片尺寸为1634 × 962这次检测结果中比较明显的几个目标包括ClassConfidenceDog93.2%Potted Plant86.5%Backpack83.9%Person80.4%比如 Dog 对应的检测结果Class: Dog Confidence: 93.2% BBox: [182, 410, 642, 934]BackpackClass: Backpack Confidence: 83.9% BBox: [1205, 584, 1584, 962]PersonClass: Person Confidence: 80.4% BBox: [726, 47, 1175, 924]也就是说现在平台已经不再只是输出一个类别而是能够真正返回Class Confidence Bounding Box六、Bounding Box 到底是什么目标检测里的 Bounding Box 本质上就是一个矩形框。当前接口返回x1 y1 x2 y2分别表示(x1, y1) 左上角 (x2, y2) 右下角例如BBox: [182, 410, 642, 934]可以理解为左上角 (182, 410) 右下角 (642, 934)然后 OpenCV 根据这些坐标在原始图片上绘制矩形。因此最终页面中看到的框并不是前端根据图片尺寸“猜”的而是 YOLO 模型真实预测出来的位置。七、这次还遇到了一个很有意思的前端 Bug第一次真实上传图片以后页面出现了一个现象YOLO 一直在转圈。页面始终停留在Running YOLO inference...一开始我还以为是YOLO 太慢 GPU 没工作 模型加载卡住但继续排查以后发现后端其实完全正常。我直接绕开网页调用curl -F file/tmp/yolo_test.jpg \ http://127.0.0.1:8000/api/detect结果大约 4 秒就正常返回image: 640 x 640 detection_count: 0 detections: [] result_image exists: True这就说明YOLO 后端早就跑完了只是前端 Loading 没消失。最后定位到了 CSS。JavaScript 中实际上已经正确执行function hideOverlay() { dom.overlay.hidden true; }而且finally也会执行finally { hideOverlay(); busy false; dom.detectBtn.disabled false; }真正的问题是.overlay的 CSS 显示规则覆盖了 HTML 的hidden属性。最终只需要补充[hidden] { display: none !important; }问题就解决了。这个 Bug 其实挺典型后端没有卡模型没有卡真正卡住的是 UI 状态。八、现在这个平台已经实现了什么目前项目已经能够完成图片上传 Drag Drop 原图预览 YOLO11 模型加载 GPU 推理 Confidence Threshold IoU Threshold 多目标检测 类别识别 置信度显示 Bounding Box 绘制 检测数量统计 图片尺寸统计 Detection List 异常处理 FastAPI API pytest 测试模型信息也能直接显示Model: yolo11n.pt Device: 0 Confidence: 0.25 IoU: 0.70 Loaded: yes Classes: 80对于一个从零开始搭建的 YOLO 实验平台来说第一阶段的基本功能已经完整跑通。九、从 CNN 到 YOLO任务发生了什么变化做到这里以后之前几篇文章的路线就比较清晰了。最开始CNN ↓ 这张图片是什么然后Feature Map ↓ 卷积层提取了什么再到ResNet Grad-CAM ↓ 当前类别主要响应在哪里而现在进入YOLO ↓ 图片里有什么 它们分别在哪里这实际上就是从Image Classification正式进入Object Detection总结这一次我使用码道 Agent 从零完成了一个 YOLO Object Detection Lab。最终真实运行结果包括Model: YOLO11n GPU: RTX 4090 Classes: 80 pytest: 34 passed Multi-object Test: 16 detected objects Dog: 93.2% Potted Plant: 86.5% Backpack: 83.9% Person: 80.4%同时开发过程中还真实遇到了CPU / GPU 配置问题 ↓ 真实 YOLO 推理验证 ↓ API 独立测试 ↓ Loading 一直不消失 ↓ 定位 hidden CSS 问题 ↓ 完成修复所以这一篇对我来说也不只是“调用了一次 YOLO”。而是把模型 → 后端 → API → 前端 → 测试 → GPU → 可视化整个目标检测流程真正串起来了。项目地址yolo-object-detection-lab:基于 FastAPI 与 Ultralytics YOLO 的图像目标检测实验项目 - AtomGit下一步可以继续在这个项目上加入Confidence / Class Filter、摄像头实时检测、视频检测以及自定义数据集训练。