commit12

app.py

@@ -1,334 +1,61 @@
-"""Hybrid Multimodal Vector Search for E-Commerce Product Discovery"""
-
-import os
-import time
-import numpy as np
-from PIL import Image, ImageOps
-from datasets import load_dataset
-from pinecone import Pinecone, ServerlessSpec
-from pinecone_text.sparse import BM25Encoder
-from sentence_transformers import SentenceTransformer
-import torch
-import gradio as gr
-import pandas as pd
-
-# Set Pinecone API Key and config
-os.environ["PINECONE_API_KEY"] = "pcsk_TMCYK_LrbmZMTDhkxTjUXcr8iTcQ8LxurwKBFDvv4ahFis8SVob7QexVPPEt6g2zW6d3g"
-api_key = os.environ.get('PINECONE_API_KEY')
-pc = Pinecone(api_key=api_key)
-
-cloud = os.environ.get('PINECONE_CLOUD', 'aws')
-region = os.environ.get('PINECONE_REGION', 'us-east-1')
-spec = ServerlessSpec(cloud=cloud, region=region)
-index_name = "hybrid-image-search"
-
-# Create and connect to index
-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)
-index.describe_index_stats()
-
-# Load dataset
-fashion = load_dataset("ashraq/fashion-product-images-small", split="train")
-images = fashion["image"]
-metadata = fashion.remove_columns("image").to_pandas()
-
-# Fit BM25
-bm25 = BM25Encoder()
-bm25.fit(metadata['productDisplayName'])
-
-# Load CLIP model
-device = 'cuda' if torch.cuda.is_available() else 'cpu'
-model = SentenceTransformer('sentence-transformers/clip-ViT-B-32', device=device)
-
-# Hybrid scaler
-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
-
-# Metadata filter extractor
-from PIL import Image, ImageOps
-import numpy as np
-
-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", "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", "dresses": "Dresses",
-        "trousers": "Trousers", "pants": "Trousers",
-        "shorts": "Shorts",
-        "footwear": "Footwear",
-        "shoes": "Footwear",
-        "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:
-        for subcat in subCategory_list:
-            if subcat.lower() in query_lower:
-                subcategory = subcat
-                break
-
-    # --- Color Extraction ---
-    colors = [
-        "red","blue","green","yellow","black","white",
-        "orange","pink","purple","brown","grey","beige"
-    ]
-    for c in colors:
-        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
-    if gender and not category:
-        category = "Apparel"
-
-    return gender, category, subcategory, color
-
-
-def search_fashion(query: str, alpha: float):
-    gender, category, subcategory, color = extract_metadata_filters(query)
-
-    # Build Pinecone filter
-    filter = {}
-    if gender:
-        filter["gender"] = gender
-    if category:
-        filter["articleType"] = category
-    if subcategory:
-        filter["subCategory"] = subcategory
-    if color:
-        filter["baseColour"] = color
-
-    print(f"🔍 Using filter: {filter}")
-
-    # hybrid
-    sparse = bm25.encode_queries(query)
-    dense = model.encode(query).tolist()
-    hdense, hsparse = hybrid_scale(dense, sparse, alpha=alpha)
-
-    # initial search
-    result = index.query(
-        top_k=12,
-        vector=hdense,
-        sparse_vector=hsparse,
-        include_metadata=True,
-        filter=filter if filter else None
-    )
-
-    # fallback: if zero results with gender, relax gender
-    if gender and len(result["matches"]) == 0:
-        print(f"⚠️ No results with gender {gender}, relaxing gender filter")
-        filter.pop("gender")
-        result = index.query(
-            top_k=12,
-            vector=hdense,
-            sparse_vector=hsparse,
-            include_metadata=True,
-            filter=filter if filter else None
-        )
-
-    # results
-    imgs_with_captions = []
-    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"))
-        imgs_with_captions.append((padded, caption))
-
-    return imgs_with_captions
-
-# Search by image only
-def search_by_image_only(uploaded_image, top_k=12):
-    if uploaded_image is None:
-        return []
-
-    uploaded_image = uploaded_image.convert("RGB")
-    dense_vec = model.encode(uploaded_image).tolist()
-
-    result = index.query(
-        vector=dense_vec,
-        top_k=top_k,
-        include_metadata=True
-    )
-
-    imgs_with_captions = []
-    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 = meta.get("productDisplayName", "Unknown Product")
-        imgs_with_captions.append((padded, caption))
-
-    return imgs_with_captions
-
-# Gradio UI
-import gradio as gr
-
-def search_fashion(query, alpha):
-    # Replace this stub with your real hybrid search logic
-    return [("Image", f"Result from text: {query} with alpha={alpha}") for _ in range(8)]
-
-def search_by_image_only(image):
-    # Replace this stub with your real image-based search logic
-    return [("Image", "Result from image search") for _ in range(6)]
-
-with gr.Blocks() as demo:
-    gr.Markdown("# 🛍️ Fashion Product Hybrid Search")
-
-    with gr.Row():
-        with gr.Column():
-            query = gr.Textbox(label="Enter your fashion search query")
-            alpha = gr.Slider(0, 1, value=0.5, label="Hybrid Weight (alpha: 0=sparse, 1=dense)")
-            search_btn = gr.Button("🔍 Search by Text")
-            search_results = gr.Gallery(label="Search Results", columns=8, height="40vh")
-            search_btn.click(fn=search_fashion, inputs=[query, alpha], outputs=search_results)
-
-        with gr.Column():
-            image_input = gr.Image(source="webcam", type="pil", label="📷 Capture an Image")
-            image_search_btn = gr.Button("🔍 Search by Image")
-            image_results = gr.Gallery(label="Image-Based Results", columns=6, height="40vh")
-            image_search_btn.click(fn=search_by_image_only, inputs=image_input, outputs=image_results)
-
-demo.launch()
-
-
-
-
-# # ------------------- Imports -------------------
-
+# """Hybrid Multimodal Vector Search for E-Commerce Product Discovery"""
 
 # import os
