Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ketle-manandClaude Sonnet 4.6
|
7958ad1276 | ||
|
ketle-manandClaude Sonnet 4.6
|
fa62684b2e | ||
|
ketle-manandClaude Sonnet 4.6
|
8fcc4af262 | ||
|
ketle-manandClaude Sonnet 4.6
|
33f1d22e30 | ||
|
ketle-manandClaude Sonnet 4.6
|
184da84718 | ||
|
ketle-manandClaude Sonnet 4.6
|
e3aeec8022 | ||
|
ketle-manandClaude Sonnet 4.6
|
c444db45e6 | ||
|
ketle-manandClaude Sonnet 4.6
|
a1613bd1e8 | ||
|
ketle-manandClaude Sonnet 4.6
|
30162789b8 | ||
|
ketle-manandClaude Sonnet 4.6
|
1cd3fb3fff | ||
|
ketle-manandClaude Sonnet 4.6
|
5b087713b9 | ||
|
ketle-manandClaude Sonnet 4.6
|
6a2da8e4e9 | ||
|
ketle-manandClaude Sonnet 4.6
|
54fc57344a | ||
|
ketle-manandClaude Sonnet 4.6
|
1cc0e94724 |
@@ -0,0 +1,22 @@
|
||||
name: Publish to Comfy Registry
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
paths:
|
||||
- "pyproject.toml"
|
||||
|
||||
jobs:
|
||||
publish-node:
|
||||
name: Publish Custom Node to registry
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check out code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Publish Custom Node
|
||||
uses: Comfy-Org/publish-node-action@main
|
||||
with:
|
||||
personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}
|
||||
@@ -1,6 +1,301 @@
|
||||
# DEVLOG - ComfyUI-Workflow-Studio
|
||||
|
||||
## 2026-04-28: v0.3.3 Promptタブ — ワイルドカード支援パネル・Impact Packシンボリックリンク連携
|
||||
## 2026-05-15: v0.3.7 Metadata タブ: Flux2 / Qwen / Z-Image 対応
|
||||
|
||||
### 概要
|
||||
|
||||
ComfyUI 公式テンプレート（Flux.2 Dev/Klein、Qwen-Image-Edit、Z-Image）で使われる
|
||||
**サブグラフ（subgraph）形式**ワークフローの Metadata タブ読み込みに対応。
|
||||
|
||||
- `definitions.subgraphs` 内の `UNETLoader` / `CLIPLoader` / `VAELoader` / `LoraLoaderModelOnly` からモデルを抽出
|
||||
- `MarkdownNote` ノードの `**section** → - [model](url)` パターンからモデルを補完（フォールバック）
|
||||
- サブグラフ内の `CLIPTextEncode + KSampler` リンクを辿ってプロンプトを取得
|
||||
- `PrimitiveStringMultiline` ノード（flux2-klein など）からプロンプトを取得
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `static/js/metadata-tab.js`
|
||||
|
||||
- **`extractPromptsFromNodeSet(nodes, links)`** 新規追加
|
||||
CLIPTextEncode + KSampler によるプロンプト抽出ロジックを汎用化。トップレベル・サブグラフの両方で再利用
|
||||
- **`extractMarkdownNoteModels(wf)`** 新規追加
|
||||
`MarkdownNote` の `**section**` → `- [name](url)` を正規表現で解析し、text_encoders / diffusion_models / vae / loras を抽出
|
||||
- **`extractCheckpoints` / `extractVAEs`** を `collectAllNodes()` 使用に修正
|
||||
サブグラフ内のノードも走査対象に
|
||||
- **`extractPromptsLiteGraph`** を 7 段階フォールバック構成に再設計
|
||||
1. ImageMetadataPromptLoader → 2. WFS_PromptText → 3. トップレベルCLIPTextEncode+KSampler →
|
||||
4. PrimitiveStringMultiline → **5. サブグラフCLIPTextEncode+KSampler（新規）** →
|
||||
6. PromptStyler → 7. 全CLIPTextEncodeテキスト
|
||||
- **`fromWorkflow`** に MarkdownNote フォールバック補完を追加
|
||||
|
||||
### 対応済みワークフロー（data/data8）
|
||||
|
||||
| ファイル | モデル抽出 | プロンプト抽出 |
|
||||
|---|---|---|
|
||||
| image_flux2_fp8.json | UNETLoader + CLIPLoader + VAELoader + LoraLoader (subgraph) | CLIPTextEncode (subgraph) |
|
||||
| image_flux2_klein_text_to_image.json | UNETLoader + CLIPLoader + VAELoader (subgraph) | PrimitiveStringMultiline |
|
||||
| image_qwen_image_edit.json | UNETLoader + CLIPLoader + VAELoader + LoraLoader (subgraph) | なし（画像入力のみ） |
|
||||
| image_qwen_image_edit_2511.json | 同上 | なし |
|
||||
| image_qwen_image_layered.json | UNETLoader + CLIPLoader + VAELoader (subgraph) | PrimitiveStringMultiline |
|
||||
| image_z_image.json | UNETLoader + CLIPLoader + VAELoader (subgraph) | CLIPTextEncode (subgraph) |
|
||||
| image_z_image_turbo.json | 同上 | CLIPTextEncode (subgraph) |
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-15: v0.3.6 Metadata タブ追加
|
||||
|
||||
### 概要
|
||||
|
||||
- PNG / WebP / JSON からモデル・LoRA・プロンプト情報を抽出・表示する Metadata タブを追加
|
||||
- タブ位置は Prompt タブの右隣（Prompt → Metadata → Gallery）
|
||||
- プロンプト抽出ロジックを改善し SDXL Prompt Styler を使用したワークフローにも対応
|
||||
- 抽出プロンプトを GenerateUI タブ・Prompt タブのプリセットへワンクリックで転記するボタンを追加
|
||||
- 左ペインに対応フォーマット説明と今後の対応予定ノートを追加
|
||||
- ヘルプタブに Metadata タブの説明カードを追加（EN/JA/ZH i18n 対応）
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `static/js/metadata-tab.js` — 新規作成
|
||||
|
||||
**メタデータ抽出ロジック（`model-and-prompt-from-metadata` の `workflow_utils.js` ベース）**
|
||||
|
||||
- `sanitizeJSON(text)` — JSON に含まれる `NaN` / `Infinity` を `null` に置換
|
||||
- `readWebPEXIFChunk(file)` — WebP RIFF チャンクから EXIF を読み取る
|
||||
- `extractWorkflowFromEXIF(exifBytes)` — EXIF バイト列から `workflow:` / `prompt:` キーを検索してワークフロー JSON を返す
|
||||
- `readAllPNGTextChunks(file)` — PNG tEXt / iTXt チャンクをすべて読み取って `{ keyword: text }` マップを返す（IEND 以降のチャンクも読む）
|
||||
- `extractCheckpoints / extractVAEs / extractDiffusionModels / extractTextEncoders / extractLoRAs` — LiteGraph 形式・API 形式の両方に対応したモデル抽出関数群
|
||||
- `extractPrompts(wf)` — 形式を判定して `extractPromptsLiteGraph` / `extractPromptsAPI` に振り分け
|
||||
- **`resolveLinkedText(wf, srcId, slot)`** — API 形式でのリンク参照 `[nodeId, slot]` を解決。`PromptStyler` 系ノードは `text_positive` / `text_negative` を slot に応じて返す
|
||||
- `extractPromptsAPI(wf)` — CLIPTextEncode の text 入力がリンク参照（配列）の場合に `resolveLinkedText` で解決するよう修正
|
||||
- `extractPromptsLiteGraph(wf)` — **`linkSlot` マップを追加**（リンクの origin_slot を追跡）; CLIPTextEncode の inputs にリンクがある場合に `PromptStyler` / `WFS_PromptText` の `widgets_values[originSlot]` を解決; フォールバック時にも `PromptStyler` ノードを直接スキャン
|
||||
- SD WebUI / SD Forge / Fooocus の `parameters` チャンク解析（`parseSDAParameters`, `parseFooocusMetadata`）
|
||||
- `extractAllMetadata(file)` — PNG / WebP / JSON を統合して `{ source, checkpoints, vaes, diffusionModels, textEncoders, loras, positives, negatives }` を返す
|
||||
|
||||
**UI**
|
||||
|
||||
- `buildModelItem(label)` — モデル名アイテム（テキストオーバーフロー省略）
|
||||
- `buildLoRAItem(lora)` — LoRA 名 ＋ `strength_model/strength_clip` バッジ付きアイテム
|
||||
- `buildPromptItem(label, type, full, ...)` — POS/NEG バッジ付きクリッカブルアイテム。クリックで下部テキストエリアに全文を表示し選択ハイライト
|
||||
- `renderSection(sectionEl, listEl, items, buildFn)` — アイテムが空の場合は `.wfm-meta-section-empty` クラスを付与してリストを非表示
|
||||
- `initMetadataTab()` — タブ初期化
|
||||
- ドロップゾーン / クリックでファイル選択 / drag-over スタイル切り替え
|
||||
- 画像ファイルはプレビューとして表示、JSON はドロップラベルを維持
|
||||
- ファイル処理後に各セクションをレンダリング。最初の positive プロンプトを自動選択
|
||||
- セクションタイトル・フォーマットノート・ヘルプカードの i18n 適用
|
||||
- **プロンプトアクションボタン**:
|
||||
- Copy — `navigator.clipboard.writeText` でプレビュー内容をコピー
|
||||
- GenUI:P / GenUI:N — `#wfm-prompt-pos-text` / `#wfm-prompt-neg-text` に値をセット
|
||||
- Prompt:P / Prompt:N — `#wfm-preset-pos` / `#wfm-preset-neg` に値をセット
|
||||
- 成功時は緑のフラッシュアニメーション（`wfm-meta-btn-flash`）
|
||||
|
||||
#### `templates/index.html`
|
||||
|
||||
- タブナビに `<button class="wfm-tab" data-tab="metadata">Metadata</button>` を Prompt と Gallery の間に追加
|
||||
- `#wfm-tab-metadata` セクションを追加（Prompt セクションの直後、Settings セクションの前）:
|
||||
- `.wfm-metadata-layout`（3列グリッド: 220px | 1fr | 1fr）
|
||||
- Col1: ドロップゾーン（`#wfm-meta-drop`）＋プレビュー画像＋ファイル情報（`#wfm-meta-file-info`）＋対応フォーマットノート（`#wfm-meta-format-note`）
|
||||
- Col2: Checkpoint / VAE / Diffusion Model / Text Encoder の各セクション
|
||||
- Col3: LoRA セクション＋Prompt セクション（リスト＋全文テキストエリア＋アクションボタン行）
|
||||
- Help タブ: Prompt Tab カードと Settings Tab カードの間に Metadata Tab カードを追加（`wfm-help-metadata-title/desc/1〜5`）
|
||||
|
||||
#### `static/js/app.js`
|
||||
|
||||
- `import { initMetadataTab } from "./metadata-tab.js"` を追加
|
||||
- `tabMap` に `metadata: "tabMetadata"` を追加
|
||||
- `DOMContentLoaded` 内に `initMetadataTab()` を追加（`initPromptTab()` の直後）
|
||||
|
||||
#### `static/js/i18n.js`
|
||||
|
||||
EN / JA / ZH の3言語に以下を追加:
|
||||
|
||||
- `tabMetadata` — タブラベル
|
||||
- `metaSectionCkpt / Vae / Diff / Te / Lora / Prompt` — 各セクションタイトル
|
||||
- `metaDropMain / metaDropSub` — ドロップゾーンラベル
|
||||
- `metaParsing / metaFileTooLarge / metaNoMetadata / metaParseError` — ステータスメッセージ
|
||||
- `metaPromptPositive / metaPromptNegative / metaSelectPrompt` — プロンプトエリアラベル
|
||||
- `metaFormatNoteTitle / metaFmtComfyui / metaFmtSdwebui / metaFmtFooocus / metaFormatTodo` — フォーマットノート
|
||||
- `helpMetadataTitle / helpMetadataDesc / helpMetadata1〜5` — ヘルプカード
|
||||
|
||||
#### `static/css/main.css`
|
||||
|
||||
以下のスタイルを末尾に追加:
|
||||
|
||||
- `#wfm-tab-metadata` / `.wfm-metadata-layout` — 3列グリッドレイアウト
|
||||
- `.wfm-metadata-col1/col2/col3` — 各列の flex レイアウト・ボーダー・スクロール
|
||||
- `.wfm-metadata-drop-zone` (+ `.drag-over` / `:hover`) — ドロップゾーンのボーダー・背景切り替え
|
||||
- `.wfm-meta-drop-label / main / sub` — ドロップラベル
|
||||
- `.wfm-meta-preview-img` — プレビュー画像（object-fit: contain）
|
||||
- `.wfm-meta-file-info` — ファイル情報テキスト
|
||||
- `.wfm-meta-section` (+ `.wfm-meta-section-empty`) — セクションコンテナ（空時はリストを非表示・タイトルを半透明）
|
||||
- `.wfm-meta-section-title` — セクション見出し（uppercase + letter-spacing）
|
||||
- `.wfm-meta-list` — スクロール可能アイテムリスト（`max-height: 140px`）
|
||||
- `.wfm-meta-item` / `.wfm-meta-item-clickable` (+ `:hover` / `.selected`) — アイテム行
|
||||
- `.wfm-meta-item-name / badge` — アイテム名・バッジ
|
||||
- `.wfm-meta-badge-pos / neg` — POS（緑）/ NEG（赤）バッジ
|
||||
- `.wfm-meta-prompt-section / full-wrap / full-label / full` — プロンプト全文エリア（`min-height: 80px`）
|
||||
- `.wfm-meta-prompt-actions` — ボタン行（flex wrap）
|
||||
- `.wfm-meta-btn-flash` — 成功時フラッシュアニメーション
|
||||
- `.wfm-meta-format-note / note-title / format-list / format-todo` — フォーマットノートスタイル
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-09: v0.3.5 GenerateUI — Feeder サブタブ・ワークフロー解析精度向上
|
||||
|
||||
### 概要
|
||||
|
||||
- comfyui-image-feeder カスタムノード対応の Feeder サブタブを GenerateUI タブに追加
|
||||
- `analyzeWorkflow` の精度向上（SDXL 多段 CONDITIONING チェーン BFS 展開、新ノード種対応、KSamplerAdvanced seed 修正）
|
||||
- Help タブに Feeder サブタブの説明カードを追加（EN/JA/ZH i18n 対応）
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `static/js/feeder-tab.js` — 新規作成
|
||||
|
||||
- `_s = { dir, images, selected (Set), presets, running }` モジュール状態
|
||||
- `_feederNodes()` — currentWorkflow から `class_type === "ImageFeeder"` のノードを列挙
|
||||
- `refreshFeederNodeList()` — ノードセレクターを再描画（ワークフロー読み込み時に呼ばれる）
|
||||
- `_loadFromNode(nodeId)` — ノード inputs を左ペインの各フィールドに反映
|
||||
- `_applyToNode(nodeId)` — フィールド値を currentWorkflow のノード inputs に書き戻す
|
||||
- `_applyToWorkflow()` — Apply ボタン用（`_applyToNode` 呼び出し＋toast）
|
||||
- フォルダツリー: `_loadTree()` / `_renderTree()` / `_makeTreeRow()` / `_selectDir()` / `_highlightTreeRow()` — `/image_loop/tree` API からツリーを描画
|
||||
- 画像グリッド: `_loadImages()` / `_renderGrid()` / `_makeCard()` / `_refreshGridCbs()` / `_selectAll()` / `_deselectAll()` — `/image_loop/images` API からサムネイルカードを描画、チェックボックスで選択管理
|
||||
- プレビュー: `_showPreview()` — カードクリックで右ペインに拡大プレビューと `/image_loop/image_info` の情報を表示
|
||||
- プリセット: `_loadPresets()` / `_renderPresets()` / `_savePreset()` / `_applyPreset()` / `_deletePreset()` — `/image_feeder/presets` API を使用
|
||||
- ステータスバー: `_updateStatus()` — 現在フォルダと選択枚数/総枚数を表示
|
||||
- Run ループ: `_startRun()` / `_stopRun()` / `_setRunUI()`
|
||||
- Run 前に WebSocket を接続し `image_loop_node_sync` メッセージを専用ハンドラで捕捉
|
||||
- 各反復で `_applyToNode` → `comfyUI.generate()` → 結果画像を右ペインに表示
|
||||
- `comfyUI.generate` には右ペインの seed mode/value を使用（KSampler のシードを正しく制御）
|
||||
- After gen モード (`wfm-feeder-control-after`):
|
||||
- `loop`: `_lastSync.next_index` で index を更新し無限継続（`has_next=false` でも折り返して継続）
|
||||
- `increment`: index を更新し `has_next=false` で自動停止
|
||||
- `fixed`: index を変えず同じ画像で繰り返し
|
||||
- 生成ごとに右ペインの seed 表示を更新
|
||||
- `initFeederTab()` — 全コントロールのイベントリスナーを登録し `_loadTree()` / `_loadPresets()` を並列実行
|
||||
|
||||
#### `static/js/generate-tab.js`
|
||||
|
||||
- `import { initFeederTab, refreshFeederNodeList } from "./feeder-tab.js"` を追加
|
||||
- `loadWorkflowIntoEditor()` に `refreshFeederNodeList()` 呼び出しを追加
|
||||
- `moveRawJsonToTab()`: `tabKey === "feeder"` の場合は Raw JSON ウィジェットを非表示（feeder タブには rawjson-col がないため）
|
||||
- `initGenerateTab()` に `await initFeederTab()` を追加
|
||||
|
||||
#### `templates/index.html`
|
||||
|
||||
- サブタブナビに `<button data-subtab="feeder">Feeder</button>` を追加
|
||||
- `wfm-gen-subtab-feeder` コンテンツ div を追加:
|
||||
- 左ペイン (`.wfm-feeder-settings`): ノードセレクター・Apply・全パラメータフィールド・プリセット管理・Run セクション（After gen セレクト + Run/Stop ボタン）
|
||||
- 中央ペイン (`.wfm-feeder-library`): ステータスバー + ライブラリ本体（フォルダツリー・画像グリッド・プレビューパネル）
|
||||
- Help タブ: GenerateUI Tab カードの説明を "4-tab layout" に更新
|
||||
- Help タブ: Feeder サブタブ説明カードを追加（`wfm-help-feeder-title` / `wfm-help-feeder-desc` / `wfm-help-feeder-1`〜`9` の id 付き）
|
||||
|
||||
#### `static/css/main.css`
|
||||
|
||||
Feeder 専用スタイルを末尾に追加:
|
||||
- `.wfm-feeder-layout` — flex 横並び全体レイアウト
|
||||
- `.wfm-feeder-settings` — 左ペイン（幅 220px、縦スクロール）
|
||||
- `.wfm-feeder-pane-header` / `.wfm-feeder-field-row` / `.wfm-feeder-label` / `.wfm-feeder-input` — フォームレイアウト
|
||||
- `.wfm-feeder-library` / `.wfm-feeder-status-bar` / `.wfm-feeder-library-body` — 中央ペイン構造
|
||||
- `.wfm-feeder-tree-pane` / `.wfm-feeder-tree-scroll` / `.wfm-feeder-tree-row` (+ `:hover` / `.active`) / `.wfm-feeder-tree-msg` — フォルダツリー
|
||||
- `.wfm-feeder-grid-pane` / `.wfm-feeder-grid` / `.wfm-feeder-grid-msg` — 画像グリッドコンテナ
|
||||
- `.wfm-feeder-card` (+ `:hover` / `.selected`) / `.wfm-feeder-card-cb` / `.wfm-feeder-card-img` / `.wfm-feeder-card-name` — 画像カード
|
||||
- `.wfm-feeder-preview-pane` / `.wfm-feeder-preview-img` / `.wfm-feeder-preview-name` / `.wfm-feeder-preview-info` — プレビューパネル
|
||||
|
||||
#### `static/js/comfyui-workflow.js`
|
||||
|
||||
`analyzeWorkflow` を3パス構成に再構成:
|
||||
|
||||
- **Pass 1**: KSampler / KSamplerAdvanced を検出し `sampler_nodes` に追加
|
||||
- `seedKey`: `"seed" in inputs ? "seed" : "noise_seed"` で KSamplerAdvanced の `noise_seed` に対応
|
||||
- LoraLoader 検出を追加
|
||||
- **Pass 1b**: BFS 展開（最大5イテレーション）で CONDITIONING チェーンの positive/negative 帰属を伝播
|
||||
- `COND_PASSTHROUGH` セット: ConditioningCombine / ConditioningConcat / ConditioningAverage / ConditioningZeroOut / ConditioningSetTimestepRange / ControlNetApply / ControlNetApplyAdvanced / IPAdapterApply / IPAdapterApplyFaceID / StyleModelApply
|
||||
- リンク接続入力を持つノードも帰属を伝播（CLIPTextEncodeSDXL の text_g / text_l が他ノードにリンクされている場合）
|
||||
- **Pass 2**: 新ノード種の検出
|
||||
- `CLIPTextEncodeSDXL` / `CLIPTextEncodeSDXLRefiner`: `text_g` / `text_l` が文字列値の場合のみ prompt_nodes に追加
|
||||
- `TextEncodeQwenImageEditPlus`: `inputs.prompt` を prompt_nodes に追加
|
||||
- `SDXLPromptStyler` / `SDXLPromptStylerAdvanced`: `text_positive` / `text_negative` をそれぞれ role 付きで追加
|
||||
- `CheckpointLoader` (WAS): `ct === "Checkpoint Loader"`（スペースあり）を含む判定に修正
|
||||
- `PrimitiveStringMultiline` / `PrimitiveString`: positive/negative ref がある場合のみ prompt_nodes に追加
|
||||
- `Power Lora Loader (rgthree)`: `lora_\d+` キーをスキャンして lora_nodes に追加
|
||||
|
||||
#### `static/js/comfyui-editor.js`
|
||||
|
||||
- KSampler パラメータエディタの hidden input に `data-seed-key` 属性を追加
|
||||
- Apply 時に `dataset.seedKey`（`"seed"` または `"noise_seed"`）を参照して正しいキーに書き込む
|
||||
|
||||
#### `static/js/i18n.js`
|
||||
|
||||
- EN / JA / ZH: `helpGen3` を "4-tab layout" / "4タブ構成" / "4标签布局" に更新
|
||||
- EN / JA / ZH: `helpFeederTitle` / `helpFeederDesc` / `helpFeeder1`〜`9` を追加
|
||||
|
||||
#### `static/js/app.js`
|
||||
|
||||
- `helpIdMap` に `wfm-help-feeder-title` / `wfm-help-feeder-desc` / `wfm-help-feeder-1`〜`9` を追加
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-29: v0.3.4 GenerateUI — Checkpoint Batch 刷新・Settings 横並びレイアウト・ヘルプ i18n 修正
|
||||
|
||||
### 概要
|
||||
|
||||
- Checkpoint Batch: フォルダツリー型ドロップダウン選択に刷新（テキスト入力の Include/Exclude フォルダ指定を廃止）
|
||||
- Checkpoint Batch: 第二階層以下のサブフォルダにも対応
|
||||
- Checkpoint Batch: 一時停止 / 再開（Pause/Resume）ボタンを追加
|
||||
- GenerateUI Settings タブ: KSampler と Latent Image を横並び（各50%幅）に変更
|
||||
- Help タブ: 最新機能に合わせて説明を更新し、i18n 対応漏れ（Gallery 5〜11、Gen 11）を修正
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `templates/index.html`
|
||||
|
||||
- Checkpoint Batch パネルの Include/Exclude テキスト入力を廃止し、チェックボックス付きドロップダウンに置き換え
|
||||
- フォルダヘッダー行: チェックボックス + ▶ 展開矢印 + フォルダ名 + ファイル数
|
||||
- ファイル行: インデント + チェックボックス + ファイル名（フルパスを tooltip 表示）
|
||||
- パネル上部: Filter 検索入力 + All / None ボタン
|
||||
- バッチ進行エリアのプログレスバー下に Pause ボタンを追加（実行中のみ有効）
|
||||
- ヘルプ: `wfm-help-gen-6`（横並びレイアウト）・`wfm-help-gen-11`（新バッチ機能）の初期テキストを更新
|
||||
|
||||
#### `static/js/generate-tab.js`
|
||||
|
||||
- `_parseFolderList()` / `_getModelFolder()` / `_filterCheckpoints()` を削除
|
||||
- `_ckptState = { mode: "all"|"some"|"none", selected: Set<modelPath> }` で選択状態を管理
|
||||
- `"all"`: 全選択（selected は空）、`"some"`: 部分選択、`"none"`: 全解除
|
||||
- `_buildFolderTree(models)` — モデルパスをフォルダ → モデルリストの Map に変換（`lastIndexOf("/")` で第二階層以下にも対応）
|
||||
- `_getFolderCheckState(folderModels)` — `"checked"` / `"indeterminate"` / `"unchecked"` を返す
|
||||
- `_toggleSingleModel()` / `_toggleFolderModels()` — 単体・フォルダ一括のトグルロジック（all/none/some の状態遷移を管理）
|
||||
- `_rebuildCkptList()` — フォルダグループ形式の DOM を動的生成（▶ 展開・折りたたみ、`checkbox.indeterminate` 対応）
|
||||
- `_getSelectedCheckpoints()` — mode に応じた選択リストを返す
|
||||
- `_ckptBatch.paused` フラグと `_waitIfPaused()` で一時停止・再開を実装（Promise 待機 + resolve で解除）
|
||||
- `_setPauseBtnState(paused)` — ボタンのテキスト・スタイルを Pause ↔ Resume で切り替え
|
||||
- `initCheckpointBatch()` に Pause/Resume ボタンのハンドラを追加
|
||||
- `_runBatchGenerate()`: ループ先頭で `await _waitIfPaused()`、一時停止時にステータステキストを "Paused" 表示、finally ブロックで状態クリーンアップ
|
||||
- Interrupt（Stop）ボタン: `_ckptBatch.paused = false` と `_resumeResolve()` を呼んで一時停止待機を即解除
|
||||
|
||||
#### `static/js/comfyui-editor.js`
|
||||
|
||||
- `renderSettingsTab()`: 外枠を `flex-direction: row` に変更し KSampler（左）と Latent Image（右）を横並び（各 `flex:1; min-width:0`）、間に縦の境界線（`border-right: 1px solid var(--wfm-border)`）
|
||||
|
||||
#### `static/css/main.css`
|
||||
|
||||
- `.wfm-ckpt-dropdown-wrap` / `.wfm-ckpt-dropdown-trigger` / `.wfm-ckpt-dropdown-arrow` / `.wfm-ckpt-dropdown-panel` — ドロップダウン UI スタイル
|
||||
- `.wfm-ckpt-folder-group` / `.wfm-ckpt-folder-header` / `.wfm-ckpt-folder-toggle` / `.wfm-ckpt-folder-name` / `.wfm-ckpt-folder-count` / `.wfm-ckpt-folder-files` — フォルダツリー UI スタイル
|
||||
- `.wfm-ckpt-item--indented` — ファイル行のインデント（`padding-left: 24px`）
|
||||
|
||||
#### `static/js/i18n.js`
|
||||
|
||||
- EN / JA / ZH: `helpGen6` を横並びレイアウトの説明に更新
|
||||
- EN / JA / ZH: `helpGen11` を追加（フォルダツリードロップダウン、Pause/Resume、Stop の説明）
|
||||
- EN / JA / ZH: `helpGallery5`〜`helpGallery10` を現在の HTML 構成に合わせて修正（旧版から5項目ずれていたのを解消）
|
||||
- EN / JA / ZH: `helpGallery11` を追加（PNG/JPEG/WebP/GIF 対応・メタデータ抽出の説明）
|
||||
|
||||
#### `static/js/app.js`
|
||||
|
||||
- `helpIdMap` に `"wfm-help-gen-11": "helpGen11"`、`"wfm-help-gallery-11": "helpGallery11"` を追加
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-28: v0.3.3 Promptタブ — ワイルドカード支援パネル・Impact Packシンボリックリンク連携・サブディレクトリ対応・GenerateUI修正
|
||||
|
||||
### 概要
|
||||
|
||||
@@ -9,6 +304,8 @@
|
||||
- 右ペイン（Col3）: ワイルドカード支援パネルを新設
|
||||
- ワイルドカードファイル管理（txt/yaml）の CRUD API を追加
|
||||
- Settingsタブに Wildcard Integration セクションを追加（Impact Pack ジャンクション/シンボリックリンク連携）
|
||||
- ワイルドカードフォルダのサブディレクトリファイルに対応（再帰スキャン・ディレクトリグループ表示・`__folder/name__` 形式）
|
||||
- GenerateUI: `ImpactWildcardEncode` ノードの実行エラーを修正
|
||||
|
||||
### 変更内容
|
||||
|
||||
@@ -95,6 +392,45 @@
|
||||
- `.wfm-wc-file-picker-wrap`、`.wfm-wc-file-picker`、`.wfm-wc-picker-item` — ファイルピッカー
|
||||
- `.wfm-wc-files-section`、`.wfm-wc-file-list`、`.wfm-wc-file-item`、`.wfm-wc-editor` — ファイルマネージャ
|
||||
|
||||
### ワイルドカードサブディレクトリ対応
|
||||
|
||||
#### `py/services/wildcard_service.py`
|
||||
|
||||
- `list_wildcards()` — `iterdir()` → `rglob("*")` に変更して再帰スキャン。レスポンスに `dir`（サブディレクトリパス、ルートは空文字）と `wc_name`（拡張子なし相対パス、例: `color/animals`）を追加
|
||||
- `_safe_path()` — `/` 区切りの相対パスを受け付けるよう変更。各パスコンポーネントを個別に検証してパストラバーサルをブロック
|
||||
- `save_file()` — `path.parent.mkdir(parents=True, exist_ok=True)` を追加してサブディレクトリを自動作成。レスポンスに `dir`、`wc_name` を追加
|
||||
|
||||
#### `static/js/prompt-tab.js`
|
||||
|
||||
- `wcRenderFileList()` — ファイルをディレクトリごとにグループ化して表示（ルートが先、サブディレクトリはヘッダ付き）。サブディレクトリ内ファイルは `wfm-wc-file-item--sub` クラスでインデント。挿入テキストを `__f.name__` → `__f.wc_name__`（例: `__color/animals__`）に変更
|
||||
- `wcUpdateFilePicker()` — 同様にディレクトリグループ表示。挿入テキストを `wc_name` ベースに変更
|
||||
- Editor Save ハンドラ — `name` のバリデーションを `folder/name` 形式に対応。`\` を `/` に正規化して各コンポーネントを個別検証。`filename` を `name.ext`（例: `color/animals.txt`）として構築
|
||||
|
||||
#### `templates/index.html`
|
||||
|
||||
- エディタ名入力の placeholder を `"name or folder/name"` に更新
|
||||
|
||||
#### `static/css/main.css`
|
||||
|
||||
- `.wfm-wc-dir-header` — ファイル一覧のディレクトリ区切りヘッダ
|
||||
- `.wfm-wc-file-item--sub` — サブディレクトリファイルの左インデント
|
||||
- `.wfm-wc-picker-dir` — ファイルピッカーのディレクトリ区切りラベル
|
||||
- `.wfm-wc-picker-item--sub` — ファイルピッカー内サブディレクトリファイルのインデント
|
||||
- Safari 向け `-webkit-user-select` を追加
|
||||
|
||||
### GenerateUI: ImpactWildcardEncode バリデーションエラー修正
|
||||
|
||||
#### `static/js/comfyui-workflow.js`
|
||||
|
||||
- `convertUiToApi()` — COMBO 型ウィジェット値を `/object_info` の選択肢リストと照合し、値が存在しない場合は先頭の有効な選択肢にフォールバック。Impact Pack の `ImpactWildcardEncode` ノードが `"Select Wildcard 🟢 Full Cache"` 等の動的プレースホルダー値を持つ場合でも `"Prompt outputs failed validation"` エラーが発生しなくなる
|
||||
- `analyzeWorkflow()` — `ImpactWildcardEncode` / `ImpactWildcardProcessor` を `prompt_nodes` として認識（KSampler の positive/negative 接続からロールを判定）。テキストフィールドキーを `text` ではなく `wildcard_text` として記録
|
||||
|
||||
#### `static/js/comfyui-editor.js`
|
||||
|
||||
- `renderPromptTab()` — select の option に `data-text-key` 属性を追加（`CLIPTextEncode` = `"text"`、`ImpactWildcardEncode` = `"wildcard_text"`）
|
||||
- Apply ハンドラ — `analysis.prompt_nodes` から `textKey` を取得して `inputs[textKey]` に書き込むよう変更（従来は `inputs.text` 固定）
|
||||
- `syncToWorkflow()` — 選択中の option の `data-text-key` を読んで正しいフィールドに書き込むよう変更。生成前の同期（`_coreGenerate` 直前の `comfyEditor.syncToWorkflow()` 経由）でも正しく反映される
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-28: v0.3.2 生成UIタブ — Checkpoint Batch・Seed UIレイアウト修正
|
||||
|
||||
@@ -5,7 +5,7 @@ A comprehensive workflow management and generation UI plugin for [ComfyUI](https
|
||||
Browse, organize, and execute workflows directly from a dedicated studio interface — without switching between windows or manually editing JSON.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Screenshots
|
||||
|
||||
@@ -13,17 +13,21 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
| Prompt Tab | Settings Tab |
|
||||
| Prompt Tab | Metadata Tab |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
| Settings Tab | Help & Support Tab |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
| Nodes Tab | Models Tab |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
| Gallery Tab | Help & Support Tab |
|
||||
| Gallery Tab | Nodes Tab |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
| Workflow Studio Library (ComfyUI) | ComfyUI Integration |
|
||||
|:---:|:---:|
|
||||
@@ -50,18 +54,31 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
|
||||
- **Embedded workflow metadata** — workflow JSON is embedded in the PNG (tEXt chunk), compatible with ComfyUI's drag-and-drop import
|
||||
- **Auto-import** — the captured workflow is automatically imported and appears in the Workflow tab
|
||||
|
||||
### GenerateUI Tab (v0.3.2)
|
||||
- **3-tab layout** — Input / Model / Settings tabs, each with a Raw JSON column on the right for instant preview and direct editing
|
||||
### GenerateUI Tab (v0.3.5)
|
||||
- **4-tab layout** — Input / Model / Settings / Feeder tabs; Input, Model, and Settings each include a Raw JSON column on the right for instant preview and direct editing
|
||||
- **Input tab** — Prompt (top) and Image drag-and-drop (bottom) in the left column; Raw JSON (540px) in the right column
|
||||
- **Model tab** — Checkpoint, VAE, LoRA, ControlNet, UNET, TextEncoder selectors with filter; Raw JSON on the right
|
||||
- **Settings tab** — KSampler (top) and LatentImage (bottom) in the left column; Raw JSON on the right
|
||||
- **Settings tab** — KSampler and Latent Image side by side at 50% width each; Raw JSON on the right
|
||||
- **Always-visible Raw JSON** — edit the API-format JSON directly from any tab with syntax highlighting; Apply button reloads the workflow
|
||||
- **One-click generation** — queue prompts to ComfyUI without leaving the studio
|
||||
- **Seed control** — randomize, lock, or manually set seeds; seed input and mode selector stacked vertically for readability
|
||||
- **Checkpoint Batch** — enable via checkbox in the right panel to sequentially generate with every checkpoint model; filter by include folders (comma-separated subfolder names, empty = all) and/or exclude folders; Stop button aborts after the current generation completes; amber progress bar tracks per-model progress
|
||||
- **UI-to-API conversion** — automatic conversion supporting subgraphs (nested workflows), COMBO types, and display-only node exclusion
|
||||
- **Checkpoint Batch** — enable via checkbox in the right panel to sequentially generate with every checkpoint model; select checkpoints by folder from the dropdown (check a folder to select all its files, expand with ▶ for individual file selection, supports any subfolder depth); Filter input to search; All / None buttons for quick selection; **Pause/Resume** suspends processing between models; Stop aborts after the current generation; amber progress bar tracks per-model progress
|
||||
- **UI-to-API conversion** — automatic conversion supporting subgraphs (nested workflows), COMBO types, and display-only node exclusion; improved analysis covers SDXL multi-hop CONDITIONING chains, CLIPTextEncodeSDXL, SDXLPromptStyler, KSamplerAdvanced, and more
|
||||
- **Eagle integration** — auto-save generated images to [Eagle](https://eagle.cool/) with metadata
|
||||
|
||||
### Feeder subtab (v0.3.5)
|
||||
Requires the **[comfyui-image-feeder](https://github.com/ketle-man/comfyui-image-feeder)** custom node.
|
||||
- **ImageFeeder node control** — select the target node from a dropdown auto-populated from the loaded workflow; edit all node parameters (Directory, Sort Mode, Index, Start/End Index, Batch Size, Seed, Use Selection) and Apply to the workflow
|
||||
- **Image library** — 3-pane layout: folder tree (left) browsing `user/default/image-loop-data/`, image grid with checkbox selection (center), preview panel with resolution and file size (right)
|
||||
- **Selection management** — check individual images; All / None buttons for the current folder; selected files are reflected in `selected_files` on Apply
|
||||
- **Presets** — save the current directory + selection as a named preset; load or delete presets (server-side persistence via `image-feeder-presets.json`)
|
||||
- **Continuous Run loop** — Run / Stop buttons below the presets; **After gen** mode controls index behavior after each generation:
|
||||
- **Loop** — advance index and wrap back to 0 when all images are exhausted (runs indefinitely)
|
||||
- **Increment** — advance index and auto-stop when all images are consumed
|
||||
- **Fixed** — always use the same index
|
||||
- **Index sync** — after each generation the node returns `next_index` via WebSocket (`image_loop_node_sync`); the Index field updates automatically
|
||||
- **Seed** — Run loop uses the right-pane seed setting (Random / Fixed / Increment / Decrement); the node's own Seed field only affects random sort order
|
||||
|
||||
### Prompt Tab
|
||||
- **3-column layout** — AI Assistant (left), Presets/Preset Manager tab-panel (center), Wildcard support (right)
|
||||
- **AI chat assistant** — powered by [Ollama](https://ollama.com/), generate and refine prompts interactively
|
||||
@@ -75,6 +92,16 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
|
||||
- **Wildcard input toolbar** — one-click buttons to insert `{|}`, `{n$|}`, `__|__`, `<lora::1:LBW=;>` and other wildcard syntax; wraps selected text when applicable
|
||||
- **Wildcard file manager** — create, view, and edit `.txt` / `.yaml` wildcard files stored in `user/default/Workflow-Studio/wildcard/`; click a filename in the file picker to insert `__filename__` at cursor
|
||||
|
||||
### Metadata Tab (v0.3.6)
|
||||
- **3-column layout** — Drop zone (left) | Model info (center) | LoRA + Prompt (right)
|
||||
- **File drop** — drop a ComfyUI-generated PNG / WebP or workflow JSON onto the drop zone (or click to open a file picker); PNG/WebP images are shown as a preview
|
||||
- **Model extraction** — automatically extracts Checkpoint, VAE, Diffusion Model, and Text Encoder names from the embedded workflow metadata
|
||||
- **LoRA extraction** — lists all LoRA models with `strength_model / strength_clip` values
|
||||
- **Prompt extraction** — lists positive and negative prompts with POS/NEG badges; click any entry to view the full text below
|
||||
- **Prompt actions** — Copy to clipboard, **GenUI:P/N** (set GenerateUI positive/negative prompt), **Prompt:P/N** (set Prompt tab preset positive/negative)
|
||||
- **Format support** — ComfyUI (PNG/WebP/JSON), SD WebUI, SD Forge, Fooocus; support for additional model types beyond SD1.5/SDXL/Illustrious is planned
|
||||
- **Format note** — supported formats are always shown in the left column; planned formats are noted in amber
|
||||
|
||||
### Settings Tab
|
||||
- **2-column layout** — left column for all settings; right column shows the Theme panel fixed in place (sticky)
|
||||
- **Collapsible sections** — all settings organized in accordion panels for a clean layout
|
||||
@@ -218,7 +245,18 @@ Click the **camera icon** (next to the W button) in ComfyUI's top bar to capture
|
||||
|
||||
## Changelog
|
||||
|
||||
### v0.3.3
|
||||
### v0.3.6
|
||||
- **Metadata Tab** — new tab (between Prompt and Gallery) that extracts model and prompt information from ComfyUI-generated PNG/WebP images and workflow JSON files; 3-column layout: drop zone with image preview (left), Checkpoint/VAE/Diffusion Model/Text Encoder lists (center), LoRA list with strength values + Prompt list with full-text viewer (right)
|
||||
- **Prompt action buttons** — Copy, GenUI:P/N (set GenerateUI prompts), Prompt:P/N (set Prompt tab preset prompts) directly from the extracted prompt text
|
||||
- **SDXL Prompt Styler support** — improved prompt extraction resolves `PromptStyler → CLIPTextEncode` link chains in both LiteGraph and API workflow formats
|
||||
- **Format support** — ComfyUI (PNG/WebP/JSON), SD WebUI, SD Forge, Fooocus; format note in the left column indicates planned support for additional model types
|
||||
|
||||
### v0.3.5
|
||||
- **Feeder subtab** — new subtab in GenerateUI for controlling [comfyui-image-feeder](https://github.com/ketle-man/comfyui-image-feeder) nodes; left pane: node selector + all ImageFeeder parameters + presets + Run/Stop controls; center pane: folder tree, image grid with checkbox selection, and preview panel
|
||||
- **Run loop with After gen modes** — Loop (wrap and continue), Increment (advance and auto-stop), Fixed (constant index); index updates automatically via WebSocket `image_loop_node_sync` after each generation; seed comes from the right-pane seed setting
|
||||
- **Workflow analysis improvements** — `analyzeWorkflow` now handles multi-hop CONDITIONING chains via BFS (up to 5 iterations), CLIPTextEncodeSDXL / CLIPTextEncodeSDXLRefiner, SDXLPromptStyler / SDXLPromptStylerAdvanced, KSamplerAdvanced (`noise_seed`), TextEncodeQwenImageEditPlus, PrimitiveStringMultiline, Power Lora Loader (rgthree), and `Checkpoint Loader` (WAS) with space in the class name
|
||||
|
||||
### v0.3.4
|
||||
- **Wildcard support panel** — new right column in the Prompt tab with a one-click toolbar for inserting wildcard syntax (`{|}`, `{n$|}`, `__|__`, `:`, `;`, `$`, `<lora::1:LBW=;>`, `[]`, single/multi pick) and wrapping selected text; dedicated prompt textarea and wildcard file picker (click to insert `__filename__`)
|
||||
- **Wildcard file manager** — create, view, edit, and delete `.txt` / `.yaml` wildcard files stored in `user/default/Workflow-Studio/wildcard/`; editor opens inline with filename input and save/cancel controls
|
||||
- **Preset/Preset Manager tab switch** — the center pane of the Prompt tab is now a two-tab panel (Presets / Preset Manager) to reclaim horizontal space for the new wildcard panel
|
||||
@@ -375,7 +413,7 @@ ComfyUI-Workflow-Studio/
|
||||
│ ├── settings_service.py # Settings persistence
|
||||
│ └── png_extractor.py # PNG metadata extraction
|
||||
├── templates/
|
||||
│ └── index.html # SPA template (Workflow/GenerateUI/Prompt/Settings/Nodes/Models/Help)
|
||||
│ └── index.html # SPA template (Workflow/GenerateUI/Prompt/Metadata/Gallery/Nodes/Models/Settings/Help)
|
||||
├── static/
|
||||
│ ├── favicon.svg # Browser tab icon (W+S Wave)
|
||||
│ ├── css/main.css # Styles
|
||||
@@ -383,7 +421,9 @@ ComfyUI-Workflow-Studio/
|
||||
│ ├── app.js # App initialization & routing
|
||||
│ ├── workflow-tab.js # Workflow browser
|
||||
│ ├── generate-tab.js # Generation UI
|
||||
│ ├── feeder-tab.js # Feeder subtab (ImageFeeder node control + image library)
|
||||
│ ├── prompt-tab.js # AI assistant & presets
|
||||
│ ├── metadata-tab.js # Metadata extraction & display (PNG/WebP/JSON)
|
||||
│ ├── settings-tab.js # Settings panel
|
||||
│ ├── comfyui-client.js # ComfyUI WebSocket/API client
|
||||
│ ├── nodes-tab.js # Node browser & node sets
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -24,17 +24,23 @@ class WildcardService:
|
||||
# ------------------------------------------------------------------
|
||||
|
||||
def list_wildcards(self) -> list[dict]:
|
||||
"""Return sorted list of wildcard files (follows junction/symlink)."""
|
||||
"""Return sorted list of wildcard files recursively (follows junction/symlink)."""
|
||||
if not self.wildcard_dir.exists():
|
||||
return []
|
||||
files = []
|
||||
for path in sorted(self.wildcard_dir.iterdir()):
|
||||
for path in sorted(self.wildcard_dir.rglob("*")):
|
||||
if path.is_file() and path.suffix.lstrip(".").lower() in ALLOWED_EXTS:
|
||||
rel = path.relative_to(self.wildcard_dir)
|
||||
dir_posix = rel.parent.as_posix()
|
||||
if dir_posix == ".":
|
||||
dir_posix = ""
|
||||
files.append({
|
||||
"name": path.stem,
|
||||
"filename": path.name,
|
||||
"filename": rel.as_posix(),
|
||||
"ext": path.suffix.lstrip(".").lower(),
|
||||
"size": path.stat().st_size,
|
||||
"dir": dir_posix,
|
||||
"wc_name": rel.with_suffix("").as_posix(),
|
||||
})
|
||||
return files
|
||||
|
||||
@@ -50,12 +56,19 @@ class WildcardService:
|
||||
path = self._safe_path(filename)
|
||||
if path is None:
|
||||
raise ValueError(f"Invalid filename: {filename}")
|
||||
path.parent.mkdir(parents=True, exist_ok=True)
|
||||
path.write_text(content, encoding="utf-8")
|
||||
rel = path.relative_to(self.wildcard_dir)
|
||||
dir_posix = rel.parent.as_posix()
|
||||
if dir_posix == ".":
|
||||
dir_posix = ""
|
||||
return {
|
||||
"name": path.stem,
|
||||
"filename": path.name,
|
||||
"filename": rel.as_posix(),
|
||||
"ext": path.suffix.lstrip(".").lower(),
|
||||
"size": path.stat().st_size,
|
||||
"dir": dir_posix,
|
||||
"wc_name": rel.with_suffix("").as_posix(),
|
||||
}
|
||||
|
||||
def delete_file(self, filename: str) -> None:
|
||||
@@ -66,12 +79,19 @@ class WildcardService:
|
||||
path.unlink()
|
||||
|
||||
def _safe_path(self, filename: str) -> Path | None:
|
||||
if not filename or ".." in filename or "/" in filename or "\\" in filename:
|
||||
if not filename or not filename.strip():
|
||||
return None
|
||||
ext = Path(filename).suffix.lstrip(".").lower()
|
||||
# Normalize to forward slashes and strip leading/trailing slashes
|
||||
filename = filename.replace("\\", "/").strip("/")
|
||||
# Validate each path component — block traversal and empty parts
|
||||
parts = filename.split("/")
|
||||
for p in parts:
|
||||
if not p or p == ".." or p == ".":
|
||||
return None
|
||||
ext = Path(parts[-1]).suffix.lstrip(".").lower()
|
||||
if ext not in ALLOWED_EXTS:
|
||||
return None
|
||||
return self.wildcard_dir / filename
|
||||
return self.wildcard_dir.joinpath(*parts)
|
||||
|
||||
# ------------------------------------------------------------------
|
||||
# Impact Pack integration
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
[project]
|
||||
name = "comfyui-workflow-studio"
|
||||
description = "A comprehensive workflow management and generation UI plugin for ComfyUI. Browse, organize, and execute workflows from a dedicated studio interface."
|
||||
version = "0.2.7"
|
||||
version = "0.3.7"
|
||||
license = "MIT"
|
||||
requires-python = ">= 3.10"
|
||||
dependencies = ["jinja2"]
|
||||
@@ -10,7 +10,7 @@ dependencies = ["jinja2"]
|
||||
Repository = "https://github.com/ketle-man/ComfyUI-Workflow-Studio"
|
||||
|
||||
[tool.comfy]
|
||||
PublisherId = "ketle-man"
|
||||
PublisherId = "statsu"
|
||||
DisplayName = "Workflow Studio"
|
||||
Icon = "https://raw.githubusercontent.com/ketle-man/ComfyUI-Workflow-Studio/main/assets/icon.svg"
|
||||
Icon = "https://raw.githubusercontent.com/ketle-man/ComfyUI-Workflow-Studio/main/docs/thumb.png"
|
||||
Banner = "https://raw.githubusercontent.com/ketle-man/ComfyUI-Workflow-Studio/main/assets/banner.svg"
|
||||
|
||||
@@ -688,6 +688,140 @@ body {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
/* Checkpoint batch dropdown */
|
||||
.wfm-ckpt-dropdown-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.wfm-ckpt-dropdown-trigger {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
background: var(--wfm-input-bg, var(--wfm-bg));
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius);
|
||||
color: var(--wfm-text-primary);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
.wfm-ckpt-dropdown-trigger:hover {
|
||||
border-color: var(--wfm-primary);
|
||||
}
|
||||
.wfm-ckpt-dropdown-arrow {
|
||||
font-size: 9px;
|
||||
color: var(--wfm-text-secondary);
|
||||
transition: transform 0.15s;
|
||||
flex-shrink: 0;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.wfm-ckpt-dropdown-wrap.open .wfm-ckpt-dropdown-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.wfm-ckpt-dropdown-panel {
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
top: calc(100% + 2px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--wfm-surface);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.35);
|
||||
}
|
||||
.wfm-ckpt-dropdown-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.wfm-ckpt-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
color: var(--wfm-text-primary);
|
||||
}
|
||||
.wfm-ckpt-item:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
.wfm-ckpt-item input[type=checkbox] {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
accent-color: var(--wfm-primary);
|
||||
}
|
||||
.wfm-ckpt-item-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wfm-ckpt-item--indented {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.wfm-ckpt-folder-group {
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.wfm-ckpt-folder-group:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.wfm-ckpt-folder-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-secondary);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.wfm-ckpt-folder-header:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
.wfm-ckpt-folder-header input[type=checkbox] {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
accent-color: var(--wfm-primary);
|
||||
}
|
||||
.wfm-ckpt-folder-toggle {
|
||||
font-size: 8px;
|
||||
color: var(--wfm-text-secondary);
|
||||
transition: transform 0.15s;
|
||||
flex-shrink: 0;
|
||||
width: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wfm-ckpt-folder-group.open .wfm-ckpt-folder-toggle {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.wfm-ckpt-folder-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wfm-ckpt-folder-count {
|
||||
font-size: 10px;
|
||||
color: var(--wfm-text-secondary);
|
||||
opacity: 0.65;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wfm-ckpt-folder-files {
|
||||
display: none;
|
||||
}
|
||||
.wfm-ckpt-folder-group.open .wfm-ckpt-folder-files {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Generation panel in right column */
|
||||
.wfm-gen-panel {
|
||||
background: var(--wfm-surface);
|
||||
@@ -2069,6 +2203,23 @@ body {
|
||||
color: var(--wfm-primary);
|
||||
}
|
||||
|
||||
.wfm-wc-picker-dir {
|
||||
padding: 4px 10px 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-secondary);
|
||||
background: var(--wfm-bg);
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wfm-wc-picker-item--sub {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
/* File manager section */
|
||||
.wfm-wc-files-section {
|
||||
display: flex;
|
||||
@@ -2105,6 +2256,19 @@ body {
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
.wfm-wc-dir-header {
|
||||
padding: 4px 8px 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-secondary);
|
||||
background: var(--wfm-bg);
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wfm-wc-file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -2115,6 +2279,10 @@ body {
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.wfm-wc-file-item--sub {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.wfm-wc-file-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -3659,3 +3827,535 @@ body {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* ── Feeder Tab ─────────────────────────────────────────────────── */
|
||||
.wfm-feeder-layout {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-feeder-settings {
|
||||
width: 220px;
|
||||
min-width: 180px;
|
||||
flex-shrink: 0;
|
||||
padding: 10px;
|
||||
border-right: 1px solid var(--wfm-border, rgba(255,255,255,0.1));
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wfm-feeder-pane-header {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-secondary, #8892a4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 4px 0 6px;
|
||||
border-bottom: 1px solid var(--wfm-border, rgba(255,255,255,0.1));
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wfm-feeder-field-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.wfm-feeder-label {
|
||||
font-size: 11px;
|
||||
color: var(--wfm-text-secondary, #8892a4);
|
||||
white-space: nowrap;
|
||||
width: 82px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-feeder-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wfm-feeder-library {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-feeder-status-bar {
|
||||
font-size: 11px;
|
||||
color: var(--wfm-text-secondary, #8892a4);
|
||||
padding: 4px 10px;
|
||||
border-bottom: 1px solid var(--wfm-border, rgba(255,255,255,0.1));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-feeder-library-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-feeder-tree-pane {
|
||||
width: 180px;
|
||||
min-width: 140px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--wfm-border, rgba(255,255,255,0.1));
|
||||
padding: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-feeder-tree-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.wfm-feeder-tree-row {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--wfm-text, #e0e4f0);
|
||||
}
|
||||
|
||||
.wfm-feeder-tree-row:hover {
|
||||
background: rgba(108, 142, 245, 0.12);
|
||||
}
|
||||
|
||||
.wfm-feeder-tree-row.active {
|
||||
background: rgba(108, 142, 245, 0.25);
|
||||
color: var(--wfm-primary, #6c8ef5);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wfm-feeder-tree-msg {
|
||||
font-size: 12px;
|
||||
color: var(--wfm-text-secondary, #8892a4);
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wfm-feeder-grid-pane {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.wfm-feeder-grid {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 6px;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
|
||||
.wfm-feeder-grid-msg {
|
||||
font-size: 12px;
|
||||
color: var(--wfm-text-secondary, #8892a4);
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wfm-feeder-card {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid transparent;
|
||||
background: rgba(255,255,255,0.04);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.15s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wfm-feeder-card:hover {
|
||||
border-color: rgba(108, 142, 245, 0.4);
|
||||
}
|
||||
|
||||
.wfm-feeder-card.selected {
|
||||
border-color: var(--wfm-primary, #6c8ef5);
|
||||
background: rgba(108, 142, 245, 0.1);
|
||||
}
|
||||
|
||||
.wfm-feeder-card-cb {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--wfm-primary, #6c8ef5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wfm-feeder-card-img {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wfm-feeder-card-name {
|
||||
font-size: 10px;
|
||||
color: var(--wfm-text-secondary, #8892a4);
|
||||
padding: 3px 4px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wfm-feeder-preview-pane {
|
||||
width: 160px;
|
||||
min-width: 130px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--wfm-border, rgba(255,255,255,0.1));
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-feeder-preview-img {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
object-fit: contain;
|
||||
max-height: 140px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wfm-feeder-preview-name {
|
||||
font-size: 11px;
|
||||
color: var(--wfm-text, #e0e4f0);
|
||||
font-weight: 600;
|
||||
word-break: break-all;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.wfm-feeder-preview-info {
|
||||
font-size: 10px;
|
||||
color: var(--wfm-text-secondary, #8892a4);
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Metadata Tab
|
||||
============================================ */
|
||||
|
||||
#wfm-tab-metadata {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-metadata-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 220px 1fr 1fr;
|
||||
gap: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Col1: Drop zone + preview */
|
||||
.wfm-metadata-col1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border-right: 1px solid var(--wfm-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-metadata-drop-zone {
|
||||
flex: 0 0 180px;
|
||||
border: 2px dashed var(--wfm-border);
|
||||
border-radius: var(--wfm-radius);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: var(--wfm-surface);
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wfm-metadata-drop-zone:hover,
|
||||
.wfm-metadata-drop-zone.drag-over {
|
||||
border-color: var(--wfm-primary);
|
||||
background: rgba(74, 158, 255, 0.08);
|
||||
}
|
||||
|
||||
.wfm-meta-drop-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wfm-meta-drop-main {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-secondary);
|
||||
}
|
||||
|
||||
.wfm-meta-drop-sub {
|
||||
font-size: 10px;
|
||||
color: var(--wfm-text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.wfm-meta-preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: calc(var(--wfm-radius) - 2px);
|
||||
}
|
||||
|
||||
.wfm-meta-file-info {
|
||||
font-size: 10px;
|
||||
color: var(--wfm-text-secondary);
|
||||
word-break: break-all;
|
||||
line-height: 1.4;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Col2 & Col3 */
|
||||
.wfm-metadata-col2,
|
||||
.wfm-metadata-col3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid var(--wfm-border);
|
||||
}
|
||||
|
||||
.wfm-metadata-col3 {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.wfm-meta-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wfm-meta-section.wfm-meta-section-empty .wfm-meta-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wfm-meta-section.wfm-meta-section-empty .wfm-meta-section-title {
|
||||
color: var(--wfm-text-secondary);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.wfm-meta-section-title {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
}
|
||||
|
||||
.wfm-meta-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow-y: auto;
|
||||
max-height: 140px;
|
||||
}
|
||||
|
||||
/* Items */
|
||||
.wfm-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--wfm-radius-sm);
|
||||
background: var(--wfm-surface);
|
||||
font-size: 11px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wfm-meta-item-clickable {
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.wfm-meta-item-clickable:hover {
|
||||
background: var(--wfm-surface-hover);
|
||||
}
|
||||
|
||||
.wfm-meta-item-clickable.selected {
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
border: 1px solid rgba(74, 158, 255, 0.4);
|
||||
}
|
||||
|
||||
.wfm-meta-item-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--wfm-text);
|
||||
}
|
||||
|
||||
.wfm-meta-item-badge {
|
||||
font-size: 10px;
|
||||
color: var(--wfm-text-secondary);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-meta-badge-pos {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
background: rgba(46, 213, 115, 0.2);
|
||||
color: var(--wfm-success);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-meta-badge-neg {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 71, 87, 0.2);
|
||||
color: var(--wfm-danger);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Prompt section full text */
|
||||
.wfm-meta-prompt-section {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.wfm-meta-prompt-full-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.wfm-meta-prompt-full-label {
|
||||
font-size: 10px;
|
||||
color: var(--wfm-text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wfm-meta-prompt-full {
|
||||
flex: 1;
|
||||
min-height: 80px;
|
||||
resize: none;
|
||||
background: var(--wfm-surface);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius-sm);
|
||||
color: var(--wfm-text);
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
padding: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wfm-meta-prompt-full:focus {
|
||||
outline: none;
|
||||
border-color: var(--wfm-primary);
|
||||
}
|
||||
|
||||
.wfm-meta-prompt-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-meta-prompt-actions .wfm-btn {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 10px;
|
||||
padding: 3px 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes wfm-meta-btn-flash {
|
||||
0% { background: var(--wfm-success); color: #fff; }
|
||||
100% { background: ''; color: ''; }
|
||||
}
|
||||
|
||||
.wfm-meta-btn-flash {
|
||||
animation: wfm-meta-btn-flash 0.5s ease-out;
|
||||
}
|
||||
|
||||
.wfm-meta-format-note {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius-sm);
|
||||
font-size: 10px;
|
||||
color: var(--wfm-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wfm-meta-format-note-title {
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-secondary);
|
||||
margin-bottom: 4px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.wfm-meta-format-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.wfm-meta-format-list li::before {
|
||||
content: "✓ ";
|
||||
color: var(--wfm-success);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.wfm-meta-format-todo {
|
||||
font-size: 9px;
|
||||
color: var(--wfm-warning);
|
||||
opacity: 0.8;
|
||||
border-top: 1px solid var(--wfm-border);
|
||||
padding-top: 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
+12
-1
@@ -90,7 +90,7 @@ function initTabs() {
|
||||
|
||||
function applyI18nToHtml() {
|
||||
// Tab labels
|
||||
const tabMap = { workflow: "tabWorkflow", nodes: "tabNodes", models: "tabModels", generate: "tabGenerate", prompt: "tabPrompt", gallery: "tabGallery", settings: "tabSettings", help: "tabHelp" };
|
||||
const tabMap = { workflow: "tabWorkflow", nodes: "tabNodes", models: "tabModels", generate: "tabGenerate", prompt: "tabPrompt", metadata: "tabMetadata", gallery: "tabGallery", settings: "tabSettings", help: "tabHelp" };
|
||||
document.querySelectorAll(".wfm-tab").forEach((tab) => {
|
||||
const key = tabMap[tab.dataset.tab];
|
||||
if (key) tab.textContent = t(key);
|
||||
@@ -265,6 +265,14 @@ function applyI18nToHtml() {
|
||||
"wfm-help-gen-3": "helpGen3", "wfm-help-gen-4": "helpGen4",
|
||||
"wfm-help-gen-5": "helpGen5", "wfm-help-gen-6": "helpGen6", "wfm-help-gen-7": "helpGen7",
|
||||
"wfm-help-gen-8": "helpGen8", "wfm-help-gen-9": "helpGen9", "wfm-help-gen-10": "helpGen10",
|
||||
"wfm-help-gen-11": "helpGen11",
|
||||
"wfm-help-feeder-title": "helpFeederTitle",
|
||||
"wfm-help-feeder-desc": "helpFeederDesc",
|
||||
"wfm-help-feeder-1": "helpFeeder1", "wfm-help-feeder-2": "helpFeeder2",
|
||||
"wfm-help-feeder-3": "helpFeeder3", "wfm-help-feeder-4": "helpFeeder4",
|
||||
"wfm-help-feeder-5": "helpFeeder5", "wfm-help-feeder-6": "helpFeeder6",
|
||||
"wfm-help-feeder-7": "helpFeeder7", "wfm-help-feeder-8": "helpFeeder8",
|
||||
"wfm-help-feeder-9": "helpFeeder9",
|
||||
"wfm-help-prompt-1": "helpPrompt1", "wfm-help-prompt-2": "helpPrompt2",
|
||||
"wfm-help-prompt-3": "helpPrompt3", "wfm-help-prompt-4": "helpPrompt4",
|
||||
"wfm-help-prompt-5": "helpPrompt5", "wfm-help-prompt-6": "helpPrompt6",
|
||||
@@ -290,6 +298,7 @@ function applyI18nToHtml() {
|
||||
"wfm-help-gallery-5": "helpGallery5", "wfm-help-gallery-6": "helpGallery6",
|
||||
"wfm-help-gallery-7": "helpGallery7", "wfm-help-gallery-8": "helpGallery8",
|
||||
"wfm-help-gallery-9": "helpGallery9", "wfm-help-gallery-10": "helpGallery10",
|
||||
"wfm-help-gallery-11": "helpGallery11",
|
||||
"wfm-help-sidepanel-title": "helpSidepanelTitle",
|
||||
"wfm-help-sidepanel-1": "helpSidepanel1", "wfm-help-sidepanel-2": "helpSidepanel2",
|
||||
"wfm-help-sidepanel-3": "helpSidepanel3", "wfm-help-sidepanel-4": "helpSidepanel4",
|
||||
@@ -353,6 +362,7 @@ import { initPromptTab } from "./prompt-tab.js";
|
||||
import { initSettingsTab, applyTheme, getSavedTheme } from "./settings-tab.js";
|
||||
import { initModelsTab } from "./models-tab.js";
|
||||
import { initGalleryTab } from "./gallery-tab.js";
|
||||
import { initMetadataTab } from "./metadata-tab.js";
|
||||
|
||||
// Apply saved theme immediately to prevent flash of default theme
|
||||
applyTheme(getSavedTheme());
|
||||
@@ -367,6 +377,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
initModelsTab();
|
||||
initGenerateTab();
|
||||
initPromptTab();
|
||||
initMetadataTab();
|
||||
initGalleryTab();
|
||||
|
||||
console.log("Workflow Studio: App initialized");
|
||||
|
||||
+23
-13
@@ -77,7 +77,7 @@ export const comfyEditor = {
|
||||
<label>Positive Prompt</label>
|
||||
<div style="display:flex;gap:8px;margin-bottom:6px;">
|
||||
<select id="wfm-prompt-pos-target" class="wfm-select" style="width:auto;flex:1">
|
||||
${positiveNodes.map((n) => `<option value="${n.id}" selected>ID:${n.id} (${n.title})</option>`).join("")}
|
||||
${positiveNodes.map((n) => `<option value="${n.id}" data-text-key="${n.textKey || "text"}" selected>ID:${n.id} (${n.title})</option>`).join("")}
|
||||
${nodeOpts}
|
||||
</select>
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-prompt-pos-apply">Apply</button>
|
||||
@@ -88,7 +88,7 @@ export const comfyEditor = {
|
||||
<label>Negative Prompt</label>
|
||||
<div style="display:flex;gap:8px;margin-bottom:6px;">
|
||||
<select id="wfm-prompt-neg-target" class="wfm-select" style="width:auto;flex:1">
|
||||
${negativeNodes.map((n) => `<option value="${n.id}" selected>ID:${n.id} (${n.title})</option>`).join("")}
|
||||
${negativeNodes.map((n) => `<option value="${n.id}" data-text-key="${n.textKey || "text"}" selected>ID:${n.id} (${n.title})</option>`).join("")}
|
||||
${nodeOpts}
|
||||
</select>
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-prompt-neg-apply">Apply</button>
|
||||
@@ -101,7 +101,9 @@ export const comfyEditor = {
|
||||
const nodeId = document.getElementById("wfm-prompt-pos-target")?.value;
|
||||
const text = document.getElementById("wfm-prompt-pos-text")?.value;
|
||||
if (nodeId && comfyUI.currentWorkflow?.[nodeId]) {
|
||||
comfyUI.currentWorkflow[nodeId].inputs.text = text;
|
||||
const promptNode = (analysis.prompt_nodes || []).find(n => n.id === nodeId);
|
||||
const textKey = promptNode?.textKey || "text";
|
||||
comfyUI.currentWorkflow[nodeId].inputs[textKey] = text;
|
||||
_syncRawJson();
|
||||
}
|
||||
});
|
||||
@@ -110,7 +112,9 @@ export const comfyEditor = {
|
||||
const nodeId = document.getElementById("wfm-prompt-neg-target")?.value;
|
||||
const text = document.getElementById("wfm-prompt-neg-text")?.value;
|
||||
if (nodeId && comfyUI.currentWorkflow?.[nodeId]) {
|
||||
comfyUI.currentWorkflow[nodeId].inputs.text = text;
|
||||
const promptNode = (analysis.prompt_nodes || []).find(n => n.id === nodeId);
|
||||
const textKey = promptNode?.textKey || "text";
|
||||
comfyUI.currentWorkflow[nodeId].inputs[textKey] = text;
|
||||
_syncRawJson();
|
||||
}
|
||||
});
|
||||
@@ -209,11 +213,11 @@ export const comfyEditor = {
|
||||
const latent = analysis.latent_nodes?.[0];
|
||||
|
||||
el.innerHTML = `
|
||||
<div style="display:flex;flex-direction:column;gap:0;">
|
||||
<div style="padding-bottom:14px;border-bottom:1px solid var(--wfm-border);margin-bottom:14px;">
|
||||
<div style="display:flex;flex-direction:row;gap:0;align-items:flex-start;">
|
||||
<div style="flex:1;min-width:0;padding-right:14px;border-right:1px solid var(--wfm-border);">
|
||||
<h3 style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--wfm-text-secondary);margin:0 0 12px;">KSampler</h3>
|
||||
${sampler ? `
|
||||
<input type="hidden" id="wfm-settings-sampler-id" value="${sampler.id}">
|
||||
<input type="hidden" id="wfm-settings-sampler-id" value="${sampler.id}" data-seed-key="${sampler.seedKey || "seed"}">
|
||||
<div class="wfm-form-group">
|
||||
<label>Seed</label>
|
||||
<input type="number" class="wfm-input" id="wfm-settings-seed" value="${sampler.seed ?? -1}">
|
||||
@@ -245,7 +249,7 @@ export const comfyEditor = {
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-settings-sampler-apply">Apply</button>
|
||||
` : "<p class='wfm-placeholder'>No KSampler node found</p>"}
|
||||
</div>
|
||||
<div>
|
||||
<div style="flex:1;min-width:0;padding-left:14px;">
|
||||
<h3 style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--wfm-text-secondary);margin:0 0 12px;">Latent Image</h3>
|
||||
${latent ? `
|
||||
<input type="hidden" id="wfm-settings-latent-id" value="${latent.id}">
|
||||
@@ -271,7 +275,9 @@ export const comfyEditor = {
|
||||
const nodeId = document.getElementById("wfm-settings-sampler-id")?.value;
|
||||
if (!nodeId || !comfyUI.currentWorkflow?.[nodeId]) return;
|
||||
const inputs = comfyUI.currentWorkflow[nodeId].inputs;
|
||||
inputs.seed = parseInt(document.getElementById("wfm-settings-seed")?.value) || -1;
|
||||
// KSamplerAdvanced uses noise_seed; fall back to seed
|
||||
const seedKey = document.getElementById("wfm-settings-sampler-id")?.dataset?.seedKey || "seed";
|
||||
inputs[seedKey] = parseInt(document.getElementById("wfm-settings-seed")?.value) || -1;
|
||||
inputs.steps = parseInt(document.getElementById("wfm-settings-steps")?.value) || 20;
|
||||
inputs.cfg = parseFloat(document.getElementById("wfm-settings-cfg")?.value) || 7;
|
||||
inputs.sampler_name = document.getElementById("wfm-settings-sampler-name")?.value;
|
||||
@@ -402,16 +408,20 @@ export const comfyEditor = {
|
||||
|
||||
syncToWorkflow() {
|
||||
// Sync prompt texts before generation
|
||||
const posTarget = document.getElementById("wfm-prompt-pos-target")?.value;
|
||||
const posSelect = document.getElementById("wfm-prompt-pos-target");
|
||||
const posTarget = posSelect?.value;
|
||||
const posText = document.getElementById("wfm-prompt-pos-text")?.value;
|
||||
if (posTarget && comfyUI.currentWorkflow?.[posTarget]) {
|
||||
comfyUI.currentWorkflow[posTarget].inputs.text = posText;
|
||||
const posTextKey = posSelect.selectedOptions[0]?.dataset?.textKey || "text";
|
||||
comfyUI.currentWorkflow[posTarget].inputs[posTextKey] = posText;
|
||||
}
|
||||
|
||||
const negTarget = document.getElementById("wfm-prompt-neg-target")?.value;
|
||||
const negSelect = document.getElementById("wfm-prompt-neg-target");
|
||||
const negTarget = negSelect?.value;
|
||||
const negText = document.getElementById("wfm-prompt-neg-text")?.value;
|
||||
if (negTarget && comfyUI.currentWorkflow?.[negTarget]) {
|
||||
comfyUI.currentWorkflow[negTarget].inputs.text = negText;
|
||||
const negTextKey = negSelect.selectedOptions[0]?.dataset?.textKey || "text";
|
||||
comfyUI.currentWorkflow[negTarget].inputs[negTextKey] = negText;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
+183
-10
@@ -343,6 +343,24 @@ export const comfyWorkflow = {
|
||||
wIdx++;
|
||||
}
|
||||
}
|
||||
// For COMBO inputs, validate the value against the available choices.
|
||||
// Dynamic COMBO options (e.g. Impact Pack's "Select to add Wildcard") may
|
||||
// differ between the saved workflow and the current ComfyUI instance
|
||||
// (e.g. "Select Wildcard 🟢 Full Cache" vs "Select Wildcard"), causing
|
||||
// "Prompt outputs failed validation". Fall back to first choice when mismatch.
|
||||
if (expectedType === "COMBO") {
|
||||
const allInputDefs = {
|
||||
...(objectInfo[node.type]?.input?.required || {}),
|
||||
...(objectInfo[node.type]?.input?.optional || {}),
|
||||
};
|
||||
const spec = allInputDefs[name];
|
||||
if (spec) {
|
||||
const choices = Array.isArray(spec[0]) ? spec[0] : null;
|
||||
if (choices && choices.length > 0 && !choices.includes(val)) {
|
||||
val = choices[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
inputs[name] = val;
|
||||
}
|
||||
} else {
|
||||
@@ -446,7 +464,7 @@ export const comfyWorkflow = {
|
||||
|
||||
if (!workflow) return result;
|
||||
|
||||
// Build sampler connections for prompt classification
|
||||
// === Pass 1: Collect sampler refs + all_nodes ===
|
||||
const samplerPositiveRef = {};
|
||||
const samplerNegativeRef = {};
|
||||
|
||||
@@ -462,40 +480,174 @@ export const comfyWorkflow = {
|
||||
if (Array.isArray(inputs.positive)) samplerPositiveRef[inputs.positive[0]] = true;
|
||||
if (Array.isArray(inputs.negative)) samplerNegativeRef[inputs.negative[0]] = true;
|
||||
|
||||
// KSamplerAdvanced uses noise_seed instead of seed
|
||||
const seedKey = "seed" in inputs ? "seed" : "noise_seed";
|
||||
result.sampler_nodes.push({
|
||||
id, type: ct, title,
|
||||
seed: inputs.seed, steps: inputs.steps, cfg: inputs.cfg,
|
||||
seed: inputs.seed ?? inputs.noise_seed,
|
||||
seedKey,
|
||||
steps: inputs.steps, cfg: inputs.cfg,
|
||||
sampler_name: inputs.sampler_name, scheduler: inputs.scheduler,
|
||||
denoise: inputs.denoise,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// === Pass 1b: Expand refs through CONDITIONING graph (BFS, 5 iterations) ===
|
||||
// Nodes that pass CONDITIONING through without changing positive/negative role
|
||||
const COND_PASSTHROUGH = new Set([
|
||||
"ConditioningCombine", "ConditioningConcat", "ConditioningAverage",
|
||||
"ConditioningZeroOut", "ConditioningSetTimestepRange",
|
||||
"ControlNetApply", "ControlNetApplyAdvanced",
|
||||
"IPAdapterApply", "IPAdapterApplyFaceID",
|
||||
"StyleModelApply",
|
||||
]);
|
||||
|
||||
for (let iter = 0; iter < 5; iter++) {
|
||||
for (const [id, node] of Object.entries(workflow)) {
|
||||
if (!node?.class_type) continue;
|
||||
const ct = node.class_type;
|
||||
const inputs = node.inputs || {};
|
||||
const isPos = !!samplerPositiveRef[id];
|
||||
const isNeg = !!samplerNegativeRef[id];
|
||||
if (!isPos && !isNeg) continue;
|
||||
|
||||
if (COND_PASSTHROUGH.has(ct)) {
|
||||
for (const v of Object.values(inputs)) {
|
||||
if (Array.isArray(v)) {
|
||||
if (isPos) samplerPositiveRef[v[0]] = true;
|
||||
if (isNeg) samplerNegativeRef[v[0]] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Propagate role through text encoder linked inputs (CLIPTextEncode → upstream text source)
|
||||
if (ct === "CLIPTextEncode") {
|
||||
const tv = inputs.text;
|
||||
if (Array.isArray(tv)) {
|
||||
if (isPos) samplerPositiveRef[tv[0]] = true;
|
||||
if (isNeg) samplerNegativeRef[tv[0]] = true;
|
||||
}
|
||||
}
|
||||
if (ct === "CLIPTextEncodeSDXL" || ct === "CLIPTextEncodeSDXLRefiner") {
|
||||
for (const key of ["text_g", "text_l"]) {
|
||||
const tv = inputs[key];
|
||||
if (Array.isArray(tv)) {
|
||||
if (isPos) samplerPositiveRef[tv[0]] = true;
|
||||
if (isNeg) samplerNegativeRef[tv[0]] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (ct === "ImpactWildcardEncode" || ct === "ImpactWildcardProcessor") {
|
||||
const tv = inputs.wildcard_text;
|
||||
if (Array.isArray(tv)) {
|
||||
if (isPos) samplerPositiveRef[tv[0]] = true;
|
||||
if (isNeg) samplerNegativeRef[tv[0]] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// === Pass 2: Main analysis ===
|
||||
for (const [id, node] of Object.entries(workflow)) {
|
||||
if (!node?.class_type) continue;
|
||||
const ct = node.class_type;
|
||||
const inputs = node.inputs || {};
|
||||
const title = node._meta?.title || ct;
|
||||
|
||||
if (ct.includes("CheckpointLoader")) {
|
||||
const isPos = !!samplerPositiveRef[id];
|
||||
const isNeg = !!samplerNegativeRef[id];
|
||||
|
||||
const getRole = () => {
|
||||
if (isPos && !isNeg) return "positive";
|
||||
if (isNeg && !isPos) return "negative";
|
||||
if (/pos|正/i.test(title)) return "positive";
|
||||
if (/neg|負/i.test(title)) return "negative";
|
||||
return "unknown";
|
||||
};
|
||||
|
||||
// --- Checkpoint nodes ---
|
||||
// Matches: CheckpointLoaderSimple, CheckpointLoader, "Checkpoint Loader" (WAS), etc.
|
||||
if (ct.includes("CheckpointLoader") || ct === "Checkpoint Loader") {
|
||||
result.checkpoint_nodes.push({
|
||||
id, type: ct, title,
|
||||
ckpt_name: inputs.ckpt_name,
|
||||
});
|
||||
}
|
||||
|
||||
// --- Prompt nodes ---
|
||||
|
||||
if (ct === "CLIPTextEncode") {
|
||||
let role = "unknown";
|
||||
if (samplerPositiveRef[id]) role = "positive";
|
||||
else if (samplerNegativeRef[id]) role = "negative";
|
||||
else if (/pos|正/i.test(title)) role = "positive";
|
||||
else if (/neg|負/i.test(title)) role = "negative";
|
||||
// Only add when text is a direct string (if linked, upstream node will be detected)
|
||||
const textVal = inputs.text;
|
||||
if (typeof textVal === "string") {
|
||||
result.prompt_nodes.push({
|
||||
id, type: ct, title, role: getRole(),
|
||||
text: textVal, textKey: "text",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// SDXL dual-text encoder
|
||||
if (ct === "CLIPTextEncodeSDXL" || ct === "CLIPTextEncodeSDXLRefiner") {
|
||||
const textG = inputs.text_g;
|
||||
const textL = inputs.text_l;
|
||||
// Add only if at least one text field is a direct string
|
||||
if (typeof textG === "string" || typeof textL === "string") {
|
||||
result.prompt_nodes.push({
|
||||
id, type: ct, title, role: getRole(),
|
||||
text: typeof textG === "string" ? textG : (typeof textL === "string" ? textL : ""),
|
||||
textKey: typeof textG === "string" ? "text_g" : "text_l",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Qwen-based image+text encoder
|
||||
if (ct === "TextEncodeQwenImageEditPlus") {
|
||||
result.prompt_nodes.push({
|
||||
id, type: ct, title, role,
|
||||
text: inputs.text,
|
||||
id, type: ct, title, role: getRole(),
|
||||
text: inputs.prompt || "",
|
||||
textKey: "prompt",
|
||||
});
|
||||
}
|
||||
|
||||
// SDXLPromptStyler / SDXLPromptStylerAdvanced — contains both pos & neg in one node
|
||||
if (ct === "SDXLPromptStyler" || ct === "SDXLPromptStylerAdvanced") {
|
||||
if (inputs.text_positive !== undefined) {
|
||||
result.prompt_nodes.push({
|
||||
id, type: ct, title: `${title} [positive]`, role: "positive",
|
||||
text: inputs.text_positive || "", textKey: "text_positive",
|
||||
});
|
||||
}
|
||||
if (inputs.text_negative !== undefined) {
|
||||
result.prompt_nodes.push({
|
||||
id, type: ct, title: `${title} [negative]`, role: "negative",
|
||||
text: inputs.text_negative || "", textKey: "text_negative",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ImpactWildcardEncode / ImpactWildcardProcessor — treat wildcard_text as prompt
|
||||
if (ct === "ImpactWildcardEncode" || ct === "ImpactWildcardProcessor") {
|
||||
const textVal = inputs.wildcard_text;
|
||||
if (typeof textVal === "string") {
|
||||
result.prompt_nodes.push({
|
||||
id, type: ct, title, role: getRole(),
|
||||
text: textVal, textKey: "wildcard_text",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// PrimitiveStringMultiline / PrimitiveString — when feeding a prompt node
|
||||
if ((ct === "PrimitiveStringMultiline" || ct === "PrimitiveString") && (isPos || isNeg)) {
|
||||
result.prompt_nodes.push({
|
||||
id, type: ct, title, role: getRole(),
|
||||
text: inputs.value || "",
|
||||
textKey: "value",
|
||||
});
|
||||
}
|
||||
|
||||
// --- Latent nodes ---
|
||||
if (ct === "EmptyLatentImage" || ct === "EmptySD3LatentImage") {
|
||||
result.latent_nodes.push({
|
||||
id, type: ct, title,
|
||||
@@ -504,6 +656,7 @@ export const comfyWorkflow = {
|
||||
});
|
||||
}
|
||||
|
||||
// --- LoRA nodes ---
|
||||
if (ct === "LoraLoader" || ct === "LoraLoaderModelOnly") {
|
||||
result.lora_nodes.push({
|
||||
id, type: ct, title,
|
||||
@@ -513,14 +666,31 @@ export const comfyWorkflow = {
|
||||
});
|
||||
}
|
||||
|
||||
// Power Lora Loader (rgthree) — dynamic lora_N inputs in API format
|
||||
if (ct === "Power Lora Loader (rgthree)") {
|
||||
for (const [k, v] of Object.entries(inputs)) {
|
||||
if (/^lora_\d+$/.test(k) && typeof v === "string") {
|
||||
result.lora_nodes.push({
|
||||
id, type: ct, title,
|
||||
lora_name: v,
|
||||
strength_model: inputs[k.replace("lora_", "strength_")] ?? 1,
|
||||
strength_clip: inputs[k.replace("lora_", "strength_clip_")] ?? 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- VAE nodes ---
|
||||
if (ct === "VAELoader") {
|
||||
result.vae_nodes.push({ id, type: ct, title, vae_name: inputs.vae_name });
|
||||
}
|
||||
|
||||
// --- Save/preview nodes ---
|
||||
if (ct === "SaveImage" || ct === "PreviewImage") {
|
||||
result.save_nodes.push({ id, type: ct, title });
|
||||
}
|
||||
|
||||
// --- Load image nodes ---
|
||||
if (ct === "LoadImage" || ct === "LoadImageMask"
|
||||
|| (ct.toLowerCase().includes("load") && ct.toLowerCase().includes("image") && inputs.image !== undefined)) {
|
||||
result.load_image_nodes.push({
|
||||
@@ -528,6 +698,7 @@ export const comfyWorkflow = {
|
||||
});
|
||||
}
|
||||
|
||||
// --- Text encoder (CLIP) nodes ---
|
||||
if (ct === "DualCLIPLoader" || ct === "CLIPLoader") {
|
||||
result.text_encoder_nodes.push({
|
||||
id, type: ct, title,
|
||||
@@ -536,12 +707,14 @@ export const comfyWorkflow = {
|
||||
});
|
||||
}
|
||||
|
||||
// --- Diffusion model nodes ---
|
||||
if (ct === "UNETLoader" || ct === "UnetLoaderGGUF") {
|
||||
result.diffusion_model_nodes.push({
|
||||
id, type: ct, title, unet_name: inputs.unet_name,
|
||||
});
|
||||
}
|
||||
|
||||
// --- ControlNet loader nodes ---
|
||||
if (ct.includes("ControlNetLoader")) {
|
||||
result.controlnet_nodes.push({
|
||||
id, type: ct, title,
|
||||
|
||||
@@ -0,0 +1,510 @@
|
||||
/**
|
||||
* Feeder Tab - ImageFeeder node control with embedded image library
|
||||
*/
|
||||
|
||||
import { comfyUI } from "./comfyui-client.js";
|
||||
import { showToast } from "./app.js";
|
||||
|
||||
// ── Module State ──────────────────────────────────────────────────
|
||||
const _s = {
|
||||
dir: "", // current folder relative path
|
||||
images: [], // filenames in current folder
|
||||
selected: new Set(),// selected filenames (across all interactions)
|
||||
presets: {}, // {presetName: {directory, selected_files}}
|
||||
running: false, // feeder run loop active
|
||||
};
|
||||
|
||||
// ── Node helpers ──────────────────────────────────────────────────
|
||||
|
||||
function _feederNodes() {
|
||||
const wf = comfyUI.currentWorkflow;
|
||||
if (!wf) return [];
|
||||
return Object.entries(wf)
|
||||
.filter(([, n]) => n?.class_type === "ImageFeeder")
|
||||
.map(([id, n]) => ({ id, title: n._meta?.title || `ImageFeeder` }));
|
||||
}
|
||||
|
||||
export function refreshFeederNodeList() {
|
||||
const sel = document.getElementById("wfm-feeder-node-sel");
|
||||
if (!sel) return;
|
||||
const nodes = _feederNodes();
|
||||
if (nodes.length === 0) {
|
||||
sel.innerHTML = `<option value="">-- No ImageFeeder node --</option>`;
|
||||
return;
|
||||
}
|
||||
const prevVal = sel.value;
|
||||
sel.innerHTML = nodes.map(n =>
|
||||
`<option value="${n.id}">${n.title} (ID:${n.id})</option>`
|
||||
).join("");
|
||||
if (prevVal && nodes.find(n => n.id === prevVal)) sel.value = prevVal;
|
||||
_loadFromNode(sel.value || nodes[0].id);
|
||||
}
|
||||
|
||||
function _loadFromNode(nodeId) {
|
||||
const wf = comfyUI.currentWorkflow;
|
||||
if (!wf?.[nodeId]) return;
|
||||
const inp = wf[nodeId].inputs || {};
|
||||
|
||||
_setVal("wfm-feeder-dir-input", inp.directory || "");
|
||||
_setVal("wfm-feeder-sort", inp.sort_mode || "ascending");
|
||||
_setVal("wfm-feeder-index", inp.index ?? 0);
|
||||
_setVal("wfm-feeder-start", inp.start_index ?? 0);
|
||||
_setVal("wfm-feeder-end", inp.end_index ?? 0);
|
||||
_setVal("wfm-feeder-batch", inp.batch_size ?? 1);
|
||||
_setVal("wfm-feeder-seed", inp.seed ?? 0);
|
||||
_setCheck("wfm-feeder-use-sel", inp.use_selection ?? true);
|
||||
|
||||
// Restore selected_files
|
||||
_s.selected.clear();
|
||||
try {
|
||||
const arr = JSON.parse(inp.selected_files || "[]");
|
||||
if (Array.isArray(arr)) arr.forEach(f => _s.selected.add(f));
|
||||
} catch {}
|
||||
|
||||
const dir = inp.directory || "";
|
||||
if (_s.dir !== dir) {
|
||||
_s.dir = dir;
|
||||
_loadImages(dir);
|
||||
_highlightTreeRow(dir);
|
||||
} else {
|
||||
_refreshGridCbs();
|
||||
}
|
||||
_updateStatus();
|
||||
}
|
||||
|
||||
function _applyToWorkflow() {
|
||||
const nodeId = document.getElementById("wfm-feeder-node-sel")?.value;
|
||||
const wf = comfyUI.currentWorkflow;
|
||||
if (!nodeId || !wf?.[nodeId]) {
|
||||
showToast("No ImageFeeder node selected", "error");
|
||||
return;
|
||||
}
|
||||
_applyToNode(nodeId);
|
||||
showToast("Applied to workflow", "success");
|
||||
}
|
||||
|
||||
// ── Run Loop ──────────────────────────────────────────────────────
|
||||
|
||||
function _setRunUI(running) {
|
||||
const runBtn = document.getElementById("wfm-feeder-run-btn");
|
||||
const stopBtn = document.getElementById("wfm-feeder-stop-btn");
|
||||
if (runBtn) runBtn.disabled = running;
|
||||
if (stopBtn) stopBtn.disabled = !running;
|
||||
}
|
||||
|
||||
function _applyToNode(nodeId) {
|
||||
const wf = comfyUI.currentWorkflow;
|
||||
const inp = wf[nodeId].inputs;
|
||||
inp.directory = _s.dir;
|
||||
inp.sort_mode = document.getElementById("wfm-feeder-sort")?.value || "ascending";
|
||||
inp.index = parseInt(document.getElementById("wfm-feeder-index")?.value) || 0;
|
||||
inp.start_index = parseInt(document.getElementById("wfm-feeder-start")?.value) || 0;
|
||||
inp.end_index = parseInt(document.getElementById("wfm-feeder-end")?.value) || 0;
|
||||
inp.batch_size = parseInt(document.getElementById("wfm-feeder-batch")?.value) || 1;
|
||||
inp.seed = parseInt(document.getElementById("wfm-feeder-seed")?.value) || 0;
|
||||
inp.use_selection = document.getElementById("wfm-feeder-use-sel")?.checked ?? true;
|
||||
inp.selected_files = JSON.stringify([..._s.selected]);
|
||||
}
|
||||
|
||||
async function _startRun() {
|
||||
if (_s.running) return;
|
||||
if (!comfyUI.currentWorkflow) { showToast("No workflow loaded", "error"); return; }
|
||||
if (!comfyUI.connected) { showToast("Not connected to ComfyUI", "error"); return; }
|
||||
|
||||
const nodeId = document.getElementById("wfm-feeder-node-sel")?.value;
|
||||
if (!nodeId || !comfyUI.currentWorkflow[nodeId]) {
|
||||
showToast("No ImageFeeder node selected", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
// WebSocket を先に接続してノード sync メッセージを受け取れるようにする
|
||||
const wsOk = await comfyUI.connectWebSocket();
|
||||
if (!wsOk) { showToast("WebSocket connection failed", "error"); return; }
|
||||
|
||||
_s.running = true;
|
||||
_setRunUI(true);
|
||||
|
||||
const progressBar = document.getElementById("wfm-gen-progress-bar");
|
||||
const progressText = document.getElementById("wfm-gen-progress-text");
|
||||
const resultImg = document.getElementById("wfm-gen-result-img");
|
||||
|
||||
// image_loop_node_sync メッセージを捕捉するリスナー
|
||||
let _lastSync = null;
|
||||
const _syncHandler = (ev) => {
|
||||
try {
|
||||
const msg = JSON.parse(ev.data);
|
||||
if (msg.type === "image_loop_node_sync" && String(msg.data?.node_id) === String(nodeId)) {
|
||||
_lastSync = msg.data;
|
||||
}
|
||||
} catch {}
|
||||
};
|
||||
comfyUI.socket.addEventListener("message", _syncHandler);
|
||||
|
||||
let count = 0;
|
||||
try {
|
||||
while (_s.running) {
|
||||
_lastSync = null;
|
||||
_applyToNode(nodeId);
|
||||
|
||||
const wf = comfyUI.currentWorkflow;
|
||||
const inp = wf[nodeId].inputs;
|
||||
|
||||
if (progressBar) progressBar.style.width = "0%";
|
||||
if (progressText) progressText.textContent = `#${++count} 0%`;
|
||||
|
||||
// 右ペインのseed設定を使用（KSamplerに適用される）
|
||||
const seedMode = document.getElementById("wfm-gen-seed-mode")?.value || "random";
|
||||
const seedValue = parseInt(document.getElementById("wfm-gen-seed-value")?.value) || -1;
|
||||
|
||||
const { images, seed } = await comfyUI.generate(
|
||||
{ ...wf },
|
||||
{
|
||||
seedMode,
|
||||
seedValue,
|
||||
onProgress: (pct) => {
|
||||
if (progressBar) progressBar.style.width = `${(pct * 100).toFixed(1)}%`;
|
||||
if (progressText) progressText.textContent = `#${count} ${(pct * 100).toFixed(0)}%`;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// 右ペインのseed表示を更新（通常の生成と同じ挙動）
|
||||
const seedEl = document.getElementById("wfm-gen-seed-value");
|
||||
if (seedEl) seedEl.value = seed;
|
||||
|
||||
if (progressBar) progressBar.style.width = "100%";
|
||||
|
||||
if (images.length > 0 && resultImg) {
|
||||
const blob = await comfyUI.getImageBlob(images[0]);
|
||||
resultImg.src = URL.createObjectURL(blob);
|
||||
resultImg.style.display = "block";
|
||||
}
|
||||
|
||||
if (!_s.running) break;
|
||||
|
||||
// control after generate: ノードから返された next_index を反映
|
||||
const control = document.getElementById("wfm-feeder-control-after")?.value || "loop";
|
||||
if (control === "fixed") {
|
||||
// index を変えない
|
||||
} else if (_lastSync) {
|
||||
const indexEl = document.getElementById("wfm-feeder-index");
|
||||
if (indexEl) indexEl.value = _lastSync.next_index;
|
||||
if (control === "increment" && !_lastSync.has_next) {
|
||||
_s.running = false;
|
||||
showToast(`Feeder complete (${count} generated)`, "success");
|
||||
break;
|
||||
}
|
||||
// loop: has_next=false でも次は index=0 からなので続行
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
if (_s.running) showToast("Feeder run error: " + err.message, "error");
|
||||
} finally {
|
||||
comfyUI.socket?.removeEventListener("message", _syncHandler);
|
||||
_s.running = false;
|
||||
_setRunUI(false);
|
||||
if (progressText) progressText.textContent = `Done (${count} generated)`;
|
||||
}
|
||||
}
|
||||
|
||||
async function _stopRun() {
|
||||
_s.running = false;
|
||||
try { await comfyUI.interrupt(); } catch {}
|
||||
_setRunUI(false);
|
||||
showToast("Feeder stopped", "info");
|
||||
}
|
||||
|
||||
// ── Folder Tree ───────────────────────────────────────────────────
|
||||
|
||||
async function _loadTree() {
|
||||
const container = document.getElementById("wfm-feeder-tree");
|
||||
if (!container) return;
|
||||
container.innerHTML = `<div class="wfm-feeder-tree-msg">Loading...</div>`;
|
||||
try {
|
||||
const res = await fetch("/image_loop/tree");
|
||||
if (!res.ok) throw new Error(res.status);
|
||||
const data = await res.json();
|
||||
_renderTree(data.tree || [], container);
|
||||
} catch (err) {
|
||||
container.innerHTML = `<div class="wfm-feeder-tree-msg">Cannot reach image-loop API</div>`;
|
||||
console.warn("[Feeder] tree load failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function _renderTree(items, container, depth = 0) {
|
||||
if (depth === 0) {
|
||||
container.innerHTML = "";
|
||||
container.appendChild(_makeTreeRow("", "🏠 (root)", 0));
|
||||
}
|
||||
for (const item of items) {
|
||||
const icon = item.children?.length > 0 ? "📂" : "📁";
|
||||
container.appendChild(_makeTreeRow(item.path, `${icon} ${item.name}`, depth + 1));
|
||||
if (item.children?.length > 0) _renderTree(item.children, container, depth + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function _makeTreeRow(path, label, depth) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "wfm-feeder-tree-row" + (_s.dir === path ? " active" : "");
|
||||
row.style.paddingLeft = `${8 + depth * 12}px`;
|
||||
row.dataset.path = path;
|
||||
row.textContent = label;
|
||||
row.title = path || "(root)";
|
||||
row.addEventListener("click", () => _selectDir(path));
|
||||
return row;
|
||||
}
|
||||
|
||||
function _selectDir(path) {
|
||||
if (_s.dir !== path) {
|
||||
_s.selected.clear();
|
||||
_s.dir = path;
|
||||
_setVal("wfm-feeder-dir-input", path);
|
||||
}
|
||||
_highlightTreeRow(path);
|
||||
_loadImages(path);
|
||||
_updateStatus();
|
||||
}
|
||||
|
||||
function _highlightTreeRow(path) {
|
||||
document.querySelectorAll(".wfm-feeder-tree-row").forEach(el => {
|
||||
el.classList.toggle("active", el.dataset.path === path);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Image Grid ────────────────────────────────────────────────────
|
||||
|
||||
async function _loadImages(dir) {
|
||||
const grid = document.getElementById("wfm-feeder-grid");
|
||||
if (!grid) return;
|
||||
grid.innerHTML = `<div class="wfm-feeder-grid-msg">Loading...</div>`;
|
||||
try {
|
||||
const url = "/image_loop/images" + (dir ? `?dir=${encodeURIComponent(dir)}` : "");
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(res.status);
|
||||
const data = await res.json();
|
||||
_s.images = data.images || [];
|
||||
_renderGrid();
|
||||
} catch (err) {
|
||||
_s.images = [];
|
||||
grid.innerHTML = `<div class="wfm-feeder-grid-msg" style="color:var(--wfm-danger)">Load failed: ${err.message}</div>`;
|
||||
}
|
||||
_updateStatus();
|
||||
}
|
||||
|
||||
function _renderGrid() {
|
||||
const grid = document.getElementById("wfm-feeder-grid");
|
||||
if (!grid) return;
|
||||
if (_s.images.length === 0) {
|
||||
grid.innerHTML = `<div class="wfm-feeder-grid-msg">No images found</div>`;
|
||||
return;
|
||||
}
|
||||
grid.innerHTML = "";
|
||||
for (const fname of _s.images) grid.appendChild(_makeCard(fname));
|
||||
}
|
||||
|
||||
function _makeCard(fname) {
|
||||
const relPath = _s.dir ? `${_s.dir}/${fname}` : fname;
|
||||
const checked = _s.selected.has(fname);
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "wfm-feeder-card" + (checked ? " selected" : "");
|
||||
card.dataset.name = fname;
|
||||
|
||||
const cb = document.createElement("input");
|
||||
cb.type = "checkbox";
|
||||
cb.className = "wfm-feeder-card-cb";
|
||||
cb.checked = checked;
|
||||
cb.addEventListener("change", e => {
|
||||
e.stopPropagation();
|
||||
if (cb.checked) _s.selected.add(fname);
|
||||
else _s.selected.delete(fname);
|
||||
card.classList.toggle("selected", cb.checked);
|
||||
_updateStatus();
|
||||
});
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.className = "wfm-feeder-card-img";
|
||||
img.loading = "lazy";
|
||||
img.src = `/image_loop/thumbnail?path=${encodeURIComponent(relPath)}`;
|
||||
img.onerror = () => { img.style.display = "none"; card.style.minHeight = "110px"; };
|
||||
|
||||
const name = document.createElement("div");
|
||||
name.className = "wfm-feeder-card-name";
|
||||
name.textContent = fname;
|
||||
name.title = fname;
|
||||
|
||||
card.append(cb, img, name);
|
||||
card.addEventListener("click", e => {
|
||||
if (e.target === cb) return;
|
||||
_showPreview(relPath, fname);
|
||||
});
|
||||
return card;
|
||||
}
|
||||
|
||||
function _refreshGridCbs() {
|
||||
document.querySelectorAll(".wfm-feeder-card").forEach(card => {
|
||||
const sel = _s.selected.has(card.dataset.name);
|
||||
card.classList.toggle("selected", sel);
|
||||
const cb = card.querySelector("input[type=checkbox]");
|
||||
if (cb) cb.checked = sel;
|
||||
});
|
||||
}
|
||||
|
||||
function _selectAll() {
|
||||
_s.images.forEach(f => _s.selected.add(f));
|
||||
_refreshGridCbs();
|
||||
_updateStatus();
|
||||
}
|
||||
|
||||
function _deselectAll() {
|
||||
_s.images.forEach(f => _s.selected.delete(f));
|
||||
_refreshGridCbs();
|
||||
_updateStatus();
|
||||
}
|
||||
|
||||
// ── Status Bar ───────────────────────────────────────────────────
|
||||
|
||||
function _updateStatus() {
|
||||
const el = document.getElementById("wfm-feeder-status");
|
||||
if (!el) return;
|
||||
const inCurrent = _s.images.filter(f => _s.selected.has(f)).length;
|
||||
el.textContent = `📂 ${_s.dir || "(root)"} | ${inCurrent} / ${_s.images.length} selected`;
|
||||
}
|
||||
|
||||
// ── Preview Panel ────────────────────────────────────────────────
|
||||
|
||||
async function _showPreview(relPath, fname) {
|
||||
const imgEl = document.getElementById("wfm-feeder-preview-img");
|
||||
const nameEl = document.getElementById("wfm-feeder-preview-name");
|
||||
const infoEl = document.getElementById("wfm-feeder-preview-info");
|
||||
|
||||
if (imgEl) {
|
||||
imgEl.src = `/image_loop/thumbnail?path=${encodeURIComponent(relPath)}`;
|
||||
imgEl.style.display = "block";
|
||||
}
|
||||
if (nameEl) nameEl.textContent = fname;
|
||||
if (infoEl) infoEl.textContent = "Loading...";
|
||||
|
||||
try {
|
||||
const res = await fetch(`/image_loop/image_info?path=${encodeURIComponent(relPath)}`);
|
||||
if (res.ok && infoEl) {
|
||||
const d = await res.json();
|
||||
const kb = d.size_bytes ? (d.size_bytes / 1024).toFixed(1) + " KB" : "";
|
||||
infoEl.textContent = `${d.width ?? "?"}×${d.height ?? "?"} px\n${kb}`;
|
||||
}
|
||||
} catch { if (infoEl) infoEl.textContent = ""; }
|
||||
}
|
||||
|
||||
// ── Presets ──────────────────────────────────────────────────────
|
||||
|
||||
async function _loadPresets() {
|
||||
try {
|
||||
const res = await fetch("/image_feeder/presets");
|
||||
if (!res.ok) return;
|
||||
_s.presets = await res.json();
|
||||
} catch { _s.presets = {}; }
|
||||
_renderPresets();
|
||||
}
|
||||
|
||||
function _renderPresets() {
|
||||
const sel = document.getElementById("wfm-feeder-preset-sel");
|
||||
if (!sel) return;
|
||||
const names = Object.keys(_s.presets).sort();
|
||||
sel.innerHTML = `<option value="">-- Select preset --</option>` +
|
||||
names.map(n => `<option value="${n}">${n}</option>`).join("");
|
||||
}
|
||||
|
||||
async function _savePreset() {
|
||||
const name = document.getElementById("wfm-feeder-preset-name")?.value.trim();
|
||||
if (!name) { showToast("Enter a preset name", "error"); return; }
|
||||
const sel = _s.images.filter(f => _s.selected.has(f));
|
||||
try {
|
||||
const res = await fetch("/image_feeder/presets", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name, directory: _s.dir, selected_files: sel }),
|
||||
});
|
||||
if (res.ok) {
|
||||
showToast(`Preset saved: ${name}`, "success");
|
||||
const nameInput = document.getElementById("wfm-feeder-preset-name");
|
||||
if (nameInput) nameInput.value = "";
|
||||
await _loadPresets();
|
||||
const selEl = document.getElementById("wfm-feeder-preset-sel");
|
||||
if (selEl) selEl.value = name;
|
||||
} else { showToast("Save failed", "error"); }
|
||||
} catch (err) { showToast("Save error: " + err.message, "error"); }
|
||||
}
|
||||
|
||||
async function _applyPreset() {
|
||||
const selEl = document.getElementById("wfm-feeder-preset-sel");
|
||||
const name = selEl?.value;
|
||||
if (!name || !_s.presets[name]) { showToast("Select a preset first", "error"); return; }
|
||||
const preset = _s.presets[name];
|
||||
const dir = preset.directory || "";
|
||||
|
||||
_s.selected.clear();
|
||||
(preset.selected_files || []).forEach(f => _s.selected.add(f));
|
||||
_setVal("wfm-feeder-dir-input", dir);
|
||||
|
||||
if (_s.dir !== dir) {
|
||||
_s.dir = dir;
|
||||
_highlightTreeRow(dir);
|
||||
await _loadImages(dir);
|
||||
}
|
||||
_refreshGridCbs();
|
||||
_updateStatus();
|
||||
showToast(`Preset loaded: ${name}`, "success");
|
||||
}
|
||||
|
||||
async function _deletePreset() {
|
||||
const name = document.getElementById("wfm-feeder-preset-sel")?.value;
|
||||
if (!name) return;
|
||||
try {
|
||||
await fetch(`/image_feeder/presets/${encodeURIComponent(name)}`, { method: "DELETE" });
|
||||
showToast(`Preset deleted: ${name}`, "info");
|
||||
await _loadPresets();
|
||||
} catch (err) { showToast("Delete error", "error"); }
|
||||
}
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────
|
||||
|
||||
function _setVal(id, val) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.value = val ?? "";
|
||||
}
|
||||
function _setCheck(id, val) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.checked = !!val;
|
||||
}
|
||||
|
||||
// ── Init ─────────────────────────────────────────────────────────
|
||||
|
||||
export async function initFeederTab() {
|
||||
document.getElementById("wfm-feeder-node-sel")?.addEventListener("change", e => {
|
||||
_loadFromNode(e.target.value);
|
||||
});
|
||||
|
||||
document.getElementById("wfm-feeder-apply-btn")?.addEventListener("click", _applyToWorkflow);
|
||||
|
||||
document.getElementById("wfm-feeder-dir-input")?.addEventListener("change", e => {
|
||||
const val = e.target.value.trim();
|
||||
if (_s.dir !== val) {
|
||||
_s.dir = val;
|
||||
_highlightTreeRow(val);
|
||||
_loadImages(val);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("wfm-feeder-reload-tree")?.addEventListener("click", _loadTree);
|
||||
document.getElementById("wfm-feeder-sel-all")?.addEventListener("click", _selectAll);
|
||||
document.getElementById("wfm-feeder-desel-all")?.addEventListener("click", _deselectAll);
|
||||
|
||||
document.getElementById("wfm-feeder-preset-save")?.addEventListener("click", _savePreset);
|
||||
document.getElementById("wfm-feeder-preset-load")?.addEventListener("click", _applyPreset);
|
||||
document.getElementById("wfm-feeder-preset-del")?.addEventListener("click", _deletePreset);
|
||||
|
||||
document.getElementById("wfm-feeder-run-btn")?.addEventListener("click", _startRun);
|
||||
document.getElementById("wfm-feeder-stop-btn")?.addEventListener("click", _stopRun);
|
||||
|
||||
await Promise.all([_loadTree(), _loadPresets()]);
|
||||
}
|
||||
+322
-45
@@ -8,6 +8,7 @@ import { comfyWorkflow } from "./comfyui-workflow.js";
|
||||
import { comfyEditor } from "./comfyui-editor.js";
|
||||
import { t } from "./i18n.js";
|
||||
import { syncJsonHighlight, syncScroll } from "./json-highlight.js";
|
||||
import { initFeederTab, refreshFeederNodeList } from "./feeder-tab.js";
|
||||
|
||||
// ============================================
|
||||
// Eagle Auto-Save
|
||||
@@ -145,6 +146,8 @@ export async function loadWorkflowIntoEditor(workflow, filename) {
|
||||
const genBtn = document.getElementById("wfm-gen-generate-btn");
|
||||
if (genBtn) genBtn.disabled = !comfyUI.connected;
|
||||
|
||||
refreshFeederNodeList();
|
||||
|
||||
showToast(`Workflow loaded: ${filename || ""}`, "success");
|
||||
return true;
|
||||
}
|
||||
@@ -153,49 +156,286 @@ export async function loadWorkflowIntoEditor(workflow, filename) {
|
||||
// Checkpoint Batch
|
||||
// ============================================
|
||||
|
||||
const _ckptBatch = { aborted: false };
|
||||
const _ckptBatch = { aborted: false, paused: false, _resumeResolve: null };
|
||||
|
||||
function _parseFolderList(str) {
|
||||
return str.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
|
||||
async function _waitIfPaused() {
|
||||
if (!_ckptBatch.paused) return;
|
||||
await new Promise((resolve) => { _ckptBatch._resumeResolve = resolve; });
|
||||
}
|
||||
|
||||
function _getModelFolder(modelPath) {
|
||||
const normalized = modelPath.replace(/\\/g, "/");
|
||||
const idx = normalized.indexOf("/");
|
||||
return idx === -1 ? "" : normalized.substring(0, idx).toLowerCase();
|
||||
function _setPauseBtnState(paused) {
|
||||
const btn = document.getElementById("wfm-ckpt-batch-pause-btn");
|
||||
if (!btn) return;
|
||||
btn.textContent = paused ? "Resume" : "Pause";
|
||||
btn.style.background = paused ? "var(--wfm-success, #22c55e)" : "";
|
||||
btn.style.color = paused ? "#fff" : "";
|
||||
}
|
||||
|
||||
function _filterCheckpoints(checkpoints, includeStr, excludeStr) {
|
||||
const inc = _parseFolderList(includeStr);
|
||||
const exc = _parseFolderList(excludeStr);
|
||||
return checkpoints.filter((m) => {
|
||||
const folder = _getModelFolder(m);
|
||||
if (inc.length > 0 && !inc.includes(folder)) return false;
|
||||
if (exc.length > 0 && exc.includes(folder)) return false;
|
||||
return true;
|
||||
});
|
||||
// mode: "all" = 全選択, "some" = 一部選択, "none" = 全解除
|
||||
const _ckptState = { mode: "all", selected: new Set() };
|
||||
|
||||
function _getSelectedCheckpoints() {
|
||||
const all = comfyEditor.models.checkpoints || [];
|
||||
if (_ckptState.mode === "all") return all;
|
||||
if (_ckptState.mode === "none") return [];
|
||||
return all.filter((m) => _ckptState.selected.has(m));
|
||||
}
|
||||
|
||||
function _updateDropdownLabel() {
|
||||
const labelEl = document.getElementById("wfm-ckpt-dropdown-label");
|
||||
if (!labelEl) return;
|
||||
const total = (comfyEditor.models.checkpoints || []).length;
|
||||
if (_ckptState.mode === "all") {
|
||||
labelEl.textContent = total > 0 ? `All (${total})` : "All checkpoints";
|
||||
} else if (_ckptState.mode === "none") {
|
||||
labelEl.textContent = `0 / ${total} selected`;
|
||||
} else {
|
||||
labelEl.textContent = `${_ckptState.selected.size} / ${total} selected`;
|
||||
}
|
||||
}
|
||||
|
||||
// モデルパスリストをフォルダ → [modelPath, ...] のMapに変換
|
||||
function _buildFolderTree(models) {
|
||||
const map = new Map();
|
||||
for (const m of models) {
|
||||
const normalized = m.replace(/\\/g, "/");
|
||||
const lastSlash = normalized.lastIndexOf("/");
|
||||
const folder = lastSlash === -1 ? "" : normalized.substring(0, lastSlash);
|
||||
if (!map.has(folder)) map.set(folder, []);
|
||||
map.get(folder).push(m);
|
||||
}
|
||||
return new Map([...map.entries()].sort((a, b) => {
|
||||
if (a[0] === b[0]) return 0;
|
||||
if (a[0] === "") return -1;
|
||||
if (b[0] === "") return 1;
|
||||
return a[0].localeCompare(b[0]);
|
||||
}));
|
||||
}
|
||||
|
||||
// フォルダ内の選択状態を返す: "checked" | "indeterminate" | "unchecked"
|
||||
function _getFolderCheckState(folderModels) {
|
||||
if (_ckptState.mode === "all") return "checked";
|
||||
if (_ckptState.mode === "none") return "unchecked";
|
||||
const selCount = folderModels.filter((m) => _ckptState.selected.has(m)).length;
|
||||
if (selCount === 0) return "unchecked";
|
||||
if (selCount === folderModels.length) return "checked";
|
||||
return "indeterminate";
|
||||
}
|
||||
|
||||
// 単一モデルの選択トグル（_ckptState を更新）
|
||||
function _toggleSingleModel(m, checked, all) {
|
||||
if (_ckptState.mode === "all" && !checked) {
|
||||
_ckptState.mode = "some";
|
||||
_ckptState.selected.clear();
|
||||
all.forEach((x) => _ckptState.selected.add(x));
|
||||
} else if (_ckptState.mode === "none" && checked) {
|
||||
_ckptState.mode = "some";
|
||||
_ckptState.selected.clear();
|
||||
}
|
||||
if (checked) _ckptState.selected.add(m);
|
||||
else _ckptState.selected.delete(m);
|
||||
if (_ckptState.selected.size === all.length) { _ckptState.mode = "all"; _ckptState.selected.clear(); }
|
||||
if (_ckptState.mode === "some" && _ckptState.selected.size === 0) _ckptState.mode = "none";
|
||||
}
|
||||
|
||||
// フォルダ単位の一括トグル（_ckptState を更新）
|
||||
function _toggleFolderModels(folderModels, checked, all) {
|
||||
if (_ckptState.mode === "all" && !checked) {
|
||||
_ckptState.mode = "some";
|
||||
_ckptState.selected.clear();
|
||||
all.forEach((x) => _ckptState.selected.add(x));
|
||||
} else if (_ckptState.mode === "none" && checked) {
|
||||
_ckptState.mode = "some";
|
||||
_ckptState.selected.clear();
|
||||
}
|
||||
folderModels.forEach((m) => { if (checked) _ckptState.selected.add(m); else _ckptState.selected.delete(m); });
|
||||
if (_ckptState.selected.size === all.length) { _ckptState.mode = "all"; _ckptState.selected.clear(); }
|
||||
if (_ckptState.mode === "some" && _ckptState.selected.size === 0) _ckptState.mode = "none";
|
||||
}
|
||||
|
||||
function _rebuildCkptList() {
|
||||
const listEl = document.getElementById("wfm-ckpt-list");
|
||||
if (!listEl) return;
|
||||
const all = comfyEditor.models.checkpoints || [];
|
||||
const search = document.getElementById("wfm-ckpt-search")?.value.toLowerCase() || "";
|
||||
const filtered = search ? all.filter((m) => m.toLowerCase().includes(search)) : all;
|
||||
|
||||
if (filtered.length === 0) {
|
||||
listEl.innerHTML = `<div style="padding:8px 10px;font-size:11px;color:var(--wfm-text-secondary);">No checkpoints</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const folderTree = _buildFolderTree(filtered);
|
||||
listEl.innerHTML = "";
|
||||
|
||||
for (const [folder, models] of folderTree) {
|
||||
const group = document.createElement("div");
|
||||
group.className = "wfm-ckpt-folder-group open";
|
||||
|
||||
// --- フォルダヘッダー ---
|
||||
const header = document.createElement("div");
|
||||
header.className = "wfm-ckpt-folder-header";
|
||||
|
||||
const folderCb = document.createElement("input");
|
||||
folderCb.type = "checkbox";
|
||||
const folderState = _getFolderCheckState(models);
|
||||
folderCb.checked = folderState === "checked";
|
||||
folderCb.indeterminate = folderState === "indeterminate";
|
||||
|
||||
const toggle = document.createElement("span");
|
||||
toggle.className = "wfm-ckpt-folder-toggle";
|
||||
toggle.textContent = "▶";
|
||||
|
||||
const nameSpan = document.createElement("span");
|
||||
nameSpan.className = "wfm-ckpt-folder-name";
|
||||
nameSpan.textContent = folder || "(root)";
|
||||
nameSpan.title = folder || "(root)";
|
||||
|
||||
const countSpan = document.createElement("span");
|
||||
countSpan.className = "wfm-ckpt-folder-count";
|
||||
countSpan.textContent = models.length;
|
||||
|
||||
// --- ファイルリスト ---
|
||||
const filesDiv = document.createElement("div");
|
||||
filesDiv.className = "wfm-ckpt-folder-files";
|
||||
|
||||
for (const m of models) {
|
||||
const itemLabel = document.createElement("label");
|
||||
itemLabel.className = "wfm-ckpt-item wfm-ckpt-item--indented";
|
||||
|
||||
const fileCb = document.createElement("input");
|
||||
fileCb.type = "checkbox";
|
||||
fileCb.value = m;
|
||||
if (_ckptState.mode === "all") fileCb.checked = true;
|
||||
else if (_ckptState.mode === "none") fileCb.checked = false;
|
||||
else fileCb.checked = _ckptState.selected.has(m);
|
||||
|
||||
const normalized = m.replace(/\\/g, "/");
|
||||
const lastSlash = normalized.lastIndexOf("/");
|
||||
const fileName = lastSlash === -1 ? m : m.substring(lastSlash + 1);
|
||||
const fileSpan = document.createElement("span");
|
||||
fileSpan.className = "wfm-ckpt-item-label";
|
||||
fileSpan.textContent = fileName;
|
||||
fileSpan.title = m;
|
||||
|
||||
fileCb.addEventListener("change", () => {
|
||||
_toggleSingleModel(m, fileCb.checked, all);
|
||||
const s = _getFolderCheckState(models);
|
||||
folderCb.checked = s === "checked";
|
||||
folderCb.indeterminate = s === "indeterminate";
|
||||
_updateDropdownLabel();
|
||||
_updateBatchInfo();
|
||||
});
|
||||
|
||||
itemLabel.appendChild(fileCb);
|
||||
itemLabel.appendChild(fileSpan);
|
||||
filesDiv.appendChild(itemLabel);
|
||||
}
|
||||
|
||||
// フォルダCBのchange
|
||||
folderCb.addEventListener("change", () => {
|
||||
_toggleFolderModels(models, folderCb.checked, all);
|
||||
folderCb.indeterminate = false;
|
||||
filesDiv.querySelectorAll("input[type=checkbox]").forEach((cb) => { cb.checked = folderCb.checked; });
|
||||
_updateDropdownLabel();
|
||||
_updateBatchInfo();
|
||||
});
|
||||
|
||||
// フォルダ名 / トグル矢印クリックで展開・折りたたみ
|
||||
[toggle, nameSpan].forEach((el) => {
|
||||
el.addEventListener("click", () => group.classList.toggle("open"));
|
||||
});
|
||||
|
||||
header.appendChild(folderCb);
|
||||
header.appendChild(toggle);
|
||||
header.appendChild(nameSpan);
|
||||
header.appendChild(countSpan);
|
||||
group.appendChild(header);
|
||||
group.appendChild(filesDiv);
|
||||
listEl.appendChild(group);
|
||||
}
|
||||
}
|
||||
|
||||
function _updateBatchInfo() {
|
||||
const infoEl = document.getElementById("wfm-ckpt-batch-info");
|
||||
if (!infoEl) return;
|
||||
const inc = document.getElementById("wfm-ckpt-batch-include")?.value || "";
|
||||
const exc = document.getElementById("wfm-ckpt-batch-exclude")?.value || "";
|
||||
const n = _filterCheckpoints(comfyEditor.models.checkpoints, inc, exc).length;
|
||||
const n = _getSelectedCheckpoints().length;
|
||||
infoEl.textContent = `${n} checkpoint${n !== 1 ? "s" : ""} will be processed`;
|
||||
}
|
||||
|
||||
function initCheckpointBatch() {
|
||||
const checkbox = document.getElementById("wfm-ckpt-batch-enabled");
|
||||
const body = document.getElementById("wfm-ckpt-batch-body");
|
||||
const wrap = document.getElementById("wfm-ckpt-dropdown-wrap");
|
||||
const btn = document.getElementById("wfm-ckpt-dropdown-btn");
|
||||
const panel = document.getElementById("wfm-ckpt-dropdown-panel");
|
||||
|
||||
checkbox?.addEventListener("change", () => {
|
||||
if (body) body.style.display = checkbox.checked ? "block" : "none";
|
||||
if (checkbox.checked) _updateBatchInfo();
|
||||
if (checkbox.checked) {
|
||||
_updateDropdownLabel();
|
||||
_updateBatchInfo();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("wfm-ckpt-batch-include")?.addEventListener("input", _updateBatchInfo);
|
||||
document.getElementById("wfm-ckpt-batch-exclude")?.addEventListener("input", _updateBatchInfo);
|
||||
// ドロップダウン開閉
|
||||
btn?.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = panel.style.display !== "none";
|
||||
if (isOpen) {
|
||||
panel.style.display = "none";
|
||||
wrap.classList.remove("open");
|
||||
} else {
|
||||
_rebuildCkptList();
|
||||
panel.style.display = "block";
|
||||
wrap.classList.add("open");
|
||||
document.getElementById("wfm-ckpt-search")?.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// 外側クリックで閉じる
|
||||
document.addEventListener("click", (e) => {
|
||||
if (panel && panel.style.display !== "none" && !wrap?.contains(e.target)) {
|
||||
panel.style.display = "none";
|
||||
wrap?.classList.remove("open");
|
||||
}
|
||||
});
|
||||
|
||||
// 検索フィルター
|
||||
document.getElementById("wfm-ckpt-search")?.addEventListener("input", _rebuildCkptList);
|
||||
|
||||
// 全選択
|
||||
document.getElementById("wfm-ckpt-select-all")?.addEventListener("click", () => {
|
||||
_ckptState.mode = "all";
|
||||
_ckptState.selected.clear();
|
||||
_rebuildCkptList();
|
||||
_updateDropdownLabel();
|
||||
_updateBatchInfo();
|
||||
});
|
||||
|
||||
// 全解除
|
||||
document.getElementById("wfm-ckpt-deselect-all")?.addEventListener("click", () => {
|
||||
_ckptState.mode = "none";
|
||||
_ckptState.selected.clear();
|
||||
_rebuildCkptList();
|
||||
_updateDropdownLabel();
|
||||
_updateBatchInfo();
|
||||
});
|
||||
|
||||
// Pause / Resume
|
||||
document.getElementById("wfm-ckpt-batch-pause-btn")?.addEventListener("click", () => {
|
||||
if (!_ckptBatch.paused) {
|
||||
_ckptBatch.paused = true;
|
||||
_setPauseBtnState(true);
|
||||
} else {
|
||||
_ckptBatch.paused = false;
|
||||
_setPauseBtnState(false);
|
||||
if (_ckptBatch._resumeResolve) {
|
||||
_ckptBatch._resumeResolve();
|
||||
_ckptBatch._resumeResolve = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
@@ -283,12 +523,10 @@ async function _runBatchGenerate() {
|
||||
return;
|
||||
}
|
||||
|
||||
const inc = document.getElementById("wfm-ckpt-batch-include")?.value || "";
|
||||
const exc = document.getElementById("wfm-ckpt-batch-exclude")?.value || "";
|
||||
const list = _filterCheckpoints(comfyEditor.models.checkpoints, inc, exc);
|
||||
const list = _getSelectedCheckpoints();
|
||||
|
||||
if (list.length === 0) {
|
||||
showToast("No checkpoints match the folder filter", "error");
|
||||
showToast("No checkpoints selected", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -299,33 +537,54 @@ async function _runBatchGenerate() {
|
||||
const progressText = document.getElementById("wfm-gen-progress-text");
|
||||
|
||||
if (batchProgress) batchProgress.style.display = "block";
|
||||
const pauseBtn = document.getElementById("wfm-ckpt-batch-pause-btn");
|
||||
if (pauseBtn) { pauseBtn.style.display = "block"; pauseBtn.disabled = false; }
|
||||
_setPauseBtnState(false);
|
||||
|
||||
let completed = 0;
|
||||
let failed = 0;
|
||||
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (_ckptBatch.aborted) break;
|
||||
try {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (_ckptBatch.aborted) break;
|
||||
|
||||
const model = list[i];
|
||||
if (batchCurrentName) batchCurrentName.textContent = model;
|
||||
if (batchCount) batchCount.textContent = `${i + 1} / ${list.length}`;
|
||||
if (batchBar) batchBar.style.width = `${((i / list.length) * 100).toFixed(1)}%`;
|
||||
if (progressText) progressText.textContent = `[${i + 1}/${list.length}] Loading...`;
|
||||
// 一時停止中は次のモデルへ進む前に待機
|
||||
if (_ckptBatch.paused) {
|
||||
if (batchCurrentName) batchCurrentName.textContent = "Paused...";
|
||||
if (progressText) progressText.textContent = "Paused";
|
||||
}
|
||||
await _waitIfPaused();
|
||||
if (_ckptBatch.aborted) break;
|
||||
|
||||
for (const node of ckptNodes) {
|
||||
if (comfyUI.currentWorkflow?.[node.id]) {
|
||||
comfyUI.currentWorkflow[node.id].inputs.ckpt_name = model;
|
||||
const model = list[i];
|
||||
if (batchCurrentName) batchCurrentName.textContent = model;
|
||||
if (batchCount) batchCount.textContent = `${i + 1} / ${list.length}`;
|
||||
if (batchBar) batchBar.style.width = `${((i / list.length) * 100).toFixed(1)}%`;
|
||||
if (progressText) progressText.textContent = `[${i + 1}/${list.length}] Loading...`;
|
||||
|
||||
for (const node of ckptNodes) {
|
||||
if (comfyUI.currentWorkflow?.[node.id]) {
|
||||
comfyUI.currentWorkflow[node.id].inputs.ckpt_name = model;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await _coreGenerate(true);
|
||||
completed++;
|
||||
} catch (err) {
|
||||
if (_ckptBatch.aborted) break;
|
||||
failed++;
|
||||
showToast(`[${i + 1}/${list.length}] Failed: ${err.message}`, "error");
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await _coreGenerate(true);
|
||||
completed++;
|
||||
} catch (err) {
|
||||
if (_ckptBatch.aborted) break;
|
||||
failed++;
|
||||
showToast(`[${i + 1}/${list.length}] Failed: ${err.message}`, "error");
|
||||
} finally {
|
||||
if (pauseBtn) pauseBtn.disabled = true;
|
||||
_ckptBatch.paused = false;
|
||||
if (_ckptBatch._resumeResolve) {
|
||||
_ckptBatch._resumeResolve();
|
||||
_ckptBatch._resumeResolve = null;
|
||||
}
|
||||
_setPauseBtnState(false);
|
||||
}
|
||||
|
||||
if (batchBar) batchBar.style.width = "100%";
|
||||
@@ -360,6 +619,8 @@ async function handleGenerate() {
|
||||
genBtn.disabled = true;
|
||||
if (interruptBtn) interruptBtn.style.display = "inline-block";
|
||||
_ckptBatch.aborted = false;
|
||||
_ckptBatch.paused = false;
|
||||
_ckptBatch._resumeResolve = null;
|
||||
|
||||
const batchEnabled = document.getElementById("wfm-ckpt-batch-enabled")?.checked;
|
||||
|
||||
@@ -408,6 +669,7 @@ export async function initGenerateTab() {
|
||||
comfyEditor.renderAll(comfyUI.currentAnalysis, comfyUI.currentWorkflow);
|
||||
}
|
||||
showToast("Model lists refreshed", "success");
|
||||
_updateDropdownLabel();
|
||||
_updateBatchInfo();
|
||||
});
|
||||
|
||||
@@ -417,6 +679,12 @@ export async function initGenerateTab() {
|
||||
// Interrupt button (stops both single generation and batch loop)
|
||||
document.getElementById("wfm-gen-interrupt-btn")?.addEventListener("click", async () => {
|
||||
_ckptBatch.aborted = true;
|
||||
// 一時停止中でもループを抜けられるよう待機を解除
|
||||
_ckptBatch.paused = false;
|
||||
if (_ckptBatch._resumeResolve) {
|
||||
_ckptBatch._resumeResolve();
|
||||
_ckptBatch._resumeResolve = null;
|
||||
}
|
||||
await comfyUI.interrupt();
|
||||
showToast("Interrupted", "info");
|
||||
});
|
||||
@@ -424,8 +692,13 @@ export async function initGenerateTab() {
|
||||
// Move shared Raw JSON widget into the active tab's rawjson-col
|
||||
function moveRawJsonToTab(tabKey) {
|
||||
const widget = document.getElementById("wfm-gen-rawjson-widget");
|
||||
if (!widget) return;
|
||||
if (tabKey === "feeder") {
|
||||
widget.style.display = "none";
|
||||
return;
|
||||
}
|
||||
const col = document.getElementById(`wfm-gen-rawjson-col-${tabKey}`);
|
||||
if (widget && col) {
|
||||
if (col) {
|
||||
col.appendChild(widget);
|
||||
widget.style.display = "flex";
|
||||
}
|
||||
@@ -487,11 +760,15 @@ export async function initGenerateTab() {
|
||||
// Checkpoint batch UI
|
||||
initCheckpointBatch();
|
||||
|
||||
// Feeder tab
|
||||
await initFeederTab();
|
||||
|
||||
// Auto-connect on init
|
||||
const connected = await comfyUI.checkConnection();
|
||||
updateStatus(connected);
|
||||
if (connected) {
|
||||
await comfyEditor.loadModelLists();
|
||||
_updateDropdownLabel();
|
||||
_updateBatchInfo();
|
||||
}
|
||||
|
||||
|
||||
+153
-24
@@ -340,14 +340,26 @@ const LANGUAGES = {
|
||||
helpWf7: "Badge management: add, rename, delete badges with custom colors shared with the Models tab (⚙ Badge button)",
|
||||
helpGen1: "Connect/disconnect ComfyUI and check connection status",
|
||||
helpGen2: "Load workflows from Workflow tab (App format .app.json not supported)",
|
||||
helpGen3: "3-tab layout — Input (Prompt + Image), Model, Settings — each with a Raw JSON column for instant preview and direct editing",
|
||||
helpGen3: "4-tab layout — Input (Prompt + Image), Model, Settings, Feeder — Input/Model/Settings each include a Raw JSON column for instant preview and direct editing",
|
||||
helpGen4: "Input tab: Prompt (top) and Image drag-and-drop (bottom) in the left column",
|
||||
helpGen5: "Model tab: Checkpoint, VAE, LoRA, ControlNet, UNET, TextEncoder selectors with filter",
|
||||
helpGen6: "Settings tab: KSampler (top) and LatentImage (bottom) in the left column",
|
||||
helpGen6: "Settings tab: KSampler and Latent Image side by side, each at 50% width",
|
||||
helpGen7: "Raw JSON always visible in the right column of each tab — edit directly and Apply to reload the workflow",
|
||||
helpGen8: "Seed control: random, fixed, increment, decrement",
|
||||
helpGen9: "Generate, progress display, stop, and view results",
|
||||
helpGen10: "Eagle integration: auto-save generated images to Eagle",
|
||||
helpGen11: "Checkpoint Batch: select checkpoints by folder from the dropdown — check a folder to select all its files, or expand with ▶ to check individual files; use Filter to search; Pause/Resume suspends and continues between models; Stop aborts after the current generation",
|
||||
helpFeederTitle: "GenerateUI Tab — Feeder subtab",
|
||||
helpFeederDesc: "Requires the comfyui-image-feeder custom node. Controls ImageFeeder nodes and runs continuous generation loops over an image library stored in user/default/image-loop-data/.",
|
||||
helpFeeder1: "Left pane — Node settings: select the target ImageFeeder node from the dropdown; edit all node parameters (Directory, Sort Mode, Index, Start/End Index, Batch Size, Seed, Use Selection); click Apply to write changes to the loaded workflow",
|
||||
helpFeeder2: "Left pane — Presets: save the current directory + selection as a named preset; load or delete saved presets",
|
||||
helpFeeder3: "Left pane — Run: After gen mode determines index behavior after each generation — Loop (wrap back to 0 and continue indefinitely), Increment (advance index and stop when all images are exhausted), Fixed (always use the same index); click Run to start the loop, Stop to interrupt",
|
||||
helpFeeder4: "Center pane — Folder tree: browse subfolders inside image-loop-data; click a folder to load its images; click ↺ to reload the tree",
|
||||
helpFeeder5: "Center pane — Image grid: displays thumbnails of all images in the selected folder; check individual images to add them to the selection; All / None buttons select or clear the entire folder; click an image to open the preview panel",
|
||||
helpFeeder6: "Center pane — Preview panel: shows the clicked image at larger size with filename, resolution, and file size",
|
||||
helpFeeder7: "Status bar: shows the current folder path and how many images are selected out of the total in the folder",
|
||||
helpFeeder8: "Seed during Run: uses the right-pane seed setting (Random / Fixed / Increment / Decrement) — the ImageFeeder's own Seed field controls random sort order only",
|
||||
helpFeeder9: "Index sync: after each generation the node returns the next index via WebSocket; the Index field updates automatically so the display stays in sync",
|
||||
helpPrompt1: "AI assistant (Ollama): model selection, chat for prompt consultation, image attachment (vision models)",
|
||||
helpPrompt2: "Apply AI responses to GenerateUI prompts",
|
||||
helpPrompt3: "Translation: JA\u2194EN, ZH\u2194EN",
|
||||
@@ -389,12 +401,13 @@ const LANGUAGES = {
|
||||
helpGallery2: "3-column layout: folder tree (left) | image grid (center) | detail panel (right)",
|
||||
helpGallery3: "Thumbnail and Table view modes; double-click any image to open fullscreen lightbox",
|
||||
helpGallery4: "Toolbar filters: favorites (★), text search, tag filter, group filter, sort by date/name",
|
||||
helpGallery5: "Multi-select with Ctrl+click — bulk operations: Add to Group, Favorite All, Unfavorite All",
|
||||
helpGallery6: "Detail panel — Info tab: filename, size, date, tags (add/remove), memo with save",
|
||||
helpGallery7: "Detail panel — Metadata tab: embedded ComfyUI workflow JSON viewer with one-click clipboard copy",
|
||||
helpGallery8: "Detail panel — Groups tab: create, assign, remove, rename, and delete groups per image",
|
||||
helpGallery9: "Supports PNG (tEXt/iTXt metadata), JPEG, WebP, GIF; PNG workflow extraction reads ComfyUI-embedded JSON",
|
||||
helpGallery10: "Folder tree: click a folder to load its images; expand subfolders with ▶ arrow",
|
||||
helpGallery5: "Folder tree: click to load images, expand with ▶; '+ New' creates a subfolder inside the selected folder, 'Del' deletes it with all contents",
|
||||
helpGallery6: "Multi-select with Ctrl+click — bulk operations: Add to Group, Favorite All, Unfavorite All, Move To..., Delete",
|
||||
helpGallery7: "Detail panel — Info tab: filename, size, date, tags (add/remove), memo; 'Move To...' moves the image to another folder, 'Delete' removes it permanently",
|
||||
helpGallery8: "Detail panel — Metadata tab: displays workflow JSON from PNG embedded data (prompt / workflow keys) or from metadata saved by the Generate UI tab; one-click clipboard copy",
|
||||
helpGallery9: "Detail panel — Groups tab: create, assign, remove, rename, and delete groups per image",
|
||||
helpGallery10: "Workflow auto-save: images generated in the Generate UI tab automatically have their workflow saved to gallery metadata and shown in the Metadata tab",
|
||||
helpGallery11: "Supports PNG (tEXt/iTXt), JPEG, WebP, GIF; workflow extraction reads ComfyUI prompt and workflow keys embedded in PNG metadata",
|
||||
helpSidepanelTitle: "Workflow Studio Library (ComfyUI Side Panel)",
|
||||
helpSidepanel1: "Open from the Workflow Studio Library button in the ComfyUI toolbar",
|
||||
helpSidepanel2: "Workflows tab: All / ★ Favorites / Groups sub-tabs; ★ shown for favorites in All view",
|
||||
@@ -528,6 +541,36 @@ const LANGUAGES = {
|
||||
themeFontTrainOne: "Train One",
|
||||
themeFontSpaceMono: "Space Mono",
|
||||
themeFontFiraCode: "Fira Code",
|
||||
|
||||
// -- Metadata tab --
|
||||
tabMetadata: "Metadata",
|
||||
metaSectionCkpt: "Checkpoint",
|
||||
metaSectionVae: "VAE",
|
||||
metaSectionDiff: "Diffusion Model",
|
||||
metaSectionTe: "Text Encoder",
|
||||
metaSectionLora: "LoRA",
|
||||
metaSectionPrompt: "Prompt",
|
||||
metaDropMain: "Drop image / JSON",
|
||||
metaDropSub: "PNG · WebP · JSON",
|
||||
metaParsing: "Parsing...",
|
||||
metaFileTooLarge: "File too large (max 50 MB)",
|
||||
metaNoMetadata: "No metadata found",
|
||||
metaParseError: "Failed to parse metadata",
|
||||
metaPromptPositive: "Positive",
|
||||
metaPromptNegative: "Negative",
|
||||
metaSelectPrompt: "Select a prompt above to view full text...",
|
||||
metaFormatNoteTitle: "Supported formats",
|
||||
metaFmtComfyui: "ComfyUI — PNG / WebP / JSON",
|
||||
metaFmtSdwebui: "SD WebUI / SD Forge — PNG (parameters)",
|
||||
metaFmtFooocus: "Fooocus — PNG (fooocus_scheme)",
|
||||
metaFormatTodo: "More formats planned (non-SD1.5/SDXL/Illustrious models)",
|
||||
helpMetadataTitle: "Metadata Tab",
|
||||
helpMetadataDesc: "Drop a ComfyUI-generated PNG/WebP or workflow JSON to instantly extract and view the embedded model and prompt information.",
|
||||
helpMetadata1: "Left column: drop zone (image preview for PNG/WebP) and file info; click or drop to load",
|
||||
helpMetadata2: "Center column: Checkpoint, VAE, Diffusion Model, and Text Encoder lists extracted from the workflow",
|
||||
helpMetadata3: "Right column: LoRA list (with strength values) and Prompt list (click to view full text below)",
|
||||
helpMetadata4: "Prompt actions — Copy: copy to clipboard; GenUI:P/N: set GenerateUI positive/negative prompt; Prompt:P/N: set Prompt tab preset positive/negative",
|
||||
helpMetadata5: "Supported formats: ComfyUI (PNG/WebP/JSON), SD WebUI, SD Forge, Fooocus. Support for additional model types (beyond SD1.5/SDXL/Illustrious) is planned.",
|
||||
},
|
||||
|
||||
ja: {
|
||||
@@ -866,14 +909,26 @@ const LANGUAGES = {
|
||||
helpWf7: "バッジ管理：バッジの追加・名前変更・削除、カスタム色設定（Modelsタブと共有）— ⚙ Badgeボタン",
|
||||
helpGen1: "ComfyUIの接続・切断、接続状態の確認",
|
||||
helpGen2: "Workflowタブからワークフローを読み込み（App形式 .app.json は非対応）",
|
||||
helpGen3: "3タブ構成 — Input（プロンプト＋画像）、Model、Settings — 各タブにRaw JSON列を常時表示",
|
||||
helpGen3: "4タブ構成 — Input（プロンプト＋画像）、Model、Settings、Feeder — Input/Model/SettingsタブにはRaw JSON列を常時表示",
|
||||
helpGen4: "Inputタブ：左列にPrompt（上段）＋ Image ドラッグ＆ドロップ（下段）",
|
||||
helpGen5: "Modelタブ：Checkpoint/VAE/LoRA/ControlNet/UNET/TextEncoderのセレクタ（フィルタ検索付き）",
|
||||
helpGen6: "Settingsタブ：左列にKSampler（上段）＋ LatentImage（下段）",
|
||||
helpGen6: "Settingsタブ：KSamplerとLatent Imageを横並び（各50%幅）",
|
||||
helpGen7: "Raw JSONを各タブの右列に常時表示 — 直接編集してApplyでワークフロー即時反映",
|
||||
helpGen8: "シード管理：ランダム / 固定 / 増加 / 減少",
|
||||
helpGen9: "画像生成、進捗表示、生成停止、結果表示",
|
||||
helpGen10: "Eagle連携：生成画像をEagleへ自動保存",
|
||||
helpGen11: "Checkpoint Batch：ドロップダウンのフォルダツリーからチェックポイントを選択 — フォルダにチェックでそのフォルダ内を一括選択、▶で展開して個別選択も可能；Filterで絞り込み；Pause/Resumeでモデル間の処理を一時停止・再開；Stopで現在の生成完了後に中断",
|
||||
helpFeederTitle: "GenerateUI Tab — Feeder サブタブ",
|
||||
helpFeederDesc: "comfyui-image-feeder カスタムノードが必要です。ImageFeeder ノードを操作し、user/default/image-loop-data/ に保存された画像ライブラリを使って連続生成ループを実行します。",
|
||||
helpFeeder1: "左ペイン — ノード設定：ドロップダウンで対象 ImageFeeder ノードを選択；Directory・Sort Mode・Index・Start/End Index・Batch Size・Seed・Use Selection の各パラメータを編集；Apply で読み込み済みワークフローに反映",
|
||||
helpFeeder2: "左ペイン — プリセット：現在のフォルダ＋選択ファイルを名前付きプリセットとして保存；保存済みプリセットの読み込み・削除",
|
||||
helpFeeder3: "左ペイン — Run：After gen モードで各生成後の index 動作を設定 — Loop（index を 0 に折り返して無限継続）、Increment（index を進め全画像消化で自動停止）、Fixed（常に同じ index を使用）；Run ボタンでループ開始、Stop で中断",
|
||||
helpFeeder4: "中央ペイン — フォルダツリー：image-loop-data 内のサブフォルダを階層表示；クリックで画像を読み込み；↺ ボタンでツリー再読み込み",
|
||||
helpFeeder5: "中央ペイン — 画像グリッド：選択フォルダ内の画像をサムネイル表示；チェックボックスで選択に追加；All/None ボタンで一括選択・解除；クリックでプレビューパネルに表示",
|
||||
helpFeeder6: "中央ペイン — プレビューパネル：クリックした画像を拡大表示し、ファイル名・解像度・ファイルサイズを確認",
|
||||
helpFeeder7: "ステータスバー：現在のフォルダパスと、そのフォルダ内の総枚数に対する選択枚数を表示",
|
||||
helpFeeder8: "Run 時のシード：右ペインのシード設定（ランダム / 固定 / 増加 / 減少）を使用 — ImageFeeder 自身の Seed フィールドはランダムソートの並び順のみに影響",
|
||||
helpFeeder9: "Index 同期：生成完了後にノードが次の index を WebSocket で返送；Index フィールドが自動更新されて表示と実行状態が一致",
|
||||
helpPrompt1: "AIアシスタント（Ollama）：モデル選択、チャットでプロンプト相談、画像添付（ビジョンモデル対応）",
|
||||
helpPrompt2: "AIの応答をGenerateUIのプロンプトに適用",
|
||||
helpPrompt3: "翻訳機能：日⇔英、中⇔英",
|
||||
@@ -915,12 +970,13 @@ const LANGUAGES = {
|
||||
helpGallery2: "3カラムレイアウト: フォルダツリー (左) | 画像グリッド (中央) | 詳細パネル (右)",
|
||||
helpGallery3: "サムネイル・テーブル表示モード切替；ダブルクリックで全画面ライトボックス表示",
|
||||
helpGallery4: "ツールバーフィルタ：お気に入り(★)、テキスト検索、タグフィルタ、グループフィルタ、日付・名前ソート",
|
||||
helpGallery5: "Ctrl+クリックで複数選択 — 一括操作：グループへ追加、一括お気に入り、一括お気に入り解除",
|
||||
helpGallery6: "詳細パネル — Infoタブ：ファイル名、サイズ、日付、タグ（追加/削除）、メモ（保存機能付き）",
|
||||
helpGallery7: "詳細パネル — Metadataタブ：埋め込みComfyUIワークフローJSONビューアとワンクリッククリップボードコピー",
|
||||
helpGallery8: "詳細パネル — Groupsタブ：画像ごとのグループ作成、割り当て、解除、名前変更、削除",
|
||||
helpGallery9: "PNG (tEXt/iTXt メタデータ), JPEG, WebP, GIF対応； PNGはComfyUIの埋め込みJSONを読み込んでワークフロー抽出可能",
|
||||
helpGallery10: "フォルダツリー：フォルダをクリックして画像を読み込む；▶矢印でサブフォルダを展開",
|
||||
helpGallery5: "フォルダツリー：クリックで画像を読み込み；▶で展開；「+ New」で選択フォルダ内にサブフォルダを作成；「Del」でそのフォルダとすべての内容を削除",
|
||||
helpGallery6: "Ctrl+クリックで複数選択 — 一括操作：グループへ追加、一括お気に入り、一括お気に入り解除、移動（Move To...）、削除",
|
||||
helpGallery7: "詳細パネル — Infoタブ：ファイル名、サイズ、日付、タグ（追加/削除）、メモ；「Move To...」で他フォルダへ移動；「Delete」で完全削除",
|
||||
helpGallery8: "詳細パネル — Metadataタブ：PNGの埋め込みデータ（prompt / workflow キー）またはGenerateUIタブで保存したメタデータからワークフローJSONを表示；ワンクリックでクリップボードコピー",
|
||||
helpGallery9: "詳細パネル — Groupsタブ：画像ごとのグループ作成、割り当て、解除、名前変更、削除",
|
||||
helpGallery10: "ワークフロー自動保存：GenerateUIタブで生成した画像はワークフローが自動でギャラリーメタデータに保存され、Metadataタブで確認可能",
|
||||
helpGallery11: "PNG (tEXt/iTXt)、JPEG、WebP、GIF対応；PNG形式はComfyUIの埋め込みJSON（prompt / workflow キー）を読み込んでワークフロー抽出が可能",
|
||||
helpSidepanelTitle: "Workflow Studio Library（ComfyUIサイドパネル）",
|
||||
helpSidepanel1: "ComfyUIツールバーのWorkflow Studio Libraryボタンから開く",
|
||||
helpSidepanel2: "Workflowsタブ：All / ★ Favorites / Groupsサブタブ、Allビューでお気に入りに★表示",
|
||||
@@ -1054,6 +1110,36 @@ const LANGUAGES = {
|
||||
themeFontTrainOne: "トレイン One",
|
||||
themeFontSpaceMono: "Space Mono",
|
||||
themeFontFiraCode: "Fira Code",
|
||||
|
||||
// -- Metadata tab --
|
||||
tabMetadata: "メタデータ",
|
||||
metaSectionCkpt: "Checkpoint",
|
||||
metaSectionVae: "VAE",
|
||||
metaSectionDiff: "Diffusion Model",
|
||||
metaSectionTe: "Text Encoder",
|
||||
metaSectionLora: "LoRA",
|
||||
metaSectionPrompt: "プロンプト",
|
||||
metaDropMain: "画像 / JSON をドロップ",
|
||||
metaDropSub: "PNG · WebP · JSON",
|
||||
metaParsing: "解析中...",
|
||||
metaFileTooLarge: "ファイルが大きすぎます（最大 50 MB）",
|
||||
metaNoMetadata: "メタデータが見つかりません",
|
||||
metaParseError: "メタデータの解析に失敗しました",
|
||||
metaPromptPositive: "ポジティブ",
|
||||
metaPromptNegative: "ネガティブ",
|
||||
metaSelectPrompt: "上のプロンプトを選択すると全文を表示します...",
|
||||
metaFormatNoteTitle: "対応フォーマット",
|
||||
metaFmtComfyui: "ComfyUI — PNG / WebP / JSON",
|
||||
metaFmtSdwebui: "SD WebUI / SD Forge — PNG（parameters チャンク）",
|
||||
metaFmtFooocus: "Fooocus — PNG（fooocus_scheme チャンク）",
|
||||
metaFormatTodo: "対応予定: SD1.5 / SDXL / Illustrious 以外のモデル形式も順次対応",
|
||||
helpMetadataTitle: "Metadata タブ",
|
||||
helpMetadataDesc: "ComfyUI で生成した PNG / WebP または ワークフロー JSON をドロップすると、埋め込まれたモデル・プロンプト情報を即座に抽出・表示します。",
|
||||
helpMetadata1: "左列: ドロップゾーン（PNG/WebP は画像プレビュー表示）＋ファイル情報・対応フォーマット説明",
|
||||
helpMetadata2: "中列: ワークフローから抽出した Checkpoint・VAE・Diffusion Model・Text Encoder の一覧",
|
||||
helpMetadata3: "右列: LoRA 一覧（強度値付き）＋プロンプト一覧（クリックで下部に全文表示）",
|
||||
helpMetadata4: "プロンプトアクション — Copy: クリップボードにコピー; GenUI:P/N: GenerateUI のポジティブ/ネガティブプロンプトにセット; Prompt:P/N: Prompt タブ Presets のポジティブ/ネガティブにセット",
|
||||
helpMetadata5: "対応フォーマット: ComfyUI（PNG/WebP/JSON）・SD WebUI・SD Forge・Fooocus。SD1.5/SDXL/Illustrious 以外のモデル形式への対応は今後予定。",
|
||||
},
|
||||
|
||||
zh: {
|
||||
@@ -1388,14 +1474,26 @@ const LANGUAGES = {
|
||||
helpWf7: "徽章管理：添加、重命名、删除徽章并自定义颜色（与Models标签共享）— ⚙ Badge按钮",
|
||||
helpGen1: "连接/断开ComfyUI，检查连接状态",
|
||||
helpGen2: "从工作流标签页加载工作流（不支持App格式.app.json）",
|
||||
helpGen3: "3标签布局 — Input（提示词+图片）、Model、Settings — 每个标签含Raw JSON列实时预览",
|
||||
helpGen3: "4标签布局 — Input（提示词+图片）、Model、Settings、Feeder — Input/Model/Settings标签各含Raw JSON列实时预览",
|
||||
helpGen4: "Input标签：左列为Prompt（上）+ Image拖放（下）",
|
||||
helpGen5: "Model标签：Checkpoint/VAE/LoRA/ControlNet/UNET/TextEncoder选择器（含筛选）",
|
||||
helpGen6: "Settings标签：左列为KSampler（上）+ LatentImage（下）",
|
||||
helpGen6: "Settings标签：KSampler与Latent Image并排显示（各占50%宽度）",
|
||||
helpGen7: "Raw JSON在每个标签右列常驻显示 — 直接编辑并Apply即时重载工作流",
|
||||
helpGen8: "种子管理：随机/固定/递增/递减",
|
||||
helpGen9: "生成图片、进度显示、停止生成、查看结果",
|
||||
helpGen10: "Eagle集成：自动保存生成图片到Eagle",
|
||||
helpGen11: "Checkpoint Batch：从下拉框文件夹树中选择检查点 — 勾选文件夹可一键选中该文件夹内的所有文件，▶展开后也可单独选择；使用Filter筛选；Pause/Resume可在模型之间暂停和继续；Stop在当前生成完成后中止",
|
||||
helpFeederTitle: "GenerateUI Tab — Feeder 子标签",
|
||||
helpFeederDesc: "需要 comfyui-image-feeder 自定义节点。用于操控 ImageFeeder 节点，并对存储在 user/default/image-loop-data/ 中的图片库执行连续生成循环。",
|
||||
helpFeeder1: "左侧面板 — 节点设置：从下拉框选择目标 ImageFeeder 节点；编辑所有节点参数（Directory、Sort Mode、Index、Start/End Index、Batch Size、Seed、Use Selection）；点击 Apply 将更改写入当前工作流",
|
||||
helpFeeder2: "左侧面板 — 预设：将当前目录+选择文件保存为命名预设；加载或删除已保存的预设",
|
||||
helpFeeder3: "左侧面板 — Run：After gen 模式决定每次生成后的 index 行为 — Loop（回到0并无限循环）、Increment（递增 index，全部图片用完后自动停止）、Fixed（始终使用相同 index）；点击 Run 开始循环，Stop 中断",
|
||||
helpFeeder4: "中央面板 — 文件夹树：浏览 image-loop-data 内的子文件夹；点击文件夹加载图片；点击 ↺ 重新加载目录树",
|
||||
helpFeeder5: "中央面板 — 图片网格：缩略图显示所选文件夹内的所有图片；勾选图片加入选择集；All/None 按钮一键全选或清除；点击图片打开预览面板",
|
||||
helpFeeder6: "中央面板 — 预览面板：放大显示点击的图片，并显示文件名、分辨率和文件大小",
|
||||
helpFeeder7: "状态栏：显示当前文件夹路径，以及该文件夹内已选中图片数占总数的比例",
|
||||
helpFeeder8: "Run 时的种子：使用右侧面板的种子设置（随机/固定/递增/递减）— ImageFeeder 自身的 Seed 字段仅影响随机排序的顺序",
|
||||
helpFeeder9: "Index 同步：每次生成完成后节点通过 WebSocket 返回下一个 index；Index 字段自动更新，保持显示与执行状态一致",
|
||||
helpPrompt1: "AI助手（Ollama）：模型选择、聊天咨询提示词、图片附件（视觉模型）",
|
||||
helpPrompt2: "将AI回复应用到生成UI的提示词",
|
||||
helpPrompt3: "翻译功能：日\u2194英、中\u2194英",
|
||||
@@ -1437,12 +1535,13 @@ const LANGUAGES = {
|
||||
helpGallery2: "三列布局：文件夹树（左） | 图像网格（中） | 详情面板（右）",
|
||||
helpGallery3: "缩略图和表格视图模式；双击任何图像可在全屏灯箱中打开",
|
||||
helpGallery4: "工具栏过滤器：收藏 (★)、文本搜索、标签过滤、分组过滤、按日期/名称排序",
|
||||
helpGallery5: "使用 Ctrl+点击 多选 — 批量操作：添加到分组、全部收藏、取消全部收藏",
|
||||
helpGallery6: "详情面板 — 信息(Info)标签：文件名、大小、日期、标签（添加/移除）、包含保存功能的备注",
|
||||
helpGallery7: "详情面板 — 元数据(Metadata)标签：ComfyUI 嵌入的内置工作流 JSON 查看器及一键复制功能",
|
||||
helpGallery8: "详情面板 — 分组(Groups)标签：对每个图像进行组的创建、分配、移除、重命名和删除",
|
||||
helpGallery9: "支持 PNG（tEXt/iTXt 元数据）、JPEG、WebP、GIF；对于 PNG 会读取 ComfyUI 内置的 JSON 提取工作流",
|
||||
helpGallery10: "文件夹树：点击文件夹加载其包含的图像；使用 ▶ 箭头展开子文件夹",
|
||||
helpGallery5: "文件夹树：点击加载图像，▶展开；'+ New'在选定文件夹内创建子文件夹；'Del'删除该文件夹及其所有内容",
|
||||
helpGallery6: "使用Ctrl+点击多选 — 批量操作：添加到分组、全部收藏、取消全部收藏、移动到...、删除",
|
||||
helpGallery7: "详情面板 — 信息(Info)标签：文件名、大小、日期、标签（添加/移除）、备注；'移动到...'将图像移至另一文件夹；'删除'永久删除",
|
||||
helpGallery8: "详情面板 — 元数据(Metadata)标签：显示来自PNG嵌入数据（prompt / workflow键）或Generate UI标签保存的工作流JSON；一键复制到剪贴板",
|
||||
helpGallery9: "详情面板 — 分组(Groups)标签：对每个图像进行组的创建、分配、移除、重命名和删除",
|
||||
helpGallery10: "工作流自动保存：在Generate UI标签生成的图像，其工作流会自动保存到图库元数据，并在Metadata标签中显示",
|
||||
helpGallery11: "支持PNG（tEXt/iTXt）、JPEG、WebP、GIF；PNG格式读取ComfyUI嵌入的JSON（prompt / workflow键）提取工作流",
|
||||
helpSidepanelTitle: "Workflow Studio Library（ComfyUI侧面板）",
|
||||
helpSidepanel1: "从ComfyUI工具栏的Workflow Studio Library按钮打开",
|
||||
helpSidepanel2: "Workflows标签：All / ★ Favorites / Groups子标签，All视图中收藏项显示★",
|
||||
@@ -1576,6 +1675,36 @@ const LANGUAGES = {
|
||||
themeFontTrainOne: "Train One",
|
||||
themeFontSpaceMono: "Space Mono",
|
||||
themeFontFiraCode: "Fira Code",
|
||||
|
||||
// -- Metadata tab --
|
||||
tabMetadata: "元数据",
|
||||
metaSectionCkpt: "Checkpoint",
|
||||
metaSectionVae: "VAE",
|
||||
metaSectionDiff: "扩散模型",
|
||||
metaSectionTe: "文本编码器",
|
||||
metaSectionLora: "LoRA",
|
||||
metaSectionPrompt: "提示词",
|
||||
metaDropMain: "拖放图片 / JSON",
|
||||
metaDropSub: "PNG · WebP · JSON",
|
||||
metaParsing: "解析中...",
|
||||
metaFileTooLarge: "文件过大（最大 50 MB）",
|
||||
metaNoMetadata: "未找到元数据",
|
||||
metaParseError: "元数据解析失败",
|
||||
metaPromptPositive: "正向提示",
|
||||
metaPromptNegative: "负向提示",
|
||||
metaSelectPrompt: "选择上方提示词以查看全文...",
|
||||
metaFormatNoteTitle: "支持格式",
|
||||
metaFmtComfyui: "ComfyUI — PNG / WebP / JSON",
|
||||
metaFmtSdwebui: "SD WebUI / SD Forge — PNG（parameters）",
|
||||
metaFmtFooocus: "Fooocus — PNG（fooocus_scheme）",
|
||||
metaFormatTodo: "更多格式规划中（SD1.5/SDXL/Illustrious 以外模型）",
|
||||
helpMetadataTitle: "Metadata 标签页",
|
||||
helpMetadataDesc: "拖放 ComfyUI 生成的 PNG/WebP 或工作流 JSON，即可提取并显示其中的模型和提示词信息。",
|
||||
helpMetadata1: "左列：拖放区（PNG/WebP 显示图片预览）及文件信息与支持格式说明",
|
||||
helpMetadata2: "中列：从工作流中提取的 Checkpoint、VAE、扩散模型、文本编码器列表",
|
||||
helpMetadata3: "右列：LoRA 列表（含强度值）和提示词列表（点击在下方显示全文）",
|
||||
helpMetadata4: "提示词操作 — Copy：复制到剪贴板；GenUI:P/N：设置 GenerateUI 正/负向提示；Prompt:P/N：设置 Prompt 标签页预设正/负向提示",
|
||||
helpMetadata5: "支持格式：ComfyUI（PNG/WebP/JSON）、SD WebUI、SD Forge、Fooocus。SD1.5/SDXL/Illustrious 以外模型格式的支持正在规划中。",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,734 @@
|
||||
/**
|
||||
* Metadata Tab
|
||||
* Drop a PNG/WebP/JSON file to extract and display model/prompt metadata.
|
||||
* Parsing logic adapted from model-and-prompt-from-metadata (workflow_utils.js).
|
||||
*/
|
||||
|
||||
import { t } from "./i18n.js";
|
||||
|
||||
// ── File size limit ───────────────────────────────────────────
|
||||
const MAX_FILE_SIZE = 50 * 1024 * 1024;
|
||||
|
||||
// ── Sanitize JSON (NaN/Infinity → null) ──────────────────────
|
||||
function sanitizeJSON(text) {
|
||||
return text
|
||||
.replace(/-Infinity\b/g, "null")
|
||||
.replace(/\bInfinity\b/g, "null")
|
||||
.replace(/\bNaN\b/g, "null");
|
||||
}
|
||||
|
||||
// ── WebP EXIF ────────────────────────────────────────────────
|
||||
async function readWebPEXIFChunk(file) {
|
||||
const buffer = await file.arrayBuffer();
|
||||
const bytes = new Uint8Array(buffer);
|
||||
const view = new DataView(buffer);
|
||||
const ascii = new TextDecoder("latin1");
|
||||
if (bytes.byteLength < 12) return null;
|
||||
if (ascii.decode(bytes.slice(0, 4)) !== "RIFF") return null;
|
||||
if (ascii.decode(bytes.slice(8, 12)) !== "WEBP") return null;
|
||||
let offset = 12;
|
||||
while (offset + 8 <= buffer.byteLength) {
|
||||
const fourcc = ascii.decode(bytes.slice(offset, offset + 4));
|
||||
const chunkSize = view.getUint32(offset + 4, true);
|
||||
if (fourcc === "EXIF") return bytes.slice(offset + 8, offset + 8 + chunkSize);
|
||||
offset += 8 + chunkSize;
|
||||
if (chunkSize % 2 === 1) offset++;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function extractWorkflowFromEXIF(exifBytes) {
|
||||
const utf8 = new TextDecoder("utf-8", { fatal: false });
|
||||
const text = utf8.decode(exifBytes);
|
||||
for (const key of ["workflow:", "prompt:"]) {
|
||||
const idx = text.indexOf(key + "{");
|
||||
if (idx < 0) continue;
|
||||
let jsonStr = text.slice(idx + key.length);
|
||||
const nullIdx = jsonStr.indexOf("\x00");
|
||||
if (nullIdx >= 0) jsonStr = jsonStr.slice(0, nullIdx);
|
||||
try { return JSON.parse(sanitizeJSON(jsonStr)); } catch {
|
||||
const lb = jsonStr.lastIndexOf("}");
|
||||
if (lb > 0) { try { return JSON.parse(sanitizeJSON(jsonStr.slice(0, lb + 1))); } catch {} }
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ── PNG text chunks ───────────────────────────────────────────
|
||||
function findNull(arr, start = 0) {
|
||||
for (let i = start; i < arr.length; i++) if (arr[i] === 0) return i;
|
||||
return -1;
|
||||
}
|
||||
function parseTEXtChunk(data, latin1) {
|
||||
const np = findNull(data);
|
||||
if (np === -1) return null;
|
||||
return { keyword: latin1.decode(data.slice(0, np)), text: latin1.decode(data.slice(np + 1)) };
|
||||
}
|
||||
function parseITXtChunk(data, latin1, utf8) {
|
||||
const np = findNull(data);
|
||||
if (np === -1) return null;
|
||||
const keyword = latin1.decode(data.slice(0, np));
|
||||
let pos = np + 3;
|
||||
pos = findNull(data, pos); if (pos === -1) return null; pos++;
|
||||
pos = findNull(data, pos); if (pos === -1) return null; pos++;
|
||||
return { keyword, text: utf8.decode(data.slice(pos)) };
|
||||
}
|
||||
async function readAllPNGTextChunks(file) {
|
||||
const buffer = await file.arrayBuffer();
|
||||
const bytes = new Uint8Array(buffer);
|
||||
const PNG_SIG = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
|
||||
for (let i = 0; i < 8; i++) if (bytes[i] !== PNG_SIG[i]) return null;
|
||||
const view = new DataView(buffer);
|
||||
const latin1 = new TextDecoder("latin1");
|
||||
const utf8 = new TextDecoder("utf-8");
|
||||
let offset = 8;
|
||||
const chunks = {};
|
||||
while (offset + 12 <= buffer.byteLength) {
|
||||
const length = view.getUint32(offset);
|
||||
if (offset + 12 + length > buffer.byteLength) break;
|
||||
const type = latin1.decode(bytes.slice(offset + 4, offset + 8));
|
||||
const data = bytes.slice(offset + 8, offset + 8 + length);
|
||||
if (type === "tEXt") { const c = parseTEXtChunk(data, latin1); if (c) chunks[c.keyword] = c.text; }
|
||||
else if (type === "iTXt") { const c = parseITXtChunk(data, latin1, utf8); if (c) chunks[c.keyword] = c.text; }
|
||||
offset += 12 + length;
|
||||
}
|
||||
return chunks;
|
||||
}
|
||||
|
||||
// ── Workflow extraction helpers ───────────────────────────────
|
||||
function collectUnique(arr) {
|
||||
const seen = new Set(), out = [];
|
||||
for (const v of arr) { if (v && typeof v === "string" && !seen.has(v)) { seen.add(v); out.push(v); } }
|
||||
return out;
|
||||
}
|
||||
function collectAllNodes(workflow) {
|
||||
if (!Array.isArray(workflow.nodes)) return [];
|
||||
const all = [...workflow.nodes];
|
||||
for (const sg of workflow.definitions?.subgraphs ?? []) if (Array.isArray(sg.nodes)) all.push(...sg.nodes);
|
||||
return all;
|
||||
}
|
||||
const META_NODE_TYPES = new Set(["ImageMetadataCheckpointLoader", "ImageMetadataPromptLoader"]);
|
||||
const VAE_NONE = "None";
|
||||
|
||||
function extractCheckpoints(wf) {
|
||||
if (!wf || typeof wf !== "object") return [];
|
||||
if (Array.isArray(wf.nodes)) return collectUnique(collectAllNodes(wf).filter(n => n.type?.toLowerCase().includes("checkpoint") || META_NODE_TYPES.has(n.type)).map(n => n.widgets_values?.[0]));
|
||||
return collectUnique(Object.values(wf).filter(n => n?.class_type?.toLowerCase().includes("checkpoint") || META_NODE_TYPES.has(n?.class_type)).map(n => n.inputs?.ckpt_name));
|
||||
}
|
||||
function extractVAEs(wf) {
|
||||
if (!wf || typeof wf !== "object") return [];
|
||||
if (Array.isArray(wf.nodes)) return collectUnique(collectAllNodes(wf).flatMap(n => { if (n.type === "VAELoader") return [n.widgets_values?.[0]]; if (META_NODE_TYPES.has(n.type ?? "")) { const v = n.widgets_values?.[1]; return v && v !== VAE_NONE ? [v] : []; } return []; }));
|
||||
return collectUnique(Object.values(wf).flatMap(n => { if (!n || typeof n !== "object") return []; if (n.class_type === "VAELoader") return [n.inputs?.vae_name]; if (META_NODE_TYPES.has(n.class_type ?? "")) { const v = n.inputs?.vae_name; return v && v !== VAE_NONE ? [v] : []; } return []; }));
|
||||
}
|
||||
function extractDiffusionModels(wf) {
|
||||
if (!wf || typeof wf !== "object") return [];
|
||||
if (Array.isArray(wf.nodes)) return collectUnique(collectAllNodes(wf).filter(n => n.type === "UNETLoader").map(n => n.widgets_values?.[0]));
|
||||
return collectUnique(Object.values(wf).filter(n => n?.class_type === "UNETLoader").map(n => n.inputs?.unet_name));
|
||||
}
|
||||
function extractTextEncoders(wf) {
|
||||
if (!wf || typeof wf !== "object") return [];
|
||||
const names = [];
|
||||
if (Array.isArray(wf.nodes)) {
|
||||
for (const n of collectAllNodes(wf)) {
|
||||
if (n.type === "CLIPLoader") { if (n.widgets_values?.[0]) names.push(n.widgets_values[0]); }
|
||||
else if (n.type === "DualCLIPLoader") { [0,1].forEach(i => { if (n.widgets_values?.[i]) names.push(n.widgets_values[i]); }); }
|
||||
else if (n.type === "TripleCLIPLoader") { [0,1,2].forEach(i => { if (n.widgets_values?.[i]) names.push(n.widgets_values[i]); }); }
|
||||
}
|
||||
} else {
|
||||
for (const n of Object.values(wf)) {
|
||||
if (!n || typeof n !== "object") continue;
|
||||
const ct = n.class_type ?? "";
|
||||
if (ct === "CLIPLoader") { if (n.inputs?.clip_name) names.push(n.inputs.clip_name); }
|
||||
else if (ct === "DualCLIPLoader") { if (n.inputs?.clip_name1) names.push(n.inputs.clip_name1); if (n.inputs?.clip_name2) names.push(n.inputs.clip_name2); }
|
||||
else if (ct === "TripleCLIPLoader") { ["clip_name1","clip_name2","clip_name3"].forEach(k => { if (n.inputs?.[k]) names.push(n.inputs[k]); }); }
|
||||
}
|
||||
}
|
||||
return collectUnique(names);
|
||||
}
|
||||
function extractLoRAs(wf) {
|
||||
if (!wf || typeof wf !== "object") return [];
|
||||
const results = [], seen = new Set();
|
||||
function add(name, sm, sc) {
|
||||
if (!name || typeof name !== "string" || name === "None" || seen.has(name)) return;
|
||||
seen.add(name);
|
||||
results.push({ name, strength_model: typeof sm === "number" ? sm : 1.0, strength_clip: typeof sc === "number" ? sc : 1.0 });
|
||||
}
|
||||
if (Array.isArray(wf.nodes)) {
|
||||
for (const n of collectAllNodes(wf)) {
|
||||
const type = n.type ?? "";
|
||||
if (type === "LoraLoader") add(n.widgets_values?.[0], n.widgets_values?.[1], n.widgets_values?.[2]);
|
||||
else if (type === "LoraLoaderModelOnly") add(n.widgets_values?.[0], n.widgets_values?.[1], 1.0);
|
||||
else if (type === "ImageMetadataLoRALoader") { for (let i = 0; i < 3; i++) add(n.widgets_values?.[i*3], n.widgets_values?.[i*3+1], n.widgets_values?.[i*3+2]); }
|
||||
else if (type === "Lora Loader (LoraManager)") { const list = n.widgets_values?.find(v => Array.isArray(v)); if (list) for (const l of list) { if (l?.active !== false) add(l?.name, l?.strength ?? 1.0, l?.clipStrength ?? l?.strength ?? 1.0); } }
|
||||
}
|
||||
} else {
|
||||
for (const n of Object.values(wf)) {
|
||||
if (!n || typeof n !== "object") continue;
|
||||
const ct = n.class_type ?? "";
|
||||
if (ct === "LoraLoader") add(n.inputs?.lora_name, n.inputs?.strength_model, n.inputs?.strength_clip);
|
||||
else if (ct === "LoraLoaderModelOnly") add(n.inputs?.lora_name, n.inputs?.strength, 1.0);
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
function isTextEncoderNode(ct) { return ct === "CLIPTextEncode" || ct.includes("TextEncode") || ct.includes("TextEncoderSD"); }
|
||||
function isSamplerNode(ct) { return ct === "KSampler" || ct === "KSamplerAdvanced" || ct.includes("KSampler") || ct.includes("Sampler"); }
|
||||
function isPromptStylerNode(ct) { return ct.includes("PromptStyler"); }
|
||||
|
||||
function extractPrompts(wf) {
|
||||
if (!wf || typeof wf !== "object") return { positives: [], negatives: [] };
|
||||
return Array.isArray(wf.nodes) ? extractPromptsLiteGraph(wf) : extractPromptsAPI(wf);
|
||||
}
|
||||
|
||||
// CLIPTextEncode + KSampler でプロンプト抽出（トップレベル・サブグラフ共用）
|
||||
// サンプラーが見つかりテキストが取れた場合のみ非null を返す
|
||||
function extractPromptsFromNodeSet(nodes, links) {
|
||||
const nodeMap = new Map();
|
||||
for (const n of nodes) nodeMap.set(n.id, n);
|
||||
const linkOrigin = new Map(), linkSlot = new Map();
|
||||
if (Array.isArray(links)) {
|
||||
for (const lk of links) {
|
||||
if (Array.isArray(lk)) {
|
||||
linkOrigin.set(lk[0], lk[1]);
|
||||
linkSlot.set(lk[0], lk[2] ?? 0);
|
||||
} else if (lk && typeof lk === "object") {
|
||||
const id = lk.id ?? lk[0], origin = lk.origin_id ?? lk[1], slot = lk.origin_slot ?? lk[2] ?? 0;
|
||||
if (id != null && origin != null) { linkOrigin.set(id, origin); linkSlot.set(id, slot); }
|
||||
}
|
||||
}
|
||||
}
|
||||
const textMap = new Map();
|
||||
for (const n of nodes) {
|
||||
if (!isTextEncoderNode(n.type ?? "")) continue;
|
||||
const text = n.widgets_values?.[0];
|
||||
if (text && typeof text === "string") {
|
||||
textMap.set(n.id, text);
|
||||
} else if (Array.isArray(n.inputs)) {
|
||||
const textInput = n.inputs.find(inp => inp.name === "text" || inp.name === "text_g");
|
||||
if (textInput?.link != null) {
|
||||
const originId = linkOrigin.get(textInput.link);
|
||||
const originSlot = linkSlot.get(textInput.link) ?? 0;
|
||||
const srcNode = originId != null ? nodeMap.get(originId) : null;
|
||||
if (srcNode) {
|
||||
const srcType = srcNode.type ?? "";
|
||||
if (isPromptStylerNode(srcType) || srcType === "WFS_PromptText") {
|
||||
const v = srcNode.widgets_values?.[originSlot];
|
||||
if (v && typeof v === "string") textMap.set(n.id, v);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const pos = new Set(), neg = new Set();
|
||||
let foundSampler = false;
|
||||
for (const n of nodes) {
|
||||
if (!isSamplerNode(n.type ?? "") || !Array.isArray(n.inputs)) continue;
|
||||
foundSampler = true;
|
||||
for (const inp of n.inputs) {
|
||||
if (!inp || inp.link == null) continue;
|
||||
const originId = linkOrigin.get(inp.link);
|
||||
if (originId == null) continue;
|
||||
const text = textMap.get(originId);
|
||||
if (!text) continue;
|
||||
const name = inp.name ?? "";
|
||||
if (name === "positive" || name.startsWith("positive")) pos.add(text);
|
||||
else if (name === "negative" || name.startsWith("negative")) neg.add(text);
|
||||
}
|
||||
}
|
||||
if (!foundSampler || (pos.size === 0 && neg.size === 0)) return null;
|
||||
return { positives: [...pos], negatives: [...neg] };
|
||||
}
|
||||
|
||||
// MarkdownNote の **section** → - [name](url) パターンからモデルを抽出
|
||||
// flux/qwen/z-image などのサブグラフ形式ワークフロー向け補完用
|
||||
function extractMarkdownNoteModels(wf) {
|
||||
const allNodes = [];
|
||||
if (Array.isArray(wf.nodes)) allNodes.push(...wf.nodes);
|
||||
for (const sg of wf.definitions?.subgraphs ?? []) if (Array.isArray(sg.nodes)) allNodes.push(...sg.nodes);
|
||||
const result = { checkpoints: [], vaes: [], diffusionModels: [], textEncoders: [], loras: [] };
|
||||
const seen = { checkpoints: new Set(), vaes: new Set(), diffusionModels: new Set(), textEncoders: new Set(), loras: new Set() };
|
||||
function addU(arr, set, name) { if (name && typeof name === "string" && !set.has(name)) { set.add(name); arr.push(name); } }
|
||||
for (const n of allNodes) {
|
||||
if (n.type !== "MarkdownNote") continue;
|
||||
const raw = n.widgets_values;
|
||||
const text = Array.isArray(raw) ? raw[0] : (typeof raw === "string" ? raw : null);
|
||||
if (!text) continue;
|
||||
const sRe = /\*\*([^*\n]+)\*\*/g;
|
||||
let sm;
|
||||
while ((sm = sRe.exec(text)) !== null) {
|
||||
const sec = sm[1].trim().toLowerCase().replace(/\s+/g, "_");
|
||||
if (!["text_encoders", "diffusion_models", "vae", "checkpoints", "loras"].includes(sec)) continue;
|
||||
const rest = text.slice(sm.index + sm[0].length);
|
||||
const end = rest.search(/\n\*\*|\n##/);
|
||||
const content = end >= 0 ? rest.slice(0, end) : rest;
|
||||
const lRe = /^- \[([^\]]+)\]/gm;
|
||||
let lm;
|
||||
while ((lm = lRe.exec(content)) !== null) {
|
||||
const name = lm[1].trim();
|
||||
if (sec === "text_encoders") addU(result.textEncoders, seen.textEncoders, name);
|
||||
else if (sec === "diffusion_models") addU(result.diffusionModels, seen.diffusionModels, name);
|
||||
else if (sec === "vae") addU(result.vaes, seen.vaes, name);
|
||||
else if (sec === "checkpoints") addU(result.checkpoints, seen.checkpoints, name);
|
||||
else if (sec === "loras") addU(result.loras, seen.loras, name);
|
||||
}
|
||||
}
|
||||
}
|
||||
const hasAny = result.checkpoints.length || result.vaes.length || result.diffusionModels.length || result.textEncoders.length || result.loras.length;
|
||||
return hasAny ? result : null;
|
||||
}
|
||||
|
||||
// API形式: リンク参照 [srcNodeId, slot] からテキストを解決
|
||||
function resolveLinkedText(wf, srcId, slot) {
|
||||
const src = wf[String(srcId)];
|
||||
if (!src || typeof src !== "object") return null;
|
||||
const ct = src.class_type ?? "";
|
||||
// PromptStyler系: slot 0 = text_positive, slot 1 = text_negative
|
||||
if (isPromptStylerNode(ct)) {
|
||||
const v = slot === 0 ? src.inputs?.text_positive : src.inputs?.text_negative;
|
||||
return (v && typeof v === "string") ? v : null;
|
||||
}
|
||||
// 汎用テキストキー
|
||||
const keys = slot === 0
|
||||
? ["text_positive", "text", "text_g", "prompt"]
|
||||
: ["text_negative", "text_l"];
|
||||
for (const k of keys) {
|
||||
const v = src.inputs?.[k];
|
||||
if (v && typeof v === "string") return v;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function extractPromptsAPI(wf) {
|
||||
const metaNodes = Object.values(wf).filter(n => n?.class_type === "ImageMetadataPromptLoader");
|
||||
if (metaNodes.length > 0) {
|
||||
const pos = new Set(), neg = new Set();
|
||||
for (const n of metaNodes) { if (n.inputs?.positive_text) pos.add(n.inputs.positive_text); if (n.inputs?.negative_text) neg.add(n.inputs.negative_text); }
|
||||
if (pos.size > 0 || neg.size > 0) return { positives: [...pos], negatives: [...neg] };
|
||||
}
|
||||
const textMap = new Map();
|
||||
for (const [id, n] of Object.entries(wf)) {
|
||||
if (!n || !isTextEncoderNode(n.class_type ?? "")) continue;
|
||||
const raw = n.inputs?.text ?? n.inputs?.text_g ?? null;
|
||||
if (raw && typeof raw === "string") {
|
||||
textMap.set(id, raw);
|
||||
} else if (Array.isArray(raw)) {
|
||||
// リンク参照 [srcNodeId, slot] → 解決
|
||||
const text = resolveLinkedText(wf, raw[0], raw[1] ?? 0);
|
||||
if (text) textMap.set(id, text);
|
||||
}
|
||||
}
|
||||
const pos = new Set(), neg = new Set();
|
||||
let foundSampler = false;
|
||||
for (const n of Object.values(wf)) {
|
||||
if (!n || !isSamplerNode(n.class_type ?? "")) continue;
|
||||
foundSampler = true;
|
||||
for (const [key, val] of Object.entries(n.inputs ?? {})) {
|
||||
if (!Array.isArray(val)) continue;
|
||||
const text = textMap.get(String(val[0]));
|
||||
if (!text) continue;
|
||||
if (key === "positive" || key.startsWith("positive")) pos.add(text);
|
||||
else if (key === "negative" || key.startsWith("negative")) neg.add(text);
|
||||
}
|
||||
}
|
||||
if (!foundSampler || (pos.size === 0 && neg.size === 0)) { const all = [...textMap.values()]; return { positives: all, negatives: all }; }
|
||||
return { positives: [...pos], negatives: [...neg] };
|
||||
}
|
||||
|
||||
function extractPromptsLiteGraph(wf) {
|
||||
const { nodes, links } = wf;
|
||||
if (!Array.isArray(nodes)) return { positives: [], negatives: [] };
|
||||
|
||||
// 1. ImageMetadataPromptLoader (WFS専用)
|
||||
const metaNodes = nodes.filter(n => n.type === "ImageMetadataPromptLoader");
|
||||
if (metaNodes.length > 0) {
|
||||
const pos = new Set(), neg = new Set();
|
||||
for (const n of metaNodes) { const p = n.widgets_values?.[2], ng = n.widgets_values?.[3]; if (p) pos.add(p); if (ng) neg.add(ng); }
|
||||
if (pos.size > 0 || neg.size > 0) return { positives: [...pos], negatives: [...neg] };
|
||||
}
|
||||
|
||||
// 2. WFS_PromptText (WFS専用)
|
||||
const wfsNodes = nodes.filter(n => n.type === "WFS_PromptText");
|
||||
if (wfsNodes.length > 0) {
|
||||
const pos = new Set(), neg = new Set();
|
||||
for (const n of wfsNodes) { const p = n.widgets_values?.[0], ng = n.widgets_values?.[1]; if (p) pos.add(p); if (ng) neg.add(ng); }
|
||||
if (pos.size > 0 || neg.size > 0) return { positives: [...pos], negatives: [...neg] };
|
||||
}
|
||||
|
||||
// 3. トップレベルの CLIPTextEncode + KSampler
|
||||
const topResult = extractPromptsFromNodeSet(nodes, links ?? []);
|
||||
if (topResult) return topResult;
|
||||
|
||||
// 4. PrimitiveStringMultiline（flux2-klein など）
|
||||
const primTexts = [];
|
||||
for (const n of nodes) {
|
||||
if (n.type !== "PrimitiveStringMultiline") continue;
|
||||
const t = Array.isArray(n.widgets_values) ? n.widgets_values[0] : n.widgets_values;
|
||||
if (t && typeof t === "string" && t.trim()) primTexts.push(t.trim());
|
||||
}
|
||||
if (primTexts.length > 0) return { positives: primTexts, negatives: [] };
|
||||
|
||||
// 5. サブグラフ内の CLIPTextEncode + KSampler（z-image / qwen / flux など）
|
||||
for (const sg of wf.definitions?.subgraphs ?? []) {
|
||||
if (!Array.isArray(sg.nodes)) continue;
|
||||
const sgResult = extractPromptsFromNodeSet(sg.nodes, sg.links ?? []);
|
||||
if (sgResult) return sgResult;
|
||||
}
|
||||
|
||||
// 6. PromptStyler フォールバック
|
||||
const stylerPos = new Set(), stylerNeg = new Set();
|
||||
for (const n of nodes) {
|
||||
if (!isPromptStylerNode(n.type ?? "")) continue;
|
||||
const vals = n.widgets_values ?? [];
|
||||
for (let i = 0; i < vals.length; i++) {
|
||||
if (typeof vals[i] !== "string" || !vals[i].trim()) continue;
|
||||
if (i % 2 === 0) stylerPos.add(vals[i]);
|
||||
else stylerNeg.add(vals[i]);
|
||||
}
|
||||
}
|
||||
if (stylerPos.size > 0 || stylerNeg.size > 0) return { positives: [...stylerPos], negatives: [...stylerNeg] };
|
||||
|
||||
// 7. CLIPTextEncode 全テキスト（最終フォールバック）
|
||||
const all = [];
|
||||
for (const n of nodes) {
|
||||
if (!isTextEncoderNode(n.type ?? "")) continue;
|
||||
const t = n.widgets_values?.[0];
|
||||
if (t && typeof t === "string") all.push(t);
|
||||
}
|
||||
return { positives: all, negatives: all };
|
||||
}
|
||||
|
||||
// ── SD/Fooocus prompt extraction ──────────────────────────────
|
||||
function parseSDAParameters(raw) {
|
||||
const text = raw.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
|
||||
const stepsMatch = text.match(/\nSteps:\s+\d/);
|
||||
if (!stepsMatch) return null;
|
||||
const paramsStart = stepsMatch.index + 1;
|
||||
const promptSection = text.slice(0, paramsStart - 1);
|
||||
const paramsLine = text.slice(paramsStart);
|
||||
const negSep = "\nNegative prompt: ";
|
||||
const negIdx = promptSection.indexOf(negSep);
|
||||
let positive = "", negative = "";
|
||||
if (negIdx !== -1) { positive = promptSection.slice(0, negIdx).trim(); negative = promptSection.slice(negIdx + negSep.length).trim(); }
|
||||
else positive = promptSection.trim();
|
||||
const params = {};
|
||||
const re = /,?\s*([A-Za-z][A-Za-z0-9 ]*):\s*("(?:[^"\\]|\\.)*"|[^,]+)/g;
|
||||
let m;
|
||||
while ((m = re.exec(paramsLine)) !== null) params[m[1].trim()] = m[2].trim().replace(/^"|"$/g, "");
|
||||
return { positive, negative, params };
|
||||
}
|
||||
function parseFooocusMetadata(raw) {
|
||||
let obj; try { obj = JSON.parse(raw); } catch { return null; }
|
||||
if (!obj?.base_model) return null;
|
||||
const toArray = v => !v ? [] : Array.isArray(v) ? v.filter(Boolean) : [String(v)];
|
||||
return { checkpoint: obj.base_model, vae: (obj.vae && obj.vae !== "Default") ? obj.vae : null, positives: toArray(obj.full_prompt ?? obj.prompt), negatives: toArray(obj.full_negative_prompt ?? obj.negative_prompt) };
|
||||
}
|
||||
|
||||
// ── Master extractAllMetadata ─────────────────────────────────
|
||||
async function extractAllMetadata(file) {
|
||||
const name = file.name.toLowerCase();
|
||||
const isJSON = file.type === "application/json" || name.endsWith(".json");
|
||||
const isWebP = file.type === "image/webp" || name.endsWith(".webp");
|
||||
|
||||
function fromWorkflow(wf, source) {
|
||||
const base = { source, checkpoints: extractCheckpoints(wf), vaes: extractVAEs(wf), diffusionModels: extractDiffusionModels(wf), textEncoders: extractTextEncoders(wf), loras: extractLoRAs(wf), ...extractPrompts(wf) };
|
||||
// MarkdownNote からモデル情報を補完（subgraph形式の flux/qwen/z-image など）
|
||||
const mdm = extractMarkdownNoteModels(wf);
|
||||
if (mdm) {
|
||||
if (!base.checkpoints.length) base.checkpoints = mdm.checkpoints;
|
||||
if (!base.vaes.length) base.vaes = mdm.vaes;
|
||||
if (!base.diffusionModels.length) base.diffusionModels = mdm.diffusionModels;
|
||||
if (!base.textEncoders.length) base.textEncoders = mdm.textEncoders;
|
||||
if (!base.loras.length) base.loras = mdm.loras;
|
||||
}
|
||||
return base;
|
||||
}
|
||||
|
||||
if (isJSON) {
|
||||
let wf; try { wf = JSON.parse(sanitizeJSON(await file.text())); } catch { return null; }
|
||||
return wf ? fromWorkflow(wf, "comfyui") : null;
|
||||
}
|
||||
if (isWebP) {
|
||||
const exif = await readWebPEXIFChunk(file);
|
||||
if (!exif) return null;
|
||||
const wf = extractWorkflowFromEXIF(exif);
|
||||
return wf ? fromWorkflow(wf, "comfyui") : null;
|
||||
}
|
||||
// PNG
|
||||
const chunks = await readAllPNGTextChunks(file);
|
||||
if (!chunks) return null;
|
||||
|
||||
if (chunks.prompt) { let wf; try { wf = JSON.parse(sanitizeJSON(chunks.prompt)); } catch { return null; } return wf ? fromWorkflow(wf, "comfyui") : null; }
|
||||
if (chunks.workflow) { let wf; try { wf = JSON.parse(sanitizeJSON(chunks.workflow)); } catch { return null; } return wf ? fromWorkflow(wf, "comfyui") : null; }
|
||||
|
||||
if (chunks.fooocus_scheme === "fooocus" && chunks.parameters) {
|
||||
const f = parseFooocusMetadata(chunks.parameters);
|
||||
if (!f) return null;
|
||||
return { source: "fooocus", checkpoints: [f.checkpoint], vaes: f.vae ? [f.vae] : [], diffusionModels: [], textEncoders: [], loras: [], positives: f.positives, negatives: f.negatives };
|
||||
}
|
||||
if (chunks.parameters) {
|
||||
const p = parseSDAParameters(chunks.parameters);
|
||||
if (!p) return null;
|
||||
const { positive, negative, params } = p;
|
||||
const modelName = params["Model"];
|
||||
if (!modelName) return null;
|
||||
if (params["Module 2"] != null) {
|
||||
const textEncoders = [];
|
||||
for (let i = 2; i <= 9; i++) { const mod = params[`Module ${i}`]; if (!mod) break; textEncoders.push(mod); }
|
||||
return { source: "sd_forge", checkpoints: [], vaes: params["Module 1"] ? [params["Module 1"]] : [], diffusionModels: [modelName], textEncoders, loras: [], positives: positive ? [positive] : [], negatives: negative ? [negative] : [] };
|
||||
}
|
||||
const vaeValue = params["Module 1"] ?? params["VAE"] ?? null;
|
||||
return { source: "sd", checkpoints: [modelName], vaes: vaeValue ? [vaeValue] : [], diffusionModels: [], textEncoders: [], loras: [], positives: positive ? [positive] : [], negatives: negative ? [negative] : [] };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ── UI helpers ────────────────────────────────────────────────
|
||||
function escapeHtml(s) { return String(s).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); }
|
||||
|
||||
function buildModelItem(label) {
|
||||
const el = document.createElement("div");
|
||||
el.className = "wfm-meta-item";
|
||||
el.title = label;
|
||||
el.innerHTML = `<span class="wfm-meta-item-name">${escapeHtml(label)}</span>`;
|
||||
return el;
|
||||
}
|
||||
|
||||
function buildLoRAItem(lora) {
|
||||
const el = document.createElement("div");
|
||||
el.className = "wfm-meta-item";
|
||||
el.title = lora.name;
|
||||
const sm = lora.strength_model.toFixed(2);
|
||||
const sc = lora.strength_clip.toFixed(2);
|
||||
el.innerHTML = `<span class="wfm-meta-item-name">${escapeHtml(lora.name)}</span><span class="wfm-meta-item-badge">${sm}/${sc}</span>`;
|
||||
return el;
|
||||
}
|
||||
|
||||
function buildPromptItem(label, type, full, fullArea, fullLabel, listEl) {
|
||||
const el = document.createElement("div");
|
||||
el.className = "wfm-meta-item wfm-meta-item-clickable";
|
||||
const snippet = label.length > 60 ? label.slice(0, 60) + "…" : label;
|
||||
const typeBadge = type === "positive" ? `<span class="wfm-meta-badge-pos">POS</span>` : `<span class="wfm-meta-badge-neg">NEG</span>`;
|
||||
el.innerHTML = `${typeBadge}<span class="wfm-meta-item-name">${escapeHtml(snippet)}</span>`;
|
||||
el.addEventListener("click", () => {
|
||||
listEl.querySelectorAll(".wfm-meta-item-clickable").forEach(e => e.classList.remove("selected"));
|
||||
el.classList.add("selected");
|
||||
fullArea.value = full;
|
||||
fullLabel.textContent = type === "positive" ? t("metaPromptPositive") : t("metaPromptNegative");
|
||||
});
|
||||
return el;
|
||||
}
|
||||
|
||||
function renderSection(sectionEl, listEl, items, buildFn) {
|
||||
listEl.innerHTML = "";
|
||||
if (items.length === 0) { sectionEl.classList.add("wfm-meta-section-empty"); return; }
|
||||
sectionEl.classList.remove("wfm-meta-section-empty");
|
||||
for (const item of items) listEl.appendChild(buildFn(item));
|
||||
}
|
||||
|
||||
// ── Tab initialization ────────────────────────────────────────
|
||||
export function initMetadataTab() {
|
||||
const dropZone = document.getElementById("wfm-meta-drop");
|
||||
const dropLabel = document.getElementById("wfm-meta-drop-label");
|
||||
const previewImg = document.getElementById("wfm-meta-preview-img");
|
||||
const fileInfo = document.getElementById("wfm-meta-file-info");
|
||||
const fileInput = document.getElementById("wfm-meta-file-input");
|
||||
|
||||
const ckptSection = document.getElementById("wfm-meta-ckpt-section");
|
||||
const vaeSection = document.getElementById("wfm-meta-vae-section");
|
||||
const diffSection = document.getElementById("wfm-meta-diff-section");
|
||||
const teSection = document.getElementById("wfm-meta-te-section");
|
||||
const loraSection = document.getElementById("wfm-meta-lora-section");
|
||||
const promptSection = document.getElementById("wfm-meta-prompt-section");
|
||||
|
||||
const ckptList = document.getElementById("wfm-meta-ckpt-list");
|
||||
const vaeList = document.getElementById("wfm-meta-vae-list");
|
||||
const diffList = document.getElementById("wfm-meta-diff-list");
|
||||
const teList = document.getElementById("wfm-meta-te-list");
|
||||
const loraList = document.getElementById("wfm-meta-lora-list");
|
||||
const promptList = document.getElementById("wfm-meta-prompt-list");
|
||||
const promptFull = document.getElementById("wfm-meta-prompt-full");
|
||||
const promptFullLabel = document.getElementById("wfm-meta-prompt-full-label");
|
||||
|
||||
if (!dropZone) return;
|
||||
|
||||
// Apply i18n to section titles
|
||||
const titleMap = {
|
||||
"wfm-meta-ckpt-section": "metaSectionCkpt",
|
||||
"wfm-meta-vae-section": "metaSectionVae",
|
||||
"wfm-meta-diff-section": "metaSectionDiff",
|
||||
"wfm-meta-te-section": "metaSectionTe",
|
||||
"wfm-meta-lora-section": "metaSectionLora",
|
||||
"wfm-meta-prompt-section": "metaSectionPrompt",
|
||||
};
|
||||
for (const [id, key] of Object.entries(titleMap)) {
|
||||
const title = document.querySelector(`#${id} .wfm-meta-section-title`);
|
||||
if (title) { const tx = t(key); if (tx && tx !== key) title.textContent = tx; }
|
||||
}
|
||||
|
||||
// Apply i18n to format note
|
||||
const i18nIds = {
|
||||
"wfm-meta-format-note-title": "metaFormatNoteTitle",
|
||||
"wfm-meta-fmt-comfyui": "metaFmtComfyui",
|
||||
"wfm-meta-fmt-sdwebui": "metaFmtSdwebui",
|
||||
"wfm-meta-fmt-fooocus": "metaFmtFooocus",
|
||||
"wfm-meta-format-todo": "metaFormatTodo",
|
||||
};
|
||||
for (const [id, key] of Object.entries(i18nIds)) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) { const tx = t(key); if (tx && tx !== key) el.textContent = tx; }
|
||||
}
|
||||
|
||||
// Apply i18n to help card
|
||||
const helpIds = {
|
||||
"wfm-help-metadata-title": "helpMetadataTitle",
|
||||
"wfm-help-metadata-desc": "helpMetadataDesc",
|
||||
"wfm-help-metadata-1": "helpMetadata1",
|
||||
"wfm-help-metadata-2": "helpMetadata2",
|
||||
"wfm-help-metadata-3": "helpMetadata3",
|
||||
"wfm-help-metadata-4": "helpMetadata4",
|
||||
"wfm-help-metadata-5": "helpMetadata5",
|
||||
};
|
||||
for (const [id, key] of Object.entries(helpIds)) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) { const tx = t(key); if (tx && tx !== key) el.textContent = tx; }
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
[ckptList, vaeList, diffList, teList, loraList, promptList].forEach(l => { if (l) l.innerHTML = ""; });
|
||||
[ckptSection, vaeSection, diffSection, teSection, loraSection, promptSection].forEach(s => { if (s) s.classList.add("wfm-meta-section-empty"); });
|
||||
if (promptFull) promptFull.value = "";
|
||||
if (promptFullLabel) promptFullLabel.textContent = "";
|
||||
}
|
||||
|
||||
async function handleFile(file) {
|
||||
if (!file) return;
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
fileInfo.textContent = t("metaFileTooLarge");
|
||||
fileInfo.style.color = "var(--wfm-warning)";
|
||||
return;
|
||||
}
|
||||
|
||||
fileInfo.textContent = t("metaParsing");
|
||||
fileInfo.style.color = "var(--wfm-text-secondary)";
|
||||
clearAll();
|
||||
|
||||
// Show preview for images
|
||||
const isImage = file.type.startsWith("image/") || file.name.toLowerCase().match(/\.(png|webp|jpg|jpeg)$/);
|
||||
if (isImage) {
|
||||
const url = URL.createObjectURL(file);
|
||||
previewImg.src = url;
|
||||
previewImg.style.display = "block";
|
||||
dropLabel.style.display = "none";
|
||||
previewImg.onload = () => URL.revokeObjectURL(url);
|
||||
} else {
|
||||
previewImg.style.display = "none";
|
||||
dropLabel.style.display = "flex";
|
||||
}
|
||||
|
||||
let meta;
|
||||
try {
|
||||
meta = await extractAllMetadata(file);
|
||||
} catch (err) {
|
||||
console.error("[MetadataTab]", err);
|
||||
fileInfo.textContent = t("metaParseError");
|
||||
fileInfo.style.color = "var(--wfm-danger)";
|
||||
return;
|
||||
}
|
||||
|
||||
if (!meta) {
|
||||
fileInfo.textContent = t("metaNoMetadata");
|
||||
fileInfo.style.color = "var(--wfm-warning)";
|
||||
return;
|
||||
}
|
||||
|
||||
const sizeKB = (file.size / 1024).toFixed(1);
|
||||
const sourceLabel = { comfyui: "ComfyUI", sd: "SD WebUI", sd_forge: "SD Forge", fooocus: "Fooocus" }[meta.source] ?? meta.source;
|
||||
fileInfo.textContent = `${file.name} (${sizeKB} KB · ${sourceLabel})`;
|
||||
fileInfo.style.color = "var(--wfm-text-secondary)";
|
||||
|
||||
renderSection(ckptSection, ckptList, meta.checkpoints, n => buildModelItem(n));
|
||||
renderSection(vaeSection, vaeList, meta.vaes, n => buildModelItem(n));
|
||||
renderSection(diffSection, diffList, meta.diffusionModels, n => buildModelItem(n));
|
||||
renderSection(teSection, teList, meta.textEncoders, n => buildModelItem(n));
|
||||
renderSection(loraSection, loraList, meta.loras, l => buildLoRAItem(l));
|
||||
|
||||
// Prompts
|
||||
promptList.innerHTML = "";
|
||||
const allPrompts = [
|
||||
...meta.positives.map(p => ({ type: "positive", text: p })),
|
||||
...meta.negatives.map(p => ({ type: "negative", text: p })),
|
||||
];
|
||||
if (allPrompts.length > 0) {
|
||||
promptSection.classList.remove("wfm-meta-section-empty");
|
||||
for (const { type, text } of allPrompts) {
|
||||
promptList.appendChild(buildPromptItem(text, type, text, promptFull, promptFullLabel, promptList));
|
||||
}
|
||||
// Auto-select first positive
|
||||
const firstPositive = promptList.querySelector(".wfm-meta-item-clickable");
|
||||
if (firstPositive) firstPositive.click();
|
||||
} else {
|
||||
promptSection.classList.add("wfm-meta-section-empty");
|
||||
}
|
||||
}
|
||||
|
||||
// ── Prompt action buttons ─────────────────────────────────
|
||||
function getPromptText() { return promptFull?.value ?? ""; }
|
||||
|
||||
function flashBtn(btn) {
|
||||
btn.classList.add("wfm-meta-btn-flash");
|
||||
setTimeout(() => btn.classList.remove("wfm-meta-btn-flash"), 600);
|
||||
}
|
||||
|
||||
function setTextareaValue(id, text) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return false;
|
||||
el.value = text;
|
||||
el.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
return true;
|
||||
}
|
||||
|
||||
document.getElementById("wfm-meta-copy-btn")?.addEventListener("click", function () {
|
||||
const text = getPromptText();
|
||||
if (!text) return;
|
||||
navigator.clipboard.writeText(text).then(() => flashBtn(this));
|
||||
});
|
||||
|
||||
document.getElementById("wfm-meta-genui-pos-btn")?.addEventListener("click", function () {
|
||||
const text = getPromptText();
|
||||
if (!text) return;
|
||||
if (setTextareaValue("wfm-prompt-pos-text", text)) flashBtn(this);
|
||||
});
|
||||
|
||||
document.getElementById("wfm-meta-genui-neg-btn")?.addEventListener("click", function () {
|
||||
const text = getPromptText();
|
||||
if (!text) return;
|
||||
if (setTextareaValue("wfm-prompt-neg-text", text)) flashBtn(this);
|
||||
});
|
||||
|
||||
document.getElementById("wfm-meta-preset-pos-btn")?.addEventListener("click", function () {
|
||||
const text = getPromptText();
|
||||
if (!text) return;
|
||||
if (setTextareaValue("wfm-preset-pos", text)) flashBtn(this);
|
||||
});
|
||||
|
||||
document.getElementById("wfm-meta-preset-neg-btn")?.addEventListener("click", function () {
|
||||
const text = getPromptText();
|
||||
if (!text) return;
|
||||
if (setTextareaValue("wfm-preset-neg", text)) flashBtn(this);
|
||||
});
|
||||
|
||||
// Drag & Drop
|
||||
dropZone.addEventListener("dragover", e => { e.preventDefault(); e.stopPropagation(); dropZone.classList.add("drag-over"); });
|
||||
dropZone.addEventListener("dragleave", e => { e.stopPropagation(); dropZone.classList.remove("drag-over"); });
|
||||
dropZone.addEventListener("drop", e => { e.preventDefault(); e.stopPropagation(); dropZone.classList.remove("drag-over"); handleFile(e.dataTransfer.files?.[0]); });
|
||||
dropZone.addEventListener("click", e => { if (e.target === previewImg) return; fileInput.click(); });
|
||||
fileInput.addEventListener("change", () => { handleFile(fileInput.files?.[0]); fileInput.value = ""; });
|
||||
|
||||
// Prevent scroll passthrough in lists
|
||||
[ckptList, vaeList, diffList, teList, loraList, promptList].forEach(l => {
|
||||
if (l) l.addEventListener("wheel", e => e.stopPropagation(), { passive: true });
|
||||
});
|
||||
|
||||
clearAll();
|
||||
}
|
||||
+69
-21
@@ -685,38 +685,60 @@ function wcRenderFileList() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Group by directory; root ("") first, then alphabetical
|
||||
const grouped = {};
|
||||
for (const f of wcFiles) {
|
||||
const dir = f.dir || "";
|
||||
if (!grouped[dir]) grouped[dir] = [];
|
||||
grouped[dir].push(f);
|
||||
}
|
||||
const dirs = Object.keys(grouped).sort((a, b) => {
|
||||
if (a === "") return -1;
|
||||
if (b === "") return 1;
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
|
||||
function addFileItem(f, indented) {
|
||||
const item = document.createElement("div");
|
||||
item.className = "wfm-wc-file-item";
|
||||
item.className = "wfm-wc-file-item" + (indented ? " wfm-wc-file-item--sub" : "");
|
||||
item.innerHTML = `
|
||||
<div class="wfm-wc-file-item-info">
|
||||
<span class="wfm-wc-file-name">${esc(f.name)}</span>
|
||||
<span class="wfm-wc-file-ext">.${esc(f.ext)}</span>
|
||||
</div>
|
||||
<div class="wfm-wc-file-item-actions">
|
||||
<button class="wfm-pm-action-btn wfm-wc-use-btn" title="Insert __${esc(f.name)}__ at cursor">Use</button>
|
||||
<button class="wfm-pm-action-btn wfm-wc-use-btn" title="Insert __${esc(f.wc_name)}__ at cursor">Use</button>
|
||||
<button class="wfm-pm-action-btn wfm-wc-edit-btn" title="Edit file">✎</button>
|
||||
</div>
|
||||
`;
|
||||
// Insert reference into wildcard prompt
|
||||
item.querySelector(".wfm-wc-use-btn").addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const ta = document.getElementById("wfm-wc-prompt");
|
||||
if (ta) wcInsertAtCursor(ta, `__${f.name}__`);
|
||||
if (ta) wcInsertAtCursor(ta, `__${f.wc_name}__`);
|
||||
});
|
||||
// Open editor
|
||||
item.querySelector(".wfm-wc-edit-btn").addEventListener("click", async (e) => {
|
||||
e.stopPropagation();
|
||||
const content = await wcFetchContent(f.filename);
|
||||
wcOpenEditor(f.name, f.ext, content ?? "", f.filename);
|
||||
wcOpenEditor(f.wc_name, f.ext, content ?? "", f.filename);
|
||||
});
|
||||
// Click row = same as Use
|
||||
item.addEventListener("click", () => {
|
||||
const ta = document.getElementById("wfm-wc-prompt");
|
||||
if (ta) wcInsertAtCursor(ta, `__${f.name}__`);
|
||||
if (ta) wcInsertAtCursor(ta, `__${f.wc_name}__`);
|
||||
});
|
||||
list.appendChild(item);
|
||||
}
|
||||
|
||||
for (const dir of dirs) {
|
||||
if (dir) {
|
||||
const header = document.createElement("div");
|
||||
header.className = "wfm-wc-dir-header";
|
||||
header.textContent = dir + "/";
|
||||
list.appendChild(header);
|
||||
}
|
||||
for (const f of grouped[dir]) {
|
||||
addFileItem(f, dir !== "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
@@ -765,16 +787,36 @@ function wcUpdateFilePicker() {
|
||||
picker.innerHTML = `<div style="padding:8px;font-size:11px;color:var(--wfm-text-secondary);">No wildcard files</div>`;
|
||||
return;
|
||||
}
|
||||
// Group by directory same as file list
|
||||
const grouped = {};
|
||||
for (const f of wcFiles) {
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "wfm-wc-picker-item";
|
||||
btn.textContent = `__${f.name}__`;
|
||||
btn.addEventListener("click", () => {
|
||||
const ta = document.getElementById("wfm-wc-prompt");
|
||||
if (ta) wcInsertAtCursor(ta, `__${f.name}__`);
|
||||
picker.style.display = "none";
|
||||
});
|
||||
picker.appendChild(btn);
|
||||
const dir = f.dir || "";
|
||||
if (!grouped[dir]) grouped[dir] = [];
|
||||
grouped[dir].push(f);
|
||||
}
|
||||
const dirs = Object.keys(grouped).sort((a, b) => {
|
||||
if (a === "") return -1;
|
||||
if (b === "") return 1;
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
for (const dir of dirs) {
|
||||
if (dir) {
|
||||
const sep = document.createElement("div");
|
||||
sep.className = "wfm-wc-picker-dir";
|
||||
sep.textContent = dir + "/";
|
||||
picker.appendChild(sep);
|
||||
}
|
||||
for (const f of grouped[dir]) {
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "wfm-wc-picker-item" + (dir ? " wfm-wc-picker-item--sub" : "");
|
||||
btn.textContent = `__${f.wc_name}__`;
|
||||
btn.addEventListener("click", () => {
|
||||
const ta = document.getElementById("wfm-wc-prompt");
|
||||
if (ta) wcInsertAtCursor(ta, `__${f.wc_name}__`);
|
||||
picker.style.display = "none";
|
||||
});
|
||||
picker.appendChild(btn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1150,13 +1192,19 @@ export function initPromptTab() {
|
||||
const extSelect = document.getElementById("wfm-wc-editor-ext");
|
||||
const contentTA = document.getElementById("wfm-wc-editor-content");
|
||||
|
||||
const name = nameInput?.value.trim();
|
||||
// Normalize separators and strip leading/trailing slashes
|
||||
const rawName = (nameInput?.value || "").trim().replace(/\\/g, "/").replace(/\/+/g, "/").replace(/^\/|\/$/g, "");
|
||||
const ext = extSelect?.value || "txt";
|
||||
const content = contentTA?.value || "";
|
||||
|
||||
if (!name) { showToast("Enter a filename", "error"); return; }
|
||||
if (!/^[\w\-. ]+$/.test(name)) { showToast("Filename can only contain letters, numbers, -, _, .", "error"); return; }
|
||||
|
||||
if (!rawName) { showToast("Enter a filename", "error"); return; }
|
||||
// Validate each path component (allow letters, numbers, -, _, ., space)
|
||||
const nameParts = rawName.split("/");
|
||||
if (nameParts.some(p => !p || !/^[\w\-. ]+$/.test(p))) {
|
||||
showToast("Invalid path. Use folder/name format, each part: letters, numbers, -, _, . only", "error");
|
||||
return;
|
||||
}
|
||||
const name = rawName;
|
||||
const filename = `${name}.${ext}`;
|
||||
const saved = await wcSaveFile(filename, content);
|
||||
if (saved) {
|
||||
|
||||
+239
-10
@@ -20,6 +20,7 @@
|
||||
<button class="wfm-tab" data-tab="models">Models</button>
|
||||
<button class="wfm-tab" data-tab="generate">GenerateUI</button>
|
||||
<button class="wfm-tab" data-tab="prompt">Prompt</button>
|
||||
<button class="wfm-tab" data-tab="metadata">Metadata</button>
|
||||
<button class="wfm-tab" data-tab="gallery">Gallery</button>
|
||||
<button class="wfm-tab" data-tab="settings">Settings</button>
|
||||
<button class="wfm-tab" data-tab="help">Help</button>
|
||||
@@ -264,6 +265,7 @@
|
||||
<button class="wfm-gen-subtab-btn active" data-subtab="input">Input</button>
|
||||
<button class="wfm-gen-subtab-btn" data-subtab="model">Model</button>
|
||||
<button class="wfm-gen-subtab-btn" data-subtab="settings">Settings</button>
|
||||
<button class="wfm-gen-subtab-btn" data-subtab="feeder">Feeder</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Input — left sub-col: Prompt(top)+Image(bottom), right sub-col: Raw JSON -->
|
||||
@@ -310,6 +312,121 @@
|
||||
<div class="wfm-gen-rawjson-col" id="wfm-gen-rawjson-col-settings"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab: Feeder — full-width: settings(left) + library(center) -->
|
||||
<div id="wfm-gen-subtab-feeder" class="wfm-gen-subtab-content">
|
||||
<div class="wfm-feeder-layout">
|
||||
<!-- Left: Node selector + params + presets -->
|
||||
<div class="wfm-feeder-settings">
|
||||
<div class="wfm-feeder-pane-header">ImageFeeder Node</div>
|
||||
<div style="display:flex;gap:6px;align-items:center;margin-bottom:8px;">
|
||||
<select id="wfm-feeder-node-sel" class="wfm-select" style="flex:1;min-width:0;"></select>
|
||||
<button id="wfm-feeder-apply-btn" class="wfm-btn wfm-btn-primary" style="white-space:nowrap;">Apply</button>
|
||||
</div>
|
||||
<div class="wfm-feeder-field-row">
|
||||
<label class="wfm-feeder-label">Directory</label>
|
||||
<input type="text" id="wfm-feeder-dir-input" class="wfm-input wfm-feeder-input" placeholder="e.g. subdir">
|
||||
</div>
|
||||
<div class="wfm-feeder-field-row">
|
||||
<label class="wfm-feeder-label">Sort Mode</label>
|
||||
<select id="wfm-feeder-sort" class="wfm-select wfm-feeder-input">
|
||||
<option value="ascending">ascending</option>
|
||||
<option value="descending">descending</option>
|
||||
<option value="random">random</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="wfm-feeder-field-row">
|
||||
<label class="wfm-feeder-label">Index</label>
|
||||
<input type="number" id="wfm-feeder-index" class="wfm-input wfm-feeder-input" value="0" min="0">
|
||||
</div>
|
||||
<div class="wfm-feeder-field-row">
|
||||
<label class="wfm-feeder-label">Start Index</label>
|
||||
<input type="number" id="wfm-feeder-start" class="wfm-input wfm-feeder-input" value="0" min="0">
|
||||
</div>
|
||||
<div class="wfm-feeder-field-row">
|
||||
<label class="wfm-feeder-label">End Index</label>
|
||||
<input type="number" id="wfm-feeder-end" class="wfm-input wfm-feeder-input" value="0" min="0">
|
||||
</div>
|
||||
<div class="wfm-feeder-field-row">
|
||||
<label class="wfm-feeder-label">Batch Size</label>
|
||||
<input type="number" id="wfm-feeder-batch" class="wfm-input wfm-feeder-input" value="1" min="1">
|
||||
</div>
|
||||
<div class="wfm-feeder-field-row">
|
||||
<label class="wfm-feeder-label">Seed</label>
|
||||
<input type="number" id="wfm-feeder-seed" class="wfm-input wfm-feeder-input" value="0">
|
||||
</div>
|
||||
<div class="wfm-feeder-field-row">
|
||||
<label class="wfm-feeder-label">Use Selection</label>
|
||||
<input type="checkbox" id="wfm-feeder-use-sel" checked style="width:16px;height:16px;accent-color:var(--wfm-primary);">
|
||||
</div>
|
||||
|
||||
<div class="wfm-feeder-pane-header" style="margin-top:12px;">Presets</div>
|
||||
<div style="display:flex;gap:6px;margin-bottom:6px;">
|
||||
<input type="text" id="wfm-feeder-preset-name" class="wfm-input" style="flex:1;min-width:0;" placeholder="Preset name">
|
||||
<button id="wfm-feeder-preset-save" class="wfm-btn wfm-btn-sm" style="white-space:nowrap;">Save</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;">
|
||||
<select id="wfm-feeder-preset-sel" class="wfm-select" style="flex:1;min-width:0;"></select>
|
||||
<button id="wfm-feeder-preset-load" class="wfm-btn wfm-btn-sm wfm-btn-primary" style="white-space:nowrap;">Load</button>
|
||||
<button id="wfm-feeder-preset-del" class="wfm-btn wfm-btn-sm wfm-btn-danger" style="white-space:nowrap;">Del</button>
|
||||
</div>
|
||||
|
||||
<div class="wfm-feeder-pane-header" style="margin-top:12px;">Run</div>
|
||||
<div class="wfm-feeder-field-row">
|
||||
<label class="wfm-feeder-label">After gen</label>
|
||||
<select id="wfm-feeder-control-after" class="wfm-select wfm-feeder-input">
|
||||
<option value="loop">Loop</option>
|
||||
<option value="increment">Increment</option>
|
||||
<option value="fixed">Fixed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-top:4px;">
|
||||
<button id="wfm-feeder-run-btn" class="wfm-btn wfm-btn-primary" style="flex:1;">▶ Run</button>
|
||||
<button id="wfm-feeder-stop-btn" class="wfm-btn wfm-btn-danger" style="flex:1;" disabled>■ Stop</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center: Image Library -->
|
||||
<div class="wfm-feeder-library">
|
||||
<!-- Status bar -->
|
||||
<div id="wfm-feeder-status" class="wfm-feeder-status-bar">Select a folder</div>
|
||||
|
||||
<div class="wfm-feeder-library-body">
|
||||
<!-- Folder tree -->
|
||||
<div class="wfm-feeder-tree-pane">
|
||||
<div class="wfm-feeder-pane-header" style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<span>Folders</span>
|
||||
<button id="wfm-feeder-reload-tree" class="wfm-btn wfm-btn-sm" title="Reload">↺</button>
|
||||
</div>
|
||||
<div id="wfm-feeder-tree" class="wfm-feeder-tree-scroll">
|
||||
<div class="wfm-feeder-tree-msg">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image grid -->
|
||||
<div class="wfm-feeder-grid-pane">
|
||||
<div class="wfm-feeder-pane-header" style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<span>Images</span>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<button id="wfm-feeder-sel-all" class="wfm-btn wfm-btn-sm">All</button>
|
||||
<button id="wfm-feeder-desel-all" class="wfm-btn wfm-btn-sm">None</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wfm-feeder-grid" class="wfm-feeder-grid">
|
||||
<div class="wfm-feeder-grid-msg">Select a folder</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview -->
|
||||
<div class="wfm-feeder-preview-pane">
|
||||
<div class="wfm-feeder-pane-header">Preview</div>
|
||||
<img id="wfm-feeder-preview-img" class="wfm-feeder-preview-img" style="display:none;" alt="">
|
||||
<div id="wfm-feeder-preview-name" class="wfm-feeder-preview-name"></div>
|
||||
<pre id="wfm-feeder-preview-info" class="wfm-feeder-preview-info"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Generation Controls & Results -->
|
||||
@@ -352,12 +469,23 @@
|
||||
</div>
|
||||
<div id="wfm-ckpt-batch-body" style="display:none;margin-top:8px;">
|
||||
<div style="margin-bottom:6px;">
|
||||
<div style="font-size:11px;color:var(--wfm-text-secondary);margin-bottom:3px;">Include Folders (empty = all, comma-separated)</div>
|
||||
<input type="text" id="wfm-ckpt-batch-include" class="wfm-input" placeholder="e.g. sdxl, flux">
|
||||
</div>
|
||||
<div style="margin-bottom:6px;">
|
||||
<div style="font-size:11px;color:var(--wfm-text-secondary);margin-bottom:3px;">Exclude Folders (comma-separated)</div>
|
||||
<input type="text" id="wfm-ckpt-batch-exclude" class="wfm-input" placeholder="e.g. old, test">
|
||||
<div style="font-size:11px;color:var(--wfm-text-secondary);margin-bottom:3px;">Checkpoints</div>
|
||||
<div class="wfm-ckpt-dropdown-wrap" id="wfm-ckpt-dropdown-wrap">
|
||||
<button type="button" id="wfm-ckpt-dropdown-btn" class="wfm-ckpt-dropdown-trigger">
|
||||
<span id="wfm-ckpt-dropdown-label">All checkpoints</span>
|
||||
<span class="wfm-ckpt-dropdown-arrow">▼</span>
|
||||
</button>
|
||||
<div id="wfm-ckpt-dropdown-panel" class="wfm-ckpt-dropdown-panel" style="display:none;">
|
||||
<div style="padding:6px 8px 4px;">
|
||||
<input type="text" id="wfm-ckpt-search" class="wfm-input" style="height:28px;padding:4px 8px;font-size:11px;" placeholder="Filter...">
|
||||
</div>
|
||||
<div style="display:flex;gap:4px;padding:0 8px 4px;">
|
||||
<button type="button" id="wfm-ckpt-select-all" class="wfm-btn wfm-btn-sm" style="flex:1;font-size:10px;">All</button>
|
||||
<button type="button" id="wfm-ckpt-deselect-all" class="wfm-btn wfm-btn-sm" style="flex:1;font-size:10px;">None</button>
|
||||
</div>
|
||||
<div id="wfm-ckpt-list" class="wfm-ckpt-dropdown-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wfm-ckpt-batch-info" style="font-size:11px;color:var(--wfm-text-secondary);"></div>
|
||||
<div id="wfm-ckpt-batch-progress" style="margin-top:8px;display:none;">
|
||||
@@ -368,6 +496,9 @@
|
||||
<div class="wfm-gen-progress-track">
|
||||
<div id="wfm-ckpt-batch-bar" class="wfm-gen-progress-bar" style="background:var(--wfm-warning,#f59e0b);"></div>
|
||||
</div>
|
||||
<div style="margin-top:6px;">
|
||||
<button id="wfm-ckpt-batch-pause-btn" class="wfm-btn wfm-btn-sm" style="width:100%;">Pause</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -549,7 +680,7 @@
|
||||
<!-- Editor (shown when a file is selected or New is clicked) -->
|
||||
<div id="wfm-wc-editor" class="wfm-wc-editor" style="display:none;">
|
||||
<div class="wfm-wc-editor-header">
|
||||
<input type="text" id="wfm-wc-editor-name" class="wfm-input" placeholder="filename (no extension)" style="flex:1;min-width:0;">
|
||||
<input type="text" id="wfm-wc-editor-name" class="wfm-input" placeholder="name or folder/name" style="flex:1;min-width:0;">
|
||||
<select id="wfm-wc-editor-ext" class="wfm-select" style="width:70px;">
|
||||
<option value="txt">txt</option>
|
||||
<option value="yaml">yaml</option>
|
||||
@@ -572,6 +703,76 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Metadata Tab -->
|
||||
<section id="wfm-tab-metadata" class="wfm-tab-content">
|
||||
<div class="wfm-metadata-layout">
|
||||
<!-- Col1: Drop zone + preview -->
|
||||
<div class="wfm-metadata-col1">
|
||||
<div class="wfm-metadata-drop-zone" id="wfm-meta-drop">
|
||||
<div class="wfm-meta-drop-label" id="wfm-meta-drop-label">
|
||||
<div class="wfm-meta-drop-main">Drop image / JSON</div>
|
||||
<div class="wfm-meta-drop-sub">PNG · WebP · JSON</div>
|
||||
</div>
|
||||
<img id="wfm-meta-preview-img" class="wfm-meta-preview-img" style="display:none;" alt="preview">
|
||||
</div>
|
||||
<div class="wfm-meta-file-info" id="wfm-meta-file-info"></div>
|
||||
<div class="wfm-meta-format-note" id="wfm-meta-format-note">
|
||||
<div class="wfm-meta-format-note-title" id="wfm-meta-format-note-title">Supported formats</div>
|
||||
<ul class="wfm-meta-format-list">
|
||||
<li id="wfm-meta-fmt-comfyui">ComfyUI — PNG / WebP / JSON</li>
|
||||
<li id="wfm-meta-fmt-sdwebui">SD WebUI / SD Forge — PNG (parameters)</li>
|
||||
<li id="wfm-meta-fmt-fooocus">Fooocus — PNG (fooocus_scheme)</li>
|
||||
</ul>
|
||||
<div class="wfm-meta-format-todo" id="wfm-meta-format-todo">More formats planned (non-SD1.5/SDXL/Illustrious models)</div>
|
||||
</div>
|
||||
<input type="file" id="wfm-meta-file-input" accept="image/png,image/webp,.json,application/json" style="display:none;">
|
||||
</div>
|
||||
|
||||
<!-- Col2: Model info -->
|
||||
<div class="wfm-metadata-col2">
|
||||
<div class="wfm-meta-section" id="wfm-meta-ckpt-section">
|
||||
<div class="wfm-meta-section-title">Checkpoint</div>
|
||||
<div class="wfm-meta-list" id="wfm-meta-ckpt-list"></div>
|
||||
</div>
|
||||
<div class="wfm-meta-section" id="wfm-meta-vae-section">
|
||||
<div class="wfm-meta-section-title">VAE</div>
|
||||
<div class="wfm-meta-list" id="wfm-meta-vae-list"></div>
|
||||
</div>
|
||||
<div class="wfm-meta-section" id="wfm-meta-diff-section">
|
||||
<div class="wfm-meta-section-title">Diffusion Model</div>
|
||||
<div class="wfm-meta-list" id="wfm-meta-diff-list"></div>
|
||||
</div>
|
||||
<div class="wfm-meta-section" id="wfm-meta-te-section">
|
||||
<div class="wfm-meta-section-title">Text Encoder</div>
|
||||
<div class="wfm-meta-list" id="wfm-meta-te-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Col3: LoRA + Prompt -->
|
||||
<div class="wfm-metadata-col3">
|
||||
<div class="wfm-meta-section" id="wfm-meta-lora-section">
|
||||
<div class="wfm-meta-section-title">LoRA</div>
|
||||
<div class="wfm-meta-list" id="wfm-meta-lora-list"></div>
|
||||
</div>
|
||||
<div class="wfm-meta-section wfm-meta-prompt-section" id="wfm-meta-prompt-section">
|
||||
<div class="wfm-meta-section-title">Prompt</div>
|
||||
<div class="wfm-meta-list" id="wfm-meta-prompt-list"></div>
|
||||
<div class="wfm-meta-prompt-full-wrap">
|
||||
<div class="wfm-meta-prompt-full-label" id="wfm-meta-prompt-full-label"></div>
|
||||
<textarea class="wfm-meta-prompt-full" id="wfm-meta-prompt-full" readonly placeholder="Select a prompt above to view full text..."></textarea>
|
||||
<div class="wfm-meta-prompt-actions">
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-meta-copy-btn">Copy</button>
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-meta-genui-pos-btn">GenUI:P</button>
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-meta-genui-neg-btn">GenUI:N</button>
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-meta-preset-pos-btn">Prompt:P</button>
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-meta-preset-neg-btn">Prompt:N</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Settings Tab -->
|
||||
<section id="wfm-tab-settings" class="wfm-tab-content">
|
||||
<div class="wfm-settings-container">
|
||||
@@ -612,15 +813,31 @@
|
||||
<ul>
|
||||
<li id="wfm-help-gen-1">Connect/disconnect ComfyUI and check connection status</li>
|
||||
<li id="wfm-help-gen-2">Load workflows from Workflow tab (App format .app.json not supported)</li>
|
||||
<li id="wfm-help-gen-3">3-tab layout — Input (Prompt + Image), Model, Settings — each with a Raw JSON column for instant preview and direct editing</li>
|
||||
<li id="wfm-help-gen-3">4-tab layout — Input (Prompt + Image), Model, Settings, Feeder — Input/Model/Settings each include a Raw JSON column for instant preview and direct editing</li>
|
||||
<li id="wfm-help-gen-4">Input tab: Prompt (top) and Image drag-and-drop (bottom) in the left column</li>
|
||||
<li id="wfm-help-gen-5">Model tab: Checkpoint, VAE, LoRA, ControlNet, UNET, TextEncoder selectors with filter</li>
|
||||
<li id="wfm-help-gen-6">Settings tab: KSampler (top) and LatentImage (bottom) in the left column</li>
|
||||
<li id="wfm-help-gen-6">Settings tab: KSampler and Latent Image side by side, each at 50% width</li>
|
||||
<li id="wfm-help-gen-7">Raw JSON always visible in the right column of each tab — edit directly and Apply to reload the workflow</li>
|
||||
<li id="wfm-help-gen-8">Seed control: random, fixed, increment, decrement — seed input and mode selector stacked vertically for readability</li>
|
||||
<li id="wfm-help-gen-9">Generate, progress display, stop, and view results</li>
|
||||
<li id="wfm-help-gen-10">Eagle integration: auto-save generated images to Eagle</li>
|
||||
<li id="wfm-help-gen-11">Checkpoint Batch: enable via checkbox in the right panel to auto-generate once per checkpoint model; filter by include folders (comma-separated), exclude folders, or leave blank to use all checkpoints; Stop button aborts the loop after the current generation; per-model progress bar shown in amber</li>
|
||||
<li id="wfm-help-gen-11">Checkpoint Batch: select checkpoints by folder from the dropdown — check a folder to select all its files, or expand with ▶ to check individual files; use Filter to search; Pause/Resume suspends and continues between models; Stop aborts after the current generation</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3 id="wfm-help-feeder-title">GenerateUI Tab — Feeder subtab</h3>
|
||||
<p id="wfm-help-feeder-desc">Requires the comfyui-image-feeder custom node. Controls ImageFeeder nodes and runs continuous generation loops over an image library stored in user/default/image-loop-data/.</p>
|
||||
<ul>
|
||||
<li id="wfm-help-feeder-1">Left pane — Node settings: select the target ImageFeeder node from the dropdown; edit all node parameters (Directory, Sort Mode, Index, Start/End Index, Batch Size, Seed, Use Selection); click Apply to write changes to the loaded workflow</li>
|
||||
<li id="wfm-help-feeder-2">Left pane — Presets: save the current directory + selection as a named preset; load or delete saved presets</li>
|
||||
<li id="wfm-help-feeder-3">Left pane — Run: After gen mode determines index behavior after each generation — Loop (wrap back to 0 and continue indefinitely), Increment (advance index and stop when all images are exhausted), Fixed (always use the same index); click Run to start the loop, Stop to interrupt</li>
|
||||
<li id="wfm-help-feeder-4">Center pane — Folder tree: browse subfolders inside image-loop-data; click a folder to load its images; click ↺ to reload the tree</li>
|
||||
<li id="wfm-help-feeder-5">Center pane — Image grid: displays thumbnails of all images in the selected folder; check individual images to add them to the selection; All / None buttons select or clear the entire folder; click an image to open the preview panel</li>
|
||||
<li id="wfm-help-feeder-6">Center pane — Preview panel: shows the clicked image at larger size with filename, resolution, and file size</li>
|
||||
<li id="wfm-help-feeder-7">Status bar: shows the current folder path and how many images are selected out of the total in the folder</li>
|
||||
<li id="wfm-help-feeder-8">Seed during Run: uses the right-pane seed setting (Random / Fixed / Increment / Decrement) — the ImageFeeder's own Seed field controls random sort order only</li>
|
||||
<li id="wfm-help-feeder-9">Index sync: after each generation the node returns the next index via WebSocket; the Index field updates automatically so the display stays in sync</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -639,6 +856,18 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3 id="wfm-help-metadata-title">Metadata Tab</h3>
|
||||
<p id="wfm-help-metadata-desc">Drop a ComfyUI-generated PNG/WebP or workflow JSON to instantly extract and view the embedded model and prompt information.</p>
|
||||
<ul>
|
||||
<li id="wfm-help-metadata-1">Left column: drop zone (image preview for PNG/WebP) and file info; click or drop to load</li>
|
||||
<li id="wfm-help-metadata-2">Center column: Checkpoint, VAE, Diffusion Model, and Text Encoder lists extracted from the workflow</li>
|
||||
<li id="wfm-help-metadata-3">Right column: LoRA list (with strength values) and Prompt list (click to view full text below)</li>
|
||||
<li id="wfm-help-metadata-4">Prompt actions — Copy: copy to clipboard; GenUI:P/N: set GenerateUI positive/negative prompt; Prompt:P/N: set Prompt tab preset positive/negative</li>
|
||||
<li id="wfm-help-metadata-5">Supported formats: ComfyUI (PNG/WebP/JSON), SD WebUI, SD Forge, Fooocus. Support for additional model types (beyond SD1.5/SDXL/Illustrious) is planned.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3>Settings Tab</h3>
|
||||
<ul>
|
||||
|
||||
Reference in New Issue
Block a user