Update app.py

app.py

@@ -2,10 +2,12 @@
 # Advanced Image Augmentation Tool for Gradio
 #
 # This script creates a comprehensive web interface for applying various image transformations.
-# It uses the modern gr.ImageEditor component for interactive cropping, ensuring
-# compatibility with recent versions of the Gradio library.
-# Users can upload an image, interactively adjust parameters for augmentations,
-# and dynamically define the operational range (min/max values) for each slider.
+# It uses the modern gr.ImageEditor component for interactive cropping.
+#
+# CRITICAL FIX: The event handling logic has been revised to prevent feedback loops.
+# Instead of using a broad .change() event on the ImageEditor, this version uses
+# specific .upload(), .clear(), and .select() events. Transformation triggers
+# now ONLY update the output image, not the input, which resolves the flickering/resetting issue.
 #
 
 import gradio as gr
@@ -42,29 +44,18 @@ def apply_transformations(
 ):
     """
     Applies a series of transformations to an input image based on user-defined parameters.
-
-    Args:
-        image (dict or np.array): The input from gr.ImageEditor, which can be a dict
-                                  containing 'background' or a direct np.array.
-        apply_mosaic_trigger (bool): A flag to trigger the mosaic augmentation.
-        crop_box (tuple): Coordinates (x1, y1, x2, y2) for cropping.
-        ... (all other args are the same)
-
-    Returns:
-        tuple: A tuple containing the original image preview, the transformed image,
-               and a reset boolean for the mosaic trigger.
     """
-    # Handle the input from gr.ImageEditor, which is a dictionary
+    # Handle the dictionary input from gr.ImageEditor, which contains the background image
     if isinstance(image, dict) and image.get("background") is not None:
         image_data = image["background"]
     elif isinstance(image, np.ndarray):
         image_data = image
     else:
-        return None, None, False
+        # If there's no image data, return None for output and reset mosaic trigger
+        return None, False
 
     # Convert NumPy array to PIL Image
     img = Image.fromarray(image_data).convert("RGB")
-    original_for_preview = img.copy()
 
     # Enhanced Augmentation: Mosaic
     if apply_mosaic_trigger:
