app.py

# app.py
import os
import time
import torch
import numpy as np
import gradio as gr
from PIL import Image, ImageOps
from tqdm.auto import tqdm
from datasets import load_dataset
from sentence_transformers import SentenceTransformer
from pinecone import Pinecone, ServerlessSpec
from pinecone_text.sparse import BM25Encoder
from transformers import CLIPProcessor, CLIPModel
import openai

# ------------------- Keys & Setup -------------------
openai.api_key = os.getenv("OPENAI_API_KEY")
pc = Pinecone(api_key=os.getenv("PINECONE_API_KEY"))
spec = ServerlessSpec(cloud=os.getenv("PINECONE_CLOUD") or "aws", region=os.getenv("PINECONE_REGION") or "us-east-1")
index_name = "hybrid-image-search"

if index_name not in pc.list_indexes().names():
    pc.create_index(index_name, dimension=512, metric='dotproduct', spec=spec)
    while not pc.describe_index(index_name).status['ready']:
        time.sleep(1)
index = pc.Index(index_name)

# ------------------- Models & Dataset -------------------
fashion = load_dataset("ashraq/fashion-product-images-small", split="train")
images = fashion["image"]
metadata = fashion.remove_columns("image").to_pandas()
bm25 = BM25Encoder()
bm25.fit(metadata["productDisplayName"])
device = 'cuda' if torch.cuda.is_available() else 'cpu'
model = SentenceTransformer('sentence-transformers/clip-ViT-B-32', device=device)
clip_model = CLIPModel.from_pretrained("openai/clip-vit-base-patch32").to(device)
clip_processor = CLIPProcessor.from_pretrained("openai/clip-vit-base-patch32")

# ------------------- Helper Functions -------------------
def hybrid_scale(dense, sparse, alpha: float):
    if alpha < 0 or alpha > 1:
        raise ValueError("Alpha must be between 0 and 1")
    hsparse = {
        'indices': sparse['indices'],
        'values':  [v * (1 - alpha) for v in sparse['values']]
    }
    hdense = [v * alpha for v in dense]
    return hdense, hsparse

def extract_intent_from_openai(query: str):
    prompt = f"""
You are an assistant for a fashion search engine. Extract the user's intent from the following query.
Return a Python dictionary with keys: category, gender, subcategory, color.
If something is missing, use null.

Query: "{query}"
Only return the dictionary.
"""
    try:
        response = openai.ChatCompletion.create(
            model="gpt-4",
            messages=[{"role": "user", "content": prompt}],
            temperature=0
        )
        raw = response.choices[0].message['content']
        structured = eval(raw)
        return structured
    except Exception as e:
        print(f"⚠️ OpenAI intent extraction failed: {e}")
        return {"include": {}, "exclude": {}}
#-----------------below changed------------------------------#

import imagehash
from PIL import Image

def is_duplicate(img, existing_hashes, hash_size=16, tolerance=0):
    """
    Checks if the image is a near-duplicate based on perceptual hash.
    :param img: PIL Image
    :param existing_hashes: set of previously seen hashes
    :param hash_size: size of the hash (default=16 for more precision)
    :param tolerance: allowable Hamming distance for near-duplicates
    :return: (bool) whether image is duplicate
    """
    img_hash = imagehash.phash(img, hash_size=hash_size)
    for h in existing_hashes:
        if abs(img_hash - h) <= tolerance:
            return True
    existing_hashes.add(img_hash)
    return False

