Update app.py

app.py

@@ -4,13 +4,12 @@ import pickle
 import numpy as np
 import os
 import random
-import traceback
 from huggingface_hub import InferenceClient
 from sklearn.metrics.pairwise import cosine_similarity
 from IO_pipeline import RecipeDigitalizerPipeline 
 
 # ==========================================
-# 1. DATA LOADING & SETUP
+# 1. SETUP & DATA LOADING
 # ==========================================
 hf_token = os.getenv("HF_TOKEN")
 API_MODEL = "BAAI/bge-small-en-v1.5"
@@ -25,6 +24,7 @@ try:
         if isinstance(data, dict):
             stored_embeddings = np.array(data['embeddings'])
         elif isinstance(data, pd.DataFrame):
+            # Fallback for dataframe format
             target_col = next((c for c in ['embedding', 'embeddings', 'vectors'] if c in data.columns), None)
             stored_embeddings = np.vstack(data[target_col].values) if target_col else data
         else:
@@ -36,7 +36,7 @@ except Exception as e:
     stored_embeddings = None
 
 # ==========================================
-# 2. BACKEND LOGIC
+# 2. LOGIC
 # ==========================================
 def get_embedding_via_api(text):
     if not client: raise ValueError("HF_TOKEN missing")
@@ -45,7 +45,6 @@ def get_embedding_via_api(text):
 
 def find_similar_recipes(query_text):
     if stored_embeddings is None: return "Database error."
-    
     query_vec = get_embedding_via_api("Represent this recipe for retrieving similar dishes: " + query_text)
     if len(query_vec.shape) == 1: query_vec = query_vec.reshape(1, -1)
     
@@ -80,30 +79,149 @@ def magic_pipeline(image_path):
         return f"Error: {e}", f"Error: {e}"
 
 # ==========================================
-# 3. UI STYLING (The "Facebook" Look)
+# 3. CSS STYLING (With Logo Support)
 # ==========================================
 fb_css = """
-body {background-color: #f0f2f5 !important; font-family: 'Segoe UI', Helvetica, Arial, sans-serif;}
+body {background-color: #f0f2f5 !important; font-family: Helvetica, Arial, sans-serif;}
 
-/* Header */
 .fb-header {
     background-color: #ffffff; 
     color: #1877f2; 
-    padding: 10px 20px; 
+    padding: 10px 20px;
     font-size: 28px; 
     font-weight: 900;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    margin-bottom: 20px;
     border-bottom: 1px solid #ddd;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
 }
 
-/* Sidebar Styling */
-.sidebar-container {
-    padding-right: 10px;
+.logo-img {
+    height: 40px;
+    margin-right: 15px;
+    border-radius: 5px;
 }
+
 .sidebar-btn {
     background-color: transparent !important;
     color: #050505 !important;
     text-align: left !important;
     border: none !important;
-    font
+    font-weight: 600 !important;
+    padding: 12px !important;
+    font-size: 16px !important;
+    box-shadow: none !important;
+    width: 100% !important;
+    border-radius: 8px !important;
+}
+.sidebar-btn:hover { background-color: #e4e6eb !important; }
+
+.fb-card {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.avatar {
+    width: 40px; height: 40px; 
+    background-color: #e4e6eb; 
+    border-radius: 50%; 
+    text-align: center;
+    line-height: 40px;
+    margin-right: 10px;
+}
+"""
+
+# ==========================================
+# 4. LAYOUT
+# ==========================================
+with gr.Blocks(css=fb_css, title="Legacy Kitchen") as demo:
+    
+    # --- HEADER WITH LOGO ---
+    # We use 'file/logo.jpg' to access local files in Gradio/HF Spaces
+    gr.HTML("""
+        <div class="fb-header">
+            <img src="file/logo.jpg" class="logo-img" alt="Logo">
+            Legacy Kitchen
+        </div>
+    """)
+
+    with gr.Row():
+        
+        # --- LEFT SIDEBAR ---
+        with gr.Column(scale=1, min_width=250):
+            gr.HTML('<div style="display:flex; align-items:center; margin-bottom:20px;"><div class="avatar">👤</div><b>My Profile</b></div>')
+            
+            nav_feed = gr.Button("📰   Feed", elem_classes=["sidebar-btn"])
+            nav_digital = gr.Button("📸   Digitizer", elem_classes=["sidebar-btn"])
+            nav_saved = gr.Button("🔖   Saved", elem_classes=["sidebar-btn"])
+            
+            gr.Markdown("---")
+            gr.Markdown("Privacy · Terms · Cookies")
+
+        # --- RIGHT CONTENT ---
+        with gr.Column(scale=3):
+            
+            # VIEW 1: FEED
+            with gr.Group(visible=True) as feed_view:
+                with gr.Group(elem_classes=["fb-card"]):
+                    with gr.Row():
+                        gr.HTML('<div class="avatar">👤</div>')
+                        gr.Textbox(placeholder="What's cooking?", show_label=False, container=False, scale=5)
+
+                if not df_recipes.empty:
+                    feed_samples = df_recipes.sample(10)
+                    for index, row in feed_samples.iterrows():
+                        with gr.Group(elem_classes=["fb-card"]):
+                            user = random.choice(["Grandma Rose", "Chef Mike", "Sarah J."])
+                            emoji = random.choice(["🥘", "🥗", "🍰"])
+                            
+                            gr.HTML(f"""
+                            <div style="display:flex; margin-bottom:10px;">
+                                <div class="avatar">{emoji}</div>
+                                <div><b>{user}</b><br><span style="color:gray; font-size:12px;">2h · 🌍</span></div>
+                            </div>
+                            """)
+                            
+                            gr.Markdown(f"**{row['Title']}**\n\n{str(row['Raw_Output'])[:200]}... [Read More]")
+                            
+                            with gr.Row():
+                                like_btn = gr.Button("👍 Like", size="sm")
+                                gr.Button("💬 Comment", size="sm")
+                                gr.Button("↗️ Share", size="sm")
+
+                            def toggle_like(x): return "👍 Liked!"
+                            like_btn.click(toggle_like, like_btn, like_btn)
+                else:
+                    gr.Markdown("Database empty.")
+
+            # VIEW 2: DIGITALIZER
+            with gr.Group(visible=False) as digitalizer_view:
+                gr.Markdown("### 📸 Digitize Recipe", elem_classes=["fb-card"])
+                
+                with gr.Group(elem_classes=["fb-card"]):
+                    with gr.Row():
+                        with gr.Column():
+                            input_img = gr.Image(type="filepath", label="Upload Photo")
+                            magic_btn = gr.Button("✨ Digitize", variant="primary")
+                        with gr.Column():
+                            out_text = gr.Textbox(label="Text", lines=10)
+                            out_sim = gr.Textbox(label="Similar", lines=10)
+                    
+                    magic_btn.click(magic_pipeline, input_img, [out_text, out_sim])
+            
+            # VIEW 3: SAVED
+            with gr.Group(visible=False) as saved_view:
+                gr.Markdown("### 🔖 Saved Recipes", elem_classes=["fb-card"])
+                gr.Markdown("No saved recipes yet.")
+
+    # Nav Logic
+    nav_feed.click(lambda: (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)), None, [feed_view, digitalizer_view, saved_view])
+    nav_digital.click(lambda: (gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)), None, [feed_view, digitalizer_view, saved_view])
+    nav_saved.click(lambda: (gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)), None, [feed_view, digitalizer_view, saved_view])
+
+if __name__ == "__main__":
+    demo.launch()