Update app.py

app.py

@@ -89,12 +89,12 @@ def find_similar_recipes_list(query_text):
         row = df_recipes.iloc[idx]
         title = row['Title']
         desc = str(row['Raw_Output'])
-        score_display = f"{score:.0%}"
         
+        # --- MODIFIED: Show Title, Exact Score (3 decimals), and Description ---
         card_content = (
-            f"<div class='suggested-header'>Suggested for you · {score_display} Match</div>"
-            f"### 🥘 {title}\n"
-            f"<div class='sim-scroll'>{desc}</div>"
+            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>"
         )
         results_list.append(card_content)
     
@@ -141,13 +141,12 @@ theme = gr.themes.Default(
 )
 
 facebook_css = """
-/* GLOBAL LOCK: This stops the whole page from scrolling */
 body, html { 
     background-color: #f0f2f5; 
     margin: 0; 
     padding: 0; 
-    height: 100vh; /* Force height to screen size */
-    overflow: hidden !important; /* Hide main scrollbar */
+    height: 100vh;
+    overflow: hidden !important; 
 }
 .gradio-container { 
     background-color: #f0f2f5 !important; 
@@ -166,7 +165,7 @@ footer { display: none !important; }
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     display: flex;
     align-items: center;
-    position: fixed; /* Fixed at top */
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
@@ -174,67 +173,97 @@ footer { display: none !important; }
     justify-content: space-between;
 }
 .fb-logo { 
-    color: #1877F2; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-right: 20px; font-family: Helvetica, Arial, sans-serif;
+    color: #1877F2; 
+    font-size: 28px; 
+    font-weight: 800; 
+    letter-spacing: -0.5px;
+    margin-right: 20px;
+    font-family: Helvetica, Arial, sans-serif;
 }
 .fb-search {
-    background: #f0f2f5; border-radius: 50px; padding: 10px 20px; color: #65676B; width: 250px; display: flex; align-items: center;
+    background: #f0f2f5;
+    border-radius: 50px;
+    padding: 10px 20px;
+    color: #65676B;
+    width: 250px;
+    display: flex;
+    align-items: center;
 }
 
-/* 2. LAYOUT COLUMNS - INDEPENDENT SCROLLING */
-/* This container sits below the navbar and fills the screen */
+/* 2. LAYOUT COLUMNS */
 .main-layout { 
     display: flex; 
     justify-content: center; 
-    padding-top: 56px; /* Push down by navbar height */
+    padding-top: 56px; 
     gap: 20px; 
-    max-width: 100%;
+    max-width: 1600px;
     margin: 0 auto;
-    height: 100vh; /* Fill screen */
-    box-sizing: border-box;
+    align-items: flex-start;
 }
 
-/* LEFT SIDEBAR: Fixed, no scroll */
 .col-left { 
-    width: 280px !important; 
-    min-width: 280px !important; 
+    width: 200px !important; 
+    min-width: 200px !important; 
     flex-shrink: 0; 
-    height: 100%;
-    overflow-y: hidden; /* No scroll */
-    padding: 20px;
-    display: none; /* Mobile hidden */
+    display: none; 
+    position: sticky; 
+    top: 76px; 
+    height: calc(100vh - 80px);
+    overflow-y: auto;
+    scrollbar-width: none; 
 } 
 
-/* CENTER FEED: THIS IS THE ONLY THING THAT SCROLLS */
 .col-feed { 
     flex-grow: 1;
-    min-width: 500px;
-    max-width: 800px;
+    min-width: 600px;
+    max-width: 1000px;
     height: 100%;
-    overflow-y: auto; /* Scrollable! */
-    padding: 20px 0 100px 0; /* Padding for bottom spacing */
-    scrollbar-width: none; /* Hide scrollbar for aesthetics */
+    overflow-y: auto; 
+    padding: 20px 0 100px 0; 
+    scrollbar-width: none; 
 }
 .col-feed::-webkit-scrollbar { display: none; }
 
-/* RIGHT SIDEBAR: Fixed, no scroll */
 .col-right { 
-    width: 280px !important; 
-    min-width: 280px !important; 
+    width: 240px !important; 
+    min-width: 240px !important; 
     flex-shrink: 0; 
-    height: 100%;
-    overflow-y: hidden; /* No scroll */
-    padding: 20px;
-    display: none; /* Mobile hidden */
+    display: none; 
+    position: sticky; 
+    top: 76px; 
+    height: calc(100vh - 80px);
+    overflow-y: auto;
+    scrollbar-width: none;
 }
 
 /* 3. CARD STYLING */
 .fb-card {
-    background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 25px; overflow: hidden; padding: 16px; border: 1px solid #e4e6eb;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-bottom: 25px;
+    overflow: hidden;
+    padding: 16px;
+    border: 1px solid #e4e6eb;
 }
 
 /* 4. NAVIGATION BUTTONS */
 .nav-btn {
-    width: 100% !important; height: 48px !important; text-align: left !important; justify-content: flex-start !important; background: transparent !important; border: none !important; box-shadow: none !important; color: #050505 !important; font-weight: 600 !important; font-size: 15px !important; padding: 0 12px !important; border-radius: 8px !important; margin-bottom: 5px !important; display: flex !important; align-items: center !important;
+    width: 100% !important; 
+    height: 42.5px !important;
+    text-align: left !important;
+    justify-content: flex-start !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #050505 !important;
+    font-weight: 600 !important;
+    font-size: 15px !important;
+    padding: 0 12px !important;
+    border-radius: 8px !important;
+    margin-bottom: 5px !important;
+    display: flex !important;
+    align-items: center !important;
 }
 .nav-btn:hover { background-color: #e4e6eb !important; }
 .nav-btn.selected { background-color: #e7f3ff !important; color: #1877f2 !important; }
@@ -247,32 +276,60 @@ footer { display: none !important; }
 .post-meta { font-size: 13px; color: #65676B; }
 
 /* 6. POST ACTIONS */
-.post-actions { border-top: 1px solid #ced0d4; margin-top: 10px; padding-top: 5px; display: flex; justify-content: space-around; }
+.post-actions { 
+    border-top: 1px solid #ced0d4; 
+    margin-top: 10px; 
+    padding-top: 5px; 
+    display: flex; 
+    justify-content: space-around; 
+}
 .action-btn { background: transparent !important; color: #65676B !important; box-shadow: none !important; }
 .action-btn:hover { background: #f2f2f2 !important; }
 
 /* 7. CONTACTS */
-.contact-row { display: flex; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; }
+.contact-row {
+    display: flex; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer;
+}
 .contact-row:hover { background-color: #e4e6eb; }
 .contact-name { font-weight: 500; font-size: 14px; margin-left: 10px; color: #050505; }
 .profile-row { display: flex; align-items: center; padding: 8px; border-radius: 8px; }
 
 /* 8. EXAMPLES */
 button.gallery-item { border: none !important; background: transparent !important; padding: 4px !important; }
-button.gallery-item img { width: 110px !important; height: 110px !important; border-radius: 12px !important; transition: all 0.3s ease !important; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
-button.gallery-item:hover img { transform: scale(1.15) !important; box-shadow: 0 8px 15px rgba(24, 119, 242, 0.3) !important; z-index: 10; }
+button.gallery-item img {
+    width: 110px !important; height: 110px !important; border-radius: 12px !important;
+    transition: all 0.3s ease !important; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+button.gallery-item:hover img {
+    transform: scale(1.15) !important; box-shadow: 0 8px 15px rgba(24, 119, 242, 0.3) !important; z-index: 10;
+}
 
 /* 9. SEE MORE LOGIC */
 details[open] > summary { display: none !important; }
 
 /* 10. MODERN UPLOAD IMAGE */
-.modern-image-container button { border-radius: 8px !important; overflow: hidden !important; border: 1px solid #e4e6eb !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; padding: 0 !important; }
-.modern-image-container img { border-radius: 8px !important; width: 100% !important; max-height: 400px !important; object-fit: cover !important; }
-.modern-image-container .download-button, .modern-image-container .share-button, .modern-image-container button[title="Download"], .modern-image-container button[title="Share"] { display: none !important; }
+.modern-image-container button {
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    border: 1px solid #e4e6eb !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+    padding: 0 !important;
+}
+.modern-image-container img {
+    border-radius: 8px !important;
+    width: 100% !important;
+    max-height: 400px !important;
+    object-fit: cover !important;
+}
+.modern-image-container .download-button, 
+.modern-image-container .share-button,
+.modern-image-container button[title="Download"],
+.modern-image-container button[title="Share"] { 
+    display: none !important; 
+}
 
 /* UTILS */
 .sim-scroll { height: 200px; 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; } }
 """
 
@@ -337,7 +394,6 @@ with gr.Blocks(title="CookBook") as demo:
                     gr.HTML("<hr style='border:0; border-top:1px solid #e4e6eb; margin: 10px 0;'>")
                     
                     with gr.Row():
-                        # FIXED: Image upload without crash
                         input_img = gr.Image(
                             type="filepath", 
                             label="Upload Recipe", 
@@ -383,10 +439,10 @@ 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: SUGGESTIONS
+                # SECTION C: SIMILAR RECIPES
                 with gr.Group(visible=True):
                     gr.HTML("<br><hr style='border:0; border-top:1px solid #ced0d4; margin: 15px 0;'><br>")
-                    gr.Markdown("### Suggested Pairings")
+                    gr.Markdown("### 🔍 Similar Recipes")
                     
                     with gr.Group(elem_classes=["fb-card"], visible=False) as c1_box:
                         sim1 = gr.Markdown("Similar Recipe 1")