Update Gradio app with multiple files

app.py

@@ -108,74 +108,79 @@ def create_app():
         with gr.Column(elem_classes="filter-header"):
             gr.Markdown("""
             # 📷 Photo Filter App
-            Chỉnh sửa ảnh với các bộ lọc chuyên nghiệp - Nhanh chóng & Dễ dàng
+            Professional photo editing with powerful filters - Fast & Easy
             
             Built with [anycoder](https://huggingface.co/spaces/akhaliq/anycoder)
             """)
         
-        # Khởi tạo components
+        # Initialize components
         filter_names = list(registry.filters.keys())
         
+        # Top Row - Images side by side
         with gr.Row():
-            # Left Column - Input & Controls
-            with gr.Column(scale=2):
+            # Left Column - Input Image
+            with gr.Column(scale=1):
                 with gr.Group(elem_classes="image-container"):
                     input_image = gr.Image(
-                        label="📤 Ảnh gốc",
+                        label="📤 Original Image",
                         type="numpy",
                         height=500
                     )
+            
+            # Right Column - Output Image
+            with gr.Column(scale=1):
+                with gr.Group(elem_classes="image-container"):
+                    output_image = gr.Image(
+                        label="✅ Edited Image",
+                        height=500
+                    )
+                
+                error_message = gr.Markdown(visible=False)
                 
                 with gr.Row():
