Update app.py

app.py

@@ -1,3 +1,6 @@
+"""
+Đếm xe qua line - Deploy lên Hugging Face Spaces với Gradio
+"""
 import os
 import tempfile
 import cv2
@@ -10,7 +13,7 @@ from ultralytics import YOLO
 DEFAULT_MAX_FRAME_SIZE = 640        # Giới hạn kích thước khung hình đưa vào YOLO
 DEFAULT_DETECT_EVERY_N_FRAMES = 2   # Chỉ detect mỗi N frame để giảm tải CPU
 
-# Load model
+# Load model (yolov8n nhẹ cho CPU miễn phí)
 model = YOLO("yolov8n.pt")
 CLASS_NAMES_DICT = model.model.names
 
@@ -263,42 +266,67 @@ def process_video(
 
 
 # Gradio UI
-with gr.Blocks(title="Đếm xe qua line", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🚗 Đếm xe qua line (YOLOv8 + ByteTrack)")
-    gr.Markdown(
-        "Upload video, hệ thống sẽ đếm person, car, bus, truck, motorcycle khi qua đường line giữa khung hình."
-    )
+with gr.Blocks(title="Đếm xe qua line", theme=gr.themes.Soft(primary_hue="blue", secondary_hue="gray")) as demo:
+    # Header đẹp hơn + thông tin sinh viên
+    with gr.Row():
+        gr.Markdown(
+            """
+            <div style="display:flex;flex-direction:column;gap:4px;">
+              <h1 style="margin-bottom:4px;">🚗 Đếm xe qua line (YOLOv8 + ByteTrack)</h1>
+              <p style="margin:0;font-size:16px;color:#4b5563;">
+                Dự án: Đếm đối tượng qua line (Horizonal / Vertical) dùng YOLOv8 + ByteTrack.
+              </p>
+              <p style="margin:0;font-size:14px;color:#6b7280;">
+                Thực hiện: <strong>Trần Hải Nam - 223332840</strong>
+              </p>
+            </div>
+            """,
+            elem_id="header",
+        )
 
     with gr.Row():
-        video_input = gr.Video(label="Video đầu vào")
-        video_output = gr.Video(label="Video đã xử lý")
+        with gr.Column(scale=1):
+            gr.Markdown(
+                "### 🎥 Video đầu vào\n"
+                "Upload video ngắn (ưu tiên &lt; 30s để xử lý nhanh hơn)."
+            )
+            video_input = gr.Video(label="Video đầu vào")
+
+        with gr.Column(scale=1):
+            gr.Markdown(
+                "### ✅ Kết quả đã xử lý\n"
+                "Hiển thị tracking, line đếm và thống kê số lượng theo lớp."
+            )
+            video_output = gr.Video(label="Video đã xử lý")
 
     # Tùy chọn cấu hình
     with gr.Accordion("⚙️ Tùy chọn nâng cao", open=False):
-        use_resize = gr.Checkbox(
-            value=True, label="Giảm kích thước khung hình trước khi detect"
-        )
-        max_frame_size = gr.Slider(
-            minimum=320,
-            maximum=1280,
-            value=DEFAULT_MAX_FRAME_SIZE,
-            step=64,
-            label="Kích thước tối đa (px)",
-        )
-        detect_every_n = gr.Slider(
-            minimum=1,
-            maximum=5,
-            value=DEFAULT_DETECT_EVERY_N_FRAMES,
-            step=1,
-            label="Detect mỗi N frame (1 = mọi frame)",
-        )
-        line_orientation = gr.Radio(
-            choices=["Ngang", "Dọc"],
-            value="Ngang",
-            label="Hướng line đếm",
-        )
+        with gr.Row():
+            use_resize = gr.Checkbox(
+                value=True, label="Giảm kích thước khung hình trước khi detect"
+            )
+            line_orientation = gr.Radio(
+                choices=["Ngang", "Dọc"],
+                value="Ngang",
+                label="Hướng line đếm",
+            )
+        with gr.Row():
+            max_frame_size = gr.Slider(
+                minimum=320,
+                maximum=1280,
+                value=DEFAULT_MAX_FRAME_SIZE,
+                step=64,
+                label="Kích thước tối đa (px)",
+            )
+            detect_every_n = gr.Slider(
+                minimum=1,
+                maximum=5,
+                value=DEFAULT_DETECT_EVERY_N_FRAMES,
+                step=1,
+                label="Detect mỗi N frame (1 = mọi frame)",
+            )
 
-    btn = gr.Button("▶️ Xử lý video")
+    btn = gr.Button("▶️ Xử lý video", variant="primary")
     btn.click(
         fn=process_video,
         inputs=[video_input, use_resize, max_frame_size, detect_every_n, line_orientation],
@@ -307,11 +335,14 @@ with gr.Blocks(title="Đếm xe qua line", theme=gr.themes.Soft()) as demo:
 
     gr.Markdown(
         """
-    ### Lưu ý
-    - Mặc định line đếm nằm **ngang** ở giữa khung hình (50% chiều cao)
-    - Có thể chọn lại line **dọc** trong phần "Tùy chọn nâng cao"
-    - Chạy trên CPU miễn phí → nên dùng video **ngắn** (< 30 giây) để tránh chờ lâu
-    - Model: YOLOv8n (nhẹ cho CPU)
+    ---
+    ### ℹ️ Gợi ý sử dụng
+    - Mặc định line đếm nằm **ngang** ở giữa khung hình (50% chiều cao).
+    - Có thể chuyển sang line **dọc** trong phần _"Tùy chọn nâng cao"_.
+    - Với CPU miễn phí (Hugging Face Spaces), nên:
+      - Dùng video **ngắn** (&lt; 30 giây).
+      - Tăng `Detect mỗi N frame` nếu muốn xử lý nhanh hơn.
+    - Model sử dụng: **YOLOv8n** (phiên bản nhẹ, phù hợp CPU).
     """
     )