commit38

app.py

@@ -769,6 +769,447 @@ def search_by_image(uploaded_image, alpha=0.5, start=0, end=12):
 
     return imgs_with_captions
 
+# import gradio as gr
+# import whisper
+
+# asr_model = whisper.load_model("base")
+
+# def handle_voice_search(vf_path, a, offset, gender_ui):
+#     try:
+#         transcription = asr_model.transcribe(vf_path)["text"].strip()
+#     except:
+#         transcription = ""
+#     filters = extract_intent_from_openai(transcription) if transcription else {}
+#     gender_override = gender_ui if gender_ui else filters.get("gender")
+#     results = search_fashion(transcription, a, 0, 12, gender_override)
+#     seen_ids = {r[1] for r in results}
+#     return results, 12, transcription, None, gender_override, results, seen_ids
+
+
+# custom_css = """
+# /* === Global Styling === */
+# /* === Override Gradio default background === */
+
+# html, body {
+#     height: 100% !important;
+#     margin: 0 !important;
+#     padding: 0 !important;
+#     background: radial-gradient(circle at center, #0b1f36 0%, #033e3e 100%) !important;
+#     background-attachment: fixed;
+# }
+
+# .gr-root, .gr-block {
+#     background: transparent !important;
+# }
+
+
+# body::before {
+#     content: "";
+#     position: fixed;
+#     top: 0; left: 0;
+#     width: 100%; height: 100%;
+#     background: radial-gradient(circle at center, rgba(0, 255, 255, 0.08), transparent);
+#     z-index: -1;
+# }
+# #app-bg {
+#     min-height: 100vh;
+#     padding: 0;
+#     margin: 0;
+#     background: radial-gradient(circle at center, #0b1f36 0%, #033e3e 100%);
+#     display: flex;
+#     justify-content: center;
+#     align-items: flex-start;
+#     background-attachment: fixed;
+#     position: relative;
+#     # overflow: hidden;
+#     overflow-y: auto;
+
+# }
+
+# #app-bg::before {
+#     content: "";
+#     position: absolute;
+#     top: 0; left: 0;
+#     width: 100%; height: 100%;
+#     background: radial-gradient(circle at center, rgba(0, 255, 255, 0.08), transparent);
+#     z-index: 0;
+# }
+
+# #main-container {
+#     z-index: 1;
+#     position: relative;
+#     overflow-y: auto;
+# }
+
+
+
+
+# /* === Heading Style === */
+# h1, .gr-markdown h1 {
+#     font-size: 2.2rem !important;
+#     font-weight: bold;
+#     color: #f5f2f2;
+#     text-align: center;
+#     margin-bottom: 1rem;
+# }
+
+# /* === Tabs === */
+# .gr-tab {
+#     border-radius: 12px !important;
+#     background-color: #ffffff !important;
+#     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+#     padding: 16px !important;
+#     margin-top: 12px;
+# }
+
+# /* === Textbox, Dropdown, Slider === */
+# input[type="text"], .gr-textbox textarea, .gr-dropdown, .gr-slider {
+#     border-radius: 8px !important;
+#     border: 1px solid #ccc !important;
+#     padding: 10px !important;
+#     font-size: 16px;
+#     box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+# }
+
+# /* === Image Upload === */
+# .gr-image {
+#     width: 100% !important;
+#     max-width: 100% !important;
+#     border-radius: 12px;
+#     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+# }
+
+# /* === Buttons (custom style .button-36) === */
+# .gr-button {
+#   background-color: #DBDBDB !important;
+#   background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+#   border-radius: 8px !important;
+#   border-style: none !important;
+#   box-sizing: border-box;
+#   color: #FFFFFF !important;
+#   cursor: pointer;
+#   flex-shrink: 0;
+#   font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+#   font-size: 16px;
+#   font-weight: 500;
+#   height: 4rem;
+#   padding: 0 1.6rem;
+#   text-align: center;
+#   text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+#   transition: all .5s;
+#   user-select: none;
+#   -webkit-user-select: none;
+#   touch-action: manipulation;
+# }
+
+# .gr-button:hover {
+#   box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+#   transition-duration: .1s;
+# }
+
+# /* === Responsive padding === */
+# @media (min-width: 768px) {
+#   .gr-button {
+#     padding: 0 2.6rem;
+#   }
+# }
+
+# /* === Gallery Grid === */
+# .gr-gallery {
+#     padding-top: 12px;
+# }
+# .gr-gallery-item {
+#     width: 128px !important;
+#     height: 128px !important;
+#     transition: transform 0.3s ease-in-out;
+#     border-radius: 8px;
+#     overflow: hidden;
+# }
+# .gr-gallery-item:hover {
+#     transform: scale(1.06);
+#     box-shadow: 0 3px 12px rgba(0,0,0,0.15);
+# }
+# .gr-gallery-item img {
+#     object-fit: cover !important;
+#     width: 100% !important;
+#     height: 100% !important;
+#     border-radius: 8px;
+# }
+
+# /* === Audio Upload === */
+# .gr-audio {
+#     width: 100% !important;
+#     border-radius: 12px;
+#     background-color: #fff !important;
+#     box-shadow: 0 1px 5px rgba(0,0,0,0.1);
+# }
+
+# /* === Footer === */
+# .gr-markdown:last-child {
+#     text-align: center;
+#     font-size: 14px;
+#     color: #666;
+#     padding-top: 1rem;
+# }
+
+# # /* === Main Container Centered and Wide === */
+# # #main-container {
+# #     max-width: 90%;
+# #     width: 1100px;
+# #     margin: 40px auto !important;
+# #     padding: 24px;
+# #     background: #ffffff;
+# #     border-radius: 18px;
+# #     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+# #     border: 3px solid orange; /* Orange border */
+# # }
+# # #main-container {
+# #     max-width: 90%;
+# #     width: 1100px;
+# #     height: 90vh;
+# #     overflow-y: auto;
+# #     padding: 24px;
+# #     background: #ffffff;
+# #     border-radius: 18px;
+# #     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+# #     border: 3px solid orange;
+# #     margin: 40px auto;
+# #     position: relative;
+# #     display: flex;
+# #     flex-direction: column;
+# # }
+
+# # #main-container {
+# #     width: 95%;
+# #     max-width: 1100px;
+# #     margin: 20px auto !important;
+# #     padding: 16px;
+# #     background: #ffffff;
+# #     border-radius: 18px;
+# #     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+# #     border: 3px solid orange;
+# #     overflow-y: auto;
+# #     max-height: 90vh;
+# # }
+
+
+# #trying to update the container bcz the title is being compressed
+# #main-container {
+#     width: 95%;
+#     max-width: 1100px;
+#     margin: 20px auto !important;
+#     padding: 16px;
+#     background: #ffffff;
+#     border-radius: 18px;
+#     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+#     border: 3px solid orange;
+
+#     /* Remove height restriction */
+#     # overflow: visible;
+#     overflow-y: auto;
+# }
+
+
+
+
+
+# /* For phones and smaller devices */
+# @media (max-width: 768px) {
+#     #main-container {
+#         width: 100%;
+#         margin: 8px;
+#         padding: 12px;
+#         border-radius: 12px;
+#         max-height: none;
+#     }
+
+#     .gr-button {
+#         font-size: 14px;
+#         height: 3.2rem;
+#     }
+
+#     input[type="text"], .gr-textbox textarea, .gr-dropdown, .gr-slider {
+#         font-size: 14px;
+#         padding: 8px !important;
+#     }
+
+#     h1, .gr-markdown h1 {
+#         font-size: 1.6rem !important;
+#     }
+
+#     .gr-gallery-item {
+#         width: 100px !important;
+#         height: 100px !important;
+#     }
+
+#     .gr-image {
+#         height: auto !important;
+#     }
+# }
+
+
+
+# /* === Tab Label Styling === */
+# button[role="tab"] {
+#     color: #000000 !important;         /* Default tab text color: black */
+#     font-weight: 500;
+#     transition: color 0.3s ease-in-out;
+#     font-size: 16px;
+# }
+
+# /* Active tab title */
+# button[role="tab"][aria-selected="true"] {
+#     color: #f57c00 !important;         /* Active tab text color: orange */
+#     font-weight: bold !important;
+# }
+
+# /* Hover effect on tab titles */
+# button[role="tab"]:hover {
+#     color: #f57c00 !important;  /* Orange on hover */
+#     font-weight: 600;
+#     cursor: pointer;
+# }
+# /* === Uniform Input Sizes for Text, Audio, Image === */
+# .gr-textbox, .gr-audio, .gr-image {
+#     max-width: 100% !important;
+#     width: 100% !important;
+# }
+
+# .gr-audio, .gr-image {
+#     max-width: 500px !important;
+#     margin: 0 auto;
+# }
+
+# .gr-image {
+#     height: 256px !important;
+# }
+
+# """
+
+# with gr.Blocks(css=custom_css) as demo:
+#     with gr.Column(elem_id="app-bg"):
+#         gr.Markdown("# 🛍️ Fashion Product Hybrid Search")
+
+#         alpha = gr.Slider(0, 1, value=0.5, label="Hybrid Weight (alpha: 0=sparse, 1=dense)")
+
+#         with gr.Tabs():
+#             with gr.Tab("Text Search"):
+#                 query = gr.Textbox(
+#                     label="Text Query",
+#                     placeholder="e.g., floral summer dress for women"
+#                 )
+#                 gender_dropdown = gr.Dropdown(
+#                     ["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"],
+#                     label="Gender Filter (optional)"
+#                 )
+#                 text_search_btn = gr.Button("Search by Text", elem_classes="search-btn")
+
+#             with gr.Tab("🎙️ Voice Search"):
+#                 voice_input = gr.Audio(label="Speak Your Query", type="filepath")
+#                 voice_gender_dropdown = gr.Dropdown(
+#                     ["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"],
+#                     label="Gender"
+#                 )
+#                 voice_search_btn = gr.Button("Search by Voice")
+
+#             with gr.Tab("Image Search"):
+#                 image_input = gr.Image(
+#                     type="pil",
+#                     label="Upload an image",
+#                     sources=["upload", "clipboard"],
+#                     height=400
+#                 )
+#                 image_gender_dropdown = gr.Dropdown(
+#                     ["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"],
+#                     label="Gender Filter (optional)"
+#                 )
+#                 image_search_btn = gr.Button("Search by Image", elem_classes="search-btn")
+
+#         gallery = gr.Gallery(label="Search Results", columns=6, height=None)
+#         load_more_btn = gr.Button("Load More")
+
+#         # --- UI State Holders ---
+#         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())
+
+#         # --- Unified Search Function ---
+#         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
+
+#         # --- Text Search Click Handler ---
+#         text_search_btn.click(
+#             unified_search,
+#             inputs=[query, gr.State(None), alpha, search_offset, gender_dropdown],
+#             outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids]
+#         )
+
+#         # --- Voice Search Click Handler ---
+#         voice_search_btn.click(
+#             handle_voice_search,
+#             inputs=[voice_input, alpha, search_offset, voice_gender_dropdown],
+#             outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids]
+#         )
+
+#         # --- Image Search Click Handler ---
+#         image_search_btn.click(
+#             unified_search,
+#             inputs=[gr.State(""), image_input, alpha, search_offset, image_gender_dropdown],
+#             outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids]
+#         )
+
+#         # --- Load More Button Function ---
+#         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]
+#         )
+
+# demo.launch()
+
+
+
 import gradio as gr
 import whisper
 