-# from pinecone import Pinecone, ServerlessSpec
-# from PIL import Image, ImageOps
+# import time
 # import numpy as np
+# from PIL import Image, ImageOps
 # from datasets import load_dataset
+# from pinecone import Pinecone, ServerlessSpec
 # from pinecone_text.sparse import BM25Encoder
 # from sentence_transformers import SentenceTransformer
 # import torch
-# from tqdm.auto import tqdm
 # import gradio as gr
+# import pandas as pd
 
-# # ------------------- Pinecone Setup -------------------
+# # Set Pinecone API Key and config
 # os.environ["PINECONE_API_KEY"] = "pcsk_TMCYK_LrbmZMTDhkxTjUXcr8iTcQ8LxurwKBFDvv4ahFis8SVob7QexVPPEt6g2zW6d3g"
 # api_key = os.environ.get('PINECONE_API_KEY')
 # pc = Pinecone(api_key=api_key)
 
+# cloud = os.environ.get('PINECONE_CLOUD', 'aws')
+# region = os.environ.get('PINECONE_REGION', 'us-east-1')
+# spec = ServerlessSpec(cloud=cloud, region=region)
 # index_name = "hybrid-image-search"
-# spec = ServerlessSpec(cloud="aws", region="us-east-1")
 
+# # Create and connect to index
 # if index_name not in pc.list_indexes().names():
-#     pc.create_index(index_name, dimension=512, metric="dotproduct", spec=spec)
-#     import time
+#     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)
+# index.describe_index_stats()
 
-# # ------------------- Dataset Loading -------------------
+# # Load dataset
 # fashion = load_dataset("ashraq/fashion-product-images-small", split="train")
 # images = fashion["image"]
 # metadata = fashion.remove_columns("image").to_pandas()
 
-# # ------------------- Encoders -------------------
+# # Fit BM25
 # bm25 = BM25Encoder()
-# bm25.fit(metadata["productDisplayName"])
-# model = SentenceTransformer('sentence-transformers/clip-ViT-B-32', device='cuda' if torch.cuda.is_available() else 'cpu')
+# bm25.fit(metadata['productDisplayName'])
 
-# # ------------------- Hybrid Scaling -------------------
-# def hybrid_scale(dense, sparse, alpha: float):
+# # Load CLIP model
+# device = 'cuda' if torch.cuda.is_available() else 'cpu'
+# model = SentenceTransformer('sentence-transformers/clip-ViT-B-32', device=device)
 
