Comfy.ICU
ExploreDocsPricing
Support

ComfyUI Extension: ComfyUI-MobileClient

Authored by vkff5833

Created

Updated

1 stars

Add a mobile-friendly web interface to ComfyUI.

Custom Nodes (0)

    README

    ComfyUI Mobile Client

    A mobile-friendly web client extension for ComfyUI that allows you to:

    • View generated images in a responsive gallery
    • Monitor queue status in real-time
    • Edit and regenerate prompts
    • Upload workflow JSON files
    • Customize various settings for prompt generation

    Installation

    Method 1: Using ComfyUI-Manager

    You can install directly from ComfyUI-Manager:

    Install from ComfyUI-Manager

    Method 2: Manual Installation

    1. Clone this repository into your ComfyUI's custom_nodes directory:
    cd custom_nodes
git clone https://github.com/vkff5833/ComfyUI-MobileClient
    1. Restart ComfyUI

    Common: After Installation

    Access the client at: http://SERVER/extensions/ComfyUI-MobileClient/index.html

    Note: The "index.html" part of the URL cannot be omitted. Make sure to include it in the URL.

    Features

    Gallery View

    • Responsive image gallery with modal view
    • Navigate between images using arrow keys
    • View queue ID and regenerate previous prompts

    Queue Monitoring

    • Real-time queue status display
    • Configurable monitoring interval
    • Visual indicators for running and pending tasks

    Prompt Editing

    • Edit text prompts, parameters, and seed values
    • Automatic seed randomization (optional)
    • Customizable field patterns for different input types

    Settings

    • Server connection configuration
    • Customizable key patterns for form fields
    • Adjustable queue monitoring interval
    • Settings persistence in local storage

    Usage

    1. Server Settings

    Left top menu icon to open settings screen:

    <img src="https://i.imgur.com/zPPPSKS.png" alt="Settings Screen" width="300" align="right"/>
    • Server URL setting (default is /)
    • Authentication setting (if needed)
    • Prompt field pattern setting
    • Queue monitoring interval adjustment
    <br clear="right"/>

    2. Workflow Upload and Image Generation

    Main screen allows the following operations:

    <img src="https://i.imgur.com/Lq7FS4W.png" alt="Main Interface" width="300"/>
    • Drag & drop workflow JSON file or file selection
    • Gallery display of generated images
    • Real-time queue status monitoring
    • Image regeneration and prompt editing

    3. Prompt Editing

    Click Generate button to open edit modal:

    <img src="https://i.imgur.com/0kdh8jK.png" alt="Edit Modal" width="300" align="right"/>
    • Text prompt editing
    • Parameter value adjustment (steps, cfg, size, etc.)
    • Seed value editing (auto randomization possible)
    • "Regenerate" button for immediate execution
    <br clear="right"/>

    Keyboard Shortcuts

    Available keys when gallery is displayed:

    • ←/→: Move to previous/next image
    • ↑/↓: Move to previous/next queue item
    • Enter: Edit selected image prompt
    • Space: Regenerate selected image

    ComfyUI モバイルクライアント

    ComfyUI用のモバイルフレンドリーなWebクライアント拡張機能です。以下の機能を提供します：

    • レスポンシブなギャラリーでの生成画像の表示
    • リアルタイムのキュー状態監視
    • プロンプトの編集と再生成
    • ワークフローJSONファイルのアップロード
    • プロンプト生成のための各種設定のカスタマイズ

    インストール方法

    方法1: ComfyUI-Managerを使用

    ComfyUI-Managerから直接インストールできます:

    ComfyUI-Managerでのインストール

    方法2: 手動インストール

    1. ComfyUIのcustom_nodesディレクトリにこのリポジトリをクローンします：
    cd custom_nodes
git clone https://github.com/vkff5833/ComfyUI-MobileClient
    1. ComfyUIを再起動します

    共通: インストール後

    以下のURLでアクセスします：http://SERVER/extensions/ComfyUI-MobileClient/index.html

    注意：URLの末尾の "index.html" は省略できません。必ずURLに含めてください。

    機能

    ギャラリービュー

    • モーダルビュー付きのレスポンシブな画像ギャラリー
    • 矢印キーによる画像間のナビゲーション
    • キューIDの表示と過去のプロンプトの再生成

    キュー監視

    • リアルタイムのキュー状態表示
    • 監視間隔の設定
    • 実行中・待機中タスクの視覚的表示

    プロンプト編集

    • テキストプロンプト、パラメータ、シード値の編集
    • 自動シードランダム化（オプション）
    • 入力タイプごとのカスタマイズ可能なフィールドパターン

    設定

    • サーバー接続設定
    • フォームフィールドのカスタマイズ可能なキーパターン
    • キュー監視間隔の調整
    • ローカルストレージでの設定保存

    使用方法

    1. サーバー設定

    左上のメニューアイコンをクリックして設定画面を開きます：

    <img src="https://i.imgur.com/zPPPSKS.png" alt="設定画面" width="300" align="right"/>
    • サーバーURL設定（デフォルトは /）
    • 認証設定（必要な場合）
    • プロンプトフィールドのパターン設定
    • キュー監視間隔の調整
    <br clear="right"/>

    2. ワークフローのアップロードと画像生成

    メイン画面では以下の操作が可能です：

    <img src="https://i.imgur.com/Lq7FS4W.png" alt="メインインターフェース" width="300"/>
    • ワークフローJSONファイルのドラッグ＆ドロップまたはファイル選択
    • 生成済み画像のギャラリー表示
    • キュー状態のリアルタイム監視
    • 画像の再生成やプロンプト編集

    3. プロンプト編集

    Generateボタンをクリックすると編集モーダルが開きます：

    <img src="https://i.imgur.com/0kdh8jK.png" alt="編集モーダル" width="300" align="right"/>
    • テキストプロンプトの編集
    • パラメータ値の調整（steps、cfg、サイズなど）
    • シード値の編集（自動ランダム化可能）
    • 「Regenerate」ボタンを押すと編集モーダルを開かず即時に再生成します。
    <br clear="right"/>

    キーボードショートカット

    ギャラリー表示時に以下のキーが使用可能：

    • ←/→：前/次の画像に移動
    • ↑/↓：前/次のキューアイテムに移動
    • Enter：選択中の画像のプロンプトを編集
    • Space：選択中の画像を再生成