Update app.py

app.py

@@ -4,10 +4,160 @@ import os
 import gradio as gr
 from PIL import Image
 import tempfile
+from typing import Union, Tuple
+
+# Custom CSS for styling the interface
+custom_css = """
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Main styling */
+.gradio-container {
+    font-family: 'Roboto', 'Segoe UI', sans-serif;
+    color: white;
+}
+
+/* Card styling */
+.app-card {
+    border-radius: 12px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+    padding: 20px;
+    background: linear-gradient(135deg, #2a3a4a 0%, #1e2a3a 100%);
+    margin-bottom: 20px;
+}
+
+/* Header styling */
+h1, h2, h3 {
+    font-weight: 700 !important;
+    color: white !important;
+}
+
+/* Labels styling */
+label, .label {
+    font-size: 1rem !important;
+    font-weight: 600 !important;
+    color: white !important;
+    margin-bottom: 6px !important;
+}
+
+/* Input and slider styling */
+.slider-label {
+    font-weight: 600 !important;
+    color: white !important;
+    font-size: 0.95rem !important;
+}
+
+/* Button styling */
+button.primary {
+    background: linear-gradient(135deg, #3498db, #2980b9) !important;
+    color: white !important;
+    font-weight: 600 !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
+    font-size: 1.1rem !important;
+    transition: all 0.3s ease !important;
+    border: none !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+}
+
+button.primary:hover {
+    background: linear-gradient(135deg, #2980b9, #2573a7) !important;
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2) !important;
+    transform: translateY(-2px) !important;
+}
+
+/* Radio buttons */
+.radio-group label {
+    font-weight: 600 !important;
+    color: white !important;
+}
+
+/* Tab styling */
+.tab-nav {
+    font-weight: 600 !important;
+    font-size: 1.05rem !important;
+}
+
+/* Tool tips */
+.tooltip {
+    position: relative;
+    display: inline-block;
+    margin-left: 8px;
+    cursor: help;
+}
+
+.tooltip .tooltip-icon {
+    color: #3498db;
+    font-size: 16px;
+    font-weight: bold;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #3498db;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: 200px;
+    background-color: #34495e;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -100px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 0.9rem;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 10px !important;
+    }
+    
+    label, .label {
+        font-size: 0.95rem !important;
+    }
+    
+    button.primary {
+        padding: 10px 18px !important;
+        font-size: 1rem !important;
+    }
+}
+"""
 
 # Enable OpenCL for better performance
 cv2.ocl.setUseOpenCL(True)
 
+# ------------------- Helper Functions ------------------- #
+def create_tooltip(label: str, tooltip_text: str) -> str:
+    """Create a tooltip HTML element"""
+    return f"""
+    <div style="display: flex; align-items: center;">
+        <span>{label}</span>
+        <div class="tooltip">
+            <span class="tooltip-icon">?</span>
+            <span class="tooltip-text">{tooltip_text}</span>
+        </div>
+    </div>
+    """
+
 # ------------------- Black & White Converter Functions ------------------- #
 def convert_to_black_white(image, threshold_value=127, method="otsu"):
     """Convert image to black and white using specified thresholding method"""
@@ -188,412 +338,178 @@ def sketch_video(video, intensity, blur_ksize, sigma):
     else:
         raise gr.Error(message)
 
-# Tooltips and Help Text
-TOOLTIPS = {
-    "otsu": "Otsu's method automatically determines the optimal threshold value by minimizing variance between black and white pixels.",
-    "adaptive": "Adaptive thresholding calculates different thresholds for different regions of the image, useful for images with varying lighting.",
-    "manual": "Manually set a threshold value between 0-255. Lower values create more white pixels, higher values create more black pixels.",
-    "intensity": "Controls the contrast of the sketch. Higher values create darker lines.",
-    "blur": "Controls the smoothness of the sketch. Higher values create softer, more blended lines.",
-    "sigma": "Controls the edge detection sensitivity. Higher values detect finer details."
-}
-
 # ------------------- Create Gradio Interface ------------------- #
 def create_interface():
