commit41

app.py

@@ -769,6 +769,396 @@ 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 === */
+
+
+
+# /* Add soft card-like containers */
+# .gr-box, .gr-block, .gr-column, .gr-row {
+#     background-color: #ffffff !important;
+#     border-radius: 12px;
+#     padding: 16px !important;
+#     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+# }
+
+# #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;
+# }
+
+# #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;
+# }
+
+
+
+
+# /* === Heading Style === */
+# h1, .gr-markdown h1 {
+#     font-size: 2.2rem !important;
+#     font-weight: bold;
+#     color: #000000;
+#     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 {
+#     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;
+# }
+
+# /* 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"):
+#     with gr.Column(elem_id="main-container"):
+#       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=256,
+#               #     width=356
+#               # )
+#               image_input = gr.Image(
+#                 type="pil",
+#                 label="Upload an image",
+#                 sources=["upload", "clipboard"],
+#                 # tool=None,
+#                 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
+#     # Text Search
+#     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
+#     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 ---
+#     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
 import whisper
 
@@ -786,147 +1176,147 @@ def handle_voice_search(vf_path, a, offset, gender_ui):
     return results, 12, transcription, None, gender_override, results, seen_ids
 
 custom_css = """
-/* === Global Styling === */
-/* === Override Gradio default background === */
-
-
-
-/* Add soft card-like containers */
-.gr-box, .gr-block, .gr-column, .gr-row {
-    background-color: #ffffff !important;
-    border-radius: 12px;
-    padding: 16px !important;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+/* === Background Styling === */
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    # overflow: hidden;
+    overflow: auto;
 }
 
 #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: radial-gradient(circle at center, #C2C5EF 0%, #E0E2F5 100%) !important;
     background-attachment: fixed;
     position: relative;
-    overflow: hidden;
-}
-
-#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;
+    overflow-y: auto;
+    padding: 24px;
 }
 
+/* === Main Content Container === */
 #main-container {
-    z-index: 1;
+    width: 95%;
+    max-width: 1100px;
+    margin: 20px auto;
+    padding: 24px;
+    background: #ffffff;
+    border-radius: 18px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    # border: 2px solid #C2C5EF;
+    border: 2px solid black;
     position: relative;
+    z-index: 1;
+    overflow: visible;
 }
 
+/* === Card Containers === */
+.gr-box, .gr-block, .gr-column, .gr-row, .gr-tab {
+    background-color: #C2C5EF !important;
+    color: #22284F !important;
+    border-radius: 12px;
+    padding: 16px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
 
-
-
-/* === Heading Style === */
+/* === Headings === */
 h1, .gr-markdown h1 {
     font-size: 2.2rem !important;
     font-weight: bold;
-    color: #000000;
+    color: #22284F;
     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;
+/* === Inputs === */
+input[type="text"],
+.gr-textbox textarea,
+.gr-dropdown,
+.gr-slider {
+    background-color: #C2C5EF !important;
+    color: #22284F !important;
+    border-radius: 8px;
+    border: 1px solid #999 !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;
-  }
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
 /* === Gallery Grid === */
 .gr-gallery {
     padding-top: 12px;
+    overflow-y: auto;
 }
 .gr-gallery-item {
     width: 128px !important;
     height: 128px !important;
-    transition: transform 0.3s ease-in-out;
     border-radius: 8px;
     overflow: hidden;
+    background-color: #C2C5EF;
+    color: #22284F;
+    transition: transform 0.3s ease-in-out;
 }
 .gr-gallery-item:hover {
     transform: scale(1.06);
-    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
+    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;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
     border-radius: 8px;
 }
 
-/* === Audio Upload === */
-.gr-audio {
+/* === Audio & Image === */
+.gr-audio, .gr-image {
     width: 100% !important;
+    max-width: 500px !important;
+    margin: 0 auto;
     border-radius: 12px;
-    background-color: #fff !important;
-    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
+    background-color: #C2C5EF !important;
+    color: #22284F !important;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+}
+
+.gr-image {
+    height: 256px !important;
+}
+
+/* === Buttons === */
+.gr-button {
+    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+    color: #ffffff !important;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 500;
+    height: 3.5rem;
+    padding: 0 1.5rem;
+    border: none;
+    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+    transition: all 0.3s;
+}
+.gr-button:hover {
+    transform: translateY(-2px);
+    box-shadow: rgba(80, 63, 205, 0.8) 0 2px 20px;
+}
+
+/* === Tab Labels === */
+button[role="tab"] {
+    color: #22284F !important;
+    font-weight: 500;
+    font-size: 16px;
+}
+button[role="tab"][aria-selected="true"] {
+    color: #f57c00 !important;
+    font-weight: bold;
+}
+button[role="tab"]:hover {
+    color: #f57c00 !important;
+    font-weight: 600;
+    cursor: pointer;
 }
 
 /* === Footer === */
@@ -937,29 +1327,12 @@ input[type="text"], .gr-textbox textarea, .gr-dropdown, .gr-slider {
     padding-top: 1rem;
 }
 
-
-
-#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;
-}
-
-/* For phones and smaller devices */
+/* === Responsive === */
 @media (max-width: 768px) {
     #main-container {
         width: 100%;
         margin: 8px;
         padding: 12px;
-        border-radius: 12px;
-        max-height: none;
     }
 
     .gr-button {
@@ -986,42 +1359,6 @@ input[type="text"], .gr-textbox textarea, .gr-dropdown, .gr-slider {
     }
 }
 
-
-
-/* === 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;
-}  
 """
 
 
@@ -1156,4 +1493,4 @@ with gr.Blocks(css=custom_css) as demo:
 
     # gr.Markdown("🧠 Powered by OpenAI + Hybrid AI Fashion Search")
 
-demo.launch()
+demo.launch()