feat: enhance UI with image dimensions and accordion legend

- Added height and width attributes to image components for better layout control.
- Moved the legend image into an accordion section for improved organization and visibility.

.gitignore

@@ -2,3 +2,4 @@ __pycache__/
 *.pyc
 .DS_Store
 assets/legend.png
+.venv/

app.py

@@ -274,6 +274,8 @@ with gr.Blocks() as demo:
                 type="pil",
                 sources=["upload", "clipboard"],
                 elem_classes=["contain"],
+                height=576,
+                width=384,
             )
             run_button = gr.Button("Run", variant="primary", size="lg")
 
@@ -285,6 +287,15 @@ with gr.Blocks() as demo:
                     label="Examples",
                 )
 
+            # Legend below examples
+            with gr.Accordion("Label Legend", open=True):
+                gr.Image(
+                    value=legend_path,
+                    label=None,
+                    show_label=False,
+                    interactive=False,
+                )
+
         # Right column: Results
         with gr.Column(scale=1):
             result_image = gr.Image(
@@ -292,23 +303,18 @@ with gr.Blocks() as demo:
                 type="pil",
                 interactive=False,
                 elem_classes=["contain"],
+                height=576,
+                width=384,
             )
             mask_image = gr.Image(
                 label="Segmentation Mask",
                 type="pil",
                 interactive=False,
                 elem_classes=["contain"],
+                height=576,
+                width=384,
             )
 
-    # Legend in accordion
-    with gr.Accordion("Label Legend", open=True):
-        gr.Image(
-            value=legend_path,
-            label=None,
-            show_label=False,
-            interactive=False,
-        )
-
     # Event handler
     run_button.click(
         fn=segment,