-                    apply_button = gr.Button(
-                        "✨ Áp dụng bộ lọc",
-                        variant="primary",
-                        size="lg",
-                        scale=2
-                    )
-                    reset_button = gr.Button(
-                        "🔄 Làm mới", 
-                        variant="secondary",
-                        size="lg",
-                        scale=1
+                    download_button = gr.Button(
+                        "💾 Download", 
+                        visible=False,
+                        size="lg"
                     )
-            
-            # Middle Column - Filter Selection & Parameters
+
+        # Action Buttons
+        with gr.Row():
+            apply_button = gr.Button(
+                "✨ Apply Filter",
+                variant="primary",
+                size="lg",
+                scale=2
+            )
+            reset_button = gr.Button(
+                "🔄 Reset", 
+                variant="secondary",
+                size="lg",
+                scale=1
+            )
+
+        # Bottom Row - Filter Selection & Parameters
+        with gr.Row():
             with gr.Column(scale=1):
                 with gr.Group(elem_classes="control-panel"):
-                    gr.Markdown("### 🎨 Chọn bộ lọc")
+                    gr.Markdown("### 🎨 Select Filter")
                     filter_select = gr.Dropdown(
-                        label="Bộ lọc",
+                        label="Filter",
                         choices=filter_names,
                         value="Original",
                         interactive=True
                     )
                     
                     filter_doc = gr.Markdown(
-                        value="Chọn một bộ lọc để xem mô tả chi tiết.",
+                        value="Select a filter to see detailed description.",
                         elem_classes="filter-description"
                     )
-                    
-                    gr.Markdown("### ⚙️ Tùy chỉnh")
-                    # Tạo các điều khiển bộ lọc động
-                    filter_controls, control_components = create_filter_controls()
             
-            # Right Column - Output
-            with gr.Column(scale=2):
-                with gr.Group(elem_classes="image-container"):
-                    output_image = gr.Image(
-                        label="✅ Ảnh đã chỉnh sửa",
-                        height=500
-                    )
-                
-                error_message = gr.Markdown(visible=False)
-                
-                with gr.Row():
-                    download_button = gr.Button(
-                        "💾 Tải xuống", 
-                        visible=False,
-                        size="lg"
-                    )
+            with gr.Column(scale=1):
+                with gr.Group(elem_classes="control-panel"):
+                    gr.Markdown("### ⚙️ Customize")
+                    # Create dynamic filter controls
+                    filter_controls, control_components = create_filter_controls()
 
         # Stats panel
         with gr.Row():
@@ -183,31 +188,31 @@ def create_app():
                 gr.Markdown(
                     f"""
                     <div class="stats-panel">
-                    📊 <b>Tổng số bộ lọc:</b> {len(filter_names)} | 
-                    🎯 <b>Bộ lọc có tham số:</b> {sum(1 for f in filter_names if registry.params_map.get(f))} | 
-                    🚀 <b>Bộ lọc nhanh:</b> {sum(1 for f in filter_names if not registry.params_map.get(f))}
+                    📊 <b>Total Filters:</b> {len(filter_names)} | 
+                    🎯 <b>Parameterized Filters:</b> {sum(1 for f in filter_names if registry.params_map.get(f))} | 
+                    🚀 <b>Quick Filters:</b> {sum(1 for f in filter_names if not registry.params_map.get(f))}
                     </div>
                     """
                 )
 
-        # Xử lý cập nhật UI
+        # Handle UI updates
         def update_controls(filter_name):
             updates = []
             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."
+            doc = registry.filters[filter_name].__doc__ or "No detailed description available."
             return updates + [doc]
 
-        # Xử lý ảnh
+        # Handle image processing
         def process(image, filter_name, *args):
             if image is None:
-                return None, gr.update(visible=True, value="⚠️ **Lưu ý:** Vui lòng tải ảnh lên trước khi áp dụng bộ lọc!"), gr.update(visible=False)
+                return None, gr.update(visible=True, value="⚠️ **Note:** Please upload an image before applying filters!"), gr.update(visible=False)
             
             try:
                 image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
                 
-                # Lấy các tham số cho filter hiện tại
+                # Get parameters for current filter
                 params = {}
                 if filter_name in control_components:
                     param_names = list(registry.params_map.get(filter_name, {}).keys())
@@ -225,18 +230,18 @@ def create_app():
                 
                 return processed, gr.update(visible=False), gr.update(visible=True)
             except Exception as e:
-                return None, gr.update(visible=True, value=f"❌ **Lỗi:** {str(e)}"), gr.update(visible=False)
+                return None, gr.update(visible=True, value=f"❌ **Error:** {str(e)}"), gr.update(visible=False)
         
-        # Xử lý reset
+        # Handle reset
         def reset_all():
             return None, None, gr.update(visible=False), gr.update(visible=False), "Original"
 
-        # Thu thập tất cả control components
+        # Collect all control components
         all_control_components = []
         for filter_name in control_components:
             all_control_components.extend(control_components[filter_name])
         
-        # Kết nối sự kiện
+        # Connect events
         filter_select.change(
             update_controls,
             inputs=filter_select,

components.py

@@ -2,7 +2,7 @@ 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"""
+    """Create controls for each filter"""
     controls = {}
     control_components = {}
     
@@ -42,7 +42,7 @@ def create_filter_controls():
                         )
                         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!*")
+                gr.Markdown("*✨ This filter has no custom parameters - Just click 'Apply' to use it!*")
             
             controls[filter_name] = filter_group
             control_components[filter_name] = filter_controls_list

filters.py

@@ -6,7 +6,7 @@ from registry import registry
 @registry.register("Original")
 def original(image):
     """
-    ## Ảnh gốc - không áp dụng bộ lọc nào.
+    ## Original Image - no filter applied.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
@@ -33,13 +33,13 @@ def original(image):
 })
 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.
+    ## Convert image to artistic dot pattern effect.
     
     **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
+    * `dot_size` (int): Size of each dot
+    * `dot_spacing` (int): Spacing between dots
+    * `invert` (bool): Invert dot colors
     
     **Returns:**
     * `numpy.ndarray`: Dotted image
@@ -88,11 +88,11 @@ def dot_effect(image, dot_size: int = 10, dot_spacing: int = 2, invert: bool = F
 })
 def pixelize(image, pixel_size: int = 10):
     """
-    ## Tạo hiệu ứng pixel hóa cho ảnh (8-bit retro style).
+    ## Create pixelated effect (8-bit retro style).
     
     **Args:**
     * `image` (numpy.ndarray): Input image
-    * `pixel_size` (int): Kích thước mỗi khối pixel
+    * `pixel_size` (int): Size of each pixel block
     
     **Returns:**
     * `numpy.ndarray`: Pixelized image
@@ -108,7 +108,7 @@ def pixelize(image, pixel_size: int = 10):
 @registry.register("Sketch Effect")
 def sketch_effect(image):
     """
