Update app.py

app.py

@@ -10,7 +10,7 @@ from sklearn.metrics.pairwise import cosine_similarity
 from IO_pipeline import RecipeDigitalizerPipeline
 
 # ==========================================
-# 1. SETUP & DATA LOADING (Unchanged)
+# 1. SETUP & DATA LOADING 
 # ==========================================
 hf_token = os.getenv("HF_TOKEN")
 API_MODEL = "BAAI/bge-small-en-v1.5"
@@ -39,17 +39,15 @@ except Exception as e:
 # ==========================================
 def image_to_base64(image_path):
     if not os.path.exists(image_path):
-        # 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
 logo_b64 = image_to_base64("logo.jpg")
 profile_b64 = image_to_base64("232px-Tv_the_muppet_show_bein_green.jpg")
 
 # ==========================================
-# 3. BACKEND LOGIC (Unchanged)
+# 3. BACKEND LOGIC
 # ==========================================
 def get_embedding_via_api(text):
     if not client: raise ValueError("HF_TOKEN missing")
@@ -94,8 +92,6 @@ def magic_pipeline(image_path):
 # ==========================================
 # 4. MODERN UI THEME & CSS
 # ==========================================
-
-# Create a modern Soft theme (Cleaner fonts, rounder corners)
 theme = gr.themes.Soft(
     primary_hue="indigo",
     secondary_hue="blue",
@@ -104,12 +100,7 @@ theme = gr.themes.Soft(
 )
 
 modern_css = """
-/* Background and Base */
-body, .gradio-container {
-    background-color: #f0f2f5; 
-}
-
-/* Custom Header */
+body, .gradio-container { background-color: #f0f2f5; }
 .custom-header {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
@@ -123,12 +114,9 @@ body, .gradio-container {
     z-index: 1000;
     box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 }
-
 .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 Navigation Buttons */
 .nav-btn {
     text-align: left !important;
     justify-content: flex-start !important;
@@ -144,8 +132,6 @@ body, .gradio-container {
 }
 .nav-btn:hover { background-color: #e4e6eb !important; color: #050505 !important; }
 .nav-btn.selected { background-color: #e7f3ff !important; color: #1877f2 !important; }
-
-/* Cards (Feed & Tools) */
 .content-card {
     background: white;
     border-radius: 12px;
@@ -156,15 +142,11 @@ body, .gradio-container {
     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;
@@ -174,9 +156,9 @@ body, .gradio-container {
 # ==========================================
 # 5. LAYOUT CONSTRUCTION
 # ==========================================
-with gr.Blocks(theme=theme, css=modern_css, title="Legacy Kitchen") as demo:
+# FIX 1: Removed theme and css from here
+with gr.Blocks(title="Legacy Kitchen") as demo:
     
-    # --- HEADER ---
     gr.HTML(f"""
         <div class="custom-header">
             <div class="logo-area">
@@ -188,41 +170,31 @@ with gr.Blocks(theme=theme, css=modern_css, title="Legacy Kitchen") as demo:
     """)
 
     with gr.Row():
-        
-        # --- LEFT SIDEBAR (Navigation) ---
         with gr.Column(scale=1, min_width=200):
-            # User Profile Snippet
             gr.HTML(f"""
             <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("📰   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"])
 
-        # --- CENTER CONTENT ---
         with gr.Column(scale=3):
-            
-            # === VIEW 1: FEED ===
+            # FEED VIEW
             with gr.Group(visible=True) as feed_view:
-                # "What's on your mind" Box
                 with gr.Group(elem_classes=["content-card"]):
                     with gr.Row():
                         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():
                         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 class="feed-user-row">
                                 <div class="feed-avatar">{emoji}</div>
@@ -232,77 +204,8 @@ with gr.Blocks(theme=theme, css=modern_css, title="Legacy Kitchen") as demo:
                                 </div>
                             </div>
                             """)
-                            
-                            # 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():
-                                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 is empty. Please check your CSV file.")
-
-            # === VIEW 2: AI DIGITALIZER ===
-            with gr.Group(visible=False) as digitalizer_view:
-                gr.Markdown("## 📸 Recipe Digitalizer", elem_classes=["content-card"])
-                
-                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")
-                    
-                    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:
-                with gr.Group(elem_classes=["content-card"]):
-                    gr.Markdown("""
-                    # ℹ️ About Legacy Kitchen
-                    
-                    **Preserving Heritage through AI.**
-                    
-                    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
-                    """)
-
-        # --- 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()
+                                gr.Button("👍 Like", size="sm", variant="