Update app.py

app.py

@@ -7,14 +7,13 @@ import random
 import base64
 from huggingface_hub import InferenceClient
 from sklearn.metrics.pairwise import cosine_similarity
-from IO_pipeline import RecipeDigitalizerPipeline 
+from IO_pipeline import RecipeDigitalizerPipeline
 
 # ==========================================
-# 1. SETUP & DATA LOADING
+# 1. SETUP & DATA LOADING (Unchanged)
 # ==========================================
 hf_token = os.getenv("HF_TOKEN")
 API_MODEL = "BAAI/bge-small-en-v1.5"
-
 client = InferenceClient(token=hf_token) if hf_token else None
 
 print("⏳ Loading Data...")
@@ -40,16 +39,17 @@ except Exception as e:
 # ==========================================
 def image_to_base64(image_path):
     if not os.path.exists(image_path):
-        return ""
+        # Return a transparent pixel if missing to prevent broken image icon
+        return "R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     with open(image_path, "rb") as img_file:
         return base64.b64encode(img_file.read()).decode('utf-8')
 
-# Load Images (Ensure filenames match exactly what is in your Files tab)
+# Load Images
 logo_b64 = image_to_base64("logo.jpg")
 profile_b64 = image_to_base64("232px-Tv_the_muppet_show_bein_green.jpg")
 
 # ==========================================
-# 3. BACKEND LOGIC
+# 3. BACKEND LOGIC (Unchanged)
 # ==========================================
 def get_embedding_via_api(text):
     if not client: raise ValueError("HF_TOKEN missing")
@@ -92,197 +92,217 @@ def magic_pipeline(image_path):
         return f"Error: {e}", f"Error: {e}"
 
 # ==========================================
-# 4. CSS STYLING
+# 4. MODERN UI THEME & CSS
 # ==========================================
-fb_css = """
-body {background-color: #f0f2f5 !important; font-family: Helvetica, Arial, sans-serif;}
 
-/* --- HEADER --- */
-.fb-header {
-    background-color: #ffffff; 
-    color: #1877f2; 
-    padding: 15px 20px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-}
+# Create a modern Soft theme (Cleaner fonts, rounder corners)
+theme = gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="blue",
+    neutral_hue="slate",
+    font=[gr.themes.GoogleFont('Inter'), 'ui-sans-serif', 'system-ui']
+)
 
-.logo-img {
-    height: 120px;
-    width: 120px;
-    object-fit: cover;
-    margin-right: 20px;
-    border-radius: 8px;
-    border: 1px solid #eee;
+modern_css = """
+/* Background and Base */
+body, .gradio-container {
+    background-color: #f0f2f5; 
 }
 