def extract_metadata_filters(query: str):
    query_lower = query.lower()
    gender = None
    category = None
    subcategory = None
    color = None

    # --- Gender Mapping ---
    gender_map = {
        "men": "Men", "man": "Men", "mens": "Men", "mans": "Men", "male": "Men",
        "women": "Women", "woman": "Women", "womens": "Women", "female": "Women",
        "boys": "Boys", "boy": "Boys",
        "girls": "Girls", "girl": "Girls",
        "kids": "Kids", "kid": "Kids",
        "unisex": "Unisex"
    }
    for term, mapped_value in gender_map.items():
        if term in query_lower:
            gender = mapped_value
            break

    # --- Category Mapping ---
    category_map = {
        "shirt": "Shirts",
        "tshirt": "Tshirts",
        "t-shirt": "Tshirts",
        "jeans": "Jeans",
        "watch": "Watches",
        "kurta": "Kurtas",
        "dress": "Dresses",
        "trousers": "Trousers", "pants": "Trousers",
        "shorts": "Shorts",
        "footwear": "Footwear",
        "shoes": "Shoes",
        "fashion": "Apparel"
    }
    for term, mapped_value in category_map.items():
        if term in query_lower:
            category = mapped_value
            break

    # --- SubCategory Mapping ---
    subCategory_list = [
        "Accessories", "Apparel Set", "Bags", "Bath and Body", "Beauty Accessories",
        "Belts", "Bottomwear", "Cufflinks", "Dress", "Eyes", "Eyewear", "Flip Flops",
        "Fragrance", "Free Gifts", "Gloves", "Hair", "Headwear", "Home Furnishing",
        "Innerwear", "Jewellery", "Lips", "Loungewear and Nightwear", "Makeup",
        "Mufflers", "Nails", "Perfumes", "Sandal", "Saree", "Scarves", "Shoe Accessories",
        "Shoes", "Skin", "Skin Care", "Socks", "Sports Accessories", "Sports Equipment",
        "Stoles", "Ties", "Topwear", "Umbrellas", "Vouchers", "Wallets", "Watches",
        "Water Bottle", "Wristbands"
    ]
    if "topwear" in query_lower or "top" in query_lower:
        subcategory = "Topwear"
    else:
        query_words = query_lower.split()
        for subcat in subCategory_list:
            if subcat.lower() in query_words:
                subcategory = subcat
                break

    # --- Color Extraction ---
    color_list = [
        "red", "blue", "green", "yellow", "black", "white",
        "orange", "pink", "purple", "brown", "grey", "beige"
    ]
    for c in color_list:
        if c in query_lower:
            color = c.capitalize()
            break

    # --- Invalid pairs ---
    invalid_pairs = {
        ("Men", "Dresses"), ("Men", "Sarees"), ("Men", "Skirts"),
        ("Boys", "Dresses"), ("Boys", "Sarees"),
        ("Girls", "Boxers"), ("Men", "Heels")
    }
    if (gender, category) in invalid_pairs:
        print(f"⚠️ Invalid pair: {gender} + {category}, dropping gender")
        gender = None

    # --- Fallback for missing category ---
    if gender and not category:
        category = "Apparel"

    # --- Refine subcategory for party/wedding-related queries ---
    if "party" in query_lower or "wedding" in query_lower or "cocktail" in query_lower:
        if subcategory in ["Loungewear and Nightwear", "Nightdress", "Innerwear"]:
            subcategory = None  # reset it to avoid filtering into wrong items


    return gender, category, subcategory, color