@@ -785,136 +1226,59 @@ def handle_voice_search(vf_path, a, offset, gender_ui):
     seen_ids = {r[1] for r in results}
     return results, 12, transcription, None, gender_override, results, seen_ids
 
-
 custom_css = """
-/* === Global Styling === */
-/* === Override Gradio default background === */
-
 html, body {
     height: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
+    margin: 0;
+    padding: 0;
     background: radial-gradient(circle at center, #0b1f36 0%, #033e3e 100%) !important;
     background-attachment: fixed;
+    overflow: hidden;
 }
 
 .gr-root, .gr-block {
     background: transparent !important;
 }
 
-
-body::before {
-    content: "";
-    position: fixed;
-    top: 0; left: 0;
-    width: 100%; height: 100%;
-    background: radial-gradient(circle at center, rgba(0, 255, 255, 0.08), transparent);
-    z-index: -1;
-}
 #app-bg {
     min-height: 100vh;
-    padding: 0;
-    margin: 0;
-    background: radial-gradient(circle at center, #0b1f36 0%, #033e3e 100%);
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    background-attachment: fixed;
-    position: relative;
-    # overflow: hidden;
-    overflow-y: auto;
-
-}
-
-#app-bg::before {
-    content: "";
-    position: absolute;
-    top: 0; left: 0;
-    width: 100%; height: 100%;
-    background: radial-gradient(circle at center, rgba(0, 255, 255, 0.08), transparent);
-    z-index: 0;
-}
-
-#main-container {
-    z-index: 1;
-    position: relative;
     overflow-y: auto;
+    padding: 24px;
 }
 
-
-
-
-/* === Heading Style === */
 h1, .gr-markdown h1 {
-    font-size: 2.2rem !important;
+    font-size: 2rem;
     font-weight: bold;
-    color: #f5f2f2;
+    color: #ffffff;
     text-align: center;
     margin-bottom: 1rem;
 }
 
-/* === Tabs === */
 .gr-tab {
     border-radius: 12px !important;
     background-color: #ffffff !important;
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
-    padding: 16px !important;
+    padding: 16px;
     margin-top: 12px;
 }
 
-/* === Textbox, Dropdown, Slider === */
 input[type="text"], .gr-textbox textarea, .gr-dropdown, .gr-slider {
-    border-radius: 8px !important;
-    border: 1px solid #ccc !important;
-    padding: 10px !important;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    padding: 10px;
     font-size: 16px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-}
-
-/* === Image Upload === */
-.gr-image {
-    width: 100% !important;
-    max-width: 100% !important;
-    border-radius: 12px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
-/* === Buttons (custom style .button-36) === */
 .gr-button {
-  background-color: #DBDBDB !important;
-  background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
-  border-radius: 8px !important;
-  border-style: none !important;
-  box-sizing: border-box;
-  color: #FFFFFF !important;
-  cursor: pointer;
-  flex-shrink: 0;
-  font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  height: 4rem;
-  padding: 0 1.6rem;
-  text-align: center;
-  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
-  transition: all .5s;
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-}
-
-.gr-button:hover {
-  box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
-  transition-duration: .1s;
-}
-
-/* === Responsive padding === */
-@media (min-width: 768px) {
-  .gr-button {
-    padding: 0 2.6rem;
-  }
+    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+    color: white !important;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 500;
+    height: 3.5rem;
+    padding: 0 1.5rem;
+    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
 }
 
-/* === Gallery Grid === */
 .gr-gallery {
     padding-top: 12px;
 }
@@ -936,154 +1300,19 @@ input[type="text"], .gr-textbox textarea, .gr-dropdown, .gr-slider {
     border-radius: 8px;
 }
 
-/* === Audio Upload === */
-.gr-audio {
-    width: 100% !important;
-    border-radius: 12px;
-    background-color: #fff !important;
-    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
-}
-
-/* === Footer === */
-.gr-markdown:last-child {
-    text-align: center;
-    font-size: 14px;
-    color: #666;
-    padding-top: 1rem;
-}
-
-# /* === Main Container Centered and Wide === */
-# #main-container {
-#     max-width: 90%;
-#     width: 1100px;
-#     margin: 40px auto !important;
-#     padding: 24px;
-#     background: #ffffff;
-#     border-radius: 18px;
-#     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-#     border: 3px solid orange; /* Orange border */
-# }
-# #main-container {
-#     max-width: 90%;
-#     width: 1100px;
-#     height: 90vh;
-#     overflow-y: auto;
-#     padding: 24px;
-#     background: #ffffff;
-#     border-radius: 18px;
-#     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-#     border: 3px solid orange;
-#     margin: 40px auto;
-#     position: relative;
-#     display: flex;
-#     flex-direction: column;
-# }
-
-# #main-container {
-#     width: 95%;
-#     max-width: 1100px;
-#     margin: 20px auto !important;
-#     padding: 16px;
-#     background: #ffffff;
-#     border-radius: 18px;
-#     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-#     border: 3px solid orange;
-#     overflow-y: auto;
-#     max-height: 90vh;
-# }
-
-
-#trying to update the container bcz the title is being compressed
-#main-container {
-    width: 95%;
-    max-width: 1100px;
-    margin: 20px auto !important;
-    padding: 16px;
-    background: #ffffff;
-    border-radius: 18px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-    border: 3px solid orange;
-
-    /* Remove height restriction */
-    # overflow: visible;
-    overflow-y: auto;
-}
-
-
-
-
-
-/* For phones and smaller devices */
 @media (max-width: 768px) {
-    #main-container {
-        width: 100%;
-        margin: 8px;
-        padding: 12px;
-        border-radius: 12px;
-        max-height: none;
-    }
-
-    .gr-button {
-        font-size: 14px;
-        height: 3.2rem;
-    }
-
-    input[type="text"], .gr-textbox textarea, .gr-dropdown, .gr-slider {
-        font-size: 14px;
-        padding: 8px !important;
-    }
-
     h1, .gr-markdown h1 {
         font-size: 1.6rem !important;
     }
-
     .gr-gallery-item {
         width: 100px !important;
         height: 100px !important;
     }
-
-    .gr-image {
-        height: auto !important;
+    .gr-button {
+        font-size: 14px;
+        height: 3rem;
     }
 }
-
-
-
-/* === Tab Label Styling === */
-button[role="tab"] {
-    color: #000000 !important;         /* Default tab text color: black */
-    font-weight: 500;
-    transition: color 0.3s ease-in-out;
-    font-size: 16px;
-}
-
-/* Active tab title */
-button[role="tab"][aria-selected="true"] {
-    color: #f57c00 !important;         /* Active tab text color: orange */
-    font-weight: bold !important;
-}
-
-/* Hover effect on tab titles */
-button[role="tab"]:hover {
-    color: #f57c00 !important;  /* Orange on hover */
-    font-weight: 600;
-    cursor: pointer;
-}
-/* === Uniform Input Sizes for Text, Audio, Image === */
-.gr-textbox, .gr-audio, .gr-image {
-    max-width: 100% !important;
-    width: 100% !important;
-}
-
-.gr-audio, .gr-image {
-    max-width: 500px !important;
-    margin: 0 auto;
-}
-
-.gr-image {
-    height: 256px !important;
-}
-
 """
 
 with gr.Blocks(css=custom_css) as demo:
