Upload 16 files

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.10
+
+# workdir
+WORKDIR /app
+
+# System dependencies
+RUN apt-get update && apt-get install -y git build-essential
+
+# Copy project
+COPY . .
+
+# install Python deps
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt
+
+
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["uvicorn", "app.FastAPI_app:app", "--host", "0.0.0.0", "--port", "7860"]

FastAPI_app.py

@@ -0,0 +1,209 @@
+# FastAPI application for Fridge2Dish
+
+# import libraries
+import os
+import io
+import numpy as np
+import traceback
+from dotenv import load_dotenv
+import time
+import uvicorn
+
+
+# Heavy imports 
+import tensorflow as tf
+from PIL import Image
+from fastapi import FastAPI, Form, UploadFile, File, Request, HTTPException
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.middleware.cors import CORSMiddleware
+import google.generativeai as genai
+
+
+# Load environment variables from .env file
+load_dotenv(True)
+
+
+# Load model (global) once startup.
+MODEL_PATH = "models/ingredient_model.h5"
+MODEL = tf.keras.models.load_model(MODEL_PATH)
+
+# Class names
+CLASS_NAMES = sorted(os.listdir("dataset/dataset_2/train"))
+
+# Infer uploaded image function
+def infer_image(pil_image):
+    img = pil_image.resize((224, 224))
+    IMG = np.expand_dims(np.array(img) / 255.0, axis=0)
+    
+    preds = MODEL.predict(IMG)[0]
+
+    top_idxs = np.argsort(preds)[::-1][:3]
+    
+    # ingredient list
+    ingredients = []
+
+    for i in top_idxs:
+        confidence = float(preds[i])
+        
+        ingredients.append({
+            "name": CLASS_NAMES[i].capitalize(),
+            "confidence": confidence
+        })
+        
+        # Limit to top 5 ingredients
+        if len(ingredients) >= 5:
+            break
+    
+    # incase of no prediction.
+    if not ingredients:
+        return [{"name": "unknown", "confidence": 0.0}]
+
+    return ingredients
+
+
+# Fallback Recipe Generator -> GPT-2
+def generate_recipe_local(ingredient_names):
+    ingredients = ", ".join(ingredient_names)
+    return f"""
+# Simple Local Fallback Recipe
+
+Since no API key was provided, here is a simple offline recipe.
+
+## Ingredients
+- {ingredients}
+
+## Steps
+1. Combine {ingredients} in a bowl.
+2. Add salt and seasoning as desired.
+3. Cook for 10 minutes.
+4. Serve warm.
+
+*(Generated locally without external AI models.)*
+""".strip()
+
+
+# initialize FastAPI app
+app = FastAPI(
+    title="Fridge2Dish API",
+    description="Upload an image → Detect ingredients → Generate recipes",
+    version="2.0.0"
+)
+
+# Serve static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+# CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+# ROUTES
+
+# Home Route
+@app.get("/", response_class=HTMLResponse)
+def home(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+
+# upload-image route
+@app.post("/upload-image/")
+async def upload_image(
+    file: UploadFile = File(...),
+    user_api_key: str = Form(alias="api_key", default="")
+    ):
+         
+    try:
+        # check image file
+        if not file.filename.lower().endswith((".jpg", ".jpeg", ".png")):
+            raise HTTPException(status_code=400, detail="Invalid image format.")
+
+        # Load image
+        img_bytes = await file.read()
+        pil_img = Image.open(io.BytesIO(img_bytes)).convert("RGB")
+        print("\nImage loaded successfully.")
+        
+        # Detect ingredients
+        start_time = time.time()
+        ingredients = infer_image(pil_img)
+        end_time = time.time()
+        
+        print(f"Ingredient detection took {end_time - start_time:.2f} seconds")
+        
+        print(f"Detected ingredients: {ingredients}")
+        
+        if not ingredients:
+            return {"ingredients": [], 
+                    "recipe": "No ingredients detected, Try to take a clearer picture."}
+            
+            
+        ingredient_names = [item["name"] for item in ingredients]
+        
+        
+        # Recipe generation using Gemini
+        # Get api key from user input
+        api_key = user_api_key.strip()
+            
+        if api_key:
+            
+            try:
+                # Try Gemini first...
+                genai.configure(api_key=api_key)
+                model = genai.GenerativeModel("gemini-2.5-flash")
+
+                prompt = f"""
+                You are an AI chef. Create a short recipe using only: {', '.join(ingredient_names)}.
+                Include:
+                - Recipe name
+                - One-sentence description
+                - Ingredients list with quantities
+                - 6-10 concise steps
+                - Optional fun tips or variations
+                Make it easy to follow and appetizing!
+
+                Do not include any lines like "Sure! Here's a recipe...", "Here's a simple..." or similar.
+                Return results in markdown format.
+                """
+                
+                print("\n\nTrying Gemini...")
+                response = model.generate_content(prompt)
+                recipe_text = response.text.strip()
+                # print(recipe_text)
+                
+
+            except Exception as e1:
+                print("\nGemini failed. Falling to GPT-2:", e1)
+                recipe_text = generate_recipe_local(ingredient_names)
+                
+        else:
+            # Since no api_key -> fallback to GPT-2
+            print("\n\nNo API key provided. Using GPT-2 to generate recipe")
+            recipe_text = generate_recipe_local(ingredient_names)
+            
+        # results
+        return {
+                "ingredients": ingredients,
+                "recipe": recipe_text,
+            }
+        
+    except Exception as e2:
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=f"Server Error: {str(e2)}")
+
+
+# Health check
+@app.get("/health")
+def health():
+    return {"status": "ok"}
+
+
+# Run app
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)   

