Update app.py

app.py

@@ -66,10 +66,10 @@ def find_similar_recipes_list(query_text):
     for idx in top_indices:
         row = df_recipes.iloc[idx]
         title = row['Title']
-        # INCREASED TEXT LENGTH to 600 chars to demonstrate scrolling
-        desc = str(row['Raw_Output'])[:600] + "..."
+        # Text description for the card
+        desc = str(row['Raw_Output'])[:800] + "..." # Increased text limit
         
-        # Wrapped description in a div class 'sim-scroll' for CSS styling
+        # Wrapped in sim-scroll for the 400px height
         card_content = f"### 🏆 {title}\n\n<div class='sim-scroll'>{desc}</div>"
         results_list.append(card_content)
     
@@ -86,8 +86,11 @@ def format_recipe(json_data):
     text = f"🍽️ {title}\n\n🛒 INGREDIENTS:\n{ing}\n\n🍳 INSTRUCTIONS:\n{inst}"
     return text, f"{title} {ing} {inst}"
 
-def magic_pipeline(image_path):
-    if not hf_token: return "Error: HF_TOKEN missing", "", "", ""
+# --- NEW: PIPELINE WRAPPER TO HANDLE VISIBILITY UPDATES ---
+def ui_update_pipeline(image_path):
+    if not hf_token: 
+        return "Error: HF_TOKEN missing", "", gr.update(), gr.update(), "", gr.update(), ""
+    
     try:
         os.environ["HF_TOKEN"] = hf_token
         digitizer = RecipeDigitalizerPipeline()
@@ -98,11 +101,24 @@ def magic_pipeline(image_path):
             sim_list = find_similar_recipes_list(query)
         else:
             sim_list = ["No query generated.", "", ""]
-            
-        return readable, sim_list[0], sim_list[1], sim_list[2]
+        
+        # RETURNS:
+        # 1. Digitized Text
+        # 2. Sim Card 1 Text
+        # 3. Sim Card 1 Buttons (Visible)
+        # 4. Sim Card 2 Container (Visible)
+        # 5. Sim Card 2 Text
+        # 6. Sim Card 3 Container (Visible)
+        # 7. Sim Card 3 Text
+        return (
+            readable, 
+            sim_list[0], gr.update(visible=True), # Card 1
+            gr.update(visible=True), sim_list[1], # Card 2
+            gr.update(visible=True), sim_list[2]  # Card 3
+        )
         
     except Exception as e:
-        return f"Error: {e}", "Error", "Error", "Error"
+        return f"Error: {e}", "Error", gr.update(), gr.update(), "", gr.update(), ""
 
 # ==========================================
 # 4. MODERN UI THEME & CSS
@@ -132,265 +148,4 @@ body, .gradio-container { background-color: #f0f2f5; }
     box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 }
 
