commit25

app.py

@@ -692,11 +692,13 @@ custom_css = """
     margin-bottom: 4px !important;
 }
 
+/* Default: 6 per row */
 .gr-gallery-item {
-    width: 100% !important;
-    max-width: 256px !important;
+    flex: 1 1 calc(16.66% - 10px); /* 6 per row with some gap */
+    max-width: calc(16.66% - 10px);
+    box-sizing: border-box;
     height: auto !important;
-    margin: auto;
+    margin-bottom: 10px;
 }
 
 .gr-gallery-item img {
@@ -705,19 +707,11 @@ custom_css = """
     object-fit: cover !important;
 }
 
+/* On small screens: 3 per row */
 @media (max-width: 768px) {
-    .gr-column {
-        width: 100% !important;
-        flex: 100% !important;
-    }
-
-    .search-btn {
-        font-size: 16px;
-        padding: 10px;
-    }
-
     .gr-gallery-item {
-        max-width: 100% !important;
+        flex: 1 1 calc(33.33% - 10px); /* 3 per row */
+        max-width: calc(33.33% - 10px);
     }
 }
 """
@@ -727,25 +721,14 @@ with gr.Blocks(css=custom_css) as demo:
 
     with gr.Row(equal_height=True):
         with gr.Column(scale=5, elem_classes="query-slider"):
-            query = gr.Textbox(
-                label="Enter your fashion search query",
-                placeholder="e.g., black sneakers for women"
-            )
+            query = gr.Textbox(label="Enter your fashion search query", placeholder="e.g., black sneakers for women")
             alpha = gr.Slider(0, 1, value=0.5, label="Hybrid Weight (alpha: 0=sparse, 1=dense)")
-            gender_dropdown = gr.Dropdown(
-                ["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"],
-                label="Gender Filter (optional)"
-            )
+            gender_dropdown = gr.Dropdown(["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"], label="Gender Filter (optional)")
         with gr.Column(scale=1):
-            image_input = gr.Image(
-                type="pil",
-                label="Upload an image (optional)",
-                sources=["upload", "clipboard"],
-                height="auto"
-            )
+            image_input = gr.Image(type="pil", label="Upload an image (optional)", sources=["upload", "clipboard"], height=256)
 
     search_btn = gr.Button("Search", elem_classes="search-btn")
-    gallery = gr.Gallery(label="Search Results", columns="auto", height=None, allow_preview=True)
+    gallery = gr.Gallery(label="Search Results", columns=6, height=None, allow_preview=True)  # 'columns=6' ignored due to CSS override
     load_more_btn = gr.Button("Load More")
 
     search_offset = gr.State(0)
@@ -771,11 +754,9 @@ with gr.Blocks(css=custom_css) as demo:
         seen_ids = {r[1] for r in results}
         return results, end, q, uploaded_image, gender_override, results, seen_ids
 
-    search_btn.click(
-        unified_search,
-        inputs=[query, image_input, alpha, search_offset, gender_dropdown],
-        outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids]
-    )
+    search_btn.click(unified_search,
+                     inputs=[query, image_input, alpha, search_offset, gender_dropdown],
+                     outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids])
 
     def load_more_fn(a, offset, q, img, gender_ui, prev_results, prev_ids):
         start = offset
@@ -802,12 +783,11 @@ with gr.Blocks(css=custom_css) as demo:
 
         return combined, end, combined, updated_ids
 
-    load_more_btn.click(
-        load_more_fn,
-        inputs=[alpha, search_offset, current_query, current_image, current_gender, shown_results, shown_ids],
-        outputs=[gallery, search_offset, shown_results, shown_ids]
-    )
+    load_more_btn.click(load_more_fn,
+                        inputs=[alpha, search_offset, current_query, current_image, current_gender, shown_results, shown_ids],
+                        outputs=[gallery, search_offset, shown_results, shown_ids])
 
     gr.Markdown("🧠 Powered by OpenAI + Hybrid AI Fashion Search")
 
 demo.launch()
+