Phần 4: Phát triển ứng dụng web với Flask để hiển thị kết quả

1. Giới thiệu về Flask và cách thiết lập ứng dụng web

Flask là một micro framework cho Python, rất nhẹ và dễ sử dụng, thích hợp cho việc phát triển các ứng dụng web nhỏ gọn và nhanh chóng. Với Flask, bạn có thể dễ dàng xây dựng các ứng dụng web phục vụ cho việc hiển thị kết quả từ pipeline nhận diện vật thể.

Để thiết lập ứng dụng Flask, bạn cần cài đặt Flask bằng pip. Mở terminal và chạy lệnh sau:

pip install Flask

Sau khi cài đặt xong, bạn có thể tạo một file Python mới, ví dụ app.py, để bắt đầu xây dựng ứng dụng Flask của mình.

2. Cấu trúc ứng dụng Flask và tạo các route cơ bản

Cấu trúc cơ bản của ứng dụng Flask thường bao gồm các phần sau:

app.py: file chính của ứng dụng.
templates/: thư mục chứa các file HTML.
static/: thư mục chứa các file tĩnh như CSS, JavaScript.

Dưới đây là ví dụ về cách tạo một route cơ bản trong file app.py:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Trong đoạn mã trên, chúng ta đã tạo một route cho trang chính của ứng dụng, sử dụng file index.html trong thư mục templates.

3. Thiết lập giao diện người dùng với HTML/CSS

Giao diện người dùng là một phần quan trọng trong ứng dụng web. Bạn có thể tạo file index.html trong thư mục templates với nội dung cơ bản như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nhận diện vật thể bằng YOLOv8</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Nhận diện vật thể thời gian thực</h1>
    <div id="video-container">
        <img id="video-frame" src="" alt="Video Frame">
    </div>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

File CSS có thể được tạo trong thư mục static với tên style.css để tùy chỉnh giao diện cho ứng dụng.

4. Kết nối Flask với pipeline nhận diện vật thể

Để kết nối Flask với pipeline nhận diện vật thể, bạn cần cập nhật route trong app.py để nhận dữ liệu từ camera. Dưới đây là một ví dụ về cách thực hiện điều này:

import time
from flask import Flask, render_template, Response
import picamera
import cv2

app = Flask(__name__)

def gen_frames():  
    with picamera.PiCamera() as camera:
        camera.resolution = (640, 480)
        camera.framerate = 30
        time.sleep(2)  # cho camera thời gian để khởi động
        for frame in camera.capture_continuous(format='bgr', use_video_port=True):
            # Xử lý frame nhận diện vật thể ở đây
            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(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Trong đoạn mã trên, chúng ta đã tạo một route mới để cung cấp luồng video từ camera. Bạn cần thay thế phần xử lý nhận diện vật thể trong hàm gen_frames để tích hợp với YOLOv8.

5. Hiển thị khung hình và kết quả nhận diện lên giao diện web

Để hiển thị khung hình video trên giao diện web, bạn cần cập nhật file index.html để sử dụng URL của video feed:

<img id="video-frame" src="{{ url_for('video_feed') }}" alt="Video Frame">

Điều này sẽ cho phép khung hình video được cập nhật liên tục từ camera. Bên cạnh đó, bạn có thể thêm các chi tiết nhận diện vật thể bằng cách sử dụng OpenCV để vẽ lên khung hình và gửi về giao diện.

6. Kiểm tra và tối ưu hóa hiệu suất ứng dụng

Khi ứng dụng đã hoàn thành, bạn cần kiểm tra hiệu suất của nó. Đảm bảo rằng ứng dụng hoạt động mượt mà và không bị lag khi nhận diện vật thể. Một số điểm cần lưu ý:

Tối ưu hóa camera: Đảm bảo camera được cấu hình đúng để tối ưu độ phân giải và tốc độ khung hình.
Giảm độ phức tạp của mô hình: Nếu cần, bạn có thể giảm kích thước mô hình YOLOv8 để tăng tốc độ xử lý.
Sử dụng multi-threading: Cân nhắc sử dụng multi-threading để xử lý video và nhận diện vật thể đồng thời.

Hãy luôn kiểm tra ứng dụng của bạn trên nhiều thiết bị khác nhau để đảm bảo tính tương thích và hiệu suất tốt nhất.

Cuối cùng, bạn có thể chạy ứng dụng Flask và truy cập vào địa chỉ http://<địa_chỉ_IP>:5000 để xem kết quả nhận diện vật thể thời gian thực.