README.md

@@ -1,10 +1 @@
----
-title: Fridge2Dish
-emoji: 👁
-colorFrom: green
-colorTo: pink
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## Still in progress.

detector/infer.py

@@ -0,0 +1,62 @@
+
+from tensorflow.keras.applications.mobilenet_v2 import MobileNetV2, preprocess_input, decode_predictions
+from tensorflow.keras.preprocessing import image as keras_image
+import numpy as np
+import json
+import io
+from PIL import Image
+import os
+
+# load model once
+_model = MobileNetV2(weights="imagenet")
+
+# simple mapping from some ImageNet labels to fridge ingredients
+_MAPPING = {
+    "egg": ["egg"],
+    "banana": ["banana"],
+    "lemon": ["lemon"],
+    "orange": ["orange"],
+    "apple": ["apple"],
+    "cheeseburger": ["cheese","bun","patty"],
+    "pizza": ["cheese","tomato","dough"],
+    "loaf": ["bread"],
+    "bagel": ["bread"],
+    "butter": ["butter"],
+    "milk_can": ["milk"],
+    "yogurt": ["yogurt"],
+    "strawberry": ["strawberry","fruit"],
+    "cucumber": ["cucumber"],
+    "tomato": ["tomato"],
+    "onion": ["onion"],
+    "potato": ["potato"],
+    "carrot": ["carrot"],
+}
+
+def infer_image(pil_image, top_k=3):
+    """Return list of guessed ingredients from a PIL image (placeholder)."""
+    img = pil_image.resize((224,224))
+    x = np.array(img)[...,:3]
+    x = np.expand_dims(x, axis=0)
+    x = preprocess_input(x.astype("float32"))
+    preds = _model.predict(x)
+    decoded = decode_predictions(preds, top=top_k)[0]  # list of (class, name, prob)
+    ingredients = []
+    for _, name, prob in decoded:
+        # normalize name (ImageNet labels can be like "red_wine")
+        key = name.split(",")[0].split("_")[0]
+        if name in _MAPPING:
+            ingredients.extend(_MAPPING[name])
+        elif key in _MAPPING:
+            ingredients.extend(_MAPPING[key])
+            
+        # Use raw name if it looks like a food
+        else:
+            # small heuristic to include food-like names
+            food_keywords = ["egg","tomato","cheese","milk","bread","onion","potato","banana","apple","lemon","orange","butter","yogurt","strawberry","cucumber","carrot"]
+            for kw in food_keywords:
+                if kw in name:
+                    ingredients.append(kw)
+                    
+    # deduplicate and limit
+    ingredients = list(dict.fromkeys(ingredients))
+    return ingredients if ingredients else ["unknown"]

detector/infer2.py

@@ -0,0 +1,45 @@
+
+import tensorflow as tf
+from tensorflow.keras.preprocessing import image
+import numpy as np
+import os
+
+MODEL_PATH = "models/ingredient_model_2.h5"
+MODEL = tf.keras.models.load_model(MODEL_PATH)
+CLASS_NAMES = sorted(os.listdir("dataset/dataset_2/train"))  # folder names = class names
+
+
+def infer_image(pil_image):
+    
+    # Preprocess
+    img = pil_image.resize((224, 224))
+    IMG = np.expand_dims(np.array(img) / 255.0, axis=0)
+    
+    # Model prediction and probabilities
+    preds = MODEL.predict(IMG)[0]
+    
+    # Use top predictions
+    top_idxs = np.argsort(preds)[::-1][:3]
+    
+    # Build ingredient list
+    ingredients = []
+
+    for i in top_idxs:
+        confidence = float(preds[i])
+        if confidence < 0.20:
+            continue  # skip ingredients with confidence less than 20%
+        
+        ingredients.append({
+            "name": CLASS_NAMES[i],
+            "confidence": confidence
+        })
+        
+        # Limit to top 3–5 ingredients if you want
+        if len(ingredients) >= 5:
+            break
+    
+    # incase of no prediction.
+    if not ingredients:
+        return [{"name": "unknown", "confidence": 0.0}]
+
+    return ingredients

download_images.py

@@ -0,0 +1,9 @@
+# download images for specific labels with bing_image_downloader library
+
+from bing_image_downloader import downloader
+
+labels = ["egg", "tomato", "onion", "carrot", "milk", "bread", 
+          "banana", "apple", "cheese", "potato", "butter", "lemon", "yogurt"]
+
+for label in labels:
+    downloader.download(label, limit=80, output_dir='dataset', adult_filter_off=True)

models/ingredient_model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bd3752319812cd2aced247d36aebe32cd205d2b603b96429b7f2c55279456074
+size 11428600

recipe_generator/recipe_local.py

@@ -0,0 +1,14 @@
+# Recipe generator using Hugging Face Transformers
+
+# import libraries
+from transformers import pipeline
+
+# initialize text generation pipeline
+generator = pipeline("text-generation", model="gpt2", trust_remote_code=True)
+
+# generate recipe function
+def generate_recipe(ingredients):
+    prompt = f"Create a short creative recipe using {', '.join(ingredients)}:\n\n"
+    result = generator(prompt, max_length=120, num_return_sequences=1, temperature=0.9)
+    return result[0]['generated_text'].split("\n")[0]
+

recipe_generator/recipe_math.py

