Update app.py

app.py

@@ -45,19 +45,12 @@ def image_to_base64(image_path):
 
 # LOAD IMAGES
 try:
-    # 1. Logo (Using text now, but keeping placeholder just in case)
-    logo_b64 = image_to_base64("logo.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 = ""
     profile_b64 = "" 
     process_b64 = ""
 
@@ -85,7 +78,6 @@ 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"<div class='suggested-header'>Suggested for you · {score_display} Match</div>"
             f"### 🥘 {title}\n"
@@ -124,7 +116,7 @@ def ui_update_pipeline(image_path):
         return f"Error: {e}", "Error", gr.update(), gr.update(), "", gr.update(), ""
 
 # ==========================================
-# 4. FACEBOOK UI THEME & CSS
+# 4. UI THEME & CSS
 # ==========================================
 theme = gr.themes.Default(
     primary_hue="blue",
@@ -170,23 +162,19 @@ footer { display: none !important; }
 
 /* 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-left { width: 300px; display: none; }
 .col-feed { width: 600px; max-width: 100%; }
 .col-right { width: 300px; display: none; }
 
-/* 3. CARD STYLING - MODERN & FLOATING */
+/* 3. CARD STYLING */
 .fb-card {
     background: white;
     border-radius: 10px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    margin-bottom: 20px; /* Increased margin for "Floating" effect */
+    margin-bottom: 25px; /* Spacing between separated sections */
     overflow: hidden;
     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;
+    border: 1px solid #e4e6eb;
 }
 
 /* 4. NAVIGATION BUTTONS */
@@ -231,11 +219,29 @@ footer { display: none !important; }
 .contact-row:hover { background-color: #e4e6eb; }
 .contact-name { font-weight: 500; font-size: 14px; margin-left: 10px; color: #050505; }
 
+/* 8. EXAMPLES (QUICK TRIES) - POP & INTERACTIVE */
+button.gallery-item {
+    border: none !important;
+    background: transparent !important;
+    padding: 4px !important;
+}
+button.gallery-item img {
+    width: 110px !important; /* Larger Size */
+    height: 110px !important;
+    border-radius: 12px !important;
+    transition: all 0.3s ease !important; /* Smooth animation */
+    object-fit: cover;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+button.gallery-item:hover img {
+    transform: scale(1.15) !important; /* Pop effect */
+    box-shadow: 0 8px 15px rgba(24, 119, 242, 0.3) !important; /* Blue glow */
+    z-index: 10;
+}
+
 /* 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; }
-
-/* Media Queries */
 @media (min-width: 1100px) { .col-left, .col-right { display: block; } }
 """
 
@@ -244,12 +250,12 @@ footer { display: none !important; }
 # ==========================================
 with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
     
-    # --- 1. NAVBAR (CookBook Logo) ---
+    # --- 1. NAVBAR ---
     gr.HTML(f"""
     <div class="fb-navbar">
         <div style="display:flex; align-items:center;">
             <div class="fb-logo">CookBook</div>
-            <div class="fb-search">🔍 &nbsp; Search CookBook</div>
+            <div class="fb-search">🔍 &nbsp; Search Recipe...</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>
@@ -262,12 +268,12 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
     # --- 2. MAIN 3-COLUMN LAYOUT ---
     with gr.Row(elem_classes=["main-layout"]):
         
-        # === LEFT COLUMN (Sidebar Navigation) ===
+        # === LEFT COLUMN (Sidebar) ===
         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%; object-fit:cover;">
-                <div class="contact-name">Chef Admin</div>
+                <div class="contact-name">Welcome Chef</div>
             </div>
             """)
             nav_digital = gr.Button("✨  Digitalize Recipe", elem_classes=["nav-btn", "selected"])
@@ -279,70 +285,63 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
             gr.Markdown("### Your Shortcuts")
             gr.Markdown("🥘 Culinary Arts Group\n\n🥧 Grandmother's Secrets\n\n🥗 Healthy Eating")
 
-        # === CENTER COLUMN (The Feed & App Logic) ===
+        # === CENTER COLUMN (Feed) ===
         with gr.Column(elem_classes=["col-feed"]):
             
-            # --- VIEW 1: AI DIGITIZER (MODERN UI) ---
+            # --- VIEW 1: AI DIGITIZER ---
             with gr.Group(visible=True) as digitalizer_view:
                 
-                # CARD 1: THE INPUT (Clean, Modern Upload)
+                # SECTION A: USER INPUT (SEPARATE CARD)
                 with gr.Group(elem_classes=["fb-card"]):
                     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("<div style='font-size: 13px; color: #65676B; margin-bottom: 10px;'>Upload a photo of a handwritten note to convert it into digital text.</div>")
                     gr.HTML("<hr style='border:0; border-top:1px solid #e4e6eb; margin: 10px 0;'>")
                     
                     with gr.Row():
-                        # Using container=False makes it look cleaner inside the card
-                        input_img = gr.Image(type="filepath", label="Upload Recipe Image", height=250, container=False)
+                        input_img = gr.Image(type="filepath", label="Upload Recipe", height=250, container=False)
                     
-                    # 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 in a clean row
+                    # Quick Tries - The CSS handles the Pop/Zoom effect
                     gr.Examples(
                         examples=[["quick_tries_images/applecrisp.jpg"], ["quick_tries_images/meatballs recipe.jpg"]],
-                        inputs=input_img, label="Or try one of these:"
+                        inputs=input_img, label="Quick Try (Click to load):"
                     )
 
-                # CARD 2: THE OUTPUT (Looks like a new post appearing)
+                # SECTION B: TEXT OUTPUT (SEPARATE CARD)
                 with gr.Group(elem_classes=["fb-card"]):
                     gr.HTML(f"""
                     <div class="post-header">
                         <img src="data:image/jpeg;base64,{profile_b64}" class="user-avatar">
                         <div class="post-info">
                             <div class="post-author">CookBook AI</div>
-                            <div class="post-meta">Just now · <span style="color:blue">Verified Transcription</span></div>
+                            <div class="post-meta">Just now · <span style="color:blue">Verified</span></div>
                         </div>
                     </div>
                     """)
                     
-                    # The Result Textbox
-                    out_text = gr.Textbox(label="Transcription Result", placeholder="Waiting for image...", lines=8, show_label=False)
+                    out_text = gr.Textbox(label="Transcription Result", placeholder="Result will appear here...", 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("📥 Save to Cookbook", elem_classes=["action-btn"], size="sm")
+                        gr.Button("📥 Save", elem_classes=["action-btn"], size="sm")
 
-                # CARD 3: SUGGESTIONS (Floating below)
+                # SECTION C: SUGGESTIONS (SEPARATE CARDS)
                 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"]):
@@ -360,7 +359,6 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
                         post_time = random.choice(["2h", "3h", "6h", "Yesterday"])
                         
                         with gr.Group(elem_classes=["fb-card"]):
-                            # Custom HTML Header for the card
                             gr.HTML(f"""
                             <div class="post-header">
                                 <div class="user-avatar" style="background:#e4e6eb; display:flex; align-items:center; justify-content:center; font-size:20px;">{emoji}</div>
@@ -373,7 +371,6 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
                             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")
@@ -381,7 +378,7 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
                 else:
                     gr.Markdown("⚠️ Database is empty.")
 
-            # --- VIEW 3: SAVED RECIPES ---
+            # --- VIEW 3: SAVED ---
             with gr.Column(visible=False) as saved_view:
                 gr.Markdown("### 🔖 Saved Items")
                 if not df_recipes.empty:
@@ -406,7 +403,7 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
                     </div>
                     """)
 
-        # === RIGHT COLUMN (Contacts / Sponsored) ===
+        # === RIGHT COLUMN (Contacts) ===
         with gr.Column(elem_classes=["col-right"]):
             gr.Markdown("### Sponsored")
             with gr.Group(elem_classes=["fb-card"]):
@@ -416,7 +413,6 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
             gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 10px 0;'>")
             
             gr.Markdown("### Contacts")
-            # Fake contacts list
             contacts = ["Elon Musk", "Gordon Ramsay", "Jamie Oliver", "Martha Stewart"]
             for contact in contacts:
                 gr.HTML(f"""
@@ -430,7 +426,7 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
                 """)
 
     # ==========================================
-    # 6. JAVASCRIPT NAVIGATION LOGIC
+    # 6. NAVIGATION LOGIC
     # ==========================================
     def go_digi():
         return (