-    # Custom CSS for better UI
-    css = """
-    /* Global styles */
-    body {
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    }
-    
-    /* Improved container styling */
-    .container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 20px;
-    }
-    
-    /* Card styling */
-    .gr-box, .gr-card {
-        border-radius: 12px !important;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
-        padding: 18px !important;
-        margin: 12px 0 !important;
-        background-color: #ffffff;
-        border: 1px solid #eaeaea;
-    }
-    
-    /* Tab styling */
-    .tabs {
-        margin-bottom: 16px !important;
-    }
-    
-    .tab-nav {
-        padding: 8px 16px !important;
-        font-size: 16px !important;
-        font-weight: 500 !important;
-    }
-    
-    /* Button styling */
-    button.primary {
-        background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
-        border-radius: 8px !important;
-        font-weight: 600 !important;
-        padding: 10px 20px !important;
-        border: none !important;
-        color: white !important;
-        box-shadow: 0 4px 6px rgba(99, 102, 241, 0.25) !important;
-        transition: all 0.3s ease !important;
-    }
-    
-    button.primary:hover {
-        box-shadow: 0 6px 10px rgba(99, 102, 241, 0.35) !important;
-        transform: translateY(-1px) !important;
-    }
-    
-    /* Slider styling */
-    .gr-slider {
-        height: 8px !important;
-    }
-    
-    /* Radio button styling */
-    .gr-radio {
-        padding: 12px 0 !important;
-    }
-    
-    /* Label styling */
-    label {
-        font-size: 15px !important;
-        font-weight: 500 !important;
-        margin-bottom: 6px !important;
-        color: #333 !important;
-    }
-    
-    /* Tooltip styling */
-    .tooltip {
-        position: relative;
-        display: inline-block;
-        margin-left: 6px;
-    }
-    
-    .tooltip-icon {
-        color: #6b7280;
-        font-size: 16px;
-        cursor: pointer;
-    }
-    
-    .tooltip-text {
-        visibility: hidden;
-        width: 220px;
-        background-color: #374151;
-        color: #fff;
-        text-align: center;
-        border-radius: 6px;
-        padding: 8px;
-        position: absolute;
-        z-index: 1;
-        bottom: 125%;
-        left: 50%;
-        margin-left: -110px;
-        opacity: 0;
-        transition: opacity 0.3s;
-        font-size: 13px;
-        pointer-events: none;
-    }
-    
-    .tooltip:hover .tooltip-text {
-        visibility: visible;
-        opacity: 1;
-    }
-    
-    /* Responsive adjustments */
-    @media (max-width: 768px) {
-        .container {
-            padding: 10px;
-        }
-        
-        .gr-box, .gr-card {
-            padding: 14px !important;
-        }
-        
-        label {
-            font-size: 14px !important;
-        }
-    }
-    """
-
-    # Helper function for tooltips
-    def create_tooltip(label, tooltip_text):
-        return f"""
-        <div style="display: flex; align-items: center;">
-            <span>{label}</span>
-            <div class="tooltip">
-                <span class="tooltip-icon">ⓘ</span>
-                <span class="tooltip-text">{tooltip_text}</span>
-            </div>
-        </div>
-        """
+    # Tooltip content
+    otsu_tooltip = "Otsu automatically determines the optimal threshold value by analyzing the image histogram."
+    adaptive_tooltip = "Adaptive thresholding calculates different thresholds for different areas of the image, useful for images with varying lighting conditions."
+    manual_tooltip = "Manual threshold lets you set a specific brightness cutoff point between black and white pixels."
+    intensity_tooltip = "Controls the strength of the pencil sketch effect. Higher values create more contrast."
+    blur_tooltip = "Controls how much the image is blurred. Higher values create a softer sketch effect."
+    sigma_tooltip = "Controls the standard deviation of the Gaussian blur. Higher values increase the blurring effect."
 
     # Black and White Image Interface
-    with gr.Blocks(title="Image Processor", css=css) as app:
-        gr.Markdown(
-            """
+    with gr.Blocks(title="Image Processor", css=custom_css, theme=gr.themes.Base()) as app:
+        with gr.Row(elem_classes="container"):
+            gr.Markdown("""
             # Image and Video Processor
-            ### Transform your media with Black & White and Pencil Sketch effects
-            """, 
-            elem_classes=["container"]
-        )
+            Transform your media with professional black & white conversion and pencil sketch effects
+            """)
 
         with gr.Tabs() as tabs:
-            with gr.TabItem("Black & White Converter", id="bw-tab"):
+            with gr.TabItem("Black & White Converter", elem_classes="app-card"):
                 with gr.Tabs() as bw_tabs:
-                    with gr.TabItem("Image Processing", id="bw-image-tab"):
+                    with gr.TabItem("Image Processing"):
                         with gr.Row(equal_height=True):
                             with gr.Column(scale=1):
-                                bw_image_input = gr.Image(
-                                    label="Upload Image", 
-                                    elem_id="bw-input",
-                                    height=300
-                                )
+                                bw_image_input = gr.Image(label="Input Image", elem_classes="input-image")
                                 
                                 with gr.Group():
