Getting started

TongFlow はあなた自身のマシンで Docker コンテナとして動かすことも、pnpm が入っていれば Next.js 開発サーバーとして起動することもできます。どちらか選んでください。Node 環境がない方には Docker を推奨します。

必要なもの

  • Docker（Compose v2 を含む）
  • Modal アカウントとトークン —— modal.com でサインアップ。無料枠（月 USD 30）には意味のある H100 時間が含まれ、TongFlow の GPU タスクのほとんどをカバーします
  • LLM API キー を 1 つ —— OpenRouter / Gemini / OpenAI / DeepSeek から選択。OpenRouter には無料ルーティングティアがあります

任意：何か不明な点があったら #tongflow Discord へ。

1. クローン

git clone https://github.com/tong-io/tongflow
cd tongflow

2. 環境変数の設定

サンプルをコピーして編集：

cp .env.example .env

必須変数：

変数用途
MODAL_TOKEN_IDModal ワーカー認証
MODAL_TOKEN_SECRETModal ワーカー認証
以下のいずれか 1 つ：OPENROUTER_API_KEY / GEMINI_API_KEY（または GOOGLE_API_KEY）/ OPENAI_API_KEY / DEEPSEEK_API_KEY”Generate text” ノードと他の LLM 経由の変換

任意：

  • OPENROUTER_FREE_MODEL — 特定の OpenRouter 無料ルートを固定
  • OPENAI_CHAT_MODEL — 未設定時は gpt-4o-mini
  • NEXT_PUBLIC_FILE_BASE_URL — CDN 経由でファイルを配信する場合のベース URL

3. Modal の認可（初回のみ）

トークンを ~/.modal.toml に書き込みます。初回のみ実行：

pnpm modal:setup

pnpm がない場合、ステップ 4 で起動した Docker コンテナ内で同等の modal token set を実行できます。

4. 起動

オプション A — Docker Compose（推奨）

docker compose up --build

http://localhost:3000 を開きます。自動的に /workspace に遷移します。

データは Docker ボリュームに永続化されます：SQLite は data/tongflow.db、アップロードは data/uploads/。

オプション B — GHCR の事前ビルドイメージ

CI は main への push のたびに ghcr.io/tong-io/tongflow を発行し、リリースタグ（例：v0.1.0）でも公開します。

docker pull ghcr.io/tong-io/tongflow:latest
docker run --rm -p 3000:3000 --env-file .env -v tongflow_data:/app/data ghcr.io/tong-io/tongflow:latest

プライベートフォークの場合は read:packages スコープのトークンで docker login ghcr.io が必要なことがあります。

オプション C — pnpm ローカル開発

Node.js 20 以降が必要です。

pnpm install
pnpm dev

同じ URL：http://localhost:3000。

5. 最初のワークフロー

/workspace が表示されたら：

  1. デフォルトで Create モード に入ります（Sparkles アイコン — ワークフローモード 参照）
  2. 下部の Smart Island に 7 つの Add アイコンが並びます：3D / ドキュメント / 画像 / テキスト / 動画 / 音声 / リンク
  3. テキストアイコン（Type 字形）をクリックしてテキストノードを置き、プロンプトを入力：「図書館の中の猫の水彩画ポートレート」
  4. テキストノードの出力ハンドルを空のキャンバスにドラッグ → 画像生成 を選ぶ → 接続済みの画像ノードが現れます
  5. Execute モードに切り替え（Sparkles → Play）、Smart Island の Play ボタンを押します
  6. タスクがあなたの Modal アカウント経由で実行され、結果が画像ノードに表示されます

これでループの全体です。ここから別の変換（画像→動画、画像→3D、画像アップスケール）をつなげたり、組み合わせノード（リップシンク等）に分岐したり、ワークフローを保存できます。

各データの保存場所

  • ワークフロー — data/tongflow.db に保存。左サイドバー最初の Workflow ボタンから開く
  • 素材 / Portfolio — アップロードしたファイルは Portfolio ダイアログに（左サイドバー 3 番目の FolderOpen アイコン、Smart Island ではありません）
  • タスク履歴 — Task パネルに（左サイドバー 2 番目の Zap アイコン）

次に読む