Update app.py

app.py

@@ -90,10 +90,11 @@ def find_similar_recipes_list(query_text):
         title = row['Title']
         desc = str(row['Raw_Output'])
         
+        # HTML Content for Similar Cards
         card_content = (
-            f"<div style='font-weight: bold; font-size: 16px; margin-bottom: 4px; color: #050505;'>🥘 {title}</div>"
-            f"<div style='color: #1877F2; font-size: 13px; font-weight: 600; margin-bottom: 8px;'>Similarity Score: {score:.3f}</div>"
-            f"<div class='sim-scroll' style='font-size: 13px; color: #050505;'>{desc}</div>"
+            f"<div style='font-weight: bold; font-size: 15px; margin-bottom: 4px; color: #050505; height: 40px; overflow: hidden;'>🥘 {title}</div>"
+            f"<div style='color: #1877F2; font-size: 12px; font-weight: 600; margin-bottom: 8px;'>Match: {score:.3f}</div>"
+            f"<div class='sim-scroll' style='font-size: 12px; color: #65676B; height: 150px;'>{desc}</div>"
         )
         results_list.append(card_content)
     
@@ -144,7 +145,7 @@ body { background-color: #f0f2f5; margin: 0; padding: 0; }
 .gradio-container { background-color: #f0f2f5 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
 footer { display: none !important; }
 
-/* 1. FIXED NAVBAR */
+/* 1. STICKY NAVBAR */
 .fb-navbar {
     background: white;
     height: 56px;
@@ -152,7 +153,7 @@ footer { display: none !important; }
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     display: flex;
     align-items: center;
-    position: sticky; /* Keep navbar sticky at top */
+    position: sticky;
     top: 0;
     z-index: 999;
     justify-content: space-between;
@@ -175,7 +176,7 @@ footer { display: none !important; }
     align-items: center;
 }
 
-/* 2. LAYOUT COLUMNS - STANDARD FLOW (NO FIXED SIDEBARS) */
+/* 2. LAYOUT COLUMNS */
 .main-layout { 
     display: flex; 
     justify-content: center; 
@@ -186,29 +187,24 @@ footer { display: none !important; }
     align-items: flex-start;
 }
 
-/* Left Sidebar */
 .col-left { 
     width: 280px !important; 
     min-width: 280px !important; 
     flex-shrink: 0; 
-    display: none; /* Hidden on mobile */
-    /* No position: sticky here anymore */
+    display: none; 
 } 
 
-/* Center Feed */
 .col-feed { 
     flex-grow: 1;
     min-width: 600px;
     max-width: 1000px;
-    /* No overflow-y auto here, let the page scroll */
 }
 
-/* Right Sidebar */
 .col-right { 
     width: 280px !important; 
     min-width: 280px !important; 
     flex-shrink: 0; 
-    display: none; /* Hidden on mobile */
+    display: none; 
 }
 
 /* 3. CARD STYLING */
@@ -304,7 +300,7 @@ details[open] > summary { display: none !important; }
 }
 
 /* UTILS */
-.sim-scroll { height: 200px; overflow-y: auto; font-size: 13px; color: #050505; }
+.sim-scroll { height: 150px; overflow-y: auto; font-size: 13px; color: #050505; }
 .suggested-header { font-size: 12px; font-weight: bold; color: #65676B; margin-bottom: 5px; }
 @media (min-width: 1100px) { .col-left, .col-right { display: block; } }
 """
@@ -393,8 +389,8 @@ with gr.Blocks(title="CookBook") as demo:
                     gr.HTML("<div style='height:10px'></div>")
                     magic_btn = gr.Button("✨ Convert to Text", variant="primary") 
 
-                # --- 9 PIXEL SPACER ---
-                gr.HTML("<div style='height: 9px;'></div>")
+                # --- 30 PIXEL SPACER (INCREASED) ---
+                gr.HTML("<div style='height: 30px;'></div>")
 
                 # SECTION B: TEXT OUTPUT
                 with gr.Group(elem_classes=["fb-card"]):
@@ -415,27 +411,41 @@ with gr.Blocks(title="CookBook") as demo:
                         gr.Button("💬 Comment", elem_classes=["action-btn"], size="sm")
                         gr.Button("📥 Save", elem_classes=["action-btn"], size="sm")
 
-                # SECTION C: SIMILAR RECIPES
+                # SECTION C: SIMILAR RECIPES (SEPARATE HORIZONTAL ROW)
                 with gr.Group(visible=True):
-                    gr.HTML("<br><hr style='border:0; border-top:1px solid #ced0d4; margin: 15px 0;'><br>")
+                    gr.HTML("<br><hr style='border:0; border-top:1px solid #ced0d4; margin: 20px 0;'><br>")
                     gr.Markdown("### 🔍 Similar Recipes")
                     
-                    with gr.Group(elem_classes=["fb-card"], visible=False) as c1_box:
-                        sim1 = gr.Markdown("Similar Recipe 1")
-                        with gr.Row(elem_classes=["post-actions"], visible=False) as c1_btns:
-                            gr.Button("Save", elem_classes=["action-btn"], size="sm")
-
-                    with gr.Group(elem_classes=["fb-card"], visible=False) as c2_box:
-                        sim2 = gr.Markdown("Similar Recipe 2")
-                        with gr.Row(elem_classes=["post-actions"]):
-                            gr.Button("Save", elem_classes=["action-btn"], size="sm")
-
-                    with gr.Group(elem_classes=["fb-card"], visible=False) as c3_box:
-                        sim3 = gr.Markdown("Similar Recipe 3")
-                        with gr.Row(elem_classes=["post-actions"]):
-                            gr.Button("Save", elem_classes=["action-btn"], size="sm")
-
-                magic_btn.click(ui_update_pipeline, input_img, [out_text, sim1, c1_btns, c2_box, sim2, c3_box, sim3])
+                    # USE ROW to place cards next to each other
+                    with gr.Row():
+                        
+                        # Recipe 1
+                        with gr.Column(scale=1, min_width=200):
+                            with gr.Group(elem_classes=["fb-card"]):
+                                sim1 = gr.HTML("Waiting for results...")
+                                with gr.Row(elem_classes=["post-actions"], visible=False) as c1_btns:
+                                    gr.Button("Save", elem_classes=["action-btn"], size="sm")
+
+                        # Recipe 2
+                        with gr.Column(scale=1, min_width=200):
+                            with gr.Group(elem_classes=["fb-card"]):
+                                sim2 = gr.HTML("Waiting for results...")
+                                with gr.Row(elem_classes=["post-actions"], visible=False) as c2_btns:
+                                    gr.Button("Save", elem_classes=["action-btn"], size="sm")
+
+                        # Recipe 3
+                        with gr.Column(scale=1, min_width=200):
+                            with gr.Group(elem_classes=["fb-card"]):
+                                sim3 = gr.HTML("Waiting for results...")
+                                with gr.Row(elem_classes=["post-actions"], visible=False) as c3_btns:
+                                    gr.Button("Save", elem_classes=["action-btn"], size="sm")
+
+                # Corrected Output Mapping for the new HTML components
+                magic_btn.click(
+                    ui_update_pipeline, 
+                    input_img, 
+                    [out_text, sim1, c1_btns, sim2, c2_btns, sim3, c3_btns]
+                )
 
             # --- VIEW 2: FEED ---
             with gr.Column(visible=False) as feed_view: