Update app.py

app.py

@@ -47,27 +47,37 @@ logo_b64 = image_to_base64("logo.jpg")
 profile_b64 = image_to_base64("232px-Tv_the_muppet_show_bein_green.jpg")
 
 # ==========================================
-# 3. BACKEND LOGIC
+# 3. BACKEND LOGIC (UPDATED FOR 3 SEPARATE OUTPUTS)
 # ==========================================
 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)
 
-def find_similar_recipes(query_text):
-    if stored_embeddings is None: return "Database error."
+# 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)
     if len(query_vec.shape) == 1: query_vec = query_vec.reshape(1, -1)
     
     scores = cosine_similarity(query_vec, stored_embeddings)[0]
     top_indices = scores.argsort()[-3:][::-1]
     
-    results = ""
+    results_list = []
     for idx in top_indices:
         row = df_recipes.iloc[idx]
-        desc = str(row['Raw_Output'])[:150] + "..."
-        results += f"🏆 Match: {row['Title']}\n📝 {desc}\n\n"
-    return results
+        title = row['Title']
+        desc = str(row['Raw_Output'])[:200] + "..." # Truncate for UI card
+        
+        # Markdown format for individual card
+        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.")
+        
+    return results_list
 
 def format_recipe(json_data):
     if "error" in json_data: return f"Error: {json_data['error']}", ""
@@ -77,17 +87,24 @@ 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", ""
+    if not hf_token: return "Error: HF_TOKEN missing", "", "", ""
     try:
         os.environ["HF_TOKEN"] = hf_token
         digitizer = RecipeDigitalizerPipeline()
         json_res = digitizer.run_pipeline(image_path)
         readable, query = format_recipe(json_res)
-        similar = find_similar_recipes(query) if query else "No search query."
-        return readable, similar
+        
+        if query:
+            sim_list = find_similar_recipes_list(query)
+        else:
+            sim_list = ["No query generated.", "", ""]
+            
+        return readable, sim_list[0], sim_list[1], sim_list[2]
+        
     except Exception as e:
-        return f"Error: {e}", f"Error: {e}"
+        return f"Error: {e}", "Error", "Error", "Error"
 
 # ==========================================
 # 4. MODERN UI THEME & CSS
