Update: background template

app.py

@@ -46,49 +46,48 @@ 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(css=".pink-bg { background-color: pink; } .orchid-green { color: #32CD32; font-weight: bold; }") as interface:
-    with gr.Box(elem_classes="orchid-green-bg"):
-        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():
-            # Left side: Sample selection and upload image
-            with gr.Column():
-                sample_selection = gr.Radio(
-                    choices=list(sample_images.keys()),
-                    label="Select a Sample Image",
-                    type="value",
-                    value=default_sample,  # Set default selection
-                )
-                # Upload image below sample selection
-                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),  
-                label="Selected Sample Image",
+with gr.Blocks(css=".orchid-green-bg { background-color: #32CD32 !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():
+            sample_selection = gr.Radio(
+                choices=list(sample_images.keys()),
+                label="Select a Sample Image",
+                type="value",
+                value=default_sample,  # Set default selection
             )
-        
-        sample_selection.change(
-            fn=load_sample_image,
-            inputs=sample_selection,
-            outputs=sample_display,
+            # Upload image below sample selection
+            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),  
+            label="Selected Sample Image",
         )
+    
+    sample_selection.change(
+        fn=load_sample_image,
+        inputs=sample_selection,
+        outputs=sample_display,
+    )
 
-        selected_models = gr.CheckboxGroup(
-            choices=["yolov5", "yolov8s"],
-            value=["yolov5"],
-            label="Select Model(s)",
-        )
-        result_gallery = gr.Gallery(label="Results", elem_id="gallery", rows=2, height=500)
+    selected_models = gr.CheckboxGroup(
+        choices=["yolov5", "yolov8s"],
+        value=["yolov5"],
+        label="Select Model(s)",
+    )
+    result_gallery = gr.Gallery(label="Results", elem_id="gallery", rows=2, height=500)
 
-        gr.Button("Run").click(
-            fn=process_image,
-            inputs=[sample_selection, upload_image, selected_models],  # Include both options
-            outputs=result_gallery,
-        )
+    gr.Button("Run").click(
+        fn=process_image,
+        inputs=[sample_selection, upload_image, selected_models],  # Include both options
+        outputs=result_gallery,
+    )
 
 interface.launch(share=True)