Update app.py

app.py

@@ -1,294 +1,413 @@
+
+
 import gradio as gr
 import pandas as pd
+import pickle
 import numpy as np
-import torch
 import os
-import pickle
-from sentence_transformers import SentenceTransformer, util
+import random
+import base64
+from huggingface_hub import InferenceClient
+from sklearn.metrics.pairwise import cosine_similarity
+from IO_pipeline import RecipeDigitalizerPipeline
 
-# -----------------------------------------------------------------------------
-# 1. SETUP & IMPORTS
-# -----------------------------------------------------------------------------
+# ==========================================
+# 1. SETUP & DATA LOADING 
+# ==========================================
+hf_token = os.getenv("HF_TOKEN")
+API_MODEL = "BAAI/bge-small-en-v1.5"
+client = InferenceClient(token=hf_token) if hf_token else None
 
-# Try to import the custom pipeline, otherwise mock it
+print("⏳ Loading Data...")
 try:
-    from IO_pipeline import image_to_text
-except ImportError:
-    print("WARNING: IO_pipeline.py not found. Using mock function.")
-    def image_to_text(image):
-        return "Grilled Chicken Salad\n\nIngredients:\n- Chicken Breast\n- Lettuce\n\nInstructions:\n1. Grill chicken.\n2. Toss with veggies."
-
-# -----------------------------------------------------------------------------
-# 2. LOAD DATA & MODEL
-# -----------------------------------------------------------------------------
-
-# Global variables
-DF_RECIPES = None
-EMBEDDINGS = None
-MODEL = None
-
-def load_data():
-    global DF_RECIPES, EMBEDDINGS, MODEL
-    
-    print("--- Loading Resources ---")
-    
-    # 1. Load Model
-    # 'all-MiniLM-L6-v2' is fast and efficient for this task
-    MODEL = SentenceTransformer('all-MiniLM-L6-v2')
-    
-    # 2. Load CSV Data
-    csv_path = "RecipeData_10K.csv"
-    if os.path.exists(csv_path):
-        try:
-            DF_RECIPES = pd.read_csv(csv_path)
-            print(f"Loaded {len(DF_RECIPES)} recipes from {csv_path}")
-            
-            # Basic cleaning: Ensure we have a text column to embed
-            # We combine Title + Ingredients for the search context
-            # Adjust column names 'Title', 'Ingredients' based on your actual CSV headers
-            if 'combined_text' not in DF_RECIPES.columns:
-                # Fallback checks for column names
-                title_col = 'Title' if 'Title' in DF_RECIPES.columns else DF_RECIPES.columns[0]
-                ing_col = 'Ingredients' if 'Ingredients' in DF_RECIPES.columns else DF_RECIPES.columns[1]
-                
-                DF_RECIPES['combined_text'] = DF_RECIPES[title_col].astype(str) + " " + DF_RECIPES[ing_col].astype(str)
+    df_recipes = pd.read_csv('RecipeData_10K.csv')
+    with open('recipe_embeddings.pkl', 'rb') as f:
+        data = pickle.load(f)
+        if isinstance(data, dict):
+            stored_embeddings = np.array(data['embeddings'])
+        elif isinstance(data, pd.DataFrame):
+            target_col = next((c for c in ['embedding', 'embeddings', 'vectors'] if c in data.columns), None)
+            stored_embeddings = np.vstack(data[target_col].values) if target_col else data
+        else:
+            stored_embeddings = data
+    print("✅ Data Loaded!")
+except Exception as e:
+    print(f"❌ Error loading data: {e}")
+    df_recipes = pd.DataFrame({'Title': [], 'Raw_Output': []})
+    stored_embeddings = None
 
-        except Exception as e:
-            print(f"Error loading CSV: {e}")
-            DF_RECIPES = pd.DataFrame()
-    else:
-        print("Error: RecipeData_10K.csv not found.")
-        DF_RECIPES = pd.DataFrame()
+# ==========================================
+# 2. HELPER: IMAGE TO BASE64
+# ==========================================
+def image_to_base64(image_path):
+    if not os.path.exists(image_path):
+        return "R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+    with open(image_path, "rb") as img_file:
+        return base64.b64encode(img_file.read()).decode('utf-8')
 