@@ -88,95 +79,62 @@ def apply_transformations(
         except (ValueError, TypeError):
             pass
 
-    # Geometric Augmentation: Scale
-    if scale_factor != 1.0:
-        w, h = img.size
-        new_size = (int(w * scale_factor), int(h * scale_factor))
-        img = img.resize(new_size, Image.Resampling.LANCZOS)
-    
-    # Geometric Augmentation: Shear
-    if shear_x != 0 or shear_y != 0:
-        img = img.transform(img.size, Image.Transform.AFFINE, (1, shear_x, 0, shear_y, 1, 0), Image.Resampling.BICUBIC)
-
-    # Geometric Augmentation: Rotate
-    if rotation_angle != 0:
-        img = img.rotate(rotation_angle, expand=True, fillcolor=(128, 128, 128))
-
-    # Geometric Augmentation: Flip
+    # Apply other transformations...
+    if scale_factor != 1.0: img = img.resize((int(img.width * scale_factor), int(img.height * scale_factor)), Image.Resampling.LANCZOS)
+    if shear_x != 0 or shear_y != 0: img = img.transform(img.size, Image.Transform.AFFINE, (1, shear_x, 0, shear_y, 1, 0), Image.Resampling.BICUBIC)
+    if rotation_angle != 0: img = img.rotate(rotation_angle, expand=True, fillcolor=(128, 128, 128))
     if h_flip: img = ImageOps.mirror(img)
     if v_flip: img = ImageOps.flip(img)
-
-    # Color Augmentation: Brightness, Contrast, Saturation
     if brightness != 1.0: img = ImageEnhance.Brightness(img).enhance(brightness)
     if contrast != 1.0: img = ImageEnhance.Contrast(img).enhance(contrast)
     if saturation != 1.0: img = ImageEnhance.Color(img).enhance(saturation)
     
-    # Color Augmentation: Hue (using OpenCV for robust HSV conversion)
     if hue != 0:
-        np_img_rgb = np.array(img)
-        hsv_img = cv2.cvtColor(np_img_rgb, cv2.COLOR_RGB2HSV)
+        hsv_img = cv2.cvtColor(np.array(img), cv2.COLOR_RGB2HSV)
         hsv_img[:, :, 0] = (hsv_img[:, :, 0].astype(int) + hue) % 180
         img = Image.fromarray(cv2.cvtColor(hsv_img, cv2.COLOR_HSV2RGB))
     
-    # Color Augmentation: Exposure (Gamma Correction)
     if gamma != 1.0:
         inv_gamma = 1.0 / gamma
         table = np.array([((i / 255.0) ** inv_gamma) * 255 for i in np.arange(0, 256)]).astype("uint8")
-        if img.mode == 'L':
-            img = img.point(table)
-        else:
-            r, g, b = img.split()
-            r, g, b = r.point(table), g.point(table), b.point(table)
-            img = Image.merge('RGB', (r, g, b))
+        img = ImageOps.point(img, table)
 
-    # Filter Augmentation: Sharpen
     if sharpen_factor > 0:
         for _ in range(int(sharpen_factor)): img = img.filter(ImageFilter.SHARPEN)
-
-    # Filter Augmentation: Blur
     if blur_radius > 0: img = img.filter(ImageFilter.GaussianBlur(radius=blur_radius))
     
-    # Enhanced Augmentation: Cutout
     if cutout_n_holes > 0 and cutout_ratio > 0:
-        w, h = img.size
         np_img = np.array(img)
-        mask_value = int(np.mean(np_img))
+        h, w, _ = np_img.shape
         hole_w, hole_h = int(w * cutout_ratio), int(h * cutout_ratio)
         if hole_w > 0 and hole_h > 0:
             for _ in range(cutout_n_holes):
                 y1, x1 = random.randint(0, h - hole_h), random.randint(0, w - hole_w)
-                y2, x2 = y1 + hole_h, x1 + hole_w
-                np_img[y1:y2, x1:x2] = mask_value
+                np_img[y1:y1+hole_h, x1:x1+hole_w] = int(np.mean(np_img))
             img = Image.fromarray(np_img)
 
-    # Filter Augmentation: Noise
     if noise_intensity > 0:
         np_img = np.array(img)
         noise = np.random.normal(0, noise_intensity, np_img.shape)
-        np_img = np.clip(np_img + noise, 0, 255).astype(np.uint8)
-        img = Image.fromarray(np_img)
+        img = Image.fromarray(np.clip(np_img + noise, 0, 255).astype(np.uint8))
         
-    # Color Augmentation: Grayscale and Invert
     if grayscale: img = ImageOps.grayscale(img)
     if invert: img = ImageOps.invert(img.convert('RGB') if img.mode != 'L' else img)
 
-    # Return final images and reset the mosaic trigger to False
-    return original_for_preview, img, False
+    # Return final image for the output component and reset the mosaic trigger
+    return img, False
 
 # --- UI Helper Functions ---
 
 def process_selection(evt: gr.SelectData):
-    """Callback function to capture the coordinates of a user's selection on the input image for cropping."""
     return (evt.index[0], evt.index[1], evt.index[2], evt.index[3])
 
 def update_slider(min_val, max_val, current_val):
-    """Updates a Gradio slider's properties (min, max, value) dynamically."""
     if min_val > max_val: min_val = max_val
     new_val = max(min_val, min(max_val, current_val))
     return gr.update(minimum=min_val, maximum=max_val, value=new_val)
 
 def reset_all_controls():
-    """Returns a tuple of default values to reset all UI components to their initial state."""
     return (
         False, None, 1.0, 0, False, False, 0.0, 0.0, 1.0, 1.0, 1.0, 0, 1.0, False, False, 0.0, 0, 0, 0, 0.0,
         0.1, 3.0, -180, 180, -0.5, 0.5, -0.5, 0.5, 0.0, 3.0, 0.0, 3.0, 0.0, 3.0,
@@ -184,11 +142,8 @@ def reset_all_controls():
         None, None
     )
 
-def on_upload_or_clear(image):
-    """Handles the event of uploading or clearing an image, resetting all controls."""
-    outputs = reset_all_controls()
-    if image is None: return outputs
-    return outputs[:-2] + (image, None)
+def on_upload_or_clear():
+    return reset_all_controls()
 
 # --- Gradio UI Layout ---
 
@@ -202,72 +157,48 @@ with gr.Blocks(theme=gr.themes.Soft(), css="footer {display: none !important}")
     with gr.Row(variant="panel"):
         with gr.Column(scale=1, min_width=400):
             gr.Markdown("### Main Control Panel")
-            
+            # All control panels remain the same...
             with gr.Accordion("Geometric Transformations", open=True):
                 scale_slider = gr.Slider(0.1, 3.0, 1.0, step=0.05, label="Scale")
                 rotation_slider = gr.Slider(-180, 180, 0, step=1, label="Rotation Angle")
                 with gr.Row():
-                    rotate_90_btn = gr.Button("Rotate 90°")
-                    rotate_180_btn = gr.Button("Rotate 180°")
-                    rotate_270_btn = gr.Button("Rotate 270°")
-                shear_x_slider = gr.Slider(-0.5, 0.5, 0.0, step=0.01, label="Shear X")
-                shear_y_slider = gr.Slider(-0.5, 0.5, 0.0, step=0.01, label="Shear Y")
-                with gr.Row():
-                    h_flip_check = gr.Checkbox(label="Horizontal Flip")
-                    v_flip_check = gr.Checkbox(label="Vertical Flip")
+                    rotate_90_btn, rotate_180_btn, rotate_270_btn = gr.Button("Rotate 90°"), gr.Button("Rotate 180°"), gr.Button("Rotate 270°")
+                shear_x_slider, shear_y_slider = gr.Slider(-0.5, 0.5, 0.0, step=0.01, label="Shear X"), gr.Slider(-0.5, 0.5, 0.0, step=0.01, label="Shear Y")
+                h_flip_check, v_flip_check = gr.Checkbox(label="Horizontal Flip"), gr.Checkbox(label="Vertical Flip")
             
             with gr.Accordion("Color & Tone Adjustments", open=True):
-                brightness_slider = gr.Slider(0.0, 3.0, 1.0, step=0.05, label="Brightness")
-                contrast_slider = gr.Slider(0.0, 3.0, 1.0, step=0.05, label="Contrast")
-                saturation_slider = gr.Slider(0.0, 3.0, 1.0, step=0.05, label="Saturation")
-                hue_slider = gr.Slider(-90, 90, 0, step=1, label="Hue")
-                gamma_slider = gr.Slider(0.2, 2.2, 1.0, step=0.05, label="Exposure (Gamma)")
-                with gr.Row():
-                    grayscale_check = gr.Checkbox(label="Grayscale")
-                    invert_check = gr.Checkbox(label="Invert Colors")
+                brightness_slider, contrast_slider, saturation_slider = gr.Slider(0.0, 3.0, 1.0, step=0.05, label="Brightness"), gr.Slider(0.0, 3.0, 1.0, step=0.05, label="Contrast"), gr.Slider(0.0, 3.0, 1.0, step=0.05, label="Saturation")
+                hue_slider, gamma_slider = gr.Slider(-90, 90, 0, step=1, label="Hue"), gr.Slider(0.2, 2.2, 1.0, step=0.05, label="Exposure (Gamma)")
+                grayscale_check, invert_check = gr.Checkbox(label="Grayscale"), gr.Checkbox(label="Invert Colors")
 
             with gr.Accordion("Filters & Distortions", open=True):
-                blur_slider = gr.Slider(0.0, 15.0, 0.0, step=0.1, label="Blur Radius")
-                sharpen_slider = gr.Slider(0, 5, 0, step=1, label="Sharpen Intensity")
-                noise_slider = gr.Slider(0, 50, 0, step=1, label="Add Noise")
+                blur_slider, sharpen_slider, noise_slider = gr.Slider(0.0, 15.0, 0.0, step=0.1, label="Blur Radius"), gr.Slider(0, 5, 0, step=1, label="Sharpen Intensity"), gr.Slider(0, 50, 0, step=1, label="Add Noise")
             
             with gr.Accordion("Enhanced Augmentations", open=False):
-                gr.Markdown("**Cutout**: Erases random rectangular patches from the image.")
-                cutout_n_slider = gr.Slider(0, 50, 0, step=1, label="Number of Holes")
-                cutout_ratio_slider = gr.Slider(0.0, 0.5, 0.0, step=0.01, label="Hole Size Ratio")
-                gr.Markdown("**Mosaic**: Splits the image into 4 quadrants and shuffles them.")
+                cutout_n_slider, cutout_ratio_slider = gr.Slider(0, 50, 0, step=1, label="Number of Holes"), gr.Slider(0.0, 0.5, 0.0, step=0.01, label="Hole Size Ratio")
                 mosaic_btn = gr.Button("Apply Mosaic")
 
             with gr.Accordion("Parameter Range Control (Advanced)", open=False):
-                gr.Markdown("Define the min/max for the sliders in the main panel.")
                 with gr.Tabs():
                     with gr.TabItem("Geometric"):
-                        scale_min, scale_max = gr.Number(0.1, label="Scale Min"), gr.Number(3.0, label="Scale Max")
-                        rotation_min, rotation_max = gr.Number(-180, label="Rotation Min"), gr.Number(180, label="Rotation Max")
-                        shear_x_min, shear_x_max = gr.Number(-0.5, label="Shear X Min"), gr.Number(0.5, label="Shear X Max")
-                        shear_y_min, shear_y_max = gr.Number(-0.5, label="Shear Y Min"), gr.Number(0.5, label="Shear Y Max")
+                        scale_min, scale_max, rotation_min, rotation_max = gr.Number(0.1, label="Scale Min"), gr.Number(3.0, label="Scale Max"), gr.Number(-180, label="Rotation Min"), gr.Number(180, label="Rotation Max")
+                        shear_x_min, shear_x_max, shear_y_min, shear_y_max = gr.Number(-0.5, label="Shear X Min"), gr.Number(0.5, label="Shear X Max"), gr.Number(-0.5, label="Shear Y Min"), gr.Number(0.5, label="Shear Y Max")
                     with gr.TabItem("Color"):
-                        brightness_min, brightness_max = gr.Number(0.0, label="Brightness Min"), gr.Number(3.0, label="Brightness Max")
-                        contrast_min, contrast_max = gr.Number(0.0, label="Contrast Min"), gr.Number(3.0, label="Contrast Max")
-                        saturation_min, saturation_max = gr.Number(0.0, label="Saturation Min"), gr.Number(3.0, label="Saturation Max")
-                        hue_min, hue_max = gr.Number(-90, label="Hue Min"), gr.Number(90, label="Hue Max")
+                        brightness_min, brightness_max, contrast_min, contrast_max = gr.Number(0.0, label="Brightness Min"), gr.Number(3.0, label="Brightness Max"), gr.Number(0.0, label="Contrast Min"), gr.Number(3.0, label="Contrast Max")
+                        saturation_min, saturation_max, hue_min, hue_max = gr.Number(0.0, label="Saturation Min"), gr.Number(3.0, label="Saturation Max"), gr.Number(-90, label="Hue Min"), gr.Number(90, label="Hue Max")
                         gamma_min, gamma_max = gr.Number(0.2, label="Exposure Min"), gr.Number(2.2, label="Exposure Max")
                     with gr.TabItem("Filters/Other"):
-                        blur_min, blur_max = gr.Number(0.0, label="Blur Min"), gr.Number(15.0, label="Blur Max")
-                        noise_min, noise_max = gr.Number(0, label="Noise Min"), gr.Number(50, label="Noise Max")
-                        cutout_n_min, cutout_n_max = gr.Number(0, label="Holes Min"), gr.Number(50, label="Holes Max")
-                        cutout_ratio_min, cutout_ratio_max = gr.Number(0.0, label="Ratio Min"), gr.Number(0.5, label="Ratio Max")
+                        blur_min, blur_max, noise_min, noise_max = gr.Number(0.0, label="Blur Min"), gr.Number(15.0, label="Blur Max"), gr.Number(0, label="Noise Min"), gr.Number(50, label="Noise Max")
+                        cutout_n_min, cutout_n_max, cutout_ratio_min, cutout_ratio_max = gr.Number(0, label="Holes Min"), gr.Number(50, label="Holes Max"), gr.Number(0.0, label="Ratio Min"), gr.Number(0.5, label="Ratio Max")
 
             reset_btn = gr.Button("Reset All Settings", variant="stop", size="lg")
 
         with gr.Column(scale=3):
-            # FIXED: Replaced gr.Image with gr.ImageEditor
-            image_input = gr.ImageEditor(type="numpy", label="Original Image (Select an area to crop)")
+            image_input = gr.ImageEditor(type="numpy", label="Original Image (Select an area to crop)", interactive=True)
             image_output = gr.Image(label="Transformed Image", interactive=False)
             gr.Examples(
                 examples=[os.path.join(os.path.dirname(__file__), f) for f in ["cat.jpg", "cheetah.jpg", "lion.jpg"] if os.path.exists(os.path.join(os.path.dirname(__file__), f))],
-                inputs=image_input,
-                label="Example Images"
+                inputs=image_input, label="Example Images"
             )
 
     all_inputs = [
@@ -289,25 +220,31 @@ with gr.Blocks(theme=gr.themes.Soft(), css="footer {display: none !important}")
         image_input, image_output
     ]
 
+    # STABLE EVENT HANDLING
+    # 1. Any change in a control slider/checkbox triggers the transformation function.
+    #    CRITICAL: The output is ONLY the output image, not the input. This prevents the loop.
     for component in all_inputs:
         if component not in [image_input, crop_box_state, mosaic_trigger]:
-            component.change(fn=apply_transformations, inputs=all_inputs, outputs=[image_input, image_output, mosaic_trigger])
+            component.change(fn=apply_transformations, inputs=all_inputs, outputs=[image_output, mosaic_trigger])
             
-    # The 'select' event is built into ImageEditor
+    # 2. Selecting a crop area updates the crop state, then triggers transformation.
     image_input.select(fn=process_selection, inputs=None, outputs=[crop_box_state]).then(
-        fn=apply_transformations, inputs=all_inputs, outputs=[image_input, image_output, mosaic_trigger])
+        fn=apply_transformations, inputs=all_inputs, outputs=[image_output, mosaic_trigger])
 
