Update app.py

app.py

@@ -39,10 +39,12 @@ except Exception as e:
 # ==========================================
 def image_to_base64(image_path):
     if not os.path.exists(image_path):
+        # Returns a 1x1 transparent pixel if image is missing to avoid errors
         return "R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     with open(image_path, "rb") as img_file:
         return base64.b64encode(img_file.read()).decode('utf-8')
 
+# Ensure these files are in your Spaces "Files" tab
 logo_b64 = image_to_base64("logo.jpg")
 profile_b64 = image_to_base64("232px-Tv_the_muppet_show_bein_green.jpg")
 
@@ -101,8 +103,10 @@ theme = gr.themes.Soft(
 
 modern_css = """
 body, .gradio-container { background-color: #f0f2f5; }
+
+/* Sticky Header */
 .custom-header {
-    background: rgba(255, 255, 255, 0.9);
+    background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid #e4e6eb;
     padding: 10px 20px;
@@ -114,9 +118,18 @@ body, .gradio-container { background-color: #f0f2f5; }
     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; }
+.logo-img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; }
+.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 */
 .nav-btn {
     text-align: left !important;
     justify-content: flex-start !important;
@@ -132,6 +145,8 @@ body, .gradio-container { background-color: #f0f2f5; }
 }
 .nav-btn:hover { background-color: #e4e6eb !important; color: #050505 !important; }
 .nav-btn.selected { background-color: #e7f3ff !important; color: #1877f2 !important; }
+
+/* Feed Cards */
 .content-card {
     background: white;
     border-radius: 12px;
@@ -141,12 +156,16 @@ body, .gradio-container { background-color: #f0f2f5; }
     margin-bottom: 20px;
     transition: transform 0.2s;
 }
-.content-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+.content-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
+
+/* Feed User Info */
 .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;
@@ -156,9 +175,9 @@ body, .gradio-container { background-color: #f0f2f5; }
 # ==========================================
 # 5. LAYOUT CONSTRUCTION
 # ==========================================
-# 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">
@@ -170,31 +189,40 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
     """)
 
     with gr.Row():
+        
+        # --- LEFT SIDEBAR (Navigation) ---
         with gr.Column(scale=1, min_width=200):
             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;">
+                <img src="data:image/jpeg;base64,{profile_b64}" style="width:36px; height:36px; border-radius:50%; margin-right:10px; object-fit:cover;">
                 <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):
-            # FEED VIEW
+            
+            # === VIEW 1: FEED ===
             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.HTML(f'<img src="data:image/jpeg;base64,{profile_b64}" style="width:40px; height:40px; border-radius:50%; object-fit:cover;">')
                         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>
@@ -204,8 +232,76 @@ with gr.Blocks(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
                             with gr.Row():
-                                gr.Button("👍 Like", size="sm", variant="
+                                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, interactive=False)
+                        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 (Trending) ---
+        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; box-shadow:0 1px 2px rgba(0,0,0,0.1);">
+               <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; box-shadow:0 1px 2px rgba(0,0,0,0.1);">
+               <b>🍪 Best Cookies</b><br>
+               <span style="color:gray; font-size:12px;">8k likes</span>
+            </div>
+            """)
+
+    # ==========================================
+    # 6. JAVASCRIPT LOGIC (Client Side)
+    # ==========================================
+    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__":
+    # Theme and CSS injected here to avoid Warnings
+    demo.launch(theme=theme, css=modern_css)