Simplify zoom - use Image components with native scroll

- Return to using gr.Image components for zoomed output (Gradio native)
- Gradio Image components handle scrolling automatically for large images
- Removed HTML base64 approach that didn't support horizontal scroll
- Much simpler implementation - just cv2.resize and display
- Gradio natively scrolls any image larger than container
- Zoom sliders (50-300%) adjust image size, Gradio handles the rest

app.py

@@ -63,9 +63,9 @@ def array_to_base64(image_array):
     return img_base64
 
 def apply_zoom_output(zoom_level):
-    """Apply zoom to output image and display with scrolling"""
+    """Apply zoom to output image"""
     if original_output_image is None:
-        return "<p style='color: gray;'>Upload an image first</p>"
+        return None
     
     zoom_factor = zoom_level / 100.0
     h, w = original_output_image.shape[:2]
@@ -77,42 +77,12 @@ def apply_zoom_output(zoom_level):
     else:
         zoomed = original_output_image
     
-    # Convert to base64 for HTML display
-    img_base64 = array_to_base64(zoomed)
-    
-    # Return HTML with scrollable container that allows both directions
-    html = f"""
-    <div style="
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        overflow: auto;
-        max-height: 600px;
-        width: 100%;
-        padding: 10px;
-        background-color: #f9f9f9;
-        white-space: nowrap;
-        box-sizing: border-box;
-    ">
-        <div style="display: inline-block;">
-            <img src="data:image/png;base64,{img_base64}" style="
-                width: {new_w}px;
-                height: {new_h}px;
-                display: block;
-                image-rendering: crisp-edges;
-                vertical-align: top;
-            " />
-        </div>
-    </div>
-    <p style="font-size: 12px; color: #666; margin-top: 5px;">
-        Zoom: {zoom_level}% | Size: {new_w}×{new_h}px | Original: {w}×{h}px
-    </p>
-    """
-    return html
+    return zoomed
 
 def apply_zoom_preprocessed(zoom_level):
-    """Apply zoom to preprocessed image and display with scrolling"""
+    """Apply zoom to preprocessed image"""
     if original_preprocessed_image is None:
-        return "<p style='color: gray;'>Upload an image first</p>"
+        return None
     
     zoom_factor = zoom_level / 100.0
     h, w = original_preprocessed_image.shape[:2]
@@ -124,40 +94,24 @@ def apply_zoom_preprocessed(zoom_level):
     else:
         zoomed = original_preprocessed_image
     
-    # Convert to base64 for HTML display
-    img_base64 = array_to_base64(zoomed)
-    
-    # Return HTML with scrollable container that allows both directions
-    html = f"""
-    <div style="
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        overflow: auto;
-        max-height: 600px;
-        width: 100%;
-        padding: 10px;
-        background-color: #f9f9f9;
-        white-space: nowrap;
-        box-sizing: border-box;
-    ">
-        <div style="display: inline-block;">
-            <img src="data:image/png;base64,{img_base64}" style="
-                width: {new_w}px;
-                height: {new_h}px;
-                display: block;
-                image-rendering: crisp-edges;
-                vertical-align: top;
-            " />
-        </div>
-    </div>
-    <p style="font-size: 12px; color: #666; margin-top: 5px;">
-        Zoom: {zoom_level}% | Size: {new_w}×{new_h}px | Original: {w}×{h}px
-    </p>
-    """
-    return html
+    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;
+}
+"""
 
 # Create Gradio interface
-with gr.Blocks(title="Traffic Sign Detector") as demo:
+with gr.Blocks(title="Traffic Sign Detector", css=custom_css) 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.")
     
@@ -182,33 +136,31 @@ with gr.Blocks(title="Traffic Sign Detector") as demo:
         detect_btn = gr.Button("Detect Traffic Signs", variant="primary")
         reset_btn = gr.Button("Clear")
     
-    gr.Markdown("### Zoom & Inspect (Scroll horizontally and vertically as needed)")
+    gr.Markdown("### Zoom & Inspect (Use scroll bars for inspection)")
     
     with gr.Row():
-        zoom_slider_output = gr.Slider(
-            minimum=50, 
-            maximum=300, 
-            value=100, 
-            step=10, 
-            label="Zoom Detected Image (%)",
-            info="Drag to zoom (50% to 300%)",
-            scale=1
-        )
-    
-    output_html = gr.HTML(label="Zoomed Detected Image")
+        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)
     
     with gr.Row():
-        zoom_slider_preprocessed = gr.Slider(
-            minimum=50, 
-            maximum=300, 
-            value=100, 
-            step=10, 
-            label="Zoom Preprocessed Image (%)",
-            info="Drag to zoom (50% to 300%)",
-            scale=1
-        )
-    
-    preprocessed_html = gr.HTML(label="Zoomed Preprocessed Image")
+        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
     input_image.change(
@@ -234,26 +186,26 @@ with gr.Blocks(title="Traffic Sign Detector") as demo:
         queue=True
     )
     
-    # Zoom output image - display in HTML with actual size
+    # Zoom output image
     zoom_slider_output.change(
         fn=apply_zoom_output,
         inputs=[zoom_slider_output],
-        outputs=[output_html],
+        outputs=[output_zoomed],
         queue=False
     )
     
-    # Zoom preprocessed image - display in HTML with actual size
+    # Zoom preprocessed image
     zoom_slider_preprocessed.change(
         fn=apply_zoom_preprocessed,
         inputs=[zoom_slider_preprocessed],
-        outputs=[preprocessed_html],
+        outputs=[preprocessed_zoomed],
         queue=False
     )
     
     # Clear button
     reset_btn.click(
-        fn=lambda: (None, None, None, 100, 100, "", ""),
-        outputs=[input_image, output_image, preprocessed_image, zoom_slider_output, zoom_slider_preprocessed, output_html, preprocessed_html]
+        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]
     )
 
 if __name__ == "__main__":