Upload 17 files

Dockerfile

@@ -0,0 +1,29 @@
+# Use the official lightweight Python image.
+# https://hub.docker.com/_/python
+FROM python:3.9-slim
+
+# Set the working directory to /app
+WORKDIR /app
+
+# Copy the requirements file into the container at /app
+COPY requirements.txt .
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY . .
+
+# Create the SQLite database directory permissions if needed (HF spaces are writable in /app)
+# But standard SQLite file in CWD is fine.
+
+# Make sure the model is generated during build or on startup
+# We run the training script during build to ensure model.pkl exists
+RUN python -c "import model; model.train_model()"
+
+# Expose port 7860 (Hugging Face Spaces default port)
+EXPOSE 7860
+
+# Run commands to start the server
+# binding to 0.0.0.0 is crucial for Docker containers
+CMD ["python", "app.py"]

N8N_GUIDE.md

@@ -0,0 +1,83 @@
+# N8N Setup Guide for Food Waste Assistant
+
+This guide helps you set up the backend logic using n8n. You will need to create a new workflow (or multiple) to handle the 4 main API endpoints.
+
+## Prerequisites
+- An active [n8n](https://n8n.io/) instance (Cloud or Self-hosted).
+- A database (Google Sheets, Airtable, or Postgres) to store inventory. This guide assumes **Google Sheets** for simplicity.
+
+## Quick Start (Import Workflow)
+I have updated `workflow.json` to be much simpler. It now uses a **Single Webhook URL** that handles everything (`add_item`, `get_items`, etc.).
+
+1. Download the updated `workflow.json` from this project.
+2. Go to your n8n dashboard.
+3. Click **Workflows** > **Import from File**.
+4. Select `workflow.json`.
+5. **Activate** the workflow.
+6. Open the "Webhook (Router)" node:
+   - Copy the **Production URL**.
+   - **CRITICAL**: Set **Respond** to **"Using 'Respond to Webhook' Node"**.
+   - **If you forget this, you will get "Unexpected End of JSON Input" error!**
+7. Paste the URL into your app's Settings.
+
+## 🚀 Making It Real (Google Sheets)
+
+To save data permanently, use `workflow_real.json` instead.
+
+### 1. Prepare Google Sheet
+Create a new Sheet driven by these columns in Row 1:
+`id` | `name` | `quantity` | `expiryDate` | `category`
+
+### 2. Import Real Workflow
+1. Import `workflow_real.json` into N8N.
+2. Double-click **Google Sheets (Add)** and **Google Sheets (Read)** nodes.
+3. Authenticate with your Google Account ("Sign in with Google").
+4. Select your Spreadsheet and Sheet Name.
+   - For **Add Node**: Map the fields (`name` -> `{{$json.body.name}}`, etc).
+5. Activate and copy the new Webhook URL to your app settings.
+
+## Workflow Details
+Below are the details if you want to build it manually or understand how it works.
+
+Create a workflow with a **Webhook** node.
+- **Method**: `POST` (and `GET` if you want a single entry point, but easier to use distinct hooks).
+- **Authentication**: None (for this demo) or Header Auth.
+
+### Endpoint 1: Add Item
+1. **Webhook Node**: Listen for `POST` on `/add-item`.
+2. **AI Node (Optional)**: Use an OpenAI node to predict expiry date based on the "Name" if "ExpiryDate" is empty.
+3. **Google Sheets Node**: "Append" row to Sheet "Inventory".
+   - Map: `Name`, `Quantity`, `ExpiryDate`, `Category`.
+4. **Respond to Webhook Node**: Return `{ "success": true }`.
+
+### Endpoint 2: Get Inventory
+1. **Webhook Node**: Listen for `GET` on `/get-items`.
+2. **Google Sheets Node**: "Read" all rows from Sheet "Inventory".
+3. **Code Node**: Calculate `daysRemaining` for each item.
+4. **Respond to Webhook Node**: Return JSON `{ "items": [...] }`.
+
+### Endpoint 3: Dashboard Stats
+1. **Webhook Node**: Listen for `GET` on `/dashboard-stats`.
+2. **Google Sheets Node**: Read all rows.
+3. **Code Node**:
+   - Count total items.
+   - Filter items where `expiryDate` is within 3 days.
+   - Calculate potential waste savings.
+4. **Respond to Webhook Node**: Return Stats JSON.
+
+### Endpoint 4: Suggest Recipes
+1. **Webhook Node**: Listen for `POST` on `/suggest-recipes`.
+2. **Google Sheets Node**: Read "Inventory" (find items expiring soon).
+3. **OpenAI Node** (or other LLM):
+   - **System Prompt**: "You are a chef. Suggest 3 recipes based on these ingredients: [List of ingredients]. Return valid JSON."
+4. **Respond to Webhook Node**: Return the JSON list of recipes.
+
+## Connecting to Frontend
+1. After activating your workflow, copy the **Production URL** of your Webhook nodes.
+2. If you used different URLs for each endpoint, you might need to adjust `app.js` or use a single Router workflow (recommended).
+   - **Router Approach**: Have one Webhook URL and route based on `body.action` or query param?
+   - **Current App Support**: The `app.js` assumes a base URL structure:
+     - `BASE_URL/add-item`
+     - `BASE_URL/get-items`
+     - etc.
+   - **Tip**: In n8n, you can set the path for the Webhook node. Ensure you set 4 separate Webhook nodes with these specific suffixes, or use a Reverse Proxy to route them.

README.md

@@ -1,11 +1,41 @@
----
-title: Tayyab
-emoji: 💻
-colorFrom: indigo
-colorTo: green
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Food Waste Reduction Assistant
+
+A premium, sustainably-minded web application that helps users track their grocery inventory, predicts expiry dates, and suggests recipes to reduce food waste.
+
+## Features
+- **Smart Inventory Tracking**: Log items and let AI (via n8n) predict expiry dates.
+- **Recipe Suggestions**: Get recipe ideas based on what's expiring soon.
+- **Waste Analytics**: Dashboard to track your impact (Waste Avoided, Money Saved).
+- **Premium UI**: Glassmorphism design with a focus on aesthetics and usability.
+
+## Tech Stack
+- **Frontend**: HTML5, CSS3 (Custom Glassmorphism), JavaScript (Vanilla).
+- **Backend**: n8n (Workflow Automation & AI Integration).
+- **Deployment**: Compatible with Hugging Face Spaces (Static HTML).
+
+## Deployment Guide (Hugging Face Spaces)
+
+1. **Create a Space**:
+   - Go to [Hugging Face Spaces](https://huggingface.co/spaces).
+   - Create a new Space.
+   - Select **"Static HTML"** as the SDK.
+
+2. **Upload Files**:
+   - Upload `index.html`, `style.css`, `app.js`, and `config.js` to the root of your Space.
+
+3. **Live**:
+   - Your app will be live immediately!
+
+## Setup with N8N
+
+This application requires an n8n backend to handle data storage and AI predictions.
+See [N8N_GUIDE.md](N8N_GUIDE.md) for detailed instructions on setting up the workflows.
+
+### Configuration
+1. Open your deployed app.
+2. Go to the **Settings** tab.
+3. Enter your n8n Webhook Base URL.
+4. Click Save.
+
+## Developer Note
+- The app runs in **Mock Mode** by default if no n8n URL is provided. This allows you to explore the UI without a backend.

app.js

@@ -0,0 +1,311 @@
+// State Management
+const state = {
+    inventory: [],
+    stats: {
+        totalItems: 0,
+        expiringSoon: 0,
+        wasteAvoided: 0,
+        moneySaved: 0
+    },
+    useMock: true
+};
+
+// Mock Data (Fallback)
+const MOCK_INVENTORY = [
+    { id: 1, name: 'Milk (Mock)', quantity: '1L', expiryDate: '2023-10-30', category: 'Dairy', price: 2.50 },
+    { id: 2, name: 'Spinach (Mock)', quantity: '1 bag', expiryDate: '2023-10-26', category: 'Vegetables', price: 3.00 },
+];
+
+const MOCK_RECIPES = [
+    { title: 'Mock Chicken Stir-fry', image: 'https://via.placeholder.com/300', ingredients: 'Chicken, Veggies' }
+];
+
+// Initialization
+// Initialization
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if backend is reachable or just load UI
+    state.useMock = false; // We assume Python backend is primary now
+    fetchInventory();
+    setupFormListeners();
+
+    // Hide N8N settings if present (optional UX polish)
+    const settingsSection = document.getElementById('settings-section');
+    if (settingsSection) {
+        // We can inject a message or hide legacy N8N inputs here if we wanted
+        // For now, we just leave it as is
+    }
+});
+
+// Navigation
+function showSection(sectionId) {
+    const sections = ['dashboard', 'inventory', 'recipes', 'settings'];
+    sections.forEach(id => document.getElementById(`${id}-section`).classList.add('hidden'));
+    document.getElementById(`${sectionId}-section`).classList.remove('hidden');
+    document.querySelectorAll('nav button').forEach(btn => btn.classList.remove('active'));
+
+    if (sectionId === 'dashboard' || sectionId === 'inventory') {
+        if (!state.useMock) fetchInventory();
+        else updateUI();
+    }
+}
+
+// Data Handling - Python API
+async function apiRequest(endpoint, method = 'GET', data = null) {
+    // If endpoint doesn't start with /, add it
+    const path = endpoint.startsWith('/') ? endpoint : `/${endpoint}`;
+    const url = `/api${path}`;
+
+    const options = {
+        method: method,
+        headers: { 'Content-Type': 'application/json' }
+    };
+
+    if (data) {
+        options.body = JSON.stringify(data);
+    }
+
+    const response = await fetch(url, options);
+    if (!response.ok) {
+        throw new Error(`Server Error: ${response.status}`);
+    }
+    return await response.json();
+}
+
+async function fetchInventory() {
+    if (state.useMock) { updateUI(); return; } // Keep mock fallback for initial load if no URL was saved
+
+    try {
+        const data = await apiRequest('/get-items');
+        state.inventory = data.items || [];
+        updateUI();
+    } catch (error) {
+        console.error('API Error:', error);
+        showToast('Backend not running? ' + error.message, 'error');
+        // Fallback to mock data if API fails
+        if (state.inventory.length === 0) {
+            state.inventory = MOCK_INVENTORY;
+            state.useMock = true; // Switch to mock mode
+            updateUI();
+        }
+    }
+}
+
+async function addItem(itemData) {
+    if (state.useMock) {
+        state.inventory.push({ ...itemData, id: Date.now(), expiryDate: itemData.expiryDate || '2023-12-01' }); // Add ID for mock
+        updateUI();
+        showToast('Item added (Mock)!', 'success');
+        return;
+    }
+
+    try {
+        const result = await apiRequest('/add-item', 'POST', itemData);
+        if (result.success) {
+            showToast(`Item added! Expiry: ${result.expiryDate}`, 'success');
+            fetchInventory();
+        } else {
+            showToast('Failed to add item: ' + (result.message || 'Unknown error'), 'error');
+        }
+    } catch (error) {
+        console.error('Add Item Error:', error);
+        showToast('Failed to add item.', 'error');
+    }
+}
+
+async function getRecipeSuggestions() {
+    const container = document.getElementById('recipes-container');
+    container.innerHTML = '<div class="loader"></div>';
+
+    if (state.useMock) {
+        await new Promise(r => setTimeout(r, 1000));
+        renderRecipes(MOCK_RECIPES);
+        return;
+    }
+
+    try {
+        const recipes = await apiRequest('/suggest-recipes', 'POST', {});
+        renderRecipes(recipes);
+    } catch (e) {
+        console.error(e);
+        container.innerHTML = '<p class="text-muted">Error fetching recipes. Showing mock recipes.</p>';
+        setTimeout(() => renderRecipes(MOCK_RECIPES), 1000); // Fallback to mock recipes
+    }
+}
+
+// Settings & Testing
+function saveSettings() {
+    const url = document.getElementById('config-webhook-url').value;
+    updateConfig(url);
+    showToast('Settings Saved! Reloading...', 'success');
+    setTimeout(() => window.location.reload(), 1000);
+}
+
+async function testConnection() {
+    const log = document.getElementById('connection-log');
+    log.style.display = 'block';
+    log.innerHTML = 'Testing connection...';
+
+    // Explicitly testing 'get_items' action which matches the Switch node logic
+    const payload = { action: 'get_items' };
+
+    const url = document.getElementById('config-webhook-url').value;
+
+    try {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            log.innerHTML = `<span style="color: #10b981;">SUCCESS: Connected!</span><br>Response: ${JSON.stringify(data).slice(0, 50)}...`;
+        } else {
+            log.innerHTML = `<span style="color: #ef4444;">ERROR: Server returned ${response.status}</span>`;
+        }
+    } catch (e) {
+        log.innerHTML = `<span style="color: #ef4444;">FAIL: ${e.name} - ${e.message}</span><br>Possible causes: CORS, Network, or Wrong URL.`;
+    }
+}
+
+// UI Helpers
+function showToast(msg, type = 'info') {
+    // Simple alert replacement
+    const div = document.createElement('div');
+    div.innerText = msg;
+    div.style.position = 'fixed';
+    div.style.bottom = '20px';
+    div.style.right = '20px';
+    div.style.background = type === 'error' ? '#ef4444' : '#10b981';
+    div.style.color = 'white';
+    div.style.padding = '12px 24px';
+    div.style.borderRadius = '8px';
+    div.style.zIndex = '1000';
+    div.style.animation = 'fadeInUp 0.3s ease';
+    document.body.appendChild(div);
+    setTimeout(() => div.remove(), 3000);
+}
+
+function renderRecipes(recipes) {
+    const container = document.getElementById('recipes-container');
+    container.innerHTML = '';
+    if (!recipes || recipes.length === 0) {
+        container.innerHTML = '<p class="text-muted">No recipes found.</p>';
+        return;
+    }
+    recipes.forEach(recipe => {
+        const div = document.createElement('div');
+        div.className = 'recipe-card';
+        div.innerHTML = `
+            <img src="${recipe.image || 'https://via.placeholder.com/300'}" alt="${recipe.title}">
+            <div class="recipe-content">
+                <div class="recipe-title">${recipe.title}</div>
+                <div class="recipe-ingredients">Ingredients: ${recipe.ingredients || 'Various'}</div>
+            </div>
+        `;
+        container.appendChild(div);
+    });
+}
+
+function calculateStats() {
+    const today = new Date();
+    const upcoming = new Date();
+    upcoming.setDate(today.getDate() + 3);
+
+    let expiringSoonCount = 0;
+
+    state.inventory.forEach(item => {
+        const expiry = new Date(item.expiryDate);
+        if (expiry <= upcoming && expiry >= today) {
+            expiringSoonCount++;
+        }
+    });
+
+    state.stats.totalItems = state.inventory.length;
+    state.stats.expiringSoon = expiringSoonCount;
+    state.stats.wasteAvoided = (state.inventory.length * 0.1).toFixed(1) + 'kg';
+    state.stats.moneySaved = '$' + (state.inventory.length * 2.5).toFixed(2);
+}
+
+function updateUI() {
+    calculateStats();
+    document.getElementById('total-items').innerText = state.stats.totalItems;
+    document.getElementById('expiring-soon').innerText = state.stats.expiringSoon;
+    document.getElementById('waste-avoided').innerText = state.stats.wasteAvoided;
+    document.getElementById('money-saved').innerText = state.stats.moneySaved;
+
+    const list = document.getElementById('inventory-list-ul');
+    list.innerHTML = '';
+
+    state.inventory.forEach(item => {
+        const li = document.createElement('li');
+        li.className = `inventory-item ${getExpiryClass(item.expiryDate)}`;
+        li.innerHTML = `
+            <div class="item-info">
+                <h4>${item.name}</h4>
+                <div class="item-meta"><span>${item.quantity || '-'}</span> • <span>${item.category || 'Other'}</span></div>
+            </div>
+            <div class="item-status">
+                <span class="expiry-badge ${getExpiryClass(item.expiryDate)}">${formatDate(item.expiryDate)}</span>
+            </div>
+        `;
+        list.appendChild(li);
+    });
+
+    generateDashboardAlerts();
+}
+
+function getExpiryClass(dateStr) {
+    if (!dateStr) return 'safe';
+    const today = new Date();
+    const expiry = new Date(dateStr);
+    const diffDays = Math.ceil((expiry - today) / (1000 * 60 * 60 * 24));
+    if (diffDays < 0) return 'expired';
+    if (diffDays <= 3) return 'soon';
+    return 'safe';
+}
+
+function formatDate(dateStr) {
+    if (!dateStr) return 'Unknown';
+    return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+function generateDashboardAlerts() {
+    const container = document.getElementById('alerts-container');
+    container.innerHTML = '';
+    const expiringItems = state.inventory.filter(i => getExpiryClass(i.expiryDate) === 'soon');
+
+    if (expiringItems.length === 0) {
+        container.innerHTML = '<p class="text-muted">No urgent alerts. Good job!</p>';
+        return;
+    }
+    expiringItems.forEach(item => {
+        const div = document.createElement('div');
+        div.style.marginBottom = '10px';
+        div.style.padding = '10px';
+        div.style.background = 'rgba(245, 158, 11, 0.1)';
+        div.style.borderRadius = '8px';
+        div.style.borderLeft = '3px solid var(--accent)';
+        div.innerHTML = `<strong>${item.name}</strong> is expiring soon!`;
+        container.appendChild(div);
+    });
+}
+
+// Event Listeners
+function setupFormListeners() {
+    document.getElementById('quick-add-form').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const name = document.getElementById('quick-name').value;
+        const date = document.getElementById('quick-date').value;
+        addItem({ name, quantity: '1 unit', expiryDate: date, category: 'Uncategorized' });
+        document.getElementById('quick-add-form').reset();
+    });
+
+    document.getElementById('add-item-form').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        addItem(Object.fromEntries(formData.entries()));
+        e.target.reset();
+        showSection('inventory');
+    });
+}

