🍳 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

  1. Input: Paste any recipe text via web interface
  2. Parse: AI breaks recipe into structured cooking steps
  3. 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
  4. 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

  1. Open http://localhost:3000
  2. Try the sample recipe or paste your own
  3. Click "Generate Visual Recipe"
  4. Watch as professional food images appear for each step
  5. 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! 👨‍🍳

Share this project:

Updates