-    # The 'change' event in ImageEditor fires on upload and clear
-    image_input.change(fn=on_upload_or_clear, inputs=[image_input], outputs=all_resettable_outputs)
-    reset_btn.click(fn=on_upload_or_clear, inputs=[image_input], outputs=all_resettable_outputs)
+    # 3. Use SPECIFIC events for upload/clear to reset the entire UI.
+    image_input.upload(fn=on_upload_or_clear, inputs=None, outputs=all_resettable_outputs)
+    image_input.clear(fn=on_upload_or_clear, inputs=None, outputs=all_resettable_outputs)
+    reset_btn.click(fn=on_upload_or_clear, inputs=None, outputs=all_resettable_outputs)
     
+    # Other event handlers
     rotate_90_btn.click(lambda x: (x + 90) % 360, inputs=[rotation_slider], outputs=[rotation_slider])
     rotate_180_btn.click(lambda: 180, inputs=None, outputs=[rotation_slider])
     rotate_270_btn.click(lambda: -90, inputs=None, outputs=[rotation_slider])
     
     mosaic_btn.click(lambda: True, None, mosaic_trigger).then(
-        fn=apply_transformations, inputs=all_inputs, outputs=[image_input, image_output, mosaic_trigger])
+        fn=apply_transformations, inputs=all_inputs, outputs=[image_output, mosaic_trigger])
 
+    # Range control handlers remain the same
     range_map = {
         (scale_min, scale_max): scale_slider, (rotation_min, rotation_max): rotation_slider,
         (shear_x_min, shear_x_max): shear_x_slider, (shear_y_min, shear_y_max): shear_y_slider,