Update: background template

app.py

@@ -47,47 +47,48 @@ def process_image(sample_choice, uploaded_image, yolo_versions=["yolov5"]):
     return result_images
 
 with gr.Blocks(css=".pink-bg { background-color: pink; } .orchid-green { color: #32CD32; font-weight: bold; }") 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
+    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",
             )
-            # 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,
         )
-    
-    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)