Update Gradio app with multiple files

components.py

@@ -2,14 +2,16 @@ import gradio as gr
 from registry import registry
 
 def create_filter_controls():
+    """Tạo các điều khiển cho từng bộ lọc"""
     controls = {}
+    
     for filter_name in registry.filters:
         params = registry.params_map.get(filter_name, {})
         
         with gr.Group(visible=filter_name == "Original") as filter_group:
             filter_controls_list = []
             
-            if params:  # Only create controls if there are parameters
+            if params:
                 for param_name, config in params.items():
                     if config['type'] == int:
                         slider = gr.Slider(
@@ -20,6 +22,7 @@ def create_filter_controls():
                             step=config.get('step', 1),
                             interactive=True
                         )
+                        filter_controls_list.append(slider)
                     elif config['type'] == float:
                         slider = gr.Slider(
                             minimum=config.get('min', 0.1),
@@ -29,13 +32,14 @@ def create_filter_controls():
                             label=f"🎚️ {param_name.replace('_', ' ').title()}",
                             interactive=True
                         )
+                        filter_controls_list.append(slider)
                     elif config['type'] == bool:
-                        slider = gr.Checkbox(
+                        checkbox = gr.Checkbox(
                             value=config['default'],
                             label=f"☑️ {param_name.replace('_', ' ').title()}",
                             interactive=True
                         )
-                    filter_controls_list.append(slider)
+                        filter_controls_list.append(checkbox)
             else:
                 gr.Markdown("*✨ Bộ lọc này không có tham số tùy chỉnh - Nhấn 'Áp dụng' để sử dụng!*")
             

filters.py

@@ -1 +1,528 @@
-*(Giữ nguyên file filters.py)*
+import cv2
+import numpy as np
+from registry import registry
+
+
+@registry.register("Original")
+def original(image):
+    """
+    ## Ảnh gốc - không áp dụng bộ lọc nào.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    
+    **Returns:**
+    * `numpy.ndarray`: Original image
+    """
+    return image
+
+
+@registry.register("Dot Effect", defaults={
+    "dot_size": 10,
+    "dot_spacing": 2,
+    "invert": False,
+}, min_vals={
+    "dot_size": 1,
+    "dot_spacing": 1,
+}, max_vals={
+    "dot_size": 20,
+    "dot_spacing": 10,
+}, step_vals={
+    "dot_size": 1,
+    "dot_spacing": 1,
+})
+def dot_effect(image, dot_size: int = 10, dot_spacing: int = 2, invert: bool = False):
+    """
+    ## Chuyển ảnh thành hiệu ứng chấm tròn nghệ thuật.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR or grayscale)
+    * `dot_size` (int): Kích thước mỗi chấm
+    * `dot_spacing` (int): Khoảng cách giữa các chấm
+    * `invert` (bool): Đảo ngược màu chấm
+    
+    **Returns:**
+    * `numpy.ndarray`: Dotted image
+    """
+    if len(image.shape) == 3:
+        gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    else:
+        gray = image
+
+    gray = cv2.adaptiveThreshold(
+        gray, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C,
+        cv2.THRESH_BINARY, 25, 5
+    )
+
+    height, width = gray.shape
+    canvas = np.zeros_like(gray) if not invert else np.full_like(gray, 255)
+
+    y_dots = range(0, height, dot_size + dot_spacing)
+    x_dots = range(0, width, dot_size + dot_spacing)
+
+    dot_color = 255 if not invert else 0
+    for y in y_dots:
+        for x in x_dots:
+            region = gray[y:min(y+dot_size, height), x:min(x+dot_size, width)]
+            if region.size > 0:
+                brightness = np.mean(region)
+                relative_brightness = brightness / 255.0
+                if invert:
+                    relative_brightness = 1 - relative_brightness
+                radius = int((dot_size/2) * relative_brightness)
+                if radius > 0:
+                    cv2.circle(canvas, (x + dot_size//2, y + dot_size//2),
+                             radius, (dot_color), -1)
+
+    return canvas
+
+
+@registry.register("Pixelize", defaults={
+    "pixel_size": 10,
+}, min_vals={
+    "pixel_size": 1,
+}, max_vals={
+    "pixel_size": 50,
+}, step_vals={
+    "pixel_size": 1,
+})
+def pixelize(image, pixel_size: int = 10):
+    """
+    ## Tạo hiệu ứng pixel hóa cho ảnh (8-bit retro style).
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    * `pixel_size` (int): Kích thước mỗi khối pixel
+    
+    **Returns:**
+    * `numpy.ndarray`: Pixelized image
+    """
+    height, width = image.shape[:2]
+    small_height = height // pixel_size
+    small_width = width // pixel_size
+    small_image = cv2.resize(image, (small_width, small_height), interpolation=cv2.INTER_LINEAR)
+    pixelized_image = cv2.resize(small_image, (width, height), interpolation=cv2.INTER_NEAREST)
+    return pixelized_image
+
+
+@registry.register("Sketch Effect")
+def sketch_effect(image):
+    """
+    ## Chuyển ảnh thành bản phác thảo bút chì.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    
+    **Returns:**
+    * `numpy.ndarray`: Sketch effect image
+    """
+    if len(image.shape) == 3:
+        gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    else:
+        gray = image
+
+    inverted_gray = cv2.bitwise_not(gray)
+    blurred = cv2.GaussianBlur(inverted_gray, (21, 21), 0)
+    sketch = cv2.divide(gray, 255 - blurred, scale=256)
+    return sketch
+
+
+@registry.register("Warm", defaults={
+    "intensity": 30,
+}, min_vals={
+    "intensity": 0,
+}, max_vals={
+    "intensity": 100,
+}, step_vals={
+    "intensity": 1,
+})
+def warm_filter(image, intensity: int = 30):
+    """
+    ## Thêm tông màu ấm áp cho ảnh (hoàng hôn, mùa thu).
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR)
+    * `intensity` (int): Cường độ hiệu ứng (0-100)
+    
+    **Returns:**
+    * `numpy.ndarray`: Warm-toned image
+    """
+    intensity_scale = intensity / 100.0
+    b, g, r = cv2.split(image.astype(np.float32))
+    r = np.clip(r * (1 + 0.5 * intensity_scale), 0, 255)
+    g = np.clip(g * (1 + 0.1 * intensity_scale), 0, 255)
+    b = np.clip(b * (1 - 0.1 * intensity_scale), 0, 255)
+    return cv2.merge([b, g, r]).astype(np.uint8)
+
+
+@registry.register("Cool", defaults={
+    "intensity": 30,
+}, min_vals={
+    "intensity": 0,
+}, max_vals={
+    "intensity": 100,
+}, step_vals={
+    "intensity": 1,
+})
+def cool_filter(image, intensity: int = 30):
+    """
+    ## Thêm tông màu lạnh cho ảnh (băng tuyết, biển xanh).
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR)
+    * `intensity` (int): Cường độ hiệu ứng (0-100)
+    
+    **Returns:**
+    * `numpy.ndarray`: Cool-toned image
+    """
+    intensity_scale = intensity / 100.0
+    b, g, r = cv2.split(image.astype(np.float32))
+    b = np.clip(b * (1 + 0.5 * intensity_scale), 0, 255)
+    g = np.clip(g * (1 + 0.1 * intensity_scale), 0, 255)
+    r = np.clip(r * (1 - 0.1 * intensity_scale), 0, 255)
+    return cv2.merge([b, g, r]).astype(np.uint8)
+
+
+@registry.register("Saturation", defaults={
+    "factor": 50,
+}, min_vals={
+    "factor": 0,
+}, max_vals={
+    "factor": 100,
+}, step_vals={
+    "factor": 1,
+})
+def adjust_saturation(image, factor: int = 50):
+    """
+    ## Điều chỉnh độ bão hòa màu sắc của ảnh.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR)
+    * `factor` (int): Hệ số bão hòa (0-100, 50 là bình thường)
+    
+    **Returns:**
+    * `numpy.ndarray`: Saturation-adjusted image
+    """
+    factor = (factor / 50.0)
+    hsv = cv2.cvtColor(image, cv2.COLOR_BGR2HSV).astype(np.float32)
+    hsv[:, :, 1] = np.clip(hsv[:, :, 1] * factor, 0, 255)
+    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):
+    """
+    ## Tạo hiệu ứng ảnh cổ điển/retro (phong cách những năm 70).
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR)
+    * `intensity` (int): Cường độ hiệu ứng vintage (0-100)
+    
+    **Returns:**
+    * `numpy.ndarray`: Vintage-styled image
+    """
+    intensity_scale = intensity / 100.0
+    b, g, r = cv2.split(image.astype(np.float32))
+    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)
+    result = cv2.merge([b, g, r]).astype(np.uint8)
+    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):
+    """
+    ## Thêm hiệu ứng làm tối các góc ảnh (vignette).
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR)
+    * `intensity` (int): Cường độ vignette (0-100)
+    
+    **Returns:**
+    * `numpy.ndarray`: Vignetted image
+    """
+    height, width = image.shape[:2]
+    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)
+    mask = (mask - mask.min()) / (mask.max() - mask.min())
+    mask = mask ** (1 + intensity/50)
+    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):
+    """
+    ## Tăng cường chi tiết ảnh với hiệu ứng HDR.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image (BGR)
+    * `strength` (int): Cường độ HDR (0-100)
+    
+    **Returns:**
+    * `numpy.ndarray`: HDR-enhanced image
+    """
+    strength_scale = strength / 100.0
+    lab = cv2.cvtColor(image, cv2.COLOR_BGR2LAB).astype(np.float32)
+    l, a, b = cv2.split(lab)
+    clahe = cv2.createCLAHE(clipLimit=3.0 * strength_scale, tileGridSize=(8, 8))
+    l = clahe.apply(l.astype(np.uint8)).astype(np.float32)
+    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)
+    enhanced_lab = cv2.merge([l, a, b])
+    result = cv2.cvtColor(enhanced_lab.astype(np.uint8), cv2.COLOR_LAB2BGR)
+    return result
+
+
+@registry.register("Gaussian Blur", defaults={
+    "kernel_size": 5,
+}, min_vals={
+    "kernel_size": 1,
+}, max_vals={
+    "kernel_size": 31,
+}, step_vals={
+    "kernel_size": 2,
+})
+def gaussian_blur(image, kernel_size: int = 5):
+    """
+    ## Làm mờ ảnh với bộ lọc Gaussian.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    * `kernel_size` (int): Kích thước kernel (phải là số lẻ)
+    
+    **Returns:**
+    * `numpy.ndarray`: Blurred image
+    """
+    if kernel_size % 2 == 0:
+        kernel_size += 1
+    return cv2.GaussianBlur(image, (kernel_size, kernel_size), 0)
+
+
+@registry.register("Sharpen", defaults={
+    "amount": 50,
+}, min_vals={
+    "amount": 0,
+}, max_vals={
+    "amount": 100,
+}, step_vals={
+    "amount": 1,
+})
+def sharpen(image, amount: int = 50):
+    """
+    ## Làm sắc nét ảnh.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    * `amount` (int): Cường độ làm sắc nét (0-100)
+    
+    **Returns:**
+    * `numpy.ndarray`: Sharpened image
+    """
+    amount = amount / 100.0
+    kernel = np.array([[-1, -1, -1], [-1, 9, -1], [-1, -1, -1]])
+    sharpened = cv2.filter2D(image, -1, kernel)
+    return cv2.addWeighted(image, 1 - amount, sharpened, amount, 0)
+
+
+@registry.register("Emboss", defaults={
+    "strength": 50,
+    "direction": 0,
+}, min_vals={
+    "strength": 0,
+    "direction": 0,
+}, max_vals={
+    "strength": 100,
+    "direction": 7,
+}, step_vals={
+    "strength": 1,
+    "direction": 1,
+})
+def emboss(image, strength: int = 50, direction: int = 0):
+    """
+    ## Tạo hiệu ứng nổi 3D cho ảnh.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    * `strength` (int): Cường độ emboss (0-100)
+    * `direction` (int): Hướng ánh sáng (0-7)
+    
+    **Returns:**
+    * `numpy.ndarray`: Embossed image
+    """
+    strength = strength / 100.0 * 2.0
+    kernels = [
+        np.array([[-1, -1, 0], [-1, 1, 1], [0, 1, 1]]),
+        np.array([[-1, 0, 1], [-1, 1, 1], [-1, 0, 1]]),
+        np.array([[0, 1, 1], [-1, 1, 1], [-1, -1, 0]]),
+        np.array([[1, 1, 1], [0, 1, 0], [-1, -1, -1]]),
+        np.array([[1, 1, 0], [1, 1, -1], [0, -1, -1]]),
+        np.array([[1, 0, -1], [1, 1, -1], [1, 0, -1]]),
+        np.array([[0, -1, -1], [1, 1, -1], [1, 1, 0]]),
+        np.array([[-1, -1, -1], [0, 1, 0], [1, 1, 1]])
+    ]
+    kernel = kernels[direction % 8]
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    embossed = cv2.filter2D(gray, -1, kernel * strength)
+    embossed = cv2.normalize(embossed, None, 0, 255, cv2.NORM_MINMAX)
+    return cv2.cvtColor(embossed.astype(np.uint8), cv2.COLOR_GRAY2BGR)
+
+
+@registry.register("Oil Painting", defaults={
+    "size": 5,
+    "dynRatio": 1,
+}, min_vals={
+    "size": 1,
+    "dynRatio": 1,
+}, max_vals={
+    "size": 15,
+    "dynRatio": 7,
+}, step_vals={
+    "size": 2,
+    "dynRatio": 1,
+})
+def oil_painting(image, size: int = 5, dynRatio: int = 1):
+    """
+    ## Tạo hiệu ứng tranh sơn dầu.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    * `size` (int): Kích thước vùng xử lý
+    * `dynRatio` (int): Tỷ lệ động ảnh hưởng đến cường độ màu
+    
+    **Returns:**
+    * `numpy.ndarray`: Oil painting styled image
+    """
+    return cv2.xphoto.oilPainting(image, size, dynRatio)
+
+
+@registry.register("Black and White")
+def black_and_white(image):
+    """
+    ## Chuyển ảnh sang đen trắng cổ điển.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    
+    **Returns:**
+    * `numpy.ndarray`: Grayscale image
+    """
+    return cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+
+
+@registry.register("Sepia")
+def sepia(image):
+    """
+    ## Tạo hiệu ứng sepia tông màu nâu cổ điển.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    
+    **Returns:**
+    * `numpy.ndarray`: Sepia-toned image
+    """
+    rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+    sepia_matrix = np.array([
+        [0.393, 0.769, 0.189],
+        [0.349, 0.686, 0.168],
+        [0.272, 0.534, 0.131]
+    ])
+    sepia_image = np.dot(rgb, sepia_matrix.T)
+    sepia_image = np.clip(sepia_image, 0, 255)
+    return cv2.cvtColor(sepia_image.astype(np.uint8), cv2.COLOR_RGB2BGR)
+
+
+@registry.register("Negative")
+def negative(image):
+    """
+    ## Đảo ngược màu sắc tạo hiệu ứng negative film.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    
+    **Returns:**
+    * `numpy.ndarray`: Negative image
+    """
+    return cv2.bitwise_not(image)
+
+
+@registry.register("Watercolor")
+def watercolor(image):
+    """
+    ## Tạo hiệu ứng tranh màu nước.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    
+    **Returns:**
+    * `numpy.ndarray`: Watercolor styled image
+    """
+    return cv2.xphoto.oilPainting(image, 7, 1)
+
+
+@registry.register("Posterization")
+def posterize(image):
+    """
+    ## Giảm số màu tạo hiệu ứng poster nghệ thuật.
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    
+    **Returns:**
+    * `numpy.ndarray`: Posterized image
+    """
+    hsv = cv2.cvtColor(image, cv2.COLOR_BGR2HSV)
+    hsv[:, :, 1] = cv2.equalizeHist(hsv[:, :, 1])
+    hsv[:, :, 2] = cv2.equalizeHist(hsv[:, :, 2])
+    return cv2.cvtColor(hsv, cv2.COLOR_HSV2BGR)
+
+
+@registry.register("Cross Process")
+def cross_process(image):
+    """
+    ## Hiệu ứng xử lý chéo film (cross-processing).
+    
+    **Args:**
+    * `image` (numpy.ndarray): Input image
+    
+    **Returns:**
+    * `numpy.ndarray`: Cross-processed image
+    """
+    b, g, r = cv2.split(image.astype(np.float32))
+    b = np.clip(b * 1.2, 0, 255)
+    g = np.clip(g * 0.8, 0, 255)
+    r = np.clip(r * 1.4, 0, 255)
+    return cv2.merge([b, g, r]).astype(np.uint8)