+# # Hybrid scaler
+# def hybrid_scale(dense, sparse, alpha: float):
 #     if alpha < 0 or alpha > 1:
 #         raise ValueError("Alpha must be between 0 and 1")
-#     # scale sparse and dense vectors to create hybrid search vecs
 #     hsparse = {
 #         'indices': sparse['indices'],
-#         'values':  [v * (1 - alpha) for v in sparse['values']]
+#         'values': [v * (1 - alpha) for v in sparse['values']]
 #     }
 #     hdense = [v * alpha for v in dense]
 #     return hdense, hsparse
 
-
-# # def search_fashion(query: str, alpha: float):
-# #     sparse = bm25.encode_queries(query)
-# #     dense = model.encode(query).tolist()
-# #     hdense, hsparse = hybrid_scale(dense, sparse, alpha=alpha)
-# #     result = index.query(
-# #         top_k=8,
-# #         vector=hdense,
-# #         sparse_vector=hsparse,
-# #         include_metadata=True
-# #     )
-# #     imgs = [images[int(r["id"])] for r in result["matches"]]
-# #     return imgs
-
-
-# # ------------------- Metadata Filter Extraction -------------------
+# # Metadata filter extractor
 # from PIL import Image, ImageOps
 # import numpy as np
 
@@ -452,7 +179,7 @@ demo.launch()
 #         print(f"⚠️ No results with gender {gender}, relaxing gender filter")
 #         filter.pop("gender")
 #         result = index.query(
-#             top_k=12,   
+#             top_k=12,
 #             vector=hdense,
 #             sparse_vector=hsparse,
 #             include_metadata=True,
@@ -472,6 +199,8 @@ demo.launch()
 #         imgs_with_captions.append((padded, caption))
 
 #     return imgs_with_captions
+
+# # Search by image only
 # def search_by_image_only(uploaded_image, top_k=12):
 #     if uploaded_image is None:
 #         return []
@@ -498,36 +227,335 @@ demo.launch()
 
 #     return imgs_with_captions
 
-
-# # ------------------- Gradio UI -------------------
-# custom_css = """
-# .search-btn { width: 100%; }
-# .gr-row { gap: 8px !important; }
-# .query-slider > div { margin-bottom: 4px !important; }
-# """
+# # Gradio UI
 # import gradio as gr
 
+# def search_fashion(query, alpha):
+#     # Replace this stub with your real hybrid search logic
+#     return [("Image", f"Result from text: {query} with alpha={alpha}") for _ in range(8)]
+
+# def search_by_image_only(image):
+#     # Replace this stub with your real image-based search logic
+#     return [("Image", "Result from image search") for _ in range(6)]
+
 # with gr.Blocks() as demo:
 #     gr.Markdown("# 🛍️ Fashion Product Hybrid Search")
 
