Fix: interface layout

app.py

@@ -62,7 +62,7 @@ with gr.Blocks() as interface:
 def load_sample_image(choice):
     if choice in sample_images:
         image_path = sample_images[choice]
-        return cv2.imread(image_path)[:, :, ::-1]  # Convert BGR to RGB for display
+        return cv2.imread(image_path)[:, :, ::-1]  
     else:
         raise ValueError("Invalid sample selection.")
 
@@ -81,71 +81,39 @@ 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")
-    gr.Markdown("Select a sample image or upload your own image to visualize object detection.")
-
-    with gr.Row():  # Row layout to divide the screen into two sections
-        with gr.Column():  # Left section for image selection and upload
-            # Radio button with default value set
-            sample_selection = gr.Radio(
-                choices=list(sample_images.keys()),
-                label="Select a Sample Image",
-                type="value",
-                value="Sample 1",  # Set default selection
-            )
-            
-            # Display the selected or uploaded image
-            image_display = gr.Image(
-                value=load_sample_image("Sample 1"),  # Load default sample image
-                label="Selected/Uploaded Image",
-            )
-
-            # Buttons for each sample image to upload custom image
-            upload_button_1 = gr.File(label="Upload Image for Sample 1", file_count="single")
-            upload_button_2 = gr.File(label="Upload Image for Sample 2", file_count="single")
-            upload_button_3 = gr.File(label="Upload Image for Sample 3", file_count="single")
-
-            # When a sample is selected, update the image display accordingly
-            sample_selection.change(
-                fn=load_sample_image,
-                inputs=sample_selection,
-                outputs=image_display,
-            )
-
-            # Handle file uploads for each custom image upload button
-            upload_button_1.change(
-                fn=lambda file: cv2.imread(file.name)[:, :, ::-1] if file else None,  # Read and display uploaded image
-                inputs=upload_button_1,
-                outputs=image_display,
-            )
-            upload_button_2.change(
-                fn=lambda file: cv2.imread(file.name)[:, :, ::-1] if file else None,
-                inputs=upload_button_2,
-                outputs=image_display,
-            )
-            upload_button_3.change(
-                fn=lambda file: cv2.imread(file.name)[:, :, ::-1] if file else None,
-                inputs=upload_button_3,
-                outputs=image_display,
-            )
-
-            # Model selection below the image options
-            selected_models = gr.CheckboxGroup(
-                choices=["yolov5", "yolov8s"],
-                value=["yolov5"],
-                label="Select Model(s)",
-            )
+    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,
+    )
 
-        # Right section for image display
-        with gr.Column():  
-            # Results section now below the image selection and model selection
-            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)
 
-    # Use the uploaded image if available, otherwise the selected sample
     gr.Button("Run").click(
         fn=process_image,
-        inputs=[image_display, selected_models],
+        inputs=[sample_selection, selected_models],
         outputs=result_gallery,
     )