Update app.py

app.py

@@ -206,4 +206,129 @@ body, .gradio-container { background-color: #f0f2f5; }
 with gr.Blocks(title="Legacy Kitchen") as demo:
     
     # --- HEADER ---
-    gr.
+    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.1</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)
+                # FIX 2: Added 'gap-fix' class to ensure space > 7px (set to 25px in CSS)
+                with gr.Row(elem_classes=["gap-fix"]):
+                    # Left: Upload
+                    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: Text
+                    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)
+
+                # FIX 1: Added 30px Spacer (using 35px to be safe)
+                gr.HTML("<div style='height: 35px;'></div>")
+
+                # SECTION 2: SIMILAR RECIPES
+                gr.Markdown("### 3. Similar Recipes from Database")
+                with gr.Row():
+                    with gr.Column(elem_classes=["sim-card"]):
+                        # FIX 3: Default Text when no image uploaded
+                        sim1 = gr.Markdown("Once you will upload your scanned recipe, we will share similar recipes!")
+                    with gr.Column(elem_classes=["sim-card"]):
+                        sim2 = gr.Markdown("")
+                    with gr.Column(elem_classes=["sim-card"]):
+                        sim3 = gr.Markdown("")
+
+                magic_btn.click(magic_pipeline, input_img, [out_text, sim1, sim2, sim3])
+
+            # === VIEW 2: FEED ===
+            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 ===
+            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 ---
+        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)