@@ -107,7 +124,7 @@ body, .gradio-container { background-color: #f0f2f5; }
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid #e4e6eb;
-    padding: 10px 20px;
+    padding: 15px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -117,16 +134,18 @@ body, .gradio-container { background-color: #f0f2f5; }
     box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 }
 
-.logo-area { display: flex; align-items: center; gap: 15px; }
+.logo-area { display: flex; align-items: center; gap: 20px; }
 .logo-img { height: 120px; width: 120px; border-radius: 12px; object-fit: cover; border: 1px solid #ddd; }
-
+.text-area { display: flex; flex-direction: column; }
 .app-name { 
     font-weight: 800; 
-    font-size: 28px; 
+    font-size: 32px; 
     background: -webkit-linear-gradient(45deg, #1877f2, #6b21a8); 
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
+    line-height: 1.2;
 }
+.app-slogan { font-size: 16px; color: #65676b; font-weight: 500; }
 
 /* Sidebar Navigation */
 .nav-btn {
@@ -151,7 +170,7 @@ body, .gradio-container { background-color: #f0f2f5; }
     border-left: 4px solid #1877f2 !important;
 }
 
-/* Feed Cards */
+/* General Cards */
 .content-card {
     background: white;
     border-radius: 12px;
@@ -159,21 +178,16 @@ body, .gradio-container { background-color: #f0f2f5; }
     border: 1px solid #ddd;
     padding: 20px;
     margin-bottom: 20px;
-    transition: transform 0.2s;
 }
-.content-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
-
-/* Feed User Info */
-.feed-user-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
-.feed-avatar { width: 40px; height: 40px; background: #e4e6eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
-.feed-meta { display: flex; flex-direction: column; }
-.feed-name { font-weight: 700; color: #050505; font-size: 15px; }
-.feed-time { font-size: 12px; color: #65676b; }
 
-/* Innovation/Digitalizer Styling */
-.digitalizer-container {
-    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
-    border: 1px solid #1877f2;
+/* Similar Recipe Cards (Special Look) */
+.sim-card {
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    padding: 15px;
+    height: 100%;
+    border-top: 4px solid #1877f2; /* Blue accent top */
 }
 
 /* Right Side Trending Box */
@@ -198,28 +212,27 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
         <div class="custom-header">
             <div class="logo-area">
                 <img src="data:image/jpeg;base64,{logo_b64}" class="logo-img">
-                <span class="app-name">Legacy Kitchen</span>
+                <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;">v2.2 Beta</div>
+            <div style="color: #65676b; font-weight: 600;">v3.0</div>
         </div>
     """)
 
     with gr.Row():
         
-        # --- LEFT SIDEBAR (Navigation) ---
+        # --- LEFT SIDEBAR ---
         with gr.Column(scale=1, min_width=200):
-            # My Profile Section
             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>
             """)
-            
-            # Separator
             gr.HTML("<hr style='border: 0; border-top: 1px solid #e4e6eb; margin: 10px 0 20px 0;'>")
             
-            # FIX: Digitalizer is now FIRST and SELECTED by default
             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"])
@@ -227,30 +240,44 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
         # --- CENTER CONTENT ---
         with gr.Column(scale=3):
             
-            # === VIEW 1: AI DIGITALIZER (Now DEFAULT: visible=True) ===
+            # === VIEW 1: AI DIGITALIZER (Default) ===
             with gr.Group(visible=True) as digitalizer_view:
-                gr.Markdown("## 📸 Recipe Digitalizer", elem_classes=["content-card"])
                 
+                # SECTION 1: UPLOAD & TEXT (Side by Side)
                 with gr.Row():
-                    with gr.Column(elem_classes=["content-card", "digitalizer-container"]):
-                        input_img = gr.Image(type="filepath", label="Upload Handwritten Note", height=300)
-                        magic_btn = gr.Button("✨ Convert to Text", variant="primary", size="lg")
+                    # 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")
                     
-                    with gr.Column(elem_classes=["content-card"]):
-                        out_text = gr.Textbox(label="Digitized Text", lines=6, interactive=False)
-                        out_sim = gr.Textbox(label="Similar Recipes in Database", lines=6)
-                
-                magic_btn.click(magic_pipeline, input_img, [out_text, out_sim])
+                    # 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 (Now HIDDEN by default: visible=False) ===
+            # === VIEW 2: FEED (Hidden) ===
             with gr.Group(visible=False) as feed_view:
-                # "What's on your mind" Box
                 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)
                 
-                # Dynamic Feed Generation
                 if not df_recipes.empty:
                     feed_samples = df_recipes.sample(10)
                     for index, row in feed_samples.iterrows():
@@ -259,85 +286,45 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
                         
                         with gr.Group(elem_classes=["content-card"]):
                             gr.HTML(f"""
-                            <div class="feed-user-row">
-                                <div class="feed-avatar">{emoji}</div>
-                                <div class="feed-meta">
-                                    <span class="feed-name">{user_name}</span>
-                                    <span class="feed-time">2h · 🌍 Public</span>
-                                </div>
+                            <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]}...")
-                            gr.Markdown(f"*[Click to see full recipe...]*")
-                            
                             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. Please check your CSV file.")
+                    gr.Markdown("⚠️ Database is empty.")
 
-            # === VIEW 3: ABOUT ===
+            # === VIEW 3: ABOUT (Hidden) ===
             with gr.Group(visible=False) as about_view:
                 with gr.Group(elem_classes=["content-card"]):
-                    gr.Markdown("""
-                    # ℹ️ About Legacy Kitchen
-                    **Preserving Heritage through AI.**
-                    Legacy Kitchen allows you to upload photos of your grandmother's handwritten recipe cards and instantly converts them into digital text using OCR and AI models.
-                    """)
+                    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")
-            
-            # Helper to create trending box
             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>"""
-
-            # FIX: Added the 2 requested items
-            gr.HTML(trend_box("🍜 Ramen Hack", "12k") + 
-                    trend_box("🍪 Best Cookies", "8k") + 
-                    trend_box("🍰 Cheese Cake", "15k") + 
-                    trend_box("🍪 Nana's Tahini Cookies", "9k"))
+                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 (Client Side)
+    # 6. JAVASCRIPT LOGIC
     # ==========================================
-    
-    # FIX: Updated logic to match the new button order
-    # ORDER OF OUTPUTS: [DigitalizerView, FeedView, AboutView, NavDigital, NavFeed, NavAbout]
-    
     def go_digi():
-        return (
-            gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), # Views: Digi, Feed, About
-            gr.update(elem_classes=["nav-btn", "selected"]), # Nav Digi
-            gr.update(elem_classes=["nav-btn"]),             # Nav Feed
-            gr.update(elem_classes=["nav-btn"])              # Nav About
-        )
+        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"]) 
-        )
+        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"])
-        )
+        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)