🍳 FIBO Recipe Visualizer
Transform text recipes into professional step-by-step food photography using FIBO's JSON-controlled image generation.
✨ What It Does
Take any recipe text and automatically generate professional cookbook-quality images for each cooking step. No more amateur food photos - get magazine-ready visuals in minutes!
Example: Input "Chocolate Chip Cookies recipe" → Get 8-9 professional images showing mixing, baking, plating with perfect lighting and composition.
🚀 Quick Start
Option 1: One-Command Start
./start.sh
Option 2: Manual Setup
Backend:
cd backend
pip install -r requirements.txt
python app.py
Frontend:
cd frontend
npm install
npm start
Option 3: Test First
python3 demo.py # Test core functionality
🎯 How It Works
- Input: Paste any recipe text via web interface
- Parse: AI breaks recipe into structured cooking steps
- Generate: FIBO creates professional food images with:
- Perfect camera angles (overhead for mixing, 45° for plating)
- Professional lighting (soft natural, dramatic rim, warm kitchen)
- Cookbook-style composition
- Export: Download individual images or complete recipe guides
💡 Features
- Smart Recipe Parsing: Automatically extracts ingredients and steps
- Professional Photography: FIBO's JSON controls ensure magazine-quality results
- Multiple Step Types: Different image styles for prep, cooking, and plating
- Real-time Generation: Watch your visual recipe come to life
- Export Options: Download images, PDFs, or recipe cards
🛠️ Tech Stack
- Frontend: React + TypeScript with modern UI
- Backend: Python Flask REST API
- AI Parser: Rule-based + LLM fallback for recipe extraction
- Image Generation: Bria FIBO via Hugging Face
- Development: Mock mode for testing without FIBO dependencies
🎨 FIBO Integration
This project showcases FIBO's structured JSON control parameters:
{
"camera_angle": {"elevation": 45, "azimuth": 30},
"field_of_view": 65,
"lighting_setup": {"type": "rim", "intensity": 0.9},
"composition_rule": "thirds",
"style_preset": "professional_photography"
}
Perfect for food photography where consistency and quality matter!
📁 Project Structure
fibo-recipe-visualizer/
├── frontend/ # React app
├── backend/ # Flask API + FIBO integration
├── start.sh # One-command startup
├── demo.py # Test functionality
└── README.md # This file
🔧 FIBO Integration Modes
The Recipe Visualizer supports multiple FIBO modes for different use cases:
🆓 Mock Mode (Default - No Setup Required)
# Ready to use immediately
./start.sh
- Beautiful stock photos from Unsplash
- Perfect for demos and development
- No API keys or dependencies needed
🌐 API Mode (Recommended for Real FIBO)
# Using Bria.ai API (get key from platform.bria.ai)
export BRIA_API_KEY=your_key
export FIBO_MODE=api
./start.sh
# Alternative providers
export FIBO_MODE=api
export FIBO_API_PROVIDER=fal # or 'replicate'
export FAL_API_KEY=your_key # or REPLICATE_API_TOKEN
./start.sh
- Real FIBO-generated professional food photography
- Multiple API providers: Bria.ai, Fal.ai, Replicate
- Pay-per-use, no local setup required
🖥️ Local SDK Mode (Advanced)
# One-time setup (requires GPU + HuggingFace access)
cd fibo-sdk
pip install torch transformers diffusers
huggingface-cli login
# Run with local FIBO
export FIBO_MODE=real
./start.sh
- Local FIBO inference using official SDK
- Requires GPU and HuggingFace model access
- Full control, no API costs after setup
📖 Full FIBO Documentation: See FIBO_INTEGRATION.md for detailed setup instructions
🎬 Demo Flow
- Open http://localhost:3000
- Try the sample recipe or paste your own
- Click "Generate Visual Recipe"
- Watch as professional food images appear for each step
- Export your complete visual recipe guide
Note: Backend runs on port 8000 to avoid conflicts with macOS AirPlay (port 5000)
🏆 Built for Bria FIBO Hackathon 2024
This project demonstrates FIBO's power in a real-world application that could help millions of food content creators upgrade their visual storytelling.
Target Categories:
- Best JSON-Native/Agentic Workflow
- Best New User Experience
- Best Overall Innovation
Ready to turn your kitchen into a professional food photography studio? Let's cook! 👨🍳
Log in or sign up for Devpost to join the conversation.