-    # 3. Generate or Load Embeddings
-    embedding_cache_path = "cached_embeddings.pkl"
-    
-    if not DF_RECIPES.empty:
-        if os.path.exists(embedding_cache_path):
-            print("Loading cached embeddings...")
-            with open(embedding_cache_path, "rb") as f:
-                EMBEDDINGS = pickle.load(f)
-        else:
-            print("Generating embeddings for 10k recipes (this may take a few minutes)...")
-            # Encode the combined text column
-            corpus = DF_RECIPES['combined_text'].tolist()
-            EMBEDDINGS = MODEL.encode(corpus, convert_to_tensor=True, show_progress_bar=True)
-            
-            # Save for next time (optional, helps if space restarts)
-            with open(embedding_cache_path, "wb") as f:
-                pickle.dump(EMBEDDINGS, f)
-            print("Embeddings generated and saved.")
-
-# Run setup immediately
-load_data()
-
-# -----------------------------------------------------------------------------
-# 3. SEARCH LOGIC
-# -----------------------------------------------------------------------------
-
-def get_recommendations(query_text, k=3):
-    """
-    Finds top k similar recipes from the DataFrame.
-    """
-    if DF_RECIPES is None or DF_RECIPES.empty or EMBEDDINGS is None:
-        return [("No Data", "Please ensure RecipeData_10K.csv is uploaded.")]
-
-    # 1. Encode user query
-    query_embedding = MODEL.encode(query_text, convert_to_tensor=True)
-    
-    # 2. Compute Cosine Similarity
-    cos_scores = util.cos_sim(query_embedding, EMBEDDINGS)[0]
+logo_b64 = image_to_base64("logo.jpg")
+profile_b64 = image_to_base64("232px-Tv_the_muppet_show_bein_green.jpg")
+# NEW: Load the process preview image
+process_b64 = image_to_base64("preview of process.jpg")
+
+# ==========================================
+# 3. BACKEND LOGIC
+# ==========================================
+def get_embedding_via_api(text):
+    if not client: raise ValueError("HF_TOKEN missing")
+    response = client.feature_extraction(text, model=API_MODEL)
+    return np.array(response)
+
+def find_similar_recipes_list(query_text):
+    if stored_embeddings is None: return ["Database error."] * 3
+    query_vec = get_embedding_via_api("Represent this recipe for retrieving similar dishes: " + query_text)
+    if len(query_vec.shape) == 1: query_vec = query_vec.reshape(1, -1)
     
-    # 3. Get top k results
-    top_results = torch.topk(cos_scores, k=k)
+    scores = cosine_similarity(query_vec, stored_embeddings)[0]
+    top_indices = scores.argsort()[-3:][::-1]
     
-    results = []
-    for score, idx in zip(top_results.values, top_results.indices):
-        idx = int(idx) # Convert tensor index to int
-        row = DF_RECIPES.iloc[idx]
+    results_list = []
+    for idx in top_indices:
+        score = scores[idx]
+        row = df_recipes.iloc[idx]
+        title = row['Title']
+        desc = str(row['Raw_Output'])
+        score_display = f"{score:.0%}"
         
-        # Adjust these keys to match your CSV Column Names
-        # Example: row['Title'], row['Instructions']
-        title = row.get('Title', 'Untitled Recipe') 
-        
-        # Create a short snippet for the description
-        instructions = str(row.get('Instructions', ''))
-        snippet = instructions[:120] + "..." if len(instructions) > 120 else instructions
-        
-        results.append((title, snippet))
+        card_content = (
+            f"### 🏆 {title}\n"
+            f"<span style='color:#1877f2; font-weight:bold; font-size:14px;'>Match Score: {score_display}</span>\n\n"
+            f"<div class='sim-scroll'>{desc}</div>"
+        )
+        results_list.append(card_content)
+    
+    while len(results_list) < 3:
+        results_list.append("")
         