+                                    gr.HTML(create_tooltip("Thresholding Method", otsu_tooltip))
                                     bw_method = gr.Radio(
                                         choices=["otsu", "adaptive", "manual"],
                                         value="otsu",
                                         label="",
-                                        elem_id="bw-method"
+                                        elem_classes="radio-group"
                                     )
                                     
-                                    gr.HTML(create_tooltip("Thresholding Method", "Choose how the image will be converted to black and white"))
+                                    gr.HTML(create_tooltip("Manual Threshold Value", manual_tooltip))
+                                    bw_threshold = gr.Slider(
+                                        minimum=0,
+                                        maximum=255,
+                                        value=127,
+                                        step=1,
+                                        label="",
+                                        interactive=True,
+                                        elem_classes="slider-label"
+                                    )
                                     
-                                    with gr.Row(visible=False) as threshold_row:
-                                        bw_threshold = gr.Slider(
-                                            minimum=0,
-                                            maximum=255,
-                                            value=127,
-                                            step=1,
-                                            label="Manual Threshold",
-                                            elem_id="bw-threshold",
-                                            interactive=True
-                                        )
-                                        
-                                        gr.HTML(create_tooltip("", TOOLTIPS["manual"]))
-                                
-                                bw_image_btn = gr.Button(
-                                    "Convert to Black & White", 
-                                    variant="primary", 
-                                    elem_id="bw-convert-btn"
-                                )
+                                bw_image_btn = gr.Button("Convert", elem_classes="primary")
 
                             with gr.Column(scale=1):
-                                bw_image_output = gr.Image(
-                                    label="Processed Image", 
-                                    elem_id="bw-output",
-                                    height=300
-                                )
-                                
-                                with gr.Accordion("About Black & White Conversion", open=False):
-                                    gr.Markdown("""
-                                    ### How it works
-                                    
-                                    Black & white conversion transforms your image into pure black and white pixels using thresholding.
-                                    
-                                    - **Otsu Method**: Automatically finds the optimal threshold value
-                                    - **Adaptive Method**: Uses different thresholds for different areas of the image
-                                    - **Manual Threshold**: You control the threshold value between black and white
-                                    """)
+                                bw_image_output = gr.Image(label="Processed Image")
 
-                    with gr.TabItem("Video Processing", id="bw-video-tab"):
+                    with gr.TabItem("Video Processing"):
                         with gr.Row(equal_height=True):
                             with gr.Column(scale=1):
-                                bw_video_input = gr.Video(
-                                    label="Upload Video", 
-                                    elem_id="bw-video-input",
-                                    height=300
-                                )
+                                bw_video_input = gr.Video(label="Input Video")
                                 
                                 with gr.Group():
+                                    gr.HTML(create_tooltip("Thresholding Method", otsu_tooltip))
                                     bw_video_method = gr.Radio(
                                         choices=["otsu", "adaptive", "manual"],
                                         value="otsu",
                                         label="",
-                                        elem_id="bw-video-method"
+                                        elem_classes="radio-group"
                                     )
                                     
-                                    gr.HTML(create_tooltip("Thresholding Method", "Choose how the video will be converted to black and white"))
+                                    gr.HTML(create_tooltip("Manual Threshold Value", manual_tooltip))
+                                    bw_video_threshold = gr.Slider(
+                                        minimum=0,
+                                        maximum=255,
+                                        value=127,
+                                        step=1,
+                                        label="",
+                                        interactive=True,
+                                        elem_classes="slider-label"
+                                    )
                                     
-                                    with gr.Row(visible=False) as video_threshold_row:
-                                        bw_video_threshold = gr.Slider(
-                                            minimum=0,
-                                            maximum=255,
-                                            value=127,
-                                            step=1,
-                                            label="Manual Threshold",
-                                            elem_id="bw-video-threshold",
-                                            interactive=True
-                                        )
-                                        
-                                        gr.HTML(create_tooltip("", TOOLTIPS["manual"]))
-                                
-                                bw_video_btn = gr.Button(
-                                    "Convert to Black & White", 
-                                    variant="primary", 
-                                    elem_id="bw-video-convert-btn"
-                                )
+                                bw_video_btn = gr.Button("Convert", elem_classes="primary")
 
                             with gr.Column(scale=1):
-                                bw_video_output = gr.Video(
-                                    label="Processed Video", 
-                                    elem_id="bw-video-output",
-                                    height=300
-                                )
+                                bw_video_output = gr.Video(label="Processed Video")
 
-            with gr.TabItem("Pencil Sketch Converter", id="sketch-tab"):
+            with gr.TabItem("Pencil Sketch Converter", elem_classes="app-card"):
                 with gr.Tabs() as sketch_tabs:
