Update app.py

app.py

@@ -59,13 +59,14 @@ custom_css = """
     .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; }
+    .markdown-style { @apply text-center text-gray-600 mb-4; }
 </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')")
+    gr.Markdown("Upload an image and explore various OpenCV features using the tabs below.", elem_classes=["markdown-style"])
     
     image_input = gr.Image(label="Upload Image", type="pil")
     
@@ -73,7 +74,7 @@ with gr.Blocks(css=custom_css) as demo:
         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')")
+                    gr.Markdown("Convert the image to grayscale.", elem_classes=["input-label"])
                     grayscale_button = gr.Button("Apply Grayscale", elem_classes="btn-primary")
                 with gr.Column():
                     grayscale_output = gr.Image(label="Grayscale Result")
@@ -82,7 +83,7 @@ with gr.Blocks(css=custom_css) as demo:
         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')")
+                    gr.Markdown("Detect edges with adjustable thresholds.", elem_classes=["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")
@@ -93,7 +94,7 @@ with gr.Blocks(css=custom_css) as demo:
         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')")
+                    gr.Markdown("Apply Gaussian blur with adjustable kernel size.", elem_classes=["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():
@@ -103,7 +104,7 @@ with gr.Blocks(css=custom_css) as demo:
         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')")
+                    gr.Markdown("Detect faces using Haar Cascade.", elem_classes=["input-label"])
                     face_button = gr.Button("Detect Faces", elem_classes="btn-primary")
                 with gr.Column():
                     face_output = gr.Image(label="Faces Detected")
@@ -112,7 +113,7 @@ with gr.Blocks(css=custom_css) as demo:
         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')")
+                    gr.Markdown("Convert between RGB, HSV, and LAB color spaces.", elem_classes=["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():