Update app.py

app.py

@@ -43,12 +43,18 @@ def image_to_base64(image_path):
     with open(image_path, "rb") as img_file:
         return base64.b64encode(img_file.read()).decode('utf-8')
 
-logo_b64 = image_to_base64("logo.jpg")
-profile_b64 = image_to_base64("232px-Tv_the_muppet_show_bein_green.jpg")
-process_b64 = image_to_base64("preview of process.jpg")
+# Using placeholders if files don't exist to prevent crash
+try:
+    logo_b64 = image_to_base64("logo.jpg")
+    profile_b64 = image_to_base64("232px-Tv_the_muppet_show_bein_green.jpg")
+    process_b64 = image_to_base64("preview of process.jpg")
+except:
+    logo_b64 = ""
+    profile_b64 = "" 
+    process_b64 = ""
 
 # ==========================================
-# 3. BACKEND LOGIC
+# 3. BACKEND LOGIC (UNCHANGED)
 # ==========================================
 def get_embedding_via_api(text):
     if not client: raise ValueError("HF_TOKEN missing")
@@ -71,9 +77,10 @@ def find_similar_recipes_list(query_text):
         desc = str(row['Raw_Output'])
         score_display = f"{score:.0%}"
         
+        # HTML styled as a "Suggested Post"
         card_content = (
-            f"### 🏆 {title}\n"
-            f"<span style='color:#1877f2; font-weight:bold; font-size:14px;'>Match Score: {score_display}</span>\n\n"
+            f"<div class='suggested-header'>Suggested for you · {score_display} Match</div>"
+            f"### 🥘 {title}\n"
             f"<div class='sim-scroll'>{desc}</div>"
         )
         results_list.append(card_content)
@@ -109,311 +116,301 @@ def ui_update_pipeline(image_path):
         return f"Error: {e}", "Error", gr.update(), gr.update(), "", gr.update(), ""
 
 # ==========================================
-# 4. MODERN UI THEME & CSS
+# 4. FACEBOOK UI THEME & CSS
 # ==========================================