-                    with gr.TabItem("Image Processing", id="sketch-image-tab"):
+                    with gr.TabItem("Image Processing"):
                         with gr.Row(equal_height=True):
                             with gr.Column(scale=1):
-                                sketch_image_input = gr.Image(
-                                    label="Upload Image", 
-                                    elem_id="sketch-input",
-                                    height=300
-                                )
+                                sketch_image_input = gr.Image(label="Input Image")
                                 
                                 with gr.Group():
-                                    with gr.Row():
-                                        with gr.Column(scale=4):
-                                            sketch_intensity = gr.Slider(
-                                                minimum=1,
-                                                maximum=255,
-                                                value=255,
-                                                step=1,
-                                                label="Intensity",
-                                                elem_id="sketch-intensity"
-                                            )
-                                        
-                                        with gr.Column(scale=1):
-                                            gr.HTML(create_tooltip("", TOOLTIPS["intensity"]))
+                                    gr.HTML(create_tooltip("Intensity", intensity_tooltip))
+                                    sketch_intensity = gr.Slider(
+                                        minimum=1,
+                                        maximum=255,
+                                        value=255,
+                                        step=1,
+                                        label="",
+                                        elem_classes="slider-label"
+                                    )
                                     
-                                    with gr.Row():
-                                        with gr.Column(scale=4):
-                                            sketch_blur = gr.Slider(
-                                                minimum=1,
-                                                maximum=99,
-                                                value=21,
-                                                step=2,
-                                                label="Blur Amount",
-                                                elem_id="sketch-blur"
-                                            )
-                                        
-                                        with gr.Column(scale=1):
-                                            gr.HTML(create_tooltip("", TOOLTIPS["blur"]))
+                                    gr.HTML(create_tooltip("Blur Kernel Size", blur_tooltip))
+                                    sketch_blur = gr.Slider(
+                                        minimum=1,
+                                        maximum=99,
+                                        value=21,
+                                        step=2,
+                                        label="",
+                                        elem_classes="slider-label"
+                                    )
                                     
-                                    with gr.Row():
-                                        with gr.Column(scale=4):
-                                            sketch_sigma = gr.Slider(
-                                                minimum=0,
-                                                maximum=50,
-                                                value=0,
-                                                step=0.1,
-                                                label="Detail Level",
-                                                elem_id="sketch-sigma"
-                                            )
-                                        
-                                        with gr.Column(scale=1):
-                                            gr.HTML(create_tooltip("", TOOLTIPS["sigma"]))
-                                
-                                sketch_image_btn = gr.Button(
-                                    "Convert to Pencil Sketch", 
-                                    variant="primary", 
-                                    elem_id="sketch-convert-btn"
-                                )
+                                    gr.HTML(create_tooltip("Standard Deviation", sigma_tooltip))
+                                    sketch_sigma = gr.Slider(
+                                        minimum=0,
+                                        maximum=50,
+                                        value=0,
+                                        step=0.1,
+                                        label="",
+                                        elem_classes="slider-label"
+                                    )
+                                    
+                                sketch_image_btn = gr.Button("Convert", elem_classes="primary")
 
                             with gr.Column(scale=1):
-                                sketch_image_output = gr.Image(
-                                    label="Processed Image", 
-                                    elem_id="sketch-output",
-                                    height=300
-                                )
-                                
-                                with gr.Accordion("About Pencil Sketch", open=False):
-                                    gr.Markdown("""
-                                    ### How Pencil Sketch Works
-                                    
-                                    The pencil sketch effect creates a hand-drawn look by:
-                                    
-                                    1. Converting the image to grayscale
-                                    2. Inverting the colors
-                                    3. Applying Gaussian blur
-                                    4. Combining the original grayscale with the blurred inverted image
-                                    
-                                    Adjust the sliders to get different artistic effects!
-                                    """)
+                                sketch_image_output = gr.Image(label="Processed Image")
 
-                    with gr.TabItem("Video Processing", id="sketch-video-tab"):
+                    with gr.TabItem("Video Processing"):
                         with gr.Row(equal_height=True):
                             with gr.Column(scale=1):
-                                sketch_video_input = gr.Video(
-                                    label="Upload Video", 
-                                    elem_id="sketch-video-input",
-                                    height=300
-                                )
+                                sketch_video_input = gr.Video(label="Input Video")
                                 
                                 with gr.Group():
