Update app.py

app.py

@@ -4,200 +4,554 @@ 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 = """
+
+custom\_css = """
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
+max-width: 1200px;
+margin: 0 auto;
 }
-/* Main styling */
+/\* Main styling */
 .gradio-container {
-    font-family: 'Roboto', 'Segoe UI', sans-serif;
-    color: #f0f0f0;
+font-family: 'Roboto', 'Segoe UI', sans-serif;
+color: white;
 }
 /* Card styling */
 .app-card {
-    border-radius: 16px;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-    padding: 24px;
-    background: linear-gradient(145deg, #2b2f3a, #1f2229);
-    margin-bottom: 24px;
+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: 800 !important;
-    color: #ffffff !important;
+font-weight: 700 !important;
+color: white !important;
 }
 /* Labels styling */
 label, .label {
-    font-size: 1rem !important;
-    font-weight: 600 !important;
-    color: #d1d1d1 !important;
-    margin-bottom: 8px !important;
+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, #ff7e5f, #feb47b) !important;
-    color: #ffffff !important;
-    font-weight: 700 !important;
-    border-radius: 12px !important;
-    padding: 14px 28px !important;
-    font-size: 1.1rem !important;
-    transition: all 0.3s ease !important;
-    border: none !important;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 12px rgba(255, 126, 95, 0.4) !important;
+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), 0 0 10px rgba(52, 152, 219, 0.4) !important;
 }