-    return results
+    return results_list
 
-def process_pipeline(image):
-    if image is None:
-        return "", "Please upload an image."
-    
-    # 1. Image -> Text
+def format_recipe(json_data):
+    if "error" in json_data: return f"Error: {json_data['error']}", ""
+    title = json_data.get("title", "Unknown")
+    ing = "\n".join([f"- {x}" for x in json_data.get("ingredients", [])])
+    inst = "\n".join([f"{i+1}. {x}" for i, x in enumerate(json_data.get("instructions", []))])
+    text = f"🍽️ {title}\n\n🛒 INGREDIENTS:\n{ing}\n\n🍳 INSTRUCTIONS:\n{inst}"
+    return text, f"{title} {ing} {inst}"
+
+def ui_update_pipeline(image_path):
+    if not hf_token: 
+        return "Error: HF_TOKEN missing", "", gr.update(), gr.update(), "", gr.update(), ""
     try:
-        generated_text = image_to_text(image)
-    except Exception as e:
-        return f"Error extracting text: {str(e)}", ""
-    
-    # 2. Text -> Recommendations
-    recs = get_recommendations(generated_text)
-    
-    # 3. Format Output (HTML)
-    rec_html = ""
-    for title, desc in recs:
-        rec_html += f"""
-        <div class="recipe-card">
-            <div class="recipe-icon">🍳</div>
-            <div class="recipe-info">
-                <h4>{title}</h4>
-                <p>{desc}</p>
-            </div>
-        </div>
-        """
+        os.environ["HF_TOKEN"] = hf_token
+        digitizer = RecipeDigitalizerPipeline()
+        json_res = digitizer.run_pipeline(image_path)
+        readable, query = format_recipe(json_res)
+        if query:
+            sim_list = find_similar_recipes_list(query)
+        else:
+            sim_list = ["No query generated.", "", ""]
         
-    return generated_text, rec_html
+        return (readable, sim_list[0], gr.update(visible=True), gr.update(visible=True), sim_list[1], gr.update(visible=True), sim_list[2])
+    except Exception as e:
+        return f"Error: {e}", "Error", gr.update(), gr.update(), "", gr.update(), ""
 
-# -----------------------------------------------------------------------------
-# 4. CSS & UI (Facebook Style)
-# -----------------------------------------------------------------------------
+# ==========================================
+# 4. MODERN UI THEME & CSS
+# ==========================================
+theme = gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="blue",
+    neutral_hue="slate",
+    font=[gr.themes.GoogleFont('Inter'), 'ui-sans-serif', 'system-ui']
+)
 
-custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+modern_css = """
+body, .gradio-container { background-color: #f0f2f5; }
 
-:root {
-    --primary: #1877F2;
-    --bg-color: #F0F2F5;
-    --card-bg: #FFFFFF;
-    --text-main: #050505;
-    --text-muted: #65676B;
+/* Sticky Header */
+.custom-header {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid #e4e6eb;
+    padding: 15px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 }
 
-body, .gradio-container {
-    background-color: var(--bg-color) !important;
-    font-family: 'Inter', sans-serif !important;
+.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; }
 
-/* Custom Header */
-.fb-header {
-    background: white;
-    padding: 0.8rem 1.5rem;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 2rem;
-    border-radius: 0 0 8px 8px;
+/* 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;
 }
-.logo-area {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: var(--primary);
-    font-weight: 700;
-    font-size: 1.5rem;
+.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;
 }
 
-/* Cards & Groups */
-.group-box {
-    background: var(--card-bg);
-    border: none !important;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    padding: 1rem !important;
-    margin-bottom: 1rem;
+/* Feed Styling */
+#feed-container { 
+    gap: 0px !important; 
+    padding: 0px !important;
+}
+#feed-container > .form { 
+    gap: 0px !important; 
 }
 
-/* Buttons */
-.primary-btn {
-    background-color: var(--primary) !important;
-    color: white !important;
-    border-radius: 6px !important;
-    font-weight: 600 !important;
-    border: none !important;
-    padding: 10px !important;
+.content-card {
+    background-color: #ffffff !important;
+    background: #ffffff !important;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    border: 1px solid #ddd;
+    padding: 20px;
+    margin-bottom: 7px !important;
+    margin-top: 0px !important;
+    width: 100%;
+    display: block;
 }
 
-/* Recipe Cards */
-.recipe-card {
-    display: flex;
-    gap: 15px;
-    padding: 15px;
-    margin-bottom: 10px;
+/* Similar Recipe Cards */
+.sim-card {
     background: #fff;
-    border: 1px solid #ddd;
+    border: 1px solid #eee;
     border-radius: 8px;
-    transition: transform 0.2s, box-shadow 0.2s;
+    padding: 15px;
+    height: 100%;
+    border-top: 4px solid #1877f2;
+    display: flex; 
+    flex-direction: column;
+    justify-content: space-between;
 }
-.recipe-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+
+.sim-scroll {
+    height: 400px;       
+    overflow-y: auto;    
+    margin-bottom: 10px;
+    padding-right: 5px;  
+    font-size: 14px;
+    color: #4b4f56;
 }
-.recipe-icon {
-    min-width: 50px;
-    height: 50px;
-    background: #EBF5FF;
-    border-radius: 8px;
+
+.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: 25px !important; }
+
+.gradio-examples {
     display: flex;
-    align-items: center;
     justify-content: center;
-    font-size: 24px;
+    width: 100%;
 }
-.recipe-info h4 {
-    margin: 0 0 5px 0;
-    color: var(--primary);
-    font-weight: 600;
+
+button.gallery-item {
+    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
+    z-index: 1;
 }
-.recipe-info p {
-    margin: 0;
-    color: var(--text-muted);
-    font-size: 0.9rem;
-    line-height: 1.4;
+button.gallery-item:hover {
+    transform: scale(2.5) !important; 
+    z-index: 1000 !important;         
+    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
+    border: 2px solid white !important;
+    border-radius: 8px !important;
 }
 """
 
-# -----------------------------------------------------------------------------
-# 5. GRADIO INTERFACE
-# -----------------------------------------------------------------------------
-
-with gr.Blocks(css=custom_css, title="CookBook") as demo:
+# ==========================================
+# 5. LAYOUT CONSTRUCTION
+# ==========================================
+with gr.Blocks(title="Legacy Kitchen") as demo:
     
