Update app.py

app.py

@@ -108,30 +108,131 @@ def process_image(image):
 
     return Image.fromarray(img)
 
-with gr.Blocks(title="Real-Time YOLOv5 Video & Image Object Detection") as demo:
-    gr.Markdown("""
-    # Real-Time YOLOv5 Object Detection
-    """, elem_id="title")
+css = """
+#title {
+    text-align: center;
+    color: #2C3E50;
+    font-size: 2.5rem;
+    margin: 1.5rem 0;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.gradio-container {
+    background-color: #F5F7FA;
+}
+
+.tab-item {
+    background-color: white;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    margin: 10px;
+}
+
+.button-row {
+    display: flex;
+    justify-content: space-around;
+    margin: 1rem 0;
+}
+
+#video-process-btn, #submit-btn {
+    background-color: #3498DB;
+    border: none;
+}
+
+#clear-btn {
+    background-color: #E74C3C;
+    border: none;
+}
+
+.output-container {
+    margin-top: 1.5rem;
+    border: 2px dashed #3498DB;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.footer {
+    text-align: center;
+    margin-top: 2rem;
+    font-size: 0.9rem;
+    color: #7F8C8D;
+}
+"""
+
+with gr.Blocks(css=css, title="Real-Time YOLOv5 Video & Image Object Detection") as demo:
+    gr.Markdown("""# Real-Time YOLOv5 Object Detection""", elem_id="title")
     
     with gr.Tabs():
-        with gr.TabItem("Video Detection"):
-            with gr.Row():
-                video_input = gr.Video(label="Upload Video", interactive=True, elem_id="video-input")
-                process_button = gr.Button("Process Video", variant="primary", elem_id="video-process-btn")
-            video_output = gr.Video(label="Processed Video", elem_id="video-output")
-            process_button.click(fn=process_video, inputs=video_input, outputs=video_output)
-
-        with gr.TabItem("Image Detection"):
-            with gr.Row():
-                image_input = gr.Image(type="pil", label="Upload Image", interactive=True)
+        with gr.TabItem("Video Detection", elem_classes="tab-item"):
             with gr.Row():
-                clear_button = gr.Button("Clear", variant="secondary", elem_id="clear-btn")
-                submit_button = gr.Button("Detect Objects", variant="primary", elem_id="submit-btn")
-            clear_button.click(fn=lambda: None, inputs=None, outputs=image_output)
-            submit_button.click(fn=process_image, inputs=image_input, outputs=image_output)
+                video_input = gr.Video(
+                    label="Upload Video", 
+                    interactive=True, 
+                    elem_id="video-input"
+                )
+            
+            with gr.Row(elem_classes="button-row"):
+                process_button = gr.Button(
+                    "Process Video", 
+                    variant="primary", 
+                    elem_id="video-process-btn"
+                )
+            
+            with gr.Row(elem_classes="output-container"):
+                video_output = gr.Video(
+                    label="Processed Video", 
+                    elem_id="video-output"
+                )
+            
+            process_button.click(
+                fn=process_video, 
+                inputs=video_input, 
+                outputs=video_output
+            )
+            
+        with gr.TabItem("Image Detection", elem_classes="tab-item"):
             with gr.Row():
-                image_output = gr.Image(label="Detected Objects", elem_id="image-output")
+                image_input = gr.Image(
+                    type="pil", 
+                    label="Upload Image", 
+                    interactive=True
+                )
+            
+            # Define image_output before it's referenced
+            image_output = gr.Image(
+                label="Detected Objects", 
+                elem_id="image-output"
+            )
+            
+            with gr.Row(elem_classes="button-row"):
+                clear_button = gr.Button(
+                    "Clear", 
+                    variant="secondary", 
+                    elem_id="clear-btn"
+                )
+                submit_button = gr.Button(
+                    "Detect Objects", 
+                    variant="primary", 
+                    elem_id="submit-btn"
+                )
+            
+            # Now the clear_button can reference image_output
+            clear_button.click(
+                fn=lambda: None, 
+                inputs=None, 
+                outputs=image_output
+            )
             
+            submit_button.click(
+                fn=process_image, 
+                inputs=image_input, 
+                outputs=image_output
+            )
+    
+    gr.Markdown("""
+    ### Powered by YOLOv5.
+    This application allows real-time object detection using the YOLOv5 model.
+    """, elem_classes="footer")
 
 demo.launch()
-