-.header-text-col {
+/* Custom Header */
+.custom-header {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid #e4e6eb;
+    padding: 10px 20px;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 }
 
-.app-title { font-size: 32px; font-weight: 900; line-height: 1.1; }
-.app-slogan { font-size: 18px; font-weight: normal; color: #606770; }
+.logo-area { display: flex; align-items: center; gap: 15px; }
+.logo-img { height: 40px; width: 40px; border-radius: 50%; }
+.app-name { font-weight: 800; font-size: 24px; background: -webkit-linear-gradient(45deg, #1877f2, #6b21a8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
 
-/* --- SIDEBAR NAV --- */
-.sidebar-btn {
-    background-color: transparent !important;
-    color: #050505 !important;
+/* Sidebar Navigation Buttons */
+.nav-btn {
     text-align: left !important;
     justify-content: flex-start !important;
-    display: flex !important;
-    align-items: center !important;
+    background: transparent !important;
     border: none !important;
+    box-shadow: none !important;
+    color: #65676b !important;
     font-weight: 600 !important;
-    padding: 15px 10px !important;
     font-size: 16px !important;
-    box-shadow: none !important;
-    width: 100% !important;
-    border-radius: 8px !important;
-    border-bottom: 1px solid #e4e6eb !important; 
-    margin-bottom: 8px !important;
+    padding: 12px 16px !important;
+    border-radius: 10px !important;
+    transition: all 0.2s ease;
 }
-.sidebar-btn:hover { background-color: #e4e6eb !important; }
+.nav-btn:hover { background-color: #e4e6eb !important; color: #050505 !important; }
+.nav-btn.selected { background-color: #e7f3ff !important; color: #1877f2 !important; }
 
-/* --- IMAGES & AVATARS --- */
-.profile-avatar {
-    height: 100px; 
-    width: 100px;
-    object-fit: cover;
-    border-radius: 50%;
-    margin-right: 15px;
-    border: 2px solid #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.feed-avatar {
-    width: 40px; height: 40px; 
-    background-color: #e4e6eb; 
-    border-radius: 50%; 
-    text-align: center;
-    line-height: 40px;
-    margin-right: 10px;
-}
-
-/* --- CARDS --- */
-.fb-card {
+/* Cards (Feed & Tools) */
+.content-card {
     background: white;
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    border: 1px solid #ddd;
     padding: 20px;
     margin-bottom: 20px;
+    transition: transform 0.2s;
+}
+.content-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+
+/* Feed Specifics */
+.feed-user-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
+.feed-avatar { width: 40px; height: 40px; background: #e4e6eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
+.feed-meta { display: flex; flex-direction: column; }
+.feed-name { font-weight: 700; color: #050505; font-size: 15px; }
+.feed-time { font-size: 12px; color: #65676b; }
+
+/* Innovation/Digitalizer Styling */
+.digitalizer-container {
+    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
+    border: 1px solid #1877f2;
 }
 """
 
 # ==========================================
-# 5. LAYOUT
+# 5. LAYOUT CONSTRUCTION
 # ==========================================
-with gr.Blocks(css=fb_css, title="Legacy Kitchen") as demo:
+with gr.Blocks(theme=theme, css=modern_css, title="Legacy Kitchen") as demo:
     
     # --- HEADER ---
     gr.HTML(f"""
-        <div class="fb-header">
-            <img src="data:image/jpeg;base64,{logo_b64}" class="logo-img" alt="Logo">
-            <div class="header-text-col">
-                <span class="app-title">Legacy Kitchen</span>
-                <span class="app-slogan">Your Family Cookbook</span>
+        <div class="custom-header">
+            <div class="logo-area">
+                <img src="data:image/jpeg;base64,{logo_b64}" class="logo-img">
+                <span class="app-name">Legacy Kitchen</span>
             </div>
+            <div style="color: #65676b; font-weight: 600;">v2.0 Beta</div>
         </div>
     """)
 
     with gr.Row():
         
-        # --- LEFT SIDEBAR ---
-        with gr.Column(scale=1, min_width=250):
-            # MY PROFILE SECTION
+        # --- LEFT SIDEBAR (Navigation) ---
+        with gr.Column(scale=1, min_width=200):
+            # User Profile Snippet
             gr.HTML(f"""
-            <div style="display:flex; align-items:center; margin-bottom:30px; padding-left:10px;">
-                <img src="data:image/jpeg;base64,{profile_b64}" class="profile-avatar">
-                <b style="font-size: 18px;">My Profile</b>
+            <div style="display:flex; align-items:center; padding: 10px; margin-bottom: 10px;">
+                <img src="data:image/jpeg;base64,{profile_b64}" style="width:36px; height:36px; border-radius:50%; margin-right:10px;">
+                <b style="font-size: 15px;">My Profile</b>
             </div>
             """)
             
-            nav_feed = gr.Button("📰   Feed", elem_classes=["sidebar-btn"])
-            nav_digital = gr.Button("📸   Digitizer", elem_classes=["sidebar-btn"])
-            nav_about = gr.Button("ℹ️   About Us", elem_classes=["sidebar-btn"])
-            
-            gr.Markdown("---")
-            gr.Markdown("Privacy · Terms · Cookies")
+            nav_feed = gr.Button("📰   News Feed", elem_classes=["nav-btn", "selected"])
+            nav_digital = gr.Button("✨   AI Digitizer", elem_classes=["nav-btn"])
+            nav_about = gr.Button("ℹ️   About", elem_classes=["nav-btn"])
 
-        # --- RIGHT CONTENT ---
+        # --- CENTER CONTENT ---
         with gr.Column(scale=3):
             
-            # VIEW 1: FEED
+            # === VIEW 1: FEED ===
             with gr.Group(visible=True) as feed_view:
-                with gr.Group(elem_classes=["fb-card"]):
+                # "What's on your mind" Box
+                with gr.Group(elem_classes=["content-card"]):
                     with gr.Row():
-                        # Small Profile image for the post box
-                        gr.HTML(f'<img src="data:image/jpeg;base64,{profile_b64}" style="width:40px; height:40px; border-radius:50%; object-fit:cover; margin-right:10px;">')
-                        gr.Textbox(placeholder="What's cooking?", show_label=False, container=False, scale=5)
-
+                        gr.HTML(f'<img src="data:image/jpeg;base64,{profile_b64}" style="width:40px; height:40px; border-radius:50%;">')
+                        gr.Textbox(placeholder=f"What recipe are you cooking today?", show_label=False, container=False, scale=10)
+                
+                # Dynamic Feed Generation
                 if not df_recipes.empty:
                     feed_samples = df_recipes.sample(10)
                     for index, row in feed_samples.iterrows():
-                        with gr.Group(elem_classes=["fb-card"]):
-                            user = random.choice(["Grandma Rose", "Chef Mike", "Sarah J."])
-                            emoji = random.choice(["🥘", "🥗", "🍰"])
-                            
+                        user_name = random.choice(["Grandma Rose", "Chef Mike", "Sarah J."])
+                        emoji = random.choice(["🥘", "🥗", "🍰", "🌮"])
+                        
+                        with gr.Group(elem_classes=["content-card"]):
+                            # Header of the Post
                             gr.HTML(f"""
-                            <div style="display:flex; margin-bottom:10px;">
+                            <div class="feed-user-row">
                                 <div class="feed-avatar">{emoji}</div>
-                                <div><b>{user}</b><br><span style="color:gray; font-size:12px;">2h · 🌍</span></div>
+                                <div class="feed-meta">
+                                    <span class="feed-name">{user_name}</span>
+                                    <span class="feed-time">2h · 🌍 Public</span>
+                                </div>
                             </div>
                             """)
                             
-                            gr.Markdown(f"**{row['Title']}**\n\n{str(row['Raw_Output'])[:200]}... [Read More]")
+                            # Content
+                            gr.Markdown(f"### {row['Title']}")
+                            gr.Markdown(f"{str(row['Raw_Output'])[:250]}...")
+                            gr.Markdown(f"*[Click to see full recipe...]*")
                             
+                            # Action Buttons (Facebook Style)
                             with gr.Row():
-                                like_btn = gr.Button("👍 Like", size="sm")
-                                gr.Button("💬 Comment", size="sm")
-                                gr.Button("↗️ Share", size="sm")
-
-                            def toggle_like(x): return "👍 Liked!"
-                            like_btn.click(toggle_like, like_btn, like_btn)
+                                gr.Button("👍 Like", size="sm", variant="secondary")
+                                gr.Button("💬 Comment", size="sm", variant="secondary")
+                                gr.Button("↗️ Share", size="sm", variant="secondary")
                 else:
-                    gr.Markdown("Database empty.")
+                    gr.Markdown("⚠️ Database is empty. Please check your CSV file.")
 
-            # VIEW 2: DIGITALIZER
+            # === VIEW 2: AI DIGITALIZER ===
             with gr.Group(visible=False) as digitalizer_view:
-                gr.Markdown("### 📸 Digitize Recipe", elem_classes=["fb-card"])
+                gr.Markdown("## 📸 Recipe Digitalizer", elem_classes=["content-card"])
                 
-                with gr.Group(elem_classes=["fb-card"]):
-                    with gr.Row():
-                        with gr.Column():
-                            input_img = gr.Image(type="filepath", label="Upload Photo")
-                            magic_btn = gr.Button("✨ Digitize", variant="primary")
-                        with gr.Column():
-                            out_text = gr.Textbox(label="Text", lines=10)
-                            out_sim = gr.Textbox(label="Similar", lines=10)
+                with gr.Row():
+                    with gr.Column(elem_classes=["content-card", "digitalizer-container"]):
+                        input_img = gr.Image(type="filepath", label="Upload Handwritten Note", height=300)
+                        magic_btn = gr.Button("✨ Convert to Text", variant="primary", size="lg")
                     
-                    magic_btn.click(magic_pipeline, input_img, [out_text, out_sim])
-            
-            # VIEW 3: ABOUT US (Fixed string formatting)
+                    with gr.Column(elem_classes=["content-card"]):
+                        out_text = gr.Textbox(label="Digitized Text", lines=6, show_copy_button=True)
+                        out_sim = gr.Textbox(label="Similar Recipes in Database", lines=6)
+                
+                magic_btn.click(magic_pipeline, input_img, [out_text, out_sim])
+
+            # === VIEW 3: ABOUT ===
             with gr.Group(visible=False) as about_view:
-                gr.Markdown("### ℹ️ About Us", elem_classes=["fb-card"])
-                with gr.Group(elem_classes=["fb-card"]):
+                with gr.Group(elem_classes=["content-card"]):
                     gr.Markdown("""
-                    **Legacy Kitchen** is a project dedicated to preserving culinary history. 
+                    # ℹ️ About Legacy Kitchen
                     
-                    We believe that every handwritten recipe tells a story. Our AI-powered platform helps you:
-                    1. **Digitize** old handwritten notes into clear text.
-                    2. **Discover** similar dishes from a database of 10,000+ recipes.
-                    3. **Connect** with a community of food lovers.
+                    **Preserving Heritage through AI.**
                     
-                    *Preserving the Past, Cooking for the Future.*
+                    Legacy Kitchen allows you to upload photos of your grandmother's handwritten recipe cards and instantly converts them into digital text using OCR and AI models.
+                    
+                    ### Tech Stack
+                    * **Hugging Face Spaces** for hosting
+                    * **Gradio** for the UI
+                    * **Transformers** for embeddings
                     """)
 
-    # Nav Logic
-    nav_feed.click(lambda: (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)), None, [feed_view, digitalizer_view, about_view])
-    nav_digital.click(lambda: (gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)), None, [feed_view, digitalizer_view, about_view])
-    nav_about.click(lambda: (gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)), None, [feed_view, digitalizer_view, about_view])
+        # --- RIGHT COLUMN (Sponsored/Trending - Optional Facebook Feature) ---
+        with gr.Column(scale=1, min_width=200):
+            gr.Markdown("### Trending Recipes")
+            gr.HTML("""
+            <div style="background:white; padding:10px; border-radius:8px; margin-bottom:10px;">
+               <b>🍜 Ramen Hack</b><br>
+               <span style="color:gray; font-size:12px;">12k likes</span>
+            </div>
+            <div style="background:white; padding:10px; border-radius:8px;">
+               <b>🍪 Best Cookies</b><br>
+               <span style="color:gray; font-size:12px;">8k likes</span>
+            </div>
+            """)
+
+    # ==========================================
+    # 6. JAVASCRIPT LOGIC (Client Side)
+    # ==========================================
+    # We use simple visibility toggles for the Single Page App feel
+    
+    def go_feed(): return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
+    def go_digi(): return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
+    def go_about(): return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
+
+    nav_feed.click(go_feed, None, [feed_view, digitalizer_view, about_view])
+    nav_digital.click(go_digi, None, [feed_view, digitalizer_view, about_view])
+    nav_about.click(go_about, None, [feed_view, digitalizer_view, about_view])
 
 if __name__ == "__main__":
     demo.launch()