基于 YOLOv 的 Web 目标检测系统开发与部署实战

将生成的 yolov5s.onnx 文件放到 backend/weights/ 目录下。

接着，创建推理服务类：

import onnxruntime as ort
import numpy as np
from PIL import Image
import cv2

class YOLOInferenceService:
    def __init__(self, model_path: str, providers=None):
        if providers is None:
            providers = ['CUDAExecutionProvider', 'CPUExecutionProvider']
        self.session = ort.InferenceSession(model_path, providers=providers)
        self.input_name = self.session.get_inputs()[0].name
        self.img_size = self.session.get_inputs()[0].shape[2:]

    def preprocess(self, image: Image.Image) -> np.ndarray:
        img = np.array(image)
        h, w = img.shape[:2]
        r = min(self.img_size[0] / h, self.img_size[1] / w)
        new_h, new_w = int(h * r), int(w * r)
        img_resized = cv2.resize(img, (new_w, new_h))
        canvas = np.full((self.img_size[0], self.img_size[1], 3), 114, dtype=np.uint8)
        dh, dw = (self.img_size[0] - new_h) // 2, (self.img_size[1] - new_w) // 2
        canvas[dh:dh+new_h, dw:dw+new_w, :] = img_resized
        img_tensor = canvas.transpose(2, 0, 1)
        img_tensor = img_tensor[::-1, :, :]
        img_tensor = img_tensor.astype(np.float32) / 255.0
        img_tensor = np.expand_dims(img_tensor, axis=0)
        return img_tensor, (w, h), (new_w, new_h, dw, dh)

    async def predict(self, image: Image.Image) -> Dict:
        start_time = time.time()
        img_tensor, orig_size, pad_info = self.preprocess(image)
        outputs = self.session.run(None, {self.input_name: img_tensor})[0]
        results = self.postprocess(outputs, orig_size, pad_info)
        return {'detections': results}

3.3 构建 FastAPI 后端

from fastapi import FastAPI, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware
from PIL import Image
import io

app = FastAPI(title="YOLOv5 Web Detection API")

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/detect/")
async def detect_objects(file: UploadFile = File(...)):
    if not file.content_type.startswith("image/"):
        raise HTTPException(status_code=400, detail="请上传图片文件。")
    try:
        contents = await file.read()
        image = Image.open(io.BytesIO(contents)).convert("RGB")
        service = get_inference_service()
        result = await service.predict(image)
        return {"filename": file.filename, "detections": result["detections"]}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

3.4 实现前端（Vue 示例）

<template>
  <div>
    <h1>YOLOv5 目标检测演示</h1>
    <input type="file" @change="onFileChange" accept="image/*" />
    <button @click="uploadImage">开始检测</button>
    <img v-if="imagePreview" :src="imagePreview" />
  </div>
</template>
<script>
export default {
  data() {
    return { file: null, imagePreview: null };
  },
  methods: {
    async uploadImage() {
      const formData = new FormData();
      formData.append('file', this.file);
      const response = await axios.post('/detect/', formData);
      this.result = response.data;
    }
  }
};
</script>

4. 性能与安全考量

性能测试：使用 ONNX Runtime CUDA provider，单张图片推理总耗时约 50-100ms。使用 async 接口，QPS 有显著提升。

安全性考量：

1. 输入校验：限制文件大小，防止大文件攻击。
2. 防滥用：添加速率限制。
3. 模型安全：模型文件不暴露在公开目录。

5. 生产环境避坑指南

1. 模型版本管理：采用'模型版本目录'，API 通过参数指定版本，方便回滚。
2. 静态资源缓存：配置合理的缓存策略。
3. 日志与监控：接入错误监控平台。
4. 健康检查与优雅退出：确保服务关闭时释放资源。
5. CUDA 环境隔离：强烈建议使用 Docker 镜像，确保环境一致性。

FROM nvidia/cuda:11.8.0-runtime-ubuntu22.04
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

总结

该架构具备良好的扩展性。例如，支持多模型服务可在 services 目录下为不同模型创建推理类。建议尝试 Docker 容器化部署，写一个 Dockerfile 和 docker-compose.yml 文件，彻底解决环境问题，这也是工业界标准的部署方式。