home page combined

Home.py

@@ -1,22 +1,163 @@
 import streamlit as st
-from utils.layout import set_custom_page_config, render_header
-
-with open("assets/css/styles.css") as f:
-    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
-
-set_custom_page_config()
-render_header()
-
-st.markdown("""
-<div class="about-box">
-     This tool leverages AI to assist in:<br>
-        - Classifying images of vegetables and fruits.<br>
-        - Detecting their variations (cut, whole, sliced).<br>
-        - Recommending recipes based on natural language input.<br>
-</div>
-
-### Use the left sidebar to navigate between:
--  Task A: Classification - upload an image of a vegetable or fruit to classify it.
--  Task B: Variation Detection - upload an image of a vegetable or fruit to detect its variation.
--  NLP Recipe Recommendation - enter a search query to recommend a recipe.
-""", unsafe_allow_html=True)
+from PIL import Image
+from model.classifier import get_model, predict
+from model.search_script import search_for_recipes
+import streamlit.components.v1 as components
+import time
+import base64
+
+from utils.layout import render_layout
+
+@st.cache_resource
+def load_model():
+    return get_model()
+
+def classification_and_recommendation_page():
+    st.markdown("## 🖼️ Task A: Image Classification + 🍽️ Recipe Recommendation")
+
+    st.markdown("""
+    <div class="about-box">
+    Upload one or more food images. This module classifies each image into 
+    <b>Onion, Pear, Strawberry, or Tomato</b> using EfficientNet-B0, and then recommends recipes
+    based on the combined classification results.
+    </div>
+    """, unsafe_allow_html=True)
+
+    model = load_model()
+
+    # --- Upload and classify ---
+    uploaded_files = st.file_uploader("📤 Upload images (JPG/PNG)", type=["jpg", "jpeg", "png"], accept_multiple_files=True)
+
+    if "uploaded_images" not in st.session_state:
+        st.session_state.uploaded_images = []
+    if "image_tags" not in st.session_state:
+        st.session_state.image_tags = {}
+
+    if uploaded_files:
+        for img_file in uploaded_files:
+            if img_file.name not in [img.name for img in st.session_state.uploaded_images]:
+                img = Image.open(img_file).convert("RGB")
+                label, _ = predict(img, model)
+                st.session_state.uploaded_images.append(img_file)
+                st.session_state.image_tags[img_file.name] = label
+
+    # --- Show grid of classified images ---
+    if st.session_state.uploaded_images:
+        html = """
+        <style>
+        .image-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
+        .image-card {
+            width: 140px; height: 180px;
+            border: 1px solid #ccc; border-radius: 10px;
+            overflow: hidden; text-align: center;
+            font-size: 13px; position: relative;
+            background: #fdfdfd; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+        }
+        .image-card img {
+            max-width: 100%; max-height: 110px;
+            object-fit: contain; margin-top: 5px;
+        }
+        .remove-btn {
+            position: absolute; top: 2px; right: 6px;
+            color: #d33; background: #fff;
+            border: none; cursor: pointer; font-size: 16px;
+        }
+        </style>
+        <div class="image-grid">
+        """
+
+        for img in st.session_state.uploaded_images:
+            label = st.session_state.image_tags.get(img.name, "unknown")
+            img_b64 = base64.b64encode(img.getvalue()).decode()
+            html += f"""
+            <div class="image-card">
+                <img src="data:image/png;base64,{img_b64}" />
+                <div><b>{label.upper()}</b></div>
+                <div style="color:gray; font-size:11px;">{img.name}</div>
+            </div>
+            """
+
+        html += "</div>"
+        grid_rows = ((len(st.session_state.uploaded_images) - 1) // 5 + 1)
+        components.html(html, height=200 * grid_rows + 20, scrolling=True)
+
+    # --- Recipe Search ---
+    st.markdown("---")
+    st.markdown("## 🔍 Recipe Recommendation")
+
+    if 'search_system' not in st.session_state:
+        with st.spinner("Initializing recipe search system"):
+            st.session_state.search_system = search_for_recipes()
+
+    search_system = st.session_state.search_system
+
+    if not search_system.is_ready:
+        st.error("System not ready. Please check data files and try again.")
+        return
+
+    unique_tags = list(set(st.session_state.image_tags.values()))
+    default_query = " ".join(unique_tags)
+
+    query = st.text_input(
+        "Search for recipes:",
+        value=default_query,
+        placeholder="e.g., 'onion tomato pasta', 'strawberry dessert', etc."
+    )
+
+    col1, col2 = st.columns(2)
+    with col1:
+        num_results = st.slider("Number of results", 1, 15, 5)
+    with col2:
+        min_rating = st.slider("Minimum rating", 1.0, 5.0, 3.0, 0.1)
+
+    if st.button("🔍 Search Recipes") and query:
+        with st.spinner(f"Searching for '{query}'..."):
+            results = search_system.search_recipes(query, num_results, min_rating)
+
+        if results:
+            st.markdown(f"### Top {len(results)} recipe recommendations for: *'{query}'*")
+            st.markdown("<hr>", unsafe_allow_html=True)
+
+            for i, recipe in enumerate(results, 1):
+                steps_html = "".join([f"<li>{step.strip().capitalize()}</li>" for step in recipe.get("steps", [])])
+                description = recipe.get("description", "").strip().capitalize()
+
+                html_code = f"""
+                <div style="margin: 8px 0; padding: 8px; border-radius: 12px; background-color: #fdfdfd; 
+                            box-shadow: 0 2px 8px rgba(0,0,0,0.06); font-family: Arial, sans-serif; 
+                            border: 1px solid #e0e0e0;">
+                    <div style="font-size: 18px; font-weight: bold; color: #333; margin-bottom: 8px;">
+                        {i}. {recipe['name']}
+                    </div>
+                    <div style="margin: 4px 0 12px 0; font-size: 14px; color: #555;">
+                        <b>{recipe['minutes']} min</b> &nbsp;&nbsp;|&nbsp;&nbsp;
+                        <b>{recipe['n_steps']} steps</b> &nbsp;&nbsp;|&nbsp;&nbsp;
+                        <b>{recipe['avg_rating']:.1f}/5.0</b>
+                        <span style="font-size: 12px; color: #999;">({recipe['num_ratings']} ratings)</span>
+                    </div>
+                    <div style="margin-bottom: 8px; font-size: 14px;">
+                        <b>Match Score:</b> 
+                        <span style="color: #007acc; font-weight: bold;">{recipe['similarity_score']:.1%}</span>
+                        <span style="font-size: 12px; color: #888;">(query match)</span>
+                    </div>
+                    <div style="margin-bottom: 8px;">
+                        <b>Tags:</b><br>
+                        <div style="margin-top: 8px;">
+                            {" ".join([f"<span style='background:#eee;padding:4px 8px;border-radius:6px;margin:2px;display:inline-block;font-size:12px'>{tag}</span>" for tag in recipe['tags']])}
+                        </div>
+                    </div>
+                    <div style="margin-bottom: 8px;">
+                        <b>Ingredients:</b><br>
+                        <span style="font-size: 13px; color: #444; display: block;">
+                            {', '.join(recipe['ingredients'][:8])}{'...' if len(recipe['ingredients']) > 8 else ''}
+                        </span>
+                    </div>
+                    {f"<div style='margin-top: 10px; font-size: 13px; color: #333;'><b>Description:</b><br><span>{description}</span></div>" if description else ""}
+                    {f"<div style='margin-top: 10px; font-size: 13px;'><b>Steps:</b><ol style='margin: 6px 0 0 18px; padding: 0;'>{steps_html}</ol></div>" if steps_html else ""}
+                </div>
+                """
+                components.html(html_code, height=340, scrolling=True)
+        else:
+            st.warning(f"No recipes found for '{query}' with a minimum rating of {min_rating}/5.0.")
+
+render_layout(classification_and_recommendation_page)

src/streamlit_app.py

@@ -1,40 +0,0 @@
-import altair as alt
-import numpy as np
-import pandas as pd
-import streamlit as st
-
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))