一秒轻松上手: Flask + JavaScript 畅玩 YOLOv5

2023-11-28 19:36:23

轻松搞定目标检测：使用 YOLOv5 构建 Web 应用程序

简介

目标检测是计算机视觉中的一个关键任务，涉及识别和定位图像中的特定物体。 YOLOv5 是一种强大的目标检测模型，以其令人印象深刻的准确性和闪电般的速度而著称。在本教程中，我们将逐步指导您如何在 Web 端部署 YOLOv5，让您能够直接在网页上执行目标检测。

Step 1：准备环境

安装 Python 3.6 或更高版本： 使用 Python 包管理器 pip 进行安装。
安装必需的库： 使用 pip 安装 Flask（Web 框架）、OpenCV（图像处理库）和 NumPy（数值计算库）。
下载 YOLOv5 模型： 从 YOLOv5 官方 GitHub 存储库下载预训练模型。

Step 2：编写 Flask 应用程序

创建 Flask 应用： 创建一个新的 Python 文件并导入 Flask。
添加图像上传路由： 定义一个路由，用于处理上传图像并进行目标检测。
执行目标检测： 在路由中，使用 YOLOv5 模型对上传的图像进行目标检测。
返回检测结果： 将检测到的物体和它们的置信度作为 JSON 响应返回给前端。

# app.py
from flask import Flask, request, jsonify
import yolov5
import cv2
import numpy as np

app = Flask(__name__)

@app.route('/detect', methods=['POST'])
def detect():
    image = request.files['image']
    image = cv2.imdecode(np.frombuffer(image.read(), np.uint8), cv2.IMREAD_COLOR)
    results = yolov5.detect(image)
    return jsonify(results)

Step 3：编写 JavaScript 前端

创建 HTML 页面： 创建一个 HTML 页面，包含用于选择和上传图像的界面。
发送图像： 编写 JavaScript 代码，用于将图像发送到后端进行检测。
接收并显示结果： 接收后端返回的检测结果，并使用 HTML 或 JavaScript 在页面上显示。

// script.js
document.getElementById('submit-btn').addEventListener('click', () => {
  const image = document.getElementById('image-input').files[0];
  fetch('/detect', {
    method: 'POST',
    body: image
  })
  .then(res => res.json())
  .then(data => {
    // Display detected objects on the page
  });
});