ComfyUIの複雑なグラフをクリーンなWebアプリケーションに変える方法
ComfyUIでパイプラインを構築したことがある人なら 누구나、この感覚を知っているはずです。3日間かけて、適切なLoRAを見つけ、ControlNetを設定し、巧妙なアップスケーラーを作成しました。100個のノードを持つ巨大なグラフができ上がり、回路図のように見えます。すべてが完璧に動作しています。
そんなとき、同僚——デザイナーやプロダクトマネージャー——がこう言います：「ねえ、画像を一枚アップロードして、ボタンをクリックしたら結果が得られるようにしてくれない？」
ComfyUIを開いて画面を見せると、その目には純粋な恐怖が見えます。準備ができていない人にノードだらけのベアキャンバスへのアクセスを与えるのは、5分以内にワークフローが壊れる確実な方法です。
これこそがViewComfyが解決することです。ComfyUIから готовый JSONワークフローを取得し、标准的な入力フォームを持つクリーンなWebインターフェースを構築するオープンソースツールです。
内部構造と動作原理
このプロジェクトはNext.jsとTypeScriptで構築されています。コンセプトはシンプルです：ComfyUIからパイプラインをJSONとしてエクスポートし、ViewComfyエディタにドロップし、インターフェースを使ってエンドユーザーに公開するパラメータを選びます。
絡み合った配線や技術的なノードの山ではなく、ユーザーは実際に必要なものだけを見ます：プロンプト用のテキストフィールド、数個のスライダー、スタイル選択用のドロップダウン、そして生成ボタン。
ViewComfyはローカルComfyUIインスタンスとAPI経由のサーバーレスエンドポイントの両方をサポートしています。つまり、リモートのGPUサーバーで計算を実行しながら、軽量なフロントエンドをユーザーに届けることができます。
主な機能
プロジェクトが標準で提供する機能を詳しく見てみましょう。
フォームビルダーと入力のカスタマイズ
どのパラメータを公開し、どのパラメータをハードコードするかをあなたが決定します。
エディタはほとんどの基本的なコントロールをサポートしています：
- テキストフィールドと数値入力
- 最小値/最大値の制約を持つスライダー
- ドロップダウン（select）とチェックボックス
- 画像、视频、音声ファイルのアップロード
フィールドにはヘルパーテキストを追加でき、必須または任意としてマークできます。
組み込みマスクエディタ
ワークフローがインペインティングやローカル編集用に調整されている場合、ユーザーはブラウザで直接マスクを描画する必要があります。ViewComfyには、アップロードされた画像の上に動作する組み込みのマスク描画ツールが含まれています。
Playgroundモードとインターフェース分離
共有に最も有用的な機能はPlaygroundモード（またはViewMode）です。このモードでは、エディタインターフェースが完全に非表示になり、ユーザーは完成したWebアプリケーションだけを見ます。
これにより、同時に2つの問題が解決されます：
- パイプラインロジックを保護します。したくない場合はJSONファイル自体を公開しません。
- 偶発的な破損を防ぎます。ユーザーはパイプラインでノードを移動したり、配線を切断したり物理的にできません。
ユーザー認証
ローカル使用だけでなく、チーム用にアプリをデプロイすることを計画している場合は、Clerkを通じて認証を有効にできます。キーを.envファイルに追加し、適切なフラグを設定するだけです。
ローカルでの実行方法
素早く始めるには、最新バージョンのNode.jsが必要です（著者はv20.18+を推奨しています）。
リポジトリをクローンし、依存関係をインストールします：
開発サーバーを起動した後、ブラウザを開きます。エクスポートしたComfyUIファイル（api.json）をエディタウィンドウにドラッグし、フィールド表示を設定して、生成された設定ファイル（config.json）をダウンロードします。
プロジェクトをクリーンアプリモード（Playgroundモード）に切り替えるには、両方のJSONファイルをルートに配置し、next.config.jsを編集します：
サーバーを再起動すると、使える状態のWebアプリが完成します。すべてをコンテナにパッケージする必要がある場合は、リポジトリにDockerfileがあります：
実践での活用場面
ViewComfyが時間を節約できる明確なシナリオが3つあります：
- 非技術チーム向けの内部ツール。デザイナー、コピーライター、マーケターが画像アップスケーリング、背景削除、特定のブランドガイドに一致するバナー生成のためのツールを必要としています。グラフを一度設定すれば、直感的なフォームを提供できます。
- AIサービスのプロトタイピング。フロントエンド開発者がゼロから完全なUIを構築する前に、ニューラルネットワークを使用して新しいプロダクト仮説を素早くテストする必要がある場合。
- クライアントデモ。電話中にかさばるComfyUIを起動する代わりに、クリーンなWebページを開き、パイプラインの実演を行います。
落とし穴と結論
このプロジェクトはAGPL-3.0ライセンスを使用しています。商用クローズドSaaS用に再構築する予定がある場合は、ライセンス制限を考慮する必要があります。有料のクラウドプラットフォーム（ViewComfy Cloud）もあり、組み込みの請求や詳細な分析などの一部の機能はクラウド向けに設計されていますが、フロントエンド自体は完全に自律的でオープンソースのままです。
試してみるべき人：
- すべてのワークフローに対してGradioやStreamlitで繰り返しフロントエンドを構築することに厌倦している開発者とMLエンジニア。
- 社内でメディア生成を активно使用しており、同僚のための簡素化を探しているチーム。
ViewComfyは「複雑なパイプライン——シンプルなユーザー」という具体的な痛みを解決する堅実なツールに見えます。標準的なnpm run devでプロジェクトが起動するので、10分でローカル試用できます。
関連プロジェクト