Fix zoom slider functionality - now updates image display directly

- Use Gradio State to store original images after detection
- Zoom sliders now update main image display (not hidden components)
- Queue=False for immediate zoom response (no delay)
- Cleaner UI with working zoom on all browsers/OS
- Reset button also resets zoom sliders to 100%

app.py

@@ -36,48 +36,66 @@ def detect_traffic_signs(image, confidence_threshold):
 
     return result_image, preprocessed_image
 
-def zoom_image(image, zoom_level):
+def apply_zoom(image, zoom_level):
     """
-    Zoom image by resizing it.
-    :param image: PIL Image
-    :param zoom_level: zoom percentage (50-200)
-    :return: zoomed image
+    Apply zoom to image by resizing it.
+    :param image: numpy array or PIL Image
+    :param zoom_level: zoom percentage (50-200, where 100 = 100%)
+    :return: zoomed image as numpy array
     """
     if image is None:
         return None
     
     # Convert to PIL if needed
     if isinstance(image, np.ndarray):
-        image = Image.fromarray(image)
+        pil_image = Image.fromarray(image.astype('uint8'))
+    else:
+        pil_image = image
     
     # Calculate new size
     zoom_factor = zoom_level / 100.0
-    new_width = int(image.width * zoom_factor)
-    new_height = int(image.height * zoom_factor)
+    new_width = int(pil_image.width * zoom_factor)
+    new_height = int(pil_image.height * zoom_factor)
     
     # Resize image
-    zoomed = image.resize((new_width, new_height), Image.Resampling.LANCZOS)
-    return zoomed
+    zoomed = pil_image.resize((new_width, new_height), Image.Resampling.LANCZOS)
+    
+    # Convert back to numpy
+    return np.array(zoomed)
 
 # Create Gradio interface
-with gr.Blocks(title="Traffic Sign Detector") as demo:
+with gr.Blocks(title="Traffic Sign Detector", css=".zoom-info { font-size: 12px; color: #666; }") as demo:
     gr.Markdown("# Traffic Sign Detector")
     gr.Markdown("Upload an image to detect traffic signs using YOLOv8. Detection runs automatically when you upload or adjust the threshold.")
     
+    # Store original images for zooming
+    output_image_state = gr.State(None)
+    preprocessed_image_state = gr.State(None)
+    
     with gr.Row():
         input_image = gr.Image(label="Upload Image", type="pil")
         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)
+            zoom_slider_output = gr.Slider(
+                minimum=50, 
+                maximum=200, 
+                value=100, 
+                step=10, 
+                label="Zoom Detected Image (%)",
+                info="50% = 50% size, 100% = original, 200% = 2x size"
+            )
     
     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)
+            zoom_slider_preprocessed = gr.Slider(
+                minimum=50, 
+                maximum=200, 
+                value=100, 
+                step=10, 
+                label="Zoom Preprocessed Image (%)",
+                info="50% = 50% size, 100% = original, 200% = 2x size"
+            )
     
     with gr.Row():
         confidence_threshold = gr.Slider(
@@ -93,48 +111,63 @@ with gr.Blocks(title="Traffic Sign Detector") as demo:
         detect_btn = gr.Button("Detect Traffic Signs", variant="primary")
         reset_btn = gr.Button("Clear")
     
+    def detect_and_store(image, confidence_threshold):
+        """Detect and store original images for zooming"""
+        result_image, preprocessed_image = detect_traffic_signs(image, confidence_threshold)
+        return result_image, preprocessed_image, result_image, preprocessed_image
+    
+    def apply_zoom_output(original_image, zoom_level):
+        """Apply zoom to output image"""
+        return apply_zoom(original_image, zoom_level)
+    
+    def apply_zoom_preprocessed(original_image, zoom_level):
+        """Apply zoom to preprocessed image"""
+        return apply_zoom(original_image, zoom_level)
+    
     # Auto-detect when image is uploaded
     input_image.change(
-        fn=detect_traffic_signs,
+        fn=detect_and_store,
         inputs=[input_image, confidence_threshold],
-        outputs=[output_image, preprocessed_image],
+        outputs=[output_image, preprocessed_image, output_image_state, preprocessed_image_state],
         queue=True
     )
     
     # Auto-detect when threshold is changed
     confidence_threshold.change(
-        fn=detect_traffic_signs,
+        fn=detect_and_store,
         inputs=[input_image, confidence_threshold],
-        outputs=[output_image, preprocessed_image],
+        outputs=[output_image, preprocessed_image, output_image_state, preprocessed_image_state],
         queue=True
     )
     
     # Manual detection button
     detect_btn.click(
-        fn=detect_traffic_signs, 
+        fn=detect_and_store, 
         inputs=[input_image, confidence_threshold], 
-        outputs=[output_image, preprocessed_image],
+        outputs=[output_image, preprocessed_image, output_image_state, preprocessed_image_state],
         queue=True
     )
     
-    # Zoom output image
+    # Zoom output image - update the main display
     zoom_slider_output.change(
-        fn=zoom_image,
-        inputs=[output_image, zoom_slider_output],
-        outputs=[output_image_zoomed]
+        fn=apply_zoom_output,
+        inputs=[output_image_state, zoom_slider_output],
+        outputs=[output_image],
+        queue=False
     )
     
-    # Zoom preprocessed image
+    # Zoom preprocessed image - update the main display
     zoom_slider_preprocessed.change(
-        fn=zoom_image,
-        inputs=[preprocessed_image, zoom_slider_preprocessed],
-        outputs=[preprocessed_image_zoomed]
+        fn=apply_zoom_preprocessed,
+        inputs=[preprocessed_image_state, zoom_slider_preprocessed],
+        outputs=[preprocessed_image],
+        queue=False
     )
     
     # Clear button
     reset_btn.click(
-        fn=lambda: (None, None, None, None, None),
-        outputs=[input_image, output_image, preprocessed_image, output_image_zoomed, preprocessed_image_zoomed]
+        fn=lambda: (None, None, None, None, 100, 100),
+        outputs=[input_image, output_image, preprocessed_image, output_image_state, zoom_slider_output, zoom_slider_preprocessed]
     )
 
 if __name__ == "__main__":