使用 Flask 和 YOLO 打造即時物件偵測網頁介面
前言
即時物件偵測是電腦視覺中的熱門應用,透過 Flask 和 YOLO 模型,我們可以輕鬆將電腦攝像頭畫面進行物件偵測,並即時在網頁上顯示結果。本教學將展示如何透過 Flask 搭配 YOLO 模型,實現即時影像串流與物件偵測的功能。
準備工作
硬體需求:
- 一台電腦或筆電(具有攝像頭)
- 網路連接
軟體需求:
- Python 3(推薦最新版)
- Flask、OpenCV 和 YOLO 模型相關套件
- YOLO 模型文件(例如:
yolov8n.pt)
步驟一:安裝必要的套件
首先,安裝需要用到的 Python 套件:
pip install flask opencv-python numpy ultralytics
確保您已經下載輕量級的 YOLO 模型文件 yolov8n.pt,並放置於專案目錄中。
步驟二:撰寫 Flask 和 YOLO 應用程式
以下程式碼會:
- 透過 OpenCV 捕捉電腦攝像頭畫面。
- 使用 YOLO 模型進行物件偵測並繪製結果框。
- 透過 Flask 提供網頁介面顯示實時影像流。
完整程式碼:
from flask import Flask, Response
import cv2
import numpy as np
from ultralytics import YOLO
app = Flask(__name__)
# 初始化攝像頭
camera = cv2.VideoCapture(0) # 0 表示默認的 PC 攝像頭
# 加載 YOLO 模型 (需下載模型文件)
model = YOLO("yolov8n.pt") # 使用輕量級 YOLO 模型 (yolov8n.pt)
def generate_frames():
while True:
# 讀取攝像頭畫面
success, frame = camera.read()
if not success:
break
# YOLO 偵測處理
results = model.predict(source=frame, stream=True)
for result in results:
# 解析 YOLO 偵測結果
boxes = result.boxes.xyxy.numpy() # 每個框的左上角和右下角座標
classes = result.boxes.cls.numpy() # 偵測到的類別索引
confidences = result.boxes.conf.numpy() # 偵測置信度
# 繪製偵測框
for box, cls, conf in zip(boxes, classes, confidences):
x1, y1, x2, y2 = map(int, box)
label = f"{model.names[int(cls)]} {conf:.2f}"
cv2.rectangle(frame, (x1, y1), (x2, y2), (0, 255, 0), 2)
cv2.putText(frame, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2)
# 將 YOLO 處理後的影像轉為 JPEG 格式
_, buffer = cv2.imencode('.jpg', frame)
frame = buffer.tobytes()
# 返回幀數據
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
@app.route('/video_feed')
def video_feed():
# 提供視頻流路由
return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
@app.route('/')
def index():
# 主頁面,嵌入視頻流
return '''
<html>
<head>
<title>YOLO Real-Time Detection</title>
</head>
<body>
<h1>YOLO Real-Time Detection</h1>
<img src="/video_feed" width="800">
</body>
</html>
'''
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True)
運行 Flask 伺服器:
python app.py
訪問網頁:
打開瀏覽器,輸入以下網址:
http://127.0.0.1:5000
結果展示
- 網頁上顯示即時影像流。
- 畫面中顯示 YOLO 偵測到的物件框和標籤資訊。
結語
透過 Flask 和 YOLO 模型,我們輕鬆實現了即時物件偵測應用。此應用不僅可以用於學習 YOLO 模型的實際應用,也可進一步擴展至其他物件追蹤或影像處理專案。
文章標籤
全站熱搜