-#     query = gr.Textbox(label="Enter your fashion search query")
-#     alpha = gr.Slider(0, 1, value=0.5, label="Hybrid Weight (alpha: 0=sparse, 1=dense)")
-#     search_btn = gr.Button("Search")
+#     with gr.Row():
+#         with gr.Column():
+#             query = gr.Textbox(label="Enter your fashion search query")
+#             alpha = gr.Slider(0, 1, value=0.5, label="Hybrid Weight (alpha: 0=sparse, 1=dense)")
+#             search_btn = gr.Button("🔍 Search by Text")
+#             search_results = gr.Gallery(label="Search Results", columns=8, height="40vh")
+#             search_btn.click(fn=search_fashion, inputs=[query, alpha], outputs=search_results)
+
+#         with gr.Column():
+#             image_input = gr.Image(source="webcam", type="pil", label="📷 Capture an Image")
+#             image_search_btn = gr.Button("🔍 Search by Image")
+#             image_results = gr.Gallery(label="Image-Based Results", columns=6, height="40vh")
+#             image_search_btn.click(fn=search_by_image_only, inputs=image_input, outputs=image_results)
+
+# demo.launch()
+
+
+
+
+# ------------------- Imports -------------------
+
+
+import os
+from pinecone import Pinecone, ServerlessSpec
+from PIL import Image, ImageOps
+import numpy as np
+from datasets import load_dataset
+from pinecone_text.sparse import BM25Encoder
+from sentence_transformers import SentenceTransformer
+import torch
+from tqdm.auto import tqdm
+import gradio as gr
+
+# ------------------- Pinecone Setup -------------------
+os.environ["PINECONE_API_KEY"] = "pcsk_TMCYK_LrbmZMTDhkxTjUXcr8iTcQ8LxurwKBFDvv4ahFis8SVob7QexVPPEt6g2zW6d3g"
+api_key = os.environ.get('PINECONE_API_KEY')
+pc = Pinecone(api_key=api_key)
+
+index_name = "hybrid-image-search"
+spec = ServerlessSpec(cloud="aws", region="us-east-1")
+
+if index_name not in pc.list_indexes().names():
+    pc.create_index(index_name, dimension=512, metric="dotproduct", spec=spec)
+    import time
+    while not pc.describe_index(index_name).status['ready']:
+        time.sleep(1)
+
+index = pc.Index(index_name)
+
+# ------------------- Dataset Loading -------------------
+fashion = load_dataset("ashraq/fashion-product-images-small", split="train")
+images = fashion["image"]
+metadata = fashion.remove_columns("image").to_pandas()
+
+# ------------------- Encoders -------------------
+bm25 = BM25Encoder()
+bm25.fit(metadata["productDisplayName"])
+model = SentenceTransformer('sentence-transformers/clip-ViT-B-32', device='cuda' if torch.cuda.is_available() else 'cpu')
+
+# ------------------- Hybrid Scaling -------------------
+def hybrid_scale(dense, sparse, alpha: float):
+
+    if alpha < 0 or alpha > 1:
+        raise ValueError("Alpha must be between 0 and 1")
+    # scale sparse and dense vectors to create hybrid search vecs
+    hsparse = {
+        'indices': sparse['indices'],
+        'values':  [v * (1 - alpha) for v in sparse['values']]
+    }
+    hdense = [v * alpha for v in dense]
+    return hdense, hsparse
+
+
+# def search_fashion(query: str, alpha: float):
+#     sparse = bm25.encode_queries(query)
+#     dense = model.encode(query).tolist()
+#     hdense, hsparse = hybrid_scale(dense, sparse, alpha=alpha)
+#     result = index.query(
+#         top_k=8,
+#         vector=hdense,
+#         sparse_vector=hsparse,
+#         include_metadata=True
+#     )
+#     imgs = [images[int(r["id"])] for r in result["matches"]]
+#     return imgs
 
-#     gallery = gr.Gallery(label="Search Results", columns=8, height="40vh")
 
-#     def run_search(q, a):
-#         return search_fashion(q, a)
+# ------------------- Metadata Filter Extraction -------------------
+from PIL import Image, ImageOps
+import numpy as np
 
-#     search_btn.click(run_search, inputs=[query, alpha], outputs=gallery)
+def extract_metadata_filters(query: str):
+    query_lower = query.lower()
+    gender = None
+    category = None
+    subcategory = None
+    color = None
 
-#     # ⬇️ ADD THIS RIGHT *HERE*, before `demo.launch()`
-#     gr.Markdown("## 🔍 Search Visually Similar Products by Uploading an Image")
+    # --- 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", "unisex": "Unisex"
+    }
+    for term, mapped_value in gender_map.items():
+        if term in query_lower:
+            gender = mapped_value
+            break
 
-#     image_input = gr.Image(type="pil", label="Upload an image")
-#     image_search_btn = gr.Button("Search by Image Only")
-#     image_results = gr.Gallery(label="Image-Based Results", columns=6, height="40vh")
+    # --- Category Mapping ---
+    category_map = {
+        "shirt": "Shirts",
+        "tshirt": "Tshirts", "t-shirt": "Tshirts",
+        "jeans": "Jeans",
+        "watch": "Watches",
+        "kurta": "Kurtas",
+        "dress": "Dresses", "dresses": "Dresses",
+        "trousers": "Trousers", "pants": "Trousers",
+        "shorts": "Shorts",
+        "footwear": "Footwear",
+        "shoes": "Footwear",
+        "fashion": "Apparel"
+    }
+    for term, mapped_value in category_map.items():
+        if term in query_lower:
+            category = mapped_value
+            break
 
