Update app.py

app.py

@@ -57,10 +57,17 @@ try:
     else:
         cookbook_logo_b64 = profile_b64
 
+    # 3. Sponsored Image
+    if os.path.exists("famous-female-chefs.webp"):
+        sponsored_b64 = image_to_base64("famous-female-chefs.webp")
+    else:
+        sponsored_b64 = "" # Fallback or empty
+
     process_b64 = image_to_base64("preview of process.jpg")
 except:
     profile_b64 = "" 
     cookbook_logo_b64 = ""
+    sponsored_b64 = ""
     process_b64 = ""
 
 # ==========================================
@@ -169,7 +176,7 @@ footer { display: none !important; }
     align-items: center;
 }
 
-/* 2. LAYOUT COLUMNS - "FAT CENTER" CONFIGURATION */
+/* 2. LAYOUT COLUMNS */
 .main-layout { display: flex; justify-content: center; padding-top: 20px; gap: 20px; }
 
 /* Left Sidebar: Compact (220px) */
@@ -192,9 +199,9 @@ footer { display: none !important; }
     border: 1px solid #e4e6eb;
 }
 
-/* 4. NAVIGATION BUTTONS - FLUID WIDTH */
+/* 4. NAVIGATION BUTTONS */
 .nav-btn {
-    width: 100% !important; /* Resized to fit the new 220px container */
+    width: 100% !important; 
     height: 42.5px !important;
     text-align: left !important;
     justify-content: flex-start !important;
@@ -396,4 +403,95 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
                             </div>
                             """)
                             gr.Markdown(f"**{row['Title']}**")
-                            gr.Markdown(f"{str(row['Raw_Output'])[:300]}... <span style='color:#1877F2;
+                            gr.Markdown(f"{str(row['Raw_Output'])[:300]}... <span style='color:#1877F2; cursor:pointer;'>See more</span>")
+                            
+                            with gr.Row(elem_classes=["post-actions"]):
+                                gr.Button("👍 Like", elem_classes=["action-btn"], size="sm")
+                                gr.Button("💬 Comment", elem_classes=["action-btn"], size="sm")
+                                gr.Button("↪ Share", elem_classes=["action-btn"], size="sm")
+                else:
+                    gr.Markdown("⚠️ Database is empty.")
+
+            # --- VIEW 3: SAVED ---
+            with gr.Column(visible=False) as saved_view:
+                gr.Markdown("### 🔖 Saved Items")
+                if not df_recipes.empty:
+                    saved_batch = df_recipes.head(20)
+                    for index, row in saved_batch.iterrows():
+                        with gr.Group(elem_classes=["fb-card"]):
+                            with gr.Row():
+                                gr.HTML("<div style='width:80px; height:80px; background:#eee; border-radius:8px;'></div>")
+                                with gr.Column():
+                                    gr.Markdown(f"**{row['Title']}**")
+                                    gr.HTML("<span style='color:#65676B; font-size:12px;'>Saved from News Feed</span>")
+                                    gr.Button("View Collection", size="sm", variant="secondary")
+
+            # --- VIEW 4: ABOUT ---
+            with gr.Group(visible=False) as about_view:
+                with gr.Group(elem_classes=["fb-card"]):
+                    gr.Markdown("# About CookBook")
+                    gr.Markdown("Developed by **Shahar Firshtman** and **Lior Feinstein**.")
+                    gr.HTML(f"""
+                    <div style="margin-top: 20px;">
+                        <img src="data:image/jpeg;base64,{process_b64}" style="width: 100%; border-radius: 8px;">
+                    </div>
+                    """)
+
+        # === RIGHT COLUMN (Contacts) ===
+        with gr.Column(elem_classes=["col-right"]):
+            gr.Markdown("### Sponsored")
+            with gr.Group(elem_classes=["fb-card"]):
+                gr.Markdown("**Culinary School**\nJoin 10,000+ students learning to cook today!")
+                # Changed to HTML Image for cleaner look
+                gr.HTML(f"""
+                <img src="data:image/webp;base64,{sponsored_b64}" style="width:100%; height:auto; border-radius:8px; display:block; margin-top:10px;">
+                """)
+            
+            gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 10px 0;'>")
+            
+            gr.Markdown("### Contacts")
+            contacts = ["Elon Musk", "Gordon Ramsay", "Jamie Oliver", "Martha Stewart"]
+            for contact in contacts:
+                gr.HTML(f"""
+                <div class="contact-row">
+                    <div style="position:relative;">
+                        <img src="https://ui-avatars.com/api/?name={contact}&background=random" style="width:36px; height:36px; border-radius:50%;">
+                        <div style="position:absolute; bottom:0; right:0; width:10px; height:10px; background:#31a24c; border-radius:50%; border:2px solid white;"></div>
+                    </div>
+                    <div class="contact-name">{contact}</div>
+                </div>
+                """)
+
+    # ==========================================
+    # 6. NAVIGATION LOGIC
+    # ==========================================
+    def go_digi():
+        return (
+            gr.update(visible=True), gr.update(visible=False), 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"]), gr.update(elem_classes=["nav-btn"])
+        )
+    def go_feed():
+        return (
+            gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
+            gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"])
+        )
+    def go_saved():
+        return (
+            gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False),
+            gr.update(elem_classes=["nav-btn"]), 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=False), gr.update(visible=True),
+            gr.update(elem_classes=["nav-btn"]), 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, saved_view, about_view, nav_digital, nav_feed, nav_saved, nav_about]
+    
+    nav_digital.click(go_digi, None, outputs_ui)
+    nav_feed.click(go_feed, None, outputs_ui)
+    nav_saved.click(go_saved, None, outputs_ui)
+    nav_about.click(go_about, None, outputs_ui)
+
+if __name__ == "__main__":
+    demo.launch()