Update app.py

app.py

@@ -8,34 +8,26 @@ import math
 # --- Asset Setup ---
 # Initialize MediaPipe Face Mesh for landmark detection
 mp_face_mesh = mp.solutions.face_mesh
-# Use a with block for resource management, though for a long-running app, a global instance is fine.
-# For simplicity in Gradio, we'll keep the global instance.
 face_mesh = mp_face_mesh.FaceMesh(static_image_mode=True, max_num_faces=1, min_detection_confidence=0.5)
 
 
-# --- Optimized Filter Functions (Existing & New) ---
-# These functions are designed to be fast by using NumPy and OpenCV operations.
-
+# --- Standard Filter Functions ---
 def apply_grayscale(img_np):
     if img_np is None: return None
-    # Use OpenCV for a slightly faster conversion
     return cv2.cvtColor(cv2.cvtColor(img_np, cv2.COLOR_RGB2GRAY), cv2.COLOR_GRAY2RGB)
 
 def apply_sepia(img_np):
     if img_np is None: return None
-    # Keep the classic NumPy implementation
     sepia_matrix = np.array([[0.393, 0.769, 0.189], [0.349, 0.686, 0.168], [0.272, 0.534, 0.131]]).T
-    sepia_img = img_np.dot(sepia_matrix)
+    sepia_img = np.dot(img_np[...,:3], sepia_matrix)
     return np.clip(sepia_img, 0, 255).astype(np.uint8)
 
 def apply_invert(img_np):
     if img_np is None: return None
-    # OpenCV's bitwise_not is efficient
     return cv2.bitwise_not(img_np)
 
 def apply_posterize(img_np):
     if img_np is None: return None
-    # NumPy implementation is clear and effective
     bits = 4
     shift = 8 - bits
     return ((img_np >> shift) << shift).astype(np.uint8)
@@ -43,248 +35,207 @@ def apply_posterize(img_np):
 def apply_solarize(img_np):
     if img_np is None: return None
     threshold = 128
-    # Using np.where is more concise
     return np.where(img_np > threshold, 255 - img_np, img_np).astype(np.uint8)
 
 def apply_vignette(img_np):
     if img_np is None: return None
     rows, cols = img_np.shape[:2]
-    # Generate a kernel representing the gradient
     kernel_x = cv2.getGaussianKernel(cols, int(cols * 0.5))
     kernel_y = cv2.getGaussianKernel(rows, int(rows * 0.5))
     kernel = kernel_y * kernel_x.T
-    # Normalize the kernel
     mask = 255 * kernel / np.max(kernel)
-    # Apply the mask to each channel
     return np.clip(img_np * (mask[:, :, np.newaxis] / 255.0), 0, 255).astype(np.uint8)
 
 def apply_contour(img_np):
     if img_np is None: return None
     gray = cv2.cvtColor(img_np, cv2.COLOR_RGB2GRAY)
-    # Use Canny edge detection and invert the result
     edges = cv2.Canny(gray, 100, 200)
     return cv2.cvtColor(255 - edges, cv2.COLOR_GRAY2RGB)
 
 def apply_sharpen(img_np):
     if img_np is None: return None
-    # A common sharpening kernel
     kernel = np.array([[-1, -1, -1], [-1,  9, -1], [-1, -1, -1]])
     return cv2.filter2D(img_np, -1, kernel)
 
-# --- New Artistic Filters ---
-
 def apply_cartoon(img_np):
-    """Applies a cartoon effect using bilateral filtering and adaptive thresholding."""
     if img_np is None: return None
-    # 1. Edge detection
     gray = cv2.cvtColor(img_np, cv2.COLOR_RGB2GRAY)
     gray = cv2.medianBlur(gray, 5)
     edges = cv2.adaptiveThreshold(gray, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 9, 9)
-    # 2. Color quantization
     color = cv2.bilateralFilter(img_np, 9, 250, 250)
-    # 3. Combine color and edges
-    cartoon = cv2.bitwise_and(color, color, mask=edges)
-    return cartoon
+    return cv2.bitwise_and(color, color, mask=edges)
 
 def apply_sketch(img_np):