@@ -1094,41 +1323,24 @@ with gr.Blocks(css=custom_css) as demo:
 
         with gr.Tabs():
             with gr.Tab("Text Search"):
-                query = gr.Textbox(
-                    label="Text Query",
-                    placeholder="e.g., floral summer dress for women"
-                )
-                gender_dropdown = gr.Dropdown(
-                    ["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"],
-                    label="Gender Filter (optional)"
-                )
-                text_search_btn = gr.Button("Search by Text", elem_classes="search-btn")
+                query = gr.Textbox(label="Text Query", placeholder="e.g., floral summer dress for women")
+                gender_dropdown = gr.Dropdown(["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"], label="Gender Filter (optional)")
+                text_search_btn = gr.Button("Search by Text")
 
             with gr.Tab("🎙️ Voice Search"):
                 voice_input = gr.Audio(label="Speak Your Query", type="filepath")
-                voice_gender_dropdown = gr.Dropdown(
-                    ["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"],
-                    label="Gender"
-                )
+                voice_gender_dropdown = gr.Dropdown(["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"], label="Gender")
                 voice_search_btn = gr.Button("Search by Voice")
 
             with gr.Tab("Image Search"):
-                image_input = gr.Image(
-                    type="pil",
-                    label="Upload an image",
-                    sources=["upload", "clipboard"],
-                    height=400
-                )
-                image_gender_dropdown = gr.Dropdown(
-                    ["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"],
-                    label="Gender Filter (optional)"
-                )
-                image_search_btn = gr.Button("Search by Image", elem_classes="search-btn")
+                image_input = gr.Image(type="pil", label="Upload an image", sources=["upload", "clipboard"], height=400)
+                image_gender_dropdown = gr.Dropdown(["", "Men", "Women", "Boys", "Girls", "Kids", "Unisex"], label="Gender Filter (optional)")
+                image_search_btn = gr.Button("Search by Image")
 
         gallery = gr.Gallery(label="Search Results", columns=6, height=None)
         load_more_btn = gr.Button("Load More")
 
