| ---
|
| title: Food Waste Reduction Assistant
|
| emoji: 🥗
|
| colorFrom: green
|
| colorTo: blue
|
| sdk: docker
|
| pinned: false
|
| ---
|
|
|
| # 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.
|
|
|
