Update app.py

app.py

@@ -5,11 +5,15 @@ import cv2
 import numpy as np
 import tempfile
 import os
+from pathlib import Path
 
 # Load the YOLOv8 model
 model = YOLO('yolov8n.pt')
 
 def process_image(image):
+    """
+    Process a single image for object detection
+    """
     results = model(image)
     # Get detection information
     boxes = results[0].boxes
@@ -23,6 +27,9 @@ def process_image(image):
     return Image.fromarray(results[0].plot()), "\n".join(detection_info)
 
 def process_video(video_path):
+    """
+    Process video for object detection
+    """
     with tempfile.NamedTemporaryFile(delete=False, suffix='.mp4') as temp_file:
         output_path = temp_file.name
 
@@ -72,6 +79,9 @@ def process_video(video_path):
     return output_path, summary
 
 def detect_objects(media):
+    """
+    Unified function to handle both image and video inputs
+    """
     if media is None:
         return None, None, None, "Please upload an image or video to begin detection.", gr.update(visible=True), gr.update(visible=False)
     
@@ -103,8 +113,6 @@ custom_css = """
 }
 
 #logo-img {
-    display: block;
-    margin: 0 auto;
     max-height: 100px;
     margin-bottom: 20px;
 }
@@ -133,45 +141,50 @@ custom_css = """
     margin-top: 10px;
     font-family: monospace;
 }
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1rem;
+}
 """
 
 # Create Gradio interface
 with gr.Blocks(css=custom_css) as demo:
     with gr.Column(elem_id="app-container"):
         # Logo and Header
-        gr.HTML(
-            """
-            <div style="text-align: center; margin-bottom: 1rem">
-                <img src="logo-h.png" id="logo-img" alt="Logo">
-            </div>
-            """
-        )
+        with gr.Column(elem_classes="center"):
+            gr.Image("logo-h.png", 
+                    show_label=False, 
+                    container=False,
+                    elem_id="logo-img",
+                    height=100)
         
-        with gr.Column():
-            gr.Markdown("# 🔍 Object Detection")
-            
-            # Upload Section
-            with gr.Column(elem_classes="upload-box"):
-                gr.Markdown("### 📤 Upload your file")
-                input_media = gr.File(
-                    label="Drag and drop or click to upload (Images: jpg, jpeg, png | Videos: mp4, avi, mov)",
-                    file_types=["image", "video"]
-                )
-            
-            # Status Message
-            status_text = gr.Textbox(
-                label="Status",
-                value="Waiting for upload...",
-                interactive=False
-            )
-            
-            # Detection Information
-            detection_info = gr.Textbox(
-                label="Detection Results",
-                elem_classes="detection-info",
-                interactive=False
+        gr.Markdown("# 🔍 Object Detection")
+        
+        # Upload Section
+        with gr.Column(elem_classes="upload-box"):
+            gr.Markdown("### 📤 Upload your file")
+            input_media = gr.File(
+                label="Drag and drop or click to upload (Images: jpg, jpeg, png | Videos: mp4, avi, mov)",
+                file_types=["image", "video"]
             )
         
+        # Status Message
+        status_text = gr.Textbox(
+            label="Status",
+            value="Waiting for upload...",
+            interactive=False
+        )
+        
+        # Detection Information
+        detection_info = gr.Textbox(
+            label="Detection Results",
+            elem_classes="detection-info",
+            interactive=False
+        )
+        
         # Results Section
         with gr.Column(elem_classes="results-container"):
             with gr.Row():
@@ -180,13 +193,19 @@ with gr.Blocks(css=custom_css) as demo:
                 with gr.Column(visible=False) as video_column:
                     output_video = gr.Video(label="Processed Video")
     
-    # Handle file upload
-    input_media.upload(
-        fn=detect_objects,
-        inputs=[input_media],
-        outputs=[output_image, output_video, detection_info, status_text, 
-                image_column, video_column]
-    )
+        # Handle file upload
+        input_media.upload(
+            fn=detect_objects,
+            inputs=[input_media],
+            outputs=[
+                output_image,
+                output_video,
+                detection_info,
+                status_text,
+                image_column,
+                video_column
+            ]
+        )
 
 if __name__ == "__main__":
     demo.launch(share=True)