A visual workflow builder for AI-powered ad generation. Create image ads through a node-based interface with social media integration and real-time debugging.
- Drag & drop nodes to build generation pipelines
- 6 node types: Text Input, Image Input, Social Media, Prompt Template, Image Model, Output
- Real-time connection validation between nodes
- Auto-save workflows to database
- 3 AI models: FLUX Schnell, SDXL Lightning, Nano Banana (via FAL AI)
- Image-to-image: automatic routing to edit models when image input connected
- Configurable parameters: guidance scale, steps, seed
- Multiple outputs: generate 1-4 images per run
- Aspect ratios: 1:1, 4:5, 9:16
- Reddit integration with fallback mechanism
- Fetches trending posts and extracts keywords
- Inject trends into prompts with
{{keywords}}variable
- Breakpoints on any node
- Step-through execution — advance one node at a time
- Node inspector — view input/output data for each node
- Real-time status updates via Supabase Realtime
- User authentication via Supabase Auth (Google OAuth)
- Workflow persistence with RLS policies
- Generation history — view past runs with prompts, models, parameters, and output images
┌─────────────────────────────────────────────────────────────┐
│ Frontend │
│ React + TypeScript + React Flow + TanStack Query + Zustand │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Backend │
│ FastAPI + Async Python + Pydantic │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Database │
│ Supabase (PostgreSQL + Auth + Storage + Realtime) │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ External Services │
│ FAL AI (Image Gen) + Reddit API + Apify │
└─────────────────────────────────────────────────────────────┘
| Table | Purpose |
|---|---|
users |
User profiles (synced from Supabase Auth) |
workflows |
Saved workflows per user |
nodes |
Node definitions with position, config, breakpoints |
edges |
Connections between nodes |
executions |
Workflow run history with status tracking |
node_executions |
Per-node execution state (input/output data) |
generations |
Generated images with prompts and parameters |
- Node.js 18+
- Python 3.11+
- Supabase project
- FAL AI API key
cd backend
python -m venv venv && source venv/bin/activate
pip install -r requirements.txt
# Create .env
cp .env.example .env
# Fill in: SUPABASE_URL, SUPABASE_SECRET_API_KEY, FAL_KEY
uvicorn app.main:app --reloadcd frontend
pnpm install
pnpm devRun backend/supabase_schema.sql in Supabase SQL Editor.
SUPABASE_URL=https://xxx.supabase.co
SUPABASE_PUBLISHABLE_KEY=eyJ...
SUPABASE_SECRET_API_KEY=eyJ...
FAL_KEY=fal_...
APIFY_API_KEY=apify_api_xxx # Optional, for Reddit fallback
VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=eyJ...
VITE_BACKEND_URL=http://localhost:8000
├── backend/
│ ├── app/
│ │ ├── api/
│ │ │ ├── routes/ # FastAPI endpoints
│ │ │ └── background.py # Background task utilities
│ │ ├── models/ # Pydantic schemas & enums
│ │ ├── services/
│ │ │ ├── fal/ # FAL AI image generation
│ │ │ ├── node_executors/ # Per-node-type execution logic
│ │ │ ├── workflow_engine/ # Orchestration & execution
│ │ │ ├── reddit/ # Social media integration
│ │ │ └── supabase/ # Database & Storage operations
│ │ ├── config/ # Settings & environment
│ │ └── utils/ # Topological sort, cost calc
│ └── supabase_schema.sql
│
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ ├── nodes/ # React Flow node components
│ │ │ ├── config-panels/ # Node configuration UI
│ │ │ ├── canvas/ # Workflow canvas & toolbar
│ │ │ └── debug/ # Node inspector
│ │ ├── lib/
│ │ │ ├── mutations/ # TanStack Query mutations
│ │ │ ├── queries/ # TanStack Query queries
│ │ │ └── supabase/ # Supabase client & storage
│ │ ├── stores/ # Zustand state management
│ │ └── pages/ # Route pages
│ └── package.json
Battle-tested library for node-based UIs with built-in drag/drop, zoom, and connection handling.
Minimal boilerplate, great TypeScript support, perfect for medium-sized apps.
Multi-model support (FLUX, SDXL), simple API, pay-per-use pricing.
All-in-one solution: Postgres, Auth, Realtime subscriptions, RLS for security.
Nodes are topologically sorted before execution. Each node's output feeds into connected downstream nodes. Breakpoints pause execution and allow step-through debugging.
These are intentional scope decisions for a take-home assessment.
| Limitation | Production Solution |
|---|---|
| No tests | Add pytest for backend, Vitest for frontend |
| No rate limiting | Add Redis-backed rate limiting middleware |
| In-process execution | Use Celery + Redis for background jobs |
| Single social platform | Add Meta/X/TikTok integrations |
| No workflow versioning | Snapshot workflow state per execution |
MIT