Add vintage, vignette, and HDR effect filters

- Introduced three new professional photo filters:
* Vintage: Adds retro color tones and soft blur
* Vignette: Creates darkened image corners
* HDR Effect: Enhances local image details and contrast
- Implemented intensity controls for each filter
- Used advanced image processing techniques with OpenCV
- Registered new filters with default and range parameters
- Improved filter variety and image editing capabilities

app.py

@@ -6,67 +6,93 @@ from filters import *
 from components import create_filter_controls
 
 def create_app():
-    with gr.Blocks(theme="CultriX/gradio-theme") as app:
-        gr.Markdown("# 📷 Photo Filter App")
+    # Định nghĩa theme tùy chỉnh
+    theme = gr.themes.Soft(
+        primary_hue="indigo",
+        secondary_hue="slate",
+    ).set(
+        body_background_fill="*background_fill_secondary",
+        block_background_fill="*background_fill_primary",
+        block_border_width="0",
+        block_shadow="*shadow_drop_lg",
+        button_primary_background_fill="*primary_500",
+        button_primary_background_fill_hover="*primary_600",
+        button_primary_text_color="white",
+    )
+
+    with gr.Blocks(theme=theme) as app:
+        gr.Markdown("""
+        # 📷 Photo Filter App
+        ### Chỉnh sửa ảnh với các bộ lọc chuyên nghiệp
+        """)
         
         # Khởi tạo components
         controls = create_filter_controls()
         filter_names = list(registry.filters.keys())
-        
-        # Re-initialize controls and filter_names after adding the new filter
-        controls = create_filter_controls()
-        filter_names = list(registry.filters.keys())
-        controls = create_filter_controls()
-        filter_names = list(registry.filters.keys())
-
-        filter_groups = {} # Store filter groups
+        filter_groups = controls
 
-        with gr.Row():
-            with gr.Column():
-                input_image = gr.Image(label="Input Image", type="numpy")
-                filter_select = gr.Dropdown(
-                    label="Select Filter",
-                    choices=filter_names,
-                    value="Original"
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=1):
+                input_image = gr.Image(
+                    label="Ảnh gốc",
+                    type="numpy",
+                    tool="select",
+                    height=400
                 )
                 
-                # Thêm các control vào UI
-                control_components = []
-                filter_groups = controls # Assign controls directly to filter_groups
-                for filter_name, group in filter_groups.items():
-                    for component in group.children: # Iterate over children of the group
-                        control_components.append(component) # Collect sliders for event handling
-                apply_button = gr.Button("Apply Filter") # Add Apply button
-            
-            with gr.Column():
-                output_image = gr.Image(label="Filtered Image")
-            
-            filter_doc = gr.Markdown()
+                with gr.Row():
+                    filter_select = gr.Dropdown(
+                        label="Chọn bộ lọc",
+                        choices=filter_names,
+                        value="Original",
+                        container=False
+                    )
+                    apply_button = gr.Button(
+                        "Áp dụng",
+                        variant="primary",
+                        size="sm"
+                    )
+
+                # Tạo container cho các điều khiển
+                with gr.Box():
+                    gr.Markdown("### Tùy chỉnh bộ lọc")
+                    control_components = []
+                    for filter_name, group in filter_groups.items():
+                        for component in group.children:
+                            control_components.append(component)
+                
+                filter_doc = gr.Markdown(
+                    container=False,
+                    show_label=False
+                )
+
+            with gr.Column(scale=1):
+                output_image = gr.Image(
+                    label="Ảnh đã chỉnh sửa",
+                    height=400,
+                    show_download_button=True
+                )
 
         # Xử lý cập nhật UI
         def update_controls(filter_name):
             updates = []
             for group_name, group in filter_groups.items():
-                visibility = (group_name == filter_name)
-                updates.append(gr.update(visible=visibility))  # Changed from gr.Group.update
-            
-            # Get filter documentation
-            doc = registry.filters[filter_name].__doc__ or "No documentation available."
+                updates.append(gr.update(visible=group_name == filter_name))
             
+            doc = registry.filters[filter_name].__doc__ or "Không có mô tả chi tiết."
             return updates + [doc]
 
-
-        # Xử lý ảnh khi button click
-        def process(image, filter_name, *args):  # Update process function to take image, filter_name and *args
+        # Xử lý ảnh
+        def process(image, filter_name, *args):
             if image is None:
-                return None
+                return None, gr.update(visible=True, value="⚠️ Vui lòng chọn ảnh trước khi áp dụng bộ lọc")
             
             try:
                 image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
                 params = {}
                 param_names = list(registry.params_map.get(filter_name, {}).keys())
                 for i, param_name in enumerate(param_names):
-                    params[param_name] = args[i] # Get parameter values from args
+                    params[param_name] = args[i]
                 
                 processed = registry.filters[filter_name](image, **params)
                 
@@ -75,24 +101,30 @@ def create_app():
                 else:
                     processed = cv2.cvtColor(processed, cv2.COLOR_BGR2RGB)
                 
-                return processed
+                return processed, gr.update(visible=False)
             except Exception as e:
