Update app.py

app.py

@@ -2,6 +2,7 @@ import gradio as gr
 import torch
 import pandas as pd
 import numpy as np
+import os
 from PIL import Image
 from transformers import AutoProcessor, AutoModel
 from datasets import load_dataset
@@ -32,13 +33,12 @@ try:
     print("✅ System Ready!")
 except Exception as e:
     print(f"❌ Error loading parquet file: {e}")
-    print("⚠️ Please ensure 'food_embeddings_siglip.parquet' is uploaded to the Files tab.")
     db_features = None
 
-# --- 4. CORE SEARCH LOGIC ---
+# --- 4. CORE SEARCH LOGIC (FIXED) ---
 def find_best_matches(query_features, top_k=3):
     if db_features is None:
-        return [None] * top_k # Return empty list if DB failed
+        return []
     
     # Normalize query
     query_features = F.normalize(query_features, p=2, dim=1)
@@ -50,9 +50,20 @@ def find_best_matches(query_features, top_k=3):
     results = []
     for idx, score in zip(indices[0], scores[0]):
         idx = idx.item()
-        img = dataset[idx]['image']
+        
+        # CRITICAL FIX: Save image to disk instead of returning raw PIL object
+        # This prevents the "Too much data" error
+        img_data = dataset[idx]['image']
+        
+        # Create a unique filename for the cache
+        save_path = f"temp_result_{idx}.jpg"
+        img_data.save(save_path)
+        
         label = df.iloc[idx]['label_name']
-        results.append((img, f"{label} ({score:.2f})"))
+        
+        # Return the PATH (string) instead of the IMAGE (object)
+        results.append((save_path, f"{label} ({score:.2f})"))
+        
     return results
 
 # --- 5. GRADIO FUNCTIONS ---
@@ -70,24 +81,87 @@ def search_by_text(input_text):
         features = model.get_text_features(**inputs)
     return find_best_matches(features)
 
-# --- 6. BUILD UI ---
-with gr.Blocks(title="Food Matcher AI") as demo:
-    gr.Markdown("# 🍔 Visual Dish Matcher")
-    gr.Markdown("Upload a photo of food (or describe it) to find similar dishes in our database.")
+# --- 6. BUILD UI (Centered & Fixed) ---
+
+# CSS to center the app and limit width to 1000px
+custom_css = """
+.gradio-container {
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto !important; 
+}
+h1 {
+    text-align: center;
+    color: #E67E22;
+}
+"""
+
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="Food Matcher AI") as demo:
     
-    with gr.Tab("Image Search"):
+    # --- Header ---
+    with gr.Row():
+        gr.Markdown("# 🍔 Visual Dish Matcher (SigLIP)")
+    
+    gr.Markdown(
+        "Upload a food photo or describe a craving. We'll find the closest matches from our database.",
+        elem_classes=["center-text"]
+    )
+
+    # --- Video Accordion ---
+    with gr.Accordion("📺 Watch Demo Video", open=False):
+        gr.HTML('<div style="display:flex; justify-content:center;"><iframe width="560" height="315" src="https://www.youtube.com/embed/IXeIxYHi0Es" frameborder="0" allowfullscreen></iframe></div>')
+
+    # --- Main Interface ---
+    with gr.Tab("🖼️ Search by Image"):
+        # Split layout: 1/3 Left (Input), 2/3 Right (Results)
         with gr.Row():
-            img_input = gr.Image(type="pil", label="Upload Food Image")
-            img_gallery = gr.Gallery(label="Top Matches")
-        btn_img = gr.Button("Find Similar Dishes")
+            
+            # --- Left Column: Input ---
+            with gr.Column(scale=1): 
+                img_input = gr.Image(
+                    type="pil", 
+                    label="Your Photo", 
+                    height=300  # Fixed height
+                )
+                btn_img = gr.Button("🔍 Find Matches", variant="primary", size="lg")
+            
+            # --- Right Column: Output ---
+            with gr.Column(scale=2):
+                img_gallery = gr.Gallery(
+                    label="Similar Dishes", 
+                    columns=3,           
+                    height=350,          
+                    object_fit="contain" 
+                )
+        
         btn_img.click(search_by_image, inputs=img_input, outputs=img_gallery)
 
-    with gr.Tab("Text Search"):
+    with gr.Tab("📝 Search by Text"):
         with gr.Row():
-            txt_input = gr.Textbox(label="Describe the food (e.g., 'Spicy Tacos')")
-            txt_gallery = gr.Gallery(label="Top Matches")
-        btn_txt = gr.Button("Search by Description")
+            
+            # --- Left Column: Input ---
+            with gr.Column(scale=1):
+                txt_input = gr.Textbox(
+                    label="Describe it", 
+                    placeholder="e.g. 'Spicy Tacos' or 'Chocolate Cake'",
+                    lines=4
+                )
+                btn_txt = gr.Button("🔍 Search", variant="primary", size="lg")
+            
+            # --- Right Column: Output ---
+            with gr.Column(scale=2):
+                txt_gallery = gr.Gallery(
+                    label="Similar Dishes", 
+                    columns=3, 
+                    height=350, 
+                    object_fit="contain"
+                )
+
         btn_txt.click(search_by_text, inputs=txt_input, outputs=txt_gallery)
 
+    # --- Footer ---
+    gr.Markdown("---")
+    gr.Markdown("By Matan Kriel & Odeya Shmuel | Powered by Google SigLIP", elem_id="footer")
+
 # Launch
 demo.launch()