Spaces:

Liori25
/

CookBookAI

Sleeping

Update app.py

f145dfd verified 9 months ago

22.5 kB

import gradio as gr
import pandas as pd
import pickle
import numpy as np
import os
import random
import base64
from huggingface_hub import InferenceClient
from sklearn.metrics.pairwise import cosine_similarity
from datasets import load_dataset
from IO_pipeline import RecipeDigitalizerPipeline

# ==========================================
# 1. SETUP & DATA LOADING (HYBRID)
# ==========================================
hf_token = os.getenv("HF_TOKEN")
API_MODEL = "BAAI/bge-small-en-v1.5"
client = InferenceClient(token=hf_token) if hf_token else None

print("⏳ Initializing Data Loading...")

# --- A. Load Text Data from Hugging Face Dataset ---
try:
    print("   ...Downloading recipes from HF Dataset (Liori25/10k_recipes)")
    dataset = load_dataset("Liori25/10k_recipes", split="train")
    df_recipes = dataset.to_pandas()
    print(f"✅ Recipes Loaded! Count: {len(df_recipes)}")
except Exception as e:
    print(f"❌ Error loading HF Dataset: {e}")
    df_recipes = pd.DataFrame({'Title': [], 'Raw_Output': []})

# --- B. Load Embeddings from Local File (Space Repo) ---
try:
    print("   ...Loading embeddings from local 'recipe_embeddings.pkl'")
    if os.path.exists('recipe_embeddings.pkl'):
        with open('recipe_embeddings.pkl', 'rb') as f:
            data = pickle.load(f)
            
            # Logic to handle different pickle formats
            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(f"✅ Embeddings Loaded! Shape: {stored_embeddings.shape}")
    else:
        print("❌ 'recipe_embeddings.pkl' not found locally.")
        stored_embeddings = None

except Exception as e:
    print(f"❌ Error loading pickle file: {e}")
    stored_embeddings = None

# --- C. Safety Check ---
if stored_embeddings is not None and not df_recipes.empty:
    if len(stored_embeddings) != len(df_recipes):
        print(f"⚠️ WARNING: Row mismatch! Recipes: {len(df_recipes)}, Embeddings: {len(stored_embeddings)}")

# ==========================================
# 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')

logo_b64 = image_to_base64("cookbook logo.png")
profile_b64 = image_to_base64("chef.avif")
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: Embeddings missing."] * 3
    if df_recipes.empty: return ["Database error: Recipes missing."] * 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)
    
    # Calculate Similarity
    scores = cosine_similarity(query_vec, stored_embeddings)[0]
    top_indices = scores.argsort()[-3:][::-1]
    
    # Identify column names
    cols = df_recipes.columns
    ing_col = next((c for c in cols if 'ingredient' in c.lower()), None)
    inst_col = next((c for c in cols if 'instruction' in c.lower()), None)

    results_list = []

    # --- HELPER TO CHECK FOR ERRORS & HIDE BLOCKS ---
    def clean_and_validate(raw_text):
        val = str(raw_text).strip()
        
        # 1. Clean list syntax (['...'])
        if val.startswith("[") and val.endswith("]"):
            val = val[1:-1].replace("'", "").replace('"', "").strip()
        
        val_lower = val.lower()
        
        # 2. Basic Empty Checks
        if val_lower in ['nan', 'none', 'null', '[]', '']:
            return None
        
        # 3. STRICT ERROR CHECK: If "parse error" or "error" is in the text, return None to hide the block
        if "parse error" in val_lower or "error" in val_lower:
            return None
            
        return val

    for idx in top_indices:
        score = scores[idx]
        row = df_recipes.iloc[idx]
        title = row.get('Title', 'Unknown Recipe')
        score_display = f"{score:.3%}"
        
        content_parts = []
        
        # 1. Check Ingredients
        if ing_col:
            cleaned_ing = clean_and_validate(row[ing_col])
            # Only add to display if valid AND no error found
            if cleaned_ing: 
                content_parts.append(f"<b>🛒 INGREDIENTS:</b><br>{cleaned_ing}")
            
        # 2. Check Instructions
        if inst_col:
            cleaned_inst = clean_and_validate(row[inst_col])
            # Only add to display if valid AND no error found
            if cleaned_inst: 
                content_parts.append(f"<b>🍳 INSTRUCTIONS:</b><br>{cleaned_inst}")
            
        # 3. Fallback logic
        if not content_parts:
            # If both were hidden (due to errors) or empty, check raw output
            raw_out = str(row.get('Raw_Output', 'No details available.'))
            
            # Also hide Raw Output if it contains an error
            if "parse error" in raw_out.lower() or "error" in raw_out.lower():
                display_text = "<i>Details unavailable for this recipe.</i>"
            else:
                display_text = raw_out
        else:
            display_text = "<br><br>".join(content_parts)

        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'>{display_text}</div>"
        )
        results_list.append(card_content)
    
    while len(results_list) < 3:
        results_list.append("")
        
    return results_list

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:
        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 (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. 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']
)

