Simplify zoom implementation using global variables

- Store original images as module-level variables after detection
- Zoom functions use simple cv2.resize on stored numpy arrays
- No intermediate State components
- Zoom sliders only take zoom_level as input, no image input
- More direct and reliable implementation

app.py

@@ -9,6 +9,10 @@ from PIL import Image
 # Load the detector
 detector = TrafficSignDetector('config.yaml')
 
+# Store original images in memory
+original_output_image = None
+original_preprocessed_image = None
+
 def detect_traffic_signs(image, confidence_threshold):
     """
     Process the uploaded image and return the image with detected signs.
@@ -16,6 +20,8 @@ def detect_traffic_signs(image, confidence_threshold):
     :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
@@ -34,44 +40,47 @@ def detect_traffic_signs(image, confidence_threshold):
     result_image = cv2.cvtColor(result_image, cv2.COLOR_BGR2RGB)
     preprocessed_image = cv2.cvtColor(preprocessed_image, cv2.COLOR_BGR2RGB)
 
+    # Store originals as numpy arrays
+    original_output_image = result_image.copy()
+    original_preprocessed_image = preprocessed_image.copy()
+
     return result_image, preprocessed_image
 
-def apply_zoom(image, zoom_level):
-    """
-    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:
+def apply_zoom_output(zoom_level):
+    """Apply zoom to output image"""
+    if original_output_image is None:
         return None
     
-    # Convert to PIL if needed
-    if isinstance(image, np.ndarray):
-        pil_image = Image.fromarray(image.astype('uint8'))
-    else:
-        pil_image = image
-    
-    # Calculate new size
     zoom_factor = zoom_level / 100.0
-    new_width = int(pil_image.width * zoom_factor)
-    new_height = int(pil_image.height * zoom_factor)
-    
-    # Resize image
-    zoomed = pil_image.resize((new_width, new_height), Image.Resampling.LANCZOS)
+    h, w = original_output_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)
+        return zoomed
+    return original_output_image
+
+def apply_zoom_preprocessed(zoom_level):
+    """Apply zoom to preprocessed image"""
+    if original_preprocessed_image is None:
+        return None
     
-    # Convert back to numpy
-    return np.array(zoomed)
+    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)
+        return zoomed
+    return original_preprocessed_image
 
 # Create Gradio interface
-with gr.Blocks(title="Traffic Sign Detector", css=".zoom-info { font-size: 12px; color: #666; }") 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.")
     
-    # 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():
@@ -111,55 +120,42 @@ with gr.Blocks(title="Traffic Sign Detector", css=".zoom-info { font-size: 12px;
         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_and_store,
+        fn=detect_traffic_signs,
         inputs=[input_image, confidence_threshold],
-        outputs=[output_image, preprocessed_image, output_image_state, preprocessed_image_state],
+        outputs=[output_image, preprocessed_image],
         queue=True
     )
     
     # Auto-detect when threshold is changed
     confidence_threshold.change(
-        fn=detect_and_store,
+        fn=detect_traffic_signs,
         inputs=[input_image, confidence_threshold],
-        outputs=[output_image, preprocessed_image, output_image_state, preprocessed_image_state],
+        outputs=[output_image, preprocessed_image],
         queue=True
     )
     
     # Manual detection button
     detect_btn.click(
-        fn=detect_and_store, 
+        fn=detect_traffic_signs, 
         inputs=[input_image, confidence_threshold], 
-        outputs=[output_image, preprocessed_image, output_image_state, preprocessed_image_state],
+        outputs=[output_image, preprocessed_image],
         queue=True
     )
     
-    # Zoom output image - update the main display
+    # Zoom output image
     zoom_slider_output.change(
         fn=apply_zoom_output,
-        inputs=[output_image_state, zoom_slider_output],
+        inputs=[zoom_slider_output],
         outputs=[output_image],
         queue=False
     )
     
-    # Zoom preprocessed image - update the main display
+    # Zoom preprocessed image
     zoom_slider_preprocessed.change(
         fn=apply_zoom_preprocessed,
-        inputs=[preprocessed_image_state, zoom_slider_preprocessed],
+        inputs=[zoom_slider_preprocessed],
         outputs=[preprocessed_image],
         queue=False
     )
@@ -167,7 +163,7 @@ with gr.Blocks(title="Traffic Sign Detector", css=".zoom-info { font-size: 12px;
     # Clear button
     reset_btn.click(
         fn=lambda: (None, None, None, None, 100, 100),
-        outputs=[input_image, output_image, preprocessed_image, output_image_state, zoom_slider_output, zoom_slider_preprocessed]
+        outputs=[input_image, output_image, preprocessed_image, None, zoom_slider_output, zoom_slider_preprocessed]
     )
 
 if __name__ == "__main__":