| |

TypeScript Node.js Docker Electron

Tech Stack Icons

> 🚀 **オールインワンのショートドラマエンジン**：テキストからキャラクター、絵コンテから動画まで、ゼロハードルで全工程をAI化、制作効率10倍以上！

--- # 🌐 多言語サポート Toonflow は以下の言語のインターフェースに対応しています： | 言語 | Language | | ---------- | --------------------- | | 简体中文 | Chinese (Simplified) | | 繁體中文 | Chinese (Traditional) | | English | English | | ไทย | Thai | | Tiếng Việt | Vietnamese | | 日本語 | Japanese | | Русский | Russian | > 💡 他の言語も準備中です。翻訳のご協力をお待ちしています！ --- # 🌟 主な機能 Toonflow はショートドラマ制作のためのAIワークベンチです。「企画→脚本→絵コンテ→映像出力」の完全なクローズドループを構築し、ローカライズ・プログラマブル・持続的イテレーションが可能な制作フローをサポートします。 - ✅ **無限キャンバス制作ワークベンチ** 無限キャンバス状に脚本、キャラクター、絵コンテ、素材、動画ノードを整理。自由な配置、巻き戻し、並行制作が可能で、線形ステップに制限されません。 - ✅ **3層エージェント協調システム** 意思決定層、実行層、監督層が連携し、タスク分解、コンテンツ生成、品質レビュー、修正フィードバックをカバー。安定性と出力の一貫性を向上します。 - ✅ **永続化エージェントメモリ** ローカルONNXベクトル検索によるセッションを跨ぐメモリシステム。短期メッセージ、長期要約、意味検索をサポートし、複数ラウンドの創作の連続性を確保します。 - ✅ **プログラマブルベンダーシステム** 設定センターでベンダーのTypeScriptロジックを直接記述し、即座に反映。ソースコードの変更や再起動は不要で、プライベート化や複数モデルの統合に便利です。 - ✅ **章イベントグラフ駆動の翻案** 原作の各章のイベントを自動抽出して構造化保存。脚本翻案はイベントグラフに基づいてコンテキストを正確に呼び出し、長文の情報損失を低減します。 - ✅ **Skill ファイル化構成** ScriptAgent と ProductionAgent の核心プロンプトをMarkdown Skillファイルとして外部化。オンライン編集と迅速なチューニングが可能です。 --- # 📦 応用シーン - ショート動画コンテンツ制作 - 小説の映像化実験 - AI文学翻案ツール - 脚本開発とラピッドプロトタイピング - 動画素材生成 --- # 🔰 使い方ガイド ## クイックスタート 1. アプリを起動しログイン（デフォルトアカウント：`admin` / `admin123`）。 2. 設定センターでモデルベンダーを設定（テキスト/画像/動画モデル）。 3. 新規プロジェクトを作成し原作をインポート、章イベント抽出を実行。 4. ScriptAgent に入り、ストーリー骨格、翻案戦略、構造化脚本を生成。 5. ProductionAgent に切り替え、無限キャンバス上で絵コンテ、素材、動画ノードを整理。 6. 絵コンテ画像をノード化して微調整後、ワークベンチに戻し動画結合とエクスポートを完了。 ## 📺 ビデオチュートリアル https://www.bilibili.com/video/BV1oXD7BqEqJ [![Toonflow 12分でわかるAI動画クイックスタート](./videoCover.jpg)](https://www.bilibili.com/video/BV1oXD7BqEqJ) **Toonflow 12分でわかるAI動画クイックスタート** 👉 [クリックして視聴](https://www.bilibili.com/video/BV1oXD7BqEqJ) 📱 スマホでWeChatスキャンして視聴 WeChatスキャンで視聴

--- # 📸 デモスクリーンショットと動画以下のスクリーンショットと動画は、Toonflow を使って制作したAIショートドラマデモです。全体で約2時間で完成し、脚本生成、絵コンテ制作、編集を含みます。

## 🎬 デモ動画

https://github.com/user-attachments/assets/2d9fddac-dfdf-4640-b030-b09d7f7287e9 再生できない場合は、[動画をダウンロード](./screenshot/demo.mp4) してください。