app.py

@@ -0,0 +1,115 @@
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+import sqlite3
+import os
+from datetime import datetime, timedelta
+import model  # Import our AI model
+
+app = Flask(__name__, static_folder='.')
+CORS(app)  # Enable CORS for local development if needed
+
+DB_FILE = 'food_waste.db'
+
+# --- Database Setup ---
+def init_db():
+    conn = sqlite3.connect(DB_FILE)
+    c = conn.cursor()
+    c.execute('''
+        CREATE TABLE IF NOT EXISTS inventory (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            name TEXT NOT NULL,
+            category TEXT,
+            quantity TEXT,
+            expiry_date DATE,
+            added_date DATE DEFAULT CURRENT_DATE
+        )
+    ''')
+    conn.commit()
+    conn.close()
+
+# Initialize on start
+if not os.path.exists(DB_FILE):
+    init_db()
+
+# --- Serve Frontend ---
+@app.route('/')
+def serve_index():
+    return send_from_directory('.', 'index.html')
+
+@app.route('/<path:path>')
+def serve_static(path):
+    return send_from_directory('.', path)
+
+# --- API Endpoints ---
+
+@app.route('/api/add-item', methods=['POST'])
+def add_item():
+    data = request.json
+    name = data.get('name')
+    quantity = data.get('quantity', '1 unit')
+    category = data.get('category', 'Uncategorized')
+    expiry_date = data.get('expiryDate')
+    
+    # AI Prediction if no date provided
+    if not expiry_date:
+        days = model.predict_days(name)
+        expiry_date = (datetime.now() + timedelta(days=days)).strftime('%Y-%m-%d')
+        print(f"AI Predicted expiry for {name}: {expiry_date} ({days} days)")
+
+    conn = sqlite3.connect(DB_FILE)
+    c = conn.cursor()
+    c.execute('INSERT INTO inventory (name, category, quantity, expiry_date) VALUES (?, ?, ?, ?)',
+              (name, category, quantity, expiry_date))
+    conn.commit()
+    conn.close()
+    
+    return jsonify({"success": True, "message": "Item added", "expiryDate": expiry_date})
+
+@app.route('/api/get-items', methods=['GET'])
+def get_items():
+    conn = sqlite3.connect(DB_FILE)
+    conn.row_factory = sqlite3.Row # Access by column name
+    c = conn.cursor()
+    c.execute('SELECT * FROM inventory ORDER BY expiry_date ASC')
+    rows = c.fetchall()
+    conn.close()
+    
+    items = []
+    for row in rows:
+        items.append({
+            "id": row['id'],
+            "name": row['name'],
+            "quantity": row['quantity'],
+            "category": row['category'],
+            "expiryDate": row['expiry_date']
+        })
+        
+    return jsonify({"items": items})
+
+@app.route('/api/suggest-recipes', methods=['POST'])
+def suggest_recipes():
+    # Simple Mock Logic for Recipes (Integration with Real Recipe API would go here)
+    # For now, we return static logic based on inventory
+    return jsonify([
+        {
+            "title": "Smart AI Salad",
+            "image": "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=500",
+            "ingredients": "Based on your Veggies"
+        },
+        {
+             "title": "Leftover Stir Fry",
+             "image": "https://images.unsplash.com/photo-1603133872878-684f208fb74b?w=500",
+             "ingredients": "Mix of everything expiring soon"
+        }
+    ])
+
+@app.route('/api/dashboard-stats', methods=['GET'])
+def get_stats():
+    # Helper to calculate stats backend-side if needed
+    pass
+
+if __name__ == '__main__':
+    # Train model on start if needed
+    model.load_model()
+    print("Server running on http://0.0.0.0:7860")
+    app.run(host='0.0.0.0', port=7860)

