Update app.py

app.py

@@ -225,4 +225,172 @@ button.gallery-item {
 }
 button.gallery-item:hover {
     transform: scale(2.5) !important; /* Make it BIG */
-    z-index: 1000
+    z-index: 1000 !important;         /* Put it on top of everything */
+    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.4</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 Component (Hover effect added in 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
+                            )
+
+                # Spacer
+                gr.HTML("<div style='height: 35px;'></div>")
+
+                # SECTION 2: SIMILAR RECIPES
+                gr.Markdown("### 3. Similar Recipes from Database")
+                
+                with gr.Row():
+                    # CARD 1
+                    with gr.Column(elem_classes=["sim-card"]):
+                        sim1 = gr.Markdown("Once you will upload your scanned recipe, we will share similar recipes!")
+                        with gr.Row():
+                            gr.Button("👍 Like", size="sm", variant="secondary")
+                            gr.Button("↗️ Share", size="sm", variant="secondary")
+                    
+                    # CARD 2
+                    with gr.Column(elem_classes=["sim-card"]):
+                        sim2 = gr.Markdown("")
+                        with gr.Row():
+                            gr.Button("👍 Like", size="sm", variant="secondary")
+                            gr.Button("↗️ Share", size="sm", variant="secondary")
+                    
+                    # CARD 3
+                    with gr.Column(elem_classes=["sim-card"]):
+                        sim3 = gr.Markdown("")
+                        with gr.Row():
+                            gr.Button("👍 Like", size="sm", variant="secondary")
+                            gr.Button("↗️ Share", size="sm", variant="secondary")
+
+                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)