Update app.py

app.py

@@ -129,7 +129,7 @@ def ui_update_pipeline(image_path):
         return f"Error: {e}", "Error", gr.update(), gr.update(), "", gr.update(), ""
 
 # ==========================================
-# 4. PREMIUM UI THEME & CSS
+# 4. UI THEME & CSS
 # ==========================================
 theme = gr.themes.Default(
     primary_hue="blue",
@@ -137,27 +137,14 @@ theme = gr.themes.Default(
     font=['Helvetica', 'Arial', 'sans-serif']
 )
 
-# Inspired by the Professor's Netflix code, but adapted for Facebook Light Mode
 facebook_css = """
-:root {
-    --fb-bg: #f0f2f5;
-    --fb-white: #ffffff;
-    --fb-blue: #1877F2;
-    --fb-text: #050505;
-    --fb-gray: #65676B;
-    --fb-hover: #f2f2f2;
-    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
-    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
-}
-
-body { background-color: var(--fb-bg); margin: 0; padding: 0; color: var(--fb-text); }
-.gradio-container { background-color: var(--fb-bg) !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
+body { background-color: #f0f2f5; margin: 0; padding: 0; }
+.gradio-container { background-color: #f0f2f5 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
 footer { display: none !important; }
 
-/* 1. GLASSMORPHISM NAVBAR */
+/* 1. STICKY NAVBAR */
 .fb-navbar {
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px); /* The Netflix effect */
+    background: white;
     height: 56px;
     padding: 0 16px;
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
@@ -167,29 +154,24 @@ footer { display: none !important; }
     top: 0;
     z-index: 999;
     justify-content: space-between;
-    border-bottom: 1px solid rgba(0,0,0,0.05);
 }
 .fb-logo { 
-    color: var(--fb-blue); 
+    color: #1877F2; 
     font-size: 28px; 
     font-weight: 800; 
     letter-spacing: -0.5px;
     margin-right: 20px;
     font-family: Helvetica, Arial, sans-serif;
-    text-shadow: 0 2px 10px rgba(24, 119, 242, 0.2);
 }
 .fb-search {
     background: #f0f2f5;
     border-radius: 50px;
     padding: 10px 20px;
-    color: var(--fb-gray);
+    color: #65676B;
     width: 250px;
     display: flex;
     align-items: center;
-    border: 1px solid transparent;
-    transition: all 0.2s ease;
 }
-.fb-search:hover { background: #e4e6eb; }
 
 /* 2. LAYOUT COLUMNS */
 .main-layout { 
@@ -200,58 +182,49 @@ footer { display: none !important; }
     max-width: 1600px;
     margin: 0 auto;
 }
-.col-left { width: 220px !important; min-width: 220px !important; flex-shrink: 0; display: none; } 
+
+.col-left { width: 200px !important; min-width: 200px !important; flex-shrink: 0; display: none; } 
 .col-feed { flex-grow: 1; min-width: 600px; max-width: 1000px; }
-.col-right { width: 280px !important; min-width: 280px !important; flex-shrink: 0; display: none; }
+.col-right { width: 240px !important; min-width: 240px !important; flex-shrink: 0; display: none; }
 
-/* 3. PREMIUM CARD STYLING */
+/* 3. CARD STYLING */
 .fb-card {
-    background: var(--fb-white);
-    border-radius: 12px;
-    box-shadow: var(--shadow-sm);
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     margin-bottom: 25px;
     overflow: hidden;
     padding: 16px;
-    border: 1px solid rgba(0,0,0,0.08);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-/* Subtle interaction */
-.fb-card:hover {
-    box-shadow: var(--shadow-md);
+    border: 1px solid #e4e6eb;
 }
 
 /* 4. NAVIGATION BUTTONS */
 .nav-btn {
     width: 100% !important; 
-    height: 48px !important; /* Slightly taller */
+    height: 42.5px !important;
     text-align: left !important;
     justify-content: flex-start !important;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
-    color: var(--fb-text) !important;
+    color: #050505 !important;
     font-weight: 600 !important;
     font-size: 15px !important;
     padding: 0 12px !important;
-    border-radius: 10px !important;
+    border-radius: 8px !important;
     margin-bottom: 5px !important;
     display: flex !important;
     align-items: center !important;
-    transition: background-color 0.2s;
 }
 .nav-btn:hover { background-color: #e4e6eb !important; }
-.nav-btn.selected { background-color: #e7f3ff !important; color: var(--fb-blue) !important; }
+.nav-btn.selected { background-color: #e7f3ff !important; color: #1877f2 !important; }
 
 /* 5. POST HEADER */
 .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; 
-    border: 1px solid rgba(0,0,0,0.1);
-}
+.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: var(--fb-text); font-size: 15px; }
-.post-meta { font-size: 13px; color: var(--fb-gray); }
+.post-author { font-weight: 600; color: #050505; font-size: 15px; }
+.post-meta { font-size: 13px; color: #65676B; }
 
 /* 6. POST ACTIONS */
 .post-actions { 
@@ -261,54 +234,48 @@ footer { display: none !important; }
     display: flex; 
     justify-content: space-around; 
 }
-.action-btn { 
-    background: transparent !important; 
-    color: var(--fb-gray) !important; 
-    box-shadow: none !important; 
-    font-weight: 600 !important;
-    transition: background 0.2s !important;
-}
-.action-btn:hover { background: #f2f2f2 !important; border-radius: 6px; }
+.action-btn { background: transparent !important; color: #65676B !important; box-shadow: none !important; }
+.action-btn:hover { background: #f2f2f2 !important; }
 
 /* 7. CONTACTS */
 .contact-row {
-    display: flex; align-items: center; padding: 10px; border-radius: 8px; cursor: pointer; transition: background 0.2s;
+    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: 12px; color: var(--fb-text); }
-.profile-row { display: flex; align-items: center; padding: 10px; border-radius: 8px; }
-
-/* 8. STORIES / QUICK TRIES (The Premium Improvement) */
-/* This makes the gallery look like "Stories" */
-button.gallery-item { 
-    border: none !important; 
-    background: transparent !important; 
-    padding: 6px !important; 
-    overflow: visible !important;
-}
+.contact-name { font-weight: 500; font-size: 14px; margin-left: 10px; color: #050505; }
+.profile-row { display: flex; align-items: center; padding: 8px; border-radius: 8px; }
+
+/* 8. EXAMPLES */
+button.gallery-item { border: none !important; background: transparent !important; padding: 4px !important; }
 button.gallery-item img {
-    width: 120px !important; 
-    height: 120px !important; 
-    border-radius: 15px !important; /* Rounded Rectangle like Stories */
-    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Bouncy effect */
-    object-fit: cover; 
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    border: 3px solid white;
-    outline: 2px solid var(--fb-blue); /* Facebook Story Ring */
+    width: 110px !important; height: 110px !important; border-radius: 12px !important;
+    transition: all 0.3s ease !important; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 button.gallery-item:hover img {
-    transform: scale(1.1) rotate(2deg) !important; 
-    box-shadow: 0 10px 20px rgba(24, 119, 242, 0.4) !important; 
-    z-index: 100;
+    transform: scale(1.15) !important; box-shadow: 0 8px 15px rgba(24, 119, 242, 0.3) !important; z-index: 10;
 }
 
 /* 9. SEE MORE LOGIC */
 details[open] > summary { display: none !important; }
 
-/* UTILS */
-.sim-scroll { height: 200px; overflow-y: auto; font-size: 13px; color: var(--fb-text); scrollbar-width: thin; }
-.suggested-header { font-size: 12px; font-weight: bold; color: var(--fb-gray); margin-bottom: 5px; }
+/* 10. MODERN UPLOAD IMAGE (No border dashed, clean look) */
+.modern-image-container button {
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    border: 1px solid #e4e6eb !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+    padding: 0 !important;
+}
+.modern-image-container img {
+    border-radius: 8px !important;
+    width: 100% !important;
+    max-height: 400px !important;
+    object-fit: cover !important;
+}
 
+/* 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 (min-width: 1100px) { .col-left, .col-right { display: block; } }
 """
 
@@ -324,10 +291,10 @@ with gr.Blocks(title="CookBook") as demo:
             <div class="fb-logo">CookBook</div>
             <div class="fb-search">🔍 &nbsp; Search Recipe...</div>
         </div>
-        <div style="display:flex; gap:12px;">
-             <div style="width:40px;height:40px;background:#e4e6eb;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;">➕</div>
-             <div style="width:40px;height:40px;background:#e4e6eb;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;">💬</div>
-             <img src="data:image/jpeg;base64,{profile_b64}" style="width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid #ddd; cursor:pointer;">
+        <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>
     """)
@@ -343,16 +310,22 @@ with gr.Blocks(title="CookBook") as demo:
                 <div class="contact-name">Welcome Chef</div>
             </div>
             """)
