commit26

app.py

@@ -679,56 +679,51 @@ def search_by_image(uploaded_image, alpha=0.5, start=0, end=12):
 import gradio as gr
 
 custom_css = """
-.search-btn {
-    width: 100%;
-}
-
-.gr-row {
-    gap: 8px !important;
+/* Container */
+.gr-gallery {
+    display: flex !important;
     flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
 }
 
-.query-slider > div {
-    margin-bottom: 4px !important;
-}
-
-/* Default: 6 per row */
+/* Each item */
 .gr-gallery-item {
-    flex: 1 1 calc(16.66% - 10px); /* 6 per row with some gap */
+    flex: 0 0 calc(16.66% - 10px);  /* 6 columns on desktop */
     max-width: calc(16.66% - 10px);
-    box-sizing: border-box;
-    height: auto !important;
-    margin-bottom: 10px;
+    height: 256px !important;
+    overflow: hidden;
 }
 
+/* Image inside each item */
 .gr-gallery-item img {
     width: 100% !important;
-    height: auto !important;
+    height: 100% !important;
     object-fit: cover !important;
 }
 
-/* On small screens: 3 per row */
+/* For mobile: 3 columns */
 @media (max-width: 768px) {
     .gr-gallery-item {
-        flex: 1 1 calc(33.33% - 10px); /* 3 per row */
+        flex: 0 0 calc(33.33% - 10px);  /* 3 columns on mobile */
         max-width: calc(33.33% - 10px);
     }
 }
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("## 🛍️ Fashion Product Hybrid Search (with GPT-4 powered query parsing)")
+    gr.Markdown("## 🛍️ Responsive Fashion Product Search")
 
-    with gr.Row(equal_height=True):
+    with gr.Row():
         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")
-            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)")
+            query = gr.Textbox(label="Search", placeholder="e.g. black dress for women")
+            alpha = gr.Slider(0, 1, value=0.5, label="Hybrid Weight")
+            gender_dropdown = gr.Dropdown(["", "Men", "Women", "Unisex"], label="Gender (optional)")
         with gr.Column(scale=1):
-            image_input = gr.Image(type="pil", label="Upload an image (optional)", sources=["upload", "clipboard"], height=256)
+            image_input = gr.Image(type="pil", label="Upload Image", sources=["upload", "clipboard"], height=256)
 
     search_btn = gr.Button("Search", elem_classes="search-btn")
-    gallery = gr.Gallery(label="Search Results", columns=6, height=None, allow_preview=True)  # 'columns=6' ignored due to CSS override
+    gallery = gr.Gallery(label="Results", columns=6, height=None, allow_preview=True)
     load_more_btn = gr.Button("Load More")
 
     search_offset = gr.State(0)
@@ -740,7 +735,7 @@ with gr.Blocks(css=custom_css) as demo:
 
     def unified_search(q, uploaded_image, a, offset, gender_ui):
         start = 0
-        end = 18
+        end = 12
         filters = extract_intent_from_openai(q) if q.strip() else {}
         gender_override = gender_ui if gender_ui else filters.get("gender")
 
@@ -754,13 +749,15 @@ 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
-        end = offset + 18
+        end = offset + 12
         gender_override = gender_ui
 
         if img is not None:
@@ -783,11 +780,14 @@ 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()
 
+