modern_css = """
body, .gradio-container { background-color: #f0f2f5; }
/* 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);
}
.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; }
/* 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;
}
.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;
}
/* Feed Styling */
#feed-container { 
    gap: 0px !important; 
    padding: 0px !important;
}
#feed-container > .form { 
    gap: 0px !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;
}
/* Similar Recipe Cards */
.sim-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    height: 100%;
    border-top: 4px solid #1877f2;
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
}
.sim-scroll {
    height: 400px;        
    overflow-y: auto;     
    margin-bottom: 10px;
    padding-right: 5px;   
    font-size: 14px;
    color: #4b4f56;
}
.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; }
/* 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 {
    display: flex;
    justify-content: center;
    width: 100%;
}
/* EXAMPLE IMAGES STYLING UPDATED */
button.gallery-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    z-index: 1;
    width: 80px !important;   /* Force width */
    height: 80px !important;  /* Force height */
    overflow: hidden !important;
}
button.gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
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. LAYOUT CONSTRUCTION
# ==========================================
with gr.Blocks(title="CookBook AI") 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">CookBook AI</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>
        </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:
                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")
                            
                            # --- UPDATED EXAMPLES HERE ---
                            gr.Examples(
                                examples=[
                                    ["quick_tries_images/applecrisp.jpg"],
                                    ["quick_tries_images/meatballs recipe.jpg"],
                                    ["quick_tries_images/Apple Dapple (aka Fresh Apple Cake).jfif"]
                                ],
                                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)
                        
                        raw_desc = str(row.get('Raw_Output', 'Delicious recipe...'))[:250]
                        title_feed = row.get('Title', 'Recipe')

                        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"### {title_feed}")
                            gr.Markdown(f"{raw_desc}...")
                            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):
            # 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
    # ==========================================
    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)

	import gradio as gr
	import pandas as pd
	import pickle
	import numpy as np
	import os
	import random
	import base64
	from huggingface_hub import InferenceClient
	from sklearn.metrics.pairwise import cosine_similarity
	from datasets import load_dataset
	from IO_pipeline import RecipeDigitalizerPipeline

	# ==========================================
	# 1. SETUP & DATA LOADING (HYBRID)
	# ==========================================
	hf_token = os.getenv("HF_TOKEN")
	API_MODEL = "BAAI/bge-small-en-v1.5"
	client = InferenceClient(token=hf_token) if hf_token else None

	print("⏳ Initializing Data Loading...")

	# --- A. Load Text Data from Hugging Face Dataset ---
	try:
	print(" ...Downloading recipes from HF Dataset (Liori25/10k_recipes)")
	dataset = load_dataset("Liori25/10k_recipes", split="train")
	df_recipes = dataset.to_pandas()
	print(f"✅ Recipes Loaded! Count: {len(df_recipes)}")
	except Exception as e:
	print(f"❌ Error loading HF Dataset: {e}")
	df_recipes = pd.DataFrame({'Title': [], 'Raw_Output': []})

	# --- B. Load Embeddings from Local File (Space Repo) ---
	try:
	print(" ...Loading embeddings from local 'recipe_embeddings.pkl'")
	if os.path.exists('recipe_embeddings.pkl'):
	with open('recipe_embeddings.pkl', 'rb') as f:
	data = pickle.load(f)

	# Logic to handle different pickle formats
	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(f"✅ Embeddings Loaded! Shape: {stored_embeddings.shape}")
	else:
	print("❌ 'recipe_embeddings.pkl' not found locally.")
	stored_embeddings = None

	except Exception as e:
	print(f"❌ Error loading pickle file: {e}")
	stored_embeddings = None

	# --- C. Safety Check ---
	if stored_embeddings is not None and not df_recipes.empty:
	if len(stored_embeddings) != len(df_recipes):
	print(f"⚠️ WARNING: Row mismatch! Recipes: {len(df_recipes)}, Embeddings: {len(stored_embeddings)}")

	# ==========================================
	# 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')

	logo_b64 = image_to_base64("cookbook logo.png")
	profile_b64 = image_to_base64("chef.avif")
	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: Embeddings missing."] * 3
	if df_recipes.empty: return ["Database error: Recipes missing."] * 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)

	# Calculate Similarity
	scores = cosine_similarity(query_vec, stored_embeddings)[0]
	top_indices = scores.argsort()[-3:][::-1]

	# Identify column names
	cols = df_recipes.columns
	ing_col = next((c for c in cols if 'ingredient' in c.lower()), None)
	inst_col = next((c for c in cols if 'instruction' in c.lower()), None)

	results_list = []

	# --- HELPER TO CHECK FOR ERRORS & HIDE BLOCKS ---
	def clean_and_validate(raw_text):
	val = str(raw_text).strip()

	# 1. Clean list syntax (['...'])
	if val.startswith("[") and val.endswith("]"):
	val = val[1:-1].replace("'", "").replace('"', "").strip()

	val_lower = val.lower()

	# 2. Basic Empty Checks
	if val_lower in ['nan', 'none', 'null', '[]', '']:
	return None

	# 3. STRICT ERROR CHECK: If "parse error" or "error" is in the text, return None to hide the block
	if "parse error" in val_lower or "error" in val_lower:
	return None

	return val

	for idx in top_indices:
	score = scores[idx]
	row = df_recipes.iloc[idx]
	title = row.get('Title', 'Unknown Recipe')
	score_display = f"{score:.3%}"

	content_parts = []

	# 1. Check Ingredients
	if ing_col:
	cleaned_ing = clean_and_validate(row[ing_col])
	# Only add to display if valid AND no error found
	if cleaned_ing:
	content_parts.append(f"<b>🛒 INGREDIENTS:</b><br>{cleaned_ing}")

	# 2. Check Instructions
	if inst_col:
	cleaned_inst = clean_and_validate(row[inst_col])
	# Only add to display if valid AND no error found
	if cleaned_inst:
	content_parts.append(f"<b>🍳 INSTRUCTIONS:</b><br>{cleaned_inst}")

	# 3. Fallback logic
	if not content_parts:
	# If both were hidden (due to errors) or empty, check raw output
	raw_out = str(row.get('Raw_Output', 'No details available.'))

	# Also hide Raw Output if it contains an error
	if "parse error" in raw_out.lower() or "error" in raw_out.lower():
	display_text = "<i>Details unavailable for this recipe.</i>"
	else:
	display_text = raw_out
	else:
	display_text = "<br><br>".join(content_parts)

	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'>{display_text}</div>"
	)
	results_list.append(card_content)

	while len(results_list) < 3:
	results_list.append("")

	return results_list

	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:
	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 (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. 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']
	)

	modern_css = """
	body, .gradio-container { background-color: #f0f2f5; }

	/* 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);
	}

	.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; }

	/* 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;
	}
	.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;
	}

	/* Feed Styling */
	#feed-container {
	gap: 0px !important;
	padding: 0px !important;
	}
	#feed-container > .form {
	gap: 0px !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;
	}

	/* Similar Recipe Cards */
	.sim-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 15px;
	height: 100%;
	border-top: 4px solid #1877f2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}

	.sim-scroll {
	height: 400px;
	overflow-y: auto;
	margin-bottom: 10px;
	padding-right: 5px;
	font-size: 14px;
	color: #4b4f56;
	}

	.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; }

	/* 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 {
	display: flex;
	justify-content: center;
	width: 100%;
	}

	/* EXAMPLE IMAGES STYLING UPDATED */
	button.gallery-item {
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
	z-index: 1;
	width: 80px !important; /* Force width */
	height: 80px !important; /* Force height */
	overflow: hidden !important;
	}
	button.gallery-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	}

	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. LAYOUT CONSTRUCTION
	# ==========================================
	with gr.Blocks(title="CookBook AI") 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">CookBook AI</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>
	</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:
	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")

	# --- UPDATED EXAMPLES HERE ---
	gr.Examples(
	examples=[
	["quick_tries_images/applecrisp.jpg"],
	["quick_tries_images/meatballs recipe.jpg"],
	["quick_tries_images/Apple Dapple (aka Fresh Apple Cake).jfif"]
	],
	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)

	raw_desc = str(row.get('Raw_Output', 'Delicious recipe...'))[:250]
	title_feed = row.get('Title', 'Recipe')

	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"### {title_feed}")
	gr.Markdown(f"{raw_desc}...")
	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):
	# 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
	# ==========================================
	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)