config.js

@@ -0,0 +1,10 @@
+const CONFIG = {
+    // For Python Backend, we use relative paths since we serve frontend from the same server.
+    // If running separately, use 'http://localhost:5000'
+    N8N_BASE_URL: ''
+};
+
+function updateConfig(url) {
+    // Legacy function, no longer needed for Python version but kept for compatibility
+    console.log("Config update ignored in Python mode");
+}

debug.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>N8N Connection Debugger</title>
+    <style>
+        body {
+            font-family: monospace;
+            background: #111;
+            color: #0f0;
+            padding: 20px;
+        }
+
+        input {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+
+        button {
+            padding: 10px 20px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+
+        #log {
+            margin-top: 20px;
+            white-space: pre-wrap;
+            border: 1px solid #333;
+            padding: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>N8N Connection Debugger</h1>
+    <p>Paste your Webhook URL exactly as it is in N8N:</p>
+    <input type="text" id="url" value="https://emotiondetectionsys.app.n8n.cloud/webhook/webhook">
+
+    <div style="margin-bottom: 20px;">
+        <button onclick="test('POST')">Test POST (Add Item)</button>
+        <button onclick="test('GET')">Test GET (If supported)</button>
+    </div>
+
+    <div id="log">Logs will appear here...</div>
+
+    <script>
+        async function test(method) {
+            const url = document.getElementById('url').value;
+            const log = document.getElementById('log');
+            log.innerHTML = `Testing ${method} to ${url}...\n`;
+
+            try {
+                const payload = method === 'POST' ? { action: 'get_items', test: true } : undefined;
+
+                const response = await fetch(url, {
+                    method: method,
+                    headers: { 'Content-Type': 'application/json' },
+                    body: payload ? JSON.stringify(payload) : undefined
+                });
+
+                log.innerHTML += `Status: ${response.status} ${response.statusText}\n`;
+
+                const text = await response.text();
+                log.innerHTML += `Response Body: "${text}"\n`;
+
+                if (!text) {
+                    log.innerHTML += `\n[ERROR] The response body is EMPTY. This causes the JSON error.\n`;
+                    log.innerHTML += `Check N8N "Respond" setting again.`;
+                } else {
+                    try {
+                        const json = JSON.parse(text);
+                        log.innerHTML += `\n[SUCCESS] Valid JSON received!\n`;
+                        console.log(json);
+                    } catch (e) {
+                        log.innerHTML += `\n[ERROR] Response is not JSON.`;
+                    }
+                }
+
+            } catch (error) {
+                log.innerHTML += `\n[FATAL ERROR] ${error.message}\n`;
+            }
+        }
+    </script>
+</body>
+
+</html>

expiry_model.pkl

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

firebase.json

@@ -0,0 +1,25 @@
+{
+    "hosting": {
+        "public": ".",
+        "ignore": [
+            "firebase.json",
+            "**/.*",
+            "**/node_modules/**"
+        ],
+        "headers": [
+            {
+                "source": "**",
+                "headers": [
+                    {
+                        "key": "Access-Control-Allow-Origin",
+                        "value": "*"
+                    },
+                    {
+                        "key": "Access-Control-Allow-Methods",
+                        "value": "GET, POST, OPTIONS"
+                    }
+                ]
+            }
+        ]
+    }
+}

index.html

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SustainaBite | Food Waste Assistant</title>
+    <link rel="stylesheet" href="style.css">
+    <!-- Ionicons for Icons -->
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+</head>
+
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header>
+            <div class="logo">
+                <ion-icon name="leaf"></ion-icon>
+                Sustaina<span>Bite</span>
+            </div>
+            <nav>
+                <ul>
+                    <li><button class="active" onclick="showSection('dashboard')">Dashboard</button></li>
+                    <li><button onclick="showSection('inventory')">Inventory</button></li>
+                    <li><button onclick="showSection('recipes')">Recipes</button></li>
+                    <li><button onclick="showSection('settings')"><ion-icon name="settings-outline"></ion-icon></button>
+                    </li>
+                </ul>
+            </nav>
+        </header>
+
+        <!-- Main Content -->
+        <!-- DASHBOARD VIEW -->
+        <main id="dashboard-section">
+            <div class="stats-container">
+                <div class="card stat-card">
+                    <span class="stat-label">Items Tracked</span>
+                    <div class="stat-value" id="total-items">0</div>
+                </div>
+                <div class="card stat-card">
+                    <span class="stat-label">Expiring Soon</span>
+                    <div class="stat-value" id="expiring-soon">0</div>
+                </div>
+                <div class="card stat-card">
+                    <span class="stat-label">Waste Avoided</span>
+                    <div class="stat-value" id="waste-avoided">0kg</div>
+                </div>
+                <div class="card stat-card">
+                    <span class="stat-label">Money Saved</span>
+                    <div class="stat-value" id="money-saved">$0</div>
+                </div>
+            </div>
+
+            <div class="card action-section">
+                <h3 class="mb-4">Recent Alerts</h3>
+                <div id="alerts-container">
+                    <!-- Dynamic Alerts -->
+                    <p class="text-muted">No urgent alerts.</p>
+                </div>
+            </div>
+
+            <div class="card list-section">
+                <h3 class="mb-4">Quick Add Item</h3>
+                <form id="quick-add-form">
+                    <div class="input-group">
+                        <label>Item Name</label>
+                        <input type="text" id="quick-name" placeholder="e.g. Milk" required>
+                    </div>
+                    <div class="input-group">
+                        <label>Expiry Date</label>
+                        <input type="date" id="quick-date" required>
+                    </div>
+                    <button type="submit" class="primary-btn">
+                        <ion-icon name="add-circle-outline"></ion-icon> Add Item
+                    </button>
+                    <p id="quick-msg" style="margin-top:10px; font-size: 0.9rem;"></p>
+                </form>
+            </div>
+        </main>
+
+        <!-- INVENTORY VIEW -->
+        <main id="inventory-section" class="hidden">
+            <div class="card action-section">
+                <h3 class="mb-4">Log Grocery Item</h3>
+                <form id="add-item-form">
+                    <div class="input-group">
+                        <label>Item Name</label>
+                        <input type="text" name="name" placeholder="Avocados" required>
+                    </div>
+                    <div class="input-group">
+                        <label>Category</label>
+                        <select name="category">
+                            <option value="Vegetables">Vegetables</option>
+                            <option value="Fruits">Fruits</option>
+                            <option value="Dairy">Dairy</option>
+                            <option value="Meat">Meat</option>
+                            <option value="Grains">Grains</option>
+                            <option value="Other">Other</option>
+                        </select>
+                    </div>
+                    <div class="input-group">
+                        <label>Quantity</label>
+                        <input type="text" name="quantity" placeholder="e.g. 2 pcs or 500g">
+                    </div>
+                    <div class="input-group">
+                        <label>Expiry Date (Optional - AI will predict)</label>
+                        <input type="date" name="expiryDate">
+                    </div>
+                    <button type="submit" class="primary-btn">
+                        <span>Add to Inventory</span>
+                    </button>
+                </form>
+            </div>
+
+            <div class="card list-section">
+                <h3 class="mb-4">Current Inventory</h3>
+                <div class="tools mb-4" style="display: flex; gap: 10px;">
+                    <input type="text" placeholder="Search items..." id="search-inventory">
+                    <button class="primary-btn" style="width: auto;" onclick="refreshInventory()">
+                        <ion-icon name="refresh"></ion-icon>
+                    </button>
+                </div>
+                <ul class="inventory-list" id="inventory-list-ul">
+                    <!-- Dynamic List Items -->
+                </ul>
+            </div>
+        </main>
+
+        <!-- RECIPES VIEW -->
+        <main id="recipes-section" class="hidden">
+            <div class="card action-section">
+                <h3 class="mb-4">Cook Assistant</h3>
+                <p class="mb-4 text-muted">Generate recipes based on ingredients that are expiring soon.</p>
+                <button class="primary-btn" onclick="getRecipeSuggestions()">
+                    <ion-icon name="restaurant"></ion-icon> Suggest Recipes
+                </button>
+            </div>
+
+            <div class="card list-section">
+                <h3 class="mb-4">Suggested For You</h3>
+                <div id="recipes-container" class="recipes-grid">
+                    <!-- Dynamic Recipes -->
+                    <p class="text-muted">Click "Suggest Recipes" to see ideas.</p>
+                </div>
+            </div>
+        </main>
+
+        <!-- SETTINGS VIEW -->
+        <main id="settings-section" class="hidden">
+            <div class="card" style="grid-column: span 12; max-width: 600px; margin: 0 auto;">
+                <h3 class="mb-4">Settings</h3>
+                <p class="mb-4">Configure your N8N Webhook URLs below to connect the backend.</p>
+
+                <div class="input-group">
+                    <label>Base N8N Webhook URL</label>
+                    <input type="text" id="config-webhook-url" placeholder="https://your-n8n-instance.com/webhook/...">
+                </div>
+
+                <div style="display: flex; gap: 10px; margin-bottom: 20px;">
+                    <button class="primary-btn" onclick="saveSettings()">Save Configuration</button>
+                    <button class="primary-btn" style="background: var(--secondary);" onclick="testConnection()">Test
+                        Connection</button>
+                </div>
+
+                <div id="connection-log"
+                    style="font-family: monospace; font-size: 0.85rem; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 8px; display: none;">
+                </div>
+            </div>
+        </main>
+
+    </div>
+
+    <!-- Scripts -->
+    <script src="config.js"></script>
+    <script src="app.js"></script>
+</body>
+
+</html>

model.py

@@ -0,0 +1,55 @@
+import pandas as pd
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.naive_bayes import MultinomialNB
+from sklearn.pipeline import make_pipeline
+import pickle
+import os
+
+# 1. Dataset of common foods and their typical shelf life (in days)
+#    This acts as our "Knowledge Base"
+data = [
+    # Dairy
+    ("Milk", 7), ("Yogurt", 14), ("Cheese", 30), ("Butter", 60), ("Cream", 10),
+    # Vegetables
+    ("Spinach", 5), ("Lettuce", 5), ("Tomato", 7), ("Carrot", 21), ("Potato", 30), ("Onion", 30),
+    # Fruits
+    ("Apple", 21), ("Banana", 5), ("Orange", 14), ("Grapes", 7), ("Strawberry", 4),
+    # Meat
+    ("Chicken", 2), ("Beef", 3), ("Pork", 3), ("Fish", 2), ("Ham", 5),
+    # Grains
+    ("Bread", 5), ("Rice", 365), ("Pasta", 365), ("Cereal", 180),
+    # Misc
+    ("Eggs", 21), ("Juice", 10), ("Sauce", 90), ("Canned Beans", 700)
+]
+
+MODEL_PATH = "expiry_model.pkl"
+
+def train_model():
+    print("Training Expiry Prediction Model...")
+    df = pd.DataFrame(data, columns=["item", "days"])
+    
+    # Simple NLP pipeline: Text -> Vector -> Classifier
+    model = make_pipeline(TfidfVectorizer(), MultinomialNB())
+    model.fit(df["item"], df["days"])
+    
+    with open(MODEL_PATH, "wb") as f:
+        pickle.dump(model, f)
+    print("Model saved to", MODEL_PATH)
+    return model
+
+def load_model():
+    if os.path.exists(MODEL_PATH):
+        with open(MODEL_PATH, "rb") as f:
+            return pickle.load(f)
+    else:
+        return train_model()
+
+def predict_days(item_name):
+    model = load_model()
+    try:
+        # Predict
+        predicted_days = model.predict([item_name])[0]
+        return int(predicted_days)
+    except Exception as e:
+        print(f"Prediction Error: {e}")
+        return 7 # Default fallback

requirements.txt

@@ -0,0 +1,5 @@
+flask
+flask-cors
+pandas
+scikit-learn
+numpy

style.css

@@ -0,0 +1,351 @@
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
+
+:root {
+    /* Color Palette - Sustainable Tech */
+    --primary: #10b981; /* Emerald 500 */
+    --primary-hover: #059669;
+    --secondary: #3b82f6; /* Blue 500 */
+    --accent: #f59e0b; /* Amber 500 */
+    --danger: #ef4444; /* Red 500 */
+    
+    --bg-dark: #0f172a; /* Slate 900 */
+    --bg-card: rgba(30, 41, 59, 0.7); /* Slate 800 with opacity */
+    --text-main: #f8fafc; /* Slate 50 */
+    --text-muted: #94a3b8; /* Slate 400 */
+    
+    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
+    --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --radius: 16px;
+    --transition: all 0.3s ease;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Outfit', sans-serif;
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    background-image: 
+        radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
+        radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
+        radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+
+/* Layout */
+.app-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    gap: 30px;
+}
+
+/* Header */
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0;
+    animation: fadeInDown 0.8s ease-out;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.logo span {
+    color: var(--text-main);
+}
+
+nav ul {
+    display: flex;
+    gap: 20px;
+    list-style: none;
+}
+
+nav button {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: var(--transition);
+    padding: 8px 16px;
+    border-radius: 20px;
+}
+
+nav button:hover, nav button.active {
+    color: var(--text-main);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* Main Content Grid */
+main {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 24px;
+    animation: fadeInUp 0.8s ease-out;
+}
+
+/* Glassmorphism Cards */
+.card {
+    background: var(--bg-card);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: var(--glass-border);
+    border-radius: var(--radius);
+    padding: 24px;
+    box-shadow: var(--glass-shadow);
+    transition: var(--transition);
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Specific Sections */
+.stats-container {
+    grid-column: span 12;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 24px;
+    margin-bottom: 24px;
+}
+
+.stat-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.stat-value {
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(to right, var(--primary), var(--secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 10px 0;
+}
+
+.stat-label {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.action-section {
+    grid-column: span 4;
+}
+
+.list-section {
+    grid-column: span 8;
+}
+
+@media (max-width: 768px) {
+    .action-section, .list-section {
+        grid-column: span 12;
+    }
+}
+
+/* Forms */
+.input-group {
+    margin-bottom: 16px;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+input, select {
+    width: 100%;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    color: var(--text-main);
+    font-family: 'Outfit', sans-serif;
+    transition: var(--transition);
+}
+
+input:focus, select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+}
+
+button.primary-btn {
+    width: 100%;
+    padding: 14px;
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+}
+
+button.primary-btn:hover {
+    background: var(--primary-hover);
+    transform: scale(1.02);
+}
+
+/* Inventory List */
+.inventory-list {
+    list-style: none;
+    max-height: 400px;
+    overflow-y: auto;
+    padding-right: 10px;
+}
+
+.inventory-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    margin-bottom: 12px;
+    transition: var(--transition);
+    border-left: 3px solid var(--primary);
+}
+
+.inventory-item.expiring {
+    border-left-color: var(--danger);
+}
+
+.inventory-item.warning {
+    border-left-color: var(--accent);
+}
+
+.inventory-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.item-info h4 {
+    margin-bottom: 4px;
+}
+
+.item-meta {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+
+.expiry-badge {
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.expiry-badge.safe { background: rgba(16, 185, 129, 0.2); color: var(--primary); }
+.expiry-badge.soon { background: rgba(245, 158, 11, 0.2); color: var(--accent); }
+.expiry-badge.expired { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
+
+/* Recipes */
+.recipes-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 20px;
+}
+
+.recipe-card {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: var(--transition);
+}
+
+.recipe-card img {
+    width: 100%;
+    height: 140px;
+    object-fit: cover;
+}
+
+.recipe-content {
+    padding: 16px;
+}
+
+.recipe-title {
+    font-size: 1.1rem;
+    margin-bottom: 8px;
+}
+
+.recipe-ingredients {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+
+/* Utility */
+.hidden { display: none; }
+.text-center { text-align: center; }
+.mb-4 { margin-bottom: 16px; }
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+/* Animations */
+@keyframes fadeInDown {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Loading Spinner */
+.loader {
+    width: 20px;
+    height: 20px;
+    border: 3px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    }
+
+@keyframes rotation {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+} 

workflow.json

@@ -0,0 +1,259 @@
+{
+    "name": "Food Waste Assistant Backend (CORS + POST)",
+    "nodes": [
+        {
+            "parameters": {
+                "content": "## Robust Backend\n\nThis workflow handles:\n1. **POST** requests (the main logic)\n2. **OPTIONS** requests (for CORS preflight checks)\n\n### Instructions\n1. Import & Activate.\n2. Both Webhook nodes allow CORS.\n3. Copy the URL from **Webhook (POST)** and put it in your app."
+            },
+            "id": "desc",
+            "name": "Note",
+            "type": "n8n-nodes-base.stickyNote",
+            "typeVersion": 1,
+            "position": [
+                0,
+                0
+            ]
+        },
+        {
+            "parameters": {
+                "httpMethod": "POST",
+                "path": "webhook",
+                "options": {}
+            },
+            "id": "wh-post",
+            "name": "Webhook (POST)",
+            "type": "n8n-nodes-base.webhook",
+            "typeVersion": 1,
+            "position": [
+                300,
+                200
+            ]
+        },
+        {
+            "parameters": {
+                "httpMethod": "OPTIONS",
+                "path": "webhook",
+                "options": {}
+            },
+            "id": "wh-options",
+            "name": "Webhook (OPTIONS)",
+            "type": "n8n-nodes-base.webhook",
+            "typeVersion": 1,
+            "position": [
+                300,
+                500
+            ]
+        },
+        {
+            "parameters": {
+                "dataType": "string",
+                "value1": "={{ $json.body.action }}",
+                "rules": {
+                    "rules": [
+                        {
+                            "value2": "add_item",
+                            "output": 0
+                        },
+                        {
+                            "value2": "get_items",
+                            "output": 1
+                        },
+                        {
+                            "value2": "suggest_recipes",
+                            "output": 2
+                        }
+                    ]
+                }
+            },
+            "id": "switch",
+            "name": "Switch Action",
+            "type": "n8n-nodes-base.switch",
+            "typeVersion": 2,
+            "position": [
+                500,
+                200
+            ]
+        },
+        {
+            "parameters": {
+                "jsCode": "return [ { json: { success: true, message: \"Item added (Real N8N)\" } } ];"
+            },
+            "id": "mock-add",
+            "name": "Mock Add",
+            "type": "n8n-nodes-base.code",
+            "typeVersion": 2,
+            "position": [
+                750,
+                100
+            ]
+        },
+        {
+            "parameters": {
+                "jsCode": "return [ { json: { items: [ { \"id\": 1, \"name\": \"N8N Connected Apple\", \"quantity\": \"5\", \"expiryDate\": \"2023-12-10\", \"category\": \"Fruits\" } ] } } ];"
+            },
+            "id": "mock-get",
+            "name": "Mock Get",
+            "type": "n8n-nodes-base.code",
+            "typeVersion": 2,
+            "position": [
+                750,
+                300
+            ]
+        },
+        {
+            "parameters": {
+                "jsCode": "return [ { json: [ { \"title\": \"N8N Salad\", \"image\": \"https://via.placeholder.com/150\", \"ingredients\": \"Lettuce\" } ] } ];"
+            },
+            "id": "mock-recipes",
+            "name": "Mock Recipes",
+            "type": "n8n-nodes-base.code",
+            "typeVersion": 2,
+            "position": [
+                750,
+                500
+            ]
+        },
+        {
+            "parameters": {
+                "options": {
+                    "responseHeaders": {
+                        "entries": [
+                            {
+                                "name": "Access-Control-Allow-Origin",
+                                "value": "*"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Methods",
+                                "value": "POST, OPTIONS"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Headers",
+                                "value": "*"
+                            }
+                        ]
+                    }
+                }
+            },
+            "id": "response-cors",
+            "name": "Respond to Webhook (CORS)",
+            "type": "n8n-nodes-base.respondToWebhook",
+            "typeVersion": 1,
+            "position": [
+                1100,
+                300
+            ]
+        },
+        {
+            "parameters": {
+                "options": {
+                    "responseHeaders": {
+                        "entries": [
+                            {
+                                "name": "Access-Control-Allow-Origin",
+                                "value": "*"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Methods",
+                                "value": "POST, OPTIONS"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Headers",
+                                "value": "*"
+                            }
+                        ]
+                    }
+                }
+            },
+            "id": "response-options",
+            "name": "Respond OPTIONS",
+            "type": "n8n-nodes-base.respondToWebhook",
+            "typeVersion": 1,
+            "position": [
+                600,
+                500
+            ]
+        }
+    ],
+    "connections": {
+        "Webhook (POST)": {
+            "main": [
+                [
+                    {
+                        "node": "Switch Action",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Webhook (OPTIONS)": {
+            "main": [
+                [
+                    {
+                        "node": "Respond OPTIONS",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Switch Action": {
+            "main": [
+                [
+                    {
+                        "node": "Mock Add",
+                        "type": "main",
+                        "index": 0
+                    }
+                ],
+                [
+                    {
+                        "node": "Mock Get",
+                        "type": "main",
+                        "index": 0
+                    }
+                ],
+                [
+                    {
+                        "node": "Mock Recipes",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Mock Add": {
+            "main": [
+                [
+                    {
+                        "node": "Respond to Webhook (CORS)",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Mock Get": {
+            "main": [
+                [
+                    {
+                        "node": "Respond to Webhook (CORS)",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Mock Recipes": {
+            "main": [
+                [
+                    {
+                        "node": "Respond to Webhook (CORS)",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        }
+    }
+}

workflow_real.json

@@ -0,0 +1,298 @@
+{
+    "name": "Food Waste Assistant (Real - Google Sheets)",
+    "nodes": [
+        {
+            "parameters": {
+                "content": "## Real Database Setup (Google Sheets)\n\nThis workflow reads/writes to a Google Sheet.\n\n### Setup Steps\n1. Create a Google Sheet.\n2. Create header row: `id`, `name`, `quantity`, `expiryDate`, `category`.\n3. Double-click **Google Sheets** nodes to authenticate.\n4. Select your Sheet in the node settings.",
+                "height": 240,
+                "width": 350
+            },
+            "id": "note-real",
+            "name": "Sticky Note",
+            "type": "n8n-nodes-base.stickyNote",
+            "typeVersion": 1,
+            "position": [
+                0,
+                0
+            ]
+        },
+        {
+            "parameters": {
+                "httpMethod": "POST",
+                "path": "webhook",
+                "options": {}
+            },
+            "id": "webhook-real",
+            "name": "Webhook (POST)",
+            "type": "n8n-nodes-base.webhook",
+            "typeVersion": 1,
+            "position": [
+                400,
+                200
+            ]
+        },
+        {
+            "parameters": {
+                "httpMethod": "OPTIONS",
+                "path": "webhook",
+                "options": {}
+            },
+            "id": "webhook-opt-real",
+            "name": "Webhook (OPTIONS)",
+            "type": "n8n-nodes-base.webhook",
+            "typeVersion": 1,
+            "position": [
+                400,
+                500
+            ]
+        },
+        {
+            "parameters": {
+                "dataType": "string",
+                "value1": "={{ $json.body.action }}",
+                "rules": {
+                    "rules": [
+                        {
+                            "value2": "add_item",
+                            "output": 0
+                        },
+                        {
+                            "value2": "get_items",
+                            "output": 1
+                        }
+                    ]
+                }
+            },
+            "id": "switch-real",
+            "name": "Switch Action",
+            "type": "n8n-nodes-base.switch",
+            "typeVersion": 2,
+            "position": [
+                600,
+                200
+            ]
+        },
+        {
+            "parameters": {
+                "operation": "append",
+                "sheetId": {
+                    "__rl": true,
+                    "mode": "fromStr"
+                },
+                "range": "A:E",
+                "options": {}
+            },
+            "id": "gs-add",
+            "name": "Google Sheets (Add)",
+            "type": "n8n-nodes-base.googleSheets",
+            "typeVersion": 4,
+            "position": [
+                850,
+                100
+            ],
+            "credentials": {
+                "googleSheetsOAuth2Api": {
+                    "id": "",
+                    "name": "Google Sheets account"
+                }
+            }
+        },
+        {
+            "parameters": {
+                "operation": "read",
+                "sheetId": {
+                    "__rl": true,
+                    "mode": "fromStr"
+                },
+                "range": "A:E",
+                "options": {}
+            },
+            "id": "gs-read",
+            "name": "Google Sheets (Read)",
+            "type": "n8n-nodes-base.googleSheets",
+            "typeVersion": 4,
+            "position": [
+                850,
+                300
+            ],
+            "credentials": {
+                "googleSheetsOAuth2Api": {
+                    "id": "",
+                    "name": "Google Sheets account"
+                }
+            }
+        },
+        {
+            "parameters": {
+                "jsCode": "const items = $input.all().map(i => i.json);\nreturn [{ json: { items: items } }];"
+            },
+            "id": "format-read",
+            "name": "Format Read",
+            "type": "n8n-nodes-base.code",
+            "typeVersion": 2,
+            "position": [
+                1100,
+                300
+            ]
+        },
+        {
+            "parameters": {
+                "jsCode": "return [{ json: { success: true, message: \"Item saved to Sheets\" } }];"
+            },
+            "id": "format-add",
+            "name": "Format Add",
+            "type": "n8n-nodes-base.code",
+            "typeVersion": 2,
+            "position": [
+                1100,
+                100
+            ]
+        },
+        {
+            "parameters": {
+                "options": {
+                    "responseHeaders": {
+                        "entries": [
+                            {
+                                "name": "Access-Control-Allow-Origin",
+                                "value": "*"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Methods",
+                                "value": "POST, OPTIONS"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Headers",
+                                "value": "*"
+                            }
+                        ]
+                    }
+                }
+            },
+            "id": "resp-real",
+            "name": "Respond to Webhook",
+            "type": "n8n-nodes-base.respondToWebhook",
+            "typeVersion": 1,
+            "position": [
+                1350,
+                200
+            ]
+        },
+        {
+            "parameters": {
+                "options": {
+                    "responseHeaders": {
+                        "entries": [
+                            {
+                                "name": "Access-Control-Allow-Origin",
+                                "value": "*"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Methods",
+                                "value": "POST, OPTIONS"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Headers",
+                                "value": "*"
+                            }
+                        ]
+                    }
+                }
+            },
+            "id": "resp-opt-real",
+            "name": "Respond OPTIONS",
+            "type": "n8n-nodes-base.respondToWebhook",
+            "typeVersion": 1,
+            "position": [
+                600,
+                500
+            ]
+        }
+    ],
+    "connections": {
+        "Webhook (POST)": {
+            "main": [
+                [
+                    {
+                        "node": "Switch Action",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Webhook (OPTIONS)": {
+            "main": [
+                [
+                    {
+                        "node": "Respond OPTIONS",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Switch Action": {
+            "main": [
+                [
+                    {
+                        "node": "Google Sheets (Add)",
+                        "type": "main",
+                        "index": 0
+                    }
+                ],
+                [
+                    {
+                        "node": "Google Sheets (Read)",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Google Sheets (Add)": {
+            "main": [
+                [
+                    {
+                        "node": "Format Add",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Google Sheets (Read)": {
+            "main": [
+                [
+                    {
+                        "node": "Format Read",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Format Add": {
+            "main": [
+                [
+                    {
+                        "node": "Respond to Webhook",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Format Read": {
+            "main": [
+                [
+                    {
+                        "node": "Respond to Webhook",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        }
+    }
+}

workflow_real_safe.json

@@ -0,0 +1,330 @@
+{
+    "name": "Food Waste Assistant (Real - Safe Mode)",
+    "nodes": [
+        {
+            "parameters": {
+                "content": "## Safe Mode Workflow\n\nThis version has a Fallback route.\nIf the Switch node doesn't match 'get_items' or 'add_item', it goes to the **Fallback** node which tells you exactly what happened.\n\nDOUBLE CLICK THE GOOGLE SHEETS NODES TO CONNECT YOUR ACCOUNT.",
+                "height": 260,
+                "width": 350
+            },
+            "id": "note-safe",
+            "name": "Sticky Note",
+            "type": "n8n-nodes-base.stickyNote",
+            "typeVersion": 1,
+            "position": [
+                0,
+                0
+            ]
+        },
+        {
+            "parameters": {
+                "httpMethod": "POST",
+                "path": "webhook",
+                "options": {}
+            },
+            "id": "webhook-safe",
+            "name": "Webhook (POST)",
+            "type": "n8n-nodes-base.webhook",
+            "typeVersion": 1,
+            "position": [
+                400,
+                200
+            ]
+        },
+        {
+            "parameters": {
+                "httpMethod": "OPTIONS",
+                "path": "webhook",
+                "options": {}
+            },
+            "id": "webhook-opt-safe",
+            "name": "Webhook (OPTIONS)",
+            "type": "n8n-nodes-base.webhook",
+            "typeVersion": 1,
+            "position": [
+                400,
+                500
+            ]
+        },
+        {
+            "parameters": {
+                "dataType": "string",
+                "value1": "={{ $json.body.action }}",
+                "rules": {
+                    "rules": [
+                        {
+                            "value2": "add_item",
+                            "output": 0
+                        },
+                        {
+                            "value2": "get_items",
+                            "output": 1
+                        }
+                    ]
+                },
+                "fallbackOutput": 2
+            },
+            "id": "switch-safe",
+            "name": "Switch Action",
+            "type": "n8n-nodes-base.switch",
+            "typeVersion": 2,
+            "position": [
+                600,
+                200
+            ]
+        },
+        {
+            "parameters": {
+                "operation": "append",
+                "sheetId": {
+                    "__rl": true,
+                    "mode": "fromStr"
+                },
+                "range": "A:E",
+                "options": {}
+            },
+            "id": "gs-add-safe",
+            "name": "Google Sheets (Add)",
+            "type": "n8n-nodes-base.googleSheets",
+            "typeVersion": 4,
+            "position": [
+                850,
+                100
+            ],
+            "credentials": {
+                "googleSheetsOAuth2Api": {
+                    "id": "",
+                    "name": "Google Sheets account"
+                }
+            }
+        },
+        {
+            "parameters": {
+                "operation": "read",
+                "sheetId": {
+                    "__rl": true,
+                    "mode": "fromStr"
+                },
+                "range": "A:E",
+                "options": {}
+            },
+            "id": "gs-read-safe",
+            "name": "Google Sheets (Read)",
+            "type": "n8n-nodes-base.googleSheets",
+            "typeVersion": 4,
+            "position": [
+                850,
+                300
+            ],
+            "credentials": {
+                "googleSheetsOAuth2Api": {
+                    "id": "",
+                    "name": "Google Sheets account"
+                }
+            }
+        },
+        {
+            "parameters": {
+                "jsCode": "return [{ json: { success: false, message: \"Action not matched: \" + $json.body.action } }];"
+            },
+            "id": "fallback-safe",
+            "name": "Fallback Error",
+            "type": "n8n-nodes-base.code",
+            "typeVersion": 2,
+            "position": [
+                850,
+                500
+            ]
+        },
+        {
+            "parameters": {
+                "jsCode": "const items = $input.all().map(i => i.json);\nreturn [{ json: { items: items } }];"
+            },
+            "id": "fmt-read-safe",
+            "name": "Format Read",
+            "type": "n8n-nodes-base.code",
+            "typeVersion": 2,
+            "position": [
+                1100,
+                300
+            ]
+        },
+        {
+            "parameters": {
+                "jsCode": "return [{ json: { success: true, message: \"Item saved\" } }];"
+            },
+            "id": "fmt-add-safe",
+            "name": "Format Add",
+            "type": "n8n-nodes-base.code",
+            "typeVersion": 2,
+            "position": [
+                1100,
+                100
+            ]
+        },
+        {
+            "parameters": {
+                "options": {
+                    "responseHeaders": {
+                        "entries": [
+                            {
+                                "name": "Access-Control-Allow-Origin",
+                                "value": "*"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Methods",
+                                "value": "POST, OPTIONS"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Headers",
+                                "value": "*"
+                            }
+                        ]
+                    }
+                }
+            },
+            "id": "resp-safe",
+            "name": "Respond to Webhook",
+            "type": "n8n-nodes-base.respondToWebhook",
+            "typeVersion": 1,
+            "position": [
+                1350,
+                200
+            ]
+        },
+        {
+            "parameters": {
+                "options": {
+                    "responseHeaders": {
+                        "entries": [
+                            {
+                                "name": "Access-Control-Allow-Origin",
+                                "value": "*"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Methods",
+                                "value": "POST, OPTIONS"
+                            },
+                            {
+                                "name": "Access-Control-Allow-Headers",
+                                "value": "*"
+                            }
+                        ]
+                    }
+                }
+            },
+            "id": "resp-opt-safe",
+            "name": "Respond OPTIONS",
+            "type": "n8n-nodes-base.respondToWebhook",
+            "typeVersion": 1,
+            "position": [
+                600,
+                600
+            ]
+        }
+    ],
+    "connections": {
+        "Webhook (POST)": {
+            "main": [
+                [
+                    {
+                        "node": "Switch Action",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Webhook (OPTIONS)": {
+            "main": [
+                [
+                    {
+                        "node": "Respond OPTIONS",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Switch Action": {
+            "main": [
+                [
+                    {
+                        "node": "Google Sheets (Add)",
+                        "type": "main",
+                        "index": 0
+                    }
+                ],
+                [
+                    {
+                        "node": "Google Sheets (Read)",
+                        "type": "main",
+                        "index": 0
+                    }
+                ],
+                [
+                    {
+                        "node": "Fallback Error",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Google Sheets (Add)": {
+            "main": [
+                [
+                    {
+                        "node": "Format Add",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Google Sheets (Read)": {
+            "main": [
+                [
+                    {
+                        "node": "Format Read",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Fallback Error": {
+            "main": [
+                [
+                    {
+                        "node": "Respond to Webhook",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Format Add": {
+            "main": [
+                [
+                    {
+                        "node": "Respond to Webhook",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        },
+        "Format Read": {
+            "main": [
+                [
+                    {
+                        "node": "Respond to Webhook",
+                        "type": "main",
+                        "index": 0
+                    }
+                ]
+            ]
+        }
+    }
+}