-    """Applies a pencil sketch effect."""
     if img_np is None: return None
-    # Convert to grayscale
     gray_img = cv2.cvtColor(img_np, cv2.COLOR_RGB2GRAY)
-    # Invert the grayscale image
     invert_img = 255 - gray_img
-    # Apply Gaussian blur
     blur_img = cv2.GaussianBlur(invert_img, (21, 21), 0)
-    # Invert the blurred image
     invert_blur_img = 255 - blur_img
-    # Create the sketch by dividing the grayscale image by the inverted-blurred image
     sketch_img = cv2.divide(gray_img, invert_blur_img, scale=256.0)
-    # Convert back to 3-channel RGB for display
     return cv2.cvtColor(sketch_img, cv2.COLOR_GRAY2RGB)
 
 def apply_pixelate(img_np):
-    """Pixelates the image."""
     if img_np is None: return None
     h, w = img_np.shape[:2]
     pixel_size = 16
-    # Resize down to a small size using nearest neighbor interpolation
     temp = cv2.resize(img_np, (w // pixel_size, h // pixel_size), interpolation=cv2.INTER_NEAREST)
-    # Resize back up to the original size
     return cv2.resize(temp, (w, h), interpolation=cv2.INTER_NEAREST)
 
+# --- New Advanced Filters ---
+
+def apply_hdr_effect(img_np):
+    """Simulates an HDR effect by enhancing details."""
+    if img_np is None: return None
+    # Using cv2.detailEnhance for a quick and effective HDR-like look
+    return cv2.detailEnhance(img_np, sigma_s=12, sigma_r=0.15)
 
-# --- Face Effect Functions ---
+def apply_color_splash(img_np, hex_color):
+    """Keeps a selected color and converts the rest of the image to grayscale."""
+    if img_np is None: return None
+    # Convert hex to RGB
+    h = hex_color.lstrip('#')
+    rgb_color = tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
+    
+    # Convert image and color to HSV
+    hsv_img = cv2.cvtColor(img_np, cv2.COLOR_RGB2HSV)
+    hsv_color = cv2.cvtColor(np.uint8([[rgb_color]]), cv2.COLOR_RGB2HSV)[0][0]
+
+    # Define a color range in HSV. Hue tolerance is important.
+    hue_tolerance = 10
+    lower_bound = np.array([max(0, hsv_color[0] - hue_tolerance), 50, 50])
+    upper_bound = np.array([min(179, hsv_color[0] + hue_tolerance), 255, 255])
+    
+    # Create the mask and its inverse
+    mask = cv2.inRange(hsv_img, lower_bound, upper_bound)
+    mask_inv = cv2.bitwise_not(mask)
+    
+    # Create grayscale version of the image
+    gray_img = cv2.cvtColor(img_np, cv2.COLOR_RGB2GRAY)
+    gray_img_3_channel = cv2.cvtColor(gray_img, cv2.COLOR_GRAY2RGB)
+    
+    # Isolate the colored parts and the grayscale parts
+    colored_part = cv2.bitwise_and(img_np, img_np, mask=mask)
+    grayscale_part = cv2.bitwise_and(gray_img_3_channel, gray_img_3_channel, mask=mask_inv)
+    
+    # Combine the two parts
+    return cv2.add(colored_part, grayscale_part)
 
+def apply_sunburst_glow(img_np):
+    """Adds a sunburst/lens flare effect from the brightest point."""
+    if img_np is None: return None
+    gray = cv2.cvtColor(img_np, cv2.COLOR_RGB2GRAY)
+    minVal, maxVal, minLoc, maxLoc = cv2.minMaxLoc(gray)
+    
+    overlay = img_np.copy()
+    
+    # Draw star-like rays from the brightest point
+    for i in range(12):
+        angle = i * 30 * np.pi / 180 # 30 degrees per line
+        length = np.random.randint(int(maxVal/2), int(maxVal*1.5))
+        pt2_x = int(maxLoc[0] + length * np.cos(angle))
+        pt2_y = int(maxLoc[1] + length * np.sin(angle))
+        cv2.line(overlay, maxLoc, (pt2_x, pt2_y), (255, 255, 220), 1)
+        
+    # Add a soft glow
+    glow = cv2.GaussianBlur(overlay, (0,0), sigmaX=30, sigmaY=30)
+    
+    # Blend the original image with the glow
+    return cv2.addWeighted(img_np, 0.8, glow, 0.4, 0)
+
+def apply_dreamy_glow(img_np):
+    """Adds a soft, dreamy glow effect to the image."""
+    if img_np is None: return None
+    # Create a blurred version of the image
+    blurred = cv2.GaussianBlur(img_np, (0,0), sigmaX=15, sigmaY=15)
+    # Blend using addWeighted to simulate a 'Screen' blend mode
+    return cv2.addWeighted(img_np, 1.0, blurred, 0.6, 0)
+
+
+# --- Face Effect Functions (Unchanged) ---
 def _create_sunglasses_mask():
-    """Helper to create a PIL image of sunglasses."""
     sunglasses = Image.new('RGBA', (300, 100), (0, 0, 0, 0))
     draw = ImageDraw.Draw(sunglasses)
-    # Lenses
     draw.ellipse((20, 20, 130, 80), fill=(20, 20, 20, 200), outline='gray', width=5)
     draw.ellipse((170, 20, 280, 80), fill=(20, 20, 20, 200), outline='gray', width=5)
-    # Bridge
     draw.line((130, 50, 170, 50), fill='gray', width=8)
     return sunglasses
 
 def apply_sunglasses(img_np):
-    """Detects facial landmarks and overlays sunglasses, accounting for head tilt."""
     if img_np is None: return img_np
-    
     results = face_mesh.process(img_np)
     pil_image = Image.fromarray(img_np)
-
     if results.multi_face_landmarks:
         for face_landmarks in results.multi_face_landmarks:
-            # Convert landmarks to pixel coordinates
             landmarks = np.array([(lm.x * img_np.shape[1], lm.y * img_np.shape[0]) for lm in face_landmarks.landmark])
-            
-            # Key eye landmarks for positioning
-            left_eye = landmarks[33]
-            right_eye = landmarks[263]
-            
-            # Calculate angle and width for sunglasses
+            left_eye, right_eye = landmarks[33], landmarks[263]
             eye_center = (left_eye + right_eye) / 2
             eye_width = np.linalg.norm(left_eye - right_eye)
             angle = math.degrees(math.atan2(right_eye[1] - left_eye[1], right_eye[0] - left_eye[0]))
-            
-            # Create and resize sunglasses mask
             sunglasses_img = _create_sunglasses_mask()
-            sunglasses_width = int(eye_width * 1.6) # Make them a bit wider than the eyes
-            sunglasses_height = int(sunglasses_width * sunglasses_img.height / sunglasses_img.width)
-            resized_sunglasses = sunglasses_img.resize((sunglasses_width, sunglasses_height), Image.Resampling.LANCZOS)
-            
-            # Rotate sunglasses to match head tilt
+            w, h = int(eye_width * 1.6), int(eye_width * 1.6 * sunglasses_img.height / sunglasses_img.width)
+            resized_sunglasses = sunglasses_img.resize((w, h), Image.Resampling.LANCZOS)
             rotated_sunglasses = resized_sunglasses.rotate(angle, expand=True, resample=Image.Resampling.BICUBIC)
-            
-            # Calculate top-left position for pasting, adjusting for rotation
-            pos_x = int(eye_center[0] - rotated_sunglasses.width / 2)
-            pos_y = int(eye_center[1] - rotated_sunglasses.height / 2)
-            
-            # Paste the rotated sunglasses onto the image
+            pos_x, pos_y = int(eye_center[0] - rotated_sunglasses.width / 2), int(eye_center[1] - rotated_sunglasses.height / 2)
             pil_image.paste(rotated_sunglasses, (pos_x, pos_y), rotated_sunglasses)
-
     return np.array(pil_image)
 
 def _draw_headwear(draw, landmarks, wearable_type):
-    """Helper function to draw different character masks and hats."""
-    # Define key landmark indices
-    chin = landmarks[152]
-    forehead_top = landmarks[10]
-    left_cheek = landmarks[234]
-    right_cheek = landmarks[454]
-    nose_tip = landmarks[1]
-
-    # Calculate face dimensions for scaling
-    face_width = np.linalg.norm(left_cheek - right_cheek)
-    face_height = np.linalg.norm(forehead_top - chin)
-
-    # Convert to an OpenCV-compatible format for drawing
+    chin, forehead_top, left_cheek, right_cheek = landmarks[152], landmarks[10], landmarks[234], landmarks[454]
+    face_width, face_height = np.linalg.norm(left_cheek - right_cheek), np.linalg.norm(forehead_top - chin)
     overlay_np = np.array(draw.im)
-
     if wearable_type == "Plumber":
-        hat_color = (21, 46, 230) # BGR for OpenCV
-        # --- Repositioned and Resized Hat ---
-        hat_width = face_width * 1.1
-        hat_height = face_height * 0.3
-        hat_center_x = forehead_top[0]
-        hat_brim_y = forehead_top[1] - face_height * 0.05 # Position just above forehead
-        
-        # Brim
+        hat_color = (21, 46, 230)
+        hat_width, hat_height = face_width * 1.1, face_height * 0.3
+        hat_center_x, hat_brim_y = forehead_top[0], forehead_top[1] - face_height * 0.05
         cv2.ellipse(overlay_np, (int(hat_center_x), int(hat_brim_y)), (int(hat_width/2), int(hat_height*0.2)), 0, 0, 360, hat_color, -1)
-        # Top part
         cv2.rectangle(overlay_np, (int(hat_center_x - hat_width/2.2), int(hat_brim_y - hat_height*0.8)), (int(hat_center_x + hat_width/2.2), int(hat_brim_y)), hat_color, -1)
-        
     elif wearable_type == "Elf Hero":
-        hat_color = (0, 128, 0) # Green
-        # --- Repositioned and Resized Hat ---
-        hat_tip_x = forehead_top[0]
-        hat_tip_y = forehead_top[1] - face_height * 0.8 # Make hat taller
-        hat_base_y = forehead_top[1] + face_height * 0.1
-        hat_base_left_x = left_cheek[0]
-        hat_base_right_x = right_cheek[0]
-        
-        pts = np.array([[hat_tip_x, hat_tip_y], [hat_base_left_x, hat_base_y], [hat_base_right_x, hat_base_y]], np.int32)
+        hat_color = (0, 128, 0)
+        pts = np.array([[forehead_top[0], forehead_top[1] - face_height*0.8], [left_cheek[0], forehead_top[1] + face_height*0.1], [right_cheek[0], forehead_top[1] + face_height*0.1]], np.int32)
         cv2.fillPoly(overlay_np, [pts], hat_color)
-
     elif wearable_type == "Cowboy Hat":
-        hat_color = (25, 69, 99) # Brown
-        # --- Positioned Relative to Face ---
-        hat_width = face_width * 1.4
-        hat_height = face_height * 0.5
-        hat_center_x = int(forehead_top[0])
-        brim_center_y = int(forehead_top[1])
-        
-        # Brim
+        hat_color = (25, 69, 99)
+        hat_width, hat_height = face_width * 1.4, face_height * 0.5
+        hat_center_x, brim_center_y = int(forehead_top[0]), int(forehead_top[1])
         cv2.ellipse(overlay_np, (hat_center_x, brim_center_y), (int(hat_width/2), int(hat_height*0.25)), 0, 0, 360, hat_color, -1)
-        # Crown
-        crown_top_y = brim_center_y - hat_height
         cv2.ellipse(overlay_np, (hat_center_x, int(brim_center_y - hat_height*0.3)), (int(hat_width/3), int(hat_height*0.3)), 0, 0, 360, hat_color, -1)
-
     elif wearable_type == "Crown":
-        hat_color = (0, 215, 255) # Gold
-        # --- Positioned Relative to Face ---
-        hat_width = face_width * 1.1
-        hat_height = face_height * 0.25
-        base_y = int(forehead_top[1] - face_height * 0.1)
-        base_x_start = int(forehead_top[0] - hat_width/2)
-        
-        # Base band
+        hat_color = (0, 215, 255)
+        hat_width, hat_height = face_width * 1.1, face_height * 0.25
+        base_y, base_x_start = int(forehead_top[1] - face_height * 0.1), int(forehead_top[0] - hat_width/2)
         cv2.rectangle(overlay_np, (base_x_start, base_y), (int(base_x_start + hat_width), int(base_y + hat_height * 0.3)), hat_color, -1)
-        # Spikes
         for i in range(5):
             spike_base_x = base_x_start + (i * hat_width/4)
-            pts = np.array([
-                [spike_base_x - hat_width*0.05, base_y],
-                [spike_base_x + hat_width*0.05, base_y],
-                [spike_base_x, base_y - hat_height]
-            ], np.int32)
+            pts = np.array([[spike_base_x - hat_width*0.05, base_y], [spike_base_x + hat_width*0.05, base_y], [spike_base_x, base_y - hat_height]], np.int32)
             cv2.fillPoly(overlay_np, [pts], hat_color)
-
-    # Convert back to PIL Image to be pasted
     return Image.fromarray(overlay_np)
 
-
 def apply_headwear(img_np, wearable_type):
-    """Detects facial landmarks and draws a character mask or hat."""
     if img_np is None: return img_np
-    
     results = face_mesh.process(img_np)
-    
     pil_image = Image.fromarray(img_np)
     if results.multi_face_landmarks:
         for face_landmarks in results.multi_face_landmarks:
-            # Create a transparent overlay for drawing
             overlay = Image.new('RGBA', pil_image.size, (255, 255, 255, 0))
             draw = ImageDraw.Draw(overlay)
-            
             landmarks = np.array([(lm.x * img_np.shape[1], lm.y * img_np.shape[0]) for lm in face_landmarks.landmark])
-            
-            # Draw the headwear on the overlay
             drawn_overlay = _draw_headwear(draw, landmarks, wearable_type)
-            
-            # Paste the overlay onto the original image
             pil_image.paste(drawn_overlay, (0, 0), drawn_overlay)
-
     return np.array(pil_image)
 
-# --- Main Processing Functions ---
-def process_image(image, filter_name):
-    """The main function that routes the image and filter name to the correct function."""
+# --- Main Processing Function ---
+def process_image(image, filter_name, splash_color):
     if image is None: return None
+    img_np = np.array(image.convert("RGB")) if isinstance(image, Image.Image) else image
     
-    # Ensure image is a NumPy array in RGB format
-    if isinstance(image, Image.Image):
-        img_np = np.array(image.convert("RGB"))
-    else:
-        img_np = image
-
-    # Map of all available filters to their functions
     filter_map = {
         "Grayscale": apply_grayscale, "Sepia": apply_sepia, "Invert": apply_invert,
-        "Posterize": apply_posterize, "Solarize": apply_solarize,
-        "Vignette": apply_vignette, "Contour": apply_contour, "Sharpen": apply_sharpen,
-        "Cartoon": apply_cartoon, "Sketch": apply_sketch, "Pixelate": apply_pixelate,
-        "Sunglasses": apply_sunglasses,
+        "Posterize": apply_posterize, "Solarize": apply_solarize, "Vignette": apply_vignette,
+        "Contour": apply_contour, "Sharpen": apply_sharpen, "Cartoon": apply_cartoon,
+        "Sketch": apply_sketch, "Pixelate": apply_pixelate, "Sunglasses": apply_sunglasses,
+        "HDR Effect": apply_hdr_effect, "Sunburst Glow": apply_sunburst_glow,
+        "Dreamy Glow": apply_dreamy_glow,
+        "Color Splash": lambda img: apply_color_splash(img, splash_color),
         "Plumber": lambda img: apply_headwear(img, "Plumber"),
         "Elf Hero": lambda img: apply_headwear(img, "Elf Hero"),
         "Cowboy Hat": lambda img: apply_headwear(img, "Cowboy Hat"),
@@ -293,7 +244,7 @@ def process_image(image, filter_name):
     }
     
     filter_function = filter_map.get(filter_name, lambda img: img)
-    return filter_function(img_np.copy()) # Pass a copy to avoid modifying original
+    return filter_function(img_np.copy())
 
 # --- Gradio UI ---
 css = """
@@ -304,87 +255,78 @@ css = """
 
 with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     gr.Markdown("# Advanced Image & Face Filter Studio", elem_id="title")
-    gr.Markdown("Apply classic, artistic, and face-aware effects to your images or live webcam feed.", elem_id="subtitle")
+    gr.Markdown("Apply classic, artistic, and face-aware effects to your images.", elem_id="subtitle")
 
-    # Define filter lists
     filters_old = ["None", "Grayscale", "Sepia", "Invert", "Posterize", "Solarize"]
     filters_new = ["None", "Vignette", "Contour", "Sharpen"]
     filters_artistic = ["None", "Cartoon", "Sketch", "Pixelate"]
     filters_face = ["None", "Sunglasses", "Plumber", "Elf Hero", "Cowboy Hat", "Crown"]
+    filters_advanced = ["None", "HDR Effect", "Color Splash", "Sunburst Glow", "Dreamy Glow"]
 
-    def create_ui(is_live=False):
-        """Helper function to create a consistent UI for each tab."""
-        with gr.Row(equal_height=True):
-            with gr.Column(scale=2):
-                if is_live:
-                    input_image = gr.Image(sources=["webcam"], type="numpy", label="Live Webcam Feed", streaming=True)
-                else:
-                    sources = ["webcam", "upload"]
-                    input_image = gr.Image(sources=sources, type="pil", label="Input Image")
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=2):
+            input_image = gr.Image(sources=["upload", "webcam"], type="pil", label="Input Image")
+        
+        with gr.Column(scale=1):
+            gr.Markdown("### Filter Controls")
+            with gr.Accordion("Old School", open=True):
+                radio_old = gr.Radio(filters_old, label="Filter", value="None")
+            with gr.Accordion("New School", open=True):
+                radio_new = gr.Radio(filters_new, label="Filter", value="None")
+            with gr.Accordion("Artistic", open=True):
+                radio_artistic = gr.Radio(filters_artistic, label="Filter", value="None")
+            with gr.Accordion("Advanced (May be slow)", open=True):
+                radio_advanced = gr.Radio(filters_advanced, label="Filter", value="None")
+            with gr.Accordion("Face Effects", open=True):
+                radio_face = gr.Radio(filters_face, label="Filter", value="None")
             
-            with gr.Column(scale=1):
-                gr.Markdown("### Filter Controls")
-                with gr.Accordion("Old School", open=True):
-                    radio_old = gr.Radio(filters_old, label="Filter", value="None")
-                with gr.Accordion("New School", open=True):
-                    radio_new = gr.Radio(filters_new, label="Filter", value="None")
-                with gr.Accordion("Artistic", open=True):
-                    radio_artistic = gr.Radio(filters_artistic, label="Filter", value="None")
-                with gr.Accordion("Face Effects", open=True):
-                    radio_face = gr.Radio(filters_face, label="Filter", value="None")
-                
-                if not is_live:
-                    apply_button = gr.Button("Apply Filter", variant="primary")
-
-            with gr.Column(scale=2):
-                output_image = gr.Image(label="Filtered Output")
+            color_picker = gr.ColorPicker(label="Color to Keep (for Color Splash)", value="#FF0000", visible=False)
+            apply_button = gr.Button("Apply Filter", variant="primary")
+
+        with gr.Column(scale=2):
+            output_image = gr.Image(label="Filtered Output")
+
+    all_radios = [radio_old, radio_new, radio_artistic, radio_advanced, radio_face]
+    
+    def master_update_function(img, r_old, r_new, r_art, r_adv, r_face, splash_color):
+        """This function is the single point of truth for applying filters."""
+        # Find the single active filter. The logic assumes only one is selected at a time.
+        active_filter = next((f for f in [r_old, r_new, r_art, r_adv, r_face] if f != "None"), "None")
+        
+        # Process the image
+        processed_img = process_image(img, active_filter, splash_color)
+        
+        # Determine visibility of the color picker
+        color_picker_visibility = gr.update(visible=True) if active_filter == "Color Splash" else gr.update(visible=False)
+        
+        return processed_img, color_picker_visibility
+
+    # This function resets other radio buttons. It's crucial for the UX.
+    def create_reset_function(radios_to_reset):
+        def reset_func():
+            return [gr.update(value="None") for _ in radios_to_reset]
+        return reset_func
+
+    # Connect all the events
+    # The key is chaining the UI reset with the image processing using .then()
+    for i, radio in enumerate(all_radios):
+        other_radios = [r for j, r in enumerate(all_radios) if i != j]
         
-        # Consolidate radio button inputs
-        radio_buttons = [radio_old, radio_new, radio_artistic, radio_face]
-
-        def get_active_filter(*radios):
-            """Find the first non-'None' value among the radio buttons."""
-            return next((f for f in radios if f != "None"), "None")
-
-        def apply_filter_func(img, r1, r2, r3, r4):
-            active_filter = get_active_filter(r1, r2, r3, r4)
-            if img is None: return None
-            # Live mode needs faster processing
-            if is_live:
-                img = cv2.resize(img, (640, 480), interpolation=cv2.INTER_AREA)
-            return process_image(img, active_filter)
-
-        # Logic for clearing other radio buttons when one is selected
-        def clear_others_factory(selected_radio_index):
-            def clear_func():
-                outputs = [gr.update(value="None")] * len(radio_buttons)
-                return outputs
-            return clear_func
-
-        # Connect the clearing logic
-        for i, radio in enumerate(radio_buttons):
-            other_radios = [r for j, r in enumerate(radio_buttons) if i != j]
-            radio.change(lambda: ("None", "None", "None"), None, other_radios, queue=False)
-
-        # Connect the filtering logic
-        if is_live:
-            # For live mode, trigger on input image change
-            input_image.stream(apply_filter_func, [input_image] + radio_buttons, output_image)
-        else:
-            # For static modes, trigger on button click or input change
-            apply_button.click(apply_filter_func, [input_image] + radio_buttons, output_image)
-            # Also apply filter on radio change if an image is already present
-            for radio in radio_buttons:
-                radio.change(apply_filter_func, [input_image] + radio_buttons, output_image)
-            input_image.change(apply_filter_func, [input_image] + radio_buttons, output_image)
-
-
-    with gr.Tabs():
-        with gr.TabItem("Static Image (Upload or Capture)"):
-            create_ui(is_live=False)
-        with gr.TabItem("Live Webcam"):
-            create_ui(is_live=True)
+        # When a radio's value changes:
+        # 1. First, create and trigger a function to reset all other radio groups.
+        radio.change(fn=create_reset_function(other_radios), inputs=None, outputs=other_radios, queue=False)
+        # 2. THEN, after the reset is queued, run the main update function to process the image.
+        radio.then(fn=master_update_function, 
+                   inputs=[input_image] + all_radios + [color_picker], 
+                   outputs=[output_image, color_picker])
+
+    # Connect the Apply button and image upload/change events to the master function as well
+    trigger_inputs = [input_image] + all_radios + [color_picker]
+    trigger_outputs = [output_image, color_picker]
+    apply_button.click(master_update_function, inputs=trigger_inputs, outputs=trigger_outputs)
+    input_image.change(master_update_function, inputs=trigger_inputs, outputs=trigger_outputs)
+    color_picker.change(master_update_function, inputs=trigger_inputs, outputs=trigger_outputs)
 
 
 if __name__ == "__main__":
-    demo.launch(debug=True)
+    demo.launch(debug=True)