@@ -0,0 +1,50 @@
+# Rule-based recipe generator
+
+RECIPE_TEMPLATES = [
+    {
+        "name": "Quick Omelette",
+        "requires": ["egg"],
+        "steps": [
+            "Beat the eggs in a bowl, add salt and pepper.",
+            "Chop any veggies (tomato, onion, pepper) and fold into the eggs.",
+            "Heat a pan, add butter or oil, cook on medium-low until set."
+        ]
+    },
+    {
+        "name": "Tomato Toast",
+        "requires": ["bread","tomato"],
+        "steps": [
+            "Toast the bread.",
+            "Slice tomatoes, season with salt, pepper, a splash of oil.",
+            "Top the toast with tomato slices and serve."
+        ]
+    },
+    {
+        "name": "Milk & Fruit Bowl",
+        "requires": ["milk","banana","strawberry"],
+        "steps": [
+            "Slice fruit into a bowl.",
+            "Pour milk or yogurt over it. Add honey or sugar if desired."
+        ]
+    },
+    {
+        "name": "Veggie Stir Fry",
+        "requires": ["onion","carrot","tomato"],
+        "steps": [
+            "Heat oil in a pan, saute chopped onion until translucent.",
+            "Add chopped carrot and other veggies, stir fry until tender.",
+            "Season with soy sauce or salt and serve with bread or rice."
+        ]
+    }
+]
+
+def generate_recipe(ingredients):
+    ingredients = [i.lower() for i in ingredients]
+    # try to match template
+    for t in RECIPE_TEMPLATES:
+        if any(req in ingredients for req in t["requires"]):
+            ingr_list = ", ".join([i for i in ingredients if i in sum([t["requires"]],[]) or True][:5])
+            steps = "\n".join([f"{i+1}. {s}" for i,s in enumerate(t["steps"])])
+            return f"**{t['name']}**\nIngredients I saw: {', '.join(ingredients)}\n\nSteps:\n{steps}"
+    # fallback
+    return f"Can't find a perfect match. You have: {', '.join(ingredients)}. Try: scrambled eggs, toast, or a simple salad."

recipe_generator/recipe_online.py

@@ -0,0 +1,35 @@
+# Recipe generator using Gemini API.
+
+# import libraries
+import os
+import google.generativeai as genai
+from dotenv import load_dotenv
+
+
+# Load environment variables from .env file
+load_dotenv()
+
+# Configure Gemini client
+api_key = os.getenv("GEMINI_API_KEY")
+genai.configure(api_key=api_key)
+
+# generate recipe function
+def generate_recipe(ingredients):
+    model = genai.GenerativeModel("gemini-2.5-flash")
+    
+    prompt = f"""
+    You are an AI chef. Create a short recipe using only: {', '.join(ingredients)}.
+    Include:
+    - Recipe name
+    - One-sentence description
+    - Ingredients list with quantities
+    - 6-10 concise steps
+    - Optional fun tips or variations
+    Make it easy to follow and appetizing!
+
+    Do not include any lines like "Sure! Here's a recipe...", "Here's a simple..." or similar.
+    """
+    
+    response = model.generate_content(prompt)
+    print(response.text.strip())
+    return response.text.strip()

requirements.txt

@@ -0,0 +1,10 @@
+streamlit
+fastapi
+uvicorn[standard]
+tensorflow-cpu==2.13.0
+transformers==4.39.3
+torch==2.1.0
+pillow
+python-dotenv
+google-generativeai
+numpy

static/scripts.js