-    # Header
-    gr.HTML("""
-        <div class="fb-header">
+    # --- HEADER ---
+    gr.HTML(f"""
+        <div class="custom-header">
             <div class="logo-area">
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 13.87A4 4 0 0 1 7.41 6a5.11 5.11 0 0 1 1.05-1.54 5 5 0 0 1 7.08 0A5.11 5.11 0 0 1 16.59 6 4 4 0 0 1 18 13.87V21H6Z"/><line x1="6" y1="17" x2="18" y2="17"/></svg>
-                <span>CookBook</span>
-            </div>
-            <div style="flex-grow:1;"></div>
-            <div style="display:flex; align-items:center; gap:10px;">
-                <span style="font-weight:600; color:#050505;">Welcome, Chef!</span>
-                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=chef" style="width:40px; height:40px; border-radius:50%; background:#e4e6eb;">
+                <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;">v4.4</div>
         </div>
     """)
 
     with gr.Row():
-        # Left Column
-        with gr.Column(scale=1):
-            gr.Markdown("### 📸 Post a Recipe")
-            with gr.Group(elem_classes="group-box"):
-                input_image = gr.Image(type="pil", label="Upload Photo", elem_id="upload-zone")
-                submit_btn = gr.Button("Find Similar Recipes", elem_classes="primary-btn")
-
-        # Right Column
-        with gr.Column(scale=1):
-            gr.Markdown("### 📝 Extracted Details")
-            with gr.Group(elem_classes="group-box"):
-                output_text = gr.Textbox(label="Recipe Text", lines=6, show_label=False)
+        
+        # --- 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):
             
-            gr.Markdown("### 🥗 You might also like")
-            output_recommendations = gr.HTML(label="Recommendations")
+            # === VIEW 1: AI DIGITALIZER ===
+            with gr.Group(visible=True) as digitalizer_view:
+                with gr.Row(elem_classes=["gap-fix"]):
+                    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")
+                            gr.Examples(
+                                examples=[
+                                    ["quick_tries_images/applecrisp.jpg"],
+                                    ["quick_tries_images/meatballs recipe.jpg"],
+                                    ["quick_tries_images/chocolateballs.png"]
+                                ],
+                                inputs=input_img,
+                                label="Or try these examples:",
+                                cache_examples=False
+                            )
+                    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)
+
+                gr.HTML("<div style='height: 35px;'></div>")
+                gr.Markdown("### 3. Similar Recipes from Database")
+                
+                with gr.Row():
+                    with gr.Column(elem_classes=["sim-card"]) as c1_box:
+                        sim1 = gr.Markdown("Once you will upload your scanned recipe, we will share similar recipes!")
+                        with gr.Row(visible=False) as c1_btns:
+                            gr.Button("👍 Like", size="sm", variant="secondary")
+                            gr.Button("↗️ Share", size="sm", variant="secondary")
+                    
+                    with gr.Column(elem_classes=["sim-card"], visible=False) as c2_box:
+                        sim2 = gr.Markdown("")
+                        with gr.Row():
+                            gr.Button("👍 Like", size="sm", variant="secondary")
+                            gr.Button("↗️ Share", size="sm", variant="secondary")
+                    
+                    with gr.Column(elem_classes=["sim-card"], visible=False) as c3_box:
+                        sim3 = gr.Markdown("")
+                        with gr.Row():
+                            gr.Button("👍 Like", size="sm", variant="secondary")
+                            gr.Button("↗️ Share", size="sm", variant="secondary")
+
+                magic_btn.click(ui_update_pipeline, input_img, [out_text, sim1, c1_btns, c2_box, sim2, c3_box, sim3])
+
+            # === VIEW 2: FEED ===
+            with gr.Column(visible=False, elem_id="feed-container") as feed_view:
+                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(["🥘", "🥗", "🍰", "🌮"])
+                        time_options = ["2h", "3h", "4h", "6h", "9h", "12h", "a day ago", "2 days ago"]
+                        post_time = random.choice(time_options)
+                        
+                        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;">{post_time} · 🌍 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 (UPDATED) ===
+            with gr.Group(visible=False) as about_view:
+                with gr.Group(elem_classes=["content-card"]):
+                    gr.Markdown("""
+                    # Goal Project
+                    
+                    The goal of this project is to develop an app that takes a scanned image of a handwritten recipe as input, generates text using a VLM, and based on the extracted text, suggests 3 similar recipes from a 10K dataset of synthetic recipes. Our app will bridge the gap between analog culinary heritage and digital discovery.
+                    
+                    ### About Us
+                    This app was developed by **Shahar Firshtman** and **Lior Feinstein**, 2nd year students for Economics and data science.
+                    """)
+                    
+                    # Process Image
+                    gr.HTML(f"""
+                    <div style="margin-top: 20px;">
+                        <h3 style="color: #444;">Process Overview</h3>
+                        <img src="data:image/jpeg;base64,{process_b64}" style="width: 100%; height: auto; border-radius: 8px; border: 1px solid #ddd;">
+                    </div>
+                    """)
+
+        # --- 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"]))
 
-    # Actions
-    submit_btn.click(
-        fn=process_pipeline,
-        inputs=[input_image],
-        outputs=[output_text, output_recommendations]
-    )
+    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()
+    demo.launch(theme=theme, css=modern_css)
+
+
+
+
+
+
+
+