Update app.py

app.py

@@ -5,81 +5,119 @@ import numpy as np
 # Load Haar Cascade for face detection
 face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
 
-def process_image(image, operation, canny_threshold1=100, canny_threshold2=200, blur_kernel=5):
-    # Convert Gradio image (PIL) to OpenCV format (BGR)
+def process_grayscale(image):
     image = np.array(image)
     image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
-    
-    # Initialize output dictionary
-    outputs = {}
-    
-    # Perform selected operation
-    if operation == "Grayscale":
-        gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
-        outputs["Grayscale Image"] = cv2.cvtColor(gray, cv2.COLOR_GRAY2RGB)
-    
-    elif operation == "Canny Edge Detection":
-        gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
-        edges = cv2.Canny(gray, canny_threshold1, canny_threshold2)
-        outputs["Edges"] = cv2.cvtColor(edges, cv2.COLOR_GRAY2RGB)
-    
-    elif operation == "Gaussian Blur":
-        if blur_kernel % 2 == 0:
-            blur_kernel += 1  # Kernel size must be odd
-        blurred = cv2.GaussianBlur(image, (blur_kernel, blur_kernel), 0)
-        outputs["Blurred Image"] = blurred
-    
-    elif operation == "Face Detection":
-        gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
-        faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))
-        output_image = image.copy()
-        for (x, y, w, h) in faces:
-            cv2.rectangle(output_image, (x, y), (x+w, y+h), (0, 255, 0), 2)
-        outputs["Faces Detected"] = output_image
-    
-    # Convert back to RGB for Gradio display
-    for key in outputs:
-        outputs[key] = cv2.cvtColor(outputs[key], cv2.COLOR_BGR2RGB)
-    
-    return outputs
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    return cv2.cvtColor(gray, cv2.COLOR_GRAY2RGB)
+
+def process_canny(image, threshold1, threshold2):
+    image = np.array(image)
+    image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    edges = cv2.Canny(gray, threshold1, threshold2)
+    return cv2.cvtColor(edges, cv2.COLOR_GRAY2RGB)
+
+def process_blur(image, kernel_size):
+    image = np.array(image)
+    image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
+    kernel_size = int(kernel_size) | 1  # Ensure odd number
+    blurred = cv2.GaussianBlur(image, (kernel_size, kernel_size), 0)
+    return cv2.cvtColor(blurred, cv2.COLOR_BGR2RGB)
 
-# Define Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("# OpenCV Feature Demo")
-    gr.Markdown("Upload an image and select an OpenCV operation to apply.")
+def process_face_detection(image):
+    image = np.array(image)
+    image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))
+    output = image.copy()
+    for (x, y, w, h) in faces:
+        cv2.rectangle(output, (x, y), (x+w, y+h), (0, 255, 0), 2)
+    return cv2.cvtColor(output, cv2.COLOR_BGR2RGB)
+
+def process_color_space(image, color_space):
+    image = np.array(image)
+    image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
+    if color_space == "HSV":
+        output = cv2.cvtColor(image, cv2.COLOR_BGR2HSV)
+    elif color_space == "LAB":
+        output = cv2.cvtColor(image, cv2.COLOR_BGR2LAB)
+    else:
+        output = image  # Fallback to original
+    return cv2.cvtColor(output, cv2.COLOR_BGR2RGB)
+
+# Custom CSS with Tailwind via CDN
+custom_css = """
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+<style>
+    body { @apply bg-gray-100 font-sans; }
+    .gradio-container { @apply max-w-7xl mx-auto p-4; }
+    .tab-button { @apply px-4 py-2 text-sm font-medium text-gray-700 bg-white rounded-t-lg border-b-2 border-transparent hover:border-blue-500 focus:outline-none focus:border-blue-500; }
+    .tab-button-active { @apply border-blue-500 text-blue-600; }
+    .tab-content { @apply bg-white p-6 rounded-b-lg shadow-lg; }
+    .gallery img { @apply rounded-lg shadow-md; }
+    .btn-primary { @apply bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition; }
+    h1 { @apply text-3xl font-bold text-gray-800 mb-4; }
+    .input-label { @apply text-sm font-medium text-gray-600 mb-2; }
+</style>
+"""
+
+# Gradio interface
+with gr.Blocks(css=custom_css) as demo:
+    gr.HTML("<h1 class='text-center'>OpenCV Multi-Feature Demo</h1>")
+    gr.Markdown("Upload an image and explore various OpenCV features using the tabs below.", _js="document.querySelector('.markdown').classList.add('text-center', 'text-gray-600', 'mb-4')")
     
