Update app.py

app.py

@@ -1,201 +1,294 @@
-import streamlit as st
+import gradio as gr
 import pandas as pd
 import numpy as np
+import torch
+import os
 import pickle
-from PIL import Image
-from sklearn.metrics.pairwise import cosine_similarity
+from sentence_transformers import SentenceTransformer, util
 
-# --- IMPORT YOUR LOCAL PIPELINE ---
-# This imports the IO_pipeline.py file you uploaded to the Space
+# -----------------------------------------------------------------------------
+# 1. SETUP & IMPORTS
+# -----------------------------------------------------------------------------
+
+# Try to import the custom pipeline, otherwise mock it
 try:
-    import IO_pipeline
+    from IO_pipeline import image_to_text
 except ImportError:
-    st.error("🚨 IO_pipeline.py not found! Please upload it to the Files tab.")
-
-# --- CONFIGURATION ---
-st.set_page_config(
-    page_title="CookBook - AI Digitalizer",
-    page_icon="🍳",
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
-
-# --- CUSTOM CSS (Facebook/CookBook Theme) ---
-st.markdown("""
-<style>
-    .stApp { background-color: #F0F2F5; font-family: 'Segoe UI', sans-serif; }
-    section[data-testid="stSidebar"] { background-color: #FFFFFF; box-shadow: 1px 0 5px rgba(0,0,0,0.1); }
-    .css-card { background-color: #FFFFFF; border-radius: 8px; padding: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); margin-bottom: 20px; }
-    h1, h2, h3 { color: #050505; font-weight: 700; }
-    .stButton > button { background-color: #1877F2; color: white; border-radius: 6px; width: 100%; border: none; padding: 10px; font-weight: 600; transition: 0.3s; }
-    .stButton > button:hover { background-color: #166fe5; }
-    .list-item { background-color: #F0F2F5; padding: 8px 12px; border-radius: 20px; margin-bottom: 8px; font-size: 14px; color: #050505; }
-    .step-number { font-weight: bold; color: #1877F2; margin-right: 5px; }
-    header {visibility: hidden;}
-    footer {visibility: hidden;}
-</style>
-""", unsafe_allow_html=True)
-
-# --- BACKEND FUNCTIONS ---
-
-@st.cache_resource
-def load_dataset():
-    """Loads the recipe_embeddings.pkl file."""
-    try:
-        with open('recipe_embeddings.pkl', 'rb') as f:
-            data = pickle.load(f)
-        return data
-    except FileNotFoundError:
-        st.warning("⚠️ recipe_embeddings.pkl not found. Recommendations will be random.")
-        return None
-
-def find_similar_recipes(user_text, dataset):
-    """
-    Finds recipes in the dataset similar to the user_text.
-    """
-    if dataset is None or user_text is None:
-        return []
+    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."
 
-    try:
-        # CASE 1: Dataset is a DataFrame with 'embeddings' column
-        if isinstance(dataset, pd.DataFrame) and 'embeddings' in dataset.columns:
-            # IMPORTANT: We need to vectorize user_text using the SAME method as the pickle.
-            # If IO_pipeline has an embedding function, use it:
-            if hasattr(IO_pipeline, 'get_embedding'):
-                 user_embedding = IO_pipeline.get_embedding(user_text)
-                 # Calculate similarity
-                 dataset['similarity'] = dataset['embeddings'].apply(lambda x: cosine_similarity([user_embedding], [x])[0][0])
-                 top_3 = dataset.sort_values(by='similarity', ascending=False).head(3)
-                 return top_3.to_dict('records')
-            
-            else:
-                 # Fallback if we can't generate new embeddings: Return random samples
-                 return dataset.sample(3).to_dict('records')
+# -----------------------------------------------------------------------------
+# 2. LOAD DATA & MODEL
+# -----------------------------------------------------------------------------
 
-        # CASE 2: Dataset is just a list/dict (Fallback)
-        elif isinstance(dataset, pd.DataFrame):
-            return dataset.sample(3).to_dict('records')
+# 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}")
             
-    except Exception as e:
-        st.error(f"Error finding similarities: {e}")
-        
-    return []
+            # 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)
+
+        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()
 
-def parse_recipe_text(text):
-    """Parses raw text into Title, Ingredients, Instructions."""
-    if not text: return "Digitized Recipe", [], []
+    # 3. Generate or Load Embeddings
+    embedding_cache_path = "cached_embeddings.pkl"
     
-    lines = text.split('\n')
-    title = "Digitized Recipe"
-    ingredients = []
-    instructions = []
-    current_section = None
-
-    for line in lines:
-        line = line.strip()
-        if not line: continue
-        lower = line.lower()
-        
-        # Detect sections
-        if 'ingredient' in lower:
-            current_section = 'ing'
-            continue
-        elif 'instruction' in lower or 'method' in lower or 'step' in lower:
-            current_section = 'inst'
-            continue
+    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)
             
