Update Gradio app with multiple files

app.py

@@ -9,34 +9,66 @@ def create_app():
     with gr.Blocks(theme=gr.themes.Soft(), css="""
         .gradio-container {
             max-width: 1400px !important;
+            margin: auto !important;
         }
         .filter-header {
             text-align: center;
-            padding: 20px;
+            padding: 30px;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 10px;
-            margin-bottom: 20px;
+            border-radius: 15px;
+            margin-bottom: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         }
         .filter-header h1 {
             color: white;
             margin: 0;
             font-size: 2.5em;
+            font-weight: bold;
         }
         .filter-header p {
-            color: rgba(255,255,255,0.9);
+            color: rgba(255,255,255,0.95);
             margin: 10px 0 0 0;
+            font-size: 1.1em;
         }
         .image-container {
             border: 2px solid #e0e0e0;
-            border-radius: 10px;
-            padding: 10px;
+            border-radius: 12px;
+            padding: 15px;
             background: white;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+            transition: all 0.3s ease;
+        }
+        .image-container:hover {
+            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
         }
         .control-panel {
-            background: #f8f9fa;
-            border-radius: 10px;
+            background: linear-gradient(to bottom, #f8f9fa, #ffffff);
+            border-radius: 12px;
+            padding: 20px;
+            margin-top: 15px;
+            border: 1px solid #e9ecef;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.04);
+        }
+        .filter-description {
+            background: #f0f4f8;
             padding: 15px;
-            margin-top: 10px;
+            border-radius: 8px;
+            margin: 15px 0;
+            border-left: 4px solid #667eea;
+        }
+        .gr-button-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            border: none !important;
+            font-weight: bold !important;
+        }
+        .gr-button-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
+        }
+        .gr-button-secondary {
+            background: #6c757d !important;
+            border: none !important;
+            color: white !important;
         }
     """) as app:
         with gr.Column(elem_classes="filter-header"):
@@ -46,10 +78,8 @@ def create_app():
             """)
         
         # Khởi tạo components
-        controls = create_filter_controls()
         filter_names = list(registry.filters.keys())
-        filter_groups = controls
-
+        
         with gr.Row():
             with gr.Column(scale=1):
                 with gr.Group(elem_classes="image-container"):
@@ -67,17 +97,14 @@ def create_app():
                         interactive=True
                     )
                     
-                    # Các điều khiển 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(
                         value="Chọn một bộ lọc để xem mô tả chi tiết.",
                         elem_classes="filter-description"
                     )
                     
+                    # Tạo các điều khiển bộ lọc động
+                    filter_controls = create_filter_controls()
+                    
                     apply_button = gr.Button(
                         "✨ Áp dụng bộ lọc",
                         variant="primary",
@@ -99,7 +126,7 @@ def create_app():
         # Xử lý cập nhật UI
         def update_controls(filter_name):
             updates = []
-            for group_name, group in filter_groups.items():
+            for group_name in filter_controls:
                 updates.append(gr.update(visible=group_name == filter_name))
             
             doc = registry.filters[filter_name].__doc__ or "Không có mô tả chi tiết."
@@ -112,10 +139,15 @@ def create_app():
             
             try:
                 image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
+                
+                # Lấy các tham số cho filter hiện tại
                 params = {}
-                param_names = list(registry.params_map.get(filter_name, {}).keys())
-                for i, param_name in enumerate(param_names):
-                    params[param_name] = args[i]
+                if filter_name in filter_controls and hasattr(filter_controls[filter_name], 'children'):
+                    param_names = list(registry.params_map.get(filter_name, {}).keys())
+                    controls_list = filter_controls[filter_name].children
+                    for i, param_name in enumerate(param_names):
+                        if i < len(controls_list):
+                            params[param_name] = args[i]
                 
                 processed = registry.filters[filter_name](image, **params)
                 
@@ -132,15 +164,21 @@ def create_app():
         def reset_all():
             return None, None, gr.update(visible=False), gr.update(visible=False), "Original"
 
+        # Thu thập tất cả control components
+        all_control_components = []
+        for filter_name in filter_controls:
+            if hasattr(filter_controls[filter_name], 'children'):
+                all_control_components.extend(filter_controls[filter_name].children)
+        
         # Kết nối sự kiện
         filter_select.change(
             update_controls,
             inputs=filter_select,
-            outputs=list(filter_groups.values()) + [filter_doc],
+            outputs=list(filter_controls.values()) + [filter_doc],
             api_name=False
         )
         
-        input_components = [input_image, filter_select] + control_components
+        input_components = [input_image, filter_select] + all_control_components
         apply_button.click(
             process,
             inputs=input_components,

components.py

@@ -5,32 +5,43 @@ def create_filter_controls():
     controls = {}
     for filter_name in registry.filters:
         params = registry.params_map.get(filter_name, {})
-        filter_group = gr.Group(visible=filter_name == "Original") # Create group here
-        filter_controls_list = []
-        with filter_group: # Put controls inside the group
-            for param_name, config in params.items():
-                if config['type'] == int:
-                    slider = gr.Slider(
-                        minimum=config.get('min', 1),
-                        maximum=config.get('max', 100),
-                        value=config['default'],
-                        label=param_name.replace('_', ' ').title(),
-                        step=config.get('step', 1)
-                    )
-                elif config['type'] == float:
-                    slider = gr.Slider(
-                        minimum=config.get('min', 0.1),
-                        maximum=config.get('max', 10.0),
-                        step=config.get('step', 0.1),
-                        value=config['default'],
-                        label=param_name.replace('_', ' ').title()
-                    )
-                elif config['type'] == bool:
-                    slider = gr.Checkbox(
-                        value=config['default'],
-                        label=param_name.replace('_', ' ').title()
-                    )
-                filter_controls_list.append(slider)
-        controls[filter_name] = filter_group # Store the group
-        filter_group.children = filter_controls_list # Add controls to the group
+        
+        with gr.Group(visible=filter_name == "Original") as filter_group:
+            filter_controls_list = []
+            
+            if params:  # Only create controls if there are parameters
+                gr.Markdown(f"### Tùy chỉnh {filter_name}")
+                
+                for param_name, config in params.items():
+                    if config['type'] == int:
+                        slider = gr.Slider(
+                            minimum=config.get('min', 1),
+                            maximum=config.get('max', 100),
+                            value=config['default'],
+                            label=param_name.replace('_', ' ').title(),
+                            step=config.get('step', 1),
+                            interactive=True
+                        )
+                    elif config['type'] == float:
+                        slider = gr.Slider(
+                            minimum=config.get('min', 0.1),
+                            maximum=config.get('max', 10.0),
+                            step=config.get('step', 0.1),
+                            value=config['default'],
+                            label=param_name.replace('_', ' ').title(),
+                            interactive=True
+                        )
+                    elif config['type'] == bool:
+                        slider = gr.Checkbox(
+                            value=config['default'],
+                            label=param_name.replace('_', ' ').title(),
+                            interactive=True
+                        )
+                    filter_controls_list.append(slider)
+            else:
+                gr.Markdown("*Bộ lọc này không có tham số tùy chỉnh*")
+            
+            filter_group.children = filter_controls_list
+            controls[filter_name] = filter_group
+    
     return controls