-    with gr.Row():
-        with gr.Column():
-            image_input = gr.Image(label="Upload Image", type="pil")
-            operation = gr.Dropdown(
-                choices=["Grayscale", "Canny Edge Detection", "Gaussian Blur", "Face Detection"],
-                label="Select Operation",
-                value="Grayscale"
-            )
-            canny_threshold1 = gr.Slider(0, 500, value=100, step=10, label="Canny Threshold 1", visible=False)
-            canny_threshold2 = gr.Slider(0, 500, value=200, step=10, label="Canny Threshold 2", visible=False)
-            blur_kernel = gr.Slider(3, 21, value=5, step=2, label="Blur Kernel Size", visible=False)
-            
-            # Show/hide sliders based on operation
-            def update_sliders(op):
-                if op == "Canny Edge Detection":
-                    return gr.update(visible=True), gr.update(visible=True), gr.update(visible=False)
-                elif op == "Gaussian Blur":
-                    return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
-                else:
-                    return gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)
-            
-            operation.change(update_sliders, inputs=operation, outputs=[canny_threshold1, canny_threshold2, blur_kernel])
-        
-        with gr.Column():
-            output = gr.Gallery(label="Processed Image")
+    image_input = gr.Image(label="Upload Image", type="pil")
     
-    submit_button = gr.Button("Process Image")
-    submit_button.click(
-        fn=process_image,
-        inputs=[image_input, operation, canny_threshold1, canny_threshold2, blur_kernel],
-        outputs=output
-    )
+    with gr.Tabs():
+        with gr.TabItem("Grayscale", elem_classes="tab-button"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("Convert the image to grayscale.", _js="document.querySelector('.markdown').classList.add('input-label')")
+                    grayscale_button = gr.Button("Apply Grayscale", elem_classes="btn-primary")
+                with gr.Column():
+                    grayscale_output = gr.Image(label="Grayscale Result")
+            grayscale_button.click(fn=process_grayscale, inputs=image_input, outputs=grayscale_output)
+        
+        with gr.TabItem("Canny Edge Detection", elem_classes="tab-button"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("Detect edges with adjustable thresholds.", _js="document.querySelector('.markdown').classList.add('input-label')")
+                    canny_t1 = gr.Slider(0, 500, value=100, step=10, label="Threshold 1")
+                    canny_t2 = gr.Slider(0, 500, value=200, step=10, label="Threshold 2")
+                    canny_button = gr.Button("Apply Canny", elem_classes="btn-primary")
+                with gr.Column():
+                    canny_output = gr.Image(label="Edges")
+            canny_button.click(fn=process_canny, inputs=[image_input, canny_t1, canny_t2], outputs=canny_output)
+        
+        with gr.TabItem("Gaussian Blur", elem_classes="tab-button"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("Apply Gaussian blur with adjustable kernel size.", _js="document.querySelector('.markdown').classList.add('input-label')")
+                    blur_kernel = gr.Slider(3, 21, value=5, step=2, label="Kernel Size")
+                    blur_button = gr.Button("Apply Blur", elem_classes="btn-primary")
+                with gr.Column():
+                    blur_output = gr.Image(label="Blurred Image")
+            blur_button.click(fn=process_blur, inputs=[image_input, blur_kernel], outputs=blur_output)
+        
+        with gr.TabItem("Face Detection", elem_classes="tab-button"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("Detect faces using Haar Cascade.", _js="document.querySelector('.markdown').classList.add('input-label')")
+                    face_button = gr.Button("Detect Faces", elem_classes="btn-primary")
+                with gr.Column():
+                    face_output = gr.Image(label="Faces Detected")
+            face_button.click(fn=process_face_detection, inputs=image_input, outputs=face_output)
+        
+        with gr.TabItem("Color Space Conversion", elem_classes="tab-button"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("Convert between RGB, HSV, and LAB color spaces.", _js="document.querySelector('.markdown').classList.add('input-label')")
+                    color_space = gr.Dropdown(choices=["RGB", "HSV", "LAB"], label="Color Space", value="RGB")
+                    color_button = gr.Button("Apply Conversion", elem_classes="btn-primary")
+                with gr.Column():
+                    color_output = gr.Image(label="Converted Image")
+            color_button.click(fn=process_color_space, inputs=[image_input, color_space], outputs=color_output)
 
 if __name__ == "__main__":
     demo.launch()