-.logo-area { display: flex; align-items: center; gap: 20px; }
-.logo-img { height: 120px; width: 120px; border-radius: 12px; object-fit: cover; border: 1px solid #ddd; }
-.text-area { display: flex; flex-direction: column; }
-.app-name { 
-    font-weight: 800; 
-    font-size: 32px; 
-    background: -webkit-linear-gradient(45deg, #1877f2, #6b21a8); 
-    -webkit-background-clip: text; 
-    -webkit-text-fill-color: transparent; 
-    line-height: 1.2;
-}
-.app-slogan { font-size: 16px; color: #65676b; font-weight: 500; }
-
-/* Sidebar Navigation */
-.nav-btn {
-    text-align: left !important;
-    justify-content: flex-start !important;
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    color: #65676b !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    padding: 12px 16px !important;
-    border-radius: 10px !important;
-    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; 
-    border-left: 4px solid #1877f2 !important;
-}
-
-/* General Cards */
-.content-card {
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-    border: 1px solid #ddd;
-    padding: 20px;
-    margin-bottom: 20px;
-    height: 100%;
-    overflow: visible !important; /* Allow pop-ups to be seen */
-}
-
-/* Similar Recipe Cards */
-.sim-card {
-    background: #fff;
-    border: 1px solid #eee;
-    border-radius: 8px;
-    padding: 15px;
-    height: 100%;
-    border-top: 4px solid #1877f2;
-    display: flex; 
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-/* SCROLLABLE TEXT AREA for Similar Recipes */
-.sim-scroll {
-    height: 150px;       /* Fixed height */
-    overflow-y: auto;    /* Enable Vertical Scrolling */
-    margin-bottom: 10px;
-    padding-right: 5px;  /* Space for scrollbar */
-    font-size: 14px;
-    color: #4b4f56;
-}
-
-/* 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; }
-
-/* Gap Fix */
-.gap-fix {
-    gap: 25px !important; 
-}
-
-/* --- IMAGE POP HOVER EFFECT --- */
-/* Targets the buttons inside the Examples component */
-button.gallery-item {
-    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
-    z-index: 1;
-}
-button.gallery-item:hover {
-    transform: scale(2.5) !important; /* Make it BIG */
-    z-index: 1000 !important;         /* Put it on top of everything */
-    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
-    border: 2px solid white !important;
-    border-radius: 8px !important;
-}
-"""
-
-# ==========================================
-# 5. LAYOUT CONSTRUCTION
-# ==========================================
-with gr.Blocks(title="Legacy Kitchen") as demo:
-    
-    # --- HEADER ---
-    gr.HTML(f"""
-        <div class="custom-header">
-            <div class="logo-area">
-                <img src="data:image/jpeg;base64,{logo_b64}" class="logo-img">
-                <div class="text-area">
-                    <span class="app-name">Legacy Kitchen</span>
-                    <span class="app-slogan">Turning Handwritten Notes into a Digital Cookbook.</span>
-                </div>
-            </div>
-            <div style="color: #65676b; font-weight: 600;">v3.4</div>
-        </div>
-    """)
-
-    with gr.Row():
-        
-        # --- LEFT SIDEBAR ---
-        with gr.Column(scale=1, min_width=200):
-            gr.HTML(f"""
-            <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>
-            """)
-            gr.HTML("<hr style='border: 0; border-top: 1px solid #e4e6eb; margin: 10px 0 20px 0;'>")
-            
-            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: AI DIGITALIZER ===
-            with gr.Group(visible=True) as digitalizer_view:
-                
-                # SECTION 1: UPLOAD & TEXT
-                with gr.Row(elem_classes=["gap-fix"]):
-                    
-                    # Left: Upload & Examples
-                    with gr.Column(scale=1):
-                        with gr.Group(elem_classes=["content-card"]):
-                            input_img = gr.Image(type="filepath", label="Upload", height=300)
-                            magic_btn = gr.Button("✨ Convert to Digital", variant="primary", size="lg")
-                            
-                            # Examples Component (Hover effect added in CSS)
-                            gr.Examples(
-                                examples=[
-                                    ["quick_tries_images/applecrisp.jpg"],
-                                    ["quick_tries_images/meatballs recipe.jpg"],
-                                    ["quick_tries_images/tofu.jfif"]
-                                ],
-                                inputs=input_img,
-                                label="Or try these examples:",
-                                cache_examples=False
-                            )
-                    
-                    # Right: Text
-                    with gr.Column(scale=1):
-                        with gr.Group(elem_classes=["content-card"]):
-                            out_text = gr.Textbox(
-                                label="Result", 
-                                value="Here your digitalized recipe will be presented",
-                                lines=20, 
-                                interactive=False, 
-                                show_label=False
-                            )
-
-                # Spacer
-                gr.HTML("<div style='height: 35px;'></div>")
-
-                # SECTION 2: SIMILAR RECIPES
-                gr.Markdown("### 3. Similar Recipes from Database")
-                
-                with gr.Row():
-                    # CARD 1
-                    with gr.Column(elem_classes=["sim-card"]):
-                        sim1 = gr.Markdown("Once you will upload your scanned recipe, we will share similar recipes!")
-                        with gr.Row():
-                            gr.Button("👍 Like", size="sm", variant="secondary")
-                            gr.Button("↗️ Share", size="sm", variant="secondary")
-                    
-                    # CARD 2
-                    with gr.Column(elem_classes=["sim-card"]):
-                        sim2 = gr.Markdown("")
-                        with gr.Row():
-                            gr.Button("👍 Like", size="sm", variant="secondary")
-                            gr.Button("↗️ Share", size="sm", variant="secondary")
-                    
-                    # CARD 3
-                    with gr.Column(elem_classes=["sim-card"]):
-                        sim3 = gr.Markdown("")
-                        with gr.Row():
-                            gr.Button("👍 Like", size="sm", variant="secondary")
-                            gr.Button("↗️ Share", size="sm", variant="secondary")
-
-                magic_btn.click(magic_pipeline, input_img, [out_text, sim1, sim2, sim3])
-
-            # === VIEW 2: FEED ===
-            with gr.Group(visible=False) as feed_view:
-                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%; object-fit:cover;">')
-                        gr.Textbox(placeholder=f"What recipe are you cooking today?", show_label=False, container=False, scale=10)
-                
-                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"]):
-                            gr.HTML(f"""
-                            <div style="display:flex; gap:10px; align-items:center; margin-bottom:12px;">
-                                <div style="width:40px; height:40px; background:#e4e6eb; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px;">{emoji}</div>
-                                <div><b>{user_name}</b><br><span style="color:gray; font-size:12px;">2h · 🌍 Public</span></div>
-                            </div>
-                            """)
-                            gr.Markdown(f"### {row['Title']}")
-                            gr.Markdown(f"{str(row['Raw_Output'])[:250]}...")
-                            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.")
-
-            # === VIEW 3: ABOUT ===
-            with gr.Group(visible=False) as about_view:
-                with gr.Group(elem_classes=["content-card"]):
-                    gr.Markdown("# ℹ️ About Legacy Kitchen\n\n**Turning Handwritten Notes into a Digital Cookbook.**")
-
-        # --- RIGHT COLUMN ---
-        with gr.Column(scale=1, min_width=200):
-            gr.Markdown("### Trending Recipes")
-            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>"
-            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
-    # ==========================================
-    def go_digi():
-        return (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]))
-
-    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"]))
-
-    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__":
-    demo.launch(theme=theme, css=modern_css)
+.logo-area { display: flex; align-items: center; gap: