Upload folder using huggingface_hub

.env

@@ -0,0 +1 @@
+GOOGLE_API = "AIzaSyBzOJkd7iq1S3reFlgMeMrQb0azVsfUn6c"

Dockerfile

@@ -0,0 +1,26 @@
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install dependencies
+RUN apt-get update && apt-get install -y \
+    git \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    ffmpeg \
+    curl \
+ && rm -rf /var/lib/apt/lists/*
+
+# Copy files
+COPY . .
+
+# Install Python packages
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose the port for Hugging Face
+ENV PORT 7860
+EXPOSE 7860
+
+# Run the FastAPI server
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,11 +1,51 @@
----
-title: Food Menu
-emoji: 🚀
-colorFrom: yellow
-colorTo: pink
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: 🍽️ AI Food Menu Generator
+emoji: 📸
+colorFrom: yellow
+colorTo: red
+sdk: docker
+pinned: false
+app_file: app.py
+---
+
+# 🍽️ AI Food Menu Generator
+
+Welcome to the **AI Food Menu Generator** – an intelligent web app that extracts food items from a menu image and generates realistic food images using text-to-image AI.
+
+## 🚀 Features
+
+- 📸 Upload a food menu image
+- 🧠 Extract food names using image-to-text models
+- 🎨 Generate food images using AI models like `gemma:3b` or similar via Ollama
+- 🖼️ View results instantly in your browser
+- ⚡ FastAPI backend + Hugging Face Spaces deployment via Docker
+
+
+## 🧪 Example Usage
+
+1. Upload a food menu image
+2. The app extracts menu items (like `Paneer Tikka`, `Burger`)
+3. For each item, it generates a realistic food image using text-to-image AI
+4. Results are shown with image previews
+
+---
+
+## 🔧 Tech Stack
+
+- **FastAPI** - backend API server
+- **Ollama + Gemma** - local model for image generation
+- **Docker** - for containerized deployment
+- **Hugging Face Spaces** - for live hosting
+- **Diffusers & Transformers** - model inference
+- **Pillow** - image handling
+- **Python** - ❤️
+
+---
+
+## 🐳 Docker Usage (Optional for Local Run)
+
+```bash
+docker build -t ai-food-menu .
+
+docker run -p 7860:7860 ai-food-menu
+

app.py

@@ -0,0 +1,121 @@
+from fastapi import FastAPI, File, UploadFile, Request
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+
+import os
+import json
+import base64
+import re
+from dotenv import load_dotenv
+import requests
+import torch
+from diffusers import StableDiffusionPipeline
+from PIL import Image
+from io import BytesIO
+from imghdr import what
+
+load_dotenv()
+api_key = os.getenv("GOOGLE_API")
+
+app = FastAPI()
+
+templates = Jinja2Templates(directory="templates")
+
+device = "cuda" if torch.cuda.is_available() else "cpu"
+pipe = StableDiffusionPipeline.from_pretrained(
+    "runwayml/stable-diffusion-v1-5",
+    torch_dtype=torch.float16 if device == "cuda" else torch.float32
+)
+pipe.to(device)
+
+
+def clean_filename(text):
+    return re.sub(r'[^\w\-_\. ]', '_', text.strip().lower().replace(" ", "_"))
+
+
+def generate_image_base64(food_name):
+    prompt = f"Professional food photography of {food_name}, top-down view, realistic lighting"
+    image = pipe(prompt).images[0]
+
+    buffered = BytesIO()
+    image.save(buffered, format="PNG")
+    encoded_image = base64.b64encode(buffered.getvalue()).decode("utf-8")
+    return encoded_image
+
+def get_mime_type(image_bytes):
+    kind = what(None, h=image_bytes)
+    return f"image/{kind or 'jpeg'}"
+
+def extract_menu_from_image(image_bytes):
+    base64_image = base64.b64encode(image_bytes).decode('utf-8')
+    url = f"https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key={api_key}"
+    
+    prompt = """
+    Extract the menu items from this image and return ONLY a JSON array like:
+    [
+      {
+        "food": "Dish Name",
+        "description": "Short description or empty string",
+        "price": 10,
+        "category": "Category"
+      }
+    ]
+    """
+
+    payload = {
+        "contents": [
+            {
+                "parts": [
+                    {"text": prompt},
+                    {
+                        "inline_data": {
+                            "mime_type": get_mime_type(image_bytes),
+                            "data": base64_image
+                        }
+                    }
+                ]
+            }
+        ],
+        "generationConfig": {
+            "responseMimeType": "application/json"
+        }
+    }
+
+    headers = {'Content-Type': 'application/json'}
+
+    try:
+        res = requests.post(url, headers=headers, json=payload)
+        res.raise_for_status()
+        text = res.json()['candidates'][0]['content']['parts'][0]['text']
+        return json.loads(text)
+    except Exception as e:
+        print("Error extracting menu:", e)
+        return []
+
+
+@app.get("/", response_class=HTMLResponse)
+async def form(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+
+@app.post("/upload", response_class=HTMLResponse)
+async def upload(request: Request, menu_image: UploadFile = File(...)):
+    image_bytes = await menu_image.read()
+    menu_items = extract_menu_from_image(image_bytes)
+
+    for item in menu_items:
+        item["img_base64"] = generate_image_base64(item["food"])
+
+    html = "<h2>🍽️ AI Food Menu</h2><div style='display:flex; flex-wrap:wrap;'>"
+    for item in menu_items:
+        html += f"""
+        <div style='border:1px solid #ccc; margin:10px; width:220px; text-align:center; padding:10px; border-radius:10px; box-shadow:2px 2px 5px #aaa;'>
+            <img src='data:image/png;base64,{item["img_base64"]}' width='200'><br>
+            <h3>{item['food']}</h3>
+            <p><b>${item['price']}</b></p>
+            <p>{item['description']}</p>
+        </div>
+        """
+    html += "</div><br><a href='/'>Upload Another</a>"
+    return HTMLResponse(content=html)

requirements.txt

@@ -0,0 +1,8 @@
+fastapi
+uvicorn[standard]
+python-multipart
+requests
+python-dotenv
+torch
+diffusers[torch]
+Pillow

templates/index.html

@@ -0,0 +1,705 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Food Menu Generator</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background: linear-gradient(135deg, #fff7ed 0%, #ffffff 50%, #fef2f2 100%);
+            min-height: 100vh;
+            color: #374151;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem 1rem;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .title {
+            font-size: 3rem;
+            font-weight: bold;
+            background: linear-gradient(to right, #ea580c, #dc2626);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 1rem;
+        }
+
+        .subtitle {
+            font-size: 1.25rem;
+            color: #6b7280;
+            max-width: 32rem;
+            margin: 0 auto;
+        }
+
+        .main-content {
+            max-width: 64rem;
+            margin: 0 auto;
+        }
+
+        .card {
+            background: white;
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            margin-bottom: 2rem;
+        }
+
+        .upload-card {
+            padding: 2rem;
+        }
+
+        .upload-content {
+            text-align: center;
+        }
+
+        .upload-area {
+            border: 2px dashed #d1d5db;
+            border-radius: 0.5rem;
+            padding: 2rem;
+            margin-bottom: 1.5rem;
+            transition: border-color 0.3s ease;
+            cursor: pointer;
+        }
+
+        .upload-area:hover {
+            border-color: #fb923c;
+        }
+
+        .file-input {
+            display: none;
+        }
+
+        .upload-label {
+            cursor: pointer;
+            display: block;
+        }
+
+        .upload-icon-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .upload-icon {
+            width: 3rem;
+            height: 3rem;
+            color: #9ca3af;
+            margin-bottom: 1rem;
+        }
+
+        .upload-title {
+            font-size: 1.125rem;
+            font-weight: 500;
+            color: #374151;
+            margin-bottom: 0.5rem;
+        }
+
+        .upload-subtitle {
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+
+        .preview-section {
+            margin-bottom: 1.5rem;
+        }
+
+        .preview-title {
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .preview-icon {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+
+        .preview-container {
+            max-width: 24rem;
+            margin: 0 auto;
+        }
+
+        .preview-image {
+            width: 100%;
+            height: auto;
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e5e7eb;
+        }
+
+        .button-container {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+        }
+
+        .btn {
+            padding: 0.75rem 2rem;
+            font-size: 1.125rem;
+            font-weight: 500;
+            border-radius: 0.375rem;
+            border: none;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        .btn-primary {
+            background: linear-gradient(to right, #f97316, #ef4444);
+            color: white;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            background: linear-gradient(to right, #ea580c, #dc2626);
+        }
+
+        .btn-secondary {
+            border: 1px solid #d1d5db;
+            background: white;
+            color: #374151;
+        }
+
+        .btn-secondary:hover {
+            background: #f9fafb;
+        }
+
+        .loading-icon {
+            width: 1.25rem;
+            height: 1.25rem;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        .processing-card {
+            padding: 2rem;
+        }
+
+        .processing-content {
+            text-align: center;
+        }
+
+        .processing-header {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .processing-spinner {
+            width: 2rem;
+            height: 2rem;
+            color: #f97316;
+            animation: spin 1s linear infinite;
+        }
+
+        .processing-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: #374151;
+        }
+
+        .processing-steps {
+            color: #6b7280;
+        }
+
+        .processing-steps p {
+            margin-bottom: 0.25rem;
+        }
+
+        .menu-section {
+            margin-bottom: 2rem;
+        }
+
+        .menu-title {
+            font-size: 1.875rem;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 2rem;
+            color: #1f2937;
+        }
+
+        .menu-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.5rem;
+        }
+
+        .menu-item {
+            background: white;
+            border-radius: 0.5rem;
+            overflow: hidden;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .menu-item:hover {
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            transform: translateY(-0.5rem);
+        }
+
+        .menu-item-image-container {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .menu-item-image {
+            width: 100%;
+            height: 12rem;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+        }
+
+        .menu-item:hover .menu-item-image {
+            transform: scale(1.05);
+        }
+
+        .menu-item-price-badge {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            background: linear-gradient(to right, #f97316, #ef4444);
+            color: white;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            font-weight: 600;
+        }
+
+        .menu-item-content {
+            padding: 1rem;
+        }
+
+        .menu-item-name {
+            font-weight: bold;
+            font-size: 1.125rem;
+            margin-bottom: 0.5rem;
+            color: #1f2937;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .menu-item-description {
+            color: #6b7280;
+            font-size: 0.875rem;
+            margin-bottom: 0.5rem;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .menu-item-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .menu-item-category {
+            font-size: 0.75rem;
+            background: #f3f4f6;
+            padding: 0.25rem 0.5rem;
+            border-radius: 9999px;
+            color: #6b7280;
+        }
+
+        .menu-item-price {
+            font-weight: bold;
+            font-size: 1.125rem;
+            color: #ea580c;
+        }
+
+        .hidden {
+            display: none !important;
+        }
+
+        .toast {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            background: white;
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            padding: 1rem;
+            max-width: 24rem;
+            z-index: 1000;
+            border-left: 4px solid #10b981;
+            display: flex;
+            align-items: start;
+            justify-content: space-between;
+        }
+
+        .toast.error {
+            border-left-color: #ef4444;
+        }
+
+        .toast-content {
+            flex: 1;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            margin-bottom: 0.25rem;
+            color: #1f2937;
+        }
+
+        .toast-description {
+            color: #6b7280;
+            font-size: 0.875rem;
+        }
+
+        .toast-close {
+            background: none;
+            border: none;
+            font-size: 1.25rem;
+            cursor: pointer;
+            color: #6b7280;
+            padding: 0.25rem;
+            margin-left: 1rem;
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+
+        .toast-close:hover {
+            color: #374151;
+        }
+
+        @media (max-width: 768px) {
+            .title {
+                font-size: 2rem;
+            }
+            
+            .subtitle {
+                font-size: 1rem;
+            }
+            
+            .button-container {
+                flex-direction: column;
+                align-items: center;
+            }
+            
+            .btn {
+                width: 100%;
+                max-width: 16rem;
+            }
+            
+            .menu-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1 class="title">🍽️ AI Food Menu Generator</h1>
+            <p class="subtitle">
+                Upload your menu image and watch AI extract menu items and generate beautiful food photos
+            </p>
+        </div>
+
+        <div class="main-content">
+            <div class="upload-card card">
+                <div class="upload-content">
+                    <div class="upload-area" id="uploadArea">
+                        <input type="file" accept="image/*" id="menuUpload" class="file-input">
+                        <label for="menuUpload" class="upload-label">
+                            <div class="upload-icon-container">
+                                <svg class="upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                                </svg>
+                                <p class="upload-title">Upload Menu Image</p>
+                                <p class="upload-subtitle">Click to select or drag and drop your menu image</p>
+                            </div>
+                        </label>
+                    </div>
+
+                    <div id="previewSection" class="preview-section hidden">
+                        <h3 class="preview-title">
+                            <svg class="preview-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                            </svg>
+                            Uploaded Menu Image
+                        </h3>
+                        <div class="preview-container">
+                            <img id="previewImage" src="" alt="Menu preview" class="preview-image">
+                        </div>
+                    </div>
+
+                    <div class="button-container">
+                        <button id="generateBtn" class="btn btn-primary" disabled>
+                            <span id="generateBtnText">Generate Menu</span>
+                            <svg id="loadingIcon" class="loading-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                            </svg>
+                        </button>
+                        
+                        <button id="resetBtn" class="btn btn-secondary hidden">
+                            Upload Another
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div id="processingCard" class="processing-card card hidden">
+                <div class="processing-content">
+                    <div class="processing-header">
+                        <svg class="processing-spinner" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                        </svg>
+                        <span class="processing-title">AI is processing your menu...</span>
+                    </div>
+                    <div class="processing-steps">
+                        <p>🔍 Extracting menu items from image</p>
+                        <p>🎨 Generating beautiful food photos</p>
+                        <p>✨ Creating your digital menu</p>
+                    </div>
+                </div>
+            </div>
+
+            <div id="menuSection" class="menu-section hidden">
+                <h2 class="menu-title">🍽️ Your AI-Generated Menu</h2>
+                <div id="menuGrid" class="menu-grid">
+                </div>
+            </div>
+        </div>
+
+        <div id="toast" class="toast hidden">
+            <div class="toast-content">
+                <h4 id="toastTitle" class="toast-title"></h4>
+                <p id="toastDescription" class="toast-description"></p>
+            </div>
+            <button id="toastClose" class="toast-close">×</button>
+        </div>
+    </div>
+
+    <script>
+        class MenuUploader {
+            constructor() {
+                this.selectedImage = null;
+                this.previewUrl = null;
+                this.menuItems = [];
+                this.isProcessing = false;
+                
+                this.initializeElements();
+                this.bindEvents();
+            }
+
+            initializeElements() {
+                this.uploadArea = document.getElementById('uploadArea');
+                this.fileInput = document.getElementById('menuUpload');
+                this.previewSection = document.getElementById('previewSection');
+                this.previewImage = document.getElementById('previewImage');
+                this.generateBtn = document.getElementById('generateBtn');
+                this.generateBtnText = document.getElementById('generateBtnText');
+                this.loadingIcon = document.getElementById('loadingIcon');
+                this.resetBtn = document.getElementById('resetBtn');
+                this.processingCard = document.getElementById('processingCard');
+                this.menuSection = document.getElementById('menuSection');
+                this.menuGrid = document.getElementById('menuGrid');
+                this.toast = document.getElementById('toast');
+                this.toastTitle = document.getElementById('toastTitle');
+                this.toastDescription = document.getElementById('toastDescription');
+                this.toastClose = document.getElementById('toastClose');
+            }
+
+            bindEvents() {
+                this.fileInput.addEventListener('change', (e) => this.handleImageSelect(e));
+                this.generateBtn.addEventListener('click', () => this.handleUpload());
+                this.resetBtn.addEventListener('click', () => this.handleReset());
+                this.toastClose.addEventListener('click', () => this.hideToast());
+                
+                this.uploadArea.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    this.uploadArea.style.borderColor = '#fb923c';
+                });
+                
+                this.uploadArea.addEventListener('dragleave', (e) => {
+                    e.preventDefault();
+                    this.uploadArea.style.borderColor = '#d1d5db';
+                });
+                
+                this.uploadArea.addEventListener('drop', (e) => {
+                    e.preventDefault();
+                    this.uploadArea.style.borderColor = '#d1d5db';
+                    const files = e.dataTransfer.files;
+                    if (files.length > 0) {
+                        this.processFile(files[0]);
+                    }
+                });
+            }
+
+            handleImageSelect(event) {
+                const file = event.target.files?.[0];
+                if (file) {
+                    this.processFile(file);
+                }
+            }
+
+            processFile(file) {
+                if (!file.type.startsWith('image/')) {
+                    this.showToast('Invalid file type', 'Please select an image file.', 'error');
+                    return;
+                }
+
+                this.selectedImage = file;
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    this.previewUrl = e.target.result;
+                    this.previewImage.src = this.previewUrl;
+                    this.previewSection.classList.remove('hidden');
+                    this.resetBtn.classList.remove('hidden');
+                    this.generateBtn.disabled = false;
+                };
+                reader.readAsDataURL(file);
+            }
+
+            async handleUpload() {
+                if (!this.selectedImage) {
+                    this.showToast('No image selected', 'Please select a menu image to upload.', 'error');
+                    return;
+                }
+
+                this.setProcessingState(true);
+
+                const formData = new FormData();
+                formData.append("menu_image", this.selectedImage);
+
+                try {
+                    const response = await fetch("/upload", {
+                        method: "POST",
+                        body: formData
+                    });
+
+                    const html = await response.text();
+                    document.open();
+                    document.write(html);
+                    document.close();
+                } catch (error) {
+                    console.error("Upload error:", error);
+                    this.showToast('Upload failed', 'Could not process the image. Please try again.', 'error');
+                } finally {
+                    this.setProcessingState(false);
+                }
+            }
+
+            setProcessingState(processing) {
+                this.isProcessing = processing;
+                
+                if (processing) {
+                    this.generateBtnText.textContent = 'Processing Menu...';
+                    this.loadingIcon.classList.remove('hidden');
+                    this.generateBtn.disabled = true;
+                    this.processingCard.classList.remove('hidden');
+                } else {
+                    this.generateBtnText.textContent = 'Generate Menu';
+                    this.loadingIcon.classList.add('hidden');
+                    this.generateBtn.disabled = false;
+                    this.processingCard.classList.add('hidden');
+                }
+            }
+
+            displayMenuItems() {
+                this.menuGrid.innerHTML = '';
+                
+                this.menuItems.forEach((item, index) => {
+                    const menuItemElement = this.createMenuItemElement(item, index);
+                    this.menuGrid.appendChild(menuItemElement);
+                });
+                
+                this.menuSection.classList.remove('hidden');
+            }
+
+            createMenuItemElement(item, index) {
+                const menuItem = document.createElement('div');
+                menuItem.className = 'menu-item';
+                
+                menuItem.innerHTML = `
+                    <div class="menu-item-image-container">
+                        <img src="${item.img_path}" alt="${item.food}" class="menu-item-image">
+                        <div class="menu-item-price-badge">$${item.price}</div>
+                    </div>
+                    <div class="menu-item-content">
+                        <h3 class="menu-item-name">${item.food}</h3>
+                        <p class="menu-item-description">${item.description}</p>
+                        <div class="menu-item-footer">
+                            <span class="menu-item-category">${item.category}</span>
+                            <span class="menu-item-price">$${item.price}</span>
+                        </div>
+                    </div>
+                `;
+                
+                return menuItem;
+            }
+
+            handleReset() {
+                this.selectedImage = null;
+                this.previewUrl = null;
+                this.menuItems = [];
+                
+                this.fileInput.value = '';
+                this.previewSection.classList.add('hidden');
+                this.resetBtn.classList.add('hidden');
+                this.generateBtn.disabled = true;
+                this.menuSection.classList.add('hidden');
+                this.processingCard.classList.add('hidden');
+            }
+
+            showToast(title, description, type = 'success') {
+                this.toastTitle.textContent = title;
+                this.toastDescription.textContent = description;
+                
+                this.toast.classList.remove('error');
+                if (type === 'error') {
+                    this.toast.classList.add('error');
+                }
+                
+                this.toast.classList.remove('hidden');
+                
+                setTimeout(() => {
+                    this.hideToast();
+                }, 5000);
+            }
+
+            hideToast() {
+                this.toast.classList.add('hidden');
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            new MenuUploader();
+        });
+    </script>
+</body>
+</html>