## デモ情報 | 項目 | 詳細 | | :--- | :--- | | 制作期間 | 約2時間 | | 動画モデル | Seedance 2.0 | | 画像モデル | GPT Image 2 | | 言語モデル | Claude Opus 4.6 | | 完成動画長 | 約2分（元素材3分、不要部分を約1分カット） | ## コスト明細 | モデル種類 | 費用 | | :--- | :--- | | 言語モデル | 約 ¥10 | | 動画モデル（全量生成） | 約 ¥120 | | 画像モデル | ¥1未満 | | **合計** | **約 ¥130** | > **声明**：デモの元解像度は1080×1882、公開版は480pに圧縮しています。著作権に関する問題があれば、お問い合わせいただければ削除対応いたします。 --- # 🚀 インストール ## 前提条件本ソフトウェアをインストールして使用する前に、以下を準備してください： - ✅ 大規模言語モデルAIサービスのAPIエンドポイント - ✅ Sora または豆包動画サービスのAPIエンドポイント - ✅ Nano Banana Pro 画像生成モデルサービスのエンドポイント ## ローカルインストール ### 1. ダウンロードとインストール | オペレーティングシステム | GitHub | 説明 | | :------: | :----------------------------------------------------------- | :--------------------- | | Windows | [Release](https://github.com/HBAI-Ltd/Toonflow-app/releases) | 公式リリースインストーラ | | Linux | [Release](https://github.com/HBAI-Ltd/Toonflow-app/releases) | 公式リリースインストーラ | | macOS | [Release](https://github.com/HBAI-Ltd/Toonflow-app/releases) | 公式リリースインストーラ | > [!CAUTION] > MacOS システムの場合は、設定→プライバシーとセキュリティでセキュリティ設定を行ってください。証明書の問題で正常に開けない場合があります。 > > 参考：知乎ドキュメント：[https://www.zhihu.com/question/433389276](https://www.zhihu.com/question/433389276) > Gitee OS 環境の制限および Release ファイルのアップロードサイズ制限のため、Gitee Release のダウンロードリンクは現在提供しておりません。 ### 2. サービスの起動インストール完了後、プログラムを起動してサービスをご利用いただけます。 > ⚠️ **初回ログイン** > アカウント：`admin` > パスワード：`admin123` ## Docker デプロイ ### 前提条件 - [Docker](https://docs.docker.com/get-docker/) がインストール済み（バージョン20.10以上） ### 方法1：オンラインデプロイ準備中です。当面はローカルビルドをご利用ください。 ### 方法2：ローカルビルドローカルのソースコードを使って直接ビルドします。開発者やリポジトリをクローン済みのユーザー向けです。事前にgitをインストールしておく必要があります： ```shell # プロジェクトをクローン（既にある場合はスキップ） git clone https://github.com/HBAI-Ltd/Toonflow-app.git cd Toonflow-app # docker-compose でローカルビルド＆起動 yarn docker:local # または手動ビルド docker build -t toonflow . docker run -d -p <ローカルポート>:10588 -v <ローカルデータパス>:/app/data toonflow # 該当ポートの /index.html にアクセス # 例：http://localhost:10588/index.html ``` ### サービスポート説明 | ポート | 用途 | デプロイマッピング | | -------- | ------------- | ------------------ | | `10588` | ソフトウェアUI | `10588:10588` | **環境変数の説明：** | 変数 | 説明 | | ---------- | -------------------------------- | | `NODE_ENV` | 実行環境。`prod`は本番環境 | | `PORT` | サービス待受ポート（デフォルト10588） | | `OSSURL` | ファイルストレージアクセスURL（静的リソース用） | --- ## クラウドデプロイ ### 一、サーバー環境要件 - **OS**：Ubuntu 20.04+ / CentOS 7+ - **Node.js**：24.x（推奨、最低23.11.1以上） - **メモリ**：2GB以上 ### 二、サーバーデプロイ #### 1. 環境インストール ```bash # Node.js のインストール curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source ~/.bashrc nvm install 24 # Yarn と PM2 のインストール npm install -g yarn pm2 ``` #### 2. プロジェクトのデプロイ **GitHub からクローン：** ```bash cd /opt git clone https://github.com/HBAI-Ltd/Toonflow-app.git cd Toonflow-app yarn install yarn build ``` **Gitee からクローン（国内ユーザー向け）：** ```bash cd /opt git clone https://gitee.com/HBAI-Ltd/Toonflow-app.git cd Toonflow-app yarn install yarn build ``` #### 3. PM2 の設定 `pm2.json` ファイルを作成： ```json { "name": "toonflow-app", "script": "data/serve/app.js", "instances": "max", "exec_mode": "cluster", "env": { "NODE_ENV": "prod", "PORT": 10588, "OSSURL": "http://127.0.0.1:10588/" } } ``` **環境変数の説明：** | 変数 | 説明 | | ---------- | -------------------------------- | | `NODE_ENV` | 実行環境。`prod`は本番環境 | | `PORT` | サービス待受ポート | | `OSSURL` | ファイルストレージアクセスURL（静的リソース用） | --- #### 4. サービスの起動 ```bash pm2 start pm2.json pm2 startup pm2 save ``` #### 5. よく使うコマンド ```bash pm2 list # プロセス一覧 pm2 logs toonflow-app # ログ表示 pm2 restart all # サービス再起動 pm2 monit # モニタリングパネル ``` > ⚠️ **初回ログイン** > アカウント：`admin` > パスワード：`admin123` #### 6. フロントエンドのデプロイフロントエンドを個別にデプロイまたはカスタマイズする場合は、フロントエンドリポジトリを参照してください： - **GitHub**：[Toonflow-web](https://github.com/HBAI-Ltd/Toonflow-web) - **Gitee**：[Toonflow-web](https://gitee.com/HBAI-Ltd/Toonflow-web) > 💡 **説明**：本リポジトリにはコンパイル済みのフロントエンドリソースが組み込まれているため、一般ユーザーはフロントエンドを個別にデプロイする必要はありません。フロントエンドリポジトリは二次開発を行う開発者向けです。 --- # 🔧 開発フローガイド > [!CAUTION] > 🚧 **PR 提出ルール** 🚧 > > ⛔ `master` ブランチへのPRは受け付けていません。✅ `develop` ブランチにPRを提出してください。 > > 開発者の皆様のToonflowへの共同参加を歓迎します。参加ご希望の方は、交流グループ内で主催者ACTまでご連絡ください。 ## 🛠️ 技術スタック | カテゴリ | 技術 | | ------------ | ----------------------------------------------------------------------------------------- | | ランタイム | Node.js 23.11.1+ | | 言語 | TypeScript 5.x | | バックエンド | Express 5 | | データベース | SQLite（better-sqlite3 / knex） | | AI統合 | Vercel AI SDK（OpenAI / Anthropic / Google / DeepSeek / 智谱 / MiniMax / 通义千问 / xAI） | | ローカル推論 | @huggingface/transformers（ONNX） | | リアルタイム通信 | Socket.IO | | デスクトップクライアント | Electron 40 | | 画像処理 | Sharp | | コンテナ化 | Docker | ## 開発環境の準備 - **Node.js**：バージョン23.11.1以上 - **Yarn**：プロジェクトのパッケージマネージャーとして推奨 ## プロジェクトのクイックスタート 1. **プロジェクトのクローン** **GitHub からクローン：** ```bash git clone https://github.com/HBAI-Ltd/Toonflow-app.git cd Toonflow-app ``` **Gitee からクローン（国内ユーザー向け）：** ```bash git clone https://gitee.com/HBAI-Ltd/Toonflow-app.git cd Toonflow-app ``` 2. **依存関係のインストール** プロジェクトルートで以下のコマンドを実行して依存関係をインストールしてください： ```bash yarn install ``` 3. **開発環境の起動** 本プロジェクトは **バックエンドAPIサービス** と **フロントエンドページ** の2つの部分からなります。必要に応じて起動方法を選択してください： - **方法1：バックエンドサービスのみ起動** ```bash yarn dev ``` > ⚠️ このコマンドはバックエンドAPIサービスのみ起動（ポート10588）し、**フロントエンドページは含みません**。`http://localhost:10588` に直接アクセスするとAPIインターフェースのみ呼び出せ、完全なWebインターフェースは表示されません。フロントエンドページも使用する場合は、フロントエンドプロジェクトを別途起動するか、下記のGUIモードを使用してください。 - **方法2：Electron デスクトップクライアントの起動** ```bash yarn dev:gui ``` > このコマンドはバックエンドサービスとElectronデスクトップウィンドウを同時に起動します。組み込みのフロントエンドページが含まれており、追加設定なしで即座に使用できます。全機能を完全に体験したい開発者に適しています。 - **方法3：本番モードでの起動** ```bash yarn start ``` > 本番モードでコンパイル済みのサービスを直接実行します（事前に `yarn build` が必要です）。 4. **プロジェクトのパッケージング** - TypeScriptファイルのコンパイルと生成： ```bash yarn build ``` - Windows プラットフォーム用実行可能プログラムのパッケージング： ```bash yarn dist:win ``` - Mac プラットフォーム用実行可能プログラムのパッケージング： ```bash yarn dist:mac ``` - Linux プラットフォーム用実行可能プログラムのパッケージング： ```bash yarn dist:linux ``` 5. **コード品質チェック** - グローバルな構文と規約のチェック： ```bash yarn lint ``` 6. **AI デバッグパネル（オプション）** AI SDKの可視化デバッグツールを起動し、AI呼び出しをデバッグしやすくします： ```bash yarn debug:ai ``` ## フロントエンド開発フロントエンドインターフェースを変更する場合は、フロントエンドリポジトリで開発を行ってください： - **GitHub**：[Toonflow-web](https://github.com/HBAI-Ltd/Toonflow-web) - **Gitee**：[Toonflow-web](https://gitee.com/HBAI-Ltd/Toonflow-web) フロントエンドをビルド後、`dist` ディレクトリの内容を本プロジェクトの `data/web` ディレクトリにコピーすれば統合完了です。 ## プロジェクト構造 ``` 📂 build/ # ビルド成果物 📂 data/ # ランタイムデータ │ ├─ 📂 models/ # ローカル推論モデル（ONNX） │ ├─ 📂 oss/ # オブジェクトストレージ（素材/キャラクター/シーン） │ ├─ 📂 serve/ # 本番環境エントリ │ ├─ 📂 skills/ # Agent スキルプロンプト │ └─ 📂 web/ # フロントエンドビルド成果物（組み込み） 📂 docs/ # ドキュメントリソース 📂 env/ # 環境設定 📂 scripts/ # ビルドと補助スクリプト 📂 src/ ├─ 📂 agents/ # AI Agent モジュール │ ├─ 📂 productionAgent/ # プロダクション Agent │ └─ 📂 scriptAgent/ # 脚本 Agent ├─ 📂 lib/ # 共通ライブラリ（DB初期化、レスポンスフォーマット） ├─ 📂 middleware/ # ミドルウェア ├─ 📂 routes/ # ルートモジュール │ ├─ 📂 agents/ # Agent メモリ管理 │ ├─ 📂 artStyle/ # 画風管理 │ ├─ 📂 assets/ # 素材管理 │ ├─ 📂 assetsGenerate/ # 素材生成 │ ├─ 📂 cornerScape/ # 絵コンテ管理 │ ├─ 📂 general/ # 汎用インターフェース │ ├─ 📂 login/ # ログイン認証 │ ├─ 📂 migrate/ # データマイグレーション │ ├─ 📂 modelSelect/ # モデル選択 │ ├─ 📂 novel/ # 小説管理 │ ├─ 📂 other/ # その他機能 │ ├─ 📂 production/ # 制作管理 │ ├─ 📂 project/ # プロジェクト管理 │ ├─ 📂 script/ # 脚本生成 │ ├─ 📂 scriptAgent/ # 脚本 Agent インターフェース │ ├─ 📂 setting/ # システム設定 │ ├─ 📂 task/ # タスク管理 │ └─ 📂 test/ # テストインターフェース ├─ 📂 socket/ # WebSocket リアルタイム通信 ├─ 📂 types/ # TypeScript 型宣言 ├─ 📂 utils/ # ユーティリティ関数 ├─ 📄 app.ts # アプリケーションエントリ ├─ 📄 core.ts # コア初期化 ├─ 📄 env.ts # 環境変数処理 ├─ 📄 err.ts # エラー処理 ├─ 📄 logger.ts # ログモジュール ├─ 📄 router.ts # ルート登録 └─ 📄 utils.ts # 汎用ツール 📄 Dockerfile # Docker ビルドファイル 📄 electron-builder.yml # Electron パッケージング設定 📄 skillList.json # スキル一覧 📄 LICENSE # ライセンス（Apache-2.0） 📄 NOTICES.txt # サードパーティ依存関係の声明 📄 package.json # プロジェクト設定 📄 tsconfig.json # TypeScript 設定 ``` --- # 🔗 関連リポジトリ | リポジトリ | 説明 | GitHub | Gitee | | ---------------- | ---------------------------------- | -------------------------------------------------- | ------------------------------------------------ | | **Toonflow-app** | 完全なクライアント（本リポジトリ、一般ユーザー向け） | [GitHub](https://github.com/HBAI-Ltd/Toonflow-app) | [Gitee](https://gitee.com/HBAI-Ltd/Toonflow-app) | | **Toonflow-web** | フロントエンドソース（フロントエンド開発者向け） | [GitHub](https://github.com/HBAI-Ltd/Toonflow-web) | [Gitee](https://gitee.com/HBAI-Ltd/Toonflow-web) | > 💡 **ヒント**：Toonflow をただ使いたいだけの場合は、本リポジトリのクライアントをダウンロードしてください。フロントエンドリポジトリは二次開発やフロントエンドのカスタマイズを行う開発者向けです。 --- # 👨‍👩‍👧‍👦 WeChat 交流グループグループ追加用アシスタント： Toonflow QR

