Restructure layout: align example images below corresponding input fields

app.py

@@ -288,7 +288,11 @@ with gr.Blocks(title="YOURMIRROR.IO - SM4LL-VTON Demo") as demo:
     IMG_SIZE = 256
 
     with gr.Row():
-        # Left column → inputs stacked vertically
+        # Left spacer column
+        with gr.Column(scale=1):
+            pass
+        
+        # Base image column
         with gr.Column(scale=1):
             base_in = gr.Image(
                 label="Base Image",
@@ -296,86 +300,85 @@ with gr.Blocks(title="YOURMIRROR.IO - SM4LL-VTON Demo") as demo:
                 height=IMG_SIZE,
                 width=IMG_SIZE,
             )
-            garment_in = gr.Image(
-                label="Product Image",
-                type="pil",
-                height=IMG_SIZE,
-                width=IMG_SIZE,
-            )
-
-        # Centre column → result image (larger)
-        with gr.Column(scale=2):
-            result_out = gr.Image(
-                label="Result",
-                height=512,
-                width=512,
-            )
-
-        # Right column → workflow selector and Generate button
-        with gr.Column(scale=1, elem_classes="control-column"):
-            workflow_selector = gr.Radio(
-                choices=[
-                    ("Eyewear", "eyewear"),
-                    ("Footwear", "footwear"),
-                    ("Full-Body Garment", "dress"),
-                ],
-                value="eyewear",
-                label="Model",
-            )
-            generate_btn = gr.Button("Generate", variant="primary", size="lg")
-
-    # Example images section
-    with gr.Row():
-        with gr.Column():
+            # Base image examples directly below
             gr.Markdown("### base image examples")
             with gr.Row():
                 base_example_1 = gr.Image(
                     value="assets/base_image-1.jpg",
                     interactive=False,
-                    height=150,
-                    width=150,
+                    height=120,
+                    width=120,
                     show_label=False,
                 )
                 base_example_2 = gr.Image(
                     value="assets/base_image-2.jpg",
                     interactive=False,
-                    height=150,
-                    width=150,
+                    height=120,
+                    width=120,
                     show_label=False,
                 )
                 base_example_3 = gr.Image(
                     value="assets/base_image-3.jpg",
                     interactive=False,
-                    height=150,
-                    width=150,
+                    height=120,
+                    width=120,
                     show_label=False,
                 )
-        
-        with gr.Column():
+
+        # Product image column
+        with gr.Column(scale=1):
+            garment_in = gr.Image(
+                label="Product Image",
+                type="pil",
+                height=IMG_SIZE,
+                width=IMG_SIZE,
+            )
+            # Product image examples directly below
             gr.Markdown("### product examples")
             with gr.Row():
                 product_example_1 = gr.Image(
                     value="assets/product_image-1.jpg",
                     interactive=False,
-                    height=150,
-                    width=150,
+                    height=120,
+                    width=120,
                     show_label=False,
                 )
                 product_example_2 = gr.Image(
                     value="assets/product_image-2.jpg",
                     interactive=False,
-                    height=150,
-                    width=150,
+                    height=120,
+                    width=120,
                     show_label=False,
                 )
                 product_example_3 = gr.Image(
                     value="assets/product_image-3.jpg",
                     interactive=False,
-                    height=150,
-                    width=150,
+                    height=120,
+                    width=120,
                     show_label=False,
                 )
 
+        # Result column
+        with gr.Column(scale=2):
+            result_out = gr.Image(
+                label="Result",
+                height=512,
+                width=512,
+            )
+
+        # Controls column
+        with gr.Column(scale=1):
+            workflow_selector = gr.Radio(
+                choices=[
+                    ("Eyewear", "eyewear"),
+                    ("Footwear", "footwear"),
+                    ("Full-Body Garment", "dress"),
+                ],
+                value="eyewear",
+                label="Model",
+            )
+            generate_btn = gr.Button("Generate", variant="primary", size="lg")
+
     # Wire up interaction
     generate_btn.click(
         generate,