@@ -0,0 +1,416 @@
+// State management
+const state = {
+    uploadedImage: null,
+    detectedIngredients: [],
+    recipes: [],
+    isProcessing: false,
+    geminiApiKey: "",
+    skipApiKeyWarning: false
+};
+
+// DOM elements 
+const elements = {
+    apiKeyInput: document.getElementById('apiKey'),
+    uploadArea: document.getElementById('uploadArea'),
+    fileInput: document.getElementById('fileInput'),
+    previewSection: document.getElementById('previewSection'),
+    previewImage: document.getElementById('previewImage'),
+    resetButton: document.getElementById('resetButton'),
+    scanButton: document.getElementById('scanButton'),
+    scanButtonText: document.getElementById('scanButtonText'),
+    heroSection: document.getElementById('heroSection'),
+    resultsSection: document.getElementById('resultsSection'),
+    ingredientsList: document.getElementById('ingredientsList'),
+    recipesSection: document.getElementById('recipesSection'),
+    recipesList: document.getElementById('recipesList'),
+    darkModeToggle: document.getElementById('darkModeToggle')
+};
+
+// Initialize app
+function init() {
+    setupEventListeners();
+    loadStoredPreferences();
+    loadDarkModePreference();
+}
+
+// Load stored API key and preferences
+function loadStoredPreferences() {
+    const savedKey = localStorage.getItem('geminiApiKey');
+    const skipWarning = localStorage.getItem('skipApiKeyWarning') === 'true';
+
+    if (savedKey) {
+        state.geminiApiKey = savedKey;
+        elements.apiKeyInput.value = savedKey;
+    }
+
+    state.skipApiKeyWarning = skipWarning;
+}
+
+// load dark mode preference
+function loadDarkModePreference() {
+    if (localStorage.getItem('darkMode') === 'true') {
+        document.documentElement.classList.add('dark');
+    }
+}
+
+// setup event listeners
+function setupEventListeners() {
+
+    // API key field
+    elements.apiKeyInput.addEventListener('input', (e) => {
+        const key = e.target.value.trim();
+        state.geminiApiKey = key;
+        localStorage.setItem('geminiApiKey', key);
+    });
+
+    // Upload area click triggers file input
+    elements.uploadArea.addEventListener('click', () => elements.fileInput.click());
+
+    // Drag & drop support
+    elements.uploadArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        elements.uploadArea.style.borderColor = 'var(--primary)';
+    });
+
+    elements.uploadArea.addEventListener('dragleave', () => {
+        elements.uploadArea.style.borderColor = 'var(--border)';
+    });
+
+    elements.uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        elements.uploadArea.style.borderColor = 'var(--border)';
+        if (e.dataTransfer.files.length > 0) {
+            handleFileUpload(e.dataTransfer.files[0]);
+        }
+    });
+
+    // File input change
+    elements.fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            handleFileUpload(e.target.files[0]);
+        }
+    });
+
+    // Reset
+    elements.resetButton.addEventListener('click', resetUpload);
+
+    // Scan button
+    elements.scanButton.addEventListener('click', handleScan);
+
+    // Dark mode toggle
+    elements.darkModeToggle.addEventListener('click', () => {
+        const isDark = document.documentElement.classList.toggle('dark');
+        localStorage.setItem('darkMode', isDark);
+    });
+}
+
+
+// File Upload + Preview
+function handleFileUpload(file) {
+    if (!file.type.startsWith('image/')) {
+        alert('Please upload a valid image file.');
+        return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        state.uploadedImage = e.target.result;
+        showImagePreview(e.target.result);
+    };
+    reader.readAsDataURL(file);
+}
+
+function showImagePreview(imageUrl) {
+    elements.previewImage.src = imageUrl;
+
+    elements.uploadArea.style.display = 'none';
+    elements.previewSection.style.display = 'block';
+    elements.scanButton.style.display = 'flex';
+    elements.heroSection.style.display = 'none';
+}
+
+// Reset upload
+function resetUpload() {
+    state.uploadedImage = null;
+    state.detectedIngredients = [];
+    state.recipes = [];
+
+    elements.fileInput.value = '';
+    elements.uploadArea.style.display = 'block';
+    elements.previewSection.style.display = 'none';
+    elements.scanButton.style.display = 'none';
+    elements.resultsSection.style.display = 'none';
+    elements.heroSection.style.display = 'block';
+}
+
+
+// Image Scan and Backend Processing
+async function handleScan() {
+    if (!state.uploadedImage) {
+        alert('Please upload an image first.');
+        return;
+    }
+
+    await handleMissingApiKeyWarning();
+
+    state.isProcessing = true;
+    updateScanButton(true);
+
+    try {
+        const formData = new FormData();
+
+        // Convert Base64 → Blob → File
+        const blob = await (await fetch(state.uploadedImage)).blob();
+        formData.append("file", new File([blob], "upload.jpg", { type: blob.type }));
+        formData.append("api_key", (state.geminiApiKey || "").trim());
+
+        const response = await fetch("/upload-image/", { method: "POST", body: formData });
+
+        if (!response.ok) throw new Error("Backend error: " + response.status);
+
+        const data = await response.json();
+
+        // Convert backend output to frontend format
+        state.detectedIngredients = (data.ingredients || []).map(item => ({
+            name: item.name,
+            confidence: item.confidence
+        }));
+
+        state.recipes = [{
+            name: "AI-Generated Recipe",
+            ingredients: (data.ingredients || []).map(i => i.name),
+            steps: [data.recipe]
+        }];
+
+
+        displayIngredients(state.detectedIngredients);
+        displayRecipes(state.recipes);
+        elements.resultsSection.style.display = 'block';
+
+    } catch (err) {
+        console.error(err);
+        alert("Something went wrong while processing the image.");
+    }
+
+    state.isProcessing = false;
+    updateScanButton(false);
+}
+
+
+ // Missing API Key Warning
+async function handleMissingApiKeyWarning() {
+    if (state.geminiApiKey || state.skipApiKeyWarning) return;
+
+    const proceed = confirm(
+        "⚠️ Continue without a Gemini API key?\n\n" +
+        "• Recipe quality may be downgraded\n" +
+        "• AI creativity reduced\n\n" +
+        "Proceed anyway?"
+    );
+
+    if (!proceed) throw new Error("User cancelled scan.");
+
+    const dontShowAgain = confirm("Skip this warning next time?");
+    if (dontShowAgain) {
+        state.skipApiKeyWarning = true;
+        localStorage.setItem('skipApiKeyWarning', 'true');
+    }
+}
+
+// UI Helper: Scan Button State
+function updateScanButton(isLoading) {
+    elements.scanButton.disabled = isLoading;
+    elements.scanButtonText.textContent = isLoading ? "Processing..." : "Scan Ingredients";
+}
+
+
+// Rendering Ingredients UI
+function displayIngredients(ingredients) {
+    elements.ingredientsList.innerHTML = '';
+
+    ingredients.forEach((ingredient, index) => {
+        const item = document.createElement('div');
+        item.className = 'ingredient-item';
+        item.style.animation = `fadeIn 1s ease-out ${index * 0.08}s forwards`;
+
+        // Make sure confidence is numerical
+        const confidence = Number(ingredient.confidence);
+
+        // Determine bar & badge color
+        let barColor;
+        if (confidence >= 0.7) barColor = "#2ecc71";      // green
+        else if (confidence >= 0.4) barColor = "#f1c40f"; // yellow
+        else barColor = "#e74c3c";                        // red
+
+        item.innerHTML = `
+            <div class="ingredient-header">
+                <div class="ingredient-info">
+                    <span class="ingredient-name">${ingredient.name}</span>
+                    <span class="confidence-badge"
+                        style="
+                            background: ${barColor};
+                            color: ${confidence >= 0.4 ? '#000' : '#fff'};
+                        ">
+                        ${Math.round(confidence * 100)}% confidence
+                    </span>
+                </div>
+            </div>
+
+            <div class="confidence-bar">
+                <div class="confidence-fill"
+                    style="
+                        width: 0%;
+                        background: ${barColor};
+                        transition: width 0.9s ease-out;
+                    ">
+                </div>
+            </div>
+        `;
+
+        elements.ingredientsList.appendChild(item);
+
+        // Animate bar fill
+        requestAnimationFrame(() => {
+            const fill = item.querySelector('.confidence-fill');
+            fill.style.width = `${confidence * 100}%`;
+        });
+    });
+}
+
+
+
+
+// Rendering Recipes UI (Markdown support)
+function displayRecipes(recipes) {
+    elements.recipesSection.style.display = 'block';
+    elements.recipesList.innerHTML = '';
+
+    recipes.forEach((recipe, index) => {
+        const card = document.createElement('div');
+        card.className = 'recipe-card';
+        card.style.animation = `fadeIn 1s ease-out ${index * 0.15}s forwards`;
+
+        // Short / long ingredients
+        const shortIngredients = (recipe.ingredients || [])
+            .map(i => (typeof i === "string" ? i : (i.name ?? "Unknown")))
+            .slice(0, 5);
+
+        const hasMoreIngredients = (recipe.ingredients || []).length > 5;
+
+        // Steps handling: steps may be an array of short steps, or a single big markdown string
+        const stepsArr = recipe.steps || [];
+        const isSingleLongMarkdown = stepsArr.length === 1 && (stepsArr[0].includes('\n\n') || stepsArr[0].includes('#') || stepsArr[0].includes('- '));
+
+        // Build Ingredients html
+        const ingredientsHtml = `
+            <div class="recipe-section">
+                <h5 class="section-title">Ingredients</h5>
+                <div class="ingredients-grid" data-full="${encodeURIComponent(JSON.stringify(recipe.ingredients || []))}">
+                    ${shortIngredients.map(i => `<span class="ingredient-tag">${i}</span>`).join('')}
+                    ${hasMoreIngredients ? `<button class="show-more-btn ingredient-more">+${(recipe.ingredients || []).length - 5} more</button>` : ''}
+                </div>
+            </div>
+        `;
+
+        // Build Steps html
+        let stepsHtml = '';
+        if (isSingleLongMarkdown) {
+            // render whole markdown blob (not inside <ol>)
+            const mdText = stepsArr[0] || '';
+            const htmlFromMd = (typeof marked !== 'undefined')
+                ? marked.parse(mdText)
+                : mdText.replace(/\n\n/g, '<br><br>').replace(/\n/g, '<br>');
+            stepsHtml = `
+                <div class="recipe-section">
+                    <h5 class="section-title">Steps</h5>
+                    <div class="recipe-markdown">${htmlFromMd}</div>
+                </div>
+            `;
+        } else {
+            // render as ordered list of steps (short step items)
+            const shortSteps = stepsArr.slice(0, 3);
+            const hasMoreSteps = stepsArr.length > 3;
+            const shortStepsHtml = shortSteps
+                .map(s => {
+                    const rendered = (typeof marked !== 'undefined') ? marked.parseInline(s) : escapeHtml(s);
+                    return `<li>${rendered}</li>`;
+                })
+                .join('');
+            stepsHtml = `
+                <div class="recipe-section">
+                    <h5 class="section-title">Steps</h5>
+                    <ol class="steps-list" data-full="${encodeURIComponent(JSON.stringify(stepsArr))}">
+                        ${shortStepsHtml}
+                    </ol>
+                    ${hasMoreSteps ? `<button class="show-more-btn steps-more">Show ${stepsArr.length - 3} more</button>` : ''}
+                </div>
+            `;
+        }
+
+        card.innerHTML = `
+            <div class="recipe-header">
+                <h4 class="recipe-name">${escapeHtml(recipe.name || 'Recipe')}</h4>
+            </div>
+
+            ${ingredientsHtml}
+            ${stepsHtml}
+        `;
+
+        elements.recipesList.appendChild(card);
+        setupExpandButtons(card);
+    });
+}
+
+// Setup expand buttons with markdown handling
+function setupExpandButtons(card) {
+    // Ingredients expand
+    const ingBtn = card.querySelector(".ingredient-more");
+    if (ingBtn) {
+        ingBtn.onclick = () => {
+            const container = ingBtn.parentElement;
+            const fullList = JSON.parse(decodeURIComponent(container.dataset.full || '[]'));
+            container.innerHTML = fullList.map(i => `<span class="ingredient-tag">${escapeHtml(i)}</span>`).join('');
+        };
+    }
+
+    // Steps expand (only applies when steps were short-array style)
+    const stepBtn = card.querySelector(".steps-more");
+    if (stepBtn) {
+        stepBtn.onclick = () => {
+            const ol = stepBtn.previousElementSibling;
+            const fullList = JSON.parse(decodeURIComponent(ol.dataset.full || '[]'));
+            if (typeof marked !== 'undefined') {
+                ol.innerHTML = fullList.map(s => `<li>${marked.parseInline(s)}</li>`).join('');
+            } else {
+                ol.innerHTML = fullList.map(s => `<li>${escapeHtml(s)}</li>`).join('');
+            }
+            stepBtn.remove();
+        };
+    }
+}
+
+// small helper to escape HTML when marked is not available or for text content
+function escapeHtml(str) {
+    if (!str) return '';
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+
+
+// Fade Animations
+const styleElement = document.createElement('style');
+styleElement.textContent = `
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+`;
+document.head.appendChild(styleElement);
+
+
+// Start Application
+document.readyState === 'loading'
+    ? document.addEventListener('DOMContentLoaded', init)
+    : init();

static/styles.css

@@ -0,0 +1,591 @@
+/* Design System Variables */
+:root {
+    --background: hsl(42, 100%, 98%);
+    --foreground: hsl(25, 30%, 15%);
+    --card: hsl(0, 0%, 100%);
+    --card-foreground: hsl(25, 30%, 15%);
+    --primary: hsl(14, 85%, 58%);
+    --primary-foreground: hsl(0, 0%, 100%);
+    --secondary: hsl(142, 65%, 48%);
+    --secondary-foreground: hsl(0, 0%, 100%);
+    --muted: hsl(42, 40%, 92%);
+    --muted-foreground: hsl(25, 20%, 45%);
+    --accent: hsl(38, 92%, 62%);
+    --accent-foreground: hsl(25, 30%, 15%);
+    --border: hsl(42, 30%, 88%);
+    --input: hsl(42, 30%, 88%);
+    --ring: hsl(14, 85%, 58%);
+    --radius: 0.75rem;
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark {
+    --background: hsl(25, 30%, 8%);
+    --foreground: hsl(42, 40%, 95%);
+    --card: hsl(25, 25%, 12%);
+    --card-foreground: hsl(42, 40%, 95%);
+    --primary: hsl(14, 85%, 58%);
+    --primary-foreground: hsl(0, 0%, 100%);
+    --secondary: hsl(142, 65%, 48%);
+    --secondary-foreground: hsl(0, 0%, 100%);
+    --muted: hsl(25, 20%, 18%);
+    --muted-foreground: hsl(42, 30%, 65%);
+    --accent: hsl(38, 92%, 62%);
+    --accent-foreground: hsl(25, 30%, 8%);
+    --border: hsl(25, 20%, 20%);
+    --input: hsl(25, 20%, 20%);
+    --ring: hsl(14, 85%, 58%);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    background-color: var(--background);
+    color: var(--foreground);
+    line-height: 1.6;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+/* Header */
+.header {
+    background-color: hsla(0, 0%, 100%, 0.5);
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+.dark .header {
+    background-color: hsla(25, 30%, 8%, 0.8);
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 1rem 0;
+}
+
+.logo-container {
+    background: linear-gradient(135deg, hsl(14, 85%, 58%), hsl(38, 92%, 62%));
+    padding: 0.5rem;
+    border-radius: var(--radius);
+}
+
+.chef-hat-icon {
+    color: white;
+}
+
+.logo-text {
+    font-size: 1.5rem;
+    font-weight: bold;
+    background: linear-gradient(135deg, hsl(14, 85%, 58%), hsl(38, 92%, 62%));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Dark Mode Toggle */
+.dark-mode-toggle {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: hsl(var(--muted));
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition-smooth);
+    margin-left: auto;
+}
+
+.dark-mode-toggle:hover {
+    background: hsl(var(--muted) / 0.8);
+    transform: scale(1.05);
+}
+
+.dark-mode-toggle .sun-icon,
+.dark-mode-toggle .moon-icon {
+    position: absolute;
+    color: hsl(var(--foreground));
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.dark-mode-toggle .moon-icon {
+    opacity: 0;
+    transform: rotate(90deg) scale(0.8);
+}
+
+.dark .dark-mode-toggle .sun-icon {
+    opacity: 0;
+    transform: rotate(-90deg) scale(0.8);
+}
+
+.dark .dark-mode-toggle .moon-icon {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+}
+
+/* Main Content */
+.main-content {
+    padding: 2rem 0;
+}
+
+/* Hero Section */
+.hero-section {
+    max-width: 42rem;
+    margin: 0 auto 3rem;
+    text-align: center;
+}
+
+.hero-title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: var(--foreground);
+    margin-bottom: 1rem;
+}
+
+.gradient-text {
+    background: linear-gradient(135deg, hsl(14, 85%, 58%), hsl(38, 92%, 62%));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-description {
+    font-size: 1.125rem;
+    color: var(--muted-foreground);
+}
+
+/* Upload Section */
+.upload-section {
+    max-width: 42rem;
+    margin: 0 auto 2rem;
+}
+
+.upload-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 2rem;
+    box-shadow: 0 2px 12px hsla(25, 30%, 15%, 0.06);
+}
+
+.api-key-section {
+    margin-bottom: 1.5rem;
+}
+
+.api-key-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--foreground);
+    margin-bottom: 0.5rem;
+}
+
+.api-key-input {
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    font-size: 0.875rem;
+    border: 1px solid var(--input);
+    border-radius: calc(var(--radius) - 0.125rem);
+    background: var(--background);
+    color: var(--foreground);
+    transition: all 0.2s;
+}
+
+.api-key-input:focus {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 2px hsla(14, 85%, 58%, 0.1);
+}
+
+/* Upload Area */
+.upload-area {
+    border: 2px dashed var(--border);
+    border-radius: var(--radius);
+    padding: 3rem 1.5rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.upload-area:hover {
+    border-color: var(--primary);
+    background: linear-gradient(135deg, hsla(14, 85%, 58%, 0.05), hsla(142, 65%, 48%, 0.05));
+    transform: scale(1.02);
+}
+
+.upload-icon {
+    color: var(--primary);
+    margin-bottom: 1rem;
+}
+
+.upload-text {
+    font-size: 1.125rem;
+    font-weight: 500;
+    color: var(--foreground);
+    margin-bottom: 0.5rem;
+}
+
+.upload-subtext {
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+}
+
+/* Preview Section */
+.preview-section {
+    position: relative;
+}
+
+.preview-image {
+    width: 100%;
+    border-radius: var(--radius);
+    box-shadow: 0 4px 20px hsla(14, 85%, 58%, 0.08);
+}
+
+.reset-button {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 0.125rem);
+    color: var(--foreground);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.reset-button:hover {
+    background: var(--muted);
+}
+
+/* Scan Button */
+.scan-button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    margin-top: 1.5rem;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    border: none;
+    border-radius: calc(var(--radius) - 0.125rem);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.scan-button:hover:not(:disabled) {
+    background: hsl(14, 85%, 52%);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 20px hsla(14, 85%, 58%, 0.3);
+}
+
+.scan-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.scan-button.processing {
+    background: var(--muted);
+    color: var(--muted-foreground);
+}
+
+/* Results Section */
+.results-section {
+    max-width: 56rem;
+    margin: 0 auto;
+}
+
+.results-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 2px 12px hsla(25, 30%, 15%, 0.06);
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.card-header h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.icon-success {
+    color: var(--secondary);
+}
+
+.icon {
+    flex-shrink: 0;
+}
+
+/* Ingredients List */
+.ingredients-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.ingredient-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    opacity: 0;
+    transform: translateY(8px);
+}
+
+.ingredient-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.ingredient-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.ingredient-name {
+    font-weight: 500;
+    color: var(--foreground);
+}
+
+/* Base confidence bar container */
+.confidence-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.625rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    border-radius: 9999px;
+}
+
+.confidence-bar {
+    width: 100%;
+    height: 8px;
+    background: #e0e0e0;
+    border-radius: 6px;
+    overflow: hidden;
+    margin-top: 6px;
+}
+
+.confidence-fill {
+    height: 100%;
+    border-radius: 6px;
+}
+
+
+/* Recipes Section */
+.recipes-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+}
+
+.recipes-list {
+    display: grid;
+    gap: 1.5rem;
+}
+
+.recipe-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    box-shadow: 0 2px 12px hsla(25, 30%, 15%, 0.06);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.recipe-card:hover {
+    box-shadow: 0 8px 32px hsla(25, 30%, 15%, 0.12);
+    transform: translateY(-4px);
+}
+
+.recipe-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.recipe-icon {
+    background: linear-gradient(135deg, hsl(14, 85%, 58%), hsl(38, 92%, 62%));
+    padding: 0.5rem;
+    border-radius: calc(var(--radius) - 0.125rem);
+    color: white;
+}
+
+.recipe-title-section {
+    flex: 1;
+}
+
+.recipe-name {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.recipe-time {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+}
+
+.recipe-section {
+    margin-bottom: 1.5rem;
+}
+
+.recipe-section:last-child {
+    margin-bottom: 0;
+}
+
+.section-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.75rem;
+}
+
+.ingredients-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.ingredient-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    background: var(--muted);
+    color: var(--foreground);
+    border-radius: 9999px;
+    font-size: 0.875rem;
+}
+
+.steps-list {
+    list-style: none;
+    counter-reset: step-counter;
+}
+
+.step-item {
+    counter-increment: step-counter;
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.step-item::before {
+    content: counter(step-counter);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    background: var(--primary);
+    color: white;
+    border-radius: 50%;
+    font-size: 0.75rem;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.step-text {
+    flex: 1;
+    padding-top: 0.125rem;
+}
+
+.show-more-btn {
+    background: none;
+    border: none;
+    color: var(--primary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    padding: 0;
+    margin-top: 0.5rem;
+}
+
+.show-more-btn:hover {
+    text-decoration: underline;
+}
+
+/* Footer */
+.footer {
+    border-top: 1px solid var(--border);
+    margin-top: 4rem;
+    padding: 2rem 0;
+}
+
+.footer-text {
+    text-align: center;
+    color: var(--muted-foreground);
+}
+
+
+/* Loading Animation */
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.spinning {
+    animation: spin 1s linear infinite;
+}
+
+
+/* Responsive Design */
+@media (min-width: 768px) {
+    .hero-title {
+        font-size: 3rem;
+    }
+}
+
+@media (max-width: 640px) {
+    .hero-title {
+        font-size: 2rem;
+    }
+    
+    .upload-card {
+        padding: 1.5rem;
+    }
+}

streamlit_app.py

@@ -0,0 +1,34 @@
+# import libraries and modules
+import streamlit as st
+from PIL import Image
+import numpy as np
+from detector.infer2 import infer_image
+
+# Streamlit app
+st.set_page_config(page_title="Fridge2Dish", layout="centered")
+
+# Title and description
+st.title("Fridge2Dish — AI Chef from Leftovers 🍳🥦")
+st.write("Upload a photo of your fridge or ingredients and get a recipe suggestion.")
+
+# Upload Image
+uploaded = st.file_uploader("Upload fridge/photo", type=["jpg","jpeg","png", "webp"])
+if uploaded:
+    image = Image.open(uploaded).convert("RGB")
+    st.image(image, caption="Input image", use_column_width=True)
+
+    with st.spinner("Detecting ingredients..."):
+        ingredients = infer_image(image)  # returns list of strings
+    st.markdown("**Detected ingredients:**")
+    st.write(ingredients)
+
+    with st.spinner("Generating recipe..."):
+        
+        from recipe_generator.recipe_online import generate_recipe
+        recipe = generate_recipe(ingredients)
+        
+    st.markdown("### Suggested Recipe")
+    st.write(recipe)
+else:
+    st.info("Try uploading a clear photo of a few ingredients (eg. eggs, tomato, bread).")
+

templates/index.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fridge2Dish - AI Recipe Generator from Your Ingredients</title>
+    <meta name="description" content="Transform your ingredients into delicious recipes with AI-powered ingredient detection and personalized recipe suggestions">
+    <meta name="author" content="Fridge2Dish">
+    
+    <meta property="og:title" content="Fridge2Dish - AI Recipe Generator">
+    <meta property="og:description" content="Upload your ingredients and get AI-powered recipe suggestions instantly">
+    <meta property="og:type" content="website">
+
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <!--markdown library-->
+    <link rel="stylesheet" href="/static/styles.css">
+    
+
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <div class="logo-container">
+                    <svg class="chef-hat-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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" x2="18" y1="17" y2="17"/>
+                    </svg>
+                </div>
+                <h1 class="logo-text">Fridge2Dish</h1>
+
+                <!-- Dark Mode Toggle -->
+                <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode">
+                    <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="4"/>
+                        <path d="M12 2v2"/>
+                        <path d="M12 20v2"/>
+                        <path d="m4.93 4.93 1.41 1.41"/>
+                        <path d="m17.66 17.66 1.41 1.41"/>
+                        <path d="M2 12h2"/>
+                        <path d="M20 12h2"/>
+                        <path d="m6.34 17.66-1.41 1.41"/>
+                        <path d="m19.07 4.93-1.41 1.41"/>
+                    </svg>
+                    <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
+                    </svg>
+                </button>
+
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="container">
+            <!-- Hero Section -->
+            <div id="heroSection" class="hero-section">
+                <h2 class="hero-title">
+                    Turn Your Ingredients Into 
+                    <span class="gradient-text">Delicious Meals</span>
+                </h2>
+                <p class="hero-description">
+                    Upload a photo of your ingredients and let AI suggest amazing recipes you can cook right now
+                </p>
+            </div>
+
+            <!-- Image Upload Section -->
+            <div class="upload-section">
+                <div class="upload-card">
+                    <!-- API Key Input -->
+                    <div class="api-key-section">
+                        <label for="apiKey" class="api-key-label">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/>
+                                <path d="m21 2-9.6 9.6"/>
+                                <circle cx="7.5" cy="15.5" r="5.5"/>
+                            </svg>
+                            Gemini API Key
+                        </label>
+                        <input 
+                            type="password" 
+                            id="apiKey" 
+                            class="api-key-input" 
+                            placeholder="Enter your Gemini API key"
+                        >
+                    </div>
+
+                    <!-- Upload Area -->
+                    <div id="uploadArea" class="upload-area">
+                        <svg class="upload-icon" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                            <polyline points="17 8 12 3 7 8"/>
+                            <line x1="12" x2="12" y1="3" y2="15"/>
+                        </svg>
+                        <p class="upload-text">Drop your ingredient photo here or click to browse</p>
+                        <p class="upload-subtext">Supported formats: JPG, JPEG, PNG, WEBP</p>
+                        <input type="file" id="fileInput" accept="image/*" hidden>
+                    </div>
+
+                    <!-- Image Preview -->
+                    <div id="previewSection" class="preview-section" style="display: none;">
+                        <img id="previewImage" class="preview-image" alt="Uploaded ingredients">
+                        <button id="resetButton" class="reset-button">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M18 6 6 18"/>
+                                <path d="m6 6 12 12"/>
+                            </svg>
+                            Reset
+                        </button>
+                    </div>
+
+                    <!-- Scan Button -->
+                    <button id="scanButton" class="scan-button" style="display: none;">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M3 7V5a2 2 0 0 1 2-2h2"/>
+                            <path d="M17 3h2a2 2 0 0 1 2 2v2"/>
+                            <path d="M21 17v2a2 2 0 0 1-2 2h-2"/>
+                            <path d="M7 21H5a2 2 0 0 1-2-2v-2"/>
+                            <rect width="10" height="8" x="7" y="8" rx="1"/>
+                        </svg>
+                        <span id="scanButtonText">Scan for Ingredients</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Results Section -->
+            <div id="resultsSection" class="results-section" style="display: none;">
+                <!-- Detected Ingredients -->
+                <div class="results-card">
+                    <div class="card-header">
+                        <svg class="icon-success" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                            <path d="m9 12 2 2 4-4"/>
+                        </svg>
+                        <h3>Detected Ingredients</h3>
+                    </div>
+                    <div id="ingredientsList" class="ingredients-list"></div>
+                </div>
+
+                <!-- Recipe Cards -->
+                <div id="recipesSection" style="display: none;">
+                    <h3 class="recipes-title">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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" x2="18" y1="17" y2="17"/>
+                        </svg>
+                        Suggested Recipes
+                    </h3>
+                    <div id="recipesList" class="recipes-list"></div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <p class="footer-text">AI-Powered • Made by <a href="https://github.com/Wills17" target="_blank">Wills</a></p>
+        </div>
+    </footer>
+
+    <script src="/static/scripts.js" defer></script>
+</body>
+</html>