-            gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 8px 10px 16px 10px;'>")
+            gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 10px 0;'>")
             
             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"])
             
-            gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 16px 10px;'>")
-            gr.Markdown("### Your Shortcuts")
-            gr.Markdown("🥘 Culinary Arts Group\n\n🥧 Grandmother's Secrets\n\n🥗 Healthy Eating")
+            gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 10px 0;'>")
+            
+            gr.HTML("""
+            <div style="color: #65676B; font-size: 13px; margin-top: 10px; padding-left: 10px;">
+                <div style="margin-bottom: 8px; cursor: pointer; font-weight: 500;">Support</div>
+                <div style="margin-bottom: 8px; cursor: pointer; font-weight: 500;">Terms of use</div>
+                <div>© 2025 All rights preserved</div>
+            </div>
+            """)
 
         # === CENTER COLUMN (Feed) ===
         with gr.Column(elem_classes=["col-feed"]):
@@ -363,27 +336,34 @@ with gr.Blocks(title="CookBook") as demo:
                 # SECTION A: USER INPUT
                 with gr.Group(elem_classes=["fb-card"]):
                     gr.Markdown("### 📸 Digitalize Recipe")
-                    gr.HTML("<div style='font-size: 13px; color: #65676B; margin-bottom: 12px;'>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: 0 0 16px 0;'>")
+                    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():
-                        input_img = gr.Image(type="filepath", label="Upload Recipe", height=250, container=False)
+                        # Added class for Facebook-like Image Style
+                        input_img = gr.Image(
+                            type="filepath", 
+                            label="Upload Recipe", 
+                            height=300, 
+                            container=False, 
+                            elem_classes=["modern-image-container"],
+                            sources=["upload"], # REMOVES WEBCAM
+                            show_download_button=False, # REMOVES COPY/DOWNLOAD
+                            show_share_button=False,
+                            interactive=True
+                        )
                     