-                print(f"Error processing image: {e}")
-                return image
+                return None, gr.update(visible=True, value=f"❌ Lỗi xử lý ảnh: {str(e)}")
+
+        # Thêm thông báo lỗi
+        error_message = gr.Markdown(
+            visible=False,
+            value="",
+            container=False
+        )
 
         # Kết nối sự kiện
         filter_select.change(
             update_controls,
             inputs=filter_select,
-            outputs=list(filter_groups.values()) + [filter_doc], # Pass list of groups as outputs
+            outputs=list(filter_groups.values()) + [filter_doc],
             api_name=False
         )
         
-        input_components = [input_image, filter_select] + control_components # Input components for button click
-        apply_button.click( # Attach click event to Apply button
+        input_components = [input_image, filter_select] + control_components
+        apply_button.click(
             process,
-            inputs=input_components, # Use all input components
-            outputs=output_image,
+            inputs=input_components,
+            outputs=[output_image, error_message],
         )
 
     return app

filters.py

@@ -245,3 +245,128 @@ def adjust_saturation(image, factor: int = 50):
     # Convert back to BGR
     return cv2.cvtColor(hsv.astype(np.uint8), cv2.COLOR_HSV2BGR)
 
+
+@registry.register("Vintage", defaults={
+    "intensity": 50,
+}, min_vals={
+    "intensity": 0,
+}, max_vals={
+    "intensity": 100,
+}, step_vals={
+    "intensity": 1,
+})
+def vintage_filter(image, intensity: int = 50):
+    """
+    ## Adds a vintage/retro effect to the image.
+
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR)
+    * `intensity` (int): Intensity of the vintage effect (0-100)
+
+    **Returns:**
+    * `numpy.ndarray`: Image with vintage effect
+    """
+    intensity_scale = intensity / 100.0
+    
+    # Split channels
+    b, g, r = cv2.split(image.astype(np.float32))
+    
+    # Adjust colors for vintage look
+    r = np.clip(r * (1 + 0.3 * intensity_scale), 0, 255)
+    g = np.clip(g * (1 - 0.1 * intensity_scale), 0, 255)
+    b = np.clip(b * (1 - 0.2 * intensity_scale), 0, 255)
+    
+    # Create sepia-like effect
+    result = cv2.merge([b, g, r]).astype(np.uint8)
+    
+    # Add slight blur for softness
+    if intensity > 0:
+        blur_amount = int(3 * intensity_scale) * 2 + 1
+        result = cv2.GaussianBlur(result, (blur_amount, blur_amount), 0)
+    
+    return result
+
+
+@registry.register("Vignette", defaults={
+    "intensity": 50,
+}, min_vals={
+    "intensity": 0,
+}, max_vals={
+    "intensity": 100,
+}, step_vals={
+    "intensity": 1,
+})
+def vignette_effect(image, intensity: int = 50):
+    """
+    ## Adds a vignette effect (darker corners) to the image.
+
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR)
+    * `intensity` (int): Intensity of the vignette (0-100)
+
+    **Returns:**
+    * `numpy.ndarray`: Image with vignette effect
+    """
+    height, width = image.shape[:2]
+    
+    # Create a vignette mask
+    X_resultant = np.abs(np.linspace(-1, 1, width)[None, :])
+    Y_resultant = np.abs(np.linspace(-1, 1, height)[:, None])
+    mask = np.sqrt(X_resultant**2 + Y_resultant**2)
+    mask = 1 - np.clip(mask, 0, 1)
+    
+    # Adjust mask based on intensity
+    mask = (mask - mask.min()) / (mask.max() - mask.min())
+    mask = mask ** (1 + intensity/50)
+    
+    # Apply mask to image
+    mask = mask[:, :, None]
+    result = image.astype(np.float32) * mask
+    
+    return np.clip(result, 0, 255).astype(np.uint8)
+
+
+@registry.register("HDR Effect", defaults={
+    "strength": 50,
+}, min_vals={
+    "strength": 0,
+}, max_vals={
+    "strength": 100,
+}, step_vals={
+    "strength": 1,
+})
+def hdr_effect(image, strength: int = 50):
+    """
+    ## Applies an HDR-like effect to enhance image details.
+
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR)
+    * `strength` (int): Strength of the HDR effect (0-100)
+
+    **Returns:**
+    * `numpy.ndarray`: Image with HDR-like effect
+    """
+    strength_scale = strength / 100.0
+    
+    # Convert to LAB color space
+    lab = cv2.cvtColor(image, cv2.COLOR_BGR2LAB).astype(np.float32)
+    
+    # Split channels
+    l, a, b = cv2.split(lab)
+    
+    # Apply CLAHE to L channel
+    clahe = cv2.createCLAHE(clipLimit=3.0 * strength_scale, tileGridSize=(8, 8))
+    l = clahe.apply(l.astype(np.uint8)).astype(np.float32)
+    
+    # Enhance local contrast
+    if strength > 0:
+        blur = cv2.GaussianBlur(l, (0, 0), 3)
+        detail = cv2.addWeighted(l, 1 + strength_scale, blur, -strength_scale, 0)
+        l = cv2.addWeighted(l, 1 - strength_scale/2, detail, strength_scale/2, 0)
+    
+    # Merge channels and convert back
+    enhanced_lab = cv2.merge([l, a, b])
+    result = cv2.cvtColor(enhanced_lab.astype(np.uint8), cv2.COLOR_LAB2BGR)
+    
+    return result
+