Added filter documentation and UI updates

- Added Markdown for filter documentation
- Updated UI to display filter docs
- Enhanced dot_effect filter with docstring
- Improved process function readability
- Fixed output list in filter_select change

app.py

@@ -34,6 +34,8 @@ def create_app():
             
             with gr.Column():
                 output_image = gr.Image(label="Filtered Image")
+            
+            filter_doc = gr.Markdown()
 
         # Xử lý cập nhật UI
         def update_controls(filter_name):
@@ -41,11 +43,16 @@ def create_app():
             for group_name, group in filter_groups.items():
                 visibility = (group_name == filter_name)
                 updates.append(gr.update(visible=visibility))  # Changed from gr.Group.update
-            return updates
+            
+            # Get filter documentation
+            doc = registry.filters[filter_name].__doc__ or "No documentation available."
+            updates.append(gr.update(value=doc))
+            
+            return updates + [filter_doc.update(value=doc)]
 
 
         # Xử lý ảnh khi button click
-        def process(image, filter_name, *args): # Update process function to take image, filter_name and *args
+        def process(image, filter_name, *args):  # Update process function to take image, filter_name and *args
             if image is None:
                 return None
             
@@ -72,7 +79,7 @@ def create_app():
         filter_select.change(
             update_controls,
             inputs=filter_select,
-            outputs=list(filter_groups.values()), # Pass list of groups as outputs
+            outputs=list(filter_groups.values()) + [filter_doc],  # Pass list of groups as outputs
             api_name=False
         )
         

filters.py

@@ -2,7 +2,6 @@ import cv2
 import numpy as np
 from registry import registry
 
-
 @registry.register("Original")
 def original(image):
     return image
@@ -22,6 +21,16 @@ def original(image):
     "dot_spacing": 1,
 })
 def dot_effect(image, dot_size: int = 10, dot_spacing: int = 2, invert: bool = False):
+    """
+    **Convert your image into a dotted pattern.**
+    __Args:__
+        `image` (numpy.ndarray): Input image (BGR or grayscale)
+        `dot_size` (int): Size of each dot
+        `dot_spacing` (int): Spacing between dots
+        `invert` (bool): Invert the dots
+    __Returns:__
+        numpy.ndarray: Dotted image
+    """
     # Convert to grayscale if image is color
     if len(image.shape) == 3:
         gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
@@ -65,4 +74,4 @@ def dot_effect(image, dot_size: int = 10, dot_spacing: int = 2, invert: bool = F
                                (dot_color),
                                -1)
 
-    return canvas
+    return canvas