# ------------------- Search Functions -------------------
def search_fashion(query: str, alpha: float, start: int = 0, end: int = 12, gender_override: str = None):
    intent = extract_intent_from_openai(query)

    include = intent.get("include", {})
    exclude = intent.get("exclude", {})

    gender = include.get("gender")
    category = include.get("category")
    subcategory = include.get("subcategory")
    color = include.get("color")

    # Apply override from dropdown
    if gender_override:
        gender = gender_override

    # Build Pinecone filter
    filter = {}

    # Inclusion filters
    if gender:
        filter["gender"] = gender
    if category:
        if category in ["Footwear", "Shoes"]:
            filter["articleType"] = {"$regex": ".*(Shoe|Footwear).*"}
        else:
            filter["articleType"] = category
    if subcategory:
        filter["subCategory"] = subcategory
    
    # Step 4: Exclude irrelevant items for party-like queries
    query_lower = query.lower()
    if any(word in query_lower for word in ["party", "wedding", "cocktail", "traditional", "reception"]):
        filter.setdefault("subCategory", {})
        if isinstance(filter["subCategory"], dict):
            filter["subCategory"]["$nin"] = [
                "Loungewear and Nightwear", "Nightdress", "Innerwear", "Sleepwear", "Vests", "Boxers"
            ]


    if color:
        filter["baseColour"] = color

    # Exclusion filters
    exclude_filter = {}
    if exclude.get("color"):
        exclude_filter["baseColour"] = {"$ne": exclude["color"]}
    if exclude.get("subcategory"):
        exclude_filter["subCategory"] = {"$ne": exclude["subcategory"]}
    if exclude.get("category"):
        exclude_filter["articleType"] = {"$ne": exclude["category"]}

    # Combine all filters
    if filter and exclude_filter:
        final_filter = {"$and": [filter, exclude_filter]}
    elif filter:
        final_filter = filter
    elif exclude_filter:
        final_filter = exclude_filter
    else:
        final_filter = None

    print(f"🔍 Using filter: {final_filter} (showing {start} to {end})")

    # Hybrid encoding
    sparse = bm25.encode_queries(query)
    dense = model.encode(query).tolist()
    hdense, hsparse = hybrid_scale(dense, sparse, alpha=alpha)

    result = index.query(
        top_k=100,
        vector=hdense,
        sparse_vector=hsparse,
        include_metadata=True,
        filter=final_filter
    )

    # Retry fallback
    if len(result["matches"]) == 0:
        print("⚠️ No results, retrying with alpha=0 sparse only")
        hdense, hsparse = hybrid_scale(dense, sparse, alpha=0)
        result = index.query(
            top_k=100,
            vector=hdense,
            sparse_vector=hsparse,
            include_metadata=True,
            filter=final_filter
        )

    # Format results
    imgs_with_captions = []
    seen_hashes = set()

    for r in result["matches"]:
        idx = int(r["id"])
        img = images[idx]
        meta = r.get("metadata", {})
        if not isinstance(img, Image.Image):
            img = Image.fromarray(np.array(img))
        padded = ImageOps.pad(img, (256, 256), color="white")
        caption = str(meta.get("productDisplayName", "Unknown Product"))

        if not is_duplicate(padded, seen_hashes):
            imgs_with_captions.append((padded, caption))

        if len(imgs_with_captions) >= end:
            break

    return imgs_with_captions

def search_by_image(uploaded_image, alpha=0.5, start=0, end=12):
    # Step 1: Preprocess image for CLIP model
    processed = clip_processor(images=uploaded_image, return_tensors="pt").to(device)

    with torch.no_grad():
        image_vec = clip_model.get_image_features(**processed)
        image_vec = image_vec.cpu().numpy().flatten().tolist()

    # Step 2: Query Pinecone index for similar images
    result = index.query(
        top_k=100,  # fetch more to allow deduplication
        vector=image_vec,
        include_metadata=True
    )

    matches = result["matches"]
    imgs_with_captions = []
    seen_hashes = set()

    # Step 3: Deduplicate based on image hash
    for r in matches:
        idx = int(r["id"])
        img = images[idx]
        meta = r.get("metadata", {})
        caption = str(meta.get("productDisplayName", "Unknown Product"))

        if not isinstance(img, Image.Image):
            img = Image.fromarray(np.array(img))

        padded = ImageOps.pad(img, (256, 256), color="white")

        if not is_duplicate(padded, seen_hashes):
            imgs_with_captions.append((padded, caption))

        if len(imgs_with_captions) >= end:
            break

    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

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 = """
/* === Background Styling === */
# html, body {
#     margin: 0;
#     padding: 0;
#     height: 100%;
#     overflow: auto;
# }
html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
}



# #app-bg {
#     min-height: 100vh;
#     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-y: auto;
#     padding: 24px;
# }
#app-bg {
    background: radial-gradient(circle at center, #C2C5EF 0%, #E0E2F5 100%) !important;
    background-attachment: fixed;
    padding: 24px;
    width: 100%;
}




/* === Main Content Container === */
# #main-container {
#     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;
# }

#main-container {
    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;
    
}



/* === 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);
}

/* === Headings === */
h1, .gr-markdown h1 {
    font-size: 2.2rem !important;
    font-weight: bold;
    color: #22284F;
    text-align: center;
    margin-bottom: 1rem;
}

/* === 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: 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;
    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);
}
.gr-gallery-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* === Audio & Image === */
.gr-audio, .gr-image {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto;
    border-radius: 12px;
    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 === */
.gr-markdown:last-child {
    text-align: center;
    font-size: 14px;
    color: #666;
    padding-top: 1rem;
}

/* === Responsive === */
@media (max-width: 768px) {
    #main-container {
        width: 100%;
        margin: 8px;
        padding: 12px;
    }

    .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;
    }
}

"""



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()