Update app.py

app.py

@@ -39,12 +39,10 @@ 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")
 
@@ -120,10 +118,11 @@ body, .gradio-container { background-color: #f0f2f5; }
 }
 
 .logo-area { display: flex; align-items: center; gap: 15px; }
-.logo-img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; }
+.logo-img { height: 120px; width: 120px; border-radius: 12px; object-fit: cover; border: 1px solid #ddd; }
+
 .app-name { 
     font-weight: 800; 
-    font-size: 24px; 
+    font-size: 28px; 
     background: -webkit-linear-gradient(45deg, #1877f2, #6b21a8); 
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
@@ -144,7 +143,13 @@ body, .gradio-container { background-color: #f0f2f5; }
     transition: all 0.2s ease;
 }
 .nav-btn:hover { background-color: #e4e6eb !important; color: #050505 !important; }
-.nav-btn.selected { background-color: #e7f3ff !important; color: #1877f2 !important; }
+
+/* Selected State */
+.nav-btn.selected { 
+    background-color: #e7f3ff !important; 
+    color: #1877f2 !important; 
+    border-left: 4px solid #1877f2 !important;
+}
 
 /* Feed Cards */
 .content-card {
@@ -170,6 +175,17 @@ body, .gradio-container { background-color: #f0f2f5; }
     background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
     border: 1px solid #1877f2;
 }
+
+/* Right Side Trending Box */
+.trend-box {
+    background:white; 
+    padding:10px; 
+    border-radius:8px; 
+    margin-bottom:10px; 
+    box-shadow:0 1px 2px rgba(0,0,0,0.1);
+    transition: background 0.2s;
+}
+.trend-box:hover { background: #f0f2f5; cursor: pointer; }
 """
 
 # ==========================================
@@ -184,7 +200,7 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
                 <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 style="color: #65676b; font-weight: 600;">v2.2 Beta</div>
         </div>
     """)
 
@@ -192,22 +208,42 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
         
         # --- LEFT SIDEBAR (Navigation) ---
         with gr.Column(scale=1, min_width=200):
+            # My Profile Section
             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; object-fit:cover;">
-                <b style="font-size: 15px;">My Profile</b>
+            <div style="display:flex; align-items:center; padding: 10px 10px 5px 10px;">
+                <img src="data:image/jpeg;base64,{profile_b64}" style="width:40px; height:40px; border-radius:50%; margin-right:10px; object-fit:cover;">
+                <b style="font-size: 16px;">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"])
+            # Separator
+            gr.HTML("<hr style='border: 0; border-top: 1px solid #e4e6eb; margin: 10px 0 20px 0;'>")
+            
+            # FIX: Digitalizer is now FIRST and SELECTED by default
+            nav_digital = gr.Button("✨   AI Digitizer", elem_classes=["nav-btn", "selected"])
+            nav_feed = gr.Button("📰   News Feed", elem_classes=["nav-btn"])
             nav_about = gr.Button("ℹ️   About", elem_classes=["nav-btn"])
 
         # --- CENTER CONTENT ---
         with gr.Column(scale=3):
             
-            # === VIEW 1: FEED ===
-            with gr.Group(visible=True) as feed_view:
+            # === VIEW 1: AI DIGITALIZER (Now DEFAULT: visible=True) ===
+            with gr.Group(visible=True) 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 2: FEED (Now HIDDEN by default: visible=False) ===
+            with gr.Group(visible=False) as feed_view:
                 # "What's on your mind" Box
                 with gr.Group(elem_classes=["content-card"]):
                     with gr.Row():
@@ -222,7 +258,6 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
                         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,13 +267,10 @@ 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="secondary")
                                 gr.Button("💬 Comment", size="sm", variant="secondary")
@@ -246,62 +278,69 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
                 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>
-            """)
+            
+            # Helper to create trending box
+            def trend_box(title, likes):
+                return f"""
+                <div class="trend-box">
+                   <b>{title}</b><br>
+                   <span style="color:gray; font-size:12px;">{likes} likes</span>
+                </div>"""
+
+            # FIX: Added the 2 requested items
+            gr.HTML(trend_box("🍜 Ramen Hack", "12k") + 
+                    trend_box("🍪 Best Cookies", "8k") + 
+                    trend_box("🍰 Cheese Cake", "15k") + 
+                    trend_box("🍪 Nana's Tahini Cookies", "9k"))
 
     # ==========================================
     # 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)
+    
+    # FIX: Updated logic to match the new button order
+    # ORDER OF OUTPUTS: [DigitalizerView, FeedView, AboutView, NavDigital, NavFeed, NavAbout]
+    
+    def go_digi():
+        return (
+            gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), # Views: Digi, Feed, About
+            gr.update(elem_classes=["nav-btn", "selected"]), # Nav Digi
+            gr.update(elem_classes=["nav-btn"]),             # Nav Feed
+            gr.update(elem_classes=["nav-btn"])              # Nav About
+        )
+
+    def go_feed():
+        return (
+            gr.update(visible=False), gr.update(visible=True), gr.update(visible=False),
+            gr.update(elem_classes=["nav-btn"]),
+            gr.update(elem_classes=["nav-btn", "selected"]),
+            gr.update(elem_classes=["nav-btn"]) 
+        )
 
-    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])
+    def go_about():
+        return (
+            gr.update(visible=False), gr.update(visible=False), gr.update(visible=True),
+            gr.update(elem_classes=["nav-btn"]),
+            gr.update(elem_classes=["nav-btn"]), 
+            gr.update(elem_classes=["nav-btn", "selected"])
+        )
+
+    outputs_ui = [digitalizer_view, feed_view, about_view, nav_digital, nav_feed, nav_about]
+    
+    nav_digital.click(go_digi, None, outputs_ui)
+    nav_feed.click(go_feed, None, outputs_ui)
+    nav_about.click(go_about, None, outputs_ui)
 
 if __name__ == "__main__":
-    # Theme and CSS injected here to avoid Warnings
     demo.launch(theme=theme, css=modern_css)