-    ## Chuyển ảnh thành bản phác thảo bút chì.
+    ## Convert image to pencil sketch.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
@@ -138,11 +138,11 @@ def sketch_effect(image):
 })
 def warm_filter(image, intensity: int = 30):
     """
-    ## Thêm tông màu ấm áp cho ảnh (hoàng hôn, mùa thu).
+    ## Add warm tones to image (sunset, autumn style).
     
     **Args:**
     * `image` (numpy.ndarray): Input image (BGR)
-    * `intensity` (int): Cường độ hiệu ứng (0-100)
+    * `intensity` (int): Effect intensity (0-100)
     
     **Returns:**
     * `numpy.ndarray`: Warm-toned image
@@ -166,11 +166,11 @@ def warm_filter(image, intensity: int = 30):
 })
 def cool_filter(image, intensity: int = 30):
     """
-    ## Thêm tông màu lạnh cho ảnh (băng tuyết, biển xanh).
+    ## Add cool tones to image (ice, ocean style).
     
     **Args:**
     * `image` (numpy.ndarray): Input image (BGR)
-    * `intensity` (int): Cường độ hiệu ứng (0-100)
+    * `intensity` (int): Effect intensity (0-100)
     
     **Returns:**
     * `numpy.ndarray`: Cool-toned image
@@ -194,11 +194,11 @@ def cool_filter(image, intensity: int = 30):
 })
 def adjust_saturation(image, factor: int = 50):
     """
-    ## Điều chỉnh độ bão hòa màu sắc của ảnh.
+    ## Adjust color saturation of image.
     
     **Args:**
     * `image` (numpy.ndarray): Input image (BGR)
-    * `factor` (int): Hệ số bão hòa (0-100, 50 là bình thường)
+    * `factor` (int): Saturation factor (0-100, 50 is normal)
     
     **Returns:**
     * `numpy.ndarray`: Saturation-adjusted image
@@ -220,11 +220,11 @@ def adjust_saturation(image, factor: int = 50):
 })
 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).
+    ## Create vintage/retro photo effect (70s style).
     
     **Args:**
     * `image` (numpy.ndarray): Input image (BGR)
-    * `intensity` (int): Cường độ hiệu ứng vintage (0-100)
+    * `intensity` (int): Vintage effect intensity (0-100)
     
     **Returns:**
     * `numpy.ndarray`: Vintage-styled image
@@ -252,11 +252,11 @@ def vintage_filter(image, intensity: int = 50):
 })
 def vignette_effect(image, intensity: int = 50):
     """
-    ## Thêm hiệu ứng làm tối các góc ảnh (vignette).
+    ## Add darkening effect to image corners (vignette).
     
     **Args:**
     * `image` (numpy.ndarray): Input image (BGR)
-    * `intensity` (int): Cường độ vignette (0-100)
+    * `intensity` (int): Vignette intensity (0-100)
     
     **Returns:**
     * `numpy.ndarray`: Vignetted image
@@ -284,11 +284,11 @@ def vignette_effect(image, intensity: int = 50):
 })
 def hdr_effect(image, strength: int = 50):
     """
-    ## Tăng cường chi tiết ảnh với hiệu ứng HDR.
+    ## Enhance image details with HDR effect.
     
     **Args:**
     * `image` (numpy.ndarray): Input image (BGR)
-    * `strength` (int): Cường độ HDR (0-100)
+    * `strength` (int): HDR strength (0-100)
     
     **Returns:**
     * `numpy.ndarray`: HDR-enhanced image
@@ -318,11 +318,11 @@ def hdr_effect(image, strength: int = 50):
 })
 def gaussian_blur(image, kernel_size: int = 5):
     """
-    ## Làm mờ ảnh với bộ lọc Gaussian.
+    ## Blur image with Gaussian filter.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
-    * `kernel_size` (int): Kích thước kernel (phải là số lẻ)
+    * `kernel_size` (int): Kernel size (must be odd number)
     
     **Returns:**
     * `numpy.ndarray`: Blurred image
