Update app.py

app.py

@@ -43,10 +43,8 @@ def image_to_base64(image_path):
     with open(image_path, "rb") as img_file:
         return base64.b64encode(img_file.read()).decode('utf-8')
 
-# --- UPDATED IMAGES HERE ---
 logo_b64 = image_to_base64("cookbook logo.png")
 profile_b64 = image_to_base64("chef.avif")
-# NEW: Load the process preview image
 process_b64 = image_to_base64("preview of process.jpg")
 
 # ==========================================
@@ -71,7 +69,7 @@ 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%}"
+        score_display = f"{score:.3%}"
         
         card_content = (
             f"### 🏆 {title}\n"
@@ -226,6 +224,45 @@ body, .gradio-container { background-color: #f0f2f5; }
 }
 .trend-box:hover { background: #f0f2f5; cursor: pointer; }
 
+/* Contact List Styling */
+.contact-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background: white;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    cursor: pointer;
+    transition: 0.2s;
+}
+.contact-item:hover { background: #f0f2f5; }
+
+.avatar-circle {
+    width: 36px; height: 36px;
+    background: #e4e6eb;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: #050505;
+    margin-right: 12px;
+    position: relative;
+    font-size: 13px;
+    border: 1px solid #ddd;
+}
+
+.status-badge {
+    width: 12px; height: 12px;
+    border-radius: 50%;
+    border: 2px solid white;
+    position: absolute;
+    bottom: -1px; right: -2px;
+}
+.status-green { background-color: #31a24c; }
+.status-red { background-color: #f02849; }
+
 .gap-fix { gap: 25px !important; }
 
 .gradio-examples {
@@ -250,18 +287,17 @@ button.gallery-item:hover {
 # ==========================================
 # 5. LAYOUT CONSTRUCTION
 # ==========================================
-# --- UPDATED APP NAME IN TITLE ---
 with gr.Blocks(title="CookBook AI") as demo:
     
     # --- HEADER ---
-    # --- UPDATED APP NAME IN HEADER ---
+    # --- CHANGED HERE: SLOGAN TEXT UPDATED ---
     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">CookBook AI</span>
-                    <span class="app-slogan">Turning Handwritten Notes into a Digital Cookbook.</span>
+                    <span class="app-slogan">Turning Handwritten Recipes into a Digital Recipe.</span>
                 </div>
             </div>
             <div style="color: #65676b; font-weight: 600;">v4.4</div>
@@ -380,10 +416,34 @@ with gr.Blocks(title="CookBook AI") as demo:
 
         # --- RIGHT COLUMN ---
         with gr.Column(scale=1, min_width=200):
+            # 1. Trending
             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"))
+            
+            # 2. Contacts
+            gr.HTML("<div style='height: 20px;'></div>")
+            gr.Markdown("### Quick Contacts")
+            
+            def contact_box(name, initials, status_color):
+                return f"""
+                <div class='contact-item'>
+                    <div class='avatar-circle'>
+                        {initials}
+                        <div class='status-badge status-{status_color}'></div>
+                    </div>
+                    <div style='font-weight:600; font-size:14px; color:#050505;'>{name}</div>
+                </div>
+                """
+                
+            contact_html = (
+                contact_box("Elon Musk", "EM", "green") +
+                contact_box("Gordon Ramsay", "GR", "red") + 
+                contact_box("Guy Fieri", "GF", "green") +
+                contact_box("Bobby Flay", "BF", "red")
+            )
+            gr.HTML(contact_html)
 
     # ==========================================
     # 6. JAVASCRIPT LOGIC