Update app.py

app.py

@@ -43,10 +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')
 
-# Load local images if they exist, otherwise use placeholders
+# LOAD IMAGES
 try:
+    # 1. Logo (Using text now, but keeping placeholder just in case)
     logo_b64 = image_to_base64("logo.jpg")
-    profile_b64 = image_to_base64("232px-Tv_the_muppet_show_bein_green.jpg")
+    
+    # 2. Profile Photo (UPDATED to chef.avif)
+    # Check for chef.avif, fallback to others if missing
+    if os.path.exists("chef.avif"):
+        profile_b64 = image_to_base64("chef.avif")
+    else:
+        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 = ""
@@ -145,9 +153,10 @@ footer { display: none !important; }
 .fb-logo { 
     color: #1877F2; 
     font-size: 28px; 
-    font-weight: bold; 
+    font-weight: 800; 
     letter-spacing: -0.5px;
     margin-right: 20px;
+    font-family: Helvetica, Arial, sans-serif;
 }
 .fb-search {
     background: #f0f2f5;
@@ -165,14 +174,19 @@ footer { display: none !important; }
 .col-feed { width: 600px; max-width: 100%; }
 .col-right { width: 300px; display: none; }
 
-/* 3. CARD STYLING */
+/* 3. CARD STYLING - MODERN & FLOATING */
 .fb-card {
     background: white;
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-    margin-bottom: 15px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-bottom: 20px; /* Increased margin for "Floating" effect */
     overflow: hidden;
-    padding: 12px 16px;
+    padding: 16px;
+    border: 1px solid #e4e6eb; /* Subtle border for definition */
+}
+.fb-card:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Slight lift on hover */
+    transition: box-shadow 0.2s ease;
 }
 
 /* 4. NAVIGATION BUTTONS */
@@ -228,14 +242,14 @@ footer { display: none !important; }
 # ==========================================
 # 5. LAYOUT CONSTRUCTION
 # ==========================================
-with gr.Blocks(title="Legacy Kitchen", css=facebook_css, theme=theme) as demo:
+with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
     
-    # --- 1. FACEBOOK NAVBAR ---
+    # --- 1. NAVBAR (CookBook Logo) ---
     gr.HTML(f"""
     <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 class="fb-logo">CookBook</div>
+            <div class="fb-search">🔍 &nbsp; Search CookBook</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>
@@ -252,11 +266,11 @@ with gr.Blocks(title="Legacy Kitchen", css=facebook_css, theme=theme) as demo:
         with gr.Column(elem_classes=["col-left"]):
             gr.HTML(f"""
             <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>
+                <img src="data:image/jpeg;base64,{profile_b64}" style="width:36px; height:36px; border-radius:50%; object-fit:cover;">
+                <div class="contact-name">Chef Admin</div>
             </div>
             """)
-            nav_digital = gr.Button("✨  AI Digitizer (Create)", elem_classes=["nav-btn", "selected"])
+            nav_digital = gr.Button("✨  Digitalize Recipe", 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"])
@@ -268,64 +282,71 @@ with gr.Blocks(title="Legacy Kitchen", css=facebook_css, theme=theme) as demo:
         # === CENTER COLUMN (The Feed & App Logic) ===
         with gr.Column(elem_classes=["col-feed"]):
             
-            # --- VIEW 1: AI DIGITIZER (Styled as "Create Post") ---
+            # --- VIEW 1: AI DIGITIZER (MODERN UI) ---
             with gr.Group(visible=True) as digitalizer_view:
                 
-                # "Create Post" Card
+                # CARD 1: THE INPUT (Clean, Modern Upload)
                 with gr.Group(elem_classes=["fb-card"]):
-                    gr.Markdown("### Create Post")
+                    gr.Markdown("### 📸 Digitalize Recipe")
+                    gr.HTML("<div style='font-size: 13px; color: #65676B; margin-bottom: 10px;'>Upload a photo of a handwritten note to convert it into digital text instantly.</div>")
                     gr.HTML("<hr style='border:0; border-top:1px solid #e4e6eb; margin: 10px 0;'>")
                     
                     with gr.Row():
-                        input_img = gr.Image(type="filepath", label="Add to your post", height=250, container=True)
+                        # Using container=False makes it look cleaner inside the card
+                        input_img = gr.Image(type="filepath", label="Upload Recipe Image", height=250, container=False)
                     
-                    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
+                    # Modern Button styling handled by Gradio's variant='primary' + custom CSS hover
+                    gr.HTML("<div style='height:15px'></div>")
+                    magic_btn = gr.Button("✨ Convert to Text", variant="primary") 
                     
-                    # Examples
+                    # Examples in a clean row
                     gr.Examples(
                         examples=[["quick_tries_images/applecrisp.jpg"], ["quick_tries_images/meatballs recipe.jpg"]],
-                        inputs=input_img, label="Quick Try (Click to load image)"
+                        inputs=input_img, label="Or try one of these:"
                     )
 
-                # Output ("The Resulting Post")
+                # CARD 2: THE OUTPUT (Looks like a new post appearing)
                 with gr.Group(elem_classes=["fb-card"]):
-                    gr.HTML("""
+                    gr.HTML(f"""
                     <div class="post-header">
-                        <div class="user-avatar" style="background:#1877F2;"></div>
+                        <img src="data:image/jpeg;base64,{profile_b64}" class="user-avatar">
                         <div class="post-info">
-                            <div class="post-author">Legacy Kitchen AI</div>
-                            <div class="post-meta">Just now · 🌍</div>
+                            <div class="post-author">CookBook AI</div>
+                            <div class="post-meta">Just now · <span style="color:blue">Verified Transcription</span></div>
                         </div>
                     </div>
                     """)
-                    out_text = gr.Textbox(label="Transcription Result", placeholder="Your digitized recipe text will appear here...", lines=10, show_label=False)
                     
+                    # The Result Textbox
+                    out_text = gr.Textbox(label="Transcription Result", placeholder="Waiting for image...", lines=8, show_label=False)
+                    
+                    # 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")
+                        gr.Button("📥 Save to Cookbook", 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")
+                # CARD 3: SUGGESTIONS (Floating below)
+                with gr.Group(visible=True):
+                    gr.Markdown("### Suggested Pairings")
+                    
+                    # 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])
 
@@ -377,7 +398,7 @@ with gr.Blocks(title="Legacy Kitchen", css=facebook_css, theme=theme) as demo:
             # --- VIEW 4: ABOUT ---
             with gr.Group(visible=False) as about_view:
                 with gr.Group(elem_classes=["fb-card"]):
-                    gr.Markdown("# About Legacy Kitchen")
+                    gr.Markdown("# About CookBook")
                     gr.Markdown("Developed by **Shahar Firshtman** and **Lior Feinstein**.")
                     gr.HTML(f"""
                     <div style="margin-top: 20px;">