Add zoom sliders for output and preprocessed images

- Add zoom sliders (50-200%) for both detected and preprocessed images
- Zoom sliders work on all browsers/OS without keyboard shortcuts
- Dynamically resize images based on slider value
- Clear button now resets zoom images as well
- Better UX for detailed inspection of detections

app.py

@@ -4,6 +4,7 @@ import numpy as np
 from model import TrafficSignDetector
 import sys
 import io
+from PIL import Image
 
 # Load the detector
 detector = TrafficSignDetector('config.yaml')
@@ -35,6 +36,29 @@ def detect_traffic_signs(image, confidence_threshold):
 
     return result_image, preprocessed_image
 
+def zoom_image(image, zoom_level):
+    """
+    Zoom image by resizing it.
+    :param image: PIL Image
+    :param zoom_level: zoom percentage (50-200)
+    :return: zoomed image
+    """
+    if image is None:
+        return None
+    
+    # Convert to PIL if needed
+    if isinstance(image, np.ndarray):
+        image = Image.fromarray(image)
+    
+    # Calculate new size
+    zoom_factor = zoom_level / 100.0
+    new_width = int(image.width * zoom_factor)
+    new_height = int(image.height * zoom_factor)
+    
+    # Resize image
+    zoomed = image.resize((new_width, new_height), Image.Resampling.LANCZOS)
+    return zoomed
+
 # Create Gradio interface
 with gr.Blocks(title="Traffic Sign Detector") as demo:
     gr.Markdown("# Traffic Sign Detector")
@@ -42,10 +66,18 @@ with gr.Blocks(title="Traffic Sign Detector") as demo:
     
     with gr.Row():
         input_image = gr.Image(label="Upload Image", type="pil")
-        output_image = gr.Image(label="Detected Signs", interactive=False)
+        with gr.Column():
+            output_image = gr.Image(label="Detected Signs", interactive=False)
+            with gr.Row():
+                zoom_slider_output = gr.Slider(minimum=50, maximum=200, value=100, step=10, label="Zoom Output (%)")
+            output_image_zoomed = gr.Image(label="Zoomed Output", interactive=False, visible=False)
     
     with gr.Row():
         preprocessed_image = gr.Image(label="Preprocessed Image (640x640, Letterboxed)", interactive=False)
+        with gr.Column():
+            gr.Markdown("#### Zoom Preprocessed (%)")
+            zoom_slider_preprocessed = gr.Slider(minimum=50, maximum=200, value=100, step=10, label="Zoom Preprocessed")
+            preprocessed_image_zoomed = gr.Image(label="Zoomed Preprocessed", interactive=False, visible=False)
     
     with gr.Row():
         confidence_threshold = gr.Slider(
@@ -85,10 +117,24 @@ with gr.Blocks(title="Traffic Sign Detector") as demo:
         queue=True
     )
     
+    # Zoom output image
+    zoom_slider_output.change(
+        fn=zoom_image,
+        inputs=[output_image, zoom_slider_output],
+        outputs=[output_image_zoomed]
+    )
+    
+    # Zoom preprocessed image
+    zoom_slider_preprocessed.change(
+        fn=zoom_image,
+        inputs=[preprocessed_image, zoom_slider_preprocessed],
+        outputs=[preprocessed_image_zoomed]
+    )
+    
     # Clear button
     reset_btn.click(
-        fn=lambda: (None, None, None),
-        outputs=[input_image, output_image, preprocessed_image]
+        fn=lambda: (None, None, None, None, None),
+        outputs=[input_image, output_image, preprocessed_image, output_image_zoomed, preprocessed_image_zoomed]
     )
 
 if __name__ == "__main__":