-        if current_section == 'ing':
-            ingredients.append(line)
-        elif current_section == 'inst':
-            instructions.append(line)
-        elif current_section is None:
-            # Assume early lines are title
-            if len(title) < 20: title = line 
-
-    return title, ingredients, instructions
-
-# --- UI LAYOUT ---
-
-with st.sidebar:
-    st.markdown("""<div style="display: flex; align-items: center; margin-bottom: 20px;"><div style="background-color: #e4e6eb; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 10px;"><span style="font-size: 20px;">👨‍🍳</span></div><div><div style="font-weight: bold;">Master Chef</div><div style="font-size: 12px; color: gray;">Recipe Creator</div></div></div>""", unsafe_allow_html=True)
-    nav = st.radio("Navigation", ["AI Digitalizer", "Feed", "About Us"], label_visibility="collapsed")
-    st.markdown("---")
-    st.info("**Pro Tip!** 💡\nUpload clear, well-lit photos.")
-
-# Search Bar (Visual)
-st.markdown("""<div style="background-color: white; padding: 10px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,0.1);"><span style="color: #1877F2; font-weight: 900; font-size: 20px; margin-right: 20px;">CookBook</span><input type="text" placeholder="Search recipes..." style="background-color: #F0F2F5; border: none; padding: 8px 15px; border-radius: 20px; width: 100%; outline: none;"></div>""", unsafe_allow_html=True)
-
-# Load Dataset
-dataset = load_dataset()
-
-if nav == "AI Digitalizer":
-    st.markdown('<div class="css-card">', unsafe_allow_html=True)
-    st.markdown("### ✨ AI Recipe Digitalizer")
-    st.markdown("Upload a photo of any recipe to extract ingredients and instructions")
+            # 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)
     
-    uploaded_file = st.file_uploader("Choose a recipe image", type=['jpg', 'png', 'jpeg'], label_visibility="collapsed")
+    # 2. Compute Cosine Similarity
+    cos_scores = util.cos_sim(query_embedding, EMBEDDINGS)[0]
     
-    if uploaded_file is not None:
-        image = Image.open(uploaded_file)
-        st.image(image, caption="Uploaded Recipe", use_container_width=True)
+    # 3. Get top k results
+    top_results = torch.topk(cos_scores, k=k)
+    
+    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]
+        
+        # Adjust these keys to match your CSV Column Names
+        # Example: row['Title'], row['Instructions']
+        title = row.get('Title', 'Untitled Recipe') 
         
-        if st.button("✨ Digitize Recipe"):
-            with st.spinner("Processing image with IO_pipeline..."):
-                try:
-                    # 1. CALL LOCAL PIPELINE
-                    generated_text = IO_pipeline.image_to_text(uploaded_file) # or pass 'image' object depending on your pipeline
-                    
-                    # 2. PARSE TEXT
-                    title, ingredients, instructions = parse_recipe_text(generated_text)
-                    
-                    # 3. SAVE STATE
-                    st.session_state['digitized_title'] = title
-                    st.session_state['digitized_ing'] = ingredients
-                    st.session_state['digitized_inst'] = instructions
-                    st.session_state['full_text'] = generated_text
-                    st.session_state['has_results'] = True
-                    
-                except Exception as e:
-                    st.error(f"Pipeline Error: {e}")
-                    st.error("Check if your IO_pipeline.image_to_text() accepts a file path or PIL image.")
-
-    st.markdown('</div>', unsafe_allow_html=True)
-
-    # --- RESULTS ---
-    if st.session_state.get('has_results'):
-        st.markdown(f"""<div class="css-card"><div style="display: flex; align-items: center;"><div style="background-color: #E7F3FF; padding: 10px; border-radius: 50%; margin-right: 10px;"><span style="color: #1877F2; font-size: 20px;">✔</span></div><div><h2 style="margin: 0;">{st.session_state['digitized_title']}</h2><span style="color: green; font-size: 14px;">Successfully digitized!</span></div></div></div>""", unsafe_allow_html=True)
+        # Create a short snippet for the description
+        instructions = str(row.get('Instructions', ''))
+        snippet = instructions[:120] + "..." if len(instructions) > 120 else instructions
         