-button.primary:hover {
-    background: linear-gradient(135deg, #feb47b, #ff7e5f) !important;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), 0 0 18px rgba(254, 180, 123, 0.6) !important;
-    transform: translateY(-2px) !important;
+button.primary\:hover {
+background: linear-gradient(135deg, #2980b9, #2573a7) !important;
+box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 0 15px rgba(52, 152, 219, 0.6) !important;
+transform: translateY(-2px) !important;
 }
-/* Slider styling */
-.slider-label {
-    font-weight: 600 !important;
-    color: #d1d1d1 !important;
-    font-size: 0.95rem !important;
+/* Radio buttons */
+.radio-group label {
+font-weight: 600 !important;
+color: white !important;
 }
-/* Tabs styling */
+/* Tab styling */
 .tab-nav {
-    font-weight: 700 !important;
-    font-size: 1.05rem !important;
-    color: #ffffff !important;
+font-weight: 600 !important;
+font-size: 1.05rem !important;
 }
-/* Responsive adjustments */
+/* Responsive adjustments \*/
 @media (max-width: 768px) {
-    .gradio-container {
-        padding: 12px !important;
-    }
-    button.primary {
-        padding: 12px 20px !important;
-        font-size: 1rem !important;
-    }
+.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)
 
-# ------------------- Image Processing Functions ------------------- #
-def convert_to_black_white(image, threshold_value=127, method="otsu"):
-    if len(image.shape) == 3:
-        gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
-    else:
-        gray = image
-
-    if method == "adaptive":
-        return cv2.adaptiveThreshold(gray, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C,
-                                     cv2.THRESH_BINARY, 11, 2)
-    elif method == "otsu":
-        _, binary = cv2.threshold(gray, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
-        return binary
-    else:
-        _, binary = cv2.threshold(gray, threshold_value, 255, cv2.THRESH_BINARY)
-        return binary
-
-
-def pencil_sketch(image, intensity=255, blur_ksize=21, sigma=0):
-    if len(image.shape) == 3:
-        gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
-    else:
-        gray = image
-    inverted = cv2.bitwise_not(gray)
-    blur_ksize = blur_ksize if blur_ksize % 2 == 1 else blur_ksize + 1
-    blurred = cv2.GaussianBlur(inverted, (blur_ksize, blur_ksize), sigma)
-    sketch = cv2.divide(gray, cv2.bitwise_not(blurred), scale=intensity)
-    return sketch
-
-# ------------------- Video Processing ------------------- #
-def process_video(func, video_path, is_color, *args):
-    if not os.path.exists(video_path):
-        return None, "File not found"
+# ------------------- Theme Setup -------------------
+
+def create\_custom\_theme():
+"""Create a custom dark theme for the interface"""
+return gr.themes.Base().set(
+body\_background\_fill="linear-gradient(to bottom right, #1a1f2c, #121620)",
+body\_background\_fill\_dark="linear-gradient(to bottom right, #1a1f2c, #121620)",
+body\_text\_color="white",
+body\_text\_color\_dark="white",
+button\_primary\_background\_fill="linear-gradient(135deg, #3498db, #2980b9)",
+button\_primary\_background\_fill\_hover="linear-gradient(135deg, #2980b9, #2573a7)",
+button\_primary\_text\_color="white",
+button\_primary\_text\_color\_dark="white",
+button\_primary\_border\_color="transparent",
+button\_primary\_border\_color\_dark="transparent",
+button\_secondary\_background\_fill="#34495e",
+button\_secondary\_background\_fill\_hover="#2c3e50",
+button\_secondary\_text\_color="white",
+button\_secondary\_text\_color\_dark="white",
+block\_title\_text\_color="white",
+block\_title\_text\_color\_dark="white",
+block\_label\_text\_color="white",
+block\_label\_text\_color\_dark="white",
+slider\_color="#3498db",
+slider\_color\_dark="#3498db",
+border\_color\_primary="#3498db",
+border\_color\_primary\_dark="#3498db",
+background\_fill\_primary="#2a3a4a",
+background\_fill\_primary\_dark="#2a3a4a",
+background\_fill\_secondary="#1e2a3a",
+background\_fill\_secondary\_dark="#1e2a3a",
+border\_radius\_size="12px",
+spacing\_md="12px",
+spacing\_lg="16px",
+text\_size="16px",
+text\_md="18px",
+text\_lg="20px",
+text\_xl="24px",
+font=\["Roboto", "ui-sans-serif", "system-ui", "sans-serif"],
+)
+
+# ------------------- 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"""
+if isinstance(image, str):
+image = cv2.imread(image)
+
+```
+# Convert to grayscale if not already
+if len(image.shape) == 3:
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+else:
+    gray = image
+
+if method == "adaptive":
+    binary = cv2.adaptiveThreshold(gray, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C,
+                                  cv2.THRESH_BINARY, 11, 2)
+elif method == "otsu":
+    _, binary = cv2.threshold(gray, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+else:
+    _, binary = cv2.threshold(gray, threshold_value, 255, cv2.THRESH_BINARY)
+
+return binary
+```
+
+def process\_image\_bw(image, threshold\_value, method):
+"""Process image with black and white thresholding"""
+if image is None:
+return None
+
+```
+# Convert to numpy array if PIL Image
+if isinstance(image, Image.Image):
+    image_np = np.array(image)
+    # Convert RGB to BGR for OpenCV
+    if len(image_np.shape) == 3:
+        image_np = cv2.cvtColor(image_np, cv2.COLOR_RGB2BGR)
+else:
+    image_np = image
+
+result = convert_to_black_white(image_np, threshold_value, method)
+return result
+```
+
+def process\_video\_bw(video\_path, threshold\_value, method):
+"""Process video with black and white thresholding"""
+if not os.path.exists(video\_path):
+return "Video file not found", None
+
+```
+try:
+    cap = cv2.VideoCapture(video_path)
+    if not cap.isOpened():
+        return "Could not open video file", None
+
+    # Get video properties
+    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
+    frame_width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    frame_height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+    fps = int(cap.get(cv2.CAP_PROP_FPS))
+
+    # Create temporary output file
+    temp_output = tempfile.NamedTemporaryFile(suffix='.mp4', delete=False)
+    output_path = temp_output.name
+    temp_output.close()
+
+    # Create video writer
+    out = cv2.VideoWriter(output_path, fourcc, fps, (frame_width, frame_height), isColor=False)
+
+    # Process each frame
+    while cap.isOpened():
+        ret, frame = cap.read()
+        if not ret:
+            break
+
+        bw_frame = convert_to_black_white(frame, threshold_value, method)
+        out.write(bw_frame)
+
+    cap.release()
+    out.release()
+
+    return "Video processed successfully", output_path
+except Exception as e:
+    return f"Error processing video: {str(e)}", None
+```
+
+# ------------------- Pencil Sketch Converter Functions -------------------
+
+def process\_image\_sketch(image, intensity=255, blur\_ksize=21, sigma=0):
+"""Convert image to pencil sketch effect"""
+if image is None:
+return None
+
+```
+# Convert to numpy array if PIL Image
+if isinstance(image, Image.Image):
+    image_np = np.array(image)
+    # Convert RGB to BGR for OpenCV
+    if len(image_np.shape) == 3:
+        image_np = cv2.cvtColor(image_np, cv2.COLOR_RGB2BGR)
+else:
+    image_np = image
+
+# Convert to grayscale
+gray = cv2.cvtColor(image_np, cv2.COLOR_BGR2GRAY) if len(image_np.shape) == 3 else image_np
+
+# Create sketch effect
+inverted = cv2.bitwise_not(gray)
+blur_ksize = blur_ksize if blur_ksize % 2 == 1 else blur_ksize + 1  # Ensure kernel size is odd
+blurred = cv2.GaussianBlur(inverted, (blur_ksize, blur_ksize), sigma)
+sketch = cv2.divide(gray, cv2.bitwise_not(blurred), scale=intensity)
+
+return sketch
+```
+
+def process\_video\_sketch(video\_path, intensity=255, blur\_ksize=21, sigma=0):
+"""Process video with pencil sketch effect"""
+if not os.path.exists(video\_path):
+return "Video file not found", None
+
+```
+try:
     cap = cv2.VideoCapture(video_path)
     if not cap.isOpened():
-        return None, "Cannot open video"
+        return "Could not open video file", None
 
+    # Get video properties
     fourcc = cv2.VideoWriter_fourcc(*'mp4v')
-    w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
-    h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
-    fps = cap.get(cv2.CAP_PROP_FPS)
-    out_file = tempfile.NamedTemporaryFile(suffix='.mp4', delete=False).name
-    out = cv2.VideoWriter(out_file, fourcc, fps, (w, h), is_color)
+    frame_width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    frame_height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+    fps = int(cap.get(cv2.CAP_PROP_FPS))
+
+    # Create temporary output file
+    temp_output = tempfile.NamedTemporaryFile(suffix='.mp4', delete=False)
+    output_path = temp_output.name
+    temp_output.close()
 
-    while True:
+    # Create video writer
+    out = cv2.VideoWriter(output_path, fourcc, fps, (frame_width, frame_height), isColor=True)
+
+    # Process each frame
+    while cap.isOpened():
         ret, frame = cap.read()
         if not ret:
             break
-        processed = func(frame, *args)
-        if not is_color:
-            out.write(processed)
-        else:
-            out.write(cv2.cvtColor(processed, cv2.COLOR_GRAY2BGR))
+
+        sketch_frame = process_image_sketch(frame, intensity, blur_ksize, sigma)
+        # Convert grayscale to BGR for video output
+        sketch_bgr = cv2.cvtColor(sketch_frame, cv2.COLOR_GRAY2BGR)
+        out.write(sketch_bgr)
+
     cap.release()
     out.release()
-    return out_file, None
 
-# ------------------- Gradio Interface ------------------- #
-def create_interface():
-    with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
+    return "Video processed successfully", output_path
+except Exception as e:
+    return f"Error processing video: {str(e)}", None
+```
+
+# ------------------- Gradio Interface Functions -------------------
+
+def black\_white\_image(image, threshold\_method, threshold\_value):
+"""Process image with black and white filter for Gradio"""
+if threshold\_method != "manual":
+threshold\_value = 0  # Not used for adaptive or Otsu
+
+```
+result = process_image_bw(image, threshold_value, threshold_method)
+return Image.fromarray(result)
+```
+
+def black\_white\_video(video, threshold\_method, threshold\_value):
+"""Process video with black and white filter for Gradio"""
+if threshold\_method != "manual":
+threshold\_value = 0  # Not used for adaptive or Otsu
+
+```
+message, output_path = process_video_bw(video, threshold_value, threshold_method)
+if output_path:
+    return output_path
+else:
+    raise gr.Error(message)
+```
+
+def sketch\_image(image, intensity, blur\_ksize, sigma):
+"""Process image with pencil sketch filter for Gradio"""
+result = process\_image\_sketch(image, intensity, blur\_ksize, sigma)
+return Image.fromarray(result)
+
+def sketch\_video(video, intensity, blur\_ksize, sigma):
+"""Process video with pencil sketch filter for Gradio"""
+message, output\_path = process\_video\_sketch(video, intensity, blur\_ksize, sigma)
+if output\_path:
+return output\_path
+else:
+raise gr.Error(message)
+
+# ------------------- Create Gradio Interface -------------------
+
+def create\_interface():
+\# 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=custom_css, theme=gr.themes.Base()) as app:
+    with gr.Row(elem_classes="container"):
         gr.Markdown("""
-        ## 🎨 Image & Video Transformer
-        Effortlessly convert your images and videos into stunning pencil sketches or crisp black & white masterpieces.
-        """, elem_classes="app-card")
-
-        with gr.Tabs():
-            with gr.TabItem("Pencil Sketch", elem_classes="app-card"):  # Default tab
-                with gr.Row():
-                    with gr.Column():
-                        inp_img = gr.Image(label="Upload Image")
-                        intensity = gr.Slider(1, 255, 255, step=1, label="Sketch Intensity", elem_classes="slider-label")
-                        blur = gr.Slider(1, 99, 21, step=2, label="Blur Kernel Size", elem_classes="slider-label")
-                        sigma = gr.Slider(0, 50, 0, step=0.1, label="Blur Sigma", elem_classes="slider-label")
-                        btn_img = gr.Button("Generate Sketch", elem_classes="primary")
-                    with gr.Column():
-                        out_img = gr.Image(label="Sketch Result")
-
-                btn_img.click(lambda img, i, b, s: Image.fromarray(pencil_sketch(np.array(img.convert('RGB'))[..., ::-1], i, b, s)),
-                              inputs=[inp_img, intensity, blur, sigma], outputs=out_img)
-
-                gr.Markdown("---")
-
-                inp_vid = gr.Video(label="Upload Video")
-                btn_vid = gr.Button("Sketch Video", elem_classes="primary")
-                out_vid = gr.Video(label="Sketch Video Result")
-                btn_vid.click(lambda v, i, b, s: process_video(pencil_sketch, v, True, i, b, s)[0],
-                              inputs=[inp_vid, intensity, blur, sigma], outputs=out_vid)
-
-            with gr.TabItem("Black & White", elem_classes="app-card"):  # Secondary tab
-                with gr.Row():
-                    with gr.Column():
-                        bw_img = gr.Image(label="Upload Image")
-                        method = gr.Radio(["otsu", "adaptive", "manual"], value="otsu", label="Threshold Method")
-                        thresh = gr.Slider(0, 255, 127, step=1, label="Manual Threshold", elem_classes="slider-label")
-                        btn_bw_img = gr.Button("Convert to B&W", elem_classes="primary")
-                    with gr.Column():
-                        out_bw_img = gr.Image(label="B&W Result")
-
-                method.change(lambda m: gr.update(visible=(m=="manual")), inputs=method, outputs=thresh)
-                btn_bw_img.click(lambda img, m, t: Image.fromarray(convert_to_black_white(np.array(img.convert('RGB'))[..., ::-1], t, m)),
-                                 inputs=[bw_img, method, thresh], outputs=out_bw_img)
-
-                gr.Markdown("---")
-
-                bw_vid = gr.Video(label="Upload Video")
-                btn_bw_vid = gr.Button("B&W Video", elem_classes="primary")
-                out_bw_vid = gr.Video(label="B&W Video Result")
-                btn_bw_vid.click(lambda v, m, t: process_video(convert_to_black_white, v, False, t, m)[0],
-                                 inputs=[bw_vid, method, thresh], outputs=out_bw_vid)
+        # Image and Video Processor
+        Transform your media with professional black & white conversion and pencil sketch effects
+        """)
+
+    with gr.Tabs(value="Pencil Sketch Converter") as tabs:
+        with gr.TabItem("Black & White Converter", elem_classes="app-card"):
+            with gr.Tabs() as bw_tabs:
+                with gr.TabItem("Image Processing"):
+                    with gr.Row(equal_height=True):
+                        with gr.Column(scale=1):
+                            bw_image_input = gr.Image(label="Input Image", elem_classes="input-image")
+                            
+                            with gr.Group():
+                                bw_method = gr.Radio(
+                                    choices=["otsu", "adaptive", "manual"],
+                                    value="otsu",
+                                    label="Thresholding Method",
+                                    info=otsu_tooltip,
+                                    elem_classes="radio-group"
+                                )
+                                
+                                bw_threshold = gr.Slider(
+                                    minimum=0,
+                                    maximum=255,
+                                    value=127,
+                                    step=1,
+                                    label="Manual Threshold Value",
+                                    info=manual_tooltip,
+                                    interactive=True,
+                                    elem_classes="slider-label"
+                                )
+                                
+                            bw_image_btn = gr.Button("Convert", elem_classes="primary")
+
+                        with gr.Column(scale=1):
+                            bw_image_output = gr.Image(label="Processed Image")
+
+                with gr.TabItem("Video Processing"):
+                    with gr.Row(equal_height=True):
+                        with gr.Column(scale=1):
+                            bw_video_input = gr.Video(label="Input Video")
+                            
+                            with gr.Group():
+                                bw_video_method = gr.Radio(
+                                    choices=["otsu", "adaptive", "manual"],
+                                    value="otsu",
+                                    label="Thresholding Method",
+                                    info=otsu_tooltip,
+                                    elem_classes="radio-group"
+                                )
+                                
+                                bw_video_threshold = gr.Slider(
+                                    minimum=0,
+                                    maximum=255,
+                                    value=127,
+                                    step=1,
+                                    label="Manual Threshold Value",
+                                    info=manual_tooltip,
+                                    interactive=True,
+                                    elem_classes="slider-label"
+                                )
+                                
+                            bw_video_btn = gr.Button("Convert", elem_classes="primary")
+
+                        with gr.Column(scale=1):
+                            bw_video_output = gr.Video(label="Processed Video")
+
+        with gr.TabItem("Pencil Sketch Converter", elem_classes="app-card"):
+            with gr.Tabs() as sketch_tabs:
+                with gr.TabItem("Image Processing"):
+                    with gr.Row(equal_height=True):
+                        with gr.Column(scale=1):
+                            sketch_image_input = gr.Image(label="Input Image")
+                            
+                            with gr.Group():
+                                sketch_intensity = gr.Slider(
+                                    minimum=1,
+                                    maximum=255,
+                                    value=255,
+                                    step=1,
+                                    label="Intensity",
+                                    info=intensity_tooltip,
+                                    elem_classes="slider-label"
+                                )
+                                
+                                sketch_blur = gr.Slider(
+                                    minimum=1,
+                                    maximum=99,
+                                    value=21,
+                                    step=2,
+                                    label="Blur Kernel Size",
+                                    info=blur_tooltip,
+                                    elem_classes="slider-label"
+                                )
+                                
+                                sketch_sigma = gr.Slider(
+                                    minimum=0,
+                                    maximum=50,
+                                    value=0,
+                                    step=0.1,
+                                    label="Standard Deviation",
+                                    info=sigma_tooltip,
+                                    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")
+
+                with gr.TabItem("Video Processing"):
+                    with gr.Row(equal_height=True):
+                        with gr.Column(scale=1):
+                            sketch_video_input = gr.Video(label="Input Video")
+                            
+                            with gr.Group():
+                                sketch_video_intensity = gr.Slider(
+                                    minimum=1,
+                                    maximum=255,
+                                    value=255,
+                                    step=1,
+                                    label="Intensity",
+                                    info=intensity_tooltip,
+                                    elem_classes="slider-label"
+                                )
+                                
+                                sketch_video_blur = gr.Slider(
+                                    minimum=1,
+                                    maximum=99,
+                                    value=21,
+                                    step=2,
+                                    label="Blur Kernel Size",
+                                    info=blur_tooltip,
+                                    elem_classes="slider-label"
+                                )
+                                
+                                sketch_video_sigma = gr.Slider(
+                                    minimum=0,
+                                    maximum=50,
+                                    value=0,
+                                    step=0.1,
+                                    label="Standard Deviation",
+                                    info=sigma_tooltip,
+                                    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")
 
+    with gr.Row(elem_classes="container"):
         gr.Markdown("""
-        **How It Works**
-        1. Choose the "Pencil Sketch" tab for sketch effects (default).
-        2. Adjust intensity, blur, and sigma to refine the look.
-        3. For black & white, switch to the "Black & White" tab.
-        4. Upload media, tweak settings, and click the button.
-        """, elem_classes="container")
-    return demo
-
-if __name__ == "__main__":
-    create_interface().launch()
+        ### 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(
+        fn=black_white_image,
+        inputs=[bw_image_input, bw_method, bw_threshold],
+        outputs=bw_image_output
+    )
+
+    bw_video_btn.click(
+        fn=black_white_video,
+        inputs=[bw_video_input, bw_video_method, bw_video_threshold],
+        outputs=bw_video_output
+    )
+
+    sketch_image_btn.click(
+        fn=sketch_image,
+        inputs=[sketch_image_input, sketch_intensity, sketch_blur, sketch_sigma],
+        outputs=sketch_image_output
+    )
+
+    sketch_video_btn.click(
+        fn=sketch_video,
+        inputs=[sketch_video_input, sketch_video_intensity, sketch_video_blur, sketch_video_sigma],
+        outputs=sketch_video_output
+    )
+
+    # Make blur slider always odd
+    def update_blur(value):
+        return value if value % 2 == 1 else value + 1
+
+    sketch_blur.change(update_blur, sketch_blur, sketch_blur)
+    sketch_video_blur.change(update_blur, sketch_video_blur, sketch_video_blur)
+
+    # Add visibility toggle based on method selection
+    def update_threshold_visibility(method):
+        return gr.update(visible=(method == "manual"))
+    
+    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
+```
+
+# ------------------- Launch App -------------------
+
+if **name** == "**main**":
+app = create\_interface()
+app.launch()