Simplify zoom to bare minimum - Gradio handles scroll natively

- Removed all custom CSS and HTML attempts
- Simple approach: zoom slider updates image size via cv2.resize
- Gradio Image component automatically shows scroll when needed
- Side-by-side zoom inspector with both detected and preprocessed
- Clean, minimal code - let Gradio handle the rendering

app.py

@@ -2,10 +2,6 @@ import gradio as gr
 import cv2
 import numpy as np
 from model import TrafficSignDetector
-import sys
-import io
-from PIL import Image
-import base64
 
 # Load the detector
 detector = TrafficSignDetector('config.yaml')
@@ -17,15 +13,10 @@ original_preprocessed_image = None
 def detect_traffic_signs(image, confidence_threshold):
     """
     Process the uploaded image and return the image with detected signs.
-    :param image: PIL Image or numpy array
-    :param confidence_threshold: confidence threshold from slider
-    :return: tuple of (detected image, preprocessed image)
     """
     global original_output_image, original_preprocessed_image
     
-    # Redirect stdout to capture all logs
     print(f"Received image type: {type(image)}")
-    # Convert PIL to numpy if necessary
     if hasattr(image, 'convert'):
         image = np.array(image)
         print(f"Converted PIL to numpy array, shape: {image.shape}")
@@ -34,86 +25,38 @@ def detect_traffic_signs(image, confidence_threshold):
     image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
     print(f"Converted to BGR, shape: {image.shape}")
 
-    # Perform detection with the slider's confidence threshold
+    # Perform detection
     result_image, preprocessed_image = detector.detect(image, confidence_threshold=confidence_threshold)
 
     # Convert back to RGB for Gradio
     result_image = cv2.cvtColor(result_image, cv2.COLOR_BGR2RGB)
     preprocessed_image = cv2.cvtColor(preprocessed_image, cv2.COLOR_BGR2RGB)
 
-    # Store originals as numpy arrays
+    # Store originals
     original_output_image = result_image.copy()
     original_preprocessed_image = preprocessed_image.copy()
 
     return result_image, preprocessed_image
 
-def array_to_base64(image_array):
-    """Convert numpy array to base64 PNG string"""
-    # Convert to PIL
-    pil_image = Image.fromarray(image_array.astype('uint8'))
-    
-    # Save to bytes
-    import io as io_module
-    buffered = io_module.BytesIO()
-    pil_image.save(buffered, format="PNG")
-    buffered.seek(0)
-    
-    # Convert to base64
-    img_base64 = base64.b64encode(buffered.getvalue()).decode()
-    return img_base64
-
-def apply_zoom_output(zoom_level):
-    """Apply zoom to output image"""
-    if original_output_image is None:
+def apply_zoom(image, zoom_level):
+    """Resize image based on zoom level"""
+    if image is None:
         return None
     
     zoom_factor = zoom_level / 100.0
-    h, w = original_output_image.shape[:2]
+    h, w = image.shape[:2]
     new_w = int(w * zoom_factor)
     new_h = int(h * zoom_factor)
     
     if new_w > 0 and new_h > 0:
-        zoomed = cv2.resize(original_output_image, (new_w, new_h), interpolation=cv2.INTER_LINEAR)
-    else:
-        zoomed = original_output_image
-    
-    return zoomed
-
-def apply_zoom_preprocessed(zoom_level):
-    """Apply zoom to preprocessed image"""
-    if original_preprocessed_image is None:
-        return None
-    
-    zoom_factor = zoom_level / 100.0
-    h, w = original_preprocessed_image.shape[:2]
-    new_w = int(w * zoom_factor)
-    new_h = int(h * zoom_factor)
-    
-    if new_w > 0 and new_h > 0:
-        zoomed = cv2.resize(original_preprocessed_image, (new_w, new_h), interpolation=cv2.INTER_LINEAR)
-    else:
-        zoomed = original_preprocessed_image
-    
-    return zoomed
-
-# Custom CSS for better scrolling
-custom_css = """
-.zoom-container {
-    overflow-x: auto !important;
-    overflow-y: auto !important;
-    max-height: 600px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    padding: 10px;
-    background-color: #f9f9f9;
-    display: block !important;
-}
-"""
+        zoomed = cv2.resize(image, (new_w, new_h), interpolation=cv2.INTER_LINEAR)
+        return zoomed
+    return image
 
 # Create Gradio interface
