Replace zoom with scrollable HTML display - actual pixel-level zoom

- Original images still display at standard size
- New zoom section uses HTML with base64 encoded images
- Zoomed images display at actual resized dimensions (not fixed container)
- Scrollable container for images larger than 600px height
- Shows zoom level and actual pixel dimensions
- Zoom range expanded to 50-300% for better inspection

app.py

@@ -5,6 +5,7 @@ from model import TrafficSignDetector
 import sys
 import io
 from PIL import Image
+import base64
 
 # Load the detector
 detector = TrafficSignDetector('config.yaml')
@@ -46,10 +47,25 @@ def detect_traffic_signs(image, confidence_threshold):
 
     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"""
+    """Apply zoom to output image and display with scrolling"""
     if original_output_image is None:
-        return None
+        return "<p style='color: gray;'>Upload an image first</p>"
     
     zoom_factor = zoom_level / 100.0
     h, w = original_output_image.shape[:2]
@@ -58,13 +74,39 @@ def apply_zoom_output(zoom_level):
     
     if new_w > 0 and new_h > 0:
         zoomed = cv2.resize(original_output_image, (new_w, new_h), interpolation=cv2.INTER_LINEAR)
-        return zoomed
-    return original_output_image
+    else:
+        zoomed = original_output_image
+    
+    # Convert to base64 for HTML display
+    img_base64 = array_to_base64(zoomed)
+    
+    # Return HTML with scrollable container
+    html = f"""
+    <div style="
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        overflow: auto;
+        max-width: 100%;
+        max-height: 600px;
+        padding: 10px;
+        background-color: #f9f9f9;
+    ">
+        <img src="data:image/png;base64,{img_base64}" style="
+            width: {new_w}px;
+            height: {new_h}px;
+            display: block;
+        " />
+    </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
 
 def apply_zoom_preprocessed(zoom_level):
-    """Apply zoom to preprocessed image"""
+    """Apply zoom to preprocessed image and display with scrolling"""
     if original_preprocessed_image is None:
-        return None
+        return "<p style='color: gray;'>Upload an image first</p>"
     
     zoom_factor = zoom_level / 100.0
     h, w = original_preprocessed_image.shape[:2]
@@ -73,8 +115,34 @@ def apply_zoom_preprocessed(zoom_level):
     
     if new_w > 0 and new_h > 0:
         zoomed = cv2.resize(original_preprocessed_image, (new_w, new_h), interpolation=cv2.INTER_LINEAR)
-        return zoomed
-    return original_preprocessed_image
+    else:
+        zoomed = original_preprocessed_image
+    
+    # Convert to base64 for HTML display
+    img_base64 = array_to_base64(zoomed)
+    
+    # Return HTML with scrollable container
+    html = f"""
+    <div style="
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        overflow: auto;
+        max-width: 100%;
+        max-height: 600px;
+        padding: 10px;
+        background-color: #f9f9f9;
+    ">
+        <img src="data:image/png;base64,{img_base64}" style="
+            width: {new_w}px;
+            height: {new_h}px;
+            display: block;
+        " />
+    </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
 
 # Create Gradio interface
 with gr.Blocks(title="Traffic Sign Detector") as demo:
@@ -83,28 +151,10 @@ with gr.Blocks(title="Traffic Sign Detector") as demo:
     
     with gr.Row():
         input_image = gr.Image(label="Upload Image", type="pil")
-        with gr.Column():
-            output_image = gr.Image(label="Detected Signs", interactive=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"
-            )
+        output_image = gr.Image(label="Detected Signs", interactive=False)
     
     with gr.Row():
         preprocessed_image = gr.Image(label="Preprocessed Image (640x640, Letterboxed)", interactive=False)
-        with gr.Column():
-            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(
@@ -120,6 +170,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")
+    
+    with gr.Row():
+        with gr.Column():
+            zoom_slider_output = gr.Slider(
+                minimum=50, 
+                maximum=300, 
+                value=100, 
+                step=10, 
+                label="Zoom Detected Image (%)",
+                info="Drag to zoom (50% to 300%)"
+            )
+            output_html = gr.HTML(label="Zoomed Detected Image")
+        
+        with gr.Column():
+            zoom_slider_preprocessed = gr.Slider(
+                minimum=50, 
+                maximum=300, 
+                value=100, 
+                step=10, 
+                label="Zoom Preprocessed Image (%)",
+                info="Drag to zoom (50% to 300%)"
+            )
+            preprocessed_html = gr.HTML(label="Zoomed Preprocessed Image")
+    
     # Auto-detect when image is uploaded
     input_image.change(
         fn=detect_traffic_signs,
@@ -144,26 +219,26 @@ with gr.Blocks(title="Traffic Sign Detector") as demo:
         queue=True
     )
     
-    # Zoom output image
+    # Zoom output image - display in HTML with actual size
     zoom_slider_output.change(
         fn=apply_zoom_output,
         inputs=[zoom_slider_output],
-        outputs=[output_image],
+        outputs=[output_html],
         queue=False
     )
     
-    # Zoom preprocessed image
+    # Zoom preprocessed image - display in HTML with actual size
     zoom_slider_preprocessed.change(
         fn=apply_zoom_preprocessed,
         inputs=[zoom_slider_preprocessed],
-        outputs=[preprocessed_image],
+        outputs=[preprocessed_html],
         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]
+        fn=lambda: (None, None, None, 100, 100, "", ""),
+        outputs=[input_image, output_image, preprocessed_image, zoom_slider_output, zoom_slider_preprocessed, output_html, preprocessed_html]
     )
 
 if __name__ == "__main__":