commit24

app.py

@@ -596,27 +596,156 @@ def search_by_image(uploaded_image, alpha=0.5, start=0, end=12):
     return imgs_with_captions
 
 # ------------------- UI -------------------
+# custom_css = """
+# .search-btn { width: 100%; }
+# .gr-row { gap: 8px !important; }
+# .query-slider > div { margin-bottom: 4px !important; }
+# .gr-gallery-item { width: 256px !important; height: 256px !important; }
+# .gr-gallery-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
+# """
+
+# with gr.Blocks(css=custom_css) as demo:
+#     gr.Markdown("# 🛍️ Fashion Product Hybrid Search (with GPT-4 powered query parsing)")
+
+#     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")
+#             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)")
+#         with gr.Column(scale=1):
+#             image_input = gr.Image(type="pil", label="Upload an image (optional)", sources=["upload", "clipboard"], height=256, width=356)
+
+#     search_btn = gr.Button("Search", elem_classes="search-btn")
+#     gallery = gr.Gallery(label="Search Results", columns=6, height=None)
+#     load_more_btn = gr.Button("Load More")
+
+#     search_offset = gr.State(0)
+#     current_query = gr.State("")
+#     current_image = gr.State(None)
+#     current_gender = gr.State("")
+#     shown_results = gr.State([])
+#     shown_ids = gr.State(set())
+
+#     def unified_search(q, uploaded_image, a, offset, gender_ui):
+#         start = 0
+#         end = 12
+#         filters = extract_intent_from_openai(q) if q.strip() else {}
+#         gender_override = gender_ui if gender_ui else filters.get("gender")
+
+#         if uploaded_image is not None:
+#             results = search_by_image(uploaded_image, a, start, end)
+#         elif q.strip():
+#             results = search_fashion(q, a, start, end, gender_override)
+#         else:
+#             results = []
+
+#         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])
+
+#     def load_more_fn(a, offset, q, img, gender_ui, prev_results, prev_ids):
+#         start = offset
+#         end = offset + 12
+#         gender_override = gender_ui
+
+#         if img is not None:
+#             new_results = search_by_image(img, a, start, end)
+#         elif q.strip():
+#             new_results = search_fashion(q, a, start, end, gender_override)
+#         else:
+#             new_results = []
+
+#         filtered_new = []
+#         new_ids = set()
+#         for item in new_results:
+#             img_obj, caption = item
+#             if caption not in prev_ids:
+#                 filtered_new.append(item)
+#                 new_ids.add(caption)
+
+#         combined = prev_results + filtered_new
+#         updated_ids = prev_ids.union(new_ids)
+
+#         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])
+
+#     gr.Markdown("🧠 Powered by OpenAI + Hybrid AI Fashion Search")
+
+# demo.launch()
+import gradio as gr
+
 custom_css = """
-.search-btn { width: 100%; }
-.gr-row { gap: 8px !important; }
-.query-slider > div { margin-bottom: 4px !important; }
-.gr-gallery-item { width: 256px !important; height: 256px !important; }
-.gr-gallery-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
+.search-btn {
+    width: 100%;
+}
+
+.gr-row {
+    gap: 8px !important;
+    flex-wrap: wrap;
+}
+
+.query-slider > div {
+    margin-bottom: 4px !important;
+}
+
+.gr-gallery-item {
+    width: 100% !important;
+    max-width: 256px !important;
+    height: auto !important;
+    margin: auto;
+}
+
+.gr-gallery-item img {
+    width: 100% !important;
+    height: auto !important;
+    object-fit: cover !important;
+}
+
+@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;
+    }
+}
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("# 🛍️ Fashion Product Hybrid Search (with GPT-4 powered query parsing)")
+    gr.Markdown("## 🛍️ Fashion Product Hybrid Search (with GPT-4 powered query parsing)")
 
     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=256, width=356)
+            image_input = gr.Image(
+                type="pil",
+                label="Upload an image (optional)",
+                sources=["upload", "clipboard"],
+                height="auto"
+            )
 
     search_btn = gr.Button("Search", elem_classes="search-btn")
-    gallery = gr.Gallery(label="Search Results", columns=6, height=None)
+    gallery = gr.Gallery(label="Search Results", columns="auto", height=None, allow_preview=True)
     load_more_btn = gr.Button("Load More")
 
     search_offset = gr.State(0)
@@ -642,8 +771,11 @@ 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
@@ -670,8 +802,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")