-with gr.Blocks(title="Traffic Sign Detector", css=custom_css) as demo:
+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. Detection runs automatically when you upload or adjust the threshold.")
+    gr.Markdown("Upload an image to detect traffic signs using YOLOv8.")
     
     with gr.Row():
         input_image = gr.Image(label="Upload Image", type="pil")
@@ -128,41 +71,28 @@ with gr.Blocks(title="Traffic Sign Detector", css=custom_css) as demo:
             maximum=0.9,
             value=0.30,
             step=0.01,
-            label="Confidence Threshold",
-            info="Lower values show more detections (less confident). Adjust to find optimal balance."
+            label="Confidence Threshold"
         )
     
     with gr.Row():
         detect_btn = gr.Button("Detect Traffic Signs", variant="primary")
         reset_btn = gr.Button("Clear")
     
-    gr.Markdown("### Zoom & Inspect (Use scroll bars for inspection)")
-    
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("**Zoom Detected Image**")
-            zoom_slider_output = gr.Slider(
-                minimum=50, 
-                maximum=300, 
-                value=100, 
-                step=10, 
-                label="Zoom Level (%)"
-            )
-            output_zoomed = gr.Image(label="Zoomed Detected Image", interactive=False)
+    gr.Markdown("### Zoom Inspector")
+    gr.Markdown("**Note:** Use these sliders to zoom in and inspect details. Scroll within the image view.")
     
     with gr.Row():
-        with gr.Column():
-            gr.Markdown("**Zoom Preprocessed Image**")
-            zoom_slider_preprocessed = gr.Slider(
-                minimum=50, 
-                maximum=300, 
-                value=100, 
-                step=10, 
-                label="Zoom Level (%)"
-            )
-            preprocessed_zoomed = gr.Image(label="Zoomed Preprocessed Image", interactive=False)
-    
-    # Auto-detect when image is uploaded
+        with gr.Column(scale=1):
+            gr.Markdown("**Detected Image**")
+            zoom_output = gr.Slider(50, 300, value=100, step=10, label="Zoom %")
+            output_zoomed = gr.Image(label="", interactive=False, show_download_button=False)
+        
+        with gr.Column(scale=1):
+            gr.Markdown("**Preprocessed Image**")
+            zoom_preprocessed = gr.Slider(50, 300, value=100, step=10, label="Zoom %")
+            preprocessed_zoomed = gr.Image(label="", interactive=False, show_download_button=False)
+    
+    # Auto-detect on upload
     input_image.change(
         fn=detect_traffic_signs,
         inputs=[input_image, confidence_threshold],
@@ -170,7 +100,7 @@ with gr.Blocks(title="Traffic Sign Detector", css=custom_css) as demo:
         queue=True
     )
     
-    # Auto-detect when threshold is changed
+    # Auto-detect on threshold change
     confidence_threshold.change(
         fn=detect_traffic_signs,
         inputs=[input_image, confidence_threshold],
@@ -178,7 +108,7 @@ with gr.Blocks(title="Traffic Sign Detector", css=custom_css) as demo:
         queue=True
     )
     
-    # Manual detection button
+    # Manual detect button
     detect_btn.click(
         fn=detect_traffic_signs, 
         inputs=[input_image, confidence_threshold], 
@@ -186,26 +116,26 @@ with gr.Blocks(title="Traffic Sign Detector", css=custom_css) as demo:
         queue=True
     )
     
-    # Zoom output image
-    zoom_slider_output.change(
-        fn=apply_zoom_output,
-        inputs=[zoom_slider_output],
+    # Zoom output
+    zoom_output.change(
+        fn=lambda z: apply_zoom(original_output_image, z),
+        inputs=[zoom_output],
         outputs=[output_zoomed],
         queue=False
     )
     
-    # Zoom preprocessed image
-    zoom_slider_preprocessed.change(
-        fn=apply_zoom_preprocessed,
-        inputs=[zoom_slider_preprocessed],
+    # Zoom preprocessed
+    zoom_preprocessed.change(
+        fn=lambda z: apply_zoom(original_preprocessed_image, z),
+        inputs=[zoom_preprocessed],
         outputs=[preprocessed_zoomed],
         queue=False
     )
     
-    # Clear button
+    # Clear
     reset_btn.click(
         fn=lambda: (None, None, None, 100, 100, None, None),
-        outputs=[input_image, output_image, preprocessed_image, zoom_slider_output, zoom_slider_preprocessed, output_zoomed, preprocessed_zoomed]
+        outputs=[input_image, output_image, preprocessed_image, zoom_output, zoom_preprocessed, output_zoomed, preprocessed_zoomed]
     )
 
 if __name__ == "__main__":