-        col1, col2 = st.columns(2)
-        with col1:
-            st.markdown('<div class="css-card"><h4>INGREDIENTS</h4>', unsafe_allow_html=True)
-            for i, ing in enumerate(st.session_state['digitized_ing']):
-                st.markdown(f'<div class="list-item"><span class="step-number">{i+1}</span> {ing}</div>', unsafe_allow_html=True)
-            st.markdown('</div>', unsafe_allow_html=True)
-        with col2:
-            st.markdown('<div class="css-card"><h4>INSTRUCTIONS</h4>', unsafe_allow_html=True)
-            for i, inst in enumerate(st.session_state['digitized_inst']):
-                st.markdown(f'<div class="list-item"><span class="step-number">{i+1}</span> {inst}</div>', unsafe_allow_html=True)
-            st.markdown('</div>', unsafe_allow_html=True)
+        results.append((title, snippet))
         
-        # --- RECOMMENDATIONS ---
-        st.markdown("### ✨ Similar Recipes")
-        recommendations = find_similar_recipes(st.session_state['full_text'], dataset)
+    return results
+
+def process_pipeline(image):
+    if image is None:
+        return "", "Please upload an image."
+    
+    # 1. Image -> Text
+    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>
+        """
         
-        rec_cols = st.columns(3)
-        for i in range(3):
-            with rec_cols[i]:
-                # Handle dictionary access safely
-                if i < len(recommendations):
-                    rec = recommendations[i]
-                    rec_title = rec.get('title', rec.get('Title', f"Recipe {i+1}")) # Check capitalization
-                else:
-                    rec_title = "Delicious Recipe"
-
-                st.markdown(f"""
-                <div class="css-card" style="height: 150px; text-align:center; display:flex; flex-direction:column; justify-content:space-between;">
-                    <b>{rec_title}</b>
-                    <button style="background: #e4e6eb; border: none; padding: 5px; width: 100%; border-radius:5px; margin-top:10px;">View</button>
-                </div>""", unsafe_allow_html=True)
-
-elif nav == "Feed":
-    st.info("Feed functionality coming soon!")
+    return generated_text, rec_html
+
+# -----------------------------------------------------------------------------
+# 4. CSS & UI (Facebook Style)
+# -----------------------------------------------------------------------------
+
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --primary: #1877F2;
+    --bg-color: #F0F2F5;
+    --card-bg: #FFFFFF;
+    --text-main: #050505;
+    --text-muted: #65676B;
+}
+
+body, .gradio-container {
+    background-color: var(--bg-color) !important;
+    font-family: 'Inter', sans-serif !important;
+}
+
+/* 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;
+}
+.logo-area {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--primary);
+    font-weight: 700;
+    font-size: 1.5rem;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* Recipe Cards */
+.recipe-card {
+    display: flex;
+    gap: 15px;
+    padding: 15px;
+    margin-bottom: 10px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+.recipe-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+.recipe-icon {
+    min-width: 50px;
+    height: 50px;
+    background: #EBF5FF;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+}
+.recipe-info h4 {
+    margin: 0 0 5px 0;
+    color: var(--primary);
+    font-weight: 600;
+}
+.recipe-info p {
+    margin: 0;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+"""
+
+# -----------------------------------------------------------------------------
+# 5. GRADIO INTERFACE
+# -----------------------------------------------------------------------------
+
+with gr.Blocks(css=custom_css, title="CookBook") as demo:
+    
+    # Header
+    gr.HTML("""
+        <div class="fb-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;">
+            </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)
+            
+            gr.Markdown("### 🥗 You might also like")
+            output_recommendations = gr.HTML(label="Recommendations")
+
+    # Actions
+    submit_btn.click(
+        fn=process_pipeline,
+        inputs=[input_image],
+        outputs=[output_text, output_recommendations]
+    )
+
+if __name__ == "__main__":
+    demo.launch()