Update app.py

app.py

@@ -148,4 +148,274 @@ 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:
+.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: 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 {
+    text-align: left !important;
+    justify-content: flex-start !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #65676b !important;
+    font-weight: 600 !important;
+    font-size: 16px !important;
+    padding: 12px 16px !important;
+    border-radius: 10px !important;
+    transition: all 0.2s ease;
+}
+.nav-btn:hover { background-color: #e4e6eb !important; color: #050505 !important; }
+.nav-btn.selected { 
+    background-color: #e7f3ff !important; 
+    color: #1877f2 !important; 
+    border-left: 4px solid #1877f2 !important;
+}
+
+/* General Cards */
+.content-card {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    border: 1px solid #ddd;
+    padding: 20px;
+    margin-bottom: 20px;
+    height: 100%;
+    overflow: visible !important; 
+}
+
+/* Similar Recipe Cards */
+.sim-card {
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    padding: 15px;
+    height: 100%;
+    border-top: 4px solid #1877f2;
+    display: flex; 
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+/* FIX 1: Increased height to 400px */
+.sim-scroll {
+    height: 400px;       
+    overflow-y: auto;    
+    margin-bottom: 10px;
+    padding-right: 5px;  
+    font-size: 14px;
+    color: #4b4f56;
+}
+
+/* Right Side Trending Box */
+.trend-box {
+    background:white; 
+    padding:10px; 
+    border-radius:8px; 
+    margin-bottom:10px; 
+    box-shadow:0 1px 2px rgba(0,0,0,0.1);
+    transition: background 0.2s;
+}
+.trend-box:hover { background: #f0f2f5; cursor: pointer; }
+
+/* Gap Fix */
+.gap-fix { gap: 25px !important; }
+
+/* FIX 4: Center Quick Start Images */
+.gradio-examples {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+/* Image Pop Hover Effect */
+button.gallery-item {
+    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
+    z-index: 1;
+}
+button.gallery-item:hover {
+    transform: scale(2.5) !important; 
+    z-index: 1000 !important;         
+    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
+    border: 2px solid white !important;
+    border-radius: 8px !important;
+}
+"""
+
+# ==========================================
+# 5. LAYOUT CONSTRUCTION
+# ==========================================
+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.5</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 ===
+            with gr.Group(visible=True) as digitalizer_view:
+                
+                # SECTION 1: UPLOAD & TEXT
+                with gr.Row(elem_classes=["gap-fix"]):
+                    
+                    # Left: Upload & Examples
+                    with gr.Column(scale=1):
+                        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")
+                            
+                            # Examples (Centered via CSS)
+                            gr.Examples(
+                                examples=[
+                                    ["quick_tries_images/applecrisp.jpg"],
+                                    ["quick_tries_images/meatballs recipe.jpg"],
+                                    ["quick_tries_images/tofu.jfif"]
+                                ],
+                                inputs=input_img,
+                                label="Or try these examples:",
+                                cache_examples=False
+                            )
+                    
+                    # Right: Text
+                    with gr.Column(scale=1):
+                        with gr.Group(elem_classes=["content-card"]):
+                            out_text = gr.Textbox(
+                                label="Result", 
+                                value="Here your digitalized recipe will be presented",
+                                lines=20, 
+                                interactive=False, 
+                                show_label=False
+                            )
+
+                gr.HTML("<div style='height: 35px;'></div>")
+
+                # SECTION 2: SIMILAR RECIPES
+                gr.Markdown("### 3. Similar Recipes from Database")
+                
+                with gr.Row():
+                    # CARD 1 (Always Visible, Buttons Hidden initially)
+                    with gr.Column(elem_classes=["sim-card"]) as c1_box:
+                        sim1 = gr.Markdown("Once you will upload your scanned recipe, we will share similar recipes!")
+                        # FIX 2: Hidden initially
+                        with gr.Row(visible=False) as c1_btns:
+                            gr.Button("👍 Like", size="sm", variant="secondary")
+                            gr.Button("↗️ Share", size="sm", variant="secondary")
+                    
+                    # CARD 2 (Hidden initially)
+                    with gr.Column(elem_classes=["sim-card"], visible=False) as c2_box:
+                        sim2 = gr.Markdown("")
+                        with gr.Row():
+                            gr.Button("👍 Like", size="sm", variant="secondary")
+                            gr.Button("↗️ Share", size="sm", variant="secondary")
+                    
+                    # CARD 3 (Hidden initially)
+                    with gr.Column(elem_classes=["sim-card"], visible=False) as c3_box:
+                        sim3 = gr.Markdown("")
+                        with gr.Row():
+                            gr.Button("👍 Like", size="sm", variant="secondary")
+                            gr.Button("↗️ Share", size="sm", variant="secondary")
+
+                # UPDATED: Button click triggers the new wrapper function
+                magic_btn.click(
+                    ui_update_pipeline, 
+                    input_img, 
+                    [out_text, sim1, c1_btns, c2_box, sim2, c3_box, 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)