アイコンをクリックして Discord に参加することもできます： [![Join our Discord](https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/67d00cf7266d2c75571aebde_Example.svg)](https://discord.gg/HEjKmpNpAZ) または招待リンク： [https://discord.gg/HEjKmpNpAZ](https://discord.gg/HEjKmpNpAZ) --- # 💌 お問い合わせ 📧 メール：[ltlctools@outlook.com](mailto:ltlctools@outlook.com?subject=Toonflow問い合わせ) --- # 📜 ライセンス Toonflow は Apache-2.0 ライセンスのもとでオープンソース公開されており、補足的な商用利用規約が付帯しています。ライセンス詳細：https://www.apache.org/licenses/LICENSE-2.0 ## 補足契約 - 本ソフトウェアを製品として **2つ以上の独立した第三者** に配布する場合は、HBAI-Ltd の **書面による商用ライセンス** を取得する必要があります。 - **5法人以下** が共同運営で内部利用し、外部にサービスを提供しない場合は内部利用とみなし、**ライセンスは不要** です。 - Toonflow の識別表示や著作権情報を削除または変更してはなりません。 ## 永久無料のケース - ✅ Toonflow を使ってコンテンツを制作し、プラットフォームから収益を得る - ✅ 二次開発して自分のチーム内で使用する - ✅ 5法人以下が共同運営で内部利用する - ✅ 個人の学習、研究、非商用利用 ## 商用ライセンス価格 | 段階 | 年間売上 | 年会費 | |------|---------|--------| | 🌱 支援期 | < ¥10万 | **申請すれば無料ライセンス** | | 🚀 創業期 | ¥10–50万 | ¥5,000/年 | | 📈 成長期 | ¥50–150万 | ¥20,000/年 | | 🏢 規模期 | ¥150–500万 | ¥80,000/年 | | 🌐 エンタープライズ | > ¥500万 | 要相談 | > **不遡及条項**：v1.0.8 リリース前に AGPL-3.0 に基づいて使用していたユーザーは、引き続き AGPL-3.0 に従うものとし、本契約の変更の影響を受けません。完全な契約は [LICENSE](./LICENSE) ファイルを参照してください。 --- # ⭐️ スター履歴 [![Star History Rank](https://api.star-history.com/badge?repo=HBAI-Ltd/Toonflow-app)](https://www.star-history.com/#HBAI-Ltd/Toonflow-app) [![Star History Chart](https://api.star-history.com/svg?repos=HBAI-Ltd/Toonflow-app&type=timeline&legend=top-left)](https://www.star-history.com/#HBAI-Ltd/Toonflow-app&type=timeline&legend=top-left) --- # 🙏 謝辞以下のオープンソースプロジェクトが Toonflow に強力なサポートを提供しています： - [Express](https://expressjs.com/) - 高速でオープンな Node.js Web フレームワーク - [AI SDK](https://ai-sdk.dev/) - TypeScript 向け AI ツールキット - [Better-SQLite3](https://github.com/WiseLibs/better-sqlite3) - 高性能 SQLite3 バインディングライブラリ - [Sharp](https://sharp.pixelplumbing.com/) - 高性能 Node.js 画像処理ライブラリ - [Axios](https://axios-http.com/) - Promise ベースの HTTP クライアント - [Zod](https://zod.dev/) - TypeScript ファーストのスキーマバリデーションライブラリ - [Socket.IO](https://socket.io/) - リアルタイム双方向イベント通信エンジン - [Electron](https://www.electronjs.org/) - クロスプラットフォームデスクトップアプリ開発フレームワーク - [Hugging Face Transformers](https://huggingface.co/docs/transformers.js) - ローカル ML 推論ライブラリ以下の組織・団体・個人が Toonflow をサポートしています：

名称	サポート方法	概要	公式サイト
算能雲	💻 計算リソーススポンサー	より速く、より安定し、より経済的なワンストップモデル推論APIサービスの提供を目指す	公式サイト
Atlas Cloud	💻 計算リソーススポンサー	世界初の全モーダル推論プラットフォーム。対話、画像、動画、音声—すべて統一API。300以上のモデル、OpenAI互換。	公式サイト
Tencent Hunyuan 3D	🌐 ワールドモデル技術サポート	Tencent Hunyuan 3D AI 創作エンジンは、Hunyuan 3D 生成大モデル v2.5 をベースにした、業界初のワンストップ3DコンテンツAI創作プラットフォーム。テキストからの3D生成、画像からの3D生成、3Dアニメーション生成、テクスチャ生成などをサポートし、スケッチからの3D生成、3Dキャラクター生成、ローポリゴンモデル生成に強み。	公式サイト