commit39

app.py

@@ -769,447 +769,6 @@ 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
 
@@ -1226,59 +785,136 @@ 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;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
     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: 2rem;
+    font-size: 2.2rem !important;
     font-weight: bold;
-    color: #ffffff;
+    color: #f5f2f2;
     text-align: center;
     margin-bottom: 1rem;
 }
 
+/* === Tabs === */
 .gr-tab {
     border-radius: 12px !important;
     background-color: #ffffff !important;
-    padding: 16px;
+    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;
-    border: 1px solid #ccc;
-    padding: 10px;
+    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-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;
+  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;
 }
@@ -1300,19 +936,154 @@ 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-button {
-        font-size: 14px;
-        height: 3rem;
+
+    .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:
@@ -1323,24 +1094,41 @@ 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")
+                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_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")
+                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 States
+        # --- UI State Holders ---
         search_offset = gr.State(0)
         current_query = gr.State("")
         current_image = gr.State(None)
@@ -1348,24 +1136,50 @@ 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():
@@ -1376,32 +1190,15 @@ with gr.Blocks(css=custom_css) as demo:
             filtered_new = []
             new_ids = set()
             for item in new_results:
-                if item[1] not in prev_ids:
+                img_obj, caption = item
+                if caption not in prev_ids:
                     filtered_new.append(item)
-                    new_ids.add(item[1])
+                    new_ids.add(caption)
 
             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]
-        )
+            return combined, end, combined, updated_ids
 
         load_more_btn.click(
             load_more_fn,
@@ -1410,3 +1207,5 @@ with gr.Blocks(css=custom_css) as demo:
         )
 
 demo.launch()
+
+