@@ -343,11 +343,11 @@ def gaussian_blur(image, kernel_size: int = 5):
 })
 def sharpen(image, amount: int = 50):
     """
-    ## Làm sắc nét ảnh.
+    ## Sharpen image details.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
-    * `amount` (int): Cường độ làm sắc nét (0-100)
+    * `amount` (int): Sharpening intensity (0-100)
     
     **Returns:**
     * `numpy.ndarray`: Sharpened image
@@ -373,12 +373,12 @@ def sharpen(image, amount: int = 50):
 })
 def emboss(image, strength: int = 50, direction: int = 0):
     """
-    ## Tạo hiệu ứng nổi 3D cho ảnh.
+    ## Create 3D embossed effect.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
-    * `strength` (int): Cường độ emboss (0-100)
-    * `direction` (int): Hướng ánh sáng (0-7)
+    * `strength` (int): Emboss strength (0-100)
+    * `direction` (int): Light direction (0-7)
     
     **Returns:**
     * `numpy.ndarray`: Embossed image
@@ -416,12 +416,12 @@ def emboss(image, strength: int = 50, direction: int = 0):
 })
 def oil_painting(image, size: int = 5, dynRatio: int = 1):
     """
-    ## Tạo hiệu ứng tranh sơn dầu.
+    ## Create oil painting effect.
     
     **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
+    * `size` (int): Processing area size
+    * `dynRatio` (int): Dynamic ratio affecting color intensity
     
     **Returns:**
     * `numpy.ndarray`: Oil painting styled image
@@ -432,7 +432,7 @@ def oil_painting(image, size: int = 5, dynRatio: int = 1):
 @registry.register("Black and White")
 def black_and_white(image):
     """
-    ## Chuyển ảnh sang đen trắng cổ điển.
+    ## Convert to classic black and white.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
@@ -446,7 +446,7 @@ def black_and_white(image):
 @registry.register("Sepia")
 def sepia(image):
     """
-    ## Tạo hiệu ứng sepia tông màu nâu cổ điển.
+    ## Create sepia tone classic brown effect.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
@@ -468,7 +468,7 @@ def sepia(image):
 @registry.register("Negative")
 def negative(image):
     """
-    ## Đảo ngược màu sắc tạo hiệu ứng negative film.
+    ## Invert colors for negative film effect.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
@@ -482,7 +482,7 @@ def negative(image):
 @registry.register("Watercolor")
 def watercolor(image):
     """
-    ## Tạo hiệu ứng tranh màu nước.
+    ## Create watercolor painting effect.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
@@ -496,7 +496,7 @@ def watercolor(image):
 @registry.register("Posterization")
 def posterize(image):
     """
-    ## Giảm số màu tạo hiệu ứng poster nghệ thuật.
+    ## Reduce colors for artistic poster effect.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
@@ -513,7 +513,7 @@ def posterize(image):
 @registry.register("Cross Process")
 def cross_process(image):
     """
-    ## Hiệu ứng xử lý chéo film (cross-processing).
+    ## Film cross-processing effect.
     
     **Args:**
     * `image` (numpy.ndarray): Input image
@@ -525,4 +525,23 @@ def cross_process(image):
     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)
+    return cv2.merge([b, g, r]).astype(np.uint8)
+
+Perfect! I've updated the app with the following changes:
+
+1. **New Layout**: 
+   - Input and output images are now side-by-side at the top for easy comparison
+   - Filter selection and customization controls moved to the bottom
+   - Action buttons (Apply Filter/Reset) placed between images and controls
+
+2. **Complete English Translation**:
+   - All Vietnamese text converted to English
+   - UI labels, descriptions, and messages in English
+   - Filter descriptions in English
+
+3. **Improved User Experience**:
+   - Images are now closer together for better before/after comparison
+   - More intuitive workflow: upload → select filter → customize → apply
+   - Cleaner visual hierarchy
+
+The app maintains all functionality while providing a better layout and full English localization! 🎨✨

requirements.txt

@@ -1,4 +1,8 @@
-gradio
 opencv-python
-opencv-contrib-python
 numpy
+gradio
+requests
+Pillow
+filter
+registry
+components