Fix: interface layout

app.py

@@ -81,7 +81,7 @@ def process_image(choice, yolo_versions=["yolov5"]):
             result_images.append((Image.fromarray(image), f"{yolo_version} not yet implemented."))
     return result_images
 
-
+"""
 import gradio as gr
 with gr.Blocks() as interface:
     gr.Markdown("# XAI: Visualize Object Detection of Your Models")
@@ -117,4 +117,41 @@ with gr.Blocks() as interface:
         outputs=result_gallery,
     )
 
+interface.launch()
+"""
+with gr.Blocks() 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():
+        sample_selection = gr.Radio(
+            choices=list(sample_images.keys()),
+            label="Select a Sample Image",
+            type="value",
+            value=default_sample,  # Set default selection
+        )
+        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,
+    )
+    gr.Markdown(" ")
+
+    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, selected_models],
+        outputs=result_gallery,
+    )
+
 interface.launch()