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生成メディアパイプラインを設計できるデスクトップスタイルのWebアプリです。ノードはアセット（キャラクター、製品）、画像構成、動画レンダリングを表します。このアプリはChrome MV3拡張機能を介してGoogle Flow (Veo 3.1 i2v / GEM_PIX_2) と通信し、視覚認識、自動プロンプト生成、計画のためにローカルインストールされたLLM CLI (Claude Code、agy経由のGemini、またはOpenAI Codex) を使用します。すべての状態はローカルのSQLiteデータベースに保持されます。有料のGoogle Flowアカウント以外、クラウドサービスは一切不要です。

存在理由

Eコマースの動画制作は反復作業が多く、同じモデルや製品が多くのシーンに登場します。
Flowboardはキャンペーン全体を有向グラフとして扱うため、各リファレンス（キャラクター、製品）は一度アップロードすれば自動的に再利用されます。
自動プロンプト機能は、設定されたLLM CLIから説明を取得し、各ダウンストリームノードに対してコンテキストを考慮したプロンプトを生成します。

コアコンセプトとワークフロー

コンセプト	役割	使用方法
参照ノード (キャラクター、ビジュアルアセット)	単一の画像と `aiBrief` (LLM生成の説明) を保持するアンカー。	一度アップロードまたは生成すれば、ダウンストリームノードが自動的にブリーフを読み取ります。
画像ノード	1つ以上の参照からシーンを構成。	参照を接続し、Generateをクリック（またはEnterキーを押下）。アプリはアップストリームのメディアIDをGoogle Flowに送信し、LLM CLIに単一の呼び出しでN個のポーズの異なるプロンプトを合成するよう要求します。
動画ノード	Veo i2vを介して画像（またはそのバリエーション）を短いクリップに変換。	画像ノードを接続し、StaticまたはDynamicカメラを選択し、使用するバリエーションにチェックを入れます。1回の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 で読み込まれます。ページのセッションCookie、トークン、および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に転送し、結果がキャンバスに表示されます。

主な機能

無限キャンバス – 制限のないパン/ズーム。すべてのノードはドラッグ可能です。
バリエーションバッチ – 1回のFlow呼び出しでN個の画像バリエーションまたはN個の動画をリクエスト。
再利用可能なアセット – 一度アップロードしたキャラクターや製品は、数十のシーンに供給可能です。
ローカル専用ストレージ – すべてのボード、メディアファイル、履歴は storage/ 下のSQLite DBに保持されます。
プロバイダー非依存のLLM – 設定UIを介してClaude、Gemini、Codexを切り替え可能。アプリがクラウドLLMエンドポイントに直接接続することはありません。
テスト – 517件のpytestスイートが通過済み（README時点）。

推奨ユーザー

すでに Google Flow Pro/Ultra サブスクリプションを所有しており、反復可能でグラフ駆動型のワークフローを求めるEコマースやファッション動画広告のクリエイター。
ローカル専用データ（アセットのクラウドストレージなし）を好みつつ、GoogleのVeo画像生成モデルのパワーを必要とするチーム。
Python、Node、Chrome拡張機能に精通しており、パイプラインを拡張（カスタムLLMプロンプトや追加ノードタイプの追加など）したい開発者。

制限事項

Chrome必須 – 拡張機能はライブの flow.google.com タブで実行する必要があります。ヘッドレス操作はサポートされていません。
有料Flowプラン – Veo 3.1 i2vが制限されているため、無料またはトライアルアカウントでは動画を生成できません。
シングルユーザー、ローカル専用 – マルチユーザーコラボレーションやクラウド同期はありません。

ライセンス

MIT – リポジトリ内の LICENSE ファイルを参照してください。