-theme = gr.themes.Soft(
-    primary_hue="indigo",
-    secondary_hue="blue",
-    neutral_hue="slate",
-    font=[gr.themes.GoogleFont('Inter'), 'ui-sans-serif', 'system-ui']
+# We override the theme to be neutral so our CSS takes over
+theme = gr.themes.Default(
+    primary_hue="blue",
+    radius_size="sm",
+    font=['Helvetica', 'Arial', 'sans-serif']
 )
 
-modern_css = """
-body, .gradio-container { background-color: #f0f2f5; }
+facebook_css = """
+body { background-color: #f0f2f5; margin: 0; padding: 0; }
+.gradio-container { background-color: #f0f2f5 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
 
-/* Sticky Header */
-.custom-header {
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid #e4e6eb;
-    padding: 15px 20px;
+/* 1. STICKY NAVBAR */
+.fb-navbar {
+    background: white;
+    height: 56px;
+    padding: 0 16px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     display: flex;
     align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 999;
     justify-content: space-between;
-    position: fixed;
-    top: 0; left: 0; right: 0;
-    width: 100%;
-    z-index: 9999;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+.fb-logo { 
+    color: #1877F2; 
+    font-size: 28px; 
+    font-weight: bold; 
+    letter-spacing: -0.5px;
+    margin-right: 20px;
+}
+.fb-search {
+    background: #f0f2f5;
+    border-radius: 50px;
+    padding: 10px 20px;
+    color: #65676B;
+    width: 250px;
+    display: flex;
+    align-items: center;
 }
 
-.main-content-wrapper { margin-top: 140px; }
+/* 2. LAYOUT COLUMNS */
+.main-layout { display: flex; justify-content: center; padding-top: 20px; gap: 20px; }
+.col-left { width: 300px; display: none; } /* Hidden on mobile */
+.col-feed { width: 600px; max-width: 100%; }
+.col-right { width: 300px; display: none; }
 
-.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;
+/* 3. CARD STYLING (The core FB look) */
+.fb-card {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    margin-bottom: 15px;
+    overflow: hidden;
+    padding: 12px 16px;
 }
-.app-slogan { font-size: 16px; color: #65676b; font-weight: 500; }
+.no-padding { padding: 0 !important; }
 
-/* Sidebar Navigation */
+/* 4. NAVIGATION BUTTONS (Left Sidebar) */
 .nav-btn {
     text-align: left !important;
     justify-content: flex-start !important;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
-    color: #65676b !important;
+    color: #050505 !important;
     font-weight: 600 !important;
-    font-size: 16px !important;
-    padding: 12px 16px !important;
-    border-radius: 10px !important;
-    transition: all 0.2s ease;
+    font-size: 15px !important;
+    padding: 10px 8px !important;
+    border-radius: 8px !important;
+    margin-bottom: 5px !important;
 }
-.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;
+.nav-btn:hover { background-color: #e4e6eb !important; }
+.nav-btn.selected { background-color: #e7f3ff !important; color: #1877f2 !important; }
+
+/* 5. POST HEADER (Avatar + Name) */
+.post-header { display: flex; align-items: center; margin-bottom: 12px; }
+.user-avatar { width: 40px; height: 40px; border-radius: 50%; background: #ddd; margin-right: 10px; object-fit: cover; }
+.post-info { display: flex; flex-direction: column; }
+.post-author { font-weight: 600; color: #050505; font-size: 15px; }
+.post-meta { font-size: 13px; color: #65676B; }
+
+/* 6. POST ACTIONS (Like/Comment/Share) */
+.post-actions { 
+    border-top: 1px solid #ced0d4; 
+    margin-top: 10px; 
+    padding-top: 5px; 
+    display: flex; 
+    justify-content: space-around; 
 }
+.action-btn { background: transparent !important; color: #65676B !important; box-shadow: none !important; }
+.action-btn:hover { background: #f2f2f2 !important; }
 
-/* Feed & Content Cards */
-#feed-container { gap: 0px !important; padding: 0px !important; }
-#feed-container > .form { gap: 0px !important; }
-
-.content-card {
-    background-color: #ffffff !important;
-    border-radius: 12px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-    border: 1px solid #ddd;
-    padding: 20px;
-    margin-bottom: 7px !important;
-    width: 100%;
-    display: block;
+/* 7. RIGHT SIDEBAR (Contacts style) */
+.contact-row {
+    display: flex; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer;
 }
+.contact-row:hover { background-color: #e4e6eb; }
+.contact-name { font-weight: 500; font-size: 14px; margin-left: 10px; color: #050505; }
 
-/* Saved Recipe Card (Facebook Style) */
-.saved-card-container {
-    background: white;
-    border-radius: 10px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-    border: 1px solid #ddd;
-    padding: 0;
-    overflow: hidden;
-    height: 100%;
-    transition: box-shadow 0.2s;
-    display: flex;
-    flex-direction: column;
-}
-.saved-card-container:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
+/* UTILS */
+.sim-scroll { height: 200px; overflow-y: auto; font-size: 13px; color: #050505; }
+.suggested-header { font-size: 12px; font-weight: bold; color: #65676B; margin-bottom: 5px; }
 
-.saved-header {
-    background: #f0f2f5;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 40px;
-    color: #888;
-}
-
-.saved-body { padding: 15px; flex-grow: 1; }
-.saved-title { font-weight: 700; font-size: 16px; margin-bottom: 5px; color: #050505; line-height: 1.3; }
-.saved-meta { font-size: 12px; color: #65676b; margin-bottom: 10px; }
-
-/* Right Sidebar Buttons (Saved Recipes List) */
-.sidebar-saved-btn {
-    text-align: left !important;
-    justify-content: flex-start !important;
-    background: white !important;
-    border: 1px solid #e0e0e0 !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
-    margin-bottom: 8px !important;
-    color: #333 !important;
-    padding: 8px 12px !important;
-    font-size: 14px !important;
-    font-weight: 500 !important;
-}
-.sidebar-saved-btn:hover {
-    background: #f0f2f5 !important;
-    border-color: #d0d0d0 !important;
-    color: #1877f2 !important;
-}
-
-.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;
-}
-.sim-scroll { height: 400px; overflow-y: auto; margin-bottom: 10px; padding-right: 5px; font-size: 14px; color: #4b4f56; }
-.gap-fix { gap: 25px !important; }
-.gradio-examples { display: flex; justify-content: center; width: 100%; }
-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; }
+/* Media Queries */
+@media (min-width: 1100px) { .col-left, .col-right { display: block; } }
 """
 
 # ==========================================
 # 5. LAYOUT CONSTRUCTION
 # ==========================================
-with gr.Blocks(title="Legacy Kitchen") as demo:
+with gr.Blocks(title="Legacy Kitchen", css=facebook_css, theme=theme) as demo:
     
-    # --- HEADER ---
+    # --- 1. FACEBOOK NAVBAR ---
     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;">v5.2</div>
+    <div class="fb-navbar">
+        <div style="display:flex; align-items:center;">
+            <div class="fb-logo">facebook</div>
+            <div class="fb-search">🔍 &nbsp; Search Legacy Kitchen</div>
+        </div>
+        <div style="display:flex; gap:10px;">
+             <div style="width:40px;height:40px;background:#e4e6eb;border-radius:50%;display:flex;align-items:center;justify-content:center;">➕</div>
+             <div style="width:40px;height:40px;background:#e4e6eb;border-radius:50%;display:flex;align-items:center;justify-content:center;">💬</div>
+             <img src="data:image/jpeg;base64,{profile_b64}" style="width:40px; height:40px; border-radius:50%; object-fit:cover;">
         </div>
+    </div>
     """)
 
-    with gr.Row(elem_classes=["main-content-wrapper"]):
+    # --- 2. MAIN 3-COLUMN LAYOUT ---
+    with gr.Row(elem_classes=["main-layout"]):
         
-        # --- LEFT SIDEBAR ---
-        with gr.Column(scale=1, min_width=200):
+        # === LEFT COLUMN (Sidebar Navigation) ===
+        with gr.Column(elem_classes=["col-left"]):
             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 class="contact-row">
+                <img src="data:image/jpeg;base64,{profile_b64}" style="width:36px; height:36px; border-radius:50%;">
+                <div class="contact-name">Welcome User</div>
             </div>
             """)
-            gr.HTML("<hr style='border: 0; border-top: 1px solid #e4e6eb; margin: 10px 0 20px 0;'>")
+            nav_digital = gr.Button("✨  AI Digitizer (Create)", elem_classes=["nav-btn", "selected"])
+            nav_feed = gr.Button("📰  News Feed", elem_classes=["nav-btn"])
+            nav_saved = gr.Button("🔖  Saved Recipes", elem_classes=["nav-btn"])
+            nav_about = gr.Button("ℹ️  About Project", elem_classes=["nav-btn"])
             
-            nav_digital = gr.Button("✨   AI Digitizer", elem_classes=["nav-btn", "selected"])
-            nav_feed = gr.Button("📰   News Feed", elem_classes=["nav-btn"])
-            nav_saved = gr.Button("🔖   Saved Recipes", elem_classes=["nav-btn"])
-            nav_about = gr.Button("ℹ️   About", elem_classes=["nav-btn"])
+            gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 10px 0;'>")
+            gr.Markdown("### Your Shortcuts")
+            gr.Markdown("🥘 Culinary Arts Group\n\n🥧 Grandmother's Secrets\n\n🥗 Healthy Eating")
 
-        # --- CENTER CONTENT ---
-        with gr.Column(scale=3):
+        # === CENTER COLUMN (The Feed & App Logic) ===
+        with gr.Column(elem_classes=["col-feed"]):
             
-            # === VIEW 1: AI DIGITALIZER ===
+            # --- VIEW 1: AI DIGITIZER (Styled as "Create Post") ---
             with gr.Group(visible=True) as digitalizer_view:
-                with gr.Row(elem_classes=["gap-fix"]):
-                    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")
-                            gr.Examples(
-                                examples=[
-                                    ["quick_tries_images/applecrisp.jpg"],
-                                    ["quick_tries_images/meatballs recipe.jpg"],
-                                    ["quick_tries_images/chocolateballs.png"],
-                                    ["quick_tries_images/Apple Dapple (aka Fresh Apple Cake).jfif"]
-                                ],
-                                inputs=input_img,
-                                label="Or try these examples:",
-                                cache_examples=False
-                            )
-                    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>")
-                gr.Markdown("### 3. Similar Recipes from Database")
                 
-                with gr.Row():
-                    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!")
-                        with gr.Row(visible=False) as c1_btns:
-                            gr.Button("👍 Like", size="sm", variant="secondary")
-                            gr.Button("↗️ Share", size="sm", variant="secondary")
+                # "Create Post" Card
+                with gr.Group(elem_classes=["fb-card"]):
+                    gr.Markdown("### Create Post")
+                    gr.HTML("<hr style='border:0; border-top:1px solid #e4e6eb; margin: 10px 0;'>")
                     
-                    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")
+                    with gr.Row():
+                        input_img = gr.Image(type="filepath", label="Add to your post", height=250, container=True)
+                    
+                    gr.HTML("<div style='margin-top:10px; font-size:14px; color:#65676B;'>Add to your post: 🟢 Photo/Video 👤 Tag People 📍 Location</div>")
+                    magic_btn = gr.Button("Post", variant="primary") # Blue button
+                    
+                    # Examples styled as small chips/thumbnails
+                    gr.Examples(
+                        examples=[["quick_tries_images/applecrisp.jpg"], ["quick_tries_images/meatballs recipe.jpg"]],
+                        inputs=input_img, label="Quick Try (Click to load image)"
+                    )
+
+                # Output ("The Resulting Post")
+                with gr.Group(elem_classes=["fb-card"]):
+                    gr.HTML("""
+                    <div class="post-header">
+                        <div class="user-avatar" style="background:#1877F2;"></div>
+                        <div class="post-info">
+                            <div class="post-author">Legacy Kitchen AI</div>
+                            <div class="post-meta">Just now · 🌍</div>
+                        </div>
+                    </div>
+                    """)
+                    out_text = gr.Textbox(label="Transcription Result", placeholder="Your digitized recipe text will appear here...", lines=10, show_label=False)
                     
-                    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")
+                    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")
+
+                # Similar Recipes (Styled as "Suggested Posts")
+                gr.Markdown("### Suggested for you")
+                
+                # Sim Result 1
+                with gr.Group(elem_classes=["fb-card"], visible=False) as c1_box:
+                    sim1 = gr.Markdown("Similar Recipe 1")
+                    with gr.Row(elem_classes=["post-actions"], visible=False) as c1_btns:
+                        gr.Button("Save", elem_classes=["action-btn"], size="sm")
+
+                # Sim Result 2
+                with gr.Group(elem_classes=["fb-card"], visible=False) as c2_box:
+                    sim2 = gr.Markdown("Similar Recipe 2")
+                    with gr.Row(elem_classes=["post-actions"]):
+                        gr.Button("Save", elem_classes=["action-btn"], size="sm")
+
+                # Sim Result 3
+                with gr.Group(elem_classes=["fb-card"], visible=False) as c3_box:
+                    sim3 = gr.Markdown("Similar Recipe 3")
+                    with gr.Row(elem_classes=["post-actions"]):
+                        gr.Button("Save", elem_classes=["action-btn"], size="sm")
 
                 magic_btn.click(ui_update_pipeline, input_img, [out_text, sim1, c1_btns, c2_box, sim2, c3_box, sim3])
 
-            # === VIEW 2: FEED ===
-            with gr.Column(visible=False, elem_id="feed-container") as feed_view:
-                if not df_recipes.empty:
+            # --- VIEW 2: FEED ---
+            with gr.Column(visible=False) as feed_view:
+                if notdf_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(["🥘", "🥗", "🍰", "🌮"])
-                        post_time = random.choice(["2h", "3h", "4h", "6h", "9h", "12h", "a day ago", "2 days ago"])
+                        post_time = random.choice(["2h", "3h", "6h", "Yesterday"])
                         
-                        with gr.Group(elem_classes=["content-card"]):
+                        with gr.Group(elem_classes=["fb-card"]):
+                            # Custom HTML Header for the 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;">{post_time} · 🌍 Public</span></div>
+                            <div class="post-header">
+                                <div class="user-avatar" style="background:#e4e6eb; display:flex; align-items:center; justify-content:center; font-size:20px;">{emoji}</div>
+                                <div class="post-info">
+                                    <div class="post-author">{user_name}</div>
+                                    <div class="post-meta">{post_time} · 🌍</div>
+                                </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")
+                            gr.Markdown(f"**{row['Title']}**")
+                            gr.Markdown(f"{str(row['Raw_Output'])[:300]}... <span style='color:#1877F2; cursor:pointer;'>See more</span>")
+                            
+                            # Action Bar
+                            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 RECIPES ===
+            # --- VIEW 3: SAVED RECIPES ---
             with gr.Column(visible=False) as saved_view:
-                gr.Markdown("### 🔖 Saved Recipes (100 Items)")
-                
+                gr.Markdown("### 🔖 Saved Items")
                 if not df_recipes.empty:
-                    saved_batch = df_recipes.head(100)
-                    # 3-column grid
-                    with gr.Row():
-                        for index, row in saved_batch.iterrows():
-                            emoji_icon = random.choice(["🍝", "🥗", "🍰", "🥘", "🍪", "🍗", "🥪", "🥧"])
-                            with gr.Column(scale=1, min_width=200):
-                                with gr.Group(elem_classes=["saved-card-container"]):
-                                    gr.HTML(f"<div class='saved-header'>{emoji_icon}</div>")
-                                    with gr.Column(elem_classes=["saved-body"]):
-                                        gr.HTML(f"<div class='saved-title'>{row['Title']}</div>")
-                                        gr.HTML(f"<div class='saved-meta'>Saved to Collection</div>")
-                                        gr.Button("View", size="sm", variant="secondary")
-                else:
-                    gr.Markdown("Database 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 ===
+            # --- VIEW 4: ABOUT ---
             with gr.Group(visible=False) as about_view:
-                with gr.Group(elem_classes=["content-card"]):
-                    gr.Markdown("""
-                    # Goal Project
-                    The goal of this project is to develop an app that takes a scanned image of a handwritten recipe as input, generates text using a VLM, and based on the extracted text, suggests 3 similar recipes from a 10K dataset of synthetic recipes. Our app will bridge the gap between analog culinary heritage and digital discovery.
-                    
-                    ### About Us
-                    This app was developed by **Shahar Firshtman** and **Lior Feinstein**, 2nd year students for Economics and data science.
-                    """)
+                with gr.Group(elem_classes=["fb-card"]):
+                    gr.Markdown("# About Legacy Kitchen")
+                    gr.Markdown("Developed by **Shahar Firshtman** and **Lior Feinstein**.")
                     gr.HTML(f"""
                     <div style="margin-top: 20px;">
-                        <h3 style="color: #444;">Process Overview</h3>
-                        <img src="data:image/jpeg;base64,{process_b64}" style="width: 100%; height: auto; border-radius: 8px; border: 1px solid #ddd;">
+                        <img src="data:image/jpeg;base64,{process_b64}" style="width: 100%; border-radius: 8px;">
                     </div>
                     """)
 
-        # --- RIGHT COLUMN ---
-        with gr.Column(scale=1, min_width=200):
-            # NEW: Dynamic Saved Recipes List
-            gr.Markdown("### My Saved Recipes")
+        # === RIGHT COLUMN (Contacts / Sponsored) ===
+        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!")
+                gr.Image("https://picsum.photos/300/150", show_label=False, interactive=False, height=150)
+            
+            gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 10px 0;'>")
             
-            sidebar_btns = []
-            if not df_recipes.empty:
-                saved_10 = df_recipes.head(10)
-                for i, row in saved_10.iterrows():
-                    # We create buttons here and store them to bind click events later
-                    btn = gr.Button(f"🍲 {row['Title']}", elem_classes=["sidebar-saved-btn"])
-                    sidebar_btns.append(btn)
-            else:
-                gr.Markdown("No saved recipes.")
+            gr.Markdown("### Contacts")
+            # Fake contacts list
+            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. JAVASCRIPT LOGIC
+    # 6. JAVASCRIPT NAVIGATION LOGIC
     # ==========================================
     def go_digi():
         return (
@@ -442,10 +439,6 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
     nav_feed.click(go_feed, None, outputs_ui)
     nav_saved.click(go_saved, None, outputs_ui)
     nav_about.click(go_about, None, outputs_ui)
-    
-    # NEW: Bind right sidebar buttons to go_saved function
-    for btn in sidebar_btns:
-        btn.click(go_saved, None, outputs_ui)
 
 if __name__ == "__main__":
-    demo.launch(theme=theme, css=modern_css)
+    demo.launch()