-                    gr.HTML("<div style='height:20px'></div>")
-                    gr.Markdown("#### Quick Tries (Stories)")
+                    gr.HTML("<div style='height:15px'></div>")
                     
-                    # 1. Quick Start Images (Styled as Stories)
                     gr.Examples(
                         examples=[
                             ["quick_tries_images/applecrisp.jpg"], 
                             ["quick_tries_images/chocolateballs.png"],
                             ["quick_tries_images/tofu.jfif"]
                         ],
-                        inputs=input_img, label=None
+                        inputs=input_img, label="Quick Try (Click to load):"
                     )
-                    gr.HTML("<div style='height:15px'></div>")
-                    
-                    # 2. Convert Button (Styled Primary)
+                    gr.HTML("<div style='height:10px'></div>")
                     magic_btn = gr.Button("✨ Convert to Text", variant="primary") 
 
                 # --- 9 PIXEL SPACER ---
@@ -408,7 +388,7 @@ with gr.Blocks(title="CookBook") as demo:
                         gr.Button("💬 Comment", elem_classes=["action-btn"], size="sm")
                         gr.Button("📥 Save", elem_classes=["action-btn"], size="sm")
 
-                # SECTION C: SUGGESTIONS (SEPARATE DIV/GROUP)
+                # SECTION C: SUGGESTIONS
                 with gr.Group(visible=True):
                     gr.HTML("<br><hr style='border:0; border-top:1px solid #ced0d4; margin: 15px 0;'><br>")
                     gr.Markdown("### Suggested Pairings")
@@ -442,8 +422,12 @@ with gr.Blocks(title="CookBook") as demo:
                         post_time = random.choice(["2h", "3h", "6h", "Yesterday"])
                         
                         full_content = str(row['Raw_Output'])
-                        preview_text = full_content[:200]
-                        hidden_text = full_content[200:]
+                        # Smart Split
+                        split_idx = full_content[:200].rfind(" ")
+                        if split_idx == -1: split_idx = 200
+                        
+                        preview_text = full_content[:split_idx]
+                        hidden_text = full_content[split_idx:]
                         
                         with gr.Group(elem_classes=["fb-card"]):
                             gr.HTML(f"""
@@ -457,13 +441,7 @@ with gr.Blocks(title="CookBook") as demo:
                             """)
                             gr.Markdown(f"**{row['Title']}**")
                             gr.HTML(f"""
-                            <div style="font-family: inherit; font-size: 14px; line-height: 1.5;">
-                                {preview_text}
-                                <details style="display:inline;">
-                                    <summary style="cursor:pointer; color:#1877F2; font-weight:600; list-style:none; display:inline;">... See more</summary>
-                                    <span style="display:inline;">{hidden_text}</span>
-                                </details>
-                            </div>
+                            <div style="font-family: inherit; font-size: 14px; white-space: pre-wrap;">{preview_text}<details style="display:inline;"><summary style="cursor:pointer; color:#1877F2; font-weight:600; list-style:none; display:inline;">... See more</summary><span style="display:inline;">{hidden_text}</span></details></div>
                             """)
                             
                             with gr.Row(elem_classes=["post-actions"]):