-        # --- UI State Holders ---
+        # UI States
         search_offset = gr.State(0)
         current_query = gr.State("")
         current_image = gr.State(None)
@@ -1136,50 +1348,24 @@ with gr.Blocks(css=custom_css) as demo:
         shown_results = gr.State([])
         shown_ids = gr.State(set())
 
-        # --- Unified Search Function ---
         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
 
-        # --- Text Search Click Handler ---
-        text_search_btn.click(
-            unified_search,
-            inputs=[query, gr.State(None), alpha, search_offset, gender_dropdown],
-            outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids]
-        )
-
-        # --- Voice Search Click Handler ---
-        voice_search_btn.click(
-            handle_voice_search,
-            inputs=[voice_input, alpha, search_offset, voice_gender_dropdown],
-            outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids]
-        )
-
-        # --- Image Search Click Handler ---
-        image_search_btn.click(
-            unified_search,
-            inputs=[gr.State(""), image_input, alpha, search_offset, image_gender_dropdown],
-            outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids]
-        )
-
-        # --- Load More Button Function ---
         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():
@@ -1190,16 +1376,33 @@ with gr.Blocks(css=custom_css) as demo:
             filtered_new = []
             new_ids = set()
             for item in new_results:
-                img_obj, caption = item
-                if caption not in prev_ids:
+                if item[1] not in prev_ids:
                     filtered_new.append(item)
-                    new_ids.add(caption)
+                    new_ids.add(item[1])
 
             combined = prev_results + filtered_new
             updated_ids = prev_ids.union(new_ids)
-
             return combined, end, combined, updated_ids
 
+        # Button Bindings
+        text_search_btn.click(
+            unified_search,
+            inputs=[query, gr.State(None), alpha, search_offset, gender_dropdown],
+            outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids]
+        )
+
+        voice_search_btn.click(
+            handle_voice_search,
+            inputs=[voice_input, alpha, search_offset, voice_gender_dropdown],
+            outputs=[gallery, search_offset, current_query, current_image, current_gender, shown_results, shown_ids]
+        )
+
+        image_search_btn.click(
+            unified_search,
+            inputs=[gr.State(""), image_input, alpha, search_offset, image_gender_dropdown],
+            outputs=[gallery, search_offset, current_query, current_image, current_gender, 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],
@@ -1207,6 +1410,3 @@ with gr.Blocks(css=custom_css) as demo:
         )
 
 demo.launch()
-
-
-