Update app.py

app.py

@@ -47,14 +47,13 @@ logo_b64 = image_to_base64("logo.jpg")
 profile_b64 = image_to_base64("232px-Tv_the_muppet_show_bein_green.jpg")
 
 # ==========================================
-# 3. BACKEND LOGIC (UPDATED FOR 3 SEPARATE OUTPUTS)
+# 3. BACKEND LOGIC
 # ==========================================
 def get_embedding_via_api(text):
     if not client: raise ValueError("HF_TOKEN missing")
     response = client.feature_extraction(text, model=API_MODEL)
     return np.array(response)
 
-# UPDATED: Returns a LIST of 3 strings instead of one big string
 def find_similar_recipes_list(query_text):
     if stored_embeddings is None: return ["Database error."] * 3
     query_vec = get_embedding_via_api("Represent this recipe for retrieving similar dishes: " + query_text)
@@ -67,15 +66,12 @@ def find_similar_recipes_list(query_text):
     for idx in top_indices:
         row = df_recipes.iloc[idx]
         title = row['Title']
-        desc = str(row['Raw_Output'])[:200] + "..." # Truncate for UI card
-        
-        # Markdown format for individual card
+        desc = str(row['Raw_Output'])[:200] + "..."
         card_content = f"### 🏆 {title}\n\n{desc}"
         results_list.append(card_content)
     
-    # Ensure we always return exactly 3 items (pad if fewer matches found)
     while len(results_list) < 3:
-        results_list.append("No match found.")
+        results_list.append("")
         
     return results_list
 
@@ -87,7 +83,6 @@ def format_recipe(json_data):
     text = f"🍽️ {title}\n\n🛒 INGREDIENTS:\n{ing}\n\n🍳 INSTRUCTIONS:\n{inst}"
     return text, f"{title} {ing} {inst}"
 
-# UPDATED: Returns 4 outputs (1 text + 3 similar cards)
 def magic_pipeline(image_path):
     if not hf_token: return "Error: HF_TOKEN missing", "", "", ""
     try:
@@ -162,8 +157,6 @@ body, .gradio-container { background-color: #f0f2f5; }
     transition: all 0.2s ease;
 }
 .nav-btn:hover { background-color: #e4e6eb !important; color: #050505 !important; }
-
-/* Selected State */
 .nav-btn.selected { 
     background-color: #e7f3ff !important; 
     color: #1877f2 !important; 
@@ -180,14 +173,14 @@ body, .gradio-container { background-color: #f0f2f5; }
     margin-bottom: 20px;
 }
 
-/* Similar Recipe Cards (Special Look) */
+/* Similar Recipe Cards */
 .sim-card {
     background: #fff;
     border: 1px solid #eee;
     border-radius: 8px;
     padding: 15px;
     height: 100%;
-    border-top: 4px solid #1877f2; /* Blue accent top */
+    border-top: 4px solid #1877f2;
 }
 
 /* Right Side Trending Box */
@@ -200,6 +193,11 @@ body, .gradio-container { background-color: #f0f2f5; }
     transition: background 0.2s;
 }
 .trend-box:hover { background: #f0f2f5; cursor: pointer; }
+
+/* FIX: Force Gap in the Upload Row */
+.gap-fix {
+    gap: 25px !important; 
+}
 """
 
 # ==========================================
@@ -208,126 +206,4 @@ body, .gradio-container { background-color: #f0f2f5; }
 with gr.Blocks(title="Legacy Kitchen") as demo:
     
     # --- HEADER ---
-    gr.HTML(f"""
-        <div class="custom-header">
-            <div class="logo-area">
-                <img src="data:image/jpeg;base64,{logo_b64}" class="logo-img">
-                <div class="text-area">
-                    <span class="app-name">Legacy Kitchen</span>
-                    <span class="app-slogan">Turning Handwritten Notes into a Digital Cookbook.</span>
-                </div>
-            </div>
-            <div style="color: #65676b; font-weight: 600;">v3.0</div>
-        </div>
-    """)
-
-    with gr.Row():
-        
-        # --- LEFT SIDEBAR ---
-        with gr.Column(scale=1, min_width=200):
-            gr.HTML(f"""
-            <div style="display:flex; align-items:center; padding: 10px 10px 5px 10px;">
-                <img src="data:image/jpeg;base64,{profile_b64}" style="width:40px; height:40px; border-radius:50%; margin-right:10px; object-fit:cover;">
-                <b style="font-size: 16px;">My Profile</b>
-            </div>
-            """)
-            gr.HTML("<hr style='border: 0; border-top: 1px solid #e4e6eb; margin: 10px 0 20px 0;'>")
-            
-            nav_digital = gr.Button("✨   AI Digitizer", elem_classes=["nav-btn", "selected"])
-            nav_feed = gr.Button("📰   News Feed", elem_classes=["nav-btn"])
-            nav_about = gr.Button("ℹ️   About", elem_classes=["nav-btn"])
-
-        # --- CENTER CONTENT ---
-        with gr.Column(scale=3):
-            
-            # === VIEW 1: AI DIGITALIZER (Default) ===
-            with gr.Group(visible=True) as digitalizer_view:
-                
-                # SECTION 1: UPLOAD & TEXT (Side by Side)
-                with gr.Row():
-                    # Left: Upload & Button
-                    with gr.Column(scale=1):
-                        gr.Markdown("### 1. Upload Note", elem_classes=["content-card"])
-                        with gr.Group(elem_classes=["content-card"]):
-                            input_img = gr.Image(type="filepath", label="Upload", height=300)
-                            magic_btn = gr.Button("✨ Convert to Digital", variant="primary", size="lg")
-                    
-                    # Right: Digitized Text Result
-                    with gr.Column(scale=1):
-                        gr.Markdown("### 2. Digital Text", elem_classes=["content-card"])
-                        with gr.Group(elem_classes=["content-card"]):
-                            out_text = gr.Textbox(label="Result", lines=12, interactive=False, show_label=False)
-
-                # SECTION 2: SIMILAR RECIPES (Below, 3 distinct cards)
-                gr.Markdown("### 3. Similar Recipes from Database")
-                with gr.Row():
-                    with gr.Column(elem_classes=["sim-card"]):
-                        sim1 = gr.Markdown("Match #1 will appear here...")
-                    with gr.Column(elem_classes=["sim-card"]):
-                        sim2 = gr.Markdown("Match #2 will appear here...")
-                    with gr.Column(elem_classes=["sim-card"]):
-                        sim3 = gr.Markdown("Match #3 will appear here...")
-
-                # UPDATED CLICK EVENT: Returns 4 outputs
-                magic_btn.click(magic_pipeline, input_img, [out_text, sim1, sim2, sim3])
-
-            # === VIEW 2: FEED (Hidden) ===
-            with gr.Group(visible=False) as feed_view:
-                with gr.Group(elem_classes=["content-card"]):
-                    with gr.Row():
-                        gr.HTML(f'<img src="data:image/jpeg;base64,{profile_b64}" style="width:40px; height:40px; border-radius:50%; object-fit:cover;">')
-                        gr.Textbox(placeholder=f"What recipe are you cooking today?", show_label=False, container=False, scale=10)
-                
-                if not df_recipes.empty:
-                    feed_samples = df_recipes.sample(10)
-                    for index, row in feed_samples.iterrows():
-                        user_name = random.choice(["Grandma Rose", "Chef Mike", "Sarah J."])
-                        emoji = random.choice(["🥘", "🥗", "🍰", "🌮"])
-                        
-                        with gr.Group(elem_classes=["content-card"]):
-                            gr.HTML(f"""
-                            <div style="display:flex; gap:10px; align-items:center; margin-bottom:12px;">
-                                <div style="width:40px; height:40px; background:#e4e6eb; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px;">{emoji}</div>
-                                <div><b>{user_name}</b><br><span style="color:gray; font-size:12px;">2h · 🌍 Public</span></div>
-                            </div>
-                            """)
-                            gr.Markdown(f"### {row['Title']}")
-                            gr.Markdown(f"{str(row['Raw_Output'])[:250]}...")
-                            with gr.Row():
-                                gr.Button("👍 Like", size="sm", variant="secondary")
-                                gr.Button("💬 Comment", size="sm", variant="secondary")
-                                gr.Button("↗️ Share", size="sm", variant="secondary")
-                else:
-                    gr.Markdown("⚠️ Database is empty.")
-
-            # === VIEW 3: ABOUT (Hidden) ===
-            with gr.Group(visible=False) as about_view:
-                with gr.Group(elem_classes=["content-card"]):
-                    gr.Markdown("# ℹ️ About Legacy Kitchen\n\n**Turning Handwritten Notes into a Digital Cookbook.**")
-
-        # --- RIGHT COLUMN (Trending) ---
-        with gr.Column(scale=1, min_width=200):
-            gr.Markdown("### Trending Recipes")
-            def trend_box(title, likes):
-                return f"<div class='trend-box'><b>{title}</b><br><span style='color:gray; font-size:12px;'>{likes} likes</span></div>"
-            gr.HTML(trend_box("🍜 Ramen Hack", "12k") + trend_box("🍪 Best Cookies", "8k") + trend_box("🍰 Cheese Cake", "15k") + trend_box("🍪 Nana's Tahini Cookies", "9k"))
-
-    # ==========================================
-    # 6. JAVASCRIPT LOGIC
-    # ==========================================
-    def go_digi():
-        return (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]))
-
-    def go_feed():
-        return (gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"]))
-
-    def go_about():
-        return (gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn", "selected"]))
-
-    outputs_ui = [digitalizer_view, feed_view, about_view, nav_digital, nav_feed, nav_about]
-    nav_digital.click(go_digi, None, outputs_ui)
-    nav_feed.click(go_feed, None, outputs_ui)
-    nav_about.click(go_about, None, outputs_ui)
-
-if __name__ == "__main__":
-    demo.launch(theme=theme, css=modern_css)
+    gr.