Add auto-detection, interactive zoom, and class names to top 5 detections

- Auto-detect on image upload and threshold slider change
- Add Clear button to reset all fields
- Show class names alongside top 5 raw confidence scores
- Mark output images as non-interactive for better UX
- Update UI description for auto-detection feature

app.py

@@ -38,14 +38,14 @@ def detect_traffic_signs(image, confidence_threshold):
 # Create Gradio interface
 with gr.Blocks(title="Traffic Sign Detector") as demo:
     gr.Markdown("# Traffic Sign Detector")
-    gr.Markdown("Upload an image to detect traffic signs using YOLOv8.")
+    gr.Markdown("Upload an image to detect traffic signs using YOLOv8. Detection runs automatically when you upload or adjust the threshold.")
     
     with gr.Row():
         input_image = gr.Image(label="Upload Image", type="pil")
-        output_image = gr.Image(label="Detected Signs")
+        output_image = gr.Image(label="Detected Signs", interactive=False)
     
     with gr.Row():
-        preprocessed_image = gr.Image(label="Preprocessed Image (640x640, Letterboxed)")
+        preprocessed_image = gr.Image(label="Preprocessed Image (640x640, Letterboxed)", interactive=False)
     
     with gr.Row():
         confidence_threshold = gr.Slider(
@@ -57,12 +57,38 @@ with gr.Blocks(title="Traffic Sign Detector") as demo:
             info="Lower values show more detections (less confident). Adjust to find optimal balance."
         )
     
-    detect_btn = gr.Button("Detect Traffic Signs")
+    with gr.Row():
+        detect_btn = gr.Button("Detect Traffic Signs", variant="primary")
+        reset_btn = gr.Button("Clear")
+    
+    # Auto-detect when image is uploaded
+    input_image.change(
+        fn=detect_traffic_signs,
+        inputs=[input_image, confidence_threshold],
+        outputs=[output_image, preprocessed_image],
+        queue=True
+    )
+    
+    # Auto-detect when threshold is changed
+    confidence_threshold.change(
+        fn=detect_traffic_signs,
+        inputs=[input_image, confidence_threshold],
+        outputs=[output_image, preprocessed_image],
+        queue=True
+    )
+    
+    # Manual detection button
     detect_btn.click(
         fn=detect_traffic_signs, 
         inputs=[input_image, confidence_threshold], 
         outputs=[output_image, preprocessed_image],
-        queue=True  # Enable queue to ensure logs are shown
+        queue=True
+    )
+    
+    # Clear button
+    reset_btn.click(
+        fn=lambda: (None, None, None),
+        outputs=[input_image, output_image, preprocessed_image]
     )
 
 if __name__ == "__main__":

model.py

@@ -207,7 +207,13 @@ class TrafficSignDetector:
         
         if results_raw and len(results_raw[0].boxes) > 0:
             all_raw_confs = [float(box.conf[0]) for box in results_raw[0].boxes]
-            print(f"  - Top 5 raw confidences: {[f'{c:.6f}' for c in sorted(all_raw_confs, reverse=True)[:5]]}")
+            
+            # Get top 5 with class names
+            boxes_with_conf = [(float(box.conf[0]), int(box.cls[0].cpu().numpy())) for box in results_raw[0].boxes]
+            top_5 = sorted(boxes_with_conf, key=lambda x: x[0], reverse=True)[:5]
+            top_5_str = [f"{c:.6f} ({self.classes[cls]})" for c, cls in top_5]
+            
+            print(f"  - Top 5 raw confidences: {top_5_str}")
             print(f"  - Confidence stats: min={min(all_raw_confs):.6f}, max={max(all_raw_confs):.6f}, mean={np.mean(all_raw_confs):.6f}")
             print(f"  - Confidences > 0.01: {sum(1 for c in all_raw_confs if c > 0.01)}")
             print(f"  - Confidences > 0.001: {sum(1 for c in all_raw_confs if c > 0.001)}")