crisng95/flowboard

Flowboard — open-source infinite canvas for AI product videos. Drag nodes for model, product, scene, video — connect them, click Generate. Auto-prompts write themselves. Runs locally; powered by Google Flow + Claude CLI.

Flowboard – Google Flow 미디어 생성을 위한 로컬 전용 그래프 기반 워크스페이스

개요 – Flowboard는 단일 사용자가 무한 캔버스에서 AI 생성 미디어 파이프라인을 설계할 수 있는 데스크톱 스타일의 웹 앱입니다. 노드는 에셋(캐릭터, 제품), 이미지 구성, 비디오 렌더링을 나타냅니다. 이 앱은 Chrome MV3 확장 프로그램을 통해 Google Flow(Veo 3.1 i2v / GEM_PIX_2)와 통신하며, 시각 인식, 자동 프롬프트 생성 및 계획을 위해 로컬에 설치된 LLM CLI(Claude Code, agy를 통한 Gemini 또는 OpenAI Codex)를 사용합니다. 모든 상태는 로컬 SQLite 데이터베이스에 유지됩니다. 유료 Google Flow 계정 외에는 클라우드 서비스가 전혀 필요하지 않습니다.

존재 이유

이커머스 비디오 제작은 반복 작업이 많으며, 동일한 모델과 제품이 여러 장면에 등장합니다.
Flowboard는 전체 캠페인을 방향성 그래프로 처리하므로 각 참조(캐릭터, 제품)는 한 번 업로드하면 자동으로 재사용됩니다.
자동 프롬프트 기능은 설정된 LLM CLI에서 설명을 가져와 각 다운스트림 노드에 대해 상황을 인식하는 프롬프트를 생성합니다.

핵심 개념 및 워크플로우

개념	역할	사용 방법
참조 노드 (캐릭터, 비주얼 에셋)	단일 이미지와 `aiBrief`(LLM 생성 설명)를 저장하는 앵커.	한 번 업로드하거나 생성하면 다운스트림 노드가 자동으로 브리핑을 읽습니다.
이미지 노드	하나 이상의 참조에서 장면 구성.	참조를 연결하고 Generate를 클릭(또는 Enter 키 누름). 앱은 업스트림 미디어 ID를 Google Flow로 보내고 LLM CLI에 단일 호출로 N개의 포즈가 다른 프롬프트를 합성하도록 요청합니다.
비디오 노드	Veo i2v를 통해 이미지(또는 그 변형)를 짧은 클립으로 변환.	이미지 노드를 연결하고 Static 또는 Dynamic 카메라를 선택한 후 사용할 변형을 체크합니다. 한 번의 Flow `batchexecute` 호출로 선택한 각 변형에 대해 비디오가 생성됩니다.
자동 프롬프트	장면 상황을 인식하는 LLM 기반 프롬프트 생성.	LLM이 업스트림 `aiBrief`를 읽고 동작 어휘(스튜디오, 거리, 카페, 야외)를 결정하여 각 변형에 대해 패션 에디토리얼 스타일의 프롬프트를 반환합니다.

아키텍처 개요

Chrome MV3 extension  ←→  FastAPI agent (127.0.0.1:8434)
   │                     │   ├─ SQLite storage (boards, nodes, assets)
   │                     │   └─ Worker queue that shells out to the LLM CLI
   ▼                     ▼
React‑Flow canvas (Vite, TS)   ←→   Google Flow (batchexecute RPC)

프론트엔드 – React 18 + React‑Flow 12가 무한 캔버스 UI를 렌더링합니다.
에이전트 – FastAPI 0.115가 로컬에서 실행되어 그래프를 저장하고 확장 프로그램을 통해 Google Flow로의 모든 호출을 중재합니다.
확장 프로그램 – flow.google.com에서 로드됩니다. 페이지의 세션 쿠키, 토큰 및 1회용 reCAPTCHA로 각 요청에 서명하는 콘텐츠 스크립트를 주입하고 WebSocket을 통해 원시 페이로드를 에이전트로 전달합니다.
LLM CLI – 지원되는 CLI(Claude Code, Gemini agy, OpenAI Codex) 중 하나가 시스템 PATH에 있어야 합니다. 에이전트는 시각 인식(이미지 설명) 및 자동 프롬프트 플래너를 위해 이를 호출합니다.

시작하기 (빠른 요약)

전제 조건 – Python 3.11+, Node 20+, Chrome, 유료 Google Flow Pro 또는 Ultra 플랜, 그리고 LLM CLI 중 하나 설치.
복제 및 설치 – make install (또는 uv/venv + npm install 사용).
Chrome 확장 프로그램 로드 – chrome://extensions/ → Load unpacked → extension/.
로그인된 Flow 탭 열기 – 확장 프로그램 배지가 녹색으로 바뀌면 에이전트와 통신할 수 있습니다.
설정 – .env.example을 .env로 복사하고 FLOWBOARD_FLOW_PROJECT_ID에 UI에서 생성한 Flow 프로젝트의 UUID를 설정합니다.
실행 – make agent(FastAPI)와 make frontend(Vite)를 실행합니다. http://localhost:5173을 엽니다.
보드 생성 – 캐릭터 및 비주얼 에셋 노드를 추가하고 이미지 노드에 연결한 다음 비디오 노드에 연결합니다. 각 단계에서 Generate를 클릭하면 LLM CLI가 프롬프트를 구축하고 확장 프로그램이 요청을 Google Flow로 전달하며 결과가 캔버스에 나타납니다.

주요 기능

무한 캔버스 – 제한 없는 팬/줌; 모든 노드는 드래그 가능합니다.
변형 배치 – 한 번의 Flow 호출로 N개의 이미지 변형 또는 N개의 비디오 요청.
재사용 가능한 에셋 – 한 번 업로드한 캐릭터나 제품은 수십 개의 장면에 공급 가능합니다.
로컬 전용 저장소 – 모든 보드, 미디어 파일 및 기록은 storage/ 아래의 SQLite DB에 보관됩니다.
공급자 독립적 LLM – 설정 UI를 통해 Claude, Gemini, Codex를 교체 가능; 앱이 클라우드 LLM 엔드포인트에 직접 연결되지 않습니다.
테스트 – 517개의 pytest 스위트 통과(README 기준).

제한 사항

Chrome 필수 – 확장 프로그램은 라이브 flow.google.com 탭에서 실행되어야 합니다; 헤드리스 작업은 지원되지 않습니다.
유료 Flow 플랜 – Veo 3.1 i2v가 제한되어 있으므로 무료 또는 체험판 계정으로는 비디오를 생성할 수 없습니다.
단일 사용자, 로컬 전용 – 다중 사용자 협업이나 클라우드 동기화는 없습니다.

라이선스

MIT – 저장소의 LICENSE 파일을 참조하십시오.