feat(ui): add 3-column layout with smart garment gallery

Reorganize demo UI from 2 columns to 3 columns:
- Column 1: Person image and examples
- Column 2: Garment image, category/photo type dropdowns, garment gallery
- Column 3: Result image, run button, advanced settings

Replace gr.Examples with gr.Gallery for garment examples to enable
auto-updating dropdowns when clicking a garment thumbnail. Each
example maps to its correct category and photo type settings.

User uploads no longer affect dropdown values - only gallery clicks
trigger the auto-update behavior.

.gitignore

@@ -1,5 +1,5 @@
 # Virtual environment
-.venv/
+.venv*/
 venv/
 env/
 

app.py

@@ -174,7 +174,24 @@ paired_examples = [
 
 # Individual examples (classic from repo)
 person_only_examples = [os.path.join(examples_dir, "person0.png")]
-garment_only_examples = [os.path.join(examples_dir, "garment0.png")]
+
+# Garment examples with their settings: (image_path, category, photo_type)
+# Order matters - index in Gallery corresponds to this list
+garment_examples_data = [
+    (os.path.join(examples_dir, "garment0.png"), "tops", "model"),
+    (os.path.join(examples_dir, "garment7.jpg"), "tops", "flat-lay"),
+]
+garment_gallery_images = [item[0] for item in garment_examples_data]
+
+
+def on_garment_gallery_select(evt: gr.SelectData):
+    """Handle garment gallery selection - load image and update dropdowns."""
+    idx = evt.index
+    if idx < len(garment_examples_data):
+        image_path, cat, photo_type = garment_examples_data[idx]
+        return Image.open(image_path), cat, photo_type
+    return None, "tops", "model"
+
 
 # Build UI
 with gr.Blocks(css=CUSTOM_CSS) as demo:
@@ -183,7 +200,7 @@ with gr.Blocks(css=CUSTOM_CSS) as demo:
     gr.HTML(tips_html)
 
     with gr.Row(equal_height=False):
-        # Left column: Inputs
+        # Column 1: Person
         with gr.Column(scale=1):
             person_image = gr.Image(
                 label="Person Image",
@@ -199,6 +216,8 @@ with gr.Blocks(css=CUSTOM_CSS) as demo:
                 label="Person Examples",
             )
 
+        # Column 2: Garment
+        with gr.Column(scale=1):
             garment_image = gr.Image(
                 label="Garment Image",
                 type="pil",
@@ -206,25 +225,39 @@ with gr.Blocks(css=CUSTOM_CSS) as demo:
                 elem_classes=["contain"],
             )
 
-            # Individual garment examples
-            gr.Examples(
-                examples=garment_only_examples,
-                inputs=garment_image,
-                label="Garment Examples",
-            )
-
             with gr.Row():
                 category = gr.Dropdown(
                     choices=CATEGORIES,
                     value="tops",
-                    label="Garment Category",
+                    label="Category",
                 )
                 garment_photo_type = gr.Dropdown(
                     choices=GARMENT_PHOTO_TYPES,
                     value="model",
-                    label="Garment Photo Type",
+                    label="Photo Type",
                 )
 
+            # Garment examples as clickable gallery
+            gr.Markdown("**Garment Examples** (click to load with settings)")
+            garment_gallery = gr.Gallery(
+                value=garment_gallery_images,
+                columns=2,
+                rows=1,
+                height="auto",
+                object_fit="contain",
+                show_label=False,
+                allow_preview=False,
+            )
+
+        # Column 3: Result
+        with gr.Column(scale=1):
+            result_image = gr.Image(
+                label="Try-On Result",
+                type="pil",
+                interactive=False,
+                elem_classes=["contain"],
+            )
+
             run_button = gr.Button("Try On", variant="primary", size="lg")
 
             # Advanced settings
@@ -257,15 +290,6 @@ with gr.Blocks(css=CUSTOM_CSS) as demo:
                     info="Preserves body features and allows unconstrained garment volume. Disable for tighter garment fitting.",
                 )
 
-        # Right column: Output
-        with gr.Column(scale=1):
-            result_image = gr.Image(
-                label="Try-On Result",
-                type="pil",
-                interactive=False,
-                elem_classes=["contain"],
-            )
-
     # Paired examples at the bottom
     gr.Examples(
         examples=paired_examples,
@@ -273,7 +297,7 @@ with gr.Blocks(css=CUSTOM_CSS) as demo:
         label="Complete Examples (click to load person + garment + settings)",
     )
 
-    # Event handler
+    # Event handlers
     run_button.click(
         fn=try_on,
         inputs=[
@@ -289,6 +313,13 @@ with gr.Blocks(css=CUSTOM_CSS) as demo:
         outputs=[result_image],
     )
 
+    # Garment gallery selection - loads image and updates dropdowns
+    garment_gallery.select(
+        fn=on_garment_gallery_select,
+        inputs=None,
+        outputs=[garment_image, category, garment_photo_type],
+    )
+
 # Configure queue with concurrency limit to prevent GPU OOM
 demo.queue(default_concurrency_limit=1, max_size=30)