-                                    with gr.Row():
-                                        with gr.Column(scale=4):
-                                            sketch_video_intensity = gr.Slider(
-                                                minimum=1,
-                                                maximum=255,
-                                                value=255,
-                                                step=1,
-                                                label="Intensity",
-                                                elem_id="sketch-video-intensity"
-                                            )
-                                        
-                                        with gr.Column(scale=1):
-                                            gr.HTML(create_tooltip("", TOOLTIPS["intensity"]))
+                                    gr.HTML(create_tooltip("Intensity", intensity_tooltip))
+                                    sketch_video_intensity = gr.Slider(
+                                        minimum=1,
+                                        maximum=255,
+                                        value=255,
+                                        step=1,
+                                        label="",
+                                        elem_classes="slider-label"
+                                    )
                                     
-                                    with gr.Row():
-                                        with gr.Column(scale=4):
-                                            sketch_video_blur = gr.Slider(
-                                                minimum=1,
-                                                maximum=99,
-                                                value=21,
-                                                step=2,
-                                                label="Blur Amount",
-                                                elem_id="sketch-video-blur"
-                                            )
-                                        
-                                        with gr.Column(scale=1):
-                                            gr.HTML(create_tooltip("", TOOLTIPS["blur"]))
+                                    gr.HTML(create_tooltip("Blur Kernel Size", blur_tooltip))
+                                    sketch_video_blur = gr.Slider(
+                                        minimum=1,
+                                        maximum=99,
+                                        value=21,
+                                        step=2,
+                                        label="",
+                                        elem_classes="slider-label"
+                                    )
                                     
-                                    with gr.Row():
-                                        with gr.Column(scale=4):
-                                            sketch_video_sigma = gr.Slider(
-                                                minimum=0,
-                                                maximum=50,
-                                                value=0,
-                                                step=0.1,
-                                                label="Detail Level",
-                                                elem_id="sketch-video-sigma"
-                                            )
-                                        
-                                        with gr.Column(scale=1):
-                                            gr.HTML(create_tooltip("", TOOLTIPS["sigma"]))
-                                
-                                sketch_video_btn = gr.Button(
-                                    "Convert to Pencil Sketch", 
-                                    variant="primary", 
-                                    elem_id="sketch-video-convert-btn"
-                                )
+                                    gr.HTML(create_tooltip("Standard Deviation", sigma_tooltip))
+                                    sketch_video_sigma = gr.Slider(
+                                        minimum=0,
+                                        maximum=50,
+                                        value=0,
+                                        step=0.1,
+                                        label="",
+                                        elem_classes="slider-label"
+                                    )
+                                    
+                                sketch_video_btn = gr.Button("Convert", elem_classes="primary")
 
                             with gr.Column(scale=1):
-                                sketch_video_output = gr.Video(
-                                    label="Processed Video", 
-                                    elem_id="sketch-video-output",
-                                    height=300
-                                )
+                                sketch_video_output = gr.Video(label="Processed Video")
+
+        with gr.Row(elem_classes="container"):
+            gr.Markdown("""
+            ### How to use:
+            1. Upload an image or video
+            2. Adjust the settings as needed
+            3. Click the Convert button to process your media
+            """)
 
         # Set up event listeners
         bw_image_btn.click(
@@ -620,22 +536,6 @@ def create_interface():
             outputs=sketch_video_output
         )
 
-        # Show/hide threshold slider based on method selection
-        def update_threshold_visibility(method):
-            return gr.update(visible=(method == "manual"))
-        
-        bw_method.change(
-            fn=update_threshold_visibility,
-            inputs=bw_method,
-            outputs=threshold_row
-        )
-        
-        bw_video_method.change(
-            fn=update_threshold_visibility,
-            inputs=bw_video_method,
-            outputs=video_threshold_row
-        )
-
         # Make blur slider always odd
         def update_blur(value):
             return value if value % 2 == 1 else value + 1
@@ -643,15 +543,12 @@ def create_interface():
         sketch_blur.change(update_blur, sketch_blur, sketch_blur)
         sketch_video_blur.change(update_blur, sketch_video_blur, sketch_video_blur)
 
-        # Add tooltips for thresholding methods
-        def update_method_info(method):
-            return gr.update(value=create_tooltip("Thresholding Method", TOOLTIPS[method]))
+        # Add visibility toggle based on method selection
+        def update_threshold_visibility(method):
+            return gr.update(visible=(method == "manual"))
         
-        bw_method.change(
-            fn=lambda x: TOOLTIPS[x],
-            inputs=bw_method,
-            outputs=[]  # This is just for showing in the JS console for debugging
-        )
+        bw_method.change(update_threshold_visibility, bw_method, bw_threshold)
+        bw_video_method.change(update_threshold_visibility, bw_video_method, bw_video_threshold)
 
     return app