Update: revert -12

app.py

@@ -11,7 +11,6 @@ sample_images = {
     "Sample 1": os.path.join(os.getcwd(), "data/xai/sample1.jpeg"),
     "Sample 2":  os.path.join(os.getcwd(), "data/xai/sample2.jpg"),
 }
-
 def load_sample_image(sample_name):
     image_path = sample_images.get(sample_name)
     if image_path and os.path.exists(image_path):
@@ -27,6 +26,7 @@ def load_sample_image(choice):
     else:
         raise ValueError("Invalid sample selection.")
 
+
 def process_image(sample_choice, uploaded_image, yolo_versions=["yolov5"]):
     print(sample_choice, upload_image)
     if uploaded_image is not None:
@@ -46,72 +46,10 @@ def process_image(sample_choice, uploaded_image, yolo_versions=["yolov5"]):
             result_images.append((Image.fromarray(image), f"{yolo_version} not yet implemented."))
     return result_images
 
-with gr.Blocks() as interface:
-    # Update CSS to make text white and set dark mode
-    gr.HTML("""
-    <style>
-        body {
-            background-color: #FFFFFF;
-            color: #D3D3D3;  /* Set the default text color to light grey */
-            margin: 0;  /* Remove default body margin */
-            padding: 0;  /* Remove default body padding */
-        }
-        .gradio-container {
-            color: #D3D3D3;  /* Ensure Gradio components also have light grey text */
-            margin: 0;  /* Remove default body margin */
-            padding: 0;  /* Remove default body padding */
-        }
-        h1, h2, h3, h4, h5, h6 {
-            color: #FFFFFF !important; /* Force all headings, paragraphs, and labels to white */
-            margin: 0;  /* Remove default body margin */
-            padding: 0;  /* Remove default body padding */
-        }
-        .gr-markdown {
-            color: #D3D3D3 !important; /* Ensure Markdown text is white */
-        }
-        .gr-button {
-            background-color: #007bff; /* Optional: Change button background color */
-            color: #D3D3D3; /* Ensure button text is light grey */
-        }
-        .gr-button:hover {
-            background-color: #0056b3; /* Optional: Change button hover color */
-        }
-    </style>   
-    """)
-
-    # with gr.Blocks() as interface:
-    # # Update CSS to make text light grey
-    # gr.HTML("""
-    # <style>
-    #     body {
-    #         background-color: black;
-    #         color: #D3D3D3;  /* Set the default text color to light grey */
-    #     }
-    #     .gradio-container {
-    #         color: #D3D3D3;  /* Ensure Gradio components also have light grey text */
-    #     }
-    #     h1, h2, h3, h4, h5, h6, p, label {
-    #         color: #FFFFFF; /* Make all headings and labels light grey */
-    #     }
-    #     .gr-markdown {
-    #         color: #FFFFFF; /* Ensure Markdown text is light grey */
-    #     }
-    #     .gr-button {
-    #         background-color: #007bff; /* Optional: Change button background color */
-    #         color: #D3D3D3; /* Ensure button text is light grey */
-    #     }
-    #     .gr-button:hover {
-    #         background-color: #0056b3; /* Optional: Change button hover color */
-    #     }
-    # </style>   
-    # """)
-    
-    
-    gr.Markdown("<h1 style='color: #FFFFFF;'>XAI: Visualize Object Detection of Your Models</h1>")
-    gr.Markdown("<p style='color: #FFFFFF;'>Select a sample image to visualize object detection.</p>")
-    
+with gr.Blocks(css=".orchid-green-bg { background-color: #2f4f4f !important; padding: 20px; }") as interface:
+    gr.Markdown("# XAI: Visualize Object Detection of Your Models")
+    gr.Markdown("Select a sample image to visualize object detection.")
     default_sample = "Sample 1"
-    
     with gr.Row(elem_classes="orchid-green-bg"):
         # Left side: Sample selection and upload image
         with gr.Column():
@@ -122,12 +60,11 @@ with gr.Blocks() as interface:
                 value=default_sample,  # Set default selection
             )
             # Upload image below sample selection
-            gr.Markdown("<h2 style='color: #FFFFFF>Or upload your own image:</h2>")
+            gr.Markdown("**Or upload your own image:**")
             upload_image = gr.Image(
                 label="Upload an Image",
                 type="pil",  # Correct type for file path compatibility
             )
-        
         # Right side: Selected sample image display
         sample_display = gr.Image(
             value=load_sample_image(default_sample),  
@@ -145,7 +82,6 @@ with gr.Blocks() as interface:
         value=["yolov5"],
         label="Select Model(s)",
     )
-    
     result_gallery = gr.Gallery(label="Results", elem_id="gallery", rows=2, height=500)
 
     gr.Button("Run").click(
@@ -154,4 +90,4 @@ with gr.Blocks() as interface:
         outputs=result_gallery,
     )
 
-interface.launch(share=True)
+interface.launch(share=True)