README.md

metadata

title: Food Manu Frontend
emoji: 🏆
colorFrom: red
colorTo: gray
sdk: docker
pinned: false
license: mit

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

🍽️ Menu Extractor & Food Image Generator

An AI-powered web application that extracts menu items from restaurant menu images and generates beautiful food images for each item using advanced machine learning models.

🌟 Features

• 📸 Menu Image Upload: Upload menu images or capture them directly using your camera
• 🤖 AI Menu Extraction: Uses Google's Gemini AI to extract menu items, descriptions, and prices
• 🎨 Food Image Generation: Generates high-quality food images using Stable Diffusion
• 💻 Beautiful Frontend: Modern, responsive web interface with live preview
• 📱 Mobile Friendly: Works seamlessly on desktop and mobile devices
• 🔄 Code Generation: Automatically generates clean HTML code for the extracted menu

🚀 Demo

Try the live demo: Menu Extractor & Food Generator

🛠️ Technology Stack

• Backend: Flask (Python)
• AI Models:
  • Google Gemini 1.5 Flash (Menu extraction)
  • Stable Diffusion v1.5 (Image generation)
• Frontend: HTML, CSS, JavaScript
• Image Processing: Pillow (PIL)
• Deployment: Hugging Face Spaces

📋 Requirements

• Python 3.9+
• CUDA-compatible GPU (recommended for faster image generation)
• Google Gemini API key

🔧 Installation

1. Clone the repository:

git clone https://github.com/your-username/menu-extractor.git
cd menu-extractor

2. Install dependencies:

pip install -r requirements.txt

3. Set up environment variables: Create a .env file and add your Gemini API key:

GEMINI_API_KEY=your_gemini_api_key_here

4. Run the application:

python app.py

5. Open your browser and navigate to http://localhost:7860

🌐 Deployment on Hugging Face Spaces

1. Create a new Space on Hugging Face Spaces
2. Choose "Docker" as the SDK
3. Upload the following files:
   • app.py
   • templates/index.html
   • Dockerfile
   • requirements.txt
   • README.md
4. Add your GEMINI_API_KEY in the Space settings under "Variables and secrets"
5. Your app will be automatically deployed!

📖 How to Use

1. Upload Image: Choose to upload a menu image from your device or take a photo using your camera
2. Extract Menu: Click "Extract Menu Items" to process the image with AI
3. View Results: See the beautiful menu layout with generated food images
4. Get Code: Switch to code view to copy the generated HTML for your own use

🎯 Use Cases

• Restaurant Owners: Quickly digitize physical menus
• Web Developers: Generate menu websites for restaurant clients
• Food Bloggers: Create visual menu content
• Menu Design: Prototype digital menu layouts

🔑 API Keys Setup

Google Gemini API

1. Visit Google AI Studio
2. Create a new API key
3. Add it to your environment variables as GEMINI_API_KEY

⚡ Performance Notes

• CPU Mode: Image generation will be slower but still functional
• GPU Mode: Significantly faster image generation with CUDA-compatible GPU
• Memory: Requires ~4GB RAM for optimal performance

🐛 Troubleshooting

Common Issues:

1. Model Loading Error: Ensure you have sufficient disk space and memory
2. API Key Error: Verify your Gemini API key is correctly set
3. Image Processing Error: Check that uploaded images are in supported formats (JPG, PNG)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🙏 Acknowledgments

• Google Gemini for menu extraction
• Stable Diffusion for food image generation
• Hugging Face for hosting and deployment
• Flask for the web framework

📞 Support

If you encounter any issues or have questions, please open an issue on GitHub.

---

Made with ❤️ by Your Name