registry.py

@@ -1,28 +1,53 @@
-*(Giữ nguyên file registry.py)*
+from functools import wraps
+import inspect
 
-**Các cải tiến đã thực hiện:**
+class FilterRegistry:
+    """Registry để quản lý các bộ lọc và tham số của chúng"""
+    
+    def __init__(self):
+        self.filters = {}
+        self.params_map = {}
 
-1. **📐 Bố cục mới (3 cột):**
-   - Cột trái (scale=2): Ảnh đầu vào + nút điều khiển chính
-   - Cột giữa (scale=1): Chọn bộ lọc + tham số tùy chỉnh
-   - Cột phải (scale=2): Ảnh đầu ra
+    def register(self, name, defaults=None, min_vals=None, max_vals=None, step_vals=None):
+        """
+        Decorator để đăng ký một bộ lọc
+        
+        Args:
+            name: Tên bộ lọc
+            defaults: Giá trị mặc định cho các tham số
+            min_vals: Giá trị tối thiểu cho các tham số
+            max_vals: Giá trị tối đa cho các tham số
+            step_vals: Bước nhảy cho các tham số
+        """
+        if defaults is None:
+            defaults = {}
+        if min_vals is None:
+            min_vals = {}
+        if max_vals is None:
+            max_vals = {}
+        if step_vals is None:
+            step_vals = {}
+            
+        def decorator(func):
+            self.filters[name] = func
+            sig = inspect.signature(func)
+            params = {}
+            
+            for param in sig.parameters.values():
+                if param.name == 'image':
+                    continue
+                    
+                params[param.name] = {
+                    'type': param.annotation,
+                    'default': param.default if param.default != inspect.Parameter.empty else defaults.get(param.name),
+                    'min': min_vals.get(param.name),
+                    'max': max_vals.get(param.name),
+                    'step': step_vals.get(param.name)
+                }
+            
+            self.params_map[name] = params
+            return func
+        
+        return decorator
 
-2. **🌓 Tương thích Dark Mode:**
-   - CSS riêng cho `.dark` class
-   - Background và màu chữ tự động điều chỉnh
-   - Border và shadow tối ưu cho cả 2 chế độ
-
-3. **🎨 Cải thiện UX:**
-   - Ảnh lớn hơn (500px thay vì 400px)
-   - Nút điều khiển to và rõ ràng hơn
-   - Thêm panel thống kê số lượng bộ lọc
-   - Icon emoji cho các control
-
-4. **✨ Hiệu ứng:**
-   - Hover effect mượt mà
-   - Transform và shadow động
-   - Transition animation
-
-5. **📱 Responsive:**
-   - Tối ưu cho màn hình lớn với max-width 1600px
-   - Scale cột hợp lý để hiển thị tốt nhất
+registry = FilterRegistry()