-#     image_search_btn.click(fn=search_by_image_only, inputs=image_input, outputs=image_results)
+    # --- 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:
+        for subcat in subCategory_list:
+            if subcat.lower() in query_lower:
+                subcategory = subcat
+                break
 
-# demo.launch()
+    # --- Color Extraction ---
+    colors = [
+        "red","blue","green","yellow","black","white",
+        "orange","pink","purple","brown","grey","beige"
+    ]
+    for c in colors:
+        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
+    if gender and not category:
+        category = "Apparel"
+
+    return gender, category, subcategory, color
+
+
+def search_fashion(query: str, alpha: float):
+    gender, category, subcategory, color = extract_metadata_filters(query)
+
+    # Build Pinecone filter
+    filter = {}
+    if gender:
+        filter["gender"] = gender
+    if category:
+        filter["articleType"] = category
+    if subcategory:
+        filter["subCategory"] = subcategory
+    if color:
+        filter["baseColour"] = color
+
+    print(f"🔍 Using filter: {filter}")
+
+    # hybrid
+    sparse = bm25.encode_queries(query)
+    dense = model.encode(query).tolist()
+    hdense, hsparse = hybrid_scale(dense, sparse, alpha=alpha)
+
+    # initial search
+    result = index.query(
+        top_k=12,
+        vector=hdense,
+        sparse_vector=hsparse,
+        include_metadata=True,
+        filter=filter if filter else None
+    )
+
+    # fallback: if zero results with gender, relax gender
+    if gender and len(result["matches"]) == 0:
+        print(f"⚠️ No results with gender {gender}, relaxing gender filter")
+        filter.pop("gender")
+        result = index.query(
+            top_k=12,   
+            vector=hdense,
+            sparse_vector=hsparse,
+            include_metadata=True,
+            filter=filter if filter else None
+        )
+
+    # results
+    imgs_with_captions = []
+    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"))
+        imgs_with_captions.append((padded, caption))
+
+    return imgs_with_captions
+def search_by_image_only(uploaded_image, top_k=12):
+    if uploaded_image is None:
+        return []
+
+    uploaded_image = uploaded_image.convert("RGB")
+    dense_vec = model.encode(uploaded_image).tolist()
+
+    result = index.query(
+        vector=dense_vec,
+        top_k=top_k,
+        include_metadata=True
+    )
+
+    imgs_with_captions = []
+    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 = meta.get("productDisplayName", "Unknown Product")
+        imgs_with_captions.append((padded, caption))
+
+    return imgs_with_captions
+
+
+# ------------------- Gradio UI -------------------
+custom_css = """
+.search-btn {
+    width: 100%;
+}
+.gr-row {
+    gap: 8px !important;   /* slightly tighter column gap */
+}
+.query-slider > div {
+    margin-bottom: 4px !important;  /* reduce space between textbox and slider */
+}
+"""
+
+with gr.Blocks(css=custom_css) as demo:
+    gr.Markdown("# 🛍️ Fashion Product Hybrid Search")
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=5, elem_classes="query-slider"):
+            query = gr.Textbox(
+                label="Enter your fashion search query",
+                placeholder="Type something or leave blank to only use the image"
+            )
+            alpha = gr.Slider(
+                0, 1, value=0.5,
+                label="Hybrid Weight (alpha: 0=sparse, 1=dense)"
+            )
+        with gr.Column(scale=1):
+            image_input = gr.Image(
+                type="pil",
+                label="Upload an image (optional)",
+                height=256,
+                width=356,
+                show_label=True
+            )
+
+    search_btn = gr.Button("Search", elem_classes="search-btn")
+
+    gallery = gr.Gallery(
+        label="Search Results",
+        columns=6,
+        height="40vh"
+    )
+
+    def unified_search(q, uploaded_image, a):
+        if uploaded_image is not None:
+            return search_by_image(uploaded_image, a)
+        elif q.strip() != "":
+            return search_fashion(q, a)
+        else:
+            return []
+
+    search_btn.click(
+        unified_search,
+        inputs=[query, image_input, alpha],
+        outputs=gallery
+    )
+
+    gr.Markdown("Powered by your hybrid AI search model 🚀")
+
+demo.launch()