Skip to content

magicwand1993/FlowBoard

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

183 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

FlowBoard

Direct Your Video Frame by Frame

FlowBoard.Demo.mp4

AI-powered video storyboarding that transforms sketches into context-aware video clips. Draw, prompt, generateβ€”infinitely.


✨ Features

Feature Description
🎨 Interactive Canvas Draw instructions directly on frames using Tldraw
πŸ€– AI Video Generation Powered by Google Vertex AI (Veo 3.1 & Gemini 2.5)
πŸ”— Frame-by-Frame Workflow Sequential frames connected by arrows build your story
⚑ Image Enhancement AI-powered frame improvement on demand
🎬 Video Merging Combine clips into seamless sequences

πŸš€ Local Setup

Prerequisites

  • Python 3.11+ & Node.js 18+
  • Redis (local or hosted)
  • Google Cloud Project (Vertex AI enabled)
  • Supabase project

Backend Setup

cd backend
pip install -r requirements.txt

.env Configuration:

# Google Cloud / Vertex AI
GOOGLE_CLOUD_PROJECT=your-gcp-project-id
GOOGLE_CLOUD_LOCATION=us-central1
GOOGLE_GENAI_USE_VERTEXAI=true
GOOGLE_CLOUD_BUCKET_NAME=your-gcs-bucket-name

# Redis (job queue)
REDIS_URL=redis://default:password@localhost:6379

# Supabase (auth & database)
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SECRET_KEY=your-service-role-key

Setup Checklist:

  • βœ… Enable Vertex AI API + create GCS bucket
  • βœ… Auth: GOOGLE_APPLICATION_CREDENTIALS or gcloud auth application-default login
  • βœ… Supabase: Create users table with credits column (see backend/scripts/db)
  • βœ… Enable auth providers (Google/GitHub) in Supabase dashboard

Frontend Setup

cd frontend
npm install

.env Configuration:

VITE_BACKEND_URL=http://localhost:8000
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_PUBLIC_KEY=your-anon-public-key  # NOT service role key

Run

Backend: python main.py (β†’ http://localhost:8000)
Frontend: npm run dev (β†’ http://localhost:5173)


πŸ“– Usage

  1. Create Frame β†’ Start with 16:9 frame
  2. Draw/Annotate β†’ Sketch motion instructions
  3. Add Prompt β†’ Describe your vision
  4. Generate β†’ Click ✨ to create next frame
  5. Chain Frames β†’ Link frames with arrows for sequences
  6. Merge Videos β†’ Combine clips into final output

About

πŸ‘¨β€πŸŽ¨ The ergonomic way to storyboard. Turns sketches and annotations into videos by drawing on a canvas.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 78.6%
  • Python 17.6%
  • CSS 3.2%
  • Other 0.6%