Update app.py

app.py

@@ -66,8 +66,11 @@ def find_similar_recipes_list(query_text):
     for idx in top_indices:
         row = df_recipes.iloc[idx]
         title = row['Title']
-        desc = str(row['Raw_Output'])[:200] + "..."
-        card_content = f"### 🏆 {title}\n\n{desc}"
+        # INCREASED TEXT LENGTH to 600 chars to demonstrate scrolling
+        desc = str(row['Raw_Output'])[:600] + "..."
+        
+        # Wrapped description in a div class 'sim-scroll' for CSS styling
+        card_content = f"### 🏆 {title}\n\n<div class='sim-scroll'>{desc}</div>"
         results_list.append(card_content)
     
     while len(results_list) < 3:
@@ -171,7 +174,8 @@ body, .gradio-container { background-color: #f0f2f5; }
     border: 1px solid #ddd;
     padding: 20px;
     margin-bottom: 20px;
-    height: 100%; /* Important for equal height */
+    height: 100%;
+    overflow: visible !important; /* Allow pop-ups to be seen */
 }
 
 /* Similar Recipe Cards */
@@ -182,6 +186,19 @@ body, .gradio-container { background-color: #f0f2f5; }
     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 */
@@ -199,156 +216,13 @@ body, .gradio-container { background-color: #f0f2f5; }
 .gap-fix {
     gap: 25px !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.3</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):
-                        # FIX 1: Removed Header "1. Upload Note"
-                        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
-                            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):
-                        # FIX 2: Removed Header "2. Digital Text"
-                        with gr.Group(elem_classes=["content-card"]):
-                            # FIX 3: Added Empty State Placeholder
-                            # FIX 4: Increased lines to 20 to align bottom with the left column examples
-                            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():
-                    with gr.Column(elem_classes=["sim-card"]):
-                        sim1 = gr.Markdown("Once you will upload your scanned recipe, we will share similar recipes!")
-                    with gr.Column(elem_classes=["sim-card"]):
-                        sim2 = gr.Markdown("")
-                    with gr.Column(elem_classes=["sim-card"]):
-                        sim3 = gr.Markdown("")
-
-                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)
+/* --- 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