Fix: interface layout

app.py

@@ -84,49 +84,48 @@ def process_image(choice, yolo_versions=["yolov5"]):
 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.")
-
-    # Default sample image selection
-    default_sample = "Sample 1"
-
-    with gr.Column():  # Column layout for the image selection section
-        # Radio button with default value set
-        sample_selection = gr.Radio(
-            choices=list(sample_images.keys()),
-            label="Select a Sample Image",
-            type="value",
-            value=default_sample,  # Set default selection
-        )
-        # Display the selected or uploaded image
-        image_display = gr.Image(
-            value=load_sample_image(default_sample),  # Load default sample image
-            label="Selected/Uploaded Image",
-        )
-
-        # File upload for custom images (placed below the sample selection)
-        uploaded_image = gr.Image(type="numpy", label="Upload an Image")
-
-        # Update display when sample selection changes
-        sample_selection.change(
-            fn=load_sample_image,
-            inputs=sample_selection,
-            outputs=image_display,
-        )
-
-        uploaded_image.change(
-            fn=lambda img: img,
-            inputs=uploaded_image,
-            outputs=image_display,
-        )
-
-    # Place the "Select Model(s)" below the image selection block
-    with gr.Column():  # Column layout for model selection
-        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)
+    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",
+            )
+
+            # File upload for custom images (placed below the sample selection)
+            uploaded_image = gr.Image(type="numpy", label="Upload an Image")
+
+            # Update display when sample selection changes
+            sample_selection.change(
+                fn=load_sample_image,
+                inputs=sample_selection,
+                outputs=image_display,
+            )
+
+            # Update display when an image is uploaded
+            uploaded_image.change(
+                fn=lambda img: img,
+                inputs=uploaded_image,
+                outputs=image_display,
+            )
+
+            # Model selection below the image options
+            selected_models = gr.CheckboxGroup(
+                choices=["yolov5", "yolov8s"],
+                value=["yolov5"],
+                label="Select Model(s)",
+            )
+
+        # Right section for image display
+        with gr.Column():  
+            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(