Compare commits
@@ -1,5 +1,893 @@
|
||||
# DEVLOG - ComfyUI-Workflow-Studio
|
||||
|
||||
## 2026-04-28: v0.3.2 生成UIタブ — Checkpoint Batch・Seed UIレイアウト修正
|
||||
|
||||
### 概要
|
||||
|
||||
- 生成UIタブの右パネルに **Checkpoint Batch** 機能を追加
|
||||
- Seed行のレイアウトを2段構成に変更（seed値とモード選択が見切れる問題を解消）
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `templates/index.html` — UI要素追加・修正
|
||||
|
||||
**Checkpoint Batch パネル追加:**
|
||||
- 右パネル（Seed行の下・結果表示の上）に `wfm-ckpt-batch-panel` を追加
|
||||
- チェックボックス ON/OFF でバッチ設定欄を展開/折りたたみ
|
||||
- Include Folders テキスト入力 — カンマ区切りでサブフォルダ名を指定。空欄でcheckpointフォルダ内の全モデルを対象
|
||||
- Exclude Folders テキスト入力 — カンマ区切りで除外するサブフォルダ名を指定
|
||||
- 対象モデル数プレビュー表示 (`wfm-ckpt-batch-info`)
|
||||
- バッチ進捗エリア — 現在のモデル名、インデックス/総数、アンバー色プログレスバー (`wfm-ckpt-batch-bar`)
|
||||
|
||||
**Seed レイアウト修正:**
|
||||
- 横並び1行（`flex-direction: row`）→ 縦2行（`flex-direction: column`）に変更
|
||||
- 1行目: `Seed:` ラベル + 数値入力（`flex:1` で横幅いっぱい）
|
||||
- 2行目: モード選択セレクト（`width:100%`）
|
||||
|
||||
**ヘルプタブ:**
|
||||
- GenerateUI タブ説明に gen-11（Checkpoint Batch の説明）を追加
|
||||
- gen-8（Seed control）に2段レイアウト化の補足を追加
|
||||
|
||||
#### `static/js/generate-tab.js` — バッチロジック追加・生成処理リファクタリング
|
||||
|
||||
**新規追加:**
|
||||
- `_ckptBatch` — `{ aborted: false }` バッチ中断フラグ
|
||||
- `_parseFolderList(str)` — カンマ区切り文字列をトリム・小文字化して配列に変換
|
||||
- `_getModelFolder(modelPath)` — パスの最初の `/` より前を抽出してフォルダ名を取得。`\\` を `/` に正規化、ルート直下は `""` を返す
|
||||
- `_filterCheckpoints(checkpoints, includeStr, excludeStr)` — include/exclude フィルタを適用したチェックポイントリストを返す。大文字小文字を区別しない
|
||||
- `_updateBatchInfo()` — チェックポイントリストのフィルタ済み件数を `wfm-ckpt-batch-info` に即時反映
|
||||
- `initCheckpointBatch()` — チェックボックス・include/exclude 入力のイベントリスナーを登録
|
||||
- `_coreGenerate(silent)` — 1回の生成コア処理（`silent=true` のとき完了トーストを省略）。エラー時はスローする
|
||||
- `_runBatchGenerate()` — チェックポイントリストをループし `_coreGenerate` を順番に呼び出す。各反復でワークフロー内の全checkpointノードの `ckpt_name` を書き換える。エラーは件数カウントして継続。完了後に結果サマリをトースト表示
|
||||
|
||||
**変更:**
|
||||
- `handleGenerate()` — バッチが有効な場合は `_runBatchGenerate()` を、無効の場合は `_coreGenerate(false)` を呼び出すよう分岐。ボタン管理（disabled / Stop 表示）を共通 try/finally で処理
|
||||
- interrupt ボタンのハンドラ — `_ckptBatch.aborted = true` を設定してから `comfyUI.interrupt()` を呼び出し、単発生成とバッチの両方を停止できるように
|
||||
- Refresh Models ボタンのハンドラ — モデルリスト再取得後に `_updateBatchInfo()` を呼び出してバッチ件数を更新
|
||||
- `initGenerateTab()` — 末尾で `initCheckpointBatch()` を呼び出し。初期接続成功時に `_updateBatchInfo()` を呼び出し
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-27: v0.3.1 ギャラリー拡張（フォルダ/ファイル操作・ワークフロー保存）
|
||||
|
||||
### 概要
|
||||
|
||||
- ギャラリータブにフォルダ作成・削除機能を追加
|
||||
- ギャラリータブにファイル削除・移動機能を追加（単体・複数選択対応）
|
||||
- 操作後もフォルダツリーの展開状態を維持するよう改善
|
||||
- 生成UIタブで生成した画像のワークフローをギャラリーメタデータに自動保存
|
||||
- MetadataタブのワークフローJSON表示をComfyUI生成画像全般（`prompt`キー）に対応
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `py/services/gallery_metadata.py` — メタデータ操作追加
|
||||
|
||||
- `delete(image_path)` 追加 — 画像削除時にメタデータエントリを除去
|
||||
- `rename_path(old_path, new_path)` 追加 — ファイル移動後のパスキー付け替え
|
||||
- `allowed` セットに `"workflow"` を追加 — 生成UIからのワークフロー保存を受け付けるように
|
||||
|
||||
#### `py/services/gallery_service.py` — ファイル・フォルダ操作追加
|
||||
|
||||
- `create_folder(parent_path, name)` — 無効文字チェック付きでサブフォルダを作成。作成後にフォルダキャッシュを無効化
|
||||
- `delete_folder(folder_path)` — `shutil.rmtree` で再帰削除。ルートフォルダは保護
|
||||
- `delete_images(paths)` — 複数画像ファイルを削除。各ファイルのメタデータ削除・キャッシュ無効化も実行
|
||||
- `move_images(paths, dest_folder)` — 複数画像を別フォルダへ移動。ファイル名衝突時は連番サフィックス付与。メタデータのパスキーを `rename_path` で引き継ぎ
|
||||
- `extract_workflow_from_metadata` 修正 — PNG埋め込みの参照キーを `workflow` → `workflow / prompt` の順に拡張。どちらも存在しない場合は `gallery_metadata.json` の `workflow` フィールドへフォールバック
|
||||
|
||||
#### `py/routes/gallery_routes.py` — エンドポイント追加
|
||||
|
||||
- `POST /wfm/gallery/folder` — フォルダ作成
|
||||
- `DELETE /wfm/gallery/folder` — フォルダ削除
|
||||
- `POST /wfm/gallery/images/delete` — 画像削除（単体・複数）
|
||||
- `POST /wfm/gallery/images/move` — 画像移動（単体・複数）
|
||||
|
||||
#### `static/js/gallery-tab.js` — フロントエンド拡張
|
||||
|
||||
**API定数追加:**
|
||||
- `folderCreate`, `folderDelete`, `imagesDelete`, `imagesMove`
|
||||
|
||||
**state追加:**
|
||||
- `folderTree` — ツリー全体データを保持（移動先フォルダ一覧の生成に使用）
|
||||
|
||||
**フォルダツリー展開状態の保持:**
|
||||
- `_getExpandedPaths()` — 再構築前に展開済みフォルダのパスを `Set` で収集
|
||||
- `_restoreTreeState(expandedPaths, selectedPath)` — 再構築後に展開状態・選択ハイライトを復元。階層の浅い順に展開することで子ノードのDOM存在を保証
|
||||
- `renderTreeNode` — 各アイテムに `data-path` 属性を付与（復元の識別子）
|
||||
- `loadFolderTree` — 初回ロード判定（`isFirstLoad`）を追加。2回目以降は `_restoreTreeState` を呼び出して展開状態を維持
|
||||
|
||||
**フォルダ操作:**
|
||||
- `createFolder()` — `prompt()` でフォルダ名入力後、API呼び出し・ツリー再読み込み
|
||||
- `deleteFolder()` — 確認ダイアログ後、再帰削除・currentFolder リセット・ツリー再読み込み
|
||||
- フォルダラベルクリック時に Delete Folder ボタンの `disabled` 状態を更新（ルート選択時は削除不可）
|
||||
|
||||
**ファイル削除・移動:**
|
||||
- `performDeleteImages(paths)` — 削除後に `state.images` / `state.selectedImages` を即時更新。詳細パネルの選択中画像が削除された場合はパネルをリセット
|
||||
- `performMoveImages(paths, dest)` — 移動後に同様に state を即時更新
|
||||
- `flattenFolderTree(node)` — ツリーデータをフラットリストに変換（移動先選択に使用）
|
||||
- `openMoveModal(paths)` — 移動先フォルダ選択モーダルを動的生成。現在フォルダを除く全フォルダをドロップダウン表示
|
||||
- 詳細パネルの Move To... / Delete ボタンを画像選択時に有効化
|
||||
|
||||
#### `templates/index.html` — UI要素追加
|
||||
|
||||
- フォルダツリーヘッダーに「+ New」「Del」ボタン（`wfm-gallery-tree-actions`）
|
||||
- 詳細パネル Info タブに「Move To...」「Delete」ボタン（`wfm-gallery-file-actions`）
|
||||
- 一括バーに「Move To...」「Delete」ボタン
|
||||
- ヘルプ項目を10項目から11項目に更新
|
||||
|
||||
#### `static/css/gallery-tab.css` — スタイル追加
|
||||
|
||||
- `.wfm-gallery-tree-header` — `justify-content: space-between` でタイトルとボタンを両端配置
|
||||
- `.wfm-gallery-tree-actions` — フォルダ操作ボタンのフレックスコンテナ
|
||||
- `.wfm-gallery-file-actions` — 詳細パネルのファイル操作ボタン
|
||||
- `.wfm-gallery-move-modal` / `.wfm-gallery-move-modal-title` / `.wfm-gallery-move-dest-sel` / `.wfm-gallery-move-modal-footer` — 移動先選択モーダル
|
||||
|
||||
#### `static/js/generate-tab.js` — ワークフロー自動保存
|
||||
|
||||
- `_outputDir` モジュール変数 — outputパスをキャッシュ
|
||||
- `_fetchOutputDir()` — `/api/wfm/settings/output-dir` からoutputパスを取得
|
||||
- `saveGeneratedImagesMeta(images, workflow)` — 生成完了後、各画像のフルパスを組み立てて `/wfm/gallery/image/meta` にワークフローを保存。`type !== "output"` の一時ファイルはスキップ
|
||||
- `initGenerateTab` — 初期化時に `_fetchOutputDir()` を実行。`wfm-output-dir-changed` イベントで設定変更時にパスを同期
|
||||
- `handleGenerate` — 生成成功後に `saveGeneratedImagesMeta` を非同期呼び出し
|
||||
|
||||
### 技術的な判断
|
||||
|
||||
- **ツリー展開状態の復元**: `innerHTML = ""` による完全再構築を維持しつつ、展開パスを `Set` で保存して復元する方式を採用。差分DOMパッチより実装が単純で、フォルダ追加・削除後のツリー構造変化にも対応できる
|
||||
- **PNG `prompt` キーの参照**: ComfyUIのSaveImageノードはデフォルトでPNGに `prompt` キー（API形式）のみを埋め込む。`workflow` キー（UI形式）が埋め込まれるのは特定の操作時のみ。`prompt` を参照することで既存の全ComfyUI生成画像に対応
|
||||
- **フォールバック優先順位**: PNG埋め込み（`workflow` > `prompt`）> `gallery_metadata.json` の順とし、ComfyUI本体が埋め込んだデータを最優先に
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-18: v0.3.0 モデルグループ表示改善（全タイプ横断・サイドパネル修正）
|
||||
|
||||
### 概要
|
||||
|
||||
- モデルタブのグループフィルタードロップダウンを全タイプ横断表示に改善
|
||||
- ComfyUIサイドパネルのModel Groupsビューを v0.2.9 のタイプ別形式に対応させバグ修正
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `static/js/models-tab.js` — グループフィルター全タイプ横断表示
|
||||
|
||||
- `state.allModelGroups` 追加 — 全タイプのグループを `{ type: { groupName: [models] } }` 形式で保持
|
||||
- `fetchAllModelGroups()` 追加 — `type` パラメータなしで全タイプのグループをAPIから一括取得
|
||||
- `renderGroupFilter()` 改善 — ドロップダウンオプションを `[Checkpoint] GroupName` / `[LoRA] GroupName` 形式で全タイプ分表示。値は `type::groupName` としてエンコード
|
||||
- グループフィルター `change` ハンドラ更新 — 選択したグループが現在と異なるタイプの場合、モデルタイプタブを自動切り替えしてモデルを再ロード
|
||||
- `saveModelGroups()` — 保存時に `state.allModelGroups[type]` も更新
|
||||
- `loadModelsForCurrentType()` — ロード時に `state.allModelGroups[type]` を同期
|
||||
- `loadMetadataAndModels()` — 初回ロード時に `fetchAllModelGroups()` で全タイプのグループを一括取得
|
||||
|
||||
#### `web/comfyui/node_sets_menu.js` — サイドパネルのModel Groupsビュー修正
|
||||
|
||||
- `renderModelGroups()` を新タイプ別形式 `{ type: { groupName: [...] } }` に対応
|
||||
- 旧: `groups[groupName]` が配列を期待 → `TypeError: .filter is not a function` でクラッシュ
|
||||
- 新: `flatGroups = [{modelType, groupName, members}]` にフラット展開してから描画
|
||||
- グループヘッダーに `[Checkpoint]` / `[LoRA]` 等のタイプラベルを追加（`wfm-nlp-model-type-badge`クラス）
|
||||
- `typeOf[name] || modelType` — モデルリスト未取得時のフォールバックをグループのモデルタイプに変更
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-18: v0.2.9 モデル有効/無効・複数選択・一括削除
|
||||
|
||||
### 概要
|
||||
|
||||
- モデルファイルの拡張子リネーム（`.disabled`サフィックス）でComfyUIへの表示を制御
|
||||
- モデル種別ごとのグループスコープ（checkpointグループはcheckpointタブにのみ表示）
|
||||
- 複数選択モードと一括グループ操作・ファイル削除機能を追加
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `py/services/models_service.py` — 有効/無効・削除ロジック追加
|
||||
|
||||
- `_DISABLED_SUFFIX = ".disabled"` 定数追加
|
||||
- `_SIDECAR_EXTENSIONS` — 削除対象の付属ファイル拡張子リスト（`.preview.png` 〜 `.webp` + `.json`, `.civitai.info`, `.info`）
|
||||
- `find_model_file(model_type, model_name)` — 有効・無効両状態を検索、`(Path, is_enabled)` を返す
|
||||
- `enable_model(model_type, model_name)` — `.disabled` → 元の拡張子にリネーム
|
||||
- `disable_model(model_type, model_name)` — 元の拡張子 → `.disabled` にリネーム（`path.name` ベースでサブディレクトリ二重化バグを回避）
|
||||
- `scan_disabled_models(model_type)` — `rglob("*.disabled")` でスキャン、正規化名リストを返す
|
||||
- `get_model_groups(model_type=None)` — `model_type` パラメータ追加。旧フラット形式 `{ "groupName": [...] }` を `_groups_legacy` に退避し、`{ "_groups": { "checkpoint": {...} } }` 形式へ自動マイグレーション
|
||||
- `save_model_groups(groups, model_type)` — `model_type` パラメータ追加、種別ごとに保存
|
||||
- `delete_model(model_type, model_name)` — モデルファイル（有効・無効どちらも対応）を削除。`path.name` から `.disabled` を除去してstemを正しく計算し、全サイドカーファイルを削除。メタデータエントリも削除
|
||||
|
||||
#### `py/routes/models_routes.py` — エンドポイント追加・変更
|
||||
|
||||
**新エンドポイント:**
|
||||
|
||||
- `GET /api/wfm/models/disabled?type=` — 指定タイプの無効モデル名リストを返す
|
||||
- `POST /api/wfm/models/toggle` — `{ model_type, model_name, enabled }` でモデル1件の有効/無効を切り替え
|
||||
- `POST /api/wfm/models/group-toggle` — `{ model_type, group_name, enabled }` でグループ内全モデルを一括切り替え
|
||||
- `POST /api/wfm/models/delete` — `{ model_type, model_names: [] }` で複数モデルを一括削除
|
||||
|
||||
**変更:**
|
||||
|
||||
- `GET /api/wfm/models/groups` — `?type=` クエリパラメータ追加
|
||||
- `POST /api/wfm/models/groups` — ボディを `{ "model_type": ..., "groups": {...} }` 形式に変更
|
||||
|
||||
#### `static/js/comfyui-client.js` — Hypernetworkバグ修正
|
||||
|
||||
- `_fetchModelList` で新ComfyUI APIフォーマット `["COMBO", {"values":[...]}]` に対応
|
||||
- `Array.isArray(first)` チェックを追加、文字列 `"COMBO"` をスプレッドしてしまう問題を解消
|
||||
|
||||
#### `static/js/models-tab.js` — フロントエンド全体
|
||||
|
||||
**state追加:**
|
||||
|
||||
- `disabledModels: {}` — タイプ別の無効モデルSet
|
||||
- `statusFilter: "all"` — "all" / "enabled" / "disabled"
|
||||
- `selectMode: false`, `selectedModels: new Set()` — 複数選択状態
|
||||
|
||||
**新関数:**
|
||||
|
||||
- `isModelDisabled()`, `fetchDisabledModels()`, `toggleModelEnable()`, `toggleGroupEnable()` — 有効/無効操作
|
||||
- `toggleSelectMode()` — 選択モードのON/OFF切り替え、ボタンテキスト更新
|
||||
- `toggleModelSelection(modelName)` — DOM直接更新（再レンダリングなし）
|
||||
- `clearSelection()` — 選択リセット
|
||||
- `renderBulkActionBar()` — グループ選択・追加/削除・新規作成・削除ボタンを描画
|
||||
- `bulkAddToGroup()`, `bulkRemoveFromGroup()` — 一括グループ操作
|
||||
- `bulkDeleteModels()` — `confirm()` で確認後 `/api/wfm/models/delete` を呼び出し、ローカルstateを即時更新
|
||||
|
||||
**各ビュー:**
|
||||
|
||||
- ThumbView / CardView: 無効オーバーレイ・⏸ボタン・selectMode時チェックボックスオーバーレイ追加
|
||||
- TableView: チェックボックス列・`wfm-table-td-check` 追加
|
||||
- `renderSideGroup()`: "全て有効化" / "全て無効化" ボタン追加
|
||||
|
||||
**タイプ切り替え:**
|
||||
|
||||
- `groupFilter`, `statusFilter`, `selectMode`, `selectedModels` をリセット
|
||||
|
||||
#### `templates/index.html` — UI要素追加
|
||||
|
||||
- `<select id="wfm-models-status-filter">` — All / Enabled / Disabled フィルター
|
||||
- `<button id="wfm-models-select-btn">` — 選択モード切り替え
|
||||
- `<div id="wfm-models-bulk-bar">` — 一括操作バー（初期非表示）
|
||||
- `<li id="wfm-help-models-11">` — ヘルプ項目追加
|
||||
|
||||
#### `static/css/main.css` — スタイル追加
|
||||
|
||||
- `.wfm-model-disabled` / `.wfm-disabled-overlay` — 無効状態の見た目
|
||||
- `.wfm-toggle-btn` / `.wfm-toggle-btn.wfm-toggle-disabled` — ⏸ボタン
|
||||
- `.wfm-badge-disabled` — 無効バッジ
|
||||
- `.wfm-select-check` / `.wfm-select-check.checked` — チェックボックス
|
||||
- `.wfm-card-checked` — 選択済みカードのアウトライン
|
||||
- `.wfm-bulk-bar` / `.wfm-bulk-count` / `.wfm-bulk-sep` / `.wfm-table-td-check` — 一括操作バー
|
||||
|
||||
#### `static/js/i18n.js` — 新キー追加（3言語）
|
||||
|
||||
- 有効/無効操作: `modelEnable`, `modelDisable`, `modelDisabled`, `modelStatusAll`, `modelStatusEnabled`, `modelStatusDisabled`, `modelGroupEnableAll`, `modelGroupDisableAll`, `modelToggleError`, `modelStatusWarning`
|
||||
- 複数選択: `modelSelectMode`, `modelSelectExit`, `modelSelected`, `modelBulkAddGroup`, `modelBulkRemoveGroup`, `modelBulkCreateAdd`, `modelBulkAddDone`, `modelBulkRemoveDone`
|
||||
- ファイル削除: `modelBulkDelete`, `modelBulkDeleteConfirm`, `modelBulkDeleteDone`, `modelBulkDeleteError`
|
||||
- ヘルプ: `helpModels11`（複数選択・一括削除の説明）、`helpModels3` 更新（ステータスフィルター追記）
|
||||
|
||||
### 技術的な判断
|
||||
|
||||
- **拡張子リネーム方式**: ComfyUIはスキャン時に認識拡張子のみ列挙するため、`.disabled`サフィックスを付けるだけでモデルを隠せる。ファイル移動や専用DBを使わず最もシンプルな実装
|
||||
- **DOM直接更新（選択モード）**: 選択トグルのたびに`renderModelGrid()`を呼ぶと大量再レンダリングが起きる。`querySelectorAll("[data-model-name]")`で対象要素を絞り`classList.toggle()`のみ実行
|
||||
- **stemバグの根本原因**: `path.stem`は最後のサフィックスのみ除去する。`model.safetensors.disabled`の`stem`は`model.safetensors`になるため、`model.safetensors.png`を探してしまう。`.disabled`を先に除去してから`Path.stem`を計算する必要がある
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-14: v0.2.8 データ保存先変更・エクスポート/インポート機能追加
|
||||
|
||||
### 概要
|
||||
|
||||
- プラグインデータの保存先を `custom_nodes/ComfyUI-Workflow-Studio/data/` から `ComfyUI/user/default/Workflow-Studio/` に変更
|
||||
- `user/default/` が存在しない環境（Portable版・Dockerなど）では従来の `data/` にフォールバック
|
||||
- 設定タブに「データ管理」セクションを追加（エクスポート/インポート機能）
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `py/config.py` — DATA_DIR 保存先変更
|
||||
|
||||
**`DATA_DIR` の解決ロジックを変更:**
|
||||
|
||||
- 変更前: `DATA_DIR = PLUGIN_DIR / "data"` （固定）
|
||||
- 変更後: `user/default/` が存在すれば `DATA_DIR = _COMFYUI_USER_DEFAULT / "Workflow-Studio"`、存在しなければ `PLUGIN_DIR / "data"` にフォールバック
|
||||
- `_COMFYUI_ROOT` の定義位置を `DATA_DIR` の前に移動（`_COMFYUI_WORKFLOWS` と共用）
|
||||
|
||||
#### `py/routes/settings_routes.py` — エクスポート/インポートAPI追加
|
||||
|
||||
**新エンドポイント:**
|
||||
|
||||
- `GET /api/wfm/settings/export` — `settings.json`, `metadata.json`, `node_metadata.json`, `node_sets.json`, `prompts.json`, `model_metadata.json`, `gallery_metadata.json` の7ファイルを1つのJSONバンドルとして返す（`Content-Disposition: attachment` でDL）
|
||||
- `POST /api/wfm/settings/import` — JSONバンドルを受け取り、含まれるファイルを個別に書き戻す。存在しないキーはスキップ
|
||||
|
||||
**新定数:**
|
||||
|
||||
- `_DATA_FILES` — エクスポート/インポート対象ファイル名のリスト
|
||||
|
||||
#### `static/js/settings-tab.js` — データ管理UIセクション追加
|
||||
|
||||
**Eagle連携セクションの直下に `<!-- Data Management -->` セクションを追加:**
|
||||
|
||||
- エクスポートボタン: クリックで `wfm-data-export.json` をダウンロード
|
||||
- インポートボタン: `<label>` でファイル選択ダイアログを開く（`.json` 限定）
|
||||
- ステータス表示: 成功・失敗をインラインで表示（成功: green / 失敗: red）
|
||||
- 同一ファイルの再インポートができるよう、インポート後にファイル入力をリセット
|
||||
|
||||
#### `static/js/i18n.js` — 新キー追加（3言語）
|
||||
|
||||
**追加キー（英語・日本語・中国語）:**
|
||||
|
||||
- `dataManagement`, `dataManagementHint`, `exportData`, `importData`
|
||||
- `exportSuccess`, `exportError`, `importSuccess`, `importError`
|
||||
|
||||
#### `templates/index.html` / `static/js/app.js` / `static/js/i18n.js` — ヘルプタブ更新
|
||||
|
||||
- `wfm-help-settings-8` をデータ管理の説明に変更
|
||||
- `wfm-help-settings-9`（アコーディオン説明）を追加（HTML・app.jsマッピング・i18n 3言語）
|
||||
|
||||
### 移行手順（既存ユーザー向け）
|
||||
|
||||
1. 設定タブ →「データ管理」→「エクスポート」で `wfm-data-export.json` を保存
|
||||
2. ComfyUIを再起動（新パスで空の状態で起動）
|
||||
3. 設定タブ →「データ管理」→「インポート」でエクスポートしたファイルを選択
|
||||
4. ComfyUIを再起動して反映
|
||||
|
||||
または手動で `custom_nodes/ComfyUI-Workflow-Studio/data/` の内容を `ComfyUI/user/default/Workflow-Studio/` にコピーしてから再起動。
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-06: v0.2.6 UI改善・バッジ保存修正・フォルダフィルター追加
|
||||
|
||||
### 概要
|
||||
- ワークフロー/モデル/ノードタブのサイドパネルを常時表示固定に変更
|
||||
- グリッドをページネーションからスクロール全件表示に変更
|
||||
- ワークフロータブのバッジが再起動後に消える問題を修正
|
||||
- バッジフィルターボタンをパレット定義バッジで統一（ワークフロータブ）
|
||||
- モデルタブにフォルダ（サブディレクトリ）フィルターを追加
|
||||
- モデルカードビューから拡張子・フォルダバッジを削除（詳細パネルで確認可能）
|
||||
- サムネイルカードサイズを 178×200px に調整、グリッドレイアウトを修正
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `py/services/workflow_service.py` — バッジ保存修正
|
||||
|
||||
**`save_metadata` のキーリストに `badges` を追加:**
|
||||
- 変更前: `("tags", "memo", "summary", "modelTypesOverride", "favorite")`
|
||||
- 変更後: `("tags", "memo", "summary", "modelTypesOverride", "favorite", "badges")`
|
||||
|
||||
**`list_workflows` のレスポンスに `badges` フィールドを追加:**
|
||||
- `metadata` dict に `"badges": meta.get("badges", [])` を追加
|
||||
- これにより再起動後もバッジが保持される
|
||||
|
||||
#### `static/js/workflow-tab.js` — バッジフィルター・サイドパネル・スクロール
|
||||
|
||||
**バッジフィルターをパレット定義バッジで表示:**
|
||||
- `renderModelFilters()`: `getAllBadges()`（ワークフローに付いているバッジのみ）→ `getBadgePalette()`（パレット全バッジ）に変更
|
||||
- フィルターボタンにバッジカラーを適用
|
||||
|
||||
**サイドパネル常時表示化:**
|
||||
- `showSidePanel()`: `panel.style.display = "flex"` を削除
|
||||
- `closeSidePanel()`: `panel.style.display = "none"` を削除、タイトルをクリアするのみ
|
||||
- ×ボタンのイベントリスナー削除
|
||||
|
||||
**ページネーション廃止・スクロール全件表示:**
|
||||
- `WF_PER_PAGE` 定数削除
|
||||
- `updateWfPagination()` 関数削除
|
||||
- `renderGrid()`: ページスライス処理を削除、全件描画に変更
|
||||
|
||||
#### `static/js/models-tab.js` — サイドパネル・スクロール・フォルダフィルター・カードビュー
|
||||
|
||||
**サイドパネル常時表示化:**
|
||||
- `showSidePanel()`: `panel.style.display = "flex"` を削除
|
||||
- `closeSidePanel()`: `panel.style.display = "none"` を削除
|
||||
|
||||
**ページネーション廃止・スクロール全件表示:**
|
||||
- `MODELS_PER_PAGE` 定数削除、`updatePagination()` 関数削除
|
||||
- `renderThumbView()` / `renderCardView()` / `renderTableView()`: `totalPages` 引数削除、全件描画に変更
|
||||
|
||||
**フォルダフィルター追加:**
|
||||
- `state.dirFilter: ""` 追加
|
||||
- `filterModels()` に `dirFilter` による絞り込みを追加
|
||||
- `renderDirFilter()` 関数追加（現在のモデルタイプのサブディレクトリ一覧を `<select>` に反映）
|
||||
- モデルロード時・モデルタイプ切替時に呼び出し
|
||||
- `wfm-models-dir-filter` change イベントリスナー追加
|
||||
|
||||
**モデルカードビューからバッジ削除:**
|
||||
- `renderCardView()`: `dir` バッジ・`ext` バッジを削除。ユーザーバッジ・タグのみ表示
|
||||
|
||||
#### `static/js/nodes-tab.js` — サイドパネル・スクロール
|
||||
|
||||
**サイドパネル常時表示化:**
|
||||
- `showNodeSidePanel()`: `panel.style.display = "flex"` を削除
|
||||
- `closeNodeSidePanel()`: `panel.style.display = "none"` を削除
|
||||
|
||||
**ページネーション廃止・スクロール全件表示:**
|
||||
- `NODES_PER_PAGE` / `renderPagination()` / `clearPagination()` / `scrollGridToTop()` 削除
|
||||
- `renderNodeGrid()`: 全件描画に変更
|
||||
|
||||
#### `templates/index.html` — サイドパネル・ページネーション・フォルダフィルター
|
||||
|
||||
- 3タブ（ワークフロー/ノード/モデル）のサイドパネルから `style="display:none"` と×ボタンを削除
|
||||
- ページネーション用 `<div>` を3箇所から削除
|
||||
- モデルタブのツールバーに `<select id="wfm-models-dir-filter">` を追加（TagとGroupの間）
|
||||
|
||||
#### `static/css/main.css` — グリッド・カードサイズ・サイドパネル
|
||||
|
||||
**グリッド・カードサイズ変更:**
|
||||
- グリッド列幅: `161px` → `178px`
|
||||
- カード幅: `161px` → `178px`
|
||||
- サムネイル: `161×162px` → `178×200px`
|
||||
- `grid-auto-rows: max-content` / `align-items: start` / `justify-items: start` 追加（行高さ圧縮防止）
|
||||
|
||||
**カードビュー:**
|
||||
- グリッド列幅: `minmax(180px, 1fr)` → `repeat(auto-fill, 220px)` 固定幅に変更（横伸び防止）
|
||||
- カード: `flex-direction: row` / `min-height: 56px` / `width: 220px` 固定
|
||||
|
||||
**サイドパネル:**
|
||||
- `.wfm-side-panel-close` スタイル削除
|
||||
- `.wfm-side-panel-empty` クラス追加（選択前の空状態表示用）
|
||||
|
||||
#### `static/js/i18n.js` — フォルダフィルター翻訳追加
|
||||
|
||||
- `modelsAllDirs`: 英語 `"All Folders"` / 日本語 `"すべてのフォルダ"` / 中国語 `"所有文件夹"` を追加
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-04: v0.2.5 追加修正
|
||||
|
||||
### 概要
|
||||
- サイドパネルModels→By TypeでTextEncoderが表示されない問題を修正
|
||||
- サイドパネルのWorkflowsタブでも `.index.json` を非表示に
|
||||
- 未使用の `buildDropdown` 関数を削除
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `web/comfyui/node_sets_menu.js`
|
||||
|
||||
**TextEncoder取得ロジック修正:**
|
||||
- 変更前: `/api/wfm/models?type=textencoder`（存在しないエンドポイント）
|
||||
- 変更後: `DualCLIPLoader` → `CLIPLoader` の順に `/object_info/{cls}` を試して `clip_name1` を取得（`comfyui-client.js` の `fetchTextEncoders()` と同じロジック）
|
||||
|
||||
**`.index.json` 非表示:**
|
||||
- `loadWfData()`: `state.wfList = workflows.filter(w => w.filename !== ".index.json")` でサイドパネルのWorkflowsタブからも除外
|
||||
|
||||
**未使用関数削除:**
|
||||
- `buildDropdown()` 関数を削除（Category/Packageドロップダウンは個別実装に置き換え済みだったため不要）
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-03: v0.2.5 サイドパネル Category/Package サブタブ・テーマ設定・Workflow修正
|
||||
|
||||
### 概要
|
||||
- サイドパネル（Workflow Studio Library）のNodesタブに📂 Category / 🧩 Packageサブタブを追加
|
||||
- サイドパネルのヘッダーに⚙テーマ設定ボタンを追加（背景・文字・ボーダー色カスタマイズ）
|
||||
- ワークフロータブで `.index.json` を非表示に
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `web/comfyui/node_sets_menu.js` — Nodesサブタブ追加・テーマ設定
|
||||
|
||||
**Nodesタブのrow2サブタブ構成変更:**
|
||||
- 変更前: row2 = `☰ Sets`
|
||||
- 変更後: row2 = `☰ Sets` / `📂 Category` / `🧩 Package`
|
||||
|
||||
**state追加:**
|
||||
- `activeNodeCategory: ""` — Categoryサブタブで選択中のカテゴリ値
|
||||
- `activeNodePackage: ""` — Packageサブタブで選択中のパッケージ値
|
||||
- `objectInfo: {}` — `/object_info` APIから取得した全ノード情報（パッケージ判定に使用）
|
||||
|
||||
**`loadData()` 変更:**
|
||||
- `fetchObjectInfo()` を追加して `/object_info` を並行取得
|
||||
- `state.objectInfo` に保存
|
||||
|
||||
**新規関数:**
|
||||
- `fetchObjectInfo()` — `GET /object_info` で全ノード情報を取得
|
||||
- `extractPackageName(pythonModule)` — `python_module` からパッケージ名を抽出
|
||||
- `getNodeCategory(nodeType)` — `state.objectInfo` 優先でカテゴリを取得（LiteGraphフォールバック）
|
||||
- `getNodePackage(nodeType)` — `state.objectInfo[nodeType].python_module` からパッケージ名を取得
|
||||
- `renderNodesByCategory(container)` — カテゴリドロップダウンをcontent上部に挿入してリスト表示
|
||||
- `renderNodesByCategoryList(container)` — 選択カテゴリ＋検索テキストでフィルタしてカード表示
|
||||
- `renderNodesByPackage(container)` — パッケージドロップダウンをcontent上部に挿入してリスト表示
|
||||
- `renderNodesByPackageList(container)` — 選択パッケージ＋検索テキストでフィルタしてカード表示
|
||||
|
||||
**ドロップダウンのDOM挿入方式:**
|
||||
- `.wfm-nlp-filter-row` クラスのdivを `.wfm-nlp-content` の直前に `insertBefore` で挿入
|
||||
- `renderContent()` 冒頭で `panelEl.querySelectorAll(".wfm-nlp-filter-row").forEach(e => e.remove())` により他タブ移動時に削除
|
||||
|
||||
**テーマ設定:**
|
||||
- `THEME_KEY = "wfm_nlp_theme"` — localStorage保存キー
|
||||
- `THEME_VARS` — 設定可能な5変数: `--comfy-menu-bg`（背景）、`--comfy-input-bg`（サブヘッダーBG）、`--input-text`（文字色）、`--border-color`（ボーダー）、`--descrip-text`（補助テキスト色）
|
||||
- `loadTheme()` — localStorageから読み込み
|
||||
- `applyTheme(panel, theme)` — パネル要素にCSS変数をインラインsetPropertyで上書き
|
||||
- `buildThemePanel(panel)` — カラーピッカーUIを動的生成（ライブプレビュー・Save・Resetボタン付き）
|
||||
- パネルのHTMLに `.wfm-nlp-theme-btn`（⚙）と `.wfm-nlp-theme-panel` を追加
|
||||
- `createPanel()` 内でテーマボタンのイベントリスナーを登録、`applyTheme(panel, loadTheme())` で起動時に保存済みテーマを適用
|
||||
|
||||
#### `static/js/workflow-tab.js` — `.index.json` 非表示
|
||||
|
||||
- `filterWorkflows()` の先頭に `if (wf.filename === ".index.json") return false;` を追加
|
||||
|
||||
### 技術的な判断
|
||||
|
||||
- **`python_module` の取得元をAPIに変更:** `LiteGraph.registered_node_types` にはバックエンド由来の `python_module` が存在しないため、全ノードが `ComfyUI (Built-in)` 判定になる問題があった。`/object_info` APIを `loadData()` 時に並行取得することで正確なパッケージ判定を実現
|
||||
- **CSS変数のインライン上書き:** テーマ色はパネル要素自体に `style.setProperty` で適用。ComfyUI本体の `:root` 変数を書き換えず、パネルスコープ内のみに影響させる設計
|
||||
- **ドロップダウンのDOMインジェクション:** Category/Packageビューのドロップダウンは `renderContent` の都度生成・削除する方式を採用。タブ切替時のクリーンアップを `renderContent` 冒頭の `.wfm-nlp-filter-row` 削除処理で一元管理
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-29: v0.2.4 GenerateUIタブ レイアウト再設計
|
||||
|
||||
### 概要
|
||||
- GenerateUIのサブタブを5タブ（Prompt/Image/Model/Settings/RawJSON）→ 3タブ（Input/Model/Settings）に整理
|
||||
- 各タブ内にRaw JSONエディタを右列として常時表示。どのタブでもJSON変更をリアルタイム確認・直接編集・Apply可能
|
||||
- Raw JSONタブを廃止（独立タブとしての Raw JSON は不要）
|
||||
- 右列（生成コントロール）はGenerate/Seed/結果画像のみにスリム化
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `templates/index.html` — タブ構成刷新
|
||||
|
||||
- **Inputタブ**: 左列＝Prompt（上段）+ Image（下段）の縦2段、右列＝Raw JSON（540px）
|
||||
- **Modelタブ**: 左列＝モデル選択フォーム（スクロール）、右列＝Raw JSON（540px）
|
||||
- **Settingsタブ**: 左列＝KSampler（上段）+ LatentImage（下段）の縦2段、右列＝Raw JSON（540px）
|
||||
- Raw JSONのDOMノード（`wfm-gen-rawjson-widget`）はページ内に1つ定義し、タブ切替時にJSで対応する列へ移動
|
||||
- 右列（`.wfm-gen-right`）: 280px幅、Generate/Stop/Progress/Seed＋結果画像のみ
|
||||
|
||||
#### `static/js/generate-tab.js` — タブ切替時にRaw JSONを移動
|
||||
|
||||
- `moveRawJsonToTab(tabKey)` 追加: `wfm-gen-rawjson-widget` を `wfm-gen-rawjson-col-{tabKey}` へ `appendChild`
|
||||
- 初期表示（Input）とタブクリック時に自動移動
|
||||
|
||||
#### `static/js/comfyui-editor.js` — Settings縦2段化
|
||||
|
||||
- `renderSettingsTab`: KSampler / LatentImageを横2列グリッド → 縦2段（`flex-direction:column`）に変更
|
||||
- `renderAll` の末尾に `_syncRawJson()` 追加（ワークフロー読込直後にRaw JSONが即時反映）
|
||||
|
||||
#### `static/css/main.css` — 新レイアウト用スタイル
|
||||
|
||||
- `.wfm-gen-tab-cols`: タブ内2列レイアウト（flex行）
|
||||
- `.wfm-gen-params-col`: 左サブ列（flex:1、縦積み）
|
||||
- `.wfm-gen-params-col--scroll`: Model/Settings用スクロール変種
|
||||
- `.wfm-gen-params-section`: Input用上下2段の各セクション（flex:1、overflow-y:auto）
|
||||
- `.wfm-gen-rawjson-col`: Raw JSON列（540px固定幅）
|
||||
- `#wfm-gen-rawjson-widget` / `.wfm-gen-rawjson-header` / `.wfm-gen-rawjson-editor`: Raw JSONウィジェットスタイル
|
||||
|
||||
### 技術的な判断
|
||||
- **Raw JSONをDOMで移動**: タブごとにtextareaのIDは1つである必要があるため、DOMノードをappendChildで移動する方式を採用。イベントリスナーはノードに付いたまま引き継がれる
|
||||
- **Raw JSON列幅540px**: テキストエディタとして十分な視認性を確保しつつ、パラメータ列にも十分な幅を残す設定
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-29: v0.2.3 バッジ統一・GenUI Model・サイドパネルModels拡充
|
||||
|
||||
### 概要
|
||||
- ワークフローとモデルのバッジ体系を統一（共有パレット `wfm_models_badge_palette`、自動解析廃止）
|
||||
- ModelsタブにGenUI Modelボタン追加（詳細モーダル・サイドパネル両対応）
|
||||
- ComfyUIサイドパネルのModelsタブにFavorites/Groups/By Typeサブタブを追加
|
||||
- サイドパネルのWorkflows・Nodesサブタブ名を「All」に統一、お気に入りに★表示
|
||||
- サイドパネル幅を280px→310pxに拡張
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `web/comfyui/node_sets_menu.js` — サイドパネルModels拡充
|
||||
|
||||
- **Modelsタブのサブタブ構成を2段に変更:**
|
||||
- row1: All / ★ Favorites / 📁 Groups
|
||||
- row2: ◦ By Type
|
||||
- `state.modelSubTab2` で行2の選択を管理
|
||||
- **`renderModelFavorites(container)`** — 全モデルを取得し `state.modelMetadata[name]?.favorite === true` のものを表示
|
||||
- **`renderModelGroups(container)`** — `state.modelGroups` からコラプス式セクションを生成
|
||||
- **Workflowsサブタブ名:** `"Workflows"` → `"All"`
|
||||
- **Nodesサブタブ名:** `"Nodes"` → `"All"`
|
||||
- **Allビューでお気に入りに★表示:**
|
||||
- `createDraggableWfItem`: `wf.metadata?.favorite` に応じて `<span class="wfm-nlp-fav-star">★</span>` を追加
|
||||
- `renderAllNodes`: `state.metadata[name]?.favorite` に応じて★を表示
|
||||
- **`.wfm-nlp-fav-star`** スタイル追加（`color: #f5c518; font-size: 11px; margin-right: 3px`）
|
||||
- **サイドパネル幅:** `width: 280px` → `width: 310px`
|
||||
- **`getWfModelTypes` → `getWfBadges`** にリネーム（`wf.metadata?.badges` ベースに変更）
|
||||
- **`wfModelTypes` state → `wfBadgeTypes`** にリネーム
|
||||
- `renderWfModelType` がバッジ表示に `state.wfBadgeTypes` を使用
|
||||
|
||||
#### `static/js/models-tab.js` — GenUI Modelボタン・バッジ表示改善
|
||||
|
||||
- **型バッジの削除:** ThumbView・CardView・SidePanelの `renderSideInfo` から `typeBadge = badgeHtml(typeLabel)` を削除。ユーザー定義バッジのみ表示
|
||||
- **`GENUI_TYPE_MAP` 追加:**
|
||||
```javascript
|
||||
const GENUI_TYPE_MAP = {
|
||||
checkpoint: { key: "checkpoints", inputKey: "ckpt_name" },
|
||||
lora: { key: "loras", inputKey: "lora_name" },
|
||||
vae: { key: "vaes", inputKey: "vae_name" },
|
||||
controlnet: { key: "controlNets", inputKey: "control_net_name" },
|
||||
unet: { key: "diffusionModels", inputKey: "unet_name" },
|
||||
textencoder: { key: "textEncoders", inputKey: "clip_name1" },
|
||||
};
|
||||
```
|
||||
hypernetwork / embedding は対象外
|
||||
- **`applyToGenUI(modelName, modelType)`** 追加:
|
||||
- `comfyUI.currentWorkflow` からターゲット `inputKey` を持つノードを検索
|
||||
- `node.inputs[inputKey] = modelName` で直接セット
|
||||
- `<select id="wfm-model-${key}">` の表示値も同期
|
||||
- `<textarea id="wfm-gen-raw-json">` も同期
|
||||
- 成功トースト表示
|
||||
- **詳細モーダルの actions に「GenUI Model」ボタン追加**（`GENUI_TYPE_MAP` に対応するタイプのみ表示）
|
||||
- **サイドパネルの Save ボタン右隣に「GenUI Model」ボタン追加**（同上）
|
||||
- **`export function openBadgeEditModal(onPaletteChange = null)`** — workflow-tab.js から呼び出せるよう export 化
|
||||
- **`bindBadgeModalEvents(onPaletteChange)`** — パレット変更後に `renderBadgeFilter()`, `renderModelGrid()`, `onPaletteChange()` を実行
|
||||
|
||||
#### `static/js/workflow-tab.js` — バッジ体系をモデルタブと統一
|
||||
|
||||
- **`import { openBadgeEditModal } from "./models-tab.js"`** 追加
|
||||
- **自動解析によるバッジ体系を廃止:**
|
||||
- `state.badgeColors`, `BADGE_DEFAULT_COLORS` 削除
|
||||
- 「Analysis」「Override」セクションを詳細モーダルから完全削除
|
||||
- `getAllModelTypes()` → `getAllBadges()` （`wf.metadata?.badges` ベース）
|
||||
- `state.activeModel` → `state.activeBadge`
|
||||
- **共有パレット関数を追加:** `getBadgePalette()`, `saveBadgePalette()` （`wfm_models_badge_palette` localStorage キー共有）
|
||||
- **`badgeHtml(label)`** が共有パレットを参照するように変更
|
||||
- **`wfBadgesHtml(wf)`** ヘルパー追加（`wf.metadata?.badges` から表示用バッジHTML生成）
|
||||
- **`filterWorkflows()`** が `wf.metadata?.badges` でフィルタリング
|
||||
- **詳細モーダルにバッジチェックボックスUI追加**（Modelsタブと同じ管理UI）
|
||||
- **⚙ボタン** → `renderViewSettings()`（ビュー設定のみ）
|
||||
- **「⚙ Badge」ボタン追加** → `openBadgeEditModal(() => renderGrid())`
|
||||
|
||||
#### `templates/index.html` — Workflowツールバー更新
|
||||
|
||||
- `<button id="wfm-reanalyze-btn">Reanalyze All</button>` 削除
|
||||
- `<button id="wfm-badge-btn">⚙ Badge</button>` 追加
|
||||
- ⚙設定ボタンの title を "View settings" に変更
|
||||
|
||||
#### `static/js/i18n.js` — 翻訳追加（EN/JA/ZH）
|
||||
|
||||
- **GenUI Model関連（3言語）:**
|
||||
- `modelsGenUIBtn`: "GenUI Model"
|
||||
- `modelsGenUITitle`: ボタンのツールチップ
|
||||
- `modelsGenUIUnsupported`: 非対応タイプへの警告
|
||||
- `modelsGenUINoWorkflow`: GenUIにワークフローが未読み込みの警告
|
||||
- `modelsGenUINoNode(type)`: 対応ノードが見つからない場合の警告（アロー関数）
|
||||
|
||||
### 技術的な判断
|
||||
|
||||
- **バッジ統一の方針:** 自動解析モデルタイプはユーザー操作が必要なオーバーライドが多く UX が複雑だったため廃止。完全にユーザー定義バッジへ移行し、ワークフロー/モデル間で同じパレットを共有する設計に統一
|
||||
- **GenUI連携方式:** `comfyUI.currentWorkflow` を直接ミューテーション。`<select>` 要素の DOM 同期も行うことで視覚的なフィードバックを確保
|
||||
- **`openBadgeEditModal` のexport:** モデルタブとワークフロータブが同じパレット管理 UI を共有するため、`export function` に変更。`onPaletteChange` コールバックで各タブが独立してグリッドを再描画
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-28: v0.2.2 Modelsタブ・CivitAI連携
|
||||
|
||||
### 概要
|
||||
- ComfyUIにインストールされたモデル（Checkpoint、LoRA、VAE、ControlNet、UNET、TextEncoder）を一覧・管理する「Models」タブを新規追加
|
||||
- CivitAI API連携（SHA256ハッシュによるモデル情報取得、一括取得）
|
||||
- モデルグループ管理、プレビュー画像表示・変更、メタデータ永続化
|
||||
- ノードカードビュー改善、全タブのページネーションをツールバーに移動
|
||||
|
||||
### 新規ファイル
|
||||
|
||||
#### `py/services/models_service.py` — モデルメタデータサービス
|
||||
- `_get_model_dirs()`: ComfyUIの`folder_paths.get_folder_paths()`でモデルディレクトリを解決
|
||||
- `ModelsService`: メタデータのCRUD（お気に入り、タグ、メモ、SHA256）
|
||||
- `find_preview_image()`: `{stem}.preview.png`等のプレビュー画像を自動検出
|
||||
- `get_model_groups()` / `save_model_groups()`: グループの永続化（`model_metadata.json`の`_groups`キー）
|
||||
|
||||
#### `py/services/civitai_service.py` — CivitAI API連携
|
||||
- `calculate_sha256()`: モデルファイルのSHA256ハッシュ計算
|
||||
- `fetch_by_hash()`: CivitAI APIからモデル情報取得（キャッシュ付き）
|
||||
- `batch_fetch()`: 複数モデルの一括取得（プログレスコールバック対応）
|
||||
- `_extract_info()`: APIレスポンスから必要フィールドを抽出（modelName, baseModel, trainedWords, images等）
|
||||
- キャッシュ: `civitai_cache.json`に保存
|
||||
|
||||
#### `py/routes/models_routes.py` — モデル管理APIルート
|
||||
- `GET/POST /api/wfm/models/metadata` — メタデータCRUD
|
||||
- `GET /api/wfm/models/preview` — プレビュー画像配信
|
||||
- `GET/POST /api/wfm/models/groups` — グループ管理
|
||||
- `POST /api/wfm/models/civitai/fetch` — 個別CivitAI取得
|
||||
- `GET /api/wfm/models/civitai/cache` — CivitAIキャッシュ取得
|
||||
- `POST /api/wfm/models/civitai/batch` — SSEストリーミング一括取得
|
||||
- `POST /api/wfm/models/change-preview` — プレビュー画像アップロード
|
||||
- `GET /api/wfm/models/filepath` — モデルファイルのフルパス取得
|
||||
|
||||
#### `static/js/models-tab.js` — フロントエンドモジュール
|
||||
- state管理: `modelsByType`, `modelMetadata`, `modelGroups`, `civitaiCache`, `activeModelType`
|
||||
- サブタブ切り替え（6タイプ）、サムネイル/カード/テーブル表示
|
||||
- サイドパネル: Info（ファイルパス表示、タグ、メモ）、Group管理、CivitAI情報表示
|
||||
- 詳細モーダル: プレビュー画像、CivitAI情報、サムネイル変更
|
||||
- 一括CivitAI取得ボタン（SSEプログレス付き）
|
||||
- テーブルビューにメモ列表示
|
||||
|
||||
### 変更ファイル
|
||||
|
||||
#### `py/config.py`
|
||||
- `MODEL_METADATA_FILE = DATA_DIR / "model_metadata.json"` 追加
|
||||
|
||||
#### `py/wfm.py`
|
||||
- `models_routes`のインポートとルート登録追加
|
||||
|
||||
#### `templates/index.html`
|
||||
- Modelsタブボタン・セクション追加（サブタブナビ、ツールバー、グリッド、サイドパネル）
|
||||
- ヘルプタブにModels Tabセクション追加
|
||||
|
||||
#### `static/js/app.js`
|
||||
- `models-tab.js`のimportと`initModelsTab()`呼び出し追加
|
||||
- i18nマッピングにModelsタブ・ヘルプ用キー追加
|
||||
|
||||
#### `static/js/nodes-tab.js`
|
||||
- カードビュー: パッケージバッジ削除、カード左端にパッケージ色のボーダー追加
|
||||
- カードビュー: 入出力カウント表示を削除
|
||||
- ページネーションをツールバーに移動
|
||||
|
||||
#### `static/js/workflow-tab.js`
|
||||
- ページネーションをツールバーに移動
|
||||
- 1ページ24件表示
|
||||
|
||||
#### `static/css/main.css`
|
||||
- `.wfm-grid`: `grid-template-columns: repeat(auto-fill, 161px)`、カード161×162px固定
|
||||
- `.wfm-node-card`: 左ボーダー3pxスタイル追加
|
||||
- `.wfm-pagination-inline`: ツールバー内ページネーション
|
||||
- サブタブナビ（`.wfm-models-type-nav`）、テーブル列幅調整
|
||||
|
||||
#### `static/js/i18n.js` — 翻訳追加（EN/JA/ZH）
|
||||
- Modelsタブ関連: ~50キー（モデルタイプ、フィルタ、サイドパネル、CivitAI、グループ等）
|
||||
- ヘルプModelsセクション: `helpModels1`〜`helpModels7`
|
||||
- ファイルパス関連: `modelsFilePath`, `modelsCopyPath`, `modelsCopiedPath`
|
||||
|
||||
### 技術的な判断
|
||||
- **プレビュー画像判定**: HEADリクエストではなく`img.onload/onerror`パターンを採用（404コンソールスパム回避）
|
||||
- **CivitAI一括取得**: ブロッキングリクエストではなくSSE（Server-Sent Events）でリアルタイムプログレス表示
|
||||
- **aiohttp HEAD自動登録**: `add_get`が自動でHEADも登録するため、明示的なHEADルート追加は不要（重複RuntimeError回避）
|
||||
- **テーブルビューメモ列**: `max-width: 200px`＋`text-overflow: ellipsis`で長文を省略表示
|
||||
- **ファイルパス表示**: バックエンドAPIでフルパスを解決し、クリックでクリップボードコピー
|
||||
|
||||
## 2026-03-27: テーマカスタマイズ機能・設定タブ改善
|
||||
|
||||
### 概要
|
||||
- テーマのカラーカスタマイズ、背景パターン、フォント選択機能を追加
|
||||
- 設定タブの各セクションをアコーディオン式折りたたみに変更
|
||||
- ヘルプタブのSettings Tab説明を更新
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `static/js/settings-tab.js` — テーマカスタマイズ機能追加
|
||||
- **カラーオーバーライド:** 6つのCSS変数（背景、サブ背景、サーフェス、テキスト、プライマリ、アクセント）をカラーピッカーでリアルタイム調整、localStorageに保存
|
||||
- **背景パターン:** 7種類（なし、横/縦/斜めストライプ、ポルカドット、チェック、SVGファイル）を選択可能
|
||||
- パターンオプション: 色、不透明度、サイズ、間隔（gap）スライダー
|
||||
- SVGタイリング: FileReader APIでクライアント側読込、色の置換（fill/stroke属性＋`<style>`要素注入）、`::after`疑似要素でopacity制御、gap対応はviewBox拡張ラッパーSVG方式
|
||||
- **フォント選択:** 16種のGoogle Fonts（日本語デザインフォント含む）を動的ロード、クリックで即時プレビュー
|
||||
- ゴシック系: Noto Sans JP, Zen丸ゴシック, M PLUS Rounded, 小杉丸ゴシック, さわらびゴシック, BIZ UDPゴシック
|
||||
- デザイン系: ドットゴシック16, はちまるポップ, デラゴシック, レゲエ One, ロックンロール, ステッキ, トレイン One
|
||||
- 等幅: Space Mono, Fira Code
|
||||
- **保存ロジック修正:** `saveLocalSettings()`のスプレッドマージでは`delete`したキーが消えない問題を修正、リセット時は`localStorage.setItem()`で直接上書き
|
||||
- **SVGリカラー強化:** `<style>`ブロックをSVGに注入し、fill属性がない要素にも色を適用
|
||||
|
||||
#### `static/css/main.css` — UIスタイル追加
|
||||
- **設定アコーディオン:** `<details>`/`<summary>`要素用のスタイル（`.wfm-settings-section`, `.wfm-settings-summary`）— 三角矢印回転アニメーション付き
|
||||
- **テーマカスタマイザー:** カラーピッカーグリッド、パターン選択グリッド（プレビューSVG付き）、パターンオプション行、フォント選択グリッド
|
||||
- **パターンプレビュー改善:** SVGプレビューのコントラストを大幅強化（60x60サイズ、太い線、高opacity、青系前景色）
|
||||
|
||||
#### `static/js/i18n.js` — 翻訳追加（EN/JA/ZH）
|
||||
- テーマカスタマイズ関連: カラー調整、背景パターン、パターンオプション（色、不透明度、サイズ、間隔）、フォント
|
||||
- フォント名: 16種のフォントラベル
|
||||
- ヘルプSettings項目: helpSettings7, helpSettings8追加
|
||||
|
||||
#### `static/js/app.js` — i18nマッピング追加
|
||||
- `helpSettings7`, `helpSettings8` のHTML id→i18nキーマッピングを追加
|
||||
|
||||
#### `templates/index.html` — ヘルプタブ更新
|
||||
- Settings Tabセクション: テーマカスタマイズ機能の説明を追加（項目2）、Eagle連携を項目7に、アコーディオン折りたたみを項目8に追加
|
||||
|
||||
### 技術的な判断
|
||||
- **SVGカラー変更:** 属性置換だけでは不十分なSVG（CSSクラスやデフォルト黒を使用）に対応するため、`<style>`ブロック注入方式を採用
|
||||
- **SVG間隔（gap）:** viewBoxを拡張するラッパーSVGでタイル間に余白を作成
|
||||
- **フォント読込:** Google Fonts CDNから動的にlinkタグを挿入、一度読み込んだフォントはSetで管理し重複読込を防止
|
||||
- **アコーディオン:** `<details>`/`<summary>`ネイティブHTML要素を使用、JSなしで開閉動作
|
||||
|
||||
## 2026-03-26: トップバーボタンアイコン修正・Appモードバッジ調査
|
||||
|
||||
### 概要
|
||||
- トップバーの3つのボタン（Workflow Studio / Snapshot / Library）のアイコンが表示されない問題を修正
|
||||
- ComfyUI Appモード（linearMode）のワークフローJSON構造を調査、バッジ表示対応は保留
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `web/comfyui/top_menu_extension.js` — アイコン置換ロジック修正
|
||||
- **問題:** `setup()` 内の `replaceButtonIcon()` が `requestAnimationFrame` でボタンを見つけてSVGを注入するが、ComfyUIのVueフレームワークが再レンダリングして元の `<i class="icon-[mdi--...]">` に戻してしまう。リトライ条件が `wfmButtons.length === 0`（ボタン未検出時のみ）のため、一度見つかった後は再注入されなかった
|
||||
- **修正:** `MutationObserver` でボタンの親コンテナ（`.actionbar-container`）を監視し、DOMが変更されるたびにSVGアイコンを再注入するように変更
|
||||
- `applyButtonIcon()`: ボタンに既にSVGがあればスキップ（無限ループ防止）、なければSVG注入
|
||||
- `waitAndObserve()`: ボタンがDOMに現れるまで `requestAnimationFrame` で待機し、見つかったらアイコン置換＋`MutationObserver`監視開始
|
||||
|
||||
### Appモードバッジ表示について（保留）
|
||||
- ComfyUI Appモード（BETA機能）のワークフローJSON構造を調査
|
||||
- `extra.linearMode: true` と `extra.linearData` （inputs/outputs配列）でappモード情報が格納される
|
||||
- appモード削除後も `linearData`/`linearMode` キーは残り中身が空配列になるだけ、拡張子 `.app.json` も維持される
|
||||
- **結論:** Appモード自体がBETA機能のため、バッジ表示対応は現状維持とする
|
||||
|
||||
## 2026-03-25: v0.2.0 プロンプトプリセット機能・Workflow Studio Library
|
||||
|
||||
### 概要
|
||||
- プロンプトプリセット機能を追加：サイドパネルからドラッグ＆ドロップでWFS_PromptTextカスタムノードを作成
|
||||
- Workflow Studio SPAのPromptタブを3カラムレイアウトに刷新（AIアシスタント｜プリセット編集｜プリセットマネージャー）
|
||||
- プリセットのバックエンドAPI化（localStorage→サーバーサイド保存）
|
||||
- サイドパネル名を「WF & Node Library」→「Workflow Studio Library」に変更
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `py/nodes/prompt_text.py` — WFS_PromptTextカスタムノード（新規）
|
||||
- **WFS_PromptText**: ポジティブ/ネガティブの2つのSTRING入力とSTRING出力を持つカスタムノード
|
||||
- `INPUT_TYPES`: `positive`（multiline）, `negative`（multiline）
|
||||
- `RETURN_TYPES`: `("STRING", "STRING")`, `RETURN_NAMES`: `("positive", "negative")`
|
||||
- `CATEGORY`: `"Workflow Studio"`
|
||||
|
||||
#### `py/nodes/__init__.py` — パッケージ初期化（新規）
|
||||
- 空ファイル（Pythonパッケージ認識用）
|
||||
|
||||
#### `__init__.py` — カスタムノード登録
|
||||
- `_NODE_MODULES` に `WFS_PromptText` を追加（分離読み込みパターン）
|
||||
- `NODE_DISPLAY_NAME_MAPPINGS` に `"Prompt Text (WFS)"` を追加
|
||||
|
||||
#### `py/services/prompts_service.py` — プリセットCRUDサービス（新規）
|
||||
- `list_prompts()`: 全プリセット一覧取得
|
||||
- `create_prompt(data)`: 新規作成（name, text, negText, category, tags, favorite）
|
||||
- `update_prompt(id, updates)`: 更新（name, text, negText, category, tags, favorite）
|
||||
- `delete_prompt(id)`: 削除
|
||||
- `list_categories()`: カテゴリ一覧取得
|
||||
- データ永続化: `data/prompts.json`
|
||||
|
||||
#### `py/routes/prompts_routes.py` — プリセットAPIエンドポイント（新規）
|
||||
- `GET /api/wfm/prompts` — 一覧取得
|
||||
- `POST /api/wfm/prompts` — 新規作成
|
||||
- `POST /api/wfm/prompts/update` — 更新
|
||||
- `POST /api/wfm/prompts/delete` — 削除
|
||||
|
||||
#### `py/config.py` — 設定追加
|
||||
- `PROMPTS_FILE = DATA_DIR / "prompts.json"` を追加
|
||||
|
||||
#### `py/wfm.py` — ルート登録
|
||||
- `prompts_routes` のインポートと `prompts_routes.setup_routes(app)` を追加
|
||||
|
||||
#### `web/comfyui/node_sets_menu.js` — サイドパネルにPromptsタブ追加
|
||||
- **トップタブ:** Workflows / Nodes / **Prompts** の3タブ構成
|
||||
- **Promptsサブタブ:** All / ★ Favorites / 📁 Categories
|
||||
- **State追加:** `promptSubTab`, `promptList`, `promptFavorites`, `promptCategories`, `promptLoaded`
|
||||
- **API関数:** `fetchPrompts()`, `loadPromptData()`
|
||||
- **レンダリング:** `renderPromptAll()`, `renderPromptFavorites()`, `renderPromptCategories()`
|
||||
- **ドラッグ＆ドロップ:** `application/x-wfm-prompt` MIMEタイプ、`placePromptNode(posText, negText, promptName, pos)` でWFS_PromptTextノード作成
|
||||
- **P/Nコピーボタン:** 各プリセットアイテムにポジティブ(P)・ネガティブ(N)の個別コピーボタン（Nはテキスト空の場合非表示）
|
||||
- **パネル名変更:** ツールチップ・タイトルを「Workflow Studio Library」に更新
|
||||
- **CSS追加:** `.wfm-nlp-copy-btns`, `.wfm-nlp-copy-pos`（緑ホバー）, `.wfm-nlp-copy-neg`（赤ホバー）
|
||||
|
||||
#### `templates/index.html` — Promptタブ3カラムレイアウト
|
||||
- 2カラム（AI Assistant | Presets）→ 3カラム（AI Assistant | Presets | Preset Manager）に変更
|
||||
- **Presetsパネル:** Deleteボタン削除、Apply→「GenUI Set」、Category入力欄追加、下部にグループ管理行（Select group + Add to Group + + Group + Del Group）
|
||||
- **Preset Managerパネル:** All / ★ / Groupsタブ、検索、スクロール可能なリスト
|
||||
- **ヘルプタブ:** helpPrompt5〜7追加、helpSidepanel4・7〜10追加（Promptsタブ・ドラッグ＆ドロップ・P/Nコピー）
|
||||
- サイドパネルタイトルを「Workflow Studio Library」に更新
|
||||
|
||||
#### `static/css/main.css` — スタイル追加（約150行）
|
||||
- `.wfm-prompt-split-3col` — 3カラムFlexboxレイアウト
|
||||
- `.wfm-prompt-split-col` — 各カラムのスタイル
|
||||
- `.wfm-preset-manager` — プリセットマネージャーパネル
|
||||
- `.wfm-pm-tabs`, `.wfm-pm-tab` — マネージャータブ
|
||||
- `.wfm-pm-list`, `.wfm-pm-item` — アイテムリスト
|
||||
- `.wfm-pm-item-actions`, `.wfm-pm-action-btn` — お気に入り(★)・削除(✕)ボタン
|
||||
- `.wfm-pm-group-header` — グループヘッダー
|
||||
|
||||
#### `static/js/prompt-tab.js` — 全面リライト
|
||||
- **API化:** `fetchPresets()`, `apiCreatePreset()`, `apiUpdatePreset()`, `apiDeletePreset()`
|
||||
- **localStorage移行:** `migrateLocalStoragePresets()` — 一回限りの自動移行
|
||||
- **プリセット管理:** `renderPresetSelect()`, `renderGroupSelect()`, `selectPresetInEditor(preset)`
|
||||
- **Preset Manager:** `renderPresetManager()`, `renderPmAll()`, `renderPmFavorites()`, `renderPmGroups()`
|
||||
- **`createPmItem()`:** お気に入りトグル(★)と削除(✕)ボタン（コピーボタンなし — Presetsパネル側にPP/NP Copyあり）
|
||||
- **グループ管理:** Presetsパネル下部のnew-group, add-to-group, del-groupボタン
|
||||
- **Save:** API経由でnegTextフィールドを含むプリセットの作成/更新
|
||||
|
||||
#### `static/js/i18n.js` — 翻訳更新
|
||||
- `applyPreset` → `"GenUI Set"`（英/日/中 全3言語）
|
||||
- `deletePreset` キー削除（全3言語）
|
||||
- ヘルプ: `helpPrompt5`〜`helpPrompt7`, `helpSidepanel8`〜`helpSidepanel10` 追加（全3言語）
|
||||
- サイドパネルタイトル: `helpSidepanelTitle` → `"Workflow Studio Library"` に更新（全3言語）
|
||||
|
||||
#### `static/js/app.js` — i18nマッピング更新
|
||||
- `helpIdMap` に `helpPrompt5`〜`7`, `helpSidepanel8`〜`10` を追加
|
||||
- `deletePreset` 適用コード削除
|
||||
|
||||
#### `README.md` — v0.2.0更新
|
||||
- バージョンバッジ: `0.1.9` → `0.2.0`
|
||||
- Prompt Tab: 3カラムレイアウト、Preset Manager、グループ管理、GenUI Set
|
||||
- Workflow Studio Library: Promptsタブ、ドラッグ＆ドロップ、P/Nコピー
|
||||
- Project Structure: `py/nodes/`, `prompts_routes.py`, `prompts_service.py` 追加
|
||||
- Changelog: v0.2.0エントリ追加
|
||||
- スクリーンショット全8枚差し替え
|
||||
|
||||
## 2026-03-24: v0.1.9 サイドパネルUI改善・保存ダイアログ・バグ修正
|
||||
|
||||
### 概要
|
||||
@@ -498,3 +1386,43 @@ GitHub公開・ComfyUI Manager登録・初回リリース
|
||||
- README.md 作成（スクリーンショット4枚付き）
|
||||
- ComfyUI Manager 登録PR: https://github.com/Comfy-Org/ComfyUI-Manager/pull/2706
|
||||
- GitHub Release v0.1.0: https://github.com/ketle-man/ComfyUI-Workflow-Studio/releases/tag/v0.1.0
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-13: Gallery タブ追加 & 全タブ Group UI 統一
|
||||
|
||||
### 概要
|
||||
- ギャラリータブ（Phase 1）実装：6800枚超の画像ブラウザ
|
||||
- Workflow / Nodes / Gallery の Group UI を Models タブ基準に統一
|
||||
- Settings タブを2カラムレイアウトに変更（テーマを右固定）
|
||||
|
||||
### Gallery タブ機能
|
||||
- **3カラム表示** — サムネイル / テーブル切り替え、Fav列を左端に
|
||||
- **サーバーサイドフィルタ** — グループ・お気に入り・タグによる server-side filtering
|
||||
- **マルチセレクト** — Ctrl+クリックで複数選択、Bulk Bar でまとめて操作
|
||||
- **グループ管理** — 作成・Rename・削除（Models パネルと同一UIパターン）
|
||||
- **os.scandir() + フォルダキャッシュ** — 6800枚環境でのパフォーマンス改善
|
||||
- **出力フォルダ設定** — Settings タブからギャラリー参照フォルダを変更可能
|
||||
|
||||
### Group UI 統一
|
||||
- **Workflow タブ** — `renderSideGroup()` を新設し Models 4 セクションパターンに変更（Current Groups / Add to Group / Create New Group / Manage Groups）。冗長なヘッダーブロック削除
|
||||
- **Nodes タブ** — `renderSideGroups()` を全面書き換え。`×` ボタン・"Add" ボタン・"Rename (✎)" 追加
|
||||
- **Gallery タブ** — `renderDetailGroup()` を新設、同パターン適用
|
||||
|
||||
### Settings 2カラムレイアウト
|
||||
- テーマパネルを右側（`float:right; width:50%`）に固定
|
||||
- 左側に UI言語〜保存ボタンを連続配置（ギャップなし）
|
||||
- `position:sticky; top:0` でテーマパネルをスクロールに追従
|
||||
|
||||
### 変更ファイル
|
||||
- `py/services/gallery_metadata.py` — `rename_group()`, `get_group_member_set()` 追加
|
||||
- `py/services/gallery_service.py` — `_FolderCache`, `_scan_folder()`, `group_filter` 対応
|
||||
- `py/routes/gallery_routes.py` — `PUT /wfm/gallery/groups/{name}` 追加
|
||||
- `static/js/gallery-tab.js` — マルチセレクト・サーバーサイドフィルタ・renderDetailGroup
|
||||
- `static/js/nodes-tab.js` — `renderSideGroups()` 全面書き換え
|
||||
- `static/js/workflow-tab.js` — `renderSideGroup()` 新設、旧ハンドラ削除
|
||||
- `static/js/settings-tab.js` — 2カラムレイアウト HTML 構造変更
|
||||
- `static/css/gallery-tab.css` — multi-selected・bulk-bar・セクションタイトルスタイル
|
||||
- `static/css/main.css` — Settings レイアウト CSS（float:right ベース 50:50）
|
||||
- `templates/index.html` — Gallery "Group"→"Groups"、各タブ static HTML → JS動的生成、Gallery ヘルプカード追加
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -17,9 +17,13 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
| Nodes Tab | Help & Support Tab |
|
||||
| Nodes Tab | Models Tab |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
| Gallery Tab | Help & Support Tab |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
| Workflow Studio Library (ComfyUI) | ComfyUI Integration |
|
||||
|:---:|:---:|
|
||||
@@ -32,10 +36,10 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
|
||||
### Workflow Tab
|
||||
- **Thumbnail / Card / Table views** — switch between view modes to browse your workflow library
|
||||
- **Thumbnail side panel** — preview workflow canvas snapshots in the side panel
|
||||
- **Tag-based filtering** — filter by base model (SD1.5, SDXL, etc.) and custom groups
|
||||
- **Badge filtering** — filter by user-defined badges (free labels you assign to each workflow)
|
||||
- **Search** — full-text search across workflow names and metadata
|
||||
- **Side panel tabs** — Thumbnail preview, JSON viewer with syntax highlighting, and Group management
|
||||
- **Batch analysis** — auto-detect checkpoint, model type, prompt, and I/O node counts
|
||||
- **Badge management** — add, rename, delete badges with custom colors shared with the Models tab (⚙ Badge button)
|
||||
- **AI summary** — generate workflow descriptions using Ollama
|
||||
- **Import / Export** — import workflows from files or clipboard, open in ComfyUI directly
|
||||
- **Default view setting** — persist your preferred view mode (Thumbnail / Card / Table)
|
||||
@@ -46,11 +50,15 @@ 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
|
||||
- **Auto-generated parameter UI** — prompt, model, sampler, image, and other settings extracted from the workflow
|
||||
### 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
|
||||
- **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
|
||||
- **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
|
||||
- **Raw JSON editor** — view and edit the API-format JSON with syntax highlighting
|
||||
- **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
|
||||
- **Eagle integration** — auto-save generated images to [Eagle](https://eagle.cool/) with metadata
|
||||
|
||||
@@ -66,13 +74,33 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
|
||||
- **GenUI Set** — apply preset prompts directly to the GenerateUI interface
|
||||
|
||||
### 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
|
||||
- **Theme selection** — 13 built-in themes with visual swatch preview (Dark, Pop, Minimalist, Cyberpunk, Glassmorphism, Neumorphism, Retro Pixel, Pastel, Brutalism, Earthy, Material, Monotone, Corporate)
|
||||
- **Theme customization** — override colors (background, surface, text, primary, accent), add background patterns (horizontal/vertical/diagonal stripes, polka dot, checkerboard, custom SVG tiling with color/opacity/scale/gap controls), and select from 16 fonts including Japanese display fonts (Google Fonts)
|
||||
- **Workflows directory** — configure which folder to scan for workflows
|
||||
- **Gallery output directory** — configure which output folder the Gallery tab scans for images
|
||||
- **Eagle connection** — set Eagle API endpoint for auto-save
|
||||
- **Ollama connection** — configure Ollama server URL
|
||||
- **Badge display** — toggle metadata badges on workflow cards
|
||||
- **Default workflow** — set a workflow to auto-load on startup
|
||||
- **Data Management** — export all plugin data (settings, metadata, prompts, etc.) to a single JSON file; import to restore data (useful when migrating or reinstalling)
|
||||
- **Language** — English / Japanese / Chinese
|
||||
|
||||
### Gallery Tab (v0.3.1)
|
||||
- **Image browser** — browse ComfyUI output images (Thumbnail / Table views) with server-side scanning optimized for 6,000+ image libraries
|
||||
- **Thumbnail / Table views** — switch view modes; Favorites column shown leftmost in Table view
|
||||
- **Folder management** — create subfolders ("+ New") or delete the selected folder with all contents ("Del") from the folder tree header
|
||||
- **File operations** — move or delete individual images from the detail panel's Info tab; bulk Move To... and Delete from the multi-select bar
|
||||
- **Multi-select** — Ctrl+click to select multiple images; Bulk Bar appears for batch operations (group, favorite, move, delete)
|
||||
- **Server-side filtering** — filter by group, favorites, or tags with fast server-side set lookup (no full rescan)
|
||||
- **Group management** — create, rename, delete groups and assign/remove images using the same 4-section panel as Models tab
|
||||
- **Favorites** — star images inline without reopening the detail panel
|
||||
- **Detail panel** — view filename, path, tags, groups, and metadata in a slide-out panel
|
||||
- **Workflow viewer** — Metadata tab displays workflow JSON from PNG embedded data (`prompt` / `workflow` keys) or from workflow saved by the Generate UI tab
|
||||
- **Workflow auto-save** — images generated from the Generate UI tab have their workflow automatically saved to gallery metadata
|
||||
- **Output folder configurable** — set the scanned output folder from Settings tab
|
||||
- **Performance** — folder-level mtime cache (30s TTL) for fast incremental refresh; tree expansion state preserved across folder operations
|
||||
|
||||
### Nodes Tab (v0.1.7)
|
||||
- **Node Browser** — browse all installed ComfyUI nodes from `/object_info` API with Card/Table views
|
||||
- **Search & Filter** — full-text search, filter by category, package, tags, groups, and favorites
|
||||
@@ -81,9 +109,28 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
|
||||
- **Node Sets** — save multiple nodes + connections as reusable sets from the ComfyUI canvas
|
||||
- **Right-click context menu** — "Save as Node Set" option on any node in ComfyUI
|
||||
|
||||
### Workflow Studio Library (ComfyUI Side Panel) (v0.1.8)
|
||||
- **Workflows tab** — browse favorite workflows, filter by model type, filter by group
|
||||
- **Nodes tab** — browse favorite nodes, node sets, and node groups
|
||||
### Models Tab (v0.2.3)
|
||||
- **Model Browser** — browse all installed ComfyUI models (Checkpoint, LoRA, VAE, ControlNet, UNET, TextEncoder, Hypernetwork, Embedding) with sub-tab switching
|
||||
- **Thumbnail / Card / Table views** — switch between view modes with pagination (24 items per page)
|
||||
- **Search & Filter** — full-text search, filter by tags, groups, and favorites
|
||||
- **User-defined badges** — assign free-label badges to models; badge colors shared with the Workflow tab palette
|
||||
- **Side panel tabs** — Info (file path display with click-to-copy, tags, memo), Groups management, CivitAI integration
|
||||
- **CivitAI integration** — fetch model metadata by SHA256 hash, view base model, trained words, tags, and model page link
|
||||
- **Batch CivitAI fetch** — one-click batch fetch for all models of a type with SSE progress streaming
|
||||
- **Detail modal** — preview image, CivitAI info, thumbnail change via file upload
|
||||
- **GenUI Model button** — apply the selected model directly to the corresponding node in GenerateUI's current workflow (Checkpoint, LoRA, VAE, ControlNet, UNET, TextEncoder)
|
||||
- **Group management** — create, rename, delete groups and assign/remove models; groups are scoped per model type (checkpoint groups only appear in the Checkpoint tab)
|
||||
- **Table view memo** — memo column displayed in table view for quick reference
|
||||
- **Preview images** — auto-detect `{model_stem}.preview.png` next to model files
|
||||
- **Enable / Disable models** — hide models from ComfyUI by renaming the file extension (`.disabled` suffix); toggle per card (⏸ button), per group (Enable All / Disable All), or filter by status (All / Enabled / Disabled)
|
||||
- **Multi-select & bulk operations** — enter selection mode to check multiple models; bulk action bar supports add/remove from groups and permanent file deletion (model file + preview images + sidecar files such as `.json` / `.info`)
|
||||
|
||||
### Workflow Studio Library (ComfyUI Side Panel) (v0.2.5)
|
||||
- **Workflows tab** — browse favorite workflows (All / ★ Favorites / Groups / By Badge sub-tabs), ★ star shown for favorites in All view
|
||||
- **Nodes tab** — browse favorite nodes (All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Package sub-tabs), ★ star shown for favorites in All view
|
||||
- **Category sub-tab** — dropdown to filter nodes by top-level category
|
||||
- **Package sub-tab** — dropdown to filter nodes by custom node package name
|
||||
- **Models tab** — browse installed models (All / ★ Favorites / Groups / By Type sub-tabs)
|
||||
- **Prompts tab** — browse prompt presets with All / Favorites / Categories sub-tabs
|
||||
- **Drag & drop workflows** — drag a workflow onto the canvas to load it
|
||||
- **Drag & drop nodes** — drag nodes/node sets onto the canvas to place them
|
||||
@@ -91,6 +138,7 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
|
||||
- **Copy prompts** — copy individual positive (P) or negative (N) prompts from sidebar items
|
||||
- **Double-click** — load workflows or place nodes without dragging
|
||||
- **Search** — search within each sub-tab to quickly find items
|
||||
- **⚙ Theme settings** — customize panel background, sub-header background, text, border, and secondary text colors; saved to localStorage and applied on every open
|
||||
|
||||
### Help & Support Tab (v0.1.3)
|
||||
- **Feature list** — overview of all features organized by tab
|
||||
@@ -167,6 +215,72 @@ Click the **camera icon** (next to the W button) in ComfyUI's top bar to capture
|
||||
|
||||
## Changelog
|
||||
|
||||
### v0.3.2
|
||||
- **Checkpoint Batch** — new panel in the GenerateUI right column (below Seed, above results); enable via checkbox to auto-generate once per checkpoint model; filter included/excluded subfolders by comma-separated names (empty = all checkpoints); real-time preview of matched model count; amber progress bar shows current model name and index; Stop button aborts the loop after the current generation completes; failed models are counted and reported in the summary toast
|
||||
- **Seed layout fix** — seed value input and mode selector (Random / Fixed / Increment / Decrement) now stacked vertically so neither is clipped in narrow panels
|
||||
|
||||
### v0.3.1
|
||||
- **Folder operations** — create subfolders and delete folders (with all contents) directly from the folder tree header buttons
|
||||
- **File operations** — move or delete individual images from the detail panel; bulk move and bulk delete from the multi-select bar
|
||||
- **Tree state preserved** — folder expansion state is maintained after create/delete/move/refresh operations
|
||||
- **Workflow viewer improved** — Metadata tab now reads both `prompt` (API format, the default for most ComfyUI-generated images) and `workflow` (UI format) keys from PNG metadata, covering virtually all ComfyUI output
|
||||
- **Workflow auto-save** — after each generation in the Generate UI tab, the current workflow is automatically saved to gallery metadata for the generated images; shown in the Metadata tab even if PNG embedding is absent
|
||||
|
||||
### v0.3.0
|
||||
- **Cross-type group filter** — the group filter dropdown in the Models tab now shows groups from all model types simultaneously, each prefixed with a type label (`[Checkpoint]`, `[LoRA]`, etc.); selecting a group automatically switches to the corresponding model type
|
||||
- **Sidebar group display fixed** — the ComfyUI sidebar "Model Groups" view now correctly renders per-type groups (introduced in v0.2.9) with a type label on each group header; fixes a crash where `.filter is not a function` was thrown on the new nested group structure
|
||||
|
||||
### v0.2.9
|
||||
- **Model Enable/Disable** — hide models from ComfyUI by renaming the file extension to `.disabled`; toggle per model (⏸ button on each card/row), per group (Enable All / Disable All buttons in the Group panel), or filter the grid by status (All / Enabled only / Disabled only). Changes take effect after ComfyUI refresh.
|
||||
- **Per-type model groups** — groups are now scoped to each model type; checkpoint groups only appear in the Checkpoint tab, LoRA groups only in the LoRA tab, etc. Existing flat groups are automatically migrated.
|
||||
- **Multi-select mode** — click the Select button in the toolbar to enter selection mode; check individual models across Thumbnail / Card / Table views
|
||||
- **Bulk group operations** — with models selected, add or remove them from any group in one click, or create a new group and add them simultaneously
|
||||
- **Bulk file delete** — permanently delete selected model files along with all associated preview images and sidecar files (`.json`, `.civitai.info`, `.info`); requires confirmation before deleting
|
||||
- **Bug fix** — models in subdirectories could not be disabled due to a path-doubling error; fixed by computing the rename target from `path.name` instead of `model_name`
|
||||
- **Bug fix** — Hypernetwork tab showed `C`, `O`, `M`, `B` as fake model items; caused by the new ComfyUI API format returning `"COMBO"` as the first element; fixed in `comfyui-client.js`
|
||||
|
||||
### v0.2.8
|
||||
- **Data storage moved** — plugin data (settings, metadata, prompts, etc.) is now stored in `ComfyUI/user/default/Workflow-Studio/` instead of `custom_nodes/ComfyUI-Workflow-Studio/data/`; falls back to the old `data/` directory if `user/default/` does not exist
|
||||
- **Data Management section** — new Settings tab section to export all plugin data to a single JSON file and import it back; useful for migration, backup, and reinstallation
|
||||
|
||||
### v0.2.7
|
||||
- **Gallery tab** — new image browser for ComfyUI output folder; Thumbnail/Table views, multi-select with Bulk Bar, server-side group/tag/favorite filtering, group management (rename support), performance-optimized with + mtime folder cache
|
||||
- **Group UI unified** — Workflow, Nodes, and Gallery group panels rebuilt to match the Models tab 4-section pattern (Current Groups / Add to Group / Create New Group / Manage Groups); Rename support added to Workflow and Nodes tabs
|
||||
- **Settings 2-column layout** — Theme panel fixed on the right (50% width, sticky); all other settings flow continuously on the left with no visual gap
|
||||
- **Gallery output directory setting** — configure the output folder scanned by Gallery tab from Settings
|
||||
- **Help tab** — Gallery tab description card added
|
||||
|
||||
### v0.2.5
|
||||
- **Sidebar Category/Package sub-tabs** — added 📂 Category and 🧩 Package sub-tabs to the Nodes tab in Workflow Studio Library; each shows a dropdown to filter nodes by category or custom node package (reads `/object_info` for accurate package detection)
|
||||
- **Sidebar theme settings** — added ⚙ button in the panel header to customize background, sub-header background, text, border, and secondary text colors with live preview; settings saved to localStorage
|
||||
- **Sidebar TextEncoder (By Type)** — fixed TextEncoder not appearing in Models → By Type; now uses `DualCLIPLoader` → `CLIPLoader` fallback to retrieve `clip_name1` list
|
||||
- **Hide `.index.json`** — excluded `.index.json` from both the Workflow tab and the Workflow Studio Library side panel
|
||||
|
||||
### v0.2.4
|
||||
- **GenerateUI tab redesign** — reorganized from 5 tabs (Prompt/Image/Model/Settings/Raw JSON) to 3 tabs (Input/Model/Settings); each tab shows a Raw JSON column (540px) for instant JSON preview and direct editing from any tab
|
||||
- **Input tab** — Prompt and Image stacked vertically in the left column
|
||||
- **Settings tab** — KSampler and LatentImage stacked vertically in the left column
|
||||
- **Raw JSON tab removed** — Raw JSON is now always visible as a right-column panel within each tab
|
||||
|
||||
### v0.2.3
|
||||
- **Badge system unified** — Workflow and Models tabs now share a single badge palette (`⚙ Badge` button); workflow auto-analysis model type system removed in favor of user-defined free-label badges
|
||||
- **GenUI Model button** — apply any model from the Models tab directly to the corresponding node in GenerateUI's current workflow (available in detail modal and side panel; Checkpoint / LoRA / VAE / ControlNet / UNET / TextEncoder)
|
||||
- **Sidebar Models tab** — added All / ★ Favorites / Groups / By Type sub-tabs to the Models section of Workflow Studio Library
|
||||
- **Sidebar All views** — ★ star displayed for favorite items in Workflows and Nodes All sub-tabs
|
||||
- **Sidebar panel width** — widened from 280px to 310px
|
||||
|
||||
### v0.2.2
|
||||
- **Models tab** — browse, search, and manage all installed ComfyUI models (Checkpoint, LoRA, VAE, ControlNet, UNET, TextEncoder) with Thumbnail/Card/Table views
|
||||
- **CivitAI integration** — fetch model metadata by SHA256 hash (individual or batch per model type) with SSE progress streaming
|
||||
- **Model groups** — create, rename, delete groups and assign/remove models for organization
|
||||
- **Model metadata** — persistent favorites, tags, memo, and SHA256 hash per model
|
||||
- **Preview images** — auto-detect and display preview images, change via file upload in detail modal
|
||||
- **Table view memo column** — memo displayed in table view with compact subdir/extension columns
|
||||
- **Side panel file path** — display full file path with click-to-copy in model info panel
|
||||
- **Node card redesign** — removed package badge, added left border color-coding by package
|
||||
- **Toolbar pagination** — pagination controls moved to toolbar for all tabs (Models, Workflows, Nodes)
|
||||
- **Help tab updated** — Models Tab section added to feature list
|
||||
|
||||
### v0.2.0
|
||||
- **Prompt presets in sidebar** — added Prompts tab to Workflow Studio Library (ComfyUI side panel) with All / Favorites / Categories sub-tabs
|
||||
- **WFS_PromptText custom node** — drag prompt presets onto the canvas to create nodes with positive/negative prompt outputs
|
||||
@@ -237,6 +351,7 @@ ComfyUI-Workflow-Studio/
|
||||
│ ├── routes/
|
||||
│ │ ├── workflow_routes.py # Workflow CRUD & analysis API
|
||||
│ │ ├── nodes_routes.py # Nodes metadata & node sets API
|
||||
│ │ ├── models_routes.py # Model metadata, preview, CivitAI API
|
||||
│ │ ├── prompts_routes.py # Prompt presets CRUD API
|
||||
│ │ ├── settings_routes.py # Settings API
|
||||
│ │ ├── ollama_routes.py # Ollama proxy API
|
||||
@@ -244,12 +359,14 @@ ComfyUI-Workflow-Studio/
|
||||
│ └── services/
|
||||
│ ├── workflow_service.py # Workflow file operations
|
||||
│ ├── nodes_service.py # Node metadata & node sets
|
||||
│ ├── models_service.py # Model metadata & preview images
|
||||
│ ├── civitai_service.py # CivitAI API integration & cache
|
||||
│ ├── prompts_service.py # Prompt presets persistence
|
||||
│ ├── workflow_analyzer.py # Model/node detection
|
||||
│ ├── settings_service.py # Settings persistence
|
||||
│ └── png_extractor.py # PNG metadata extraction
|
||||
├── templates/
|
||||
│ └── index.html # SPA template (Workflow/GenerateUI/Prompt/Settings/Help)
|
||||
│ └── index.html # SPA template (Workflow/GenerateUI/Prompt/Settings/Nodes/Models/Help)
|
||||
├── static/
|
||||
│ ├── favicon.svg # Browser tab icon (W+S Wave)
|
||||
│ ├── css/main.css # Styles
|
||||
@@ -261,6 +378,7 @@ ComfyUI-Workflow-Studio/
|
||||
│ ├── settings-tab.js # Settings panel
|
||||
│ ├── comfyui-client.js # ComfyUI WebSocket/API client
|
||||
│ ├── nodes-tab.js # Node browser & node sets
|
||||
│ ├── models-tab.js # Model browser & CivitAI integration
|
||||
│ ├── comfyui-workflow.js # UI-to-API format conversion
|
||||
│ ├── comfyui-editor.js # Dynamic parameter editor
|
||||
│ ├── json-highlight.js # JSON syntax highlighting
|
||||
@@ -268,7 +386,7 @@ ComfyUI-Workflow-Studio/
|
||||
├── web/comfyui/
|
||||
│ ├── top_menu_extension.js # ComfyUI menu bar integration
|
||||
│ └── node_sets_menu.js # Workflow Studio Library side panel
|
||||
└── data/ # Metadata & settings storage (incl. prompts.json)
|
||||
└── data/ # Fallback data dir (used when ComfyUI user/default/ is not found)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2100 900" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="2100" y2="900" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#1a1a2e"/>
|
||||
<stop offset="50%" stop-color="#16213e"/>
|
||||
<stop offset="100%" stop-color="#1a1a2e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wStroke" x1="0" y1="0" x2="600" y2="600" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#4a9eff"/>
|
||||
<stop offset="100%" stop-color="#7b68ee"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sWave" x1="0" y1="0" x2="600" y2="600" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#7b68ee"/>
|
||||
<stop offset="100%" stop-color="#4a9eff"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="textGrad" x1="0" y1="0" x2="1200" y2="0" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#e0e0ff"/>
|
||||
<stop offset="100%" stop-color="#b0b0d0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect width="2100" height="900" fill="url(#bg)"/>
|
||||
<!-- Subtle grid -->
|
||||
<line x1="0" y1="225" x2="2100" y2="225" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
|
||||
<line x1="0" y1="450" x2="2100" y2="450" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
|
||||
<line x1="0" y1="675" x2="2100" y2="675" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
|
||||
<!-- Decorative wave lines in background -->
|
||||
<path d="M0 750 Q262 700 525 750 Q787 800 1050 750 Q1312 700 1575 750 Q1837 800 2100 750" stroke="#4a9eff" stroke-opacity="0.08" stroke-width="2" fill="none"/>
|
||||
<path d="M0 780 Q262 730 525 780 Q787 830 1050 780 Q1312 730 1575 780 Q1837 830 2100 780" stroke="#7b68ee" stroke-opacity="0.06" stroke-width="2" fill="none"/>
|
||||
<!-- W+S Logo (left side) -->
|
||||
<g transform="translate(180, 180)">
|
||||
<!-- W -->
|
||||
<path d="M60 80 L120 280 L180 130 L240 280 L300 80" stroke="url(#wStroke)" stroke-width="26" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- S wave -->
|
||||
<path d="M80 340 Q140 300 200 340 Q260 380 320 340" stroke="url(#sWave)" stroke-width="18" stroke-linecap="round" fill="none"/>
|
||||
</g>
|
||||
<!-- Title text -->
|
||||
<text x="720" y="380" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="120" font-weight="700" fill="url(#textGrad)" letter-spacing="-2">Workflow Studio</text>
|
||||
<!-- Subtitle -->
|
||||
<text x="720" y="470" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="42" fill="#8888aa" letter-spacing="1">Workflow Management & Generation UI for ComfyUI</text>
|
||||
<!-- Feature pills -->
|
||||
<g font-family="system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="28" fill="#a0a0c0">
|
||||
<rect x="720" y="530" width="200" height="44" rx="22" fill="#4a9eff" fill-opacity="0.12" stroke="#4a9eff" stroke-opacity="0.3" stroke-width="1"/>
|
||||
<text x="820" y="559" text-anchor="middle" fill="#4a9eff">Workflows</text>
|
||||
<rect x="940" y="530" width="200" height="44" rx="22" fill="#7b68ee" fill-opacity="0.12" stroke="#7b68ee" stroke-opacity="0.3" stroke-width="1"/>
|
||||
<text x="1040" y="559" text-anchor="middle" fill="#7b68ee">GenerateUI</text>
|
||||
<rect x="1160" y="530" width="200" height="44" rx="22" fill="#4a9eff" fill-opacity="0.12" stroke="#4a9eff" stroke-opacity="0.3" stroke-width="1"/>
|
||||
<text x="1260" y="559" text-anchor="middle" fill="#4a9eff">AI Prompts</text>
|
||||
<rect x="1380" y="530" width="180" height="44" rx="22" fill="#7b68ee" fill-opacity="0.12" stroke="#7b68ee" stroke-opacity="0.3" stroke-width="1"/>
|
||||
<text x="1470" y="559" text-anchor="middle" fill="#7b68ee">Themes</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,29 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="400" y2="400" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#1a1a2e"/>
|
||||
<stop offset="100%" stop-color="#16213e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wStroke" x1="0" y1="0" x2="400" y2="400" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#4a9eff"/>
|
||||
<stop offset="100%" stop-color="#7b68ee"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sWave" x1="0" y1="0" x2="400" y2="400" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#7b68ee"/>
|
||||
<stop offset="100%" stop-color="#4a9eff"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect width="400" height="400" rx="48" fill="url(#bg)"/>
|
||||
<!-- Subtle grid pattern -->
|
||||
<line x1="0" y1="100" x2="400" y2="100" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
|
||||
<line x1="0" y1="200" x2="400" y2="200" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
|
||||
<line x1="0" y1="300" x2="400" y2="300" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
|
||||
<line x1="100" y1="0" x2="100" y2="400" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
|
||||
<line x1="200" y1="0" x2="200" y2="400" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
|
||||
<line x1="300" y1="0" x2="300" y2="400" stroke="#ffffff" stroke-opacity="0.03" stroke-width="1"/>
|
||||
<!-- W letterform -->
|
||||
<path d="M80 110 L140 290 L200 150 L260 290 L320 110" stroke="url(#wStroke)" stroke-width="28" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- S wave -->
|
||||
<path d="M100 330 Q150 295 200 330 Q250 365 300 330" stroke="url(#sWave)" stroke-width="20" stroke-linecap="round" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 975 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 30 KiB |
+13
-4
@@ -10,13 +10,21 @@ PLUGIN_DIR = Path(__file__).resolve().parent.parent
|
||||
# Directory paths
|
||||
TEMPLATES_DIR = PLUGIN_DIR / "templates"
|
||||
STATIC_DIR = PLUGIN_DIR / "static"
|
||||
DATA_DIR = PLUGIN_DIR / "data"
|
||||
|
||||
# Default workflows directory: ComfyUI's user/default/workflows
|
||||
# PLUGIN_DIR is custom_nodes/ComfyUI-Workflow-Studio
|
||||
# ComfyUI root is custom_nodes/../../ = two levels up
|
||||
_COMFYUI_ROOT = PLUGIN_DIR.parent.parent
|
||||
_COMFYUI_WORKFLOWS = _COMFYUI_ROOT / "user" / "default" / "workflows"
|
||||
|
||||
# Data directory: prefer ComfyUI's user/default/Workflow-Studio/, fallback to plugin data/
|
||||
_COMFYUI_USER_DEFAULT = _COMFYUI_ROOT / "user" / "default"
|
||||
if _COMFYUI_USER_DEFAULT.is_dir():
|
||||
DATA_DIR = _COMFYUI_USER_DEFAULT / "Workflow-Studio"
|
||||
logger.info("Workflow Studio: Using user data dir: %s", DATA_DIR)
|
||||
else:
|
||||
DATA_DIR = PLUGIN_DIR / "data"
|
||||
logger.info("Workflow Studio: user/default not found, using plugin data dir: %s", DATA_DIR)
|
||||
|
||||
# Default workflows directory: ComfyUI's user/default/workflows
|
||||
_COMFYUI_WORKFLOWS = _COMFYUI_USER_DEFAULT / "workflows"
|
||||
|
||||
# Use ComfyUI workflows dir if it exists, otherwise fallback to plugin data dir
|
||||
if _COMFYUI_WORKFLOWS.is_dir():
|
||||
@@ -58,3 +66,4 @@ SETTINGS_FILE = DATA_DIR / "settings.json"
|
||||
NODE_METADATA_FILE = DATA_DIR / "node_metadata.json"
|
||||
NODE_SETS_FILE = DATA_DIR / "node_sets.json"
|
||||
PROMPTS_FILE = DATA_DIR / "prompts.json"
|
||||
MODEL_METADATA_FILE = DATA_DIR / "model_metadata.json"
|
||||
|
||||
@@ -0,0 +1,282 @@
|
||||
"""
|
||||
Gallery Routes - ギャラリータブ用APIエンドポイント
|
||||
"""
|
||||
import json
|
||||
import mimetypes
|
||||
import logging
|
||||
from pathlib import Path
|
||||
from aiohttp import web
|
||||
|
||||
from ..config import DATA_DIR
|
||||
from ..services.gallery_service import GalleryService
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
_service = GalleryService(DATA_DIR)
|
||||
|
||||
|
||||
def setup_routes(app: web.Application):
|
||||
app.router.add_get("/wfm/gallery/folders", list_folders)
|
||||
app.router.add_get("/wfm/gallery/images", list_images)
|
||||
app.router.add_get("/wfm/gallery/image/meta", get_image_meta)
|
||||
app.router.add_get("/wfm/gallery/image/workflow", get_image_workflow)
|
||||
app.router.add_get("/wfm/gallery/image/serve", serve_image)
|
||||
app.router.add_post("/wfm/gallery/image/meta", save_image_meta)
|
||||
app.router.add_post("/wfm/gallery/image/favorite", toggle_favorite)
|
||||
app.router.add_get("/wfm/gallery/groups", list_groups)
|
||||
app.router.add_post("/wfm/gallery/groups", create_group)
|
||||
app.router.add_put("/wfm/gallery/groups/{name}", rename_group)
|
||||
app.router.add_delete("/wfm/gallery/groups/{name}", delete_group)
|
||||
app.router.add_post("/wfm/gallery/groups/{name}/add", add_to_group)
|
||||
app.router.add_post("/wfm/gallery/groups/{name}/remove", remove_from_group)
|
||||
app.router.add_get("/wfm/gallery/groups/{name}/images", list_group_images)
|
||||
# フォルダ・ファイル操作
|
||||
app.router.add_post("/wfm/gallery/folder", create_folder_route)
|
||||
app.router.add_delete("/wfm/gallery/folder", delete_folder_route)
|
||||
app.router.add_post("/wfm/gallery/images/delete", delete_images_route)
|
||||
app.router.add_post("/wfm/gallery/images/move", move_images_route)
|
||||
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# フォルダツリー
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
async def list_folders(request: web.Request) -> web.Response:
|
||||
root = request.rel_url.query.get("root", "")
|
||||
if not root:
|
||||
return web.json_response({"error": "root parameter required"}, status=400)
|
||||
try:
|
||||
tree = _service.list_folder_tree(root)
|
||||
return web.json_response(tree)
|
||||
except Exception as e:
|
||||
logger.error("list_folders error: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# 画像一覧
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
async def list_images(request: web.Request) -> web.Response:
|
||||
folder = request.rel_url.query.get("folder", "")
|
||||
search = request.rel_url.query.get("search", "")
|
||||
sort_by = request.rel_url.query.get("sort", "date_desc")
|
||||
favorite_only = request.rel_url.query.get("favorite", "false") == "true"
|
||||
tag_filter = request.rel_url.query.get("tag", "")
|
||||
group_filter = request.rel_url.query.get("group", "")
|
||||
|
||||
if not folder:
|
||||
return web.json_response({"error": "folder parameter required"}, status=400)
|
||||
|
||||
try:
|
||||
images = _service.list_images(
|
||||
folder,
|
||||
search=search,
|
||||
sort_by=sort_by,
|
||||
favorite_only=favorite_only,
|
||||
tag_filter=tag_filter,
|
||||
group_filter=group_filter,
|
||||
)
|
||||
return web.json_response({"images": images, "total": len(images)})
|
||||
except Exception as e:
|
||||
logger.error("list_images error: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# 画像メタデータ
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
async def get_image_meta(request: web.Request) -> web.Response:
|
||||
path = request.rel_url.query.get("path", "")
|
||||
if not path:
|
||||
return web.json_response({"error": "path required"}, status=400)
|
||||
try:
|
||||
meta = _service.get_image_metadata(path)
|
||||
return web.json_response(meta)
|
||||
except Exception as e:
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def get_image_workflow(request: web.Request) -> web.Response:
|
||||
path = request.rel_url.query.get("path", "")
|
||||
if not path:
|
||||
return web.json_response({"error": "path required"}, status=400)
|
||||
try:
|
||||
wf = _service.extract_workflow_from_metadata(path)
|
||||
if wf is None:
|
||||
return web.json_response({"workflow": None, "has_workflow": False})
|
||||
return web.json_response({"workflow": wf, "has_workflow": True})
|
||||
except Exception as e:
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def serve_image(request: web.Request) -> web.Response:
|
||||
path = request.rel_url.query.get("path", "")
|
||||
if not path:
|
||||
return web.Response(status=400)
|
||||
|
||||
img_path = _service.serve_image(path)
|
||||
if img_path is None:
|
||||
return web.Response(status=404)
|
||||
|
||||
content_type, _ = mimetypes.guess_type(str(img_path))
|
||||
return web.FileResponse(img_path, headers={
|
||||
"Content-Type": content_type or "image/png",
|
||||
"Cache-Control": "max-age=3600",
|
||||
})
|
||||
|
||||
|
||||
async def save_image_meta(request: web.Request) -> web.Response:
|
||||
try:
|
||||
body = await request.json()
|
||||
img_path = body.get("path", "")
|
||||
if not img_path:
|
||||
return web.json_response({"error": "path required"}, status=400)
|
||||
data = {k: v for k, v in body.items() if k != "path"}
|
||||
ok = _service.save_image_meta(img_path, data)
|
||||
return web.json_response({"ok": ok})
|
||||
except Exception as e:
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def toggle_favorite(request: web.Request) -> web.Response:
|
||||
try:
|
||||
body = await request.json()
|
||||
img_path = body.get("path", "")
|
||||
if not img_path:
|
||||
return web.json_response({"error": "path required"}, status=400)
|
||||
new_val = _service.toggle_favorite(img_path)
|
||||
return web.json_response({"favorite": new_val})
|
||||
except Exception as e:
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# グループ管理
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
async def list_groups(request: web.Request) -> web.Response:
|
||||
return web.json_response({"groups": _service.list_groups()})
|
||||
|
||||
|
||||
async def create_group(request: web.Request) -> web.Response:
|
||||
try:
|
||||
body = await request.json()
|
||||
name = body.get("name", "").strip()
|
||||
if not name:
|
||||
return web.json_response({"error": "name required"}, status=400)
|
||||
ok = _service.create_group(name)
|
||||
if not ok:
|
||||
return web.json_response({"error": "Group already exists"}, status=409)
|
||||
return web.json_response({"ok": True})
|
||||
except Exception as e:
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def rename_group(request: web.Request) -> web.Response:
|
||||
"""PUT /wfm/gallery/groups/{name} - グループ名変更"""
|
||||
try:
|
||||
old_name = request.match_info.get("name", "")
|
||||
body = await request.json()
|
||||
new_name = body.get("new_name", "").strip()
|
||||
if not old_name or not new_name:
|
||||
return web.json_response({"error": "old_name and new_name required"}, status=400)
|
||||
ok = _service.rename_group(old_name, new_name)
|
||||
if not ok:
|
||||
return web.json_response({"error": "Rename failed (not found or name conflict)"}, status=400)
|
||||
return web.json_response({"ok": True})
|
||||
except Exception as e:
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def delete_group(request: web.Request) -> web.Response:
|
||||
name = request.match_info.get("name", "")
|
||||
ok = _service.delete_group(name)
|
||||
return web.json_response({"ok": ok})
|
||||
|
||||
|
||||
async def add_to_group(request: web.Request) -> web.Response:
|
||||
try:
|
||||
name = request.match_info.get("name", "")
|
||||
body = await request.json()
|
||||
img_path = body.get("path", "")
|
||||
ok = _service.add_to_group(img_path, name)
|
||||
return web.json_response({"ok": ok})
|
||||
except Exception as e:
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def remove_from_group(request: web.Request) -> web.Response:
|
||||
try:
|
||||
name = request.match_info.get("name", "")
|
||||
body = await request.json()
|
||||
img_path = body.get("path", "")
|
||||
ok = _service.remove_from_group(img_path, name)
|
||||
return web.json_response({"ok": ok})
|
||||
except Exception as e:
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def list_group_images(request: web.Request) -> web.Response:
|
||||
name = request.match_info.get("name", "")
|
||||
images = _service.list_images_in_group(name)
|
||||
return web.json_response({"images": images})
|
||||
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# フォルダ・ファイル操作
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
async def create_folder_route(request: web.Request) -> web.Response:
|
||||
"""POST /wfm/gallery/folder - 新規フォルダ作成"""
|
||||
try:
|
||||
body = await request.json()
|
||||
parent = body.get("parent", "")
|
||||
name = body.get("name", "").strip()
|
||||
if not parent or not name:
|
||||
return web.json_response({"ok": False, "error": "parent and name required"}, status=400)
|
||||
result = _service.create_folder(parent, name)
|
||||
return web.json_response(result, status=200 if result["ok"] else 400)
|
||||
except Exception as e:
|
||||
return web.json_response({"ok": False, "error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def delete_folder_route(request: web.Request) -> web.Response:
|
||||
"""DELETE /wfm/gallery/folder - フォルダ削除"""
|
||||
try:
|
||||
body = await request.json()
|
||||
folder = body.get("path", "")
|
||||
if not folder:
|
||||
return web.json_response({"ok": False, "error": "path required"}, status=400)
|
||||
result = _service.delete_folder(folder)
|
||||
return web.json_response(result, status=200 if result["ok"] else 400)
|
||||
except Exception as e:
|
||||
return web.json_response({"ok": False, "error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def delete_images_route(request: web.Request) -> web.Response:
|
||||
"""POST /wfm/gallery/images/delete - 画像削除（単体・複数）"""
|
||||
try:
|
||||
body = await request.json()
|
||||
paths = body.get("paths", [])
|
||||
if not paths:
|
||||
return web.json_response({"deleted": [], "errors": ["paths required"]}, status=400)
|
||||
result = _service.delete_images(paths)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
return web.json_response({"deleted": [], "errors": [str(e)]}, status=500)
|
||||
|
||||
|
||||
async def move_images_route(request: web.Request) -> web.Response:
|
||||
"""POST /wfm/gallery/images/move - 画像移動（単体・複数）"""
|
||||
try:
|
||||
body = await request.json()
|
||||
paths = body.get("paths", [])
|
||||
dest = body.get("dest", "")
|
||||
if not paths or not dest:
|
||||
return web.json_response({"moved": [], "errors": ["paths and dest required"]}, status=400)
|
||||
result = _service.move_images(paths, dest)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
return web.json_response({"moved": [], "errors": [str(e)]}, status=500)
|
||||
@@ -0,0 +1,531 @@
|
||||
"""Model metadata API routes."""
|
||||
|
||||
import asyncio
|
||||
import logging
|
||||
import mimetypes
|
||||
|
||||
from aiohttp import web
|
||||
|
||||
from ..services.models_service import ModelsService
|
||||
from ..services.civitai_service import CivitaiService
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
_service = ModelsService()
|
||||
_civitai = CivitaiService()
|
||||
|
||||
|
||||
def setup_routes(app: web.Application):
|
||||
"""Register all model management API routes."""
|
||||
app.router.add_get("/api/wfm/models/metadata", handle_get_metadata)
|
||||
app.router.add_post("/api/wfm/models/metadata", handle_save_metadata)
|
||||
app.router.add_get("/api/wfm/models/preview", handle_get_preview)
|
||||
app.router.add_get("/api/wfm/models/groups", handle_get_groups)
|
||||
app.router.add_post("/api/wfm/models/groups", handle_save_groups)
|
||||
app.router.add_post("/api/wfm/models/civitai/fetch", handle_civitai_fetch)
|
||||
app.router.add_get("/api/wfm/models/civitai/cache", handle_civitai_cache)
|
||||
app.router.add_post("/api/wfm/models/civitai/batch", handle_civitai_batch)
|
||||
app.router.add_post("/api/wfm/models/change-preview", handle_change_preview)
|
||||
app.router.add_get("/api/wfm/models/filepath", handle_get_filepath)
|
||||
app.router.add_get("/api/wfm/models/disabled", handle_get_disabled)
|
||||
app.router.add_post("/api/wfm/models/toggle", handle_toggle_model)
|
||||
app.router.add_post("/api/wfm/models/group-toggle", handle_toggle_group)
|
||||
app.router.add_post("/api/wfm/models/delete", handle_delete_models)
|
||||
|
||||
|
||||
# ── Model Metadata ─────────────────────────────────────────
|
||||
|
||||
|
||||
async def handle_get_metadata(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/models/metadata"""
|
||||
try:
|
||||
result = await asyncio.to_thread(_service.get_all_metadata)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
logger.error("Error loading model metadata: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_save_metadata(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/models/metadata"""
|
||||
try:
|
||||
body = await request.json()
|
||||
model_name = body.get("modelName", "")
|
||||
if not model_name:
|
||||
return web.json_response({"error": "modelName is required"}, status=400)
|
||||
updates = {k: v for k, v in body.items() if k != "modelName"}
|
||||
result = await asyncio.to_thread(_service.update_metadata, model_name, updates)
|
||||
return web.json_response({"status": "ok", "metadata": result})
|
||||
except Exception as e:
|
||||
logger.error("Error saving model metadata: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ── Model Groups ──────────────────────────────────────────
|
||||
|
||||
|
||||
async def handle_get_groups(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/models/groups?type=checkpoint"""
|
||||
model_type = request.query.get("type", "")
|
||||
try:
|
||||
result = await asyncio.to_thread(_service.get_model_groups, model_type or None)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
logger.error("Error loading model groups: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_save_groups(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/models/groups
|
||||
|
||||
Body: { "model_type": "checkpoint", "groups": { "groupName": [...] } }
|
||||
"""
|
||||
try:
|
||||
body = await request.json()
|
||||
model_type = body.get("model_type", "")
|
||||
groups = body.get("groups", {})
|
||||
if not model_type:
|
||||
return web.json_response({"error": "model_type required"}, status=400)
|
||||
result = await asyncio.to_thread(_service.save_model_groups, groups, model_type)
|
||||
return web.json_response({"status": "ok", "groups": result})
|
||||
except Exception as e:
|
||||
logger.error("Error saving model groups: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ── CivitAI Integration ──────────────────────────────────
|
||||
|
||||
|
||||
async def handle_civitai_fetch(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/models/civitai/fetch
|
||||
|
||||
Body: { "type": "checkpoint", "name": "model.safetensors" }
|
||||
Calculates SHA256 hash and fetches model info from CivitAI.
|
||||
"""
|
||||
try:
|
||||
body = await request.json()
|
||||
model_type = body.get("type", "")
|
||||
model_name = body.get("name", "")
|
||||
if not model_type or not model_name:
|
||||
return web.json_response({"error": "type and name required"}, status=400)
|
||||
if ".." in model_name:
|
||||
return web.json_response({"error": "Invalid model name"}, status=400)
|
||||
|
||||
# Resolve file path
|
||||
from ..services.models_service import _get_model_dirs
|
||||
dirs = _get_model_dirs(model_type)
|
||||
file_path = None
|
||||
for d in dirs:
|
||||
candidate = d / model_name
|
||||
if candidate.is_file():
|
||||
file_path = candidate
|
||||
break
|
||||
|
||||
if not file_path:
|
||||
return web.json_response({"error": "Model file not found"}, status=404)
|
||||
|
||||
# Check if we already have a cached hash in metadata
|
||||
meta = _service.get_all_metadata()
|
||||
model_meta = meta.get(model_name, {})
|
||||
sha256 = model_meta.get("sha256")
|
||||
|
||||
if not sha256:
|
||||
# Calculate hash (can be slow for large files)
|
||||
sha256 = await asyncio.to_thread(
|
||||
CivitaiService.calculate_sha256, file_path
|
||||
)
|
||||
if not sha256:
|
||||
return web.json_response({"error": "Failed to calculate hash"}, status=500)
|
||||
# Cache the hash in model metadata
|
||||
await asyncio.to_thread(
|
||||
_service.update_metadata, model_name, {"sha256": sha256}
|
||||
)
|
||||
|
||||
# Fetch from CivitAI
|
||||
info = await asyncio.to_thread(_civitai.fetch_by_hash, sha256)
|
||||
if not info:
|
||||
return web.json_response({
|
||||
"status": "not_found",
|
||||
"sha256": sha256,
|
||||
"message": "Model not found on CivitAI"
|
||||
})
|
||||
|
||||
return web.json_response({
|
||||
"status": "ok",
|
||||
"sha256": sha256,
|
||||
"civitai": info,
|
||||
})
|
||||
except Exception as e:
|
||||
logger.error("CivitAI fetch error: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_civitai_cache(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/models/civitai/cache - Return all cached CivitAI data."""
|
||||
try:
|
||||
result = await asyncio.to_thread(_civitai.get_all_cached)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
logger.error("Error loading CivitAI cache: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_civitai_batch(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/models/civitai/batch - SSE stream for batch CivitAI fetch.
|
||||
|
||||
Body: { "type": "checkpoint", "models": ["model1.safetensors", ...] }
|
||||
Streams SSE events: progress, result, done.
|
||||
"""
|
||||
import json as _json
|
||||
|
||||
try:
|
||||
body = await request.json()
|
||||
except Exception:
|
||||
return web.Response(status=400, text="Invalid JSON body")
|
||||
|
||||
model_type = body.get("type", "")
|
||||
model_names = body.get("models", [])
|
||||
if not model_type or not model_names:
|
||||
return web.Response(status=400, text="type and models required")
|
||||
|
||||
# Resolve file paths
|
||||
from ..services.models_service import _get_model_dirs
|
||||
dirs = _get_model_dirs(model_type)
|
||||
model_files = []
|
||||
for name in model_names:
|
||||
if ".." in name:
|
||||
continue
|
||||
for d in dirs:
|
||||
p = d / name
|
||||
if p.is_file():
|
||||
model_files.append((name, p))
|
||||
break
|
||||
|
||||
if not model_files:
|
||||
return web.Response(status=404, text="No model files found")
|
||||
|
||||
# Set up SSE response
|
||||
response = web.StreamResponse(
|
||||
status=200,
|
||||
headers={
|
||||
"Content-Type": "text/event-stream",
|
||||
"Cache-Control": "no-cache",
|
||||
"Connection": "keep-alive",
|
||||
},
|
||||
)
|
||||
await response.prepare(request)
|
||||
|
||||
def send_sse(event, data):
|
||||
"""Format SSE message (returns bytes)."""
|
||||
msg = f"event: {event}\ndata: {_json.dumps(data, ensure_ascii=False)}\n\n"
|
||||
return msg.encode("utf-8")
|
||||
|
||||
# Run batch fetch in thread with progress callback via queue
|
||||
import queue
|
||||
progress_q = queue.Queue()
|
||||
|
||||
def on_progress(current, total, model_name, status):
|
||||
progress_q.put({"current": current, "total": total, "model": model_name, "status": status})
|
||||
|
||||
# Start batch in background thread
|
||||
loop = asyncio.get_event_loop()
|
||||
fetch_task = loop.run_in_executor(None, _civitai.batch_fetch, model_files, on_progress)
|
||||
|
||||
# Stream progress events
|
||||
import time as _time
|
||||
|
||||
while not fetch_task.done():
|
||||
# Drain queue
|
||||
while not progress_q.empty():
|
||||
try:
|
||||
p = progress_q.get_nowait()
|
||||
await response.write(send_sse("progress", p))
|
||||
except queue.Empty:
|
||||
break
|
||||
await asyncio.sleep(0.1)
|
||||
|
||||
# Drain remaining events
|
||||
while not progress_q.empty():
|
||||
try:
|
||||
p = progress_q.get_nowait()
|
||||
await response.write(send_sse("progress", p))
|
||||
except queue.Empty:
|
||||
break
|
||||
|
||||
# Get results and update metadata
|
||||
results = fetch_task.result()
|
||||
meta_updates = {}
|
||||
for model_name, result in results.items():
|
||||
sha256 = result.get("sha256")
|
||||
if sha256:
|
||||
meta_updates[model_name] = sha256
|
||||
|
||||
# Bulk update sha256 in metadata
|
||||
if meta_updates:
|
||||
all_meta = _service.get_all_metadata()
|
||||
for mname, sha in meta_updates.items():
|
||||
if mname not in all_meta:
|
||||
all_meta[mname] = {"tags": [], "favorite": False, "memo": ""}
|
||||
all_meta[mname]["sha256"] = sha
|
||||
_service._save_metadata(all_meta)
|
||||
|
||||
# Send final result
|
||||
summary = {
|
||||
"total": len(model_files),
|
||||
"found": sum(1 for r in results.values() if r.get("civitai")),
|
||||
"not_found": sum(1 for r in results.values() if r.get("sha256") and not r.get("civitai")),
|
||||
"errors": sum(1 for r in results.values() if r.get("error")),
|
||||
"hashes": {name: r.get("sha256") for name, r in results.items() if r.get("sha256")},
|
||||
}
|
||||
await response.write(send_sse("done", summary))
|
||||
await response.write_eof()
|
||||
return response
|
||||
|
||||
|
||||
# ── Model Preview Image ───────────────────────────────────
|
||||
|
||||
|
||||
async def handle_get_preview(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/models/preview?type=checkpoint&name=model.safetensors"""
|
||||
model_type = request.query.get("type", "")
|
||||
model_name = request.query.get("name", "")
|
||||
if not model_type or not model_name:
|
||||
return web.Response(status=400, text="type and name are required")
|
||||
|
||||
# Security: reject path traversal
|
||||
if ".." in model_name:
|
||||
return web.Response(status=400, text="Invalid model name")
|
||||
|
||||
try:
|
||||
preview_path = await asyncio.to_thread(
|
||||
_service.find_preview_image, model_type, model_name
|
||||
)
|
||||
if not preview_path:
|
||||
return web.Response(status=404)
|
||||
|
||||
content_type, _ = mimetypes.guess_type(str(preview_path))
|
||||
return web.FileResponse(
|
||||
preview_path,
|
||||
headers={"Content-Type": content_type or "image/png",
|
||||
"Cache-Control": "public, max-age=3600"},
|
||||
)
|
||||
except Exception as e:
|
||||
logger.error("Error serving model preview: %s", e)
|
||||
return web.Response(status=500, text=str(e))
|
||||
|
||||
|
||||
async def handle_change_preview(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/models/change-preview - Upload/change model preview image.
|
||||
|
||||
Multipart form: type, name, file
|
||||
Saves as {model_stem}.preview.png next to the model file.
|
||||
"""
|
||||
from pathlib import Path as _Path
|
||||
|
||||
try:
|
||||
reader = await request.multipart()
|
||||
model_type = None
|
||||
model_name = None
|
||||
image_data = None
|
||||
|
||||
while True:
|
||||
part = await reader.next()
|
||||
if part is None:
|
||||
break
|
||||
if part.name == "type":
|
||||
model_type = (await part.read()).decode("utf-8")
|
||||
elif part.name == "name":
|
||||
model_name = (await part.read()).decode("utf-8")
|
||||
elif part.name == "file":
|
||||
image_data = await part.read()
|
||||
|
||||
if not model_type or not model_name:
|
||||
return web.json_response({"error": "type and name required"}, status=400)
|
||||
if ".." in model_name:
|
||||
return web.json_response({"error": "Invalid model name"}, status=400)
|
||||
if image_data is None:
|
||||
return web.json_response({"error": "file required"}, status=400)
|
||||
|
||||
# Resolve model file path
|
||||
from ..services.models_service import _get_model_dirs
|
||||
dirs = _get_model_dirs(model_type)
|
||||
model_path = None
|
||||
for d in dirs:
|
||||
candidate = d / model_name
|
||||
if candidate.is_file():
|
||||
model_path = candidate
|
||||
break
|
||||
|
||||
if not model_path:
|
||||
return web.json_response({"error": "Model file not found"}, status=404)
|
||||
|
||||
# Save as {stem}.preview.png next to model file
|
||||
preview_path = model_path.parent / (model_path.stem + ".preview.png")
|
||||
|
||||
def _write():
|
||||
with open(preview_path, "wb") as f:
|
||||
f.write(image_data)
|
||||
|
||||
await asyncio.to_thread(_write)
|
||||
logger.info("Saved preview image: %s", preview_path)
|
||||
|
||||
return web.json_response({"status": "ok"})
|
||||
except Exception as e:
|
||||
logger.error("Error changing model preview: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_get_filepath(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/models/filepath?type=checkpoint&name=model.safetensors
|
||||
|
||||
Returns the full file path of the model.
|
||||
"""
|
||||
model_type = request.query.get("type", "")
|
||||
model_name = request.query.get("name", "")
|
||||
if not model_type or not model_name:
|
||||
return web.json_response({"error": "type and name required"}, status=400)
|
||||
if ".." in model_name:
|
||||
return web.json_response({"error": "Invalid model name"}, status=400)
|
||||
|
||||
try:
|
||||
from ..services.models_service import _get_model_dirs
|
||||
dirs = _get_model_dirs(model_type)
|
||||
for d in dirs:
|
||||
candidate = d / model_name
|
||||
if candidate.is_file():
|
||||
return web.json_response({"path": str(candidate)})
|
||||
return web.json_response({"error": "Model file not found"}, status=404)
|
||||
except Exception as e:
|
||||
logger.error("Error resolving model filepath: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ── Model Enable / Disable ────────────────────────────────
|
||||
|
||||
|
||||
async def handle_get_disabled(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/models/disabled?type=checkpoint
|
||||
|
||||
Returns list of disabled model names (normalized, without .disabled suffix).
|
||||
"""
|
||||
model_type = request.query.get("type", "")
|
||||
if not model_type:
|
||||
return web.json_response({"error": "type required"}, status=400)
|
||||
try:
|
||||
result = await asyncio.to_thread(_service.scan_disabled_models, model_type)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
logger.error("Error scanning disabled models: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_toggle_model(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/models/toggle
|
||||
|
||||
Body: { "model_type": "checkpoint", "model_name": "v1-5.safetensors", "enabled": false }
|
||||
Renames the model file to add/remove .disabled suffix.
|
||||
"""
|
||||
try:
|
||||
body = await request.json()
|
||||
model_type = body.get("model_type", "")
|
||||
model_name = body.get("model_name", "")
|
||||
enabled = body.get("enabled", True)
|
||||
|
||||
if not model_type or not model_name:
|
||||
return web.json_response({"error": "model_type and model_name required"}, status=400)
|
||||
if ".." in model_name:
|
||||
return web.json_response({"error": "Invalid model name"}, status=400)
|
||||
|
||||
if enabled:
|
||||
await asyncio.to_thread(_service.enable_model, model_type, model_name)
|
||||
else:
|
||||
await asyncio.to_thread(_service.disable_model, model_type, model_name)
|
||||
|
||||
return web.json_response({"status": "ok", "enabled": enabled})
|
||||
except FileNotFoundError as e:
|
||||
return web.json_response({"error": str(e)}, status=404)
|
||||
except OSError as e:
|
||||
logger.error("OS error toggling model: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
except Exception as e:
|
||||
logger.error("Error toggling model: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_toggle_group(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/models/group-toggle
|
||||
|
||||
Body: { "model_type": "checkpoint", "group_name": "MyGroup", "enabled": true }
|
||||
Enables or disables all models belonging to the specified group.
|
||||
"""
|
||||
try:
|
||||
body = await request.json()
|
||||
model_type = body.get("model_type", "")
|
||||
group_name = body.get("group_name", "")
|
||||
enabled = body.get("enabled", True)
|
||||
|
||||
if not model_type or not group_name:
|
||||
return web.json_response({"error": "model_type and group_name required"}, status=400)
|
||||
|
||||
groups = await asyncio.to_thread(_service.get_model_groups, model_type)
|
||||
members = groups.get(group_name, [])
|
||||
|
||||
ok_list = []
|
||||
error_list = []
|
||||
for model_name in members:
|
||||
if ".." in model_name:
|
||||
continue
|
||||
try:
|
||||
if enabled:
|
||||
await asyncio.to_thread(_service.enable_model, model_type, model_name)
|
||||
else:
|
||||
await asyncio.to_thread(_service.disable_model, model_type, model_name)
|
||||
ok_list.append(model_name)
|
||||
except Exception as e:
|
||||
error_list.append({"model": model_name, "error": str(e)})
|
||||
|
||||
return web.json_response({
|
||||
"status": "ok",
|
||||
"enabled": enabled,
|
||||
"ok": ok_list,
|
||||
"errors": error_list,
|
||||
})
|
||||
except Exception as e:
|
||||
logger.error("Error toggling group: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_delete_models(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/models/delete
|
||||
|
||||
Body: { "model_type": "checkpoint", "model_names": ["a.safetensors", "b.safetensors"] }
|
||||
Deletes each model file and associated preview/sidecar files, then removes metadata.
|
||||
"""
|
||||
try:
|
||||
body = await request.json()
|
||||
model_type = body.get("model_type", "")
|
||||
model_names = body.get("model_names", [])
|
||||
|
||||
if not model_type or not isinstance(model_names, list) or not model_names:
|
||||
return web.json_response({"error": "model_type and model_names[] required"}, status=400)
|
||||
|
||||
ok_list = []
|
||||
error_list = []
|
||||
for model_name in model_names:
|
||||
if ".." in str(model_name):
|
||||
error_list.append({"model": model_name, "error": "Invalid model name"})
|
||||
continue
|
||||
try:
|
||||
result = await asyncio.to_thread(_service.delete_model, model_type, model_name)
|
||||
ok_list.append({"model": model_name, "deleted": result["deleted"]})
|
||||
logger.info("Deleted model: %s (%s files)", model_name, len(result["deleted"]))
|
||||
except FileNotFoundError as e:
|
||||
error_list.append({"model": model_name, "error": str(e)})
|
||||
except Exception as e:
|
||||
logger.error("Error deleting model %s: %s", model_name, e)
|
||||
error_list.append({"model": model_name, "error": str(e)})
|
||||
|
||||
return web.json_response({"status": "ok", "ok": ok_list, "errors": error_list})
|
||||
except Exception as e:
|
||||
logger.error("Error in delete_models: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
@@ -1,18 +1,30 @@
|
||||
"""Settings API routes."""
|
||||
|
||||
import asyncio
|
||||
import json
|
||||
import logging
|
||||
from pathlib import Path
|
||||
|
||||
from aiohttp import web
|
||||
|
||||
from ..services.settings_service import SettingsService
|
||||
from ..config import DEFAULT_WORKFLOWS_DIR
|
||||
from ..config import DEFAULT_WORKFLOWS_DIR, DATA_DIR
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
_service = SettingsService()
|
||||
|
||||
# Data files included in export/import
|
||||
_DATA_FILES = [
|
||||
"settings.json",
|
||||
"metadata.json",
|
||||
"node_metadata.json",
|
||||
"node_sets.json",
|
||||
"prompts.json",
|
||||
"model_metadata.json",
|
||||
"gallery_metadata.json",
|
||||
]
|
||||
|
||||
|
||||
def setup_routes(app: web.Application):
|
||||
"""Register settings API routes."""
|
||||
@@ -20,6 +32,10 @@ def setup_routes(app: web.Application):
|
||||
app.router.add_post("/api/wfm/settings", handle_post)
|
||||
app.router.add_get("/api/wfm/settings/workflows-dir", handle_get_workflows_dir)
|
||||
app.router.add_post("/api/wfm/settings/workflows-dir", handle_set_workflows_dir)
|
||||
app.router.add_get("/api/wfm/settings/output-dir", handle_get_output_dir)
|
||||
app.router.add_post("/api/wfm/settings/output-dir", handle_set_output_dir)
|
||||
app.router.add_get("/api/wfm/settings/export", handle_export)
|
||||
app.router.add_post("/api/wfm/settings/import", handle_import)
|
||||
|
||||
|
||||
async def handle_get(request: web.Request) -> web.Response:
|
||||
@@ -92,3 +108,129 @@ async def handle_set_workflows_dir(request: web.Request) -> web.Response:
|
||||
except Exception as e:
|
||||
logger.error("Error setting workflows dir: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
def _get_comfyui_output_dir() -> str:
|
||||
"""ComfyUIのデフォルトoutputフォルダを取得する。"""
|
||||
try:
|
||||
import folder_paths # type: ignore
|
||||
return str(folder_paths.get_output_directory())
|
||||
except Exception:
|
||||
pass
|
||||
# fallback: config.pyのCOMFYUI_ROOTから推測
|
||||
from ..config import PLUGIN_DIR
|
||||
comfyui_root = PLUGIN_DIR.parent.parent
|
||||
output_dir = comfyui_root / "output"
|
||||
if output_dir.is_dir():
|
||||
return str(output_dir)
|
||||
return ""
|
||||
|
||||
|
||||
async def handle_get_output_dir(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/settings/output-dir - Get gallery output directory."""
|
||||
try:
|
||||
server_settings = await asyncio.to_thread(_service.load)
|
||||
saved = server_settings.get("gallery_output_dir", "").strip()
|
||||
default_dir = await asyncio.to_thread(_get_comfyui_output_dir)
|
||||
return web.json_response({
|
||||
"current": saved or default_dir,
|
||||
"default": default_dir,
|
||||
"saved": saved,
|
||||
})
|
||||
except Exception as e:
|
||||
logger.error("Error getting output dir: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_set_output_dir(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/settings/output-dir - Save gallery output directory."""
|
||||
try:
|
||||
body = await request.json()
|
||||
new_dir = body.get("gallery_output_dir", "").strip()
|
||||
await asyncio.to_thread(_service.update, {"gallery_output_dir": new_dir})
|
||||
|
||||
default_dir = await asyncio.to_thread(_get_comfyui_output_dir)
|
||||
resolved = new_dir or default_dir
|
||||
|
||||
# GalleryServiceの許可ルートを更新
|
||||
from ..routes.gallery_routes import _service as gallery_service
|
||||
gallery_service.update_output_root(resolved)
|
||||
|
||||
return web.json_response({
|
||||
"status": "ok",
|
||||
"current": resolved,
|
||||
"default": default_dir,
|
||||
"saved": new_dir,
|
||||
})
|
||||
except Exception as e:
|
||||
logger.error("Error setting output dir: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
def _load_data_file(filename: str):
|
||||
"""Load a single data file, return empty dict/list if missing."""
|
||||
path = DATA_DIR / filename
|
||||
if not path.exists():
|
||||
return None
|
||||
try:
|
||||
with open(path, "r", encoding="utf-8") as f:
|
||||
return json.load(f)
|
||||
except Exception:
|
||||
return None
|
||||
|
||||
|
||||
def _build_export_bundle() -> dict:
|
||||
"""Collect all data files into a single export bundle."""
|
||||
bundle = {"__version": 1, "__source": "ComfyUI-Workflow-Studio"}
|
||||
for filename in _DATA_FILES:
|
||||
data = _load_data_file(filename)
|
||||
if data is not None:
|
||||
bundle[filename] = data
|
||||
return bundle
|
||||
|
||||
|
||||
async def handle_export(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/settings/export - Download all data as a single JSON bundle."""
|
||||
try:
|
||||
bundle = await asyncio.to_thread(_build_export_bundle)
|
||||
body = json.dumps(bundle, ensure_ascii=False, indent=2)
|
||||
return web.Response(
|
||||
body=body.encode("utf-8"),
|
||||
content_type="application/json",
|
||||
headers={"Content-Disposition": 'attachment; filename="wfm-data-export.json"'},
|
||||
)
|
||||
except Exception as e:
|
||||
logger.error("Error exporting data: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
def _apply_import_bundle(bundle: dict) -> dict:
|
||||
"""Write imported bundle back to individual data files. Returns summary."""
|
||||
summary = {"imported": [], "skipped": []}
|
||||
DATA_DIR.mkdir(parents=True, exist_ok=True)
|
||||
for filename in _DATA_FILES:
|
||||
if filename not in bundle:
|
||||
summary["skipped"].append(filename)
|
||||
continue
|
||||
try:
|
||||
path = DATA_DIR / filename
|
||||
with open(path, "w", encoding="utf-8") as f:
|
||||
json.dump(bundle[filename], f, ensure_ascii=False, indent=2)
|
||||
summary["imported"].append(filename)
|
||||
except Exception as e:
|
||||
logger.error("Import failed for %s: %s", filename, e)
|
||||
summary["skipped"].append(filename)
|
||||
return summary
|
||||
|
||||
|
||||
async def handle_import(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/settings/import - Upload and restore a JSON bundle."""
|
||||
try:
|
||||
bundle = await request.json()
|
||||
if not isinstance(bundle, dict):
|
||||
return web.json_response({"error": "Invalid bundle format"}, status=400)
|
||||
summary = await asyncio.to_thread(_apply_import_bundle, bundle)
|
||||
return web.json_response({"status": "ok", **summary})
|
||||
except Exception as e:
|
||||
logger.error("Error importing data: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
"""CivitAI API integration service."""
|
||||
|
||||
import hashlib
|
||||
import json
|
||||
import logging
|
||||
from pathlib import Path
|
||||
from urllib.request import Request, urlopen
|
||||
from urllib.error import URLError, HTTPError
|
||||
|
||||
from ..config import DATA_DIR
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
CIVITAI_API_BASE = "https://civitai.com/api/v1"
|
||||
CIVITAI_CACHE_FILE = DATA_DIR / "civitai_cache.json"
|
||||
|
||||
|
||||
class CivitaiService:
|
||||
"""Fetch and cache CivitAI model metadata."""
|
||||
|
||||
def __init__(self):
|
||||
self._cache = None
|
||||
|
||||
def _load_cache(self):
|
||||
if self._cache is not None:
|
||||
return self._cache
|
||||
if CIVITAI_CACHE_FILE.exists():
|
||||
try:
|
||||
with open(CIVITAI_CACHE_FILE, "r", encoding="utf-8") as f:
|
||||
self._cache = json.load(f)
|
||||
return self._cache
|
||||
except Exception:
|
||||
pass
|
||||
self._cache = {}
|
||||
return self._cache
|
||||
|
||||
def _save_cache(self):
|
||||
CIVITAI_CACHE_FILE.parent.mkdir(parents=True, exist_ok=True)
|
||||
with open(CIVITAI_CACHE_FILE, "w", encoding="utf-8") as f:
|
||||
json.dump(self._cache, f, ensure_ascii=False, indent=2)
|
||||
|
||||
def get_cached(self, sha256_hash):
|
||||
"""Return cached CivitAI data for a given hash, or None."""
|
||||
cache = self._load_cache()
|
||||
return cache.get(sha256_hash)
|
||||
|
||||
def get_all_cached(self):
|
||||
"""Return the full cache dict."""
|
||||
return self._load_cache()
|
||||
|
||||
@staticmethod
|
||||
def calculate_sha256(file_path, chunk_size=65536):
|
||||
"""Calculate SHA256 hash of a file."""
|
||||
h = hashlib.sha256()
|
||||
path = Path(file_path)
|
||||
if not path.is_file():
|
||||
return None
|
||||
with open(path, "rb") as f:
|
||||
while True:
|
||||
chunk = f.read(chunk_size)
|
||||
if not chunk:
|
||||
break
|
||||
h.update(chunk)
|
||||
return h.hexdigest()
|
||||
|
||||
def fetch_by_hash(self, sha256_hash):
|
||||
"""Fetch model version info from CivitAI by SHA256 hash.
|
||||
|
||||
Returns dict with model info, or None if not found.
|
||||
Caches successful results.
|
||||
"""
|
||||
# Check cache first
|
||||
cache = self._load_cache()
|
||||
if sha256_hash in cache:
|
||||
return cache[sha256_hash]
|
||||
|
||||
url = f"{CIVITAI_API_BASE}/model-versions/by-hash/{sha256_hash}"
|
||||
try:
|
||||
req = Request(url, headers={"User-Agent": "ComfyUI-Workflow-Studio/1.0"})
|
||||
with urlopen(req, timeout=15) as resp:
|
||||
data = json.loads(resp.read().decode("utf-8"))
|
||||
|
||||
if not data or "id" not in data:
|
||||
return None
|
||||
|
||||
# Extract useful fields
|
||||
info = self._extract_info(data)
|
||||
cache[sha256_hash] = info
|
||||
self._save_cache()
|
||||
return info
|
||||
|
||||
except HTTPError as e:
|
||||
if e.code == 404:
|
||||
logger.debug("CivitAI: model not found for hash %s", sha256_hash[:16])
|
||||
return None
|
||||
logger.warning("CivitAI API error: %s %s", e.code, e.reason)
|
||||
return None
|
||||
except (URLError, Exception) as e:
|
||||
logger.warning("CivitAI request failed: %s", e)
|
||||
return None
|
||||
|
||||
@staticmethod
|
||||
def _extract_info(data):
|
||||
"""Extract relevant fields from CivitAI API response."""
|
||||
model = data.get("model", {})
|
||||
images = data.get("images", [])
|
||||
files = data.get("files", [])
|
||||
|
||||
# Get primary file info
|
||||
primary_file = None
|
||||
for f in files:
|
||||
if f.get("primary"):
|
||||
primary_file = f
|
||||
break
|
||||
if not primary_file and files:
|
||||
primary_file = files[0]
|
||||
|
||||
# Get image URLs (first 5)
|
||||
image_urls = []
|
||||
for img in images[:5]:
|
||||
url = img.get("url", "")
|
||||
if url:
|
||||
# Optimize for thumbnail
|
||||
optimized = url.replace("/original=true", "/width=450,optimized=true")
|
||||
image_urls.append(optimized)
|
||||
|
||||
return {
|
||||
"versionId": data.get("id"),
|
||||
"modelId": model.get("id"),
|
||||
"modelName": model.get("name", ""),
|
||||
"versionName": data.get("name", ""),
|
||||
"type": model.get("type", ""),
|
||||
"description": data.get("description") or model.get("description", ""),
|
||||
"tags": model.get("tags", []),
|
||||
"nsfw": model.get("nsfw", False),
|
||||
"creator": data.get("creator", {}).get("username", ""),
|
||||
"images": image_urls,
|
||||
"trainedWords": data.get("trainedWords", []),
|
||||
"baseModel": data.get("baseModel", ""),
|
||||
"fileSize": primary_file.get("sizeKB", 0) if primary_file else 0,
|
||||
"downloadUrl": data.get("downloadUrl", ""),
|
||||
"modelUrl": f"https://civitai.com/models/{model.get('id', '')}?modelVersionId={data.get('id', '')}",
|
||||
}
|
||||
|
||||
def batch_fetch(self, model_files, progress_callback=None):
|
||||
"""Batch fetch CivitAI info for multiple model files.
|
||||
|
||||
Args:
|
||||
model_files: list of (model_name, file_path) tuples
|
||||
progress_callback: fn(current, total, model_name, status) called per model
|
||||
|
||||
Returns: dict of { model_name: { sha256, civitai_info_or_none } }
|
||||
"""
|
||||
import time
|
||||
|
||||
results = {}
|
||||
total = len(model_files)
|
||||
cache = self._load_cache()
|
||||
|
||||
for i, (model_name, file_path) in enumerate(model_files):
|
||||
if progress_callback:
|
||||
progress_callback(i, total, model_name, "hashing")
|
||||
|
||||
# Calculate hash
|
||||
sha256 = self.calculate_sha256(file_path)
|
||||
if not sha256:
|
||||
results[model_name] = {"sha256": None, "civitai": None, "error": "hash_failed"}
|
||||
continue
|
||||
|
||||
results[model_name] = {"sha256": sha256, "civitai": None}
|
||||
|
||||
# Check cache
|
||||
if sha256 in cache:
|
||||
results[model_name]["civitai"] = cache[sha256]
|
||||
if progress_callback:
|
||||
progress_callback(i, total, model_name, "cached")
|
||||
continue
|
||||
|
||||
# Fetch from API
|
||||
if progress_callback:
|
||||
progress_callback(i, total, model_name, "fetching")
|
||||
|
||||
info = self.fetch_by_hash(sha256)
|
||||
if info:
|
||||
results[model_name]["civitai"] = info
|
||||
|
||||
if progress_callback:
|
||||
status = "found" if info else "not_found"
|
||||
progress_callback(i, total, model_name, status)
|
||||
|
||||
# Rate limit: small delay between API calls
|
||||
time.sleep(0.5)
|
||||
|
||||
if progress_callback:
|
||||
progress_callback(total, total, "", "done")
|
||||
|
||||
return results
|
||||
|
||||
def clear_cache(self, sha256_hash=None):
|
||||
"""Clear cache for a specific hash or all."""
|
||||
cache = self._load_cache()
|
||||
if sha256_hash:
|
||||
cache.pop(sha256_hash, None)
|
||||
else:
|
||||
cache.clear()
|
||||
self._save_cache()
|
||||
@@ -0,0 +1,142 @@
|
||||
"""
|
||||
Gallery Metadata Store - ギャラリー画像のメタデータ永続化
|
||||
"""
|
||||
import json
|
||||
import logging
|
||||
from pathlib import Path
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
class GalleryMetadataStore:
|
||||
"""
|
||||
gallery_metadata.json の構造:
|
||||
{
|
||||
"images": {
|
||||
"<abs_path>": {
|
||||
"favorite": bool,
|
||||
"tags": [str, ...],
|
||||
"memo": str,
|
||||
"groups": [str, ...]
|
||||
}
|
||||
},
|
||||
"groups": [
|
||||
{"name": str}
|
||||
]
|
||||
}
|
||||
"""
|
||||
|
||||
def __init__(self, file_path: Path):
|
||||
self.file_path = file_path
|
||||
self._data: dict = {"images": {}, "groups": []}
|
||||
self._load()
|
||||
|
||||
def _load(self):
|
||||
if self.file_path.exists():
|
||||
try:
|
||||
with open(self.file_path, "r", encoding="utf-8") as f:
|
||||
loaded = json.load(f)
|
||||
self._data = {
|
||||
"images": loaded.get("images", {}),
|
||||
"groups": loaded.get("groups", []),
|
||||
}
|
||||
except Exception as e:
|
||||
logger.warning("GalleryMetadataStore: load error: %s", e)
|
||||
|
||||
def _save_to_disk(self):
|
||||
try:
|
||||
self.file_path.parent.mkdir(parents=True, exist_ok=True)
|
||||
with open(self.file_path, "w", encoding="utf-8") as f:
|
||||
json.dump(self._data, f, ensure_ascii=False, indent=2)
|
||||
return True
|
||||
except Exception as e:
|
||||
logger.error("GalleryMetadataStore: save error: %s", e)
|
||||
return False
|
||||
|
||||
def _normalize_path(self, image_path: str) -> str:
|
||||
return str(Path(image_path)).replace("\\", "/")
|
||||
|
||||
def get(self, image_path: str) -> dict:
|
||||
key = self._normalize_path(image_path)
|
||||
return dict(self._data["images"].get(key, {}))
|
||||
|
||||
def save(self, image_path: str, data: dict) -> bool:
|
||||
key = self._normalize_path(image_path)
|
||||
existing = self._data["images"].get(key, {})
|
||||
existing.update(data)
|
||||
allowed = {"favorite", "tags", "memo", "groups", "workflow"}
|
||||
existing = {k: v for k, v in existing.items() if k in allowed}
|
||||
self._data["images"][key] = existing
|
||||
return self._save_to_disk()
|
||||
|
||||
# ── グループ管理 ──────────────────────────────────────────────
|
||||
|
||||
def list_groups(self) -> list[dict]:
|
||||
return list(self._data.get("groups", []))
|
||||
|
||||
def create_group(self, name: str) -> bool:
|
||||
groups = self._data.get("groups", [])
|
||||
if any(g["name"] == name for g in groups):
|
||||
return False
|
||||
groups.append({"name": name})
|
||||
self._data["groups"] = groups
|
||||
return self._save_to_disk()
|
||||
|
||||
def rename_group(self, old_name: str, new_name: str) -> bool:
|
||||
"""グループ名を変更し、全画像のgroupsフィールドも更新する"""
|
||||
groups = self._data.get("groups", [])
|
||||
if not any(g["name"] == old_name for g in groups):
|
||||
return False
|
||||
if any(g["name"] == new_name for g in groups):
|
||||
return False # 新名前が既に存在
|
||||
# グループリスト更新
|
||||
for g in groups:
|
||||
if g["name"] == old_name:
|
||||
g["name"] = new_name
|
||||
break
|
||||
# 全画像のgroupsフィールドを更新
|
||||
for meta in self._data["images"].values():
|
||||
img_groups = meta.get("groups", [])
|
||||
if old_name in img_groups:
|
||||
meta["groups"] = [new_name if g == old_name else g for g in img_groups]
|
||||
return self._save_to_disk()
|
||||
|
||||
def delete_group(self, name: str) -> bool:
|
||||
groups = [g for g in self._data.get("groups", []) if g["name"] != name]
|
||||
self._data["groups"] = groups
|
||||
# 画像のgroupsからも削除
|
||||
for meta in self._data["images"].values():
|
||||
if name in meta.get("groups", []):
|
||||
meta["groups"] = [g for g in meta["groups"] if g != name]
|
||||
return self._save_to_disk()
|
||||
|
||||
def list_images_in_group(self, group_name: str) -> list[str]:
|
||||
result = []
|
||||
for key, meta in self._data["images"].items():
|
||||
if group_name in meta.get("groups", []):
|
||||
result.append(key)
|
||||
return result
|
||||
|
||||
def get_group_member_set(self, group_name: str) -> set:
|
||||
"""グループメンバーのパスをsetで返す（高速フィルタ用）"""
|
||||
return {
|
||||
key for key, meta in self._data["images"].items()
|
||||
if group_name in meta.get("groups", [])
|
||||
}
|
||||
|
||||
def delete(self, image_path: str) -> bool:
|
||||
"""画像のメタデータエントリを削除する"""
|
||||
key = self._normalize_path(image_path)
|
||||
if key in self._data["images"]:
|
||||
del self._data["images"][key]
|
||||
return self._save_to_disk()
|
||||
return True
|
||||
|
||||
def rename_path(self, old_path: str, new_path: str) -> bool:
|
||||
"""画像のパスキーを変更する（ファイル移動後のメタデータ引継ぎ）"""
|
||||
old_key = self._normalize_path(old_path)
|
||||
new_key = self._normalize_path(new_path)
|
||||
if old_key in self._data["images"]:
|
||||
self._data["images"][new_key] = self._data["images"].pop(old_key)
|
||||
return self._save_to_disk()
|
||||
return True
|
||||
@@ -0,0 +1,542 @@
|
||||
"""
|
||||
Gallery Service - outputフォルダの画像管理、メタデータ閲覧
|
||||
"""
|
||||
import json
|
||||
import logging
|
||||
import mimetypes
|
||||
import os
|
||||
import re
|
||||
import struct
|
||||
import time
|
||||
from pathlib import Path
|
||||
from typing import Any
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
# サポートする画像拡張子
|
||||
IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".webp", ".gif"}
|
||||
|
||||
# メタデータ保存ファイル (gallery専用)
|
||||
from .gallery_metadata import GalleryMetadataStore
|
||||
|
||||
|
||||
# PNGチャンク1個の最大許容サイズ (32MB)
|
||||
_PNG_CHUNK_MAX = 32 * 1024 * 1024
|
||||
# JPEGを読む際の最大ファイルサイズ (64MB)
|
||||
_JPEG_READ_MAX = 64 * 1024 * 1024
|
||||
|
||||
# フォルダキャッシュのTTL秒（フォルダmtimeが同じでも念のため）
|
||||
_CACHE_TTL = 30.0
|
||||
|
||||
|
||||
class _FolderCache:
|
||||
"""フォルダ単位の画像スキャン結果キャッシュ。
|
||||
フォルダのmtimeが変わった場合、またはTTL超過時に再スキャンする。"""
|
||||
|
||||
def __init__(self):
|
||||
# folder_path -> (mtime, scan_time, [(name, path_str, size, mtime_f), ...])
|
||||
self._cache: dict[str, tuple[float, float, list]] = {}
|
||||
|
||||
def get(self, folder: Path) -> list | None:
|
||||
key = str(folder)
|
||||
if key not in self._cache:
|
||||
return None
|
||||
cached_mtime, scan_time, entries = self._cache[key]
|
||||
# TTL チェック
|
||||
if time.monotonic() - scan_time > _CACHE_TTL:
|
||||
return None
|
||||
# フォルダ自体のmtimeチェック
|
||||
try:
|
||||
current_mtime = folder.stat().st_mtime
|
||||
except OSError:
|
||||
return None
|
||||
if current_mtime != cached_mtime:
|
||||
return None
|
||||
return entries
|
||||
|
||||
def set(self, folder: Path, entries: list):
|
||||
key = str(folder)
|
||||
try:
|
||||
folder_mtime = folder.stat().st_mtime
|
||||
except OSError:
|
||||
folder_mtime = 0.0
|
||||
self._cache[key] = (folder_mtime, time.monotonic(), entries)
|
||||
|
||||
def invalidate(self, folder: Path):
|
||||
self._cache.pop(str(folder), None)
|
||||
|
||||
|
||||
class GalleryService:
|
||||
def __init__(self, data_dir: Path):
|
||||
self.data_dir = data_dir
|
||||
self.metadata_store = GalleryMetadataStore(data_dir / "gallery_metadata.json")
|
||||
self._allowed_root: Path | None = None
|
||||
self._folder_cache = _FolderCache()
|
||||
|
||||
def update_output_root(self, root_path: str) -> None:
|
||||
"""許可するルートパスを更新する（Settings変更時に呼ぶ）"""
|
||||
p = Path(root_path).resolve() if root_path else None
|
||||
self._allowed_root = p
|
||||
|
||||
def _check_path_allowed(self, path: Path) -> bool:
|
||||
"""パスが許可ルート配下かチェック（パストラバーサル防止）"""
|
||||
if self._allowed_root is None:
|
||||
resolved = path.resolve()
|
||||
return resolved == path.resolve()
|
||||
try:
|
||||
path.resolve().relative_to(self._allowed_root)
|
||||
return True
|
||||
except ValueError:
|
||||
return False
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# フォルダツリー
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
def list_folder_tree(self, root_path: str) -> dict:
|
||||
"""outputフォルダのフォルダツリーを返す"""
|
||||
root = Path(root_path).resolve()
|
||||
if not root.is_dir():
|
||||
return {"error": f"Directory not found: {root_path}"}
|
||||
if self._allowed_root is None:
|
||||
self._allowed_root = root
|
||||
|
||||
def build_tree(path: Path, rel_base: Path) -> dict:
|
||||
rel = str(path.relative_to(rel_base)).replace("\\", "/")
|
||||
image_count = 0
|
||||
children = []
|
||||
try:
|
||||
with os.scandir(path) as it:
|
||||
for entry in it:
|
||||
if entry.is_file(follow_symlinks=True):
|
||||
if Path(entry.name).suffix.lower() in IMAGE_EXTENSIONS:
|
||||
image_count += 1
|
||||
elif entry.is_dir(follow_symlinks=True) and not entry.name.startswith("."):
|
||||
children.append(entry.name)
|
||||
except PermissionError:
|
||||
pass
|
||||
children_nodes = [build_tree(path / name, rel_base) for name in sorted(children)]
|
||||
return {
|
||||
"name": path.name,
|
||||
"path": rel if rel != "." else "",
|
||||
"abs_path": str(path).replace("\\", "/"),
|
||||
"image_count": image_count,
|
||||
"children": children_nodes,
|
||||
}
|
||||
|
||||
return build_tree(root, root)
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# 画像一覧
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
def _scan_folder(self, folder: Path) -> list[tuple[str, str, int, float]]:
|
||||
"""os.scandir() で画像ファイルを1回のシステムコールで列挙。
|
||||
キャッシュがあればそれを返す。
|
||||
Returns: [(name, abs_path_str, size, mtime), ...]
|
||||
"""
|
||||
cached = self._folder_cache.get(folder)
|
||||
if cached is not None:
|
||||
return cached
|
||||
|
||||
entries = []
|
||||
try:
|
||||
with os.scandir(folder) as it:
|
||||
for entry in it:
|
||||
if not entry.is_file(follow_symlinks=True):
|
||||
continue
|
||||
if Path(entry.name).suffix.lower() not in IMAGE_EXTENSIONS:
|
||||
continue
|
||||
try:
|
||||
st = entry.stat(follow_symlinks=True)
|
||||
entries.append((
|
||||
entry.name,
|
||||
str(Path(entry.path).resolve()).replace("\\", "/"),
|
||||
st.st_size,
|
||||
st.st_mtime,
|
||||
))
|
||||
except OSError:
|
||||
continue
|
||||
except PermissionError:
|
||||
pass
|
||||
|
||||
self._folder_cache.set(folder, entries)
|
||||
return entries
|
||||
|
||||
def list_images(
|
||||
self,
|
||||
folder_path: str,
|
||||
search: str = "",
|
||||
sort_by: str = "date_desc",
|
||||
favorite_only: bool = False,
|
||||
tag_filter: str = "",
|
||||
group_filter: str = "",
|
||||
) -> list[dict]:
|
||||
"""指定フォルダ内の画像一覧を返す（サブフォルダなし）"""
|
||||
folder = Path(folder_path).resolve()
|
||||
if not folder.is_dir():
|
||||
return []
|
||||
if not self._check_path_allowed(folder):
|
||||
logger.warning("list_images: path not allowed: %s", folder)
|
||||
return []
|
||||
|
||||
# グループフィルタ: サーバーサイドで先にパスSetを取得（転送量削減）
|
||||
group_member_set: set | None = None
|
||||
if group_filter:
|
||||
group_member_set = self.metadata_store.get_group_member_set(group_filter)
|
||||
|
||||
# os.scandir() でファイル情報を一括取得（stat()の個別呼び出しを排除）
|
||||
raw_entries = self._scan_folder(folder)
|
||||
|
||||
results = []
|
||||
for name, abs_path, size, mtime in raw_entries:
|
||||
# グループフィルタ（サーバーサイド）
|
||||
if group_member_set is not None and abs_path not in group_member_set:
|
||||
continue
|
||||
|
||||
meta = self.metadata_store.get(abs_path)
|
||||
|
||||
# お気に入りフィルタ（サーバーサイド、早期スキップ）
|
||||
if favorite_only and not meta.get("favorite", False):
|
||||
continue
|
||||
|
||||
# タグフィルタ（サーバーサイド、早期スキップ）
|
||||
tags = meta.get("tags", [])
|
||||
if tag_filter and tag_filter not in tags:
|
||||
continue
|
||||
|
||||
ext = Path(name).suffix.lower()
|
||||
item = {
|
||||
"filename": name,
|
||||
"path": abs_path,
|
||||
"size": size,
|
||||
"mtime": mtime,
|
||||
"ext": ext,
|
||||
"favorite": meta.get("favorite", False),
|
||||
"tags": tags,
|
||||
"memo": meta.get("memo", ""),
|
||||
"groups": meta.get("groups", []),
|
||||
}
|
||||
|
||||
# 検索フィルタ
|
||||
if search:
|
||||
s = search.lower()
|
||||
if not (
|
||||
s in name.lower()
|
||||
or s in item["memo"].lower()
|
||||
or any(s in t.lower() for t in tags)
|
||||
):
|
||||
continue
|
||||
|
||||
results.append(item)
|
||||
|
||||
# ソート
|
||||
if sort_by == "name_asc":
|
||||
results.sort(key=lambda x: x["filename"].lower())
|
||||
elif sort_by == "name_desc":
|
||||
results.sort(key=lambda x: x["filename"].lower(), reverse=True)
|
||||
elif sort_by == "date_asc":
|
||||
results.sort(key=lambda x: x["mtime"])
|
||||
else: # date_desc (default)
|
||||
results.sort(key=lambda x: x["mtime"], reverse=True)
|
||||
|
||||
return results
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# 画像メタデータ
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
def get_image_metadata(self, image_path: str) -> dict:
|
||||
"""PNG/JPEGからメタデータを抽出し、保存済みメタと合わせて返す"""
|
||||
path = Path(image_path).resolve()
|
||||
if not path.is_file():
|
||||
return {"error": "File not found"}
|
||||
if not self._check_path_allowed(path):
|
||||
return {"error": "Access denied"}
|
||||
|
||||
embedded = {}
|
||||
ext = path.suffix.lower()
|
||||
if ext == ".png":
|
||||
embedded = self._read_png_metadata(path)
|
||||
elif ext in {".jpg", ".jpeg"}:
|
||||
embedded = self._read_jpeg_metadata(path)
|
||||
|
||||
saved = self.metadata_store.get(str(path))
|
||||
|
||||
stat = path.stat()
|
||||
return {
|
||||
"filename": path.name,
|
||||
"path": str(path).replace("\\", "/"),
|
||||
"size": stat.st_size,
|
||||
"mtime": stat.st_mtime,
|
||||
"ext": ext,
|
||||
"embedded": embedded,
|
||||
"favorite": saved.get("favorite", False),
|
||||
"tags": saved.get("tags", []),
|
||||
"memo": saved.get("memo", ""),
|
||||
"groups": saved.get("groups", []),
|
||||
}
|
||||
|
||||
def _read_png_metadata(self, path: Path) -> dict:
|
||||
"""PNGのtEXtチャンクからメタデータを抽出"""
|
||||
result = {}
|
||||
try:
|
||||
with open(path, "rb") as f:
|
||||
sig = f.read(8)
|
||||
if sig != b"\x89PNG\r\n\x1a\n":
|
||||
return result
|
||||
while True:
|
||||
chunk_len_bytes = f.read(4)
|
||||
if len(chunk_len_bytes) < 4:
|
||||
break
|
||||
chunk_len = struct.unpack(">I", chunk_len_bytes)[0]
|
||||
chunk_type = f.read(4).decode("ascii", errors="ignore")
|
||||
if chunk_len > _PNG_CHUNK_MAX:
|
||||
f.seek(chunk_len + 4, 1)
|
||||
if chunk_type == "IEND":
|
||||
break
|
||||
continue
|
||||
chunk_data = f.read(chunk_len)
|
||||
f.read(4) # CRC
|
||||
|
||||
if chunk_type in ("tEXt", "iTXt"):
|
||||
try:
|
||||
if chunk_type == "tEXt":
|
||||
null_idx = chunk_data.index(b"\x00")
|
||||
key = chunk_data[:null_idx].decode("latin-1")
|
||||
value = chunk_data[null_idx + 1:].decode("latin-1")
|
||||
else:
|
||||
null_idx = chunk_data.index(b"\x00")
|
||||
key = chunk_data[:null_idx].decode("utf-8")
|
||||
rest = chunk_data[null_idx + 1:]
|
||||
rest = rest[2:]
|
||||
null_idx2 = rest.index(b"\x00")
|
||||
rest = rest[null_idx2 + 1:]
|
||||
null_idx3 = rest.index(b"\x00")
|
||||
value = rest[null_idx3 + 1:].decode("utf-8", errors="replace")
|
||||
result[key] = value
|
||||
except (ValueError, UnicodeDecodeError):
|
||||
pass
|
||||
|
||||
if chunk_type == "IEND":
|
||||
break
|
||||
except Exception as e:
|
||||
logger.debug("PNG metadata read error: %s", e)
|
||||
return result
|
||||
|
||||
def _read_jpeg_metadata(self, path: Path) -> dict:
|
||||
"""JPEGのEXIF/commentからメタデータを抽出（簡易）"""
|
||||
result = {}
|
||||
try:
|
||||
file_size = path.stat().st_size
|
||||
read_size = min(file_size, _JPEG_READ_MAX)
|
||||
with open(path, "rb") as f:
|
||||
data = f.read(read_size)
|
||||
idx = 0
|
||||
while idx < len(data) - 3:
|
||||
if data[idx] == 0xFF:
|
||||
marker = data[idx + 1]
|
||||
if marker == 0xFE: # COM
|
||||
length = struct.unpack(">H", data[idx + 2:idx + 4])[0]
|
||||
end = idx + 2 + length
|
||||
comment = data[idx + 4:end].decode("utf-8", errors="replace")
|
||||
result["Comment"] = comment
|
||||
break
|
||||
idx += 2
|
||||
else:
|
||||
idx += 1
|
||||
except Exception as e:
|
||||
logger.debug("JPEG metadata read error: %s", e)
|
||||
return result
|
||||
|
||||
def extract_workflow_from_metadata(self, image_path: str) -> dict | None:
|
||||
"""ワークフローを抽出する。
|
||||
優先順位: PNG[workflow] > PNG[prompt] > gallery_metadata.json[workflow]
|
||||
"""
|
||||
path = Path(image_path).resolve()
|
||||
if not self._check_path_allowed(path):
|
||||
return None
|
||||
|
||||
if path.suffix.lower() == ".png":
|
||||
embedded = self._read_png_metadata(path)
|
||||
# 1. workflow キー (ComfyUI UI形式)
|
||||
for key in ("workflow", "Workflow"):
|
||||
s = embedded.get(key)
|
||||
if s:
|
||||
try:
|
||||
return json.loads(s)
|
||||
except json.JSONDecodeError:
|
||||
pass
|
||||
# 2. prompt キー (ComfyUI API形式 — 大多数の生成画像)
|
||||
for key in ("prompt", "Prompt"):
|
||||
s = embedded.get(key)
|
||||
if s:
|
||||
try:
|
||||
return json.loads(s)
|
||||
except json.JSONDecodeError:
|
||||
pass
|
||||
|
||||
# 3. gallery_metadata.json に保存されたworkflow
|
||||
saved = self.metadata_store.get(str(path))
|
||||
return saved.get("workflow") or None
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# メタデータ保存
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
def save_image_meta(self, image_path: str, data: dict) -> bool:
|
||||
return self.metadata_store.save(image_path, data)
|
||||
|
||||
def toggle_favorite(self, image_path: str) -> bool:
|
||||
meta = self.metadata_store.get(image_path)
|
||||
new_val = not meta.get("favorite", False)
|
||||
self.metadata_store.save(image_path, {"favorite": new_val})
|
||||
return new_val
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# グループ管理
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
def list_groups(self) -> list[dict]:
|
||||
return self.metadata_store.list_groups()
|
||||
|
||||
def create_group(self, name: str) -> bool:
|
||||
return self.metadata_store.create_group(name)
|
||||
|
||||
def rename_group(self, old_name: str, new_name: str) -> bool:
|
||||
return self.metadata_store.rename_group(old_name, new_name)
|
||||
|
||||
def delete_group(self, name: str) -> bool:
|
||||
return self.metadata_store.delete_group(name)
|
||||
|
||||
def add_to_group(self, image_path: str, group_name: str) -> bool:
|
||||
meta = self.metadata_store.get(image_path)
|
||||
groups = meta.get("groups", [])
|
||||
if group_name not in groups:
|
||||
groups.append(group_name)
|
||||
return self.metadata_store.save(image_path, {"groups": groups})
|
||||
return True
|
||||
|
||||
def remove_from_group(self, image_path: str, group_name: str) -> bool:
|
||||
meta = self.metadata_store.get(image_path)
|
||||
groups = [g for g in meta.get("groups", []) if g != group_name]
|
||||
return self.metadata_store.save(image_path, {"groups": groups})
|
||||
|
||||
def list_images_in_group(self, group_name: str) -> list[str]:
|
||||
return self.metadata_store.list_images_in_group(group_name)
|
||||
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
# 画像配信
|
||||
# ──────────────────────────────────────────────────────────────
|
||||
|
||||
def create_folder(self, parent_path: str, name: str) -> dict:
|
||||
"""選択フォルダ内に新しいサブフォルダを作成する"""
|
||||
parent = Path(parent_path).resolve()
|
||||
if not parent.is_dir():
|
||||
return {"ok": False, "error": "Parent directory not found"}
|
||||
if not self._check_path_allowed(parent):
|
||||
return {"ok": False, "error": "Access denied"}
|
||||
name = name.strip()
|
||||
invalid_chars = set(r'\/:*?"<>|')
|
||||
if not name or any(c in invalid_chars for c in name):
|
||||
return {"ok": False, "error": "Invalid folder name"}
|
||||
new_folder = parent / name
|
||||
if new_folder.exists():
|
||||
return {"ok": False, "error": "Folder already exists"}
|
||||
try:
|
||||
new_folder.mkdir()
|
||||
self._folder_cache.invalidate(parent)
|
||||
return {"ok": True, "path": str(new_folder).replace("\\", "/")}
|
||||
except Exception as e:
|
||||
return {"ok": False, "error": str(e)}
|
||||
|
||||
def delete_folder(self, folder_path: str) -> dict:
|
||||
"""フォルダを再帰的に削除する"""
|
||||
import shutil
|
||||
folder = Path(folder_path).resolve()
|
||||
if not folder.is_dir():
|
||||
return {"ok": False, "error": "Directory not found"}
|
||||
if not self._check_path_allowed(folder):
|
||||
return {"ok": False, "error": "Access denied"}
|
||||
if self._allowed_root and folder == self._allowed_root:
|
||||
return {"ok": False, "error": "Cannot delete root folder"}
|
||||
try:
|
||||
parent = folder.parent
|
||||
shutil.rmtree(folder)
|
||||
self._folder_cache.invalidate(parent)
|
||||
return {"ok": True}
|
||||
except Exception as e:
|
||||
return {"ok": False, "error": str(e)}
|
||||
|
||||
def delete_images(self, paths: list) -> dict:
|
||||
"""画像ファイルを削除する（複数対応）"""
|
||||
deleted = []
|
||||
errors = []
|
||||
for img_path in paths:
|
||||
p = Path(img_path).resolve()
|
||||
if not p.is_file():
|
||||
errors.append(f"{Path(img_path).name}: not found")
|
||||
continue
|
||||
if p.suffix.lower() not in IMAGE_EXTENSIONS:
|
||||
errors.append(f"{p.name}: not an image")
|
||||
continue
|
||||
if not self._check_path_allowed(p):
|
||||
errors.append(f"{p.name}: access denied")
|
||||
continue
|
||||
try:
|
||||
p.unlink()
|
||||
self.metadata_store.delete(str(p))
|
||||
self._folder_cache.invalidate(p.parent)
|
||||
deleted.append(str(p).replace("\\", "/"))
|
||||
except Exception as e:
|
||||
errors.append(f"{p.name}: {e}")
|
||||
return {"deleted": deleted, "errors": errors}
|
||||
|
||||
def move_images(self, paths: list, dest_folder: str) -> dict:
|
||||
"""画像ファイルを別フォルダへ移動する（複数対応）"""
|
||||
dest = Path(dest_folder).resolve()
|
||||
if not dest.is_dir():
|
||||
return {"ok": False, "error": "Destination folder not found", "moved": [], "errors": []}
|
||||
if not self._check_path_allowed(dest):
|
||||
return {"ok": False, "error": "Access denied", "moved": [], "errors": []}
|
||||
moved = []
|
||||
errors = []
|
||||
for img_path in paths:
|
||||
p = Path(img_path).resolve()
|
||||
if not p.is_file():
|
||||
errors.append(f"{Path(img_path).name}: not found")
|
||||
continue
|
||||
if p.suffix.lower() not in IMAGE_EXTENSIONS:
|
||||
errors.append(f"{p.name}: not an image")
|
||||
continue
|
||||
if not self._check_path_allowed(p):
|
||||
errors.append(f"{p.name}: access denied")
|
||||
continue
|
||||
dest_path = dest / p.name
|
||||
counter = 1
|
||||
while dest_path.exists():
|
||||
dest_path = dest / f"{p.stem}_{counter}{p.suffix}"
|
||||
counter += 1
|
||||
try:
|
||||
p.rename(dest_path)
|
||||
old_str = str(p).replace("\\", "/")
|
||||
new_str = str(dest_path).replace("\\", "/")
|
||||
self.metadata_store.rename_path(old_str, new_str)
|
||||
self._folder_cache.invalidate(p.parent)
|
||||
self._folder_cache.invalidate(dest)
|
||||
moved.append({"from": old_str, "to": new_str, "filename": dest_path.name})
|
||||
except Exception as e:
|
||||
errors.append(f"{p.name}: {e}")
|
||||
return {"moved": moved, "errors": errors}
|
||||
|
||||
def serve_image(self, image_path: str):
|
||||
"""画像のPathオブジェクトを返す（ルートで使用）"""
|
||||
p = Path(image_path).resolve()
|
||||
if not p.is_file():
|
||||
return None
|
||||
if p.suffix.lower() not in IMAGE_EXTENSIONS:
|
||||
return None
|
||||
if not self._check_path_allowed(p):
|
||||
logger.warning("serve_image: path not allowed: %s", p)
|
||||
return None
|
||||
return p
|
||||
@@ -0,0 +1,276 @@
|
||||
"""Model metadata management service."""
|
||||
|
||||
import json
|
||||
import logging
|
||||
from datetime import datetime, timezone
|
||||
from pathlib import Path
|
||||
|
||||
from ..config import MODEL_METADATA_FILE
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
# Preview image extensions to search for (in priority order)
|
||||
_PREVIEW_EXTENSIONS = [".preview.png", ".preview.jpg", ".preview.jpeg", ".preview.webp",
|
||||
".png", ".jpg", ".jpeg", ".webp"]
|
||||
|
||||
# All sidecar extensions to delete when a model is deleted
|
||||
_SIDECAR_EXTENSIONS = [
|
||||
".preview.png", ".preview.jpg", ".preview.jpeg", ".preview.webp",
|
||||
".png", ".jpg", ".jpeg", ".webp",
|
||||
".json", ".civitai.info", ".info",
|
||||
]
|
||||
|
||||
_DISABLED_SUFFIX = ".disabled"
|
||||
|
||||
# ComfyUI model type → folder_paths key mapping
|
||||
MODEL_TYPE_FOLDER_KEYS = {
|
||||
"checkpoint": "checkpoints",
|
||||
"lora": "loras",
|
||||
"vae": "vae",
|
||||
"controlnet": "controlnet",
|
||||
"unet": "diffusion_models",
|
||||
"textencoder": "text_encoders",
|
||||
"hypernetwork": "hypernetworks",
|
||||
"embedding": "embeddings",
|
||||
}
|
||||
|
||||
|
||||
def _get_model_dirs(model_type):
|
||||
"""Get all model directories for a type using ComfyUI's folder_paths.
|
||||
|
||||
Returns a list of Path objects for all configured model directories
|
||||
(includes extra_model_paths.yaml settings).
|
||||
Falls back to plugin-relative path if folder_paths is unavailable.
|
||||
"""
|
||||
folder_key = MODEL_TYPE_FOLDER_KEYS.get(model_type)
|
||||
if not folder_key:
|
||||
return []
|
||||
|
||||
try:
|
||||
import folder_paths # type: ignore # ComfyUI module
|
||||
paths = folder_paths.get_folder_paths(folder_key)
|
||||
result = [Path(p) for p in paths if Path(p).is_dir()]
|
||||
if result:
|
||||
return result
|
||||
except Exception as e:
|
||||
logger.debug("folder_paths unavailable (%s), using fallback", e)
|
||||
|
||||
# Fallback: custom_nodes/../../models/{folder_key}
|
||||
plugin_dir = Path(__file__).resolve().parent.parent.parent
|
||||
models_dir = plugin_dir.parent.parent / "models" / folder_key
|
||||
if models_dir.is_dir():
|
||||
return [models_dir]
|
||||
return []
|
||||
|
||||
|
||||
class ModelsService:
|
||||
"""Manages user-defined model metadata (favorites, tags, memo)."""
|
||||
|
||||
def __init__(self):
|
||||
self.metadata_file = MODEL_METADATA_FILE
|
||||
|
||||
def _now_iso(self):
|
||||
return datetime.now(timezone.utc).isoformat().replace("+00:00", "Z")
|
||||
|
||||
def _load_metadata(self):
|
||||
if self.metadata_file.exists():
|
||||
try:
|
||||
with open(self.metadata_file, "r", encoding="utf-8") as f:
|
||||
return json.load(f)
|
||||
except Exception:
|
||||
pass
|
||||
return {}
|
||||
|
||||
def _save_metadata(self, data):
|
||||
self.metadata_file.parent.mkdir(parents=True, exist_ok=True)
|
||||
with open(self.metadata_file, "w", encoding="utf-8") as f:
|
||||
json.dump(data, f, ensure_ascii=False, indent=2)
|
||||
|
||||
def get_all_metadata(self):
|
||||
return self._load_metadata()
|
||||
|
||||
def update_metadata(self, model_name, updates):
|
||||
data = self._load_metadata()
|
||||
if model_name not in data:
|
||||
data[model_name] = {"tags": [], "favorite": False, "memo": ""}
|
||||
entry = data[model_name]
|
||||
if "tags" in updates:
|
||||
entry["tags"] = updates["tags"]
|
||||
if "favorite" in updates:
|
||||
entry["favorite"] = updates["favorite"]
|
||||
if "memo" in updates:
|
||||
entry["memo"] = updates["memo"]
|
||||
if "sha256" in updates:
|
||||
entry["sha256"] = updates["sha256"]
|
||||
if "badges" in updates:
|
||||
entry["badges"] = updates["badges"]
|
||||
entry["updatedAt"] = self._now_iso()
|
||||
data[model_name] = entry
|
||||
self._save_metadata(data)
|
||||
return entry
|
||||
|
||||
def get_model_groups(self, model_type=None):
|
||||
data = self._load_metadata()
|
||||
raw = data.get("_groups", {})
|
||||
|
||||
# Migrate old flat format { "groupName": [...] } → per-type { "checkpoint": {...} }
|
||||
if raw and not any(k in MODEL_TYPE_FOLDER_KEYS for k in raw):
|
||||
logger.info("Migrating groups to per-type format (old data moved to _groups_legacy)")
|
||||
data["_groups_legacy"] = raw
|
||||
data["_groups"] = {}
|
||||
self._save_metadata(data)
|
||||
raw = {}
|
||||
|
||||
if model_type:
|
||||
return raw.get(model_type, {})
|
||||
return raw
|
||||
|
||||
def save_model_groups(self, groups, model_type):
|
||||
data = self._load_metadata()
|
||||
if not isinstance(data.get("_groups"), dict):
|
||||
data["_groups"] = {}
|
||||
data["_groups"][model_type] = groups
|
||||
self._save_metadata(data)
|
||||
return groups
|
||||
|
||||
def find_model_file(self, model_type, model_name):
|
||||
"""Find a model file, checking both enabled and disabled states.
|
||||
|
||||
Returns (Path, is_enabled) or (None, None) if not found.
|
||||
"""
|
||||
dirs = _get_model_dirs(model_type)
|
||||
for d in dirs:
|
||||
enabled = d / model_name
|
||||
if enabled.is_file():
|
||||
return enabled, True
|
||||
disabled = d / (model_name + _DISABLED_SUFFIX)
|
||||
if disabled.is_file():
|
||||
return disabled, False
|
||||
return None, None
|
||||
|
||||
def enable_model(self, model_type, model_name):
|
||||
"""Rename model.safetensors.disabled → model.safetensors."""
|
||||
path, is_enabled = self.find_model_file(model_type, model_name)
|
||||
if path is None:
|
||||
raise FileNotFoundError(f"Model not found: {model_name}")
|
||||
if is_enabled:
|
||||
return
|
||||
target = path.parent / path.name[: -len(_DISABLED_SUFFIX)]
|
||||
path.rename(target)
|
||||
logger.info("Enabled model: %s", model_name)
|
||||
|
||||
def disable_model(self, model_type, model_name):
|
||||
"""Rename model.safetensors → model.safetensors.disabled."""
|
||||
path, is_enabled = self.find_model_file(model_type, model_name)
|
||||
if path is None:
|
||||
raise FileNotFoundError(f"Model not found: {model_name}")
|
||||
if not is_enabled:
|
||||
return
|
||||
target = path.parent / (path.name + _DISABLED_SUFFIX)
|
||||
path.rename(target)
|
||||
logger.info("Disabled model: %s", model_name)
|
||||
|
||||
def scan_disabled_models(self, model_type):
|
||||
"""Scan directories for .disabled files.
|
||||
|
||||
Returns list of normalized model names (without .disabled suffix).
|
||||
"""
|
||||
dirs = _get_model_dirs(model_type)
|
||||
disabled = []
|
||||
for d in dirs:
|
||||
if not d.is_dir():
|
||||
continue
|
||||
for f in d.rglob("*"):
|
||||
if f.is_file() and f.name.endswith(_DISABLED_SUFFIX):
|
||||
try:
|
||||
rel = str(f.relative_to(d))
|
||||
if rel.endswith(_DISABLED_SUFFIX):
|
||||
rel = rel[: -len(_DISABLED_SUFFIX)]
|
||||
disabled.append(rel.replace("\\", "/"))
|
||||
except ValueError:
|
||||
pass
|
||||
return disabled
|
||||
|
||||
def find_preview_image(self, model_type, model_name):
|
||||
"""Find preview image for a model file.
|
||||
|
||||
Searches all configured directories for the model type
|
||||
(via ComfyUI's folder_paths, which includes extra_model_paths.yaml).
|
||||
|
||||
Looks for files like:
|
||||
modelname.preview.png, modelname.png, etc.
|
||||
next to the model file.
|
||||
|
||||
Returns: absolute Path to preview image, or None.
|
||||
"""
|
||||
dirs = _get_model_dirs(model_type)
|
||||
if not dirs:
|
||||
logger.debug("Preview: no dirs for model_type=%s", model_type)
|
||||
return None
|
||||
|
||||
for type_dir in dirs:
|
||||
# model_name can include subdirectory (e.g., "subdir/model.safetensors")
|
||||
model_path = type_dir / model_name
|
||||
if not model_path.is_file():
|
||||
continue
|
||||
|
||||
stem = model_path.stem
|
||||
parent = model_path.parent
|
||||
|
||||
for ext in _PREVIEW_EXTENSIONS:
|
||||
preview = parent / (stem + ext)
|
||||
if preview.is_file():
|
||||
logger.debug("Preview found: %s", preview)
|
||||
return preview
|
||||
|
||||
logger.debug("Preview: no preview for %s (stem=%s, dir=%s)",
|
||||
model_name, stem, parent)
|
||||
return None
|
||||
|
||||
logger.debug("Preview: model file not found in any dir: %s", model_name)
|
||||
return None
|
||||
|
||||
def delete_model(self, model_type, model_name):
|
||||
"""Delete a model file and all associated preview/sidecar files.
|
||||
|
||||
Also removes the model's metadata entry.
|
||||
Returns dict with deleted file paths.
|
||||
"""
|
||||
if ".." in model_name:
|
||||
raise ValueError(f"Invalid model name: {model_name}")
|
||||
|
||||
path, _ = self.find_model_file(model_type, model_name)
|
||||
if path is None:
|
||||
raise FileNotFoundError(f"Model not found: {model_name}")
|
||||
|
||||
deleted = []
|
||||
parent = path.parent
|
||||
|
||||
# Compute stem from the original (non-disabled) filename.
|
||||
# path.name for a disabled file is e.g. "model.safetensors.disabled"
|
||||
# so we strip the .disabled suffix first, then take Path.stem.
|
||||
orig_name = path.name
|
||||
if orig_name.endswith(_DISABLED_SUFFIX):
|
||||
orig_name = orig_name[: -len(_DISABLED_SUFFIX)]
|
||||
stem = Path(orig_name).stem # "model.safetensors" -> "model"
|
||||
|
||||
# Delete the model file itself
|
||||
path.unlink()
|
||||
deleted.append(str(path))
|
||||
logger.info("Deleted model file: %s", path)
|
||||
|
||||
# Delete all sidecar files (previews, metadata, info)
|
||||
for ext in _SIDECAR_EXTENSIONS:
|
||||
sidecar = parent / (stem + ext)
|
||||
if sidecar.is_file():
|
||||
sidecar.unlink()
|
||||
deleted.append(str(sidecar))
|
||||
logger.info("Deleted sidecar: %s", sidecar)
|
||||
|
||||
# Remove metadata entry
|
||||
data = self._load_metadata()
|
||||
if model_name in data:
|
||||
del data[model_name]
|
||||
self._save_metadata(data)
|
||||
|
||||
return {"deleted": deleted}
|
||||
@@ -112,6 +112,7 @@ class WorkflowService:
|
||||
"summary": meta.get("summary", ""),
|
||||
"modelTypesOverride": override_types,
|
||||
"favorite": bool(meta.get("favorite", False)),
|
||||
"badges": meta.get("badges", []),
|
||||
},
|
||||
"mtime": stat.st_mtime,
|
||||
"thumbnail": thumbnail,
|
||||
@@ -132,7 +133,7 @@ class WorkflowService:
|
||||
"""Save metadata (tags, memo, summary, etc.) for a workflow."""
|
||||
metadata = self._load_metadata()
|
||||
entry = metadata.get(filename, {})
|
||||
for key in ("tags", "memo", "summary", "modelTypesOverride", "favorite"):
|
||||
for key in ("tags", "memo", "summary", "modelTypesOverride", "favorite", "badges"):
|
||||
if key in updates:
|
||||
entry[key] = updates[key]
|
||||
entry["updatedAt"] = self._now_iso()
|
||||
|
||||
@@ -61,7 +61,7 @@ class WorkflowStudio:
|
||||
app.router.add_get("/wfm", serve_index_page)
|
||||
|
||||
# API routes
|
||||
from .routes import workflow_routes, settings_routes, ollama_routes, eagle_routes, nodes_routes, prompts_routes
|
||||
from .routes import workflow_routes, settings_routes, ollama_routes, eagle_routes, nodes_routes, prompts_routes, models_routes, gallery_routes
|
||||
|
||||
workflow_routes.setup_routes(app)
|
||||
settings_routes.setup_routes(app)
|
||||
@@ -69,5 +69,7 @@ class WorkflowStudio:
|
||||
eagle_routes.setup_routes(app)
|
||||
nodes_routes.setup_routes(app)
|
||||
prompts_routes.setup_routes(app)
|
||||
models_routes.setup_routes(app)
|
||||
gallery_routes.setup_routes(app)
|
||||
|
||||
logger.info("Workflow Studio: Routes registered successfully")
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
[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"
|
||||
license = "MIT"
|
||||
requires-python = ">= 3.10"
|
||||
dependencies = ["jinja2"]
|
||||
|
||||
[project.urls]
|
||||
Repository = "https://github.com/ketle-man/ComfyUI-Workflow-Studio"
|
||||
|
||||
[tool.comfy]
|
||||
PublisherId = "ketle-man"
|
||||
DisplayName = "Workflow Studio"
|
||||
Icon = "https://raw.githubusercontent.com/ketle-man/ComfyUI-Workflow-Studio/main/assets/icon.svg"
|
||||
Banner = "https://raw.githubusercontent.com/ketle-man/ComfyUI-Workflow-Studio/main/assets/banner.svg"
|
||||
@@ -0,0 +1,649 @@
|
||||
/* ============================================================
|
||||
Gallery Tab Styles
|
||||
============================================================ */
|
||||
|
||||
/* ── 3カラムレイアウト ──────────────────────────────────────── */
|
||||
|
||||
.wfm-gallery-layout {
|
||||
display: flex;
|
||||
height: calc(100vh - var(--wfm-header-height, 96px));
|
||||
overflow: hidden;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ── 左: フォルダツリーパネル ──────────────────────────────── */
|
||||
|
||||
.wfm-gallery-tree-panel {
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
max-width: 250px;
|
||||
border-right: 1px solid var(--wfm-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--wfm-bg-secondary, #1a1a2e);
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
flex-shrink: 0;
|
||||
background: var(--wfm-bg-primary, #16213e);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.wfm-gallery-tree {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--wfm-text-primary);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-item:hover {
|
||||
background: var(--wfm-bg-hover, rgba(255,255,255,0.06));
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-item.selected {
|
||||
background: var(--wfm-accent, #4f8ef7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-item.selected .wfm-gallery-tree-count {
|
||||
background: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-arrow {
|
||||
font-size: 10px;
|
||||
width: 14px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
color: var(--wfm-text-secondary);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-count {
|
||||
font-size: 10px;
|
||||
background: var(--wfm-accent-muted, rgba(79,142,247,0.2));
|
||||
color: var(--wfm-accent, #4f8ef7);
|
||||
border-radius: 8px;
|
||||
padding: 0 5px;
|
||||
line-height: 1.4;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-gallery-tree-children {
|
||||
/* 子ノードコンテナ */
|
||||
}
|
||||
|
||||
/* ── 中: 画像一覧パネル ────────────────────────────────────── */
|
||||
|
||||
.wfm-gallery-list-panel {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
border-right: 1px solid var(--wfm-border);
|
||||
background: var(--wfm-bg-primary, #16213e);
|
||||
}
|
||||
|
||||
.wfm-gallery-grid {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* サムネイルビュー */
|
||||
.wfm-gallery-view-thumb {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 8px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-card {
|
||||
position: relative;
|
||||
background: var(--wfm-bg-secondary, #1a1a2e);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-card:hover {
|
||||
border-color: var(--wfm-accent, #4f8ef7);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-card.selected {
|
||||
border-color: var(--wfm-accent, #4f8ef7);
|
||||
box-shadow: 0 0 0 2px var(--wfm-accent, #4f8ef7);
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-card.multi-selected {
|
||||
border-color: #f59e0b;
|
||||
box-shadow: 0 0 0 2px #f59e0b;
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
background: var(--wfm-bg-hover, #111);
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-placeholder {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--wfm-bg-hover, #222);
|
||||
color: var(--wfm-text-secondary);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* お気に入りボタン（サムネイルカード右上） */
|
||||
.wfm-gallery-thumb-fav-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: rgba(255,255,255,0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-card:hover .wfm-gallery-thumb-fav-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-fav-btn.active {
|
||||
color: #fbbf24;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-fav-btn:hover {
|
||||
background: rgba(0,0,0,0.75);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
/* テーブルビューのお気に入りボタン */
|
||||
.wfm-gallery-table-fav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.3);
|
||||
padding: 2px 4px;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.wfm-gallery-table-fav-btn:hover,
|
||||
.wfm-gallery-table-fav-btn.active {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.wfm-gallery-thumb-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
/* テーブルビュー */
|
||||
.wfm-gallery-view-table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wfm-gallery-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wfm-gallery-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--wfm-bg-secondary, #1a1a2e);
|
||||
color: var(--wfm-text-secondary);
|
||||
font-weight: 600;
|
||||
padding: 6px 8px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wfm-gallery-table tbody tr {
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.wfm-gallery-table tbody tr:hover {
|
||||
background: var(--wfm-bg-hover, rgba(255,255,255,0.05));
|
||||
}
|
||||
|
||||
.wfm-gallery-table tbody tr.selected {
|
||||
background: rgba(79,142,247,0.15);
|
||||
}
|
||||
|
||||
.wfm-gallery-table tbody tr.multi-selected {
|
||||
background: rgba(245,158,11,0.15);
|
||||
}
|
||||
|
||||
.wfm-gallery-table td {
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
color: var(--wfm-text-primary);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wfm-gallery-table-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wfm-gallery-table-name {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── タグバッジ共通 ────────────────────────────────────────── */
|
||||
|
||||
.wfm-gallery-tag-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
background: rgba(79,142,247,0.15);
|
||||
color: var(--wfm-accent, #4f8ef7);
|
||||
border: 1px solid rgba(79,142,247,0.3);
|
||||
border-radius: 10px;
|
||||
padding: 1px 7px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wfm-gallery-tag-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
opacity: 0.7;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.wfm-gallery-tag-remove:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── 右: 詳細パネル ────────────────────────────────────────── */
|
||||
|
||||
.wfm-gallery-detail-panel {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
max-width: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--wfm-bg-secondary, #1a1a2e);
|
||||
}
|
||||
|
||||
.wfm-gallery-detail-header {
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
flex-shrink: 0;
|
||||
background: var(--wfm-bg-primary, #16213e);
|
||||
}
|
||||
|
||||
.wfm-gallery-detail-filename {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* プレビュー */
|
||||
.wfm-gallery-detail-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
max-height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--wfm-bg-primary, #16213e);
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-gallery-detail-img {
|
||||
max-width: 100%;
|
||||
max-height: 200px;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* タブコンテンツ */
|
||||
.wfm-gallery-detail-tab-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.wfm-gallery-section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-primary);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.wfm-gallery-info-section {
|
||||
margin-bottom: 4px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.wfm-gallery-info-row {
|
||||
font-size: 12px;
|
||||
color: var(--wfm-text-primary);
|
||||
margin-bottom: 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wfm-gallery-tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wfm-gallery-memo {
|
||||
width: 100%;
|
||||
background: var(--wfm-bg-primary, #16213e);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: 4px;
|
||||
color: var(--wfm-text-primary);
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.wfm-gallery-memo:focus {
|
||||
outline: none;
|
||||
border-color: var(--wfm-accent, #4f8ef7);
|
||||
}
|
||||
|
||||
/* ── Metadataタブ（Workflow全幅表示） ─────────────────────── */
|
||||
|
||||
.wfm-gallery-meta-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wfm-gallery-meta-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
flex-shrink: 0;
|
||||
background: var(--wfm-bg-primary, #16213e);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.wfm-gallery-meta-status {
|
||||
font-size: 11px;
|
||||
color: var(--wfm-text-secondary);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wfm-gallery-workflow-json {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
font-family: "Consolas", "Monaco", monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
color: var(--wfm-text-primary);
|
||||
background: var(--wfm-bg-secondary, #1a1a2e);
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* グループ */
|
||||
.wfm-gallery-current-groups {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--wfm-text-secondary);
|
||||
}
|
||||
|
||||
.wfm-gallery-groups-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wfm-gallery-group-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 6px;
|
||||
background: var(--wfm-bg-primary, #16213e);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wfm-gallery-group-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--wfm-text-primary);
|
||||
}
|
||||
|
||||
/* ── 一括操作バー ──────────────────────────────────────────── */
|
||||
|
||||
.wfm-gallery-bulk-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 10px;
|
||||
background: rgba(245,158,11,0.12);
|
||||
border-bottom: 1px solid rgba(245,158,11,0.35);
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wfm-gallery-bulk-count {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #f59e0b;
|
||||
white-space: nowrap;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* ── ライトボックス ─────────────────────────────────────────── */
|
||||
|
||||
.wfm-gallery-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.9);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wfm-gallery-lightbox-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.wfm-gallery-lightbox-img {
|
||||
max-width: 90vw;
|
||||
max-height: 85vh;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.wfm-gallery-lightbox-footer {
|
||||
margin-top: 8px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wfm-gallery-lightbox-close {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: -12px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wfm-gallery-lightbox-close:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
/* ── ファイル操作ボタン (詳細パネル) ─────────────────────────── */
|
||||
|
||||
.wfm-gallery-file-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.wfm-gallery-file-actions .wfm-btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ── 移動先選択モーダル ──────────────────────────────────────── */
|
||||
|
||||
.wfm-gallery-move-modal {
|
||||
background: var(--wfm-bg-primary, #16213e);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
width: 90%;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.wfm-gallery-move-modal-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-primary);
|
||||
}
|
||||
|
||||
.wfm-gallery-move-dest-sel {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wfm-gallery-move-modal-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
+812
-36
@@ -250,12 +250,15 @@ body {
|
||||
|
||||
.wfm-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, 178px);
|
||||
grid-auto-rows: max-content;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
align-content: start;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -263,6 +266,8 @@ body {
|
||||
============================================ */
|
||||
|
||||
.wfm-card {
|
||||
width: 178px;
|
||||
min-width: 178px;
|
||||
background: var(--wfm-surface);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius);
|
||||
@@ -278,8 +283,8 @@ body {
|
||||
}
|
||||
|
||||
.wfm-card-thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 178px;
|
||||
height: 200px;
|
||||
background: var(--wfm-bg-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -503,11 +508,12 @@ body {
|
||||
}
|
||||
|
||||
.wfm-gen-right {
|
||||
width: 360px;
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid var(--wfm-border);
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
@@ -544,13 +550,55 @@ body {
|
||||
|
||||
.wfm-gen-subtab-content {
|
||||
display: none;
|
||||
padding: 12px 16px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-gen-subtab-content.active {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* ── Tab inner layout: params col + rawjson col ── */
|
||||
.wfm-gen-tab-cols {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Left sub-column: parameter controls */
|
||||
.wfm-gen-params-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--wfm-border);
|
||||
}
|
||||
|
||||
/* Scrollable variant (Model / Settings single-section) */
|
||||
.wfm-gen-params-col--scroll {
|
||||
overflow-y: auto;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
/* Stacked sections inside params col (Input: Prompt on top, Image below) */
|
||||
.wfm-gen-params-section {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px 14px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.wfm-gen-params-section--top-border {
|
||||
border-top: 1px solid var(--wfm-border);
|
||||
}
|
||||
|
||||
/* Right sub-column: Raw JSON */
|
||||
.wfm-gen-rawjson-col {
|
||||
width: 540px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-gen-status {
|
||||
@@ -570,13 +618,6 @@ body {
|
||||
color: var(--wfm-danger);
|
||||
}
|
||||
|
||||
.wfm-gen-panel {
|
||||
background: var(--wfm-surface);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.wfm-gen-progress-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -607,8 +648,56 @@ body {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wfm-gen-result {
|
||||
/* Raw JSON widget (shared, moved between tabs by JS) */
|
||||
#wfm-gen-rawjson-widget {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.wfm-gen-rawjson-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
background: var(--wfm-bg-secondary);
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-gen-rawjson-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.wfm-gen-rawjson-editor {
|
||||
flex: 1 !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.wfm-gen-col-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 10px 0;
|
||||
color: var(--wfm-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
/* Generation panel in right column */
|
||||
.wfm-gen-panel {
|
||||
background: var(--wfm-surface);
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius);
|
||||
padding: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-gen-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -646,7 +735,29 @@ body {
|
||||
|
||||
.wfm-settings-container {
|
||||
padding: 24px;
|
||||
max-width: 700px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wfm-settings-layout {
|
||||
/* layout wrapper — Theme floats right inside this */
|
||||
}
|
||||
|
||||
.wfm-settings-left-col {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wfm-settings-right-col {
|
||||
float: right;
|
||||
width: 50%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
max-height: calc(100vh - var(--wfm-header-height, 96px) - 48px);
|
||||
overflow-y: auto;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -741,26 +852,38 @@ body {
|
||||
============================================ */
|
||||
|
||||
.wfm-view-card {
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
|
||||
gap: 6px !important;
|
||||
grid-template-columns: repeat(auto-fill, 220px) !important;
|
||||
grid-auto-rows: max-content !important;
|
||||
gap: 8px !important;
|
||||
justify-items: stretch !important;
|
||||
align-items: start !important;
|
||||
}
|
||||
|
||||
.wfm-view-card .wfm-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 220px !important;
|
||||
min-width: 220px !important;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.wfm-view-card .wfm-card-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.wfm-view-card .wfm-fav-btn {
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.wfm-view-card .wfm-card-title {
|
||||
margin-bottom: 4px;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -792,6 +915,13 @@ body {
|
||||
.wfm-view-table {
|
||||
display: block !important;
|
||||
overflow-y: auto;
|
||||
justify-items: stretch !important;
|
||||
}
|
||||
|
||||
.wfm-view-table .wfm-card,
|
||||
.wfm-view-table .wfm-model-card {
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.wfm-table {
|
||||
@@ -921,6 +1051,7 @@ body {
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
background: var(--wfm-surface);
|
||||
flex-shrink: 0;
|
||||
min-height: 37px;
|
||||
}
|
||||
|
||||
.wfm-side-panel-title {
|
||||
@@ -932,18 +1063,13 @@ body {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wfm-side-panel-close {
|
||||
background: none;
|
||||
border: none;
|
||||
.wfm-side-panel-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--wfm-text-secondary);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wfm-side-panel-close:hover {
|
||||
color: var(--wfm-text);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Side Panel Tabs */
|
||||
@@ -1193,6 +1319,79 @@ body {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Badge Filter Bar (model type row)
|
||||
============================================ */
|
||||
|
||||
.wfm-models-type-divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: var(--wfm-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wfm-badge-filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wfm-badge-filter-btn {
|
||||
padding: 2px 10px;
|
||||
font-size: 11px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
background: var(--wfm-bg-tertiary);
|
||||
color: var(--wfm-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s, box-shadow 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wfm-badge-filter-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.wfm-badge-filter-btn.active {
|
||||
box-shadow: 0 0 0 2px var(--wfm-primary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Badge checkbox list in modal
|
||||
============================================ */
|
||||
|
||||
.wfm-badge-checkboxes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.wfm-badge-check-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wfm-badge-check-label input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wfm-badge-check-label input[type="checkbox"]:not(:checked) + .wfm-badge {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.wfm-badge-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wfm-badge-clickable:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Modal Detail - Two Column Layout
|
||||
============================================ */
|
||||
@@ -1818,7 +2017,7 @@ body {
|
||||
}
|
||||
|
||||
.wfm-side-thumb-img-wrap {
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--wfm-bg);
|
||||
border: 1px solid var(--wfm-border);
|
||||
@@ -1827,6 +2026,7 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.wfm-side-thumb-img-wrap img {
|
||||
@@ -2392,6 +2592,267 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Settings Accordion (details/summary)
|
||||
============================================ */
|
||||
|
||||
.wfm-settings-section {
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius);
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wfm-settings-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--wfm-text);
|
||||
background: var(--wfm-surface);
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.wfm-settings-summary:hover {
|
||||
background: var(--wfm-surface-hover);
|
||||
}
|
||||
.wfm-settings-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.wfm-settings-summary::before {
|
||||
content: "\25B6";
|
||||
font-size: 10px;
|
||||
margin-right: 10px;
|
||||
transition: transform 0.2s ease;
|
||||
color: var(--wfm-text-secondary);
|
||||
}
|
||||
.wfm-settings-section[open] > .wfm-settings-summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.wfm-settings-section > *:not(summary) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.wfm-settings-section > *:nth-child(2) {
|
||||
padding-top: 12px;
|
||||
}
|
||||
.wfm-settings-section > *:last-child {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Theme Customizer
|
||||
============================================ */
|
||||
|
||||
.wfm-customizer-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
margin-top: 12px;
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius-sm);
|
||||
background: var(--wfm-surface);
|
||||
color: var(--wfm-text-secondary);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.wfm-customizer-toggle:hover {
|
||||
color: var(--wfm-primary);
|
||||
border-color: var(--wfm-primary);
|
||||
}
|
||||
.wfm-customizer-toggle .arrow {
|
||||
transition: transform 0.2s ease;
|
||||
font-size: 10px;
|
||||
}
|
||||
.wfm-customizer-toggle.open .arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.wfm-customizer-panel {
|
||||
display: none;
|
||||
margin-top: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius);
|
||||
background: var(--wfm-bg-secondary);
|
||||
}
|
||||
.wfm-customizer-panel.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wfm-customizer-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.wfm-customizer-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.wfm-customizer-section h4 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: var(--wfm-text);
|
||||
}
|
||||
|
||||
.wfm-color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.wfm-color-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.wfm-color-item label {
|
||||
font-size: 11px;
|
||||
color: var(--wfm-text-secondary);
|
||||
min-width: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wfm-color-item input[type="color"] {
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius-sm);
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
.wfm-color-item input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.wfm-color-item input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Pattern selector */
|
||||
.wfm-pattern-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
.wfm-pattern-item {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border: 2px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wfm-pattern-item:hover {
|
||||
border-color: var(--wfm-primary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.wfm-pattern-item.active {
|
||||
border-color: var(--wfm-primary);
|
||||
box-shadow: 0 0 0 2px var(--wfm-primary);
|
||||
}
|
||||
.wfm-pattern-item-label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 9px;
|
||||
text-align: center;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: #fff;
|
||||
padding: 1px 2px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Pattern options row */
|
||||
.wfm-pattern-options {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.wfm-pattern-options label {
|
||||
font-size: 11px;
|
||||
color: var(--wfm-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.wfm-pattern-options input[type="range"] {
|
||||
width: 80px;
|
||||
accent-color: var(--wfm-primary);
|
||||
}
|
||||
.wfm-pattern-options input[type="color"] {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: 3px;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
.wfm-pattern-options input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.wfm-pattern-options input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* SVG upload button */
|
||||
.wfm-svg-upload-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: var(--wfm-text-secondary);
|
||||
background: var(--wfm-surface);
|
||||
}
|
||||
.wfm-svg-upload-btn:hover {
|
||||
color: var(--wfm-primary);
|
||||
}
|
||||
|
||||
/* Font selector */
|
||||
.wfm-font-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
.wfm-font-item {
|
||||
padding: 8px 10px;
|
||||
border: 2px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wfm-font-item:hover {
|
||||
border-color: var(--wfm-primary);
|
||||
}
|
||||
.wfm-font-item.active {
|
||||
border-color: var(--wfm-primary);
|
||||
box-shadow: 0 0 0 2px var(--wfm-primary);
|
||||
}
|
||||
.wfm-font-preview {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
color: var(--wfm-text);
|
||||
}
|
||||
|
||||
/* Customizer action buttons */
|
||||
.wfm-customizer-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--wfm-border);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Nodes Tab
|
||||
============================================ */
|
||||
@@ -2464,6 +2925,14 @@ body {
|
||||
#wfm-nodes-grid.wfm-view-card {
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 8px;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
/* Node card: package color left border, auto width */
|
||||
.wfm-node-card {
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
border-left-width: 3px !important;
|
||||
}
|
||||
|
||||
/* Node table row selection highlight */
|
||||
@@ -2602,3 +3071,310 @@ body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Models Tab
|
||||
======================================== */
|
||||
|
||||
.wfm-models-type-nav {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wfm-models-type-btn {
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--wfm-border);
|
||||
background: var(--wfm-bg-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: var(--wfm-radius-sm);
|
||||
font-size: 13px;
|
||||
color: var(--wfm-text);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.wfm-models-type-btn:hover {
|
||||
background: var(--wfm-surface-hover);
|
||||
}
|
||||
|
||||
.wfm-models-type-btn.active {
|
||||
background: var(--wfm-accent);
|
||||
color: #fff;
|
||||
border-color: var(--wfm-accent);
|
||||
}
|
||||
|
||||
/* Model card (card view, no thumbnail) */
|
||||
.wfm-model-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wfm-model-card .wfm-card-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Badge: subdirectory (italic, muted) */
|
||||
.wfm-badge-dir {
|
||||
opacity: 0.7;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Favorite button in model card (active state color) */
|
||||
.wfm-model-side-fav.wfm-model-fav-active {
|
||||
color: #f5a623;
|
||||
}
|
||||
|
||||
/* Model table */
|
||||
.wfm-models-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wfm-models-table th,
|
||||
.wfm-models-table td {
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--wfm-border);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.wfm-models-table th {
|
||||
background: var(--wfm-bg-secondary);
|
||||
font-weight: 600;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wfm-models-table-row {
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.wfm-models-table-row:hover {
|
||||
background: var(--wfm-surface-hover);
|
||||
}
|
||||
|
||||
.wfm-models-table-row.wfm-card-selected {
|
||||
background: var(--wfm-accent-light, rgba(var(--wfm-accent-rgb, 99, 102, 241), 0.1));
|
||||
}
|
||||
|
||||
.wfm-models-table-fav {
|
||||
cursor: pointer;
|
||||
text-align: center !important;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.wfm-table-th-subdir,
|
||||
.wfm-table-td-subdir {
|
||||
width: 80px;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wfm-table-th-ext,
|
||||
.wfm-table-td-ext {
|
||||
width: 60px;
|
||||
max-width: 60px;
|
||||
}
|
||||
|
||||
.wfm-table-td-memo {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--wfm-text-muted, #888);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Textarea (shared - used by models memo and workflow detail) */
|
||||
.wfm-textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--wfm-border);
|
||||
border-radius: var(--wfm-radius-sm);
|
||||
background: var(--wfm-bg-secondary);
|
||||
color: var(--wfm-text);
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wfm-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--wfm-accent);
|
||||
}
|
||||
|
||||
/* Clickable model name (copy to clipboard) */
|
||||
.wfm-model-name-copy {
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.wfm-model-name-copy:hover {
|
||||
color: var(--wfm-accent);
|
||||
}
|
||||
|
||||
/* Inline pagination (in toolbar) */
|
||||
.wfm-pagination-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--wfm-text-secondary);
|
||||
}
|
||||
|
||||
/* Side panel content for models */
|
||||
.wfm-models-side-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Model Enable / Disable
|
||||
============================================ */
|
||||
|
||||
/* Disabled model: gray out the card */
|
||||
.wfm-model-disabled {
|
||||
opacity: 0.45;
|
||||
filter: grayscale(60%);
|
||||
}
|
||||
|
||||
.wfm-model-disabled:hover {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* Overlay label on thumb */
|
||||
.wfm-disabled-overlay {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
background: rgba(0,0,0,0.65);
|
||||
color: #ff6b6b;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
letter-spacing: 0.5px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Toggle button – thumb/card view (absolute bottom-right) */
|
||||
.wfm-toggle-btn {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
color: var(--wfm-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
line-height: 1;
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.wfm-toggle-btn:hover {
|
||||
opacity: 1;
|
||||
color: var(--wfm-primary);
|
||||
}
|
||||
|
||||
.wfm-toggle-btn.wfm-toggle-disabled {
|
||||
color: #ff6b6b;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Card view: fav and toggle are flex siblings */
|
||||
.wfm-view-card .wfm-toggle-btn {
|
||||
position: static;
|
||||
flex-shrink: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* Table view toggle cell */
|
||||
.wfm-table-td-toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.wfm-table-td-toggle .wfm-toggle-btn {
|
||||
position: static;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Disabled badge in card title */
|
||||
.wfm-badge-disabled {
|
||||
background: rgba(255, 107, 107, 0.2);
|
||||
color: #ff6b6b;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
border: 1px solid rgba(255, 107, 107, 0.4);
|
||||
}
|
||||
|
||||
/* ── Multi-select ─────────────────────────────────────── */
|
||||
.wfm-select-check {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.6);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: transparent;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.wfm-select-check.checked {
|
||||
background: #6c8ef5;
|
||||
border-color: #6c8ef5;
|
||||
color: #fff;
|
||||
}
|
||||
.wfm-select-check.checked::after {
|
||||
content: "✓";
|
||||
}
|
||||
.wfm-view-thumb .wfm-model-card.wfm-card-checked,
|
||||
.wfm-view-card .wfm-model-card.wfm-card-checked {
|
||||
outline: 2px solid #6c8ef5;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.wfm-table-td-check {
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.wfm-table-td-check .wfm-select-check {
|
||||
position: static;
|
||||
}
|
||||
.wfm-bulk-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: rgba(108, 142, 245, 0.12);
|
||||
border-bottom: 1px solid rgba(108, 142, 245, 0.3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.wfm-bulk-count {
|
||||
font-size: 13px;
|
||||
color: #a0a8c0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.wfm-bulk-sep {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
+55
-2
@@ -90,7 +90,7 @@ function initTabs() {
|
||||
|
||||
function applyI18nToHtml() {
|
||||
// Tab labels
|
||||
const tabMap = { workflow: "tabWorkflow", nodes: "tabNodes", generate: "tabGenerate", prompt: "tabPrompt", settings: "tabSettings", help: "tabHelp" };
|
||||
const tabMap = { workflow: "tabWorkflow", nodes: "tabNodes", models: "tabModels", generate: "tabGenerate", prompt: "tabPrompt", gallery: "tabGallery", settings: "tabSettings", help: "tabHelp" };
|
||||
document.querySelectorAll(".wfm-tab").forEach((tab) => {
|
||||
const key = tabMap[tab.dataset.tab];
|
||||
if (key) tab.textContent = t(key);
|
||||
@@ -163,6 +163,39 @@ function applyI18nToHtml() {
|
||||
const nodesPlaceholder = document.getElementById("wfm-nodes-placeholder");
|
||||
if (nodesPlaceholder) nodesPlaceholder.textContent = t("nodesClickToLoad");
|
||||
|
||||
// Models tab
|
||||
const modelsTypeBtns = document.querySelectorAll(".wfm-models-type-btn");
|
||||
modelsTypeBtns.forEach(btn => {
|
||||
const key = "models" + btn.dataset.modelType.charAt(0).toUpperCase() + btn.dataset.modelType.slice(1);
|
||||
const label = t(key);
|
||||
if (label && label !== key) btn.textContent = label;
|
||||
});
|
||||
const modelsSearch = document.getElementById("wfm-models-search");
|
||||
if (modelsSearch) modelsSearch.placeholder = t("modelsSearchPlaceholder");
|
||||
const modelsRefreshBtn = document.getElementById("wfm-models-refresh-btn");
|
||||
if (modelsRefreshBtn) modelsRefreshBtn.textContent = t("modelsRefresh");
|
||||
const modelsPlaceholder = document.getElementById("wfm-models-placeholder");
|
||||
if (modelsPlaceholder) modelsPlaceholder.textContent = t("modelsClickToLoad");
|
||||
const modelsTagFilter = document.getElementById("wfm-models-tag-filter");
|
||||
if (modelsTagFilter) {
|
||||
const firstOpt = modelsTagFilter.querySelector("option[value='']");
|
||||
if (firstOpt) firstOpt.textContent = t("modelsAllTags");
|
||||
}
|
||||
const modelsSideTabBtns = document.querySelectorAll(".wfm-models-side-tab-btn");
|
||||
modelsSideTabBtns.forEach(btn => {
|
||||
if (btn.dataset.sideTab === "info") btn.textContent = t("modelsSideInfo");
|
||||
if (btn.dataset.sideTab === "group") btn.textContent = t("modelsSideGroup");
|
||||
if (btn.dataset.sideTab === "civitai") btn.textContent = t("modelsSideCivitai");
|
||||
});
|
||||
|
||||
// Gallery tab
|
||||
const gallerySideTabBtns = document.querySelectorAll(".wfm-gallery-detail-tab-btn");
|
||||
gallerySideTabBtns.forEach(btn => {
|
||||
if (btn.dataset.detailTab === "info") btn.textContent = t("modelsSideInfo");
|
||||
if (btn.dataset.detailTab === "meta") btn.textContent = t("gallerySideMetadata");
|
||||
if (btn.dataset.detailTab === "group") btn.textContent = t("modelsSideGroup");
|
||||
});
|
||||
|
||||
// Prompt tab
|
||||
const assistantHeader = document.querySelector(".wfm-prompt-split-left .wfm-prompt-split-header");
|
||||
if (assistantHeader) assistantHeader.textContent = t("assistantSubtab");
|
||||
@@ -227,10 +260,11 @@ function applyI18nToHtml() {
|
||||
"wfm-help-about-1": "helpAbout1", "wfm-help-about-2": "helpAbout2",
|
||||
"wfm-help-wf-1": "helpWf1", "wfm-help-wf-2": "helpWf2", "wfm-help-wf-3": "helpWf3",
|
||||
"wfm-help-wf-4": "helpWf4", "wfm-help-wf-5": "helpWf5", "wfm-help-wf-6": "helpWf6",
|
||||
"wfm-help-wf-7": "helpWf7", "wfm-help-wf-8": "helpWf8",
|
||||
"wfm-help-wf-7": "helpWf7",
|
||||
"wfm-help-gen-1": "helpGen1", "wfm-help-gen-2": "helpGen2",
|
||||
"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-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",
|
||||
@@ -238,15 +272,30 @@ function applyI18nToHtml() {
|
||||
"wfm-help-settings-1": "helpSettings1", "wfm-help-settings-2": "helpSettings2",
|
||||
"wfm-help-settings-3": "helpSettings3", "wfm-help-settings-4": "helpSettings4",
|
||||
"wfm-help-settings-5": "helpSettings5", "wfm-help-settings-6": "helpSettings6",
|
||||
"wfm-help-settings-7": "helpSettings7", "wfm-help-settings-8": "helpSettings8",
|
||||
"wfm-help-settings-9": "helpSettings9",
|
||||
"wfm-help-nodes-1": "helpNodes1", "wfm-help-nodes-2": "helpNodes2",
|
||||
"wfm-help-nodes-3": "helpNodes3", "wfm-help-nodes-4": "helpNodes4",
|
||||
"wfm-help-nodes-5": "helpNodes5", "wfm-help-nodes-6": "helpNodes6",
|
||||
"wfm-help-models-1": "helpModels1", "wfm-help-models-2": "helpModels2",
|
||||
"wfm-help-models-3": "helpModels3", "wfm-help-models-4": "helpModels4",
|
||||
"wfm-help-models-5": "helpModels5", "wfm-help-models-6": "helpModels6",
|
||||
"wfm-help-models-7": "helpModels7", "wfm-help-models-8": "helpModels8",
|
||||
"wfm-help-models-9": "helpModels9", "wfm-help-models-10": "helpModels10",
|
||||
"wfm-help-models-11": "helpModels11",
|
||||
"wfm-help-gallery-title": "helpGalleryTitle",
|
||||
"wfm-help-gallery-1": "helpGallery1", "wfm-help-gallery-2": "helpGallery2",
|
||||
"wfm-help-gallery-3": "helpGallery3", "wfm-help-gallery-4": "helpGallery4",
|
||||
"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-sidepanel-title": "helpSidepanelTitle",
|
||||
"wfm-help-sidepanel-1": "helpSidepanel1", "wfm-help-sidepanel-2": "helpSidepanel2",
|
||||
"wfm-help-sidepanel-3": "helpSidepanel3", "wfm-help-sidepanel-4": "helpSidepanel4",
|
||||
"wfm-help-sidepanel-5": "helpSidepanel5", "wfm-help-sidepanel-6": "helpSidepanel6",
|
||||
"wfm-help-sidepanel-7": "helpSidepanel7", "wfm-help-sidepanel-8": "helpSidepanel8",
|
||||
"wfm-help-sidepanel-9": "helpSidepanel9", "wfm-help-sidepanel-10": "helpSidepanel10",
|
||||
"wfm-help-sidepanel-11": "helpSidepanel11", "wfm-help-sidepanel-12": "helpSidepanel12",
|
||||
"wfm-help-shortcuts-title": "helpShortcutsTitle",
|
||||
"wfm-help-shortcuts-1": "helpShortcuts1", "wfm-help-shortcuts-2": "helpShortcuts2",
|
||||
"wfm-help-shortcuts-3": "helpShortcuts3", "wfm-help-shortcuts-4": "helpShortcuts4",
|
||||
@@ -301,6 +350,8 @@ import { initNodesTab } from "./nodes-tab.js";
|
||||
import { initGenerateTab } from "./generate-tab.js";
|
||||
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";
|
||||
|
||||
// Apply saved theme immediately to prevent flash of default theme
|
||||
applyTheme(getSavedTheme());
|
||||
@@ -312,8 +363,10 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
initSettingsTab(); // Settings first (applies saved URL)
|
||||
initWorkflowTab();
|
||||
initNodesTab();
|
||||
initModelsTab();
|
||||
initGenerateTab();
|
||||
initPromptTab();
|
||||
initGalleryTab();
|
||||
|
||||
console.log("Workflow Studio: App initialized");
|
||||
});
|
||||
|
||||
@@ -88,7 +88,13 @@ export const comfyUI = {
|
||||
try {
|
||||
const info = await this.fetchObjectInfo(cls);
|
||||
if (info?.[cls]?.input?.required?.[inputKey]) {
|
||||
return info[cls].input.required[inputKey][0] || [];
|
||||
const inputDef = info[cls].input.required[inputKey];
|
||||
const first = inputDef[0];
|
||||
if (Array.isArray(first)) return first;
|
||||
// Newer ComfyUI format: ["COMBO", { "values": [...] }]
|
||||
if (typeof first === "string" && Array.isArray(inputDef[1]?.values)) {
|
||||
return inputDef[1].values;
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
@@ -134,6 +140,25 @@ export const comfyUI = {
|
||||
);
|
||||
},
|
||||
|
||||
async fetchHypernetworks() {
|
||||
return this._fetchModelList(
|
||||
["HypernetworkLoader"],
|
||||
"hypernetwork_name"
|
||||
);
|
||||
},
|
||||
|
||||
async fetchEmbeddings() {
|
||||
// ComfyUI exposes embeddings via /embeddings endpoint
|
||||
try {
|
||||
const res = await fetch(`${this.baseUrl}/embeddings`);
|
||||
if (res.ok) {
|
||||
const list = await res.json();
|
||||
return Array.isArray(list) ? list : [];
|
||||
}
|
||||
} catch {}
|
||||
return [];
|
||||
},
|
||||
|
||||
async fetchSamplers() {
|
||||
return this._fetchModelList(["KSampler"], "sampler_name");
|
||||
},
|
||||
|
||||
@@ -61,6 +61,7 @@ export const comfyEditor = {
|
||||
this.renderImageTab(analysis, "wfm-gen-image-fields");
|
||||
this.renderModelTab(analysis, "wfm-gen-model-fields");
|
||||
this.renderSettingsTab(analysis, "wfm-gen-settings-fields");
|
||||
_syncRawJson();
|
||||
},
|
||||
|
||||
renderPromptTab(analysis, containerId) {
|
||||
@@ -208,9 +209,9 @@ export const comfyEditor = {
|
||||
const latent = analysis.latent_nodes?.[0];
|
||||
|
||||
el.innerHTML = `
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
|
||||
<div>
|
||||
<h3 style="font-size:14px;margin-bottom:12px;">KSampler</h3>
|
||||
<div style="display:flex;flex-direction:column;gap:0;">
|
||||
<div style="padding-bottom:14px;border-bottom:1px solid var(--wfm-border);margin-bottom: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;">KSampler</h3>
|
||||
${sampler ? `
|
||||
<input type="hidden" id="wfm-settings-sampler-id" value="${sampler.id}">
|
||||
<div class="wfm-form-group">
|
||||
@@ -245,7 +246,7 @@ export const comfyEditor = {
|
||||
` : "<p class='wfm-placeholder'>No KSampler node found</p>"}
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="font-size:14px;margin-bottom:12px;">Latent Image</h3>
|
||||
<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}">
|
||||
<div class="wfm-form-group">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+271
-72
@@ -50,6 +50,42 @@ async function saveToEagle(imageUrl, name, tags = []) {
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Gallery Metadata - ワークフロー保存
|
||||
// ============================================
|
||||
|
||||
let _outputDir = "";
|
||||
|
||||
async function _fetchOutputDir() {
|
||||
try {
|
||||
const res = await fetch("/api/wfm/settings/output-dir");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
_outputDir = (data.current || "").replace(/\\/g, "/").replace(/\/$/, "");
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function saveGeneratedImagesMeta(images, workflow) {
|
||||
if (!_outputDir) await _fetchOutputDir();
|
||||
if (!_outputDir) return;
|
||||
|
||||
for (const img of images) {
|
||||
if (img.type !== "output") continue;
|
||||
const parts = [_outputDir];
|
||||
if (img.subfolder) parts.push(img.subfolder);
|
||||
parts.push(img.filename);
|
||||
const path = parts.join("/");
|
||||
try {
|
||||
await fetch("/wfm/gallery/image/meta", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ path, workflow }),
|
||||
});
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Status & Connection
|
||||
// ============================================
|
||||
@@ -114,7 +150,199 @@ export async function loadWorkflowIntoEditor(workflow, filename) {
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Generation
|
||||
// Checkpoint Batch
|
||||
// ============================================
|
||||
|
||||
const _ckptBatch = { aborted: false };
|
||||
|
||||
function _parseFolderList(str) {
|
||||
return str.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
|
||||
}
|
||||
|
||||
function _getModelFolder(modelPath) {
|
||||
const normalized = modelPath.replace(/\\/g, "/");
|
||||
const idx = normalized.indexOf("/");
|
||||
return idx === -1 ? "" : normalized.substring(0, idx).toLowerCase();
|
||||
}
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
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");
|
||||
|
||||
checkbox?.addEventListener("change", () => {
|
||||
if (body) body.style.display = checkbox.checked ? "block" : "none";
|
||||
if (checkbox.checked) _updateBatchInfo();
|
||||
});
|
||||
|
||||
document.getElementById("wfm-ckpt-batch-include")?.addEventListener("input", _updateBatchInfo);
|
||||
document.getElementById("wfm-ckpt-batch-exclude")?.addEventListener("input", _updateBatchInfo);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Generation (core — throws on error)
|
||||
// ============================================
|
||||
|
||||
async function _coreGenerate(silent = false) {
|
||||
const progressBar = document.getElementById("wfm-gen-progress-bar");
|
||||
const progressText = document.getElementById("wfm-gen-progress-text");
|
||||
const resultImg = document.getElementById("wfm-gen-result-img");
|
||||
const resultThumbs = document.getElementById("wfm-gen-result-thumbs");
|
||||
|
||||
const seedMode = document.getElementById("wfm-gen-seed-mode")?.value || "random";
|
||||
const seedValue = parseInt(document.getElementById("wfm-gen-seed-value")?.value) || -1;
|
||||
|
||||
if (progressBar) progressBar.style.width = "0%";
|
||||
if (progressText) progressText.textContent = "Starting...";
|
||||
|
||||
const { images, seed } = await comfyUI.generate(
|
||||
{ ...comfyUI.currentWorkflow },
|
||||
{
|
||||
seedMode,
|
||||
seedValue,
|
||||
onProgress: (pct) => {
|
||||
if (progressBar) progressBar.style.width = `${(pct * 100).toFixed(1)}%`;
|
||||
if (progressText) progressText.textContent = `${(pct * 100).toFixed(0)}%`;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const seedEl = document.getElementById("wfm-gen-seed-value");
|
||||
if (seedEl) seedEl.value = seed;
|
||||
|
||||
if (progressText) progressText.textContent = `Done (${images.length} image${images.length !== 1 ? "s" : ""})`;
|
||||
if (progressBar) progressBar.style.width = "100%";
|
||||
|
||||
if (images.length > 0) {
|
||||
const blob = await comfyUI.getImageBlob(images[0]);
|
||||
const url = URL.createObjectURL(blob);
|
||||
if (resultImg) {
|
||||
resultImg.src = url;
|
||||
resultImg.style.display = "block";
|
||||
}
|
||||
|
||||
if (resultThumbs && images.length > 1) {
|
||||
resultThumbs.innerHTML = "";
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
const b = i === 0 ? blob : await comfyUI.getImageBlob(images[i]);
|
||||
const u = i === 0 ? url : URL.createObjectURL(b);
|
||||
const thumb = document.createElement("img");
|
||||
thumb.src = u;
|
||||
thumb.className = `wfm-gen-thumb ${i === 0 ? "active" : ""}`;
|
||||
thumb.addEventListener("click", () => {
|
||||
resultImg.src = u;
|
||||
resultThumbs.querySelectorAll(".wfm-gen-thumb").forEach((t) => t.classList.remove("active"));
|
||||
thumb.classList.add("active");
|
||||
});
|
||||
resultThumbs.appendChild(thumb);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (getEagleSettings().autoSave && images.length > 0) {
|
||||
for (const img of images) {
|
||||
const viewUrl = `/view?filename=${encodeURIComponent(img.filename)}&subfolder=${encodeURIComponent(img.subfolder || "")}&type=${encodeURIComponent(img.type || "output")}`;
|
||||
saveToEagle(viewUrl, img.filename);
|
||||
}
|
||||
}
|
||||
|
||||
if (images.length > 0) {
|
||||
saveGeneratedImagesMeta(images, { ...comfyUI.currentWorkflow }).catch(() => {});
|
||||
}
|
||||
|
||||
if (!silent) showToast("Generation complete", "success");
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Batch generation loop
|
||||
// ============================================
|
||||
|
||||
async function _runBatchGenerate() {
|
||||
const ckptNodes = comfyUI.currentAnalysis?.checkpoint_nodes || [];
|
||||
if (ckptNodes.length === 0) {
|
||||
showToast("No checkpoint node found in workflow", "error");
|
||||
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);
|
||||
|
||||
if (list.length === 0) {
|
||||
showToast("No checkpoints match the folder filter", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const batchProgress = document.getElementById("wfm-ckpt-batch-progress");
|
||||
const batchCurrentName = document.getElementById("wfm-ckpt-batch-current-name");
|
||||
const batchCount = document.getElementById("wfm-ckpt-batch-count");
|
||||
const batchBar = document.getElementById("wfm-ckpt-batch-bar");
|
||||
const progressText = document.getElementById("wfm-gen-progress-text");
|
||||
|
||||
if (batchProgress) batchProgress.style.display = "block";
|
||||
|
||||
let completed = 0;
|
||||
let failed = 0;
|
||||
|
||||
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...`;
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
if (batchBar) batchBar.style.width = "100%";
|
||||
if (batchCurrentName) batchCurrentName.textContent = _ckptBatch.aborted ? "Stopped" : "Done";
|
||||
|
||||
if (_ckptBatch.aborted) {
|
||||
showToast(`Batch stopped — ${completed} completed, ${failed} failed`, "info");
|
||||
} else {
|
||||
showToast(
|
||||
`Batch complete: ${completed}/${list.length}${failed > 0 ? ` (${failed} failed)` : ""}`,
|
||||
failed > 0 ? "error" : "success"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Generate entry point
|
||||
// ============================================
|
||||
|
||||
async function handleGenerate() {
|
||||
@@ -124,84 +352,29 @@ async function handleGenerate() {
|
||||
}
|
||||
if (comfyUI.generating) return;
|
||||
|
||||
const genBtn = document.getElementById("wfm-gen-generate-btn");
|
||||
const progressBar = document.getElementById("wfm-gen-progress-bar");
|
||||
const progressText = document.getElementById("wfm-gen-progress-text");
|
||||
const interruptBtn = document.getElementById("wfm-gen-interrupt-btn");
|
||||
const resultImg = document.getElementById("wfm-gen-result-img");
|
||||
const resultThumbs = document.getElementById("wfm-gen-result-thumbs");
|
||||
|
||||
// Sync prompts to workflow
|
||||
comfyEditor.syncToWorkflow();
|
||||
|
||||
const seedMode = document.getElementById("wfm-gen-seed-mode")?.value || "random";
|
||||
const seedValue = parseInt(document.getElementById("wfm-gen-seed-value")?.value) || -1;
|
||||
const genBtn = document.getElementById("wfm-gen-generate-btn");
|
||||
const interruptBtn = document.getElementById("wfm-gen-interrupt-btn");
|
||||
|
||||
genBtn.disabled = true;
|
||||
if (interruptBtn) interruptBtn.style.display = "inline-block";
|
||||
if (progressBar) progressBar.style.width = "0%";
|
||||
if (progressText) progressText.textContent = "Starting...";
|
||||
_ckptBatch.aborted = false;
|
||||
|
||||
const batchEnabled = document.getElementById("wfm-ckpt-batch-enabled")?.checked;
|
||||
|
||||
try {
|
||||
const { images, seed } = await comfyUI.generate(
|
||||
{ ...comfyUI.currentWorkflow },
|
||||
{
|
||||
seedMode,
|
||||
seedValue,
|
||||
onProgress: (pct) => {
|
||||
if (progressBar) progressBar.style.width = `${(pct * 100).toFixed(1)}%`;
|
||||
if (progressText) progressText.textContent = `${(pct * 100).toFixed(0)}%`;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// Update seed display
|
||||
const seedEl = document.getElementById("wfm-gen-seed-value");
|
||||
if (seedEl) seedEl.value = seed;
|
||||
|
||||
if (progressText) progressText.textContent = `Done (${images.length} image${images.length !== 1 ? "s" : ""})`;
|
||||
if (progressBar) progressBar.style.width = "100%";
|
||||
|
||||
// Display results
|
||||
if (images.length > 0) {
|
||||
const blob = await comfyUI.getImageBlob(images[0]);
|
||||
const url = URL.createObjectURL(blob);
|
||||
if (resultImg) {
|
||||
resultImg.src = url;
|
||||
resultImg.style.display = "block";
|
||||
}
|
||||
|
||||
// Thumbnails for multiple images
|
||||
if (resultThumbs && images.length > 1) {
|
||||
resultThumbs.innerHTML = "";
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
const b = i === 0 ? blob : await comfyUI.getImageBlob(images[i]);
|
||||
const u = i === 0 ? url : URL.createObjectURL(b);
|
||||
const thumb = document.createElement("img");
|
||||
thumb.src = u;
|
||||
thumb.className = `wfm-gen-thumb ${i === 0 ? "active" : ""}`;
|
||||
thumb.addEventListener("click", () => {
|
||||
resultImg.src = u;
|
||||
resultThumbs.querySelectorAll(".wfm-gen-thumb").forEach((t) => t.classList.remove("active"));
|
||||
thumb.classList.add("active");
|
||||
});
|
||||
resultThumbs.appendChild(thumb);
|
||||
}
|
||||
if (batchEnabled) {
|
||||
await _runBatchGenerate();
|
||||
} else {
|
||||
try {
|
||||
await _coreGenerate(false);
|
||||
} catch (err) {
|
||||
const progressText = document.getElementById("wfm-gen-progress-text");
|
||||
if (progressText) progressText.textContent = "Error";
|
||||
showToast("Generation error: " + err.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
// Eagle auto-save
|
||||
if (getEagleSettings().autoSave && images.length > 0) {
|
||||
for (const img of images) {
|
||||
const viewUrl = `/view?filename=${encodeURIComponent(img.filename)}&subfolder=${encodeURIComponent(img.subfolder || "")}&type=${encodeURIComponent(img.type || "output")}`;
|
||||
saveToEagle(viewUrl, img.filename);
|
||||
}
|
||||
}
|
||||
|
||||
showToast("Generation complete", "success");
|
||||
} catch (err) {
|
||||
if (progressText) progressText.textContent = "Error";
|
||||
showToast("Generation error: " + err.message, "error");
|
||||
} finally {
|
||||
genBtn.disabled = false;
|
||||
if (interruptBtn) interruptBtn.style.display = "none";
|
||||
@@ -235,17 +408,29 @@ export async function initGenerateTab() {
|
||||
comfyEditor.renderAll(comfyUI.currentAnalysis, comfyUI.currentWorkflow);
|
||||
}
|
||||
showToast("Model lists refreshed", "success");
|
||||
_updateBatchInfo();
|
||||
});
|
||||
|
||||
// Generate button
|
||||
document.getElementById("wfm-gen-generate-btn")?.addEventListener("click", handleGenerate);
|
||||
|
||||
// Interrupt button
|
||||
// Interrupt button (stops both single generation and batch loop)
|
||||
document.getElementById("wfm-gen-interrupt-btn")?.addEventListener("click", async () => {
|
||||
_ckptBatch.aborted = true;
|
||||
await comfyUI.interrupt();
|
||||
showToast("Interrupted", "info");
|
||||
});
|
||||
|
||||
// Move shared Raw JSON widget into the active tab's rawjson-col
|
||||
function moveRawJsonToTab(tabKey) {
|
||||
const widget = document.getElementById("wfm-gen-rawjson-widget");
|
||||
const col = document.getElementById(`wfm-gen-rawjson-col-${tabKey}`);
|
||||
if (widget && col) {
|
||||
col.appendChild(widget);
|
||||
widget.style.display = "flex";
|
||||
}
|
||||
}
|
||||
|
||||
// Subtab navigation
|
||||
document.querySelectorAll(".wfm-gen-subtab-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
@@ -254,10 +439,14 @@ export async function initGenerateTab() {
|
||||
btn.classList.add("active");
|
||||
document.querySelectorAll(".wfm-gen-subtab-content").forEach((c) => c.classList.remove("active"));
|
||||
document.getElementById(`wfm-gen-subtab-${target}`)?.classList.add("active");
|
||||
moveRawJsonToTab(target);
|
||||
});
|
||||
});
|
||||
|
||||
// Raw JSON apply
|
||||
// Initial placement: move to first active tab (input)
|
||||
moveRawJsonToTab("input");
|
||||
|
||||
// Raw JSON apply (always-visible panel in right column)
|
||||
document.getElementById("wfm-gen-apply-raw-btn")?.addEventListener("click", async () => {
|
||||
const textarea = document.getElementById("wfm-gen-raw-json");
|
||||
if (!textarea) return;
|
||||
@@ -289,11 +478,21 @@ export async function initGenerateTab() {
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// outputDir を事前取得（生成後の保存に使用）
|
||||
_fetchOutputDir();
|
||||
window.addEventListener("wfm-output-dir-changed", (e) => {
|
||||
_outputDir = (e.detail?.path || "").replace(/\\/g, "/").replace(/\/$/, "");
|
||||
});
|
||||
|
||||
// Checkpoint batch UI
|
||||
initCheckpointBatch();
|
||||
|
||||
// Auto-connect on init
|
||||
const connected = await comfyUI.checkConnection();
|
||||
updateStatus(connected);
|
||||
if (connected) {
|
||||
await comfyEditor.loadModelLists();
|
||||
_updateBatchInfo();
|
||||
}
|
||||
|
||||
// Auto-load default workflow (doesn't require ComfyUI connection)
|
||||
|
||||
+639
-45
@@ -20,6 +20,7 @@ const LANGUAGES = {
|
||||
// -- Tabs --
|
||||
tabWorkflow: "Workflow",
|
||||
tabGenerate: "GenerateUI",
|
||||
tabGallery: "Gallery",
|
||||
tabSettings: "Settings",
|
||||
|
||||
// -- Workflow toolbar --
|
||||
@@ -31,6 +32,13 @@ const LANGUAGES = {
|
||||
import: "Import",
|
||||
badgeColors: "Badge Colors",
|
||||
resetColors: "Reset",
|
||||
badgeManage: "Manage Badges",
|
||||
badgeAdd: "Add",
|
||||
badgeDelete: "Delete",
|
||||
badgeNone: "No badges defined yet.",
|
||||
badgeNoneHint: "No badges defined. Click \u2699 Manage Badges to add.",
|
||||
badgeNewLabel: "Badge label...",
|
||||
badgeColorHint: "Change color",
|
||||
defaultView: "Default View",
|
||||
viewThumbnail: "Thumbnail",
|
||||
viewCard: "Card",
|
||||
@@ -160,6 +168,10 @@ const LANGUAGES = {
|
||||
tabNodes: "Nodes",
|
||||
nodesAllNodes: "All Nodes",
|
||||
nodesNodeSets: "Node Sets",
|
||||
nodesCategoryTab: "Category",
|
||||
nodesPackageTab: "Package",
|
||||
nodesSelectCategory: "Select a category...",
|
||||
nodesSelectPackage: "Select a package...",
|
||||
nodesSearchPlaceholder: "Search nodes...",
|
||||
nodesAllCategories: "All Categories",
|
||||
nodesAllPackages: "All Packages",
|
||||
@@ -204,6 +216,114 @@ const LANGUAGES = {
|
||||
nodesConnectToComfyUI: "Connect to ComfyUI to load nodes. Check Settings tab.",
|
||||
nodesClickToLoad: "Click to load nodes...",
|
||||
|
||||
// -- Models tab --
|
||||
tabModels: "Models",
|
||||
modelsCheckpoint: "Checkpoint",
|
||||
modelsLora: "LoRA",
|
||||
modelsVae: "VAE",
|
||||
modelsControlnet: "ControlNet",
|
||||
modelsUnet: "UNET",
|
||||
modelsTextencoder: "TextEncoder",
|
||||
modelsSearchPlaceholder: "Search models...",
|
||||
modelsRefresh: "Refresh",
|
||||
modelsClickToLoad: "Click Refresh to load models...",
|
||||
modelsLoading: "Loading models...",
|
||||
modelsLoadError: "Error loading models",
|
||||
modelsNoModels: "No models found",
|
||||
modelsAllTags: "All Tags",
|
||||
modelsFileName: "File Name",
|
||||
modelsSubdir: "Subdirectory",
|
||||
modelsExt: "Extension",
|
||||
modelsTags: "Tags",
|
||||
modelsTagsPlaceholder: "tag1, tag2, ...",
|
||||
modelsModelType: "Model Type",
|
||||
modelsBadges: "Badges",
|
||||
modelsInfo: "Info",
|
||||
modelsFavorite: "Favorite",
|
||||
modelsMemo: "Memo",
|
||||
modelsMemoPlaceholder: "Notes about this model...",
|
||||
modelsSave: "Save",
|
||||
modelsSaved: "Metadata saved",
|
||||
modelsGenUIBtn: "GenUI Model",
|
||||
modelsGenUITitle: "Set this model in GenerateUI",
|
||||
modelsGenUIUnsupported: "This model type cannot be set in GenerateUI",
|
||||
modelsGenUINoWorkflow: "No workflow loaded in GenerateUI",
|
||||
modelsGenUINoNode: (type) => `No ${type} node found in current workflow`,
|
||||
modelsCopyName: "Click to copy model name",
|
||||
modelsCopiedName: "Model name copied",
|
||||
modelsFilePath: "File Path",
|
||||
modelsCopyPath: "Click to copy file path",
|
||||
modelsCopiedPath: "File path copied",
|
||||
modelsNoPreview: "No preview",
|
||||
modelsTagsHint: "(comma separated)",
|
||||
modelsAllDirs: "All Folders",
|
||||
modelsAllGroups: "All Groups",
|
||||
modelsCurrentGroups: "Current Groups",
|
||||
modelsNoGroup: "Not assigned to any group",
|
||||
modelsAssignGroup: "Assign to Group",
|
||||
modelsNoGroupAvailable: "No groups available",
|
||||
modelsAdd: "Add",
|
||||
modelsCreateGroup: "Create New Group",
|
||||
modelsGroupName: "Group name",
|
||||
modelsCreate: "Create",
|
||||
modelsManageGroups: "Manage Groups",
|
||||
modelsRename: "Rename",
|
||||
modelsDelete: "Delete",
|
||||
modelsRemoveFromGroup: "Remove from group",
|
||||
modelsGroupExists: "Group already exists",
|
||||
modelsRenamePrompt: "Enter new group name:",
|
||||
modelsDeleteGroupConfirm: "Delete group \"{name}\"?",
|
||||
modelEnable: "Enable",
|
||||
modelDisable: "Disable",
|
||||
modelDisabled: "Disabled",
|
||||
modelStatusAll: "All",
|
||||
modelStatusEnabled: "Enabled only",
|
||||
modelStatusDisabled: "Disabled only",
|
||||
modelGroupEnableAll: "Enable All",
|
||||
modelGroupDisableAll: "Disable All",
|
||||
modelToggleError: "Failed to toggle model",
|
||||
modelStatusWarning: "Changes take effect after ComfyUI refresh",
|
||||
modelSelectMode: "Select",
|
||||
modelSelectExit: "Exit Select",
|
||||
modelSelected: "selected",
|
||||
modelBulkAddGroup: "Add to Group",
|
||||
modelBulkRemoveGroup: "Remove from Group",
|
||||
modelBulkCreateAdd: "Create & Add",
|
||||
modelBulkAddDone: "models added to group",
|
||||
modelBulkRemoveDone: "models removed from group",
|
||||
modelBulkDelete: "Delete Files",
|
||||
modelBulkDeleteConfirm: "Permanently delete {count} model file(s) and their preview images? This cannot be undone.",
|
||||
modelBulkDeleteDone: "model file(s) deleted",
|
||||
modelBulkDeleteError: "Failed to delete some models",
|
||||
civitaiFetchDesc: "Fetch model information from CivitAI using SHA256 hash.",
|
||||
civitaiFetch: "Fetch from CivitAI",
|
||||
civitaiHashing: "Calculating hash... (may take a while for large files)",
|
||||
civitaiFound: "CivitAI info loaded",
|
||||
civitaiNotFound: "Model not found on CivitAI",
|
||||
civitaiError: "Error fetching from CivitAI",
|
||||
civitaiTriggerWords: "Trigger Words",
|
||||
civitaiCopyWord: "Click to copy",
|
||||
civitaiWordCopied: "Trigger word copied",
|
||||
civitaiRefresh: "Refresh",
|
||||
civitaiBatchAllCached: "All models already have CivitAI info",
|
||||
civitaiHashing2: "Hashing...",
|
||||
civitaiFetching: "Fetching...",
|
||||
civitaiBatchDone: (found, notFound) => `CivitAI: ${found} found, ${notFound} not found`,
|
||||
modelsSideInfo: "Info",
|
||||
modelsSideGroup: "Group",
|
||||
modelsSideCivitai: "CivitAI",
|
||||
gallerySideMetadata: "Metadata",
|
||||
|
||||
// -- Gallery --
|
||||
galleryAllTags: "All Tags",
|
||||
galleryFolders: "Folders",
|
||||
gallerySelectFolder: "Select a folder to browse images.",
|
||||
galleryNoImages: "No images found.",
|
||||
gallerySearchPlaceholder: "Search images...",
|
||||
galleryOutputDir: "Gallery Output Folder",
|
||||
galleryOutputDirLabel: "Output Folder Path",
|
||||
galleryOutputDirHint: "Set the ComfyUI output folder to browse in the Gallery tab. Leave blank to use ComfyUI's default output directory.",
|
||||
|
||||
// -- Help & Support --
|
||||
tabHelp: "Help",
|
||||
helpManualTitle: "Features",
|
||||
@@ -216,16 +336,18 @@ const LANGUAGES = {
|
||||
helpWf3: "Create, rename, delete groups and assign/remove workflows",
|
||||
helpWf4: "Import JSON/PNG files via button or drag & drop",
|
||||
helpWf5: "Side panel: thumbnail, JSON viewer (format badge: UI/API/App), clipboard copy, group management",
|
||||
helpWf6: "Detail modal: rename, favorite, thumbnail change, analysis, category override, tags, memo, AI summary, open in ComfyUI, load in GenerateUI, set as default, delete",
|
||||
helpWf7: "Customize badge colors per category",
|
||||
helpWf8: "Batch re-analysis of all workflow I/O (P: prompt nodes, I: image nodes, output: save nodes)",
|
||||
helpWf6: "Detail modal: rename, favorite, thumbnail change, badge assignment, tags, memo, AI summary, open in ComfyUI, load in GenerateUI, set as default, delete",
|
||||
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: "Edit parameters: Prompt, Image (drag & drop), Model (checkpoint/VAE/LoRA/ControlNet with filter), Settings (steps/CFG/sampler/scheduler/resolution), Raw JSON",
|
||||
helpGen4: "Seed control: random, fixed, increment, decrement",
|
||||
helpGen5: "Generate, progress display, and stop",
|
||||
helpGen6: "View results with main image and thumbnail history",
|
||||
helpGen7: "Eagle integration: auto-save generated images to Eagle",
|
||||
helpGen3: "3-tab layout — Input (Prompt + Image), Model, Settings — each with 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",
|
||||
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",
|
||||
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",
|
||||
@@ -234,21 +356,46 @@ const LANGUAGES = {
|
||||
helpPrompt6: "Group management: create groups, assign/remove presets, delete groups",
|
||||
helpPrompt7: "GenUI Set: apply preset prompts directly to GenerateUI",
|
||||
helpSettings1: "UI language and summary language",
|
||||
helpSettings2: "Workflow data folder path",
|
||||
helpSettings3: "ComfyUI connection URL and test",
|
||||
helpSettings4: "Ollama URL, default model, and connection test",
|
||||
helpSettings5: "Default workflow setting",
|
||||
helpSettings6: "Eagle integration URL and auto-save toggle",
|
||||
helpSettings2: "Theme selection (13 presets) with customization: color overrides, background patterns (stripes, polka dot, checkerboard, SVG tiling), and font selection (16 Google Fonts including Japanese display fonts)",
|
||||
helpSettings3: "Workflow data folder path",
|
||||
helpSettings4: "ComfyUI connection URL and test",
|
||||
helpSettings5: "Ollama URL, default model, and connection test",
|
||||
helpSettings6: "Default workflow setting",
|
||||
helpSettings7: "Eagle integration URL and auto-save toggle",
|
||||
helpSettings8: "Data Management: export all plugin data (settings, metadata, prompts, etc.) to a JSON file, or import to restore. After importing, restart ComfyUI.",
|
||||
helpSettings9: "All sections are collapsible accordion panels",
|
||||
helpNodes1: "Node Browser: search by name/description/alias/tag, filter by category, package, tag, group, favorites",
|
||||
helpNodes2: "Card and Table view modes with pagination",
|
||||
helpNodes3: "Favorite nodes and add custom tags for organization",
|
||||
helpNodes4: "Create, rename, delete node groups and assign/remove nodes",
|
||||
helpNodes5: "Side panel: Details (class name, package, category, description, flags), I/O Spec (inputs/outputs with types and defaults), Groups management",
|
||||
helpNodes6: "Node Sets: create reusable node collections with descriptions, tags, and link definitions between nodes",
|
||||
helpModels1: "Browse installed models: Checkpoint, LoRA, VAE, ControlNet, UNET, TextEncoder, Hypernetwork, Embedding with sub-tab switching",
|
||||
helpModels2: "Thumbnail, Card, and Table view modes with pagination",
|
||||
helpModels3: "Search, tag filter, group filter, favorites filter, and status filter (All / Enabled only / Disabled only)",
|
||||
helpModels4: "Side panel: Info (file path, tags, memo), Groups management, CivitAI integration",
|
||||
helpModels5: "CivitAI integration: fetch model info by SHA256 hash, batch fetch per model type",
|
||||
helpModels6: "Detail modal: preview image, CivitAI info (base model, trained words, tags), thumbnail change",
|
||||
helpModels7: "Group management: create, rename, delete groups and assign/remove models",
|
||||
helpModels8: "GenUI Model button: apply the selected model to the corresponding node in GenerateUI's current workflow (Checkpoint / LoRA / VAE / ControlNet / UNET / TextEncoder)",
|
||||
helpModels9: "User-defined badges: assign free-label badges with custom colors shared with the Workflow tab",
|
||||
helpModels10: "Enable/Disable models: toggle visibility in ComfyUI by renaming file extension (.disabled suffix). Disable per model (⏸ button on each card) or per group (Enable All / Disable All in Group panel). Changes take effect after ComfyUI refresh.",
|
||||
helpModels11: "Multi-select & bulk operations: click Select to enter selection mode, check multiple models, then use the bulk action bar to add/remove from groups or permanently delete files (model file + preview images + sidecar files such as .json/.info).",
|
||||
helpGalleryTitle: "Gallery Tab",
|
||||
helpGallery1: "Browse images in the ComfyUI output folder — set the folder path in Settings > Gallery Output Folder",
|
||||
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",
|
||||
helpSidepanelTitle: "Workflow Studio Library (ComfyUI Side Panel)",
|
||||
helpSidepanel1: "Open from the Workflow Studio Library button in the ComfyUI toolbar",
|
||||
helpSidepanel2: "Workflows tab: browse favorite workflows, filter by model type, and filter by group",
|
||||
helpSidepanel3: "Nodes tab: browse favorite nodes, node sets, and node groups",
|
||||
helpSidepanel2: "Workflows tab: All / ★ Favorites / Groups sub-tabs; ★ shown for favorites in All view",
|
||||
helpSidepanel3: "Nodes tab: All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Package sub-tabs; Category and Package show a dropdown to filter nodes by category or custom node package",
|
||||
helpSidepanel4: "Prompts tab: browse prompt presets with All/Favorites/Categories sub-tabs",
|
||||
helpSidepanel5: "Drag & drop workflows onto the canvas to load them",
|
||||
helpSidepanel6: "Drag & drop nodes/node sets onto the canvas to place them",
|
||||
@@ -256,6 +403,8 @@ const LANGUAGES = {
|
||||
helpSidepanel8: "Copy individual positive (P) or negative (N) prompts from sidebar items",
|
||||
helpSidepanel9: "Double-click items to load/place without dragging",
|
||||
helpSidepanel10: "Search within each sub-tab to quickly find items",
|
||||
helpSidepanel11: "Models tab: All / ★ Favorites / Groups / By Type sub-tabs",
|
||||
helpSidepanel12: "⚙ Theme button (header): customize panel background, sub-header background, text, border, and secondary text colors — changes are saved to localStorage and applied on next open",
|
||||
helpShortcutsTitle: "Keyboard Shortcuts",
|
||||
helpShortcuts1: "Escape: Close modal/panel",
|
||||
helpShortcuts2: "Enter: Confirm rename, send chat",
|
||||
@@ -309,6 +458,14 @@ const LANGUAGES = {
|
||||
eagleIntegration: "Eagle Integration (Optional)",
|
||||
eagleUrl: "Eagle URL",
|
||||
eagleAutoSave: "Auto-save generated images to Eagle",
|
||||
dataManagement: "Data Management",
|
||||
dataManagementHint: "Export all plugin data (settings, metadata, prompts, etc.) to a JSON file, or import a previously exported file to restore data. After importing, restart ComfyUI to apply changes.",
|
||||
exportData: "Export",
|
||||
importData: "Import",
|
||||
exportSuccess: "Export complete",
|
||||
exportError: "Export failed",
|
||||
importSuccess: "Import complete",
|
||||
importError: "Import failed",
|
||||
saveSettings: "Save Settings",
|
||||
settingsSaved: "Settings saved",
|
||||
ollamaSaved: "Ollama settings saved",
|
||||
@@ -327,6 +484,47 @@ const LANGUAGES = {
|
||||
themeMaterial: "Material UI",
|
||||
themeMonotoneAccent: "Monotone + Accent",
|
||||
themeCorporate: "Corporate Trust",
|
||||
// -- Theme Customizer --
|
||||
themeCustomize: "Customize",
|
||||
themeCustomizeColors: "Color Override",
|
||||
themeCustomizeBgPattern: "Background Pattern",
|
||||
themeColorBg: "Background",
|
||||
themeColorBgSec: "Secondary BG",
|
||||
themeColorSurface: "Surface",
|
||||
themeColorText: "Text",
|
||||
themeColorPrimary: "Primary",
|
||||
themeColorAccent: "Accent",
|
||||
themePatternNone: "None",
|
||||
themePatternStripeH: "Stripe H",
|
||||
themePatternStripeV: "Stripe V",
|
||||
themePatternStripeD: "Stripe D",
|
||||
themePatternDot: "Polka Dot",
|
||||
themePatternCheck: "Checkerboard",
|
||||
themePatternSvg: "SVG File",
|
||||
themePatternColor: "Pattern Color",
|
||||
themePatternOpacity: "Opacity",
|
||||
themePatternScale: "Scale",
|
||||
themePatternGap: "Gap",
|
||||
themeCustomizerReset: "Reset Customization",
|
||||
themeCustomizerApply: "Apply & Save",
|
||||
// -- Font --
|
||||
themeCustomizeFont: "Font",
|
||||
themeFontDefault: "System Default",
|
||||
themeFontNotoSans: "Noto Sans JP",
|
||||
themeFontZenMaru: "Zen Maru Gothic",
|
||||
themeFontMPlusRound: "M PLUS Rounded",
|
||||
themeFontKosugiMaru: "Kosugi Maru",
|
||||
themeFontSawarabi: "Sawarabi Gothic",
|
||||
themeFontBizUdp: "BIZ UDPGothic",
|
||||
themeFontDotGothic: "DotGothic16",
|
||||
themeFontHachiMaru: "Hachi Maru Pop",
|
||||
themeFontDelaGothic: "Dela Gothic One",
|
||||
themeFontReggaeOne: "Reggae One",
|
||||
themeFontRocknRoll: "RocknRoll One",
|
||||
themeFontStick: "Stick",
|
||||
themeFontTrainOne: "Train One",
|
||||
themeFontSpaceMono: "Space Mono",
|
||||
themeFontFiraCode: "Fira Code",
|
||||
},
|
||||
|
||||
ja: {
|
||||
@@ -345,6 +543,7 @@ const LANGUAGES = {
|
||||
// -- Tabs --
|
||||
tabWorkflow: "ワークフロー",
|
||||
tabGenerate: "生成UI",
|
||||
tabGallery: "ギャラリー",
|
||||
tabSettings: "設定",
|
||||
|
||||
// -- Workflow toolbar --
|
||||
@@ -356,6 +555,13 @@ const LANGUAGES = {
|
||||
import: "インポート",
|
||||
badgeColors: "バッジ色",
|
||||
resetColors: "リセット",
|
||||
badgeManage: "バッジ管理",
|
||||
badgeAdd: "追加",
|
||||
badgeDelete: "削除",
|
||||
badgeNone: "バッジが未定義です。",
|
||||
badgeNoneHint: "バッジが未定義です。⚙ バッジ管理から追加できます。",
|
||||
badgeNewLabel: "バッジ名...",
|
||||
badgeColorHint: "色を変更",
|
||||
defaultView: "デフォルト表示",
|
||||
viewThumbnail: "サムネイル",
|
||||
viewCard: "カード",
|
||||
@@ -485,6 +691,10 @@ const LANGUAGES = {
|
||||
tabNodes: "ノード",
|
||||
nodesAllNodes: "全ノード",
|
||||
nodesNodeSets: "ノードセット",
|
||||
nodesCategoryTab: "カテゴリ",
|
||||
nodesPackageTab: "パッケージ",
|
||||
nodesSelectCategory: "カテゴリを選択...",
|
||||
nodesSelectPackage: "パッケージを選択...",
|
||||
nodesSearchPlaceholder: "ノードを検索...",
|
||||
nodesAllCategories: "全カテゴリ",
|
||||
nodesAllPackages: "全パッケージ",
|
||||
@@ -529,6 +739,114 @@ const LANGUAGES = {
|
||||
nodesConnectToComfyUI: "ComfyUIに接続してノードを読み込みます。設定タブを確認してください。",
|
||||
nodesClickToLoad: "クリックしてノードを読み込み...",
|
||||
|
||||
// -- Models tab --
|
||||
tabModels: "モデル",
|
||||
modelsCheckpoint: "Checkpoint",
|
||||
modelsLora: "LoRA",
|
||||
modelsVae: "VAE",
|
||||
modelsControlnet: "ControlNet",
|
||||
modelsUnet: "UNET",
|
||||
modelsTextencoder: "TextEncoder",
|
||||
modelsSearchPlaceholder: "モデルを検索...",
|
||||
modelsRefresh: "更新",
|
||||
modelsClickToLoad: "更新ボタンでモデルを読み込み...",
|
||||
modelsLoading: "モデルを読み込み中...",
|
||||
modelsLoadError: "モデルの読み込みエラー",
|
||||
modelsNoModels: "モデルが見つかりません",
|
||||
modelsAllTags: "すべてのタグ",
|
||||
modelsFileName: "ファイル名",
|
||||
modelsSubdir: "サブディレクトリ",
|
||||
modelsExt: "拡張子",
|
||||
modelsTags: "タグ",
|
||||
modelsTagsPlaceholder: "タグ1, タグ2, ...",
|
||||
modelsModelType: "モデルタイプ",
|
||||
modelsBadges: "バッジ",
|
||||
modelsInfo: "情報",
|
||||
modelsFavorite: "お気に入り",
|
||||
modelsMemo: "メモ",
|
||||
modelsMemoPlaceholder: "このモデルについてのメモ...",
|
||||
modelsSave: "保存",
|
||||
modelsSaved: "メタデータを保存しました",
|
||||
modelsGenUIBtn: "GenUI Model",
|
||||
modelsGenUITitle: "GenerateUIにこのモデルをセット",
|
||||
modelsGenUIUnsupported: "このモデルタイプはGenerateUIに設定できません",
|
||||
modelsGenUINoWorkflow: "GenerateUIにワークフローが読み込まれていません",
|
||||
modelsGenUINoNode: (type) => `現在のワークフローに${type}ノードが見つかりません`,
|
||||
modelsCopyName: "クリックでモデル名をコピー",
|
||||
modelsCopiedName: "モデル名をコピーしました",
|
||||
modelsFilePath: "ファイルパス",
|
||||
modelsCopyPath: "クリックでファイルパスをコピー",
|
||||
modelsCopiedPath: "ファイルパスをコピーしました",
|
||||
modelsNoPreview: "プレビューなし",
|
||||
modelsTagsHint: "(カンマ区切り)",
|
||||
modelsAllDirs: "すべてのフォルダ",
|
||||
modelsAllGroups: "すべてのグループ",
|
||||
modelsCurrentGroups: "所属グループ",
|
||||
modelsNoGroup: "グループに未所属",
|
||||
modelsAssignGroup: "グループに追加",
|
||||
modelsNoGroupAvailable: "グループがありません",
|
||||
modelsAdd: "追加",
|
||||
modelsCreateGroup: "新規グループ作成",
|
||||
modelsGroupName: "グループ名",
|
||||
modelsCreate: "作成",
|
||||
modelsManageGroups: "グループ管理",
|
||||
modelsRename: "名前変更",
|
||||
modelsDelete: "削除",
|
||||
modelsRemoveFromGroup: "グループから除外",
|
||||
modelsGroupExists: "同名のグループが既に存在します",
|
||||
modelsRenamePrompt: "新しいグループ名を入力:",
|
||||
modelsDeleteGroupConfirm: "グループ「{name}」を削除しますか？",
|
||||
modelEnable: "有効化",
|
||||
modelDisable: "無効化",
|
||||
modelDisabled: "無効",
|
||||
modelStatusAll: "すべて",
|
||||
modelStatusEnabled: "有効のみ",
|
||||
modelStatusDisabled: "無効のみ",
|
||||
modelGroupEnableAll: "全て有効化",
|
||||
modelGroupDisableAll: "全て無効化",
|
||||
modelToggleError: "切り替えに失敗しました",
|
||||
modelStatusWarning: "ComfyUIをリフレッシュ後に反映されます",
|
||||
modelSelectMode: "選択",
|
||||
modelSelectExit: "選択終了",
|
||||
modelSelected: "件選択中",
|
||||
modelBulkAddGroup: "グループに追加",
|
||||
modelBulkRemoveGroup: "グループから削除",
|
||||
modelBulkCreateAdd: "作成して追加",
|
||||
modelBulkAddDone: "件をグループに追加しました",
|
||||
modelBulkRemoveDone: "件をグループから削除しました",
|
||||
modelBulkDelete: "ファイルを削除",
|
||||
modelBulkDeleteConfirm: "{count}件のモデルファイルとプレビュー画像を完全に削除しますか？この操作は取り消せません。",
|
||||
modelBulkDeleteDone: "件のモデルファイルを削除しました",
|
||||
modelBulkDeleteError: "一部のモデルの削除に失敗しました",
|
||||
civitaiFetchDesc: "SHA256ハッシュを使用してCivitAIからモデル情報を取得します。",
|
||||
civitaiFetch: "CivitAIから取得",
|
||||
civitaiHashing: "ハッシュ計算中...（大きいファイルは時間がかかります）",
|
||||
civitaiFound: "CivitAI情報を取得しました",
|
||||
civitaiNotFound: "CivitAIにモデルが見つかりません",
|
||||
civitaiError: "CivitAIからの取得エラー",
|
||||
civitaiTriggerWords: "トリガーワード",
|
||||
civitaiCopyWord: "クリックでコピー",
|
||||
civitaiWordCopied: "トリガーワードをコピーしました",
|
||||
civitaiRefresh: "更新",
|
||||
civitaiBatchAllCached: "すべてのモデルのCivitAI情報は取得済みです",
|
||||
civitaiHashing2: "ハッシュ計算中...",
|
||||
civitaiFetching: "取得中...",
|
||||
civitaiBatchDone: (found, notFound) => `CivitAI: ${found}件取得, ${notFound}件未登録`,
|
||||
modelsSideInfo: "基本情報",
|
||||
modelsSideGroup: "グループ",
|
||||
modelsSideCivitai: "CivitAI",
|
||||
gallerySideMetadata: "メタデータ",
|
||||
|
||||
// -- Gallery --
|
||||
galleryAllTags: "すべてのタグ",
|
||||
galleryFolders: "フォルダ",
|
||||
gallerySelectFolder: "フォルダを選択して画像を表示します。",
|
||||
galleryNoImages: "画像が見つかりません。",
|
||||
gallerySearchPlaceholder: "画像を検索...",
|
||||
galleryOutputDir: "ギャラリー Outputフォルダ",
|
||||
galleryOutputDirLabel: "Outputフォルダのパス",
|
||||
galleryOutputDirHint: "ギャラリータブで参照するComfyUIのoutputフォルダを設定します。空欄の場合はComfyUIのデフォルトoutputディレクトリを使用します。",
|
||||
|
||||
// -- Help & Support --
|
||||
tabHelp: "ヘルプ",
|
||||
helpManualTitle: "機能一覧",
|
||||
@@ -541,16 +859,18 @@ const LANGUAGES = {
|
||||
helpWf3: "グループの作成・名前変更・削除、ワークフローの割り当て・解除",
|
||||
helpWf4: "JSON/PNGファイルのインポート（ボタンまたはドラッグ＆ドロップ）",
|
||||
helpWf5: "サイドパネル：サムネイル、JSONビューア（フォーマットバッジ：UI/API/App形式）、クリップボードコピー、グループ管理",
|
||||
helpWf6: "詳細モーダル：名前変更、お気に入り、サムネイル変更、分析、カテゴリオーバーライド、タグ、メモ、AI要約、ComfyUIで開く、生成UIに読み込み、デフォルト設定、削除",
|
||||
helpWf7: "カテゴリごとのバッジ色カスタマイズ",
|
||||
helpWf8: "全ワークフローの入出力一括再分析（P:プロンプト入力、I:画像入力、出力:saveノード）",
|
||||
helpWf6: "詳細モーダル：名前変更、お気に入り、サムネイル変更、バッジ付与、タグ、メモ、AI要約、ComfyUIで開く、生成UIに読み込み、デフォルト設定、削除",
|
||||
helpWf7: "バッジ管理：バッジの追加・名前変更・削除、カスタム色設定（Modelsタブと共有）— ⚙ Badgeボタン",
|
||||
helpGen1: "ComfyUIの接続・切断、接続状態の確認",
|
||||
helpGen2: "Workflowタブからワークフローを読み込み（App形式 .app.json は非対応）",
|
||||
helpGen3: "パラメータ編集：プロンプト、画像（ドラッグ＆ドロップ）、モデル（checkpoint/VAE/LoRA/ControlNet、フィルタ検索）、設定（Steps/CFG/サンプラー/スケジューラ/解像度）、Raw JSON",
|
||||
helpGen4: "シード管理：ランダム / 固定 / 増加 / 減少",
|
||||
helpGen5: "画像生成、進捗表示、生成停止",
|
||||
helpGen6: "メイン画像とサムネイル履歴で結果表示",
|
||||
helpGen7: "Eagle連携：生成画像をEagleへ自動保存",
|
||||
helpGen3: "3タブ構成 — Input（プロンプト＋画像）、Model、Settings — 各タブにRaw JSON列を常時表示",
|
||||
helpGen4: "Inputタブ：左列にPrompt（上段）＋ Image ドラッグ＆ドロップ（下段）",
|
||||
helpGen5: "Modelタブ：Checkpoint/VAE/LoRA/ControlNet/UNET/TextEncoderのセレクタ（フィルタ検索付き）",
|
||||
helpGen6: "Settingsタブ：左列にKSampler（上段）＋ LatentImage（下段）",
|
||||
helpGen7: "Raw JSONを各タブの右列に常時表示 — 直接編集してApplyでワークフロー即時反映",
|
||||
helpGen8: "シード管理：ランダム / 固定 / 増加 / 減少",
|
||||
helpGen9: "画像生成、進捗表示、生成停止、結果表示",
|
||||
helpGen10: "Eagle連携：生成画像をEagleへ自動保存",
|
||||
helpPrompt1: "AIアシスタント（Ollama）：モデル選択、チャットでプロンプト相談、画像添付（ビジョンモデル対応）",
|
||||
helpPrompt2: "AIの応答をGenerateUIのプロンプトに適用",
|
||||
helpPrompt3: "翻訳機能：日⇔英、中⇔英",
|
||||
@@ -559,21 +879,46 @@ const LANGUAGES = {
|
||||
helpPrompt6: "グループ管理：グループ作成、プリセットの割り当て・解除、グループ削除",
|
||||
helpPrompt7: "GenUI Set：プリセットのプロンプトをGenerateUIに直接適用",
|
||||
helpSettings1: "UI言語と要約言語の設定",
|
||||
helpSettings2: "ワークフローデータフォルダのパス変更・リセット",
|
||||
helpSettings3: "ComfyUI接続URL設定と接続テスト",
|
||||
helpSettings4: "Ollama URL、デフォルトモデル、接続テスト",
|
||||
helpSettings5: "デフォルトワークフローの設定・解除",
|
||||
helpSettings6: "Eagle連携URL、自動保存の有効/無効",
|
||||
helpSettings2: "テーマ選択（13種プリセット）＋カスタマイズ：カラー調整、背景パターン（ストライプ、ポルカドット、チェック、SVGタイリング）、フォント選択（日本語デザインフォント含む16種のGoogle Fonts）",
|
||||
helpSettings3: "ワークフローデータフォルダのパス変更・リセット",
|
||||
helpSettings4: "ComfyUI接続URL設定と接続テスト",
|
||||
helpSettings5: "Ollama URL、デフォルトモデル、接続テスト",
|
||||
helpSettings6: "デフォルトワークフローの設定・解除",
|
||||
helpSettings7: "Eagle連携URL、自動保存の有効/無効",
|
||||
helpSettings8: "データ管理：設定・メタデータ・プロンプトなど全データをJSONにエクスポート、またはインポートして復元。インポート後はComfyUIを再起動してください。",
|
||||
helpSettings9: "各セクションはアコーディオン式で折りたたみ可能",
|
||||
helpNodes1: "ノードブラウザ：名前/説明/エイリアス/タグで検索、カテゴリ・パッケージ・タグ・グループ・お気に入りフィルタ",
|
||||
helpNodes2: "カード / テーブル表示モード切り替え（ページネーション付き）",
|
||||
helpNodes3: "ノードのお気に入り登録、カスタムタグの追加で整理",
|
||||
helpNodes4: "ノードグループの作成・名前変更・削除、ノードの割り当て・解除",
|
||||
helpNodes5: "サイドパネル：詳細（クラス名、パッケージ、カテゴリ、説明、フラグ）、I/O仕様（入出力の型・デフォルト値）、グループ管理",
|
||||
helpNodes6: "ノードセット：再利用可能なノードコレクションの作成（説明、タグ、ノード間リンク定義付き）",
|
||||
helpModels1: "インストール済みモデルの閲覧：Checkpoint、LoRA、VAE、ControlNet、UNET、TextEncoder、Hypernetwork、Embeddingをサブタブで切り替え",
|
||||
helpModels2: "サムネイル / カード / テーブル表示モード切り替え（ページネーション付き）",
|
||||
helpModels3: "検索、タグフィルタ、グループフィルタ、お気に入りフィルタ、ステータスフィルタ（すべて / 有効のみ / 無効のみ）",
|
||||
helpModels4: "サイドパネル：基本情報（ファイルパス、タグ、メモ）、グループ管理、CivitAI連携",
|
||||
helpModels5: "CivitAI連携：SHA256ハッシュでモデル情報取得、モデルタイプごとの一括取得",
|
||||
helpModels6: "詳細モーダル：プレビュー画像、CivitAI情報（ベースモデル、トリガーワード、タグ）、サムネイル変更",
|
||||
helpModels7: "グループ管理：グループの作成・名前変更・削除、モデルの割り当て・解除",
|
||||
helpModels8: "GenUI Modelボタン：選択モデルをGenerateUIの現在のワークフローの該当ノードに直接適用（Checkpoint / LoRA / VAE / ControlNet / UNET / TextEncoder）",
|
||||
helpModels9: "ユーザー定義バッジ：自由ラベルのバッジをモデルに付与（Workflowタブと色パレットを共有）",
|
||||
helpModels10: "モデルの有効/無効切り替え：拡張子リネーム（.disabledサフィックス）でComfyUIへの表示を制御。各カードの⏸ボタンで単体操作、グループパネルの「全て有効化 / 全て無効化」でグループ一括操作。変更はComfyUIリフレッシュ後に反映。",
|
||||
helpModels11: "複数選択と一括操作：「選択」ボタンで選択モードに入り複数モデルにチェックを入れると、一括操作バーからグループへの追加/削除、またはファイルの完全削除（モデルファイル＋プレビュー画像＋.json/.infoなどのサイドカーファイル）が行えます。",
|
||||
helpGalleryTitle: "Galleryタブ",
|
||||
helpGallery1: "ComfyUIの出力フォルダ内画像を閲覧 — Settings > Gallery Output Folder でフォルダパスを設定可能",
|
||||
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: "フォルダツリー：フォルダをクリックして画像を読み込む；▶矢印でサブフォルダを展開",
|
||||
helpSidepanelTitle: "Workflow Studio Library（ComfyUIサイドパネル）",
|
||||
helpSidepanel1: "ComfyUIツールバーのWorkflow Studio Libraryボタンから開く",
|
||||
helpSidepanel2: "Workflowsタブ：お気に入りワークフロー閲覧、モデル種別フィルタ、グループフィルタ",
|
||||
helpSidepanel3: "Nodesタブ：お気に入りノード、ノードセット、ノードグループの閲覧",
|
||||
helpSidepanel2: "Workflowsタブ：All / ★ Favorites / Groupsサブタブ、Allビューでお気に入りに★表示",
|
||||
helpSidepanel3: "Nodesタブ：All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Packageサブタブ；CategoryとPackageはドロップダウンでカテゴリ・カスタムノードパッケージ別に絞り込み可能",
|
||||
helpSidepanel4: "Promptsタブ：プロンプトプリセットの閲覧（All/お気に入り/カテゴリ サブタブ）",
|
||||
helpSidepanel5: "ワークフローをキャンバスにドラッグ＆ドロップで読み込み",
|
||||
helpSidepanel6: "ノード/ノードセットをキャンバスにドラッグ＆ドロップで配置",
|
||||
@@ -581,6 +926,8 @@ const LANGUAGES = {
|
||||
helpSidepanel8: "サイドバーアイテムからポジティブ（P）/ネガティブ（N）プロンプトを個別コピー",
|
||||
helpSidepanel9: "ダブルクリックでもアイテムの読み込み・配置が可能",
|
||||
helpSidepanel10: "各サブタブ内で検索してアイテムをすばやく検索",
|
||||
helpSidepanel11: "Modelsタブ：All / ★ Favorites / Groups / By Typeサブタブ",
|
||||
helpSidepanel12: "⚙ テーマボタン（ヘッダー）：パネル背景・サブヘッダー背景・文字色・ボーダー・補助テキスト色をカスタマイズ可能、設定はlocalStorageに保存され次回起動時も反映",
|
||||
helpShortcutsTitle: "キーボード操作",
|
||||
helpShortcuts1: "Escape：モーダル・パネルを閉じる",
|
||||
helpShortcuts2: "Enter：名前変更の確定、チャット送信",
|
||||
@@ -634,6 +981,14 @@ const LANGUAGES = {
|
||||
eagleIntegration: "Eagle 連携 (オプション)",
|
||||
eagleUrl: "Eagle URL",
|
||||
eagleAutoSave: "生成画像をEagleに自動保存",
|
||||
dataManagement: "データ管理",
|
||||
dataManagementHint: "設定・メタデータ・プロンプトなど全データをJSONファイルにエクスポート、またはインポートして復元できます。インポート後はComfyUIを再起動してください。",
|
||||
exportData: "エクスポート",
|
||||
importData: "インポート",
|
||||
exportSuccess: "エクスポート完了",
|
||||
exportError: "エクスポート失敗",
|
||||
importSuccess: "インポート完了",
|
||||
importError: "インポート失敗",
|
||||
saveSettings: "設定を保存",
|
||||
settingsSaved: "設定を保存しました",
|
||||
ollamaSaved: "Ollama設定を保存しました",
|
||||
@@ -652,6 +1007,47 @@ const LANGUAGES = {
|
||||
themeMaterial: "Material UI (マテリアル)",
|
||||
themeMonotoneAccent: "Monotone + Accent",
|
||||
themeCorporate: "Corporate Trust (企業向け)",
|
||||
// -- Theme Customizer --
|
||||
themeCustomize: "カスタマイズ",
|
||||
themeCustomizeColors: "カラー調整",
|
||||
themeCustomizeBgPattern: "背景パターン",
|
||||
themeColorBg: "背景",
|
||||
themeColorBgSec: "サブ背景",
|
||||
themeColorSurface: "サーフェス",
|
||||
themeColorText: "テキスト",
|
||||
themeColorPrimary: "プライマリ",
|
||||
themeColorAccent: "アクセント",
|
||||
themePatternNone: "なし",
|
||||
themePatternStripeH: "横ストライプ",
|
||||
themePatternStripeV: "縦ストライプ",
|
||||
themePatternStripeD: "斜めストライプ",
|
||||
themePatternDot: "ポルカドット",
|
||||
themePatternCheck: "チェック",
|
||||
themePatternSvg: "SVGファイル",
|
||||
themePatternColor: "パターン色",
|
||||
themePatternOpacity: "不透明度",
|
||||
themePatternScale: "サイズ",
|
||||
themePatternGap: "間隔",
|
||||
themeCustomizerReset: "カスタマイズをリセット",
|
||||
themeCustomizerApply: "適用して保存",
|
||||
// -- Font --
|
||||
themeCustomizeFont: "フォント",
|
||||
themeFontDefault: "システム標準",
|
||||
themeFontNotoSans: "Noto Sans JP",
|
||||
themeFontZenMaru: "Zen丸ゴシック",
|
||||
themeFontMPlusRound: "M PLUS 丸ゴシック",
|
||||
themeFontKosugiMaru: "小杉丸ゴシック",
|
||||
themeFontSawarabi: "さわらびゴシック",
|
||||
themeFontBizUdp: "BIZ UDPゴシック",
|
||||
themeFontDotGothic: "ドットゴシック16",
|
||||
themeFontHachiMaru: "はちまるポップ",
|
||||
themeFontDelaGothic: "デラゴシック",
|
||||
themeFontReggaeOne: "レゲエ One",
|
||||
themeFontRocknRoll: "ロックンロール",
|
||||
themeFontStick: "ステッキ",
|
||||
themeFontTrainOne: "トレイン One",
|
||||
themeFontSpaceMono: "Space Mono",
|
||||
themeFontFiraCode: "Fira Code",
|
||||
},
|
||||
|
||||
zh: {
|
||||
@@ -670,6 +1066,7 @@ const LANGUAGES = {
|
||||
// -- Tabs --
|
||||
tabWorkflow: "工作流",
|
||||
tabGenerate: "生成UI",
|
||||
tabGallery: "图库",
|
||||
tabSettings: "设置",
|
||||
|
||||
// -- Workflow toolbar --
|
||||
@@ -681,6 +1078,13 @@ const LANGUAGES = {
|
||||
import: "导入",
|
||||
badgeColors: "标签颜色",
|
||||
resetColors: "重置",
|
||||
badgeManage: "管理标签",
|
||||
badgeAdd: "添加",
|
||||
badgeDelete: "删除",
|
||||
badgeNone: "尚未定义标签。",
|
||||
badgeNoneHint: "尚未定义标签。点击 ⚙ 管理标签来添加。",
|
||||
badgeNewLabel: "标签名称...",
|
||||
badgeColorHint: "更改颜色",
|
||||
defaultView: "默认视图",
|
||||
viewThumbnail: "缩略图",
|
||||
viewCard: "卡片",
|
||||
@@ -806,6 +1210,10 @@ const LANGUAGES = {
|
||||
tabNodes: "节点",
|
||||
nodesAllNodes: "所有节点",
|
||||
nodesNodeSets: "节点集",
|
||||
nodesCategoryTab: "分类",
|
||||
nodesPackageTab: "包",
|
||||
nodesSelectCategory: "选择分类...",
|
||||
nodesSelectPackage: "选择包...",
|
||||
nodesSearchPlaceholder: "搜索节点...",
|
||||
nodesAllCategories: "所有分类",
|
||||
nodesAllPackages: "所有包",
|
||||
@@ -850,6 +1258,114 @@ const LANGUAGES = {
|
||||
nodesConnectToComfyUI: "连接ComfyUI以加载节点。请检查设置选项卡。",
|
||||
nodesClickToLoad: "点击加载节点...",
|
||||
|
||||
// -- Models tab --
|
||||
tabModels: "模型",
|
||||
modelsCheckpoint: "Checkpoint",
|
||||
modelsLora: "LoRA",
|
||||
modelsVae: "VAE",
|
||||
modelsControlnet: "ControlNet",
|
||||
modelsUnet: "UNET",
|
||||
modelsTextencoder: "TextEncoder",
|
||||
modelsSearchPlaceholder: "搜索模型...",
|
||||
modelsRefresh: "刷新",
|
||||
modelsClickToLoad: "点击刷新加载模型...",
|
||||
modelsLoading: "正在加载模型...",
|
||||
modelsLoadError: "加载模型出错",
|
||||
modelsNoModels: "未找到模型",
|
||||
modelsAllTags: "所有标签",
|
||||
modelsFileName: "文件名",
|
||||
modelsSubdir: "子目录",
|
||||
modelsExt: "扩展名",
|
||||
modelsTags: "标签",
|
||||
modelsTagsPlaceholder: "标签1, 标签2, ...",
|
||||
modelsModelType: "模型类型",
|
||||
modelsBadges: "标签",
|
||||
modelsInfo: "信息",
|
||||
modelsFavorite: "收藏",
|
||||
modelsMemo: "备注",
|
||||
modelsMemoPlaceholder: "关于此模型的备注...",
|
||||
modelsSave: "保存",
|
||||
modelsSaved: "元数据已保存",
|
||||
modelsGenUIBtn: "GenUI Model",
|
||||
modelsGenUITitle: "在GenerateUI中设置此模型",
|
||||
modelsGenUIUnsupported: "此模型类型无法在GenerateUI中设置",
|
||||
modelsGenUINoWorkflow: "GenerateUI中未加载工作流",
|
||||
modelsGenUINoNode: (type) => `当前工作流中未找到${type}节点`,
|
||||
modelsCopyName: "点击复制模型名称",
|
||||
modelsCopiedName: "模型名称已复制",
|
||||
modelsFilePath: "文件路径",
|
||||
modelsCopyPath: "点击复制文件路径",
|
||||
modelsCopiedPath: "文件路径已复制",
|
||||
modelsNoPreview: "无预览",
|
||||
modelsTagsHint: "(逗号分隔)",
|
||||
modelsAllDirs: "所有文件夹",
|
||||
modelsAllGroups: "所有分组",
|
||||
modelsCurrentGroups: "当前分组",
|
||||
modelsNoGroup: "未分配到任何分组",
|
||||
modelsAssignGroup: "分配到分组",
|
||||
modelsNoGroupAvailable: "没有可用的分组",
|
||||
modelsAdd: "添加",
|
||||
modelsCreateGroup: "创建新分组",
|
||||
modelsGroupName: "分组名称",
|
||||
modelsCreate: "创建",
|
||||
modelsManageGroups: "分组管理",
|
||||
modelsRename: "重命名",
|
||||
modelsDelete: "删除",
|
||||
modelsRemoveFromGroup: "从分组移除",
|
||||
modelsGroupExists: "同名分组已存在",
|
||||
modelsRenamePrompt: "输入新分组名称:",
|
||||
modelsDeleteGroupConfirm: "删除分组「{name}」？",
|
||||
modelEnable: "启用",
|
||||
modelDisable: "禁用",
|
||||
modelDisabled: "已禁用",
|
||||
modelStatusAll: "全部",
|
||||
modelStatusEnabled: "仅启用",
|
||||
modelStatusDisabled: "仅禁用",
|
||||
modelGroupEnableAll: "全部启用",
|
||||
modelGroupDisableAll: "全部禁用",
|
||||
modelToggleError: "切换失败",
|
||||
modelStatusWarning: "刷新ComfyUI后生效",
|
||||
modelSelectMode: "选择",
|
||||
modelSelectExit: "退出选择",
|
||||
modelSelected: "个已选中",
|
||||
modelBulkAddGroup: "添加到分组",
|
||||
modelBulkRemoveGroup: "从分组移除",
|
||||
modelBulkCreateAdd: "创建并添加",
|
||||
modelBulkAddDone: "个模型已添加到分组",
|
||||
modelBulkRemoveDone: "个模型已从分组移除",
|
||||
modelBulkDelete: "删除文件",
|
||||
modelBulkDeleteConfirm: "永久删除 {count} 个模型文件及其预览图？此操作无法撤销。",
|
||||
modelBulkDeleteDone: "个模型文件已删除",
|
||||
modelBulkDeleteError: "部分模型删除失败",
|
||||
civitaiFetchDesc: "使用SHA256哈希从CivitAI获取模型信息。",
|
||||
civitaiFetch: "从CivitAI获取",
|
||||
civitaiHashing: "计算哈希中...（大文件可能需要较长时间）",
|
||||
civitaiFound: "已加载CivitAI信息",
|
||||
civitaiNotFound: "在CivitAI上未找到该模型",
|
||||
civitaiError: "从CivitAI获取时出错",
|
||||
civitaiTriggerWords: "触发词",
|
||||
civitaiCopyWord: "点击复制",
|
||||
civitaiWordCopied: "触发词已复制",
|
||||
civitaiRefresh: "刷新",
|
||||
civitaiBatchAllCached: "所有模型的CivitAI信息已获取",
|
||||
civitaiHashing2: "计算哈希中...",
|
||||
civitaiFetching: "获取中...",
|
||||
civitaiBatchDone: (found, notFound) => `CivitAI: ${found}个已找到, ${notFound}个未找到`,
|
||||
modelsSideInfo: "基本信息",
|
||||
modelsSideGroup: "分组",
|
||||
modelsSideCivitai: "CivitAI",
|
||||
gallerySideMetadata: "元数据",
|
||||
|
||||
// -- Gallery --
|
||||
galleryAllTags: "所有标签",
|
||||
galleryFolders: "文件夹",
|
||||
gallerySelectFolder: "选择文件夹以浏览图片。",
|
||||
galleryNoImages: "未找到图片。",
|
||||
gallerySearchPlaceholder: "搜索图片...",
|
||||
galleryOutputDir: "图库输出文件夹",
|
||||
galleryOutputDirLabel: "输出文件夹路径",
|
||||
galleryOutputDirHint: "设置图库标签页浏览的ComfyUI输出文件夹。留空则使用ComfyUI默认输出目录。",
|
||||
|
||||
// -- Help & Support --
|
||||
tabHelp: "帮助",
|
||||
helpManualTitle: "功能列表",
|
||||
@@ -862,16 +1378,18 @@ const LANGUAGES = {
|
||||
helpWf3: "创建、重命名、删除分组，分配/移除工作流",
|
||||
helpWf4: "通过按钮或拖放导入JSON/PNG文件",
|
||||
helpWf5: "侧面板：缩略图、JSON查看器（格式徽章：UI/API/App）、剪贴板复制、分组管理",
|
||||
helpWf6: "详情弹窗：重命名、收藏、缩略图更换、分析、分类覆盖、标签、备注、AI摘要、在ComfyUI中打开、加载到生成UI、设为默认、删除",
|
||||
helpWf7: "按分类自定义徽章颜色",
|
||||
helpWf8: "批量重新分析所有工作流I/O（P:提示词节点、I:图片节点、输出:保存节点）",
|
||||
helpWf6: "详情弹窗：重命名、收藏、缩略图更换、徽章分配、标签、备注、AI摘要、在ComfyUI中打开、加载到生成UI、设为默认、删除",
|
||||
helpWf7: "徽章管理：添加、重命名、删除徽章并自定义颜色（与Models标签共享）— ⚙ Badge按钮",
|
||||
helpGen1: "连接/断开ComfyUI，检查连接状态",
|
||||
helpGen2: "从工作流标签页加载工作流（不支持App格式.app.json）",
|
||||
helpGen3: "编辑参数：提示词、图片（拖放）、模型（checkpoint/VAE/LoRA/ControlNet含筛选）、设置（Steps/CFG/采样器/调度器/分辨率）、Raw JSON",
|
||||
helpGen4: "种子管理：随机/固定/递增/递减",
|
||||
helpGen5: "生成图片、进度显示、停止生成",
|
||||
helpGen6: "主图和缩略图历史查看结果",
|
||||
helpGen7: "Eagle集成：自动保存生成图片到Eagle",
|
||||
helpGen3: "3标签布局 — Input（提示词+图片）、Model、Settings — 每个标签含Raw JSON列实时预览",
|
||||
helpGen4: "Input标签：左列为Prompt（上）+ Image拖放（下）",
|
||||
helpGen5: "Model标签：Checkpoint/VAE/LoRA/ControlNet/UNET/TextEncoder选择器（含筛选）",
|
||||
helpGen6: "Settings标签：左列为KSampler（上）+ LatentImage（下）",
|
||||
helpGen7: "Raw JSON在每个标签右列常驻显示 — 直接编辑并Apply即时重载工作流",
|
||||
helpGen8: "种子管理：随机/固定/递增/递减",
|
||||
helpGen9: "生成图片、进度显示、停止生成、查看结果",
|
||||
helpGen10: "Eagle集成：自动保存生成图片到Eagle",
|
||||
helpPrompt1: "AI助手（Ollama）：模型选择、聊天咨询提示词、图片附件（视觉模型）",
|
||||
helpPrompt2: "将AI回复应用到生成UI的提示词",
|
||||
helpPrompt3: "翻译功能：日\u2194英、中\u2194英",
|
||||
@@ -880,21 +1398,46 @@ const LANGUAGES = {
|
||||
helpPrompt6: "组管理：创建组、分配/移除预设、删除组",
|
||||
helpPrompt7: "GenUI Set：将预设提示词直接应用到生成UI",
|
||||
helpSettings1: "UI语言和摘要语言设置",
|
||||
helpSettings2: "工作流数据文件夹路径更改/重置",
|
||||
helpSettings3: "ComfyUI连接URL设置和测试",
|
||||
helpSettings4: "Ollama URL、默认模型、连接测试",
|
||||
helpSettings5: "默认工作流设置/取消",
|
||||
helpSettings6: "Eagle集成URL、自动保存开关",
|
||||
helpSettings2: "主题选择（13种预设）+ 自定义：颜色调整、背景图案（条纹、波点、棋盘格、SVG平铺）、字体选择（含日文显示字体在内的16种Google Fonts）",
|
||||
helpSettings3: "工作流数据文件夹路径更改/重置",
|
||||
helpSettings4: "ComfyUI连接URL设置和测试",
|
||||
helpSettings5: "Ollama URL、默认模型、连接测试",
|
||||
helpSettings6: "默认工作流设置/取消",
|
||||
helpSettings7: "Eagle集成URL、自动保存开关",
|
||||
helpSettings8: "数据管理：将所有插件数据（设置、元数据、提示词等）导出为JSON文件，或导入以恢复。导入后请重启ComfyUI。",
|
||||
helpSettings9: "各部分可折叠展开",
|
||||
helpNodes1: "节点浏览器：按名称/描述/别名/标签搜索，按分类、包、标签、组、收藏筛选",
|
||||
helpNodes2: "卡片和表格视图模式切换（带分页）",
|
||||
helpNodes3: "收藏节点，添加自定义标签进行整理",
|
||||
helpNodes4: "创建、重命名、删除节点组，分配/移除节点",
|
||||
helpNodes5: "侧面板：详情（类名、包、分类、描述、标志）、I/O规格（输入输出类型和默认值）、组管理",
|
||||
helpNodes6: "节点集：创建可复用的节点集合（含描述、标签、节点间链接定义）",
|
||||
helpModels1: "浏览已安装模型：Checkpoint、LoRA、VAE、ControlNet、UNET、TextEncoder、Hypernetwork、Embedding，通过子标签切换",
|
||||
helpModels2: "缩略图、卡片和表格视图模式切换（带分页）",
|
||||
helpModels3: "搜索、标签筛选、分组筛选、收藏筛选、状态筛选（全部 / 仅启用 / 仅禁用）",
|
||||
helpModels4: "侧面板：基本信息（文件路径、标签、备注）、分组管理、CivitAI集成",
|
||||
helpModels5: "CivitAI集成：通过SHA256哈希获取模型信息，按模型类型批量获取",
|
||||
helpModels6: "详情弹窗：预览图片、CivitAI信息（基础模型、触发词、标签）、缩略图更改",
|
||||
helpModels7: "分组管理：创建、重命名、删除分组，分配/移除模型",
|
||||
helpModels8: "GenUI Model按钮：将选中模型直接应用到GenerateUI当前工作流的对应节点（Checkpoint / LoRA / VAE / ControlNet / UNET / TextEncoder）",
|
||||
helpModels9: "用户自定义徽章：为模型添加自由标签徽章（颜色调色板与Workflow标签共享）",
|
||||
helpModels10: "模型启用/禁用：通过重命名文件扩展名（添加.disabled后缀）控制ComfyUI中的显示。点击每个卡片上的⏸按钮单独操作，或在分组面板中使用「全部启用/全部禁用」进行批量操作。更改在刷新ComfyUI后生效。",
|
||||
helpModels11: "多选与批量操作：点击「选择」按钮进入选择模式，勾选多个模型后，可通过批量操作栏将其添加/移出分组，或永久删除文件（模型文件＋预览图＋.json/.info等附属文件）。",
|
||||
helpGalleryTitle: "图库标签页 (Gallery)",
|
||||
helpGallery1: "浏览 ComfyUI 输出文件夹中的图像 — 可以在 设置 > 图库输出文件夹 中设置文件夹路径",
|
||||
helpGallery2: "三列布局：文件夹树（左） | 图像网格（中） | 详情面板（右）",
|
||||
helpGallery3: "缩略图和表格视图模式；双击任何图像可在全屏灯箱中打开",
|
||||
helpGallery4: "工具栏过滤器：收藏 (★)、文本搜索、标签过滤、分组过滤、按日期/名称排序",
|
||||
helpGallery5: "使用 Ctrl+点击 多选 — 批量操作：添加到分组、全部收藏、取消全部收藏",
|
||||
helpGallery6: "详情面板 — 信息(Info)标签：文件名、大小、日期、标签（添加/移除）、包含保存功能的备注",
|
||||
helpGallery7: "详情面板 — 元数据(Metadata)标签：ComfyUI 嵌入的内置工作流 JSON 查看器及一键复制功能",
|
||||
helpGallery8: "详情面板 — 分组(Groups)标签：对每个图像进行组的创建、分配、移除、重命名和删除",
|
||||
helpGallery9: "支持 PNG（tEXt/iTXt 元数据）、JPEG、WebP、GIF；对于 PNG 会读取 ComfyUI 内置的 JSON 提取工作流",
|
||||
helpGallery10: "文件夹树：点击文件夹加载其包含的图像；使用 ▶ 箭头展开子文件夹",
|
||||
helpSidepanelTitle: "Workflow Studio Library（ComfyUI侧面板）",
|
||||
helpSidepanel1: "从ComfyUI工具栏的Workflow Studio Library按钮打开",
|
||||
helpSidepanel2: "Workflows标签：浏览收藏工作流、按模型类型筛选、按分组筛选",
|
||||
helpSidepanel3: "Nodes标签：浏览收藏节点、节点集、节点组",
|
||||
helpSidepanel2: "Workflows标签：All / ★ Favorites / Groups子标签，All视图中收藏项显示★",
|
||||
helpSidepanel3: "Nodes标签：All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Package子标签；Category和Package可通过下拉菜单按分类或自定义节点包筛选节点",
|
||||
helpSidepanel4: "Prompts标签：浏览提示词预设（全部/收藏/分类 子标签）",
|
||||
helpSidepanel5: "将工作流拖放到画布上即可加载",
|
||||
helpSidepanel6: "将节点/节点集拖放到画布上即可放置",
|
||||
@@ -902,6 +1445,8 @@ const LANGUAGES = {
|
||||
helpSidepanel8: "从侧边栏项目中单独复制正面（P）或负面（N）提示词",
|
||||
helpSidepanel9: "双击项目也可加载/放置",
|
||||
helpSidepanel10: "在各子标签内搜索快速查找项目",
|
||||
helpSidepanel11: "Models标签：All / ★ Favorites / Groups / By Type子标签",
|
||||
helpSidepanel12: "⚙ 主题按钮（标题栏）：可自定义面板背景、子标题背景、文字颜色、边框及辅助文字颜色，设置保存至localStorage并在下次打开时生效",
|
||||
helpShortcutsTitle: "键盘操作",
|
||||
helpShortcuts1: "Escape：关闭弹窗/面板",
|
||||
helpShortcuts2: "Enter：确认重命名、发送聊天",
|
||||
@@ -955,6 +1500,14 @@ const LANGUAGES = {
|
||||
eagleIntegration: "Eagle 集成 (可选)",
|
||||
eagleUrl: "Eagle URL",
|
||||
eagleAutoSave: "自动保存生成图片到Eagle",
|
||||
dataManagement: "数据管理",
|
||||
dataManagementHint: "将所有插件数据（设置、元数据、提示词等）导出为JSON文件，或导入之前导出的文件以恢复数据。导入后请重启ComfyUI以使更改生效。",
|
||||
exportData: "导出",
|
||||
importData: "导入",
|
||||
exportSuccess: "导出完成",
|
||||
exportError: "导出失败",
|
||||
importSuccess: "导入完成",
|
||||
importError: "导入失败",
|
||||
saveSettings: "保存设置",
|
||||
settingsSaved: "设置已保存",
|
||||
ollamaSaved: "Ollama设置已保存",
|
||||
@@ -973,6 +1526,47 @@ const LANGUAGES = {
|
||||
themeMaterial: "Material UI (材料)",
|
||||
themeMonotoneAccent: "Monotone + Accent",
|
||||
themeCorporate: "Corporate Trust (企业)",
|
||||
// -- Theme Customizer --
|
||||
themeCustomize: "自定义",
|
||||
themeCustomizeColors: "颜色调整",
|
||||
themeCustomizeBgPattern: "背景图案",
|
||||
themeColorBg: "背景",
|
||||
themeColorBgSec: "次要背景",
|
||||
themeColorSurface: "表面",
|
||||
themeColorText: "文字",
|
||||
themeColorPrimary: "主色",
|
||||
themeColorAccent: "强调色",
|
||||
themePatternNone: "无",
|
||||
themePatternStripeH: "横条纹",
|
||||
themePatternStripeV: "竖条纹",
|
||||
themePatternStripeD: "斜条纹",
|
||||
themePatternDot: "波点",
|
||||
themePatternCheck: "棋盘格",
|
||||
themePatternSvg: "SVG文件",
|
||||
themePatternColor: "图案颜色",
|
||||
themePatternOpacity: "不透明度",
|
||||
themePatternScale: "大小",
|
||||
themePatternGap: "间距",
|
||||
themeCustomizerReset: "重置自定义",
|
||||
themeCustomizerApply: "应用并保存",
|
||||
// -- Font --
|
||||
themeCustomizeFont: "字体",
|
||||
themeFontDefault: "系统默认",
|
||||
themeFontNotoSans: "Noto Sans JP",
|
||||
themeFontZenMaru: "Zen丸哥特",
|
||||
themeFontMPlusRound: "M PLUS 圆体",
|
||||
themeFontKosugiMaru: "小杉圆体",
|
||||
themeFontSawarabi: "蕨类哥特",
|
||||
themeFontBizUdp: "BIZ UDP哥特",
|
||||
themeFontDotGothic: "点阵哥特16",
|
||||
themeFontHachiMaru: "Hachi Maru Pop",
|
||||
themeFontDelaGothic: "Dela Gothic One",
|
||||
themeFontReggaeOne: "Reggae One",
|
||||
themeFontRocknRoll: "RocknRoll One",
|
||||
themeFontStick: "Stick",
|
||||
themeFontTrainOne: "Train One",
|
||||
themeFontSpaceMono: "Space Mono",
|
||||
themeFontFiraCode: "Fira Code",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+127
-138
@@ -8,7 +8,6 @@ import { t } from "./i18n.js";
|
||||
|
||||
// ── State ─────────────────────────────────────────────────
|
||||
|
||||
const NODES_PER_PAGE = 50;
|
||||
|
||||
const state = {
|
||||
allNodes: [],
|
||||
@@ -257,111 +256,50 @@ function renderNodeGrid() {
|
||||
|
||||
if (filtered.length === 0) {
|
||||
grid.innerHTML = `<p class="wfm-placeholder">${t("noNodesFound")}</p>`;
|
||||
removePagination();
|
||||
return;
|
||||
}
|
||||
|
||||
if (state.viewMode === "table") {
|
||||
renderNodeTableView(grid, filtered);
|
||||
removePagination();
|
||||
return;
|
||||
}
|
||||
|
||||
// Card view with pagination
|
||||
const totalPages = Math.ceil(filtered.length / NODES_PER_PAGE);
|
||||
if (state.currentPage >= totalPages) state.currentPage = totalPages - 1;
|
||||
if (state.currentPage < 0) state.currentPage = 0;
|
||||
|
||||
const start = state.currentPage * NODES_PER_PAGE;
|
||||
const pageItems = filtered.slice(start, start + NODES_PER_PAGE);
|
||||
|
||||
grid.innerHTML = "";
|
||||
pageItems.forEach(node => {
|
||||
const meta = state.nodeMetadata[node.name] || {};
|
||||
const card = document.createElement("div");
|
||||
card.className = "wfm-card wfm-node-card";
|
||||
if (state.selectedNode && state.selectedNode.name === node.name) {
|
||||
card.classList.add("wfm-card-selected");
|
||||
}
|
||||
card.dataset.nodeName = node.name;
|
||||
filtered.forEach(node => grid.appendChild(createNodeCard(node)));
|
||||
}
|
||||
|
||||
const inputCount = Object.keys(node.input.required || {}).length +
|
||||
Object.keys(node.input.optional || {}).length;
|
||||
const outputCount = (node.output || []).length;
|
||||
const tags = (meta.tags || []).map(tg => `<span class="wfm-tag">#${escapeHtml(tg)}</span>`).join("");
|
||||
const favStar = meta.favorite ? "\u2605" : "\u2606";
|
||||
const favClass = meta.favorite ? "wfm-fav-btn active" : "wfm-fav-btn";
|
||||
function createNodeCard(node) {
|
||||
const meta = state.nodeMetadata[node.name] || {};
|
||||
const card = document.createElement("div");
|
||||
card.className = "wfm-card wfm-node-card";
|
||||
if (state.selectedNode && state.selectedNode.name === node.name) {
|
||||
card.classList.add("wfm-card-selected");
|
||||
}
|
||||
card.dataset.nodeName = node.name;
|
||||
card.style.borderLeft = `3px solid ${packageColor(node.package)}`;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="wfm-card-body">
|
||||
<div class="wfm-card-title" title="${escapeHtml(node.name)}">${escapeHtml(node.display_name)}</div>
|
||||
<div class="wfm-card-meta">
|
||||
${packageBadgeHtml(node.package)}
|
||||
${categoryBadgeHtml(node.category)}
|
||||
</div>
|
||||
<div class="wfm-node-card-io">In: ${inputCount} / Out: ${outputCount}</div>
|
||||
${tags ? `<div class="wfm-card-tags">${tags}</div>` : ""}
|
||||
const tags = (meta.tags || []).map(tg => `<span class="wfm-tag">#${escapeHtml(tg)}</span>`).join("");
|
||||
const favStar = meta.favorite ? "\u2605" : "\u2606";
|
||||
const favClass = meta.favorite ? "wfm-fav-btn active" : "wfm-fav-btn";
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="wfm-card-body">
|
||||
<div class="wfm-card-title" title="${escapeHtml(node.name)}">${escapeHtml(node.display_name)}</div>
|
||||
<div class="wfm-card-meta">
|
||||
${categoryBadgeHtml(node.category)}
|
||||
</div>
|
||||
<button class="${favClass}" title="Favorite">${favStar}</button>`;
|
||||
${tags ? `<div class="wfm-card-tags">${tags}</div>` : ""}
|
||||
</div>
|
||||
<button class="${favClass}" title="Favorite">${favStar}</button>`;
|
||||
|
||||
card.querySelector(".wfm-fav-btn").addEventListener("click", e => {
|
||||
e.stopPropagation();
|
||||
toggleFavorite(node.name, e.currentTarget);
|
||||
});
|
||||
card.addEventListener("click", () => showNodeSidePanel(node));
|
||||
grid.appendChild(card);
|
||||
card.querySelector(".wfm-fav-btn").addEventListener("click", e => {
|
||||
e.stopPropagation();
|
||||
toggleFavorite(node.name, e.currentTarget);
|
||||
});
|
||||
|
||||
renderPagination(filtered.length, totalPages);
|
||||
card.addEventListener("click", () => showNodeSidePanel(node));
|
||||
return card;
|
||||
}
|
||||
|
||||
function renderPagination(totalItems, totalPages) {
|
||||
removePagination();
|
||||
if (totalPages <= 1) return;
|
||||
|
||||
const grid = document.getElementById("wfm-nodes-grid");
|
||||
if (!grid) return;
|
||||
|
||||
const pager = document.createElement("div");
|
||||
pager.id = "wfm-nodes-pagination";
|
||||
pager.className = "wfm-pagination";
|
||||
|
||||
const prevBtn = document.createElement("button");
|
||||
prevBtn.className = "wfm-btn wfm-btn-sm";
|
||||
prevBtn.textContent = "\u25C0";
|
||||
prevBtn.disabled = state.currentPage === 0;
|
||||
prevBtn.addEventListener("click", () => {
|
||||
if (state.currentPage > 0) { state.currentPage--; renderNodeGrid(); scrollGridToTop(); }
|
||||
});
|
||||
|
||||
const nextBtn = document.createElement("button");
|
||||
nextBtn.className = "wfm-btn wfm-btn-sm";
|
||||
nextBtn.textContent = "\u25B6";
|
||||
nextBtn.disabled = state.currentPage >= totalPages - 1;
|
||||
nextBtn.addEventListener("click", () => {
|
||||
if (state.currentPage < totalPages - 1) { state.currentPage++; renderNodeGrid(); scrollGridToTop(); }
|
||||
});
|
||||
|
||||
const info = document.createElement("span");
|
||||
info.className = "wfm-pagination-info";
|
||||
const start = state.currentPage * NODES_PER_PAGE + 1;
|
||||
const end = Math.min((state.currentPage + 1) * NODES_PER_PAGE, totalItems);
|
||||
info.textContent = `${start}-${end} / ${totalItems}`;
|
||||
|
||||
pager.appendChild(prevBtn);
|
||||
pager.appendChild(info);
|
||||
pager.appendChild(nextBtn);
|
||||
|
||||
grid.parentElement.insertBefore(pager, grid.nextSibling);
|
||||
}
|
||||
|
||||
function removePagination() {
|
||||
document.getElementById("wfm-nodes-pagination")?.remove();
|
||||
}
|
||||
|
||||
function scrollGridToTop() {
|
||||
document.getElementById("wfm-nodes-grid")?.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function renderNodeTableView(grid, filtered) {
|
||||
grid.innerHTML = "";
|
||||
@@ -419,9 +357,6 @@ async function toggleFavorite(nodeName, btnEl) {
|
||||
|
||||
function showNodeSidePanel(node) {
|
||||
state.selectedNode = node;
|
||||
const panel = document.getElementById("wfm-nodes-side-panel");
|
||||
if (!panel) return;
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Highlight selected card
|
||||
document.querySelectorAll("#wfm-nodes-grid .wfm-card, #wfm-nodes-grid tr").forEach(el => {
|
||||
@@ -565,42 +500,61 @@ function renderSideGroups(node) {
|
||||
const el = document.getElementById("wfm-nodes-side-group");
|
||||
if (!el) return;
|
||||
|
||||
const groupNames = Object.keys(state.nodeGroups).sort();
|
||||
const memberOf = groupNames.filter(g => (state.nodeGroups[g] || []).includes(node.name));
|
||||
const allGroups = Object.keys(state.nodeGroups).sort();
|
||||
const memberOf = allGroups.filter(g => (state.nodeGroups[g] || []).includes(node.name));
|
||||
const available = allGroups.filter(g => !memberOf.includes(g));
|
||||
|
||||
let html = `<h4 style="margin:0 0 8px;">${t("nodesGroups")}</h4>`;
|
||||
el.innerHTML = `
|
||||
<div style="padding:0 4px;">
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsCurrentGroups")}</div>
|
||||
${memberOf.length === 0
|
||||
? `<p style="color:var(--wfm-text-secondary);font-size:12px;">${t("modelsNoGroup")}</p>`
|
||||
: memberOf.map(g =>
|
||||
`<div style="display:flex;align-items:center;justify-content:space-between;padding:3px 0;">
|
||||
<span style="font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapeHtml(g)}</span>
|
||||
<button class="wfm-btn wfm-btn-sm wfm-btn-danger wfm-node-remove-group" data-group="${escapeHtml(g)}" title="${t("modelsRemoveFromGroup")}">×</button>
|
||||
</div>`
|
||||
).join("")}
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsAssignGroup")}</div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<select id="wfm-nodes-assign-group-select" class="wfm-select" style="flex:1;font-size:12px;padding:3px 6px;">
|
||||
${available.length === 0
|
||||
? `<option value="">${t("modelsNoGroupAvailable")}</option>`
|
||||
: available.map(g => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("")}
|
||||
</select>
|
||||
<button id="wfm-nodes-assign-group-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary"
|
||||
${available.length === 0 ? "disabled" : ""}>${t("modelsAdd")}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsCreateGroup")}</div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<input type="text" id="wfm-nodes-new-group-input" class="wfm-input"
|
||||
style="flex:1;font-size:12px;padding:3px 6px;" placeholder="${t("modelsGroupName")}">
|
||||
<button id="wfm-nodes-create-group-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary">${t("modelsCreate")}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid var(--wfm-border);padding-top:10px;margin-top:4px;">
|
||||
<div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsManageGroups")}</div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<select id="wfm-nodes-manage-group-select" class="wfm-select" style="flex:1;font-size:12px;padding:3px 6px;">
|
||||
${allGroups.length === 0
|
||||
? `<option value="">${t("modelsNoGroupAvailable")}</option>`
|
||||
: allGroups.map(g => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("")}
|
||||
</select>
|
||||
<button id="wfm-nodes-rename-group-btn" class="wfm-btn wfm-btn-sm"
|
||||
${allGroups.length === 0 ? "disabled" : ""} title="${t("modelsRename")}">✎</button>
|
||||
<button id="wfm-nodes-delete-group-btn" class="wfm-btn wfm-btn-sm wfm-btn-danger"
|
||||
${allGroups.length === 0 ? "disabled" : ""} title="${t("modelsDelete")}">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Current groups
|
||||
if (memberOf.length) {
|
||||
html += memberOf.map(g =>
|
||||
`<div class="wfm-node-group-item">
|
||||
<span>${escapeHtml(g)}</span>
|
||||
<button class="wfm-btn wfm-btn-sm wfm-btn-danger wfm-node-remove-group" data-group="${escapeHtml(g)}">${t("nodesRemoveGroup")}</button>
|
||||
</div>`
|
||||
).join("");
|
||||
} else {
|
||||
html += `<p style="color:var(--wfm-text-secondary);font-size:12px;">No groups assigned</p>`;
|
||||
}
|
||||
|
||||
// Assign to group
|
||||
const available = groupNames.filter(g => !memberOf.includes(g));
|
||||
html += `<div style="margin-top:12px;display:flex;gap:4px;">
|
||||
<select id="wfm-nodes-assign-group-select" class="wfm-select" style="flex:1;">
|
||||
<option value="">${t("nodesAssignGroup")}</option>
|
||||
${available.map(g => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("")}
|
||||
</select>
|
||||
<button id="wfm-nodes-assign-group-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary">+</button>
|
||||
</div>`;
|
||||
|
||||
// Create new group
|
||||
html += `<div style="margin-top:8px;display:flex;gap:4px;">
|
||||
<input type="text" id="wfm-nodes-new-group-input" class="wfm-input" style="flex:1;" placeholder="${t("nodesGroupName")}">
|
||||
<button id="wfm-nodes-create-group-btn" class="wfm-btn wfm-btn-sm">${t("nodesCreateGroup")}</button>
|
||||
</div>`;
|
||||
|
||||
el.innerHTML = html;
|
||||
|
||||
// Event listeners
|
||||
// グループから除外
|
||||
el.querySelectorAll(".wfm-node-remove-group").forEach(btn => {
|
||||
btn.addEventListener("click", async () => {
|
||||
const group = btn.dataset.group;
|
||||
@@ -612,8 +566,9 @@ function renderSideGroups(node) {
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("wfm-nodes-assign-group-btn")?.addEventListener("click", async () => {
|
||||
const sel = document.getElementById("wfm-nodes-assign-group-select");
|
||||
// グループに追加
|
||||
el.querySelector("#wfm-nodes-assign-group-btn")?.addEventListener("click", async () => {
|
||||
const sel = el.querySelector("#wfm-nodes-assign-group-select");
|
||||
const group = sel?.value;
|
||||
if (!group) return;
|
||||
if (!state.nodeGroups[group]) state.nodeGroups[group] = [];
|
||||
@@ -625,25 +580,61 @@ function renderSideGroups(node) {
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("wfm-nodes-create-group-btn")?.addEventListener("click", async () => {
|
||||
const input = document.getElementById("wfm-nodes-new-group-input");
|
||||
// グループ作成（作成後に現在のノードに追加）
|
||||
el.querySelector("#wfm-nodes-create-group-btn")?.addEventListener("click", async () => {
|
||||
const input = el.querySelector("#wfm-nodes-new-group-input");
|
||||
const name = input?.value?.trim();
|
||||
if (!name) return;
|
||||
if (!state.nodeGroups[name]) state.nodeGroups[name] = [];
|
||||
if (!state.nodeGroups[name].includes(node.name)) {
|
||||
state.nodeGroups[name].push(node.name);
|
||||
if (state.nodeGroups[name]) {
|
||||
showToast("Group already exists", "warning");
|
||||
return;
|
||||
}
|
||||
state.nodeGroups[name] = [node.name];
|
||||
await saveNodeGroups(state.nodeGroups);
|
||||
input.value = "";
|
||||
renderSideGroups(node);
|
||||
renderFilters();
|
||||
});
|
||||
|
||||
// グループ名変更
|
||||
el.querySelector("#wfm-nodes-rename-group-btn")?.addEventListener("click", async () => {
|
||||
const sel = el.querySelector("#wfm-nodes-manage-group-select");
|
||||
const oldName = sel?.value;
|
||||
if (!oldName) return;
|
||||
const newName = prompt(`Rename group "${oldName}" to:`, oldName);
|
||||
if (!newName || newName === oldName) return;
|
||||
if (state.nodeGroups[newName] !== undefined) {
|
||||
showToast("Group name already exists", "warning");
|
||||
return;
|
||||
}
|
||||
state.nodeGroups[newName] = state.nodeGroups[oldName];
|
||||
delete state.nodeGroups[oldName];
|
||||
await saveNodeGroups(state.nodeGroups);
|
||||
if (state.groupFilter === oldName) state.groupFilter = newName;
|
||||
renderSideGroups(node);
|
||||
renderFilters();
|
||||
showToast(`Renamed to "${newName}"`, "success");
|
||||
});
|
||||
|
||||
// グループ削除
|
||||
el.querySelector("#wfm-nodes-delete-group-btn")?.addEventListener("click", async () => {
|
||||
const sel = el.querySelector("#wfm-nodes-manage-group-select");
|
||||
const name = sel?.value;
|
||||
if (!name) return;
|
||||
if (!confirm(`Delete group "${name}"?`)) return;
|
||||
delete state.nodeGroups[name];
|
||||
await saveNodeGroups(state.nodeGroups);
|
||||
if (state.groupFilter === name) state.groupFilter = "";
|
||||
renderSideGroups(node);
|
||||
renderFilters();
|
||||
showToast(`Group "${name}" deleted`, "success");
|
||||
});
|
||||
}
|
||||
|
||||
function closeNodeSidePanel() {
|
||||
const panel = document.getElementById("wfm-nodes-side-panel");
|
||||
if (panel) panel.style.display = "none";
|
||||
state.selectedNode = null;
|
||||
const titleEl = document.getElementById("wfm-nodes-panel-title");
|
||||
if (titleEl) titleEl.textContent = "";
|
||||
document.querySelectorAll("#wfm-nodes-grid .wfm-card, #wfm-nodes-grid tr").forEach(el => {
|
||||
el.classList.remove("wfm-card-selected");
|
||||
});
|
||||
@@ -1103,8 +1094,6 @@ export function initNodesTab() {
|
||||
loadNodesData();
|
||||
});
|
||||
|
||||
// Side panel close
|
||||
document.getElementById("wfm-nodes-panel-close")?.addEventListener("click", closeNodeSidePanel);
|
||||
|
||||
// Side panel tab switching
|
||||
document.querySelectorAll(".wfm-nodes-side-tab-btn").forEach(btn => {
|
||||
|
||||
+697
-34
@@ -8,6 +8,12 @@ import { t, getLang, getSummaryLang, setLang, setSummaryLang, getLanguageOptions
|
||||
|
||||
const SETTINGS_KEY = "wfm_settings";
|
||||
|
||||
function rgbToHex(rgb) {
|
||||
const m = rgb.match(/(\d+)/g);
|
||||
if (!m || m.length < 3) return "#000000";
|
||||
return "#" + m.slice(0, 3).map(n => parseInt(n).toString(16).padStart(2, "0")).join("");
|
||||
}
|
||||
|
||||
function loadLocalSettings() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(SETTINGS_KEY) || "{}");
|
||||
@@ -67,12 +73,259 @@ const THEMES = [
|
||||
{ id: "corporate", key: "themeCorporate", colors: ["#F0F4F8", "#FFFFFF", "#2563EB", "#7C3AED"] },
|
||||
];
|
||||
|
||||
// --- Background pattern definitions ---
|
||||
const BG_PATTERNS = [
|
||||
{ id: "none", key: "themePatternNone" },
|
||||
{ id: "stripe-h", key: "themePatternStripeH" },
|
||||
{ id: "stripe-v", key: "themePatternStripeV" },
|
||||
{ id: "stripe-d", key: "themePatternStripeD" },
|
||||
{ id: "dot", key: "themePatternDot" },
|
||||
{ id: "check", key: "themePatternCheck" },
|
||||
{ id: "svg", key: "themePatternSvg" },
|
||||
];
|
||||
|
||||
// Font definitions: id, label key, CSS value, Google Fonts family name (if web font)
|
||||
const FONT_OPTIONS = [
|
||||
{ id: "", key: "themeFontDefault", css: "", google: "" },
|
||||
{ id: "noto-sans-jp", key: "themeFontNotoSans", css: "'Noto Sans JP', sans-serif", google: "Noto+Sans+JP:wght@400;700" },
|
||||
{ id: "zen-maru", key: "themeFontZenMaru", css: "'Zen Maru Gothic', sans-serif", google: "Zen+Maru+Gothic:wght@400;700" },
|
||||
{ id: "m-plus-rounded", key: "themeFontMPlusRound", css: "'M PLUS Rounded 1c', sans-serif", google: "M+PLUS+Rounded+1c:wght@400;700" },
|
||||
{ id: "kosugi-maru", key: "themeFontKosugiMaru", css: "'Kosugi Maru', sans-serif", google: "Kosugi+Maru" },
|
||||
{ id: "sawarabi-gothic",key: "themeFontSawarabi", css: "'Sawarabi Gothic', sans-serif", google: "Sawarabi+Gothic" },
|
||||
{ id: "biz-udp", key: "themeFontBizUdp", css: "'BIZ UDPGothic', sans-serif", google: "BIZ+UDPGothic:wght@400;700" },
|
||||
{ id: "dot-gothic", key: "themeFontDotGothic", css: "'DotGothic16', monospace", google: "DotGothic16" },
|
||||
{ id: "hachi-maru", key: "themeFontHachiMaru", css: "'Hachi Maru Pop', cursive", google: "Hachi+Maru+Pop" },
|
||||
{ id: "dela-gothic", key: "themeFontDelaGothic", css: "'Dela Gothic One', sans-serif", google: "Dela+Gothic+One" },
|
||||
{ id: "reggae-one", key: "themeFontReggaeOne", css: "'Reggae One', cursive", google: "Reggae+One" },
|
||||
{ id: "rocknroll", key: "themeFontRocknRoll", css: "'RocknRoll One', sans-serif", google: "RocknRoll+One" },
|
||||
{ id: "stick", key: "themeFontStick", css: "'Stick', sans-serif", google: "Stick" },
|
||||
{ id: "train-one", key: "themeFontTrainOne", css: "'Train One', cursive", google: "Train+One" },
|
||||
{ id: "space-mono", key: "themeFontSpaceMono", css: "'Space Mono', monospace", google: "Space+Mono:wght@400;700" },
|
||||
{ id: "fira-code", key: "themeFontFiraCode", css: "'Fira Code', monospace", google: "Fira+Code:wght@400;700" },
|
||||
];
|
||||
|
||||
// Load Google Font dynamically
|
||||
const _loadedFonts = new Set();
|
||||
function loadGoogleFont(googleFamily) {
|
||||
if (!googleFamily || _loadedFonts.has(googleFamily)) return;
|
||||
_loadedFonts.add(googleFamily);
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = `https://fonts.googleapis.com/css2?family=${googleFamily}&display=swap`;
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
function applyCustomFont(fontId) {
|
||||
const font = FONT_OPTIONS.find(f => f.id === fontId);
|
||||
let styleEl = document.getElementById("wfm-custom-font-style");
|
||||
if (!font || !font.css) {
|
||||
if (styleEl) styleEl.remove();
|
||||
return;
|
||||
}
|
||||
if (font.google) loadGoogleFont(font.google);
|
||||
if (!styleEl) {
|
||||
styleEl = document.createElement("style");
|
||||
styleEl.id = "wfm-custom-font-style";
|
||||
document.head.appendChild(styleEl);
|
||||
}
|
||||
styleEl.textContent = `body, .wfm-input, .wfm-select, .wfm-textarea, button { font-family: ${font.css} !important; }`;
|
||||
}
|
||||
|
||||
// Color customization targets
|
||||
const COLOR_TARGETS = [
|
||||
{ varName: "--wfm-bg", key: "themeColorBg" },
|
||||
{ varName: "--wfm-bg-secondary", key: "themeColorBgSec" },
|
||||
{ varName: "--wfm-surface", key: "themeColorSurface" },
|
||||
{ varName: "--wfm-text", key: "themeColorText" },
|
||||
{ varName: "--wfm-primary", key: "themeColorPrimary" },
|
||||
{ varName: "--wfm-accent", key: "themeColorAccent" },
|
||||
];
|
||||
|
||||
function generatePatternCSS(patternId, color, opacity, scale) {
|
||||
const o = opacity ?? 0.1;
|
||||
const s = scale ?? 20;
|
||||
const c = color || "#ffffff";
|
||||
// Convert hex to rgba
|
||||
const r = parseInt(c.slice(1,3),16), g = parseInt(c.slice(3,5),16), b = parseInt(c.slice(5,7),16);
|
||||
const rgba = `rgba(${r},${g},${b},${o})`;
|
||||
|
||||
switch (patternId) {
|
||||
case "stripe-h":
|
||||
return `repeating-linear-gradient(0deg, ${rgba} 0px, ${rgba} 1px, transparent 1px, transparent ${s}px)`;
|
||||
case "stripe-v":
|
||||
return `repeating-linear-gradient(90deg, ${rgba} 0px, ${rgba} 1px, transparent 1px, transparent ${s}px)`;
|
||||
case "stripe-d":
|
||||
return `repeating-linear-gradient(45deg, ${rgba} 0px, ${rgba} 1px, transparent 1px, transparent ${s}px)`;
|
||||
case "dot": {
|
||||
const half = s / 2;
|
||||
const dotR = Math.max(1, s * 0.12);
|
||||
return `radial-gradient(circle ${dotR}px at ${half}px ${half}px, ${rgba} 100%, transparent 100%)`;
|
||||
}
|
||||
case "check": {
|
||||
const half = s / 2;
|
||||
return `linear-gradient(45deg, ${rgba} 25%, transparent 25%, transparent 75%, ${rgba} 75%), ` +
|
||||
`linear-gradient(45deg, ${rgba} 25%, transparent 25%, transparent 75%, ${rgba} 75%)`;
|
||||
}
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function generatePatternBgSize(patternId, scale) {
|
||||
const s = scale ?? 20;
|
||||
if (patternId === "dot") return `${s}px ${s}px`;
|
||||
if (patternId === "check") {
|
||||
const half = s / 2;
|
||||
return `${s}px ${s}px`;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function generatePatternBgPosition(patternId, scale) {
|
||||
const s = scale ?? 20;
|
||||
if (patternId === "check") {
|
||||
const half = s / 2;
|
||||
return `0 0, ${half}px ${half}px`;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function generatePatternPreviewSVG(patternId) {
|
||||
const fg = "#8cb4ff";
|
||||
const bg = "#1a1a2e";
|
||||
const encode = (svg) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
|
||||
switch (patternId) {
|
||||
case "none":
|
||||
return encode(`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="${bg}"/><line x1="10" y1="10" x2="50" y2="50" stroke="#555" stroke-width="2"/><line x1="50" y1="10" x2="10" y2="50" stroke="#555" stroke-width="2"/></svg>`);
|
||||
case "stripe-h":
|
||||
return encode(`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="${bg}"/><rect y="4" width="60" height="4" fill="${fg}" opacity="0.7"/><rect y="16" width="60" height="4" fill="${fg}" opacity="0.7"/><rect y="28" width="60" height="4" fill="${fg}" opacity="0.7"/><rect y="40" width="60" height="4" fill="${fg}" opacity="0.7"/><rect y="52" width="60" height="4" fill="${fg}" opacity="0.7"/></svg>`);
|
||||
case "stripe-v":
|
||||
return encode(`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="${bg}"/><rect x="4" width="4" height="60" fill="${fg}" opacity="0.7"/><rect x="16" width="4" height="60" fill="${fg}" opacity="0.7"/><rect x="28" width="4" height="60" fill="${fg}" opacity="0.7"/><rect x="40" width="4" height="60" fill="${fg}" opacity="0.7"/><rect x="52" width="4" height="60" fill="${fg}" opacity="0.7"/></svg>`);
|
||||
case "stripe-d":
|
||||
return encode(`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="${bg}"/><line x1="-5" y1="7" x2="53" y2="-5" stroke="${fg}" stroke-width="3" opacity="0.7"/><line x1="7" y1="19" x2="65" y2="7" stroke="${fg}" stroke-width="3" opacity="0.7"/><line x1="-5" y1="31" x2="53" y2="19" stroke="${fg}" stroke-width="3" opacity="0.7"/><line x1="7" y1="43" x2="65" y2="31" stroke="${fg}" stroke-width="3" opacity="0.7"/><line x1="-5" y1="55" x2="53" y2="43" stroke="${fg}" stroke-width="3" opacity="0.7"/><line x1="7" y1="67" x2="65" y2="55" stroke="${fg}" stroke-width="3" opacity="0.7"/></svg>`);
|
||||
case "dot":
|
||||
return encode(`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="${bg}"/><circle cx="10" cy="10" r="4" fill="${fg}" opacity="0.8"/><circle cx="30" cy="10" r="4" fill="${fg}" opacity="0.8"/><circle cx="50" cy="10" r="4" fill="${fg}" opacity="0.8"/><circle cx="20" cy="25" r="4" fill="${fg}" opacity="0.8"/><circle cx="40" cy="25" r="4" fill="${fg}" opacity="0.8"/><circle cx="10" cy="40" r="4" fill="${fg}" opacity="0.8"/><circle cx="30" cy="40" r="4" fill="${fg}" opacity="0.8"/><circle cx="50" cy="40" r="4" fill="${fg}" opacity="0.8"/><circle cx="20" cy="55" r="4" fill="${fg}" opacity="0.8"/><circle cx="40" cy="55" r="4" fill="${fg}" opacity="0.8"/></svg>`);
|
||||
case "check":
|
||||
return encode(`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="${bg}"/><rect x="0" y="0" width="15" height="15" fill="${fg}" opacity="0.35"/><rect x="15" y="15" width="15" height="15" fill="${fg}" opacity="0.35"/><rect x="30" y="0" width="15" height="15" fill="${fg}" opacity="0.35"/><rect x="45" y="15" width="15" height="15" fill="${fg}" opacity="0.35"/><rect x="0" y="30" width="15" height="15" fill="${fg}" opacity="0.35"/><rect x="15" y="45" width="15" height="15" fill="${fg}" opacity="0.35"/><rect x="30" y="30" width="15" height="15" fill="${fg}" opacity="0.35"/><rect x="45" y="45" width="15" height="15" fill="${fg}" opacity="0.35"/></svg>`);
|
||||
case "svg":
|
||||
return encode(`<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="${bg}"/><rect x="10" y="10" width="40" height="40" rx="4" fill="none" stroke="${fg}" stroke-width="2" stroke-dasharray="6 3" opacity="0.6"/><text x="30" y="36" text-anchor="middle" fill="${fg}" font-size="20" font-weight="bold" opacity="0.8">+</text></svg>`);
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
// Apply custom overrides (colors + pattern) on top of the current theme
|
||||
function applyCustomOverrides(custom) {
|
||||
const root = document.documentElement;
|
||||
// Remove old custom style element
|
||||
let styleEl = document.getElementById("wfm-custom-theme-style");
|
||||
|
||||
// Color overrides
|
||||
if (custom && custom.colors) {
|
||||
for (const [varName, value] of Object.entries(custom.colors)) {
|
||||
if (value) root.style.setProperty(varName, value);
|
||||
}
|
||||
}
|
||||
|
||||
// Pattern
|
||||
if (custom && custom.pattern && custom.pattern.id && custom.pattern.id !== "none") {
|
||||
if (!styleEl) {
|
||||
styleEl = document.createElement("style");
|
||||
styleEl.id = "wfm-custom-theme-style";
|
||||
document.head.appendChild(styleEl);
|
||||
}
|
||||
const p = custom.pattern;
|
||||
if (p.id === "svg" && p.svgData) {
|
||||
const s = p.scale ?? 40;
|
||||
const o = p.opacity ?? 1;
|
||||
const c = p.color || null;
|
||||
const gap = p.gap ?? 0;
|
||||
// Recolor SVG: inject a global style override into the SVG
|
||||
let svgStr = p.svgData;
|
||||
if (c) {
|
||||
// 1. Replace fill/stroke attributes (but not "none")
|
||||
svgStr = svgStr
|
||||
.replace(/fill="(?!none)[^"]*"/gi, `fill="${c}"`)
|
||||
.replace(/stroke="(?!none)[^"]*"/gi, `stroke="${c}"`);
|
||||
// 2. Replace inline style fill/stroke
|
||||
svgStr = svgStr
|
||||
.replace(/fill:\s*(?!none)[^;"]+/gi, `fill:${c}`)
|
||||
.replace(/stroke:\s*(?!none)[^;"]+/gi, `stroke:${c}`);
|
||||
// 3. Inject a <style> block for elements with no explicit fill/stroke
|
||||
const styleBlock = `<style>*:not([fill="none"]){fill:${c}!important}*:not([stroke="none"])[stroke]{stroke:${c}!important}</style>`;
|
||||
svgStr = svgStr.replace(/<svg([^>]*)>/i, `<svg$1>${styleBlock}`);
|
||||
}
|
||||
// Extract original viewBox/width/height, then create wrapper SVG with padding
|
||||
const tileSize = s + gap;
|
||||
let tiledSvg;
|
||||
if (gap > 0) {
|
||||
// Extract the original viewBox to preserve it in the inner SVG
|
||||
const vbMatch = svgStr.match(/viewBox="([^"]*)"/i);
|
||||
const origViewBox = vbMatch ? vbMatch[1] : `0 0 ${s} ${s}`;
|
||||
// Wrap: outer SVG with tileSize, inner SVG with original viewBox
|
||||
tiledSvg = svgStr.replace(
|
||||
/<svg([^>]*)>/i,
|
||||
(match, attrs) => {
|
||||
// Remove existing width/height/viewBox from outer
|
||||
let clean = attrs
|
||||
.replace(/\s*width="[^"]*"/gi, '')
|
||||
.replace(/\s*height="[^"]*"/gi, '')
|
||||
.replace(/\s*viewBox="[^"]*"/gi, '');
|
||||
return `<svg${clean} width="${tileSize}" height="${tileSize}" viewBox="0 0 ${tileSize} ${tileSize}">
|
||||
<svg width="${s}" height="${s}" x="0" y="0" viewBox="${origViewBox}">`;
|
||||
}
|
||||
) + '</svg>';
|
||||
} else {
|
||||
tiledSvg = svgStr;
|
||||
}
|
||||
const encoded = `url("data:image/svg+xml,${encodeURIComponent(tiledSvg)}")`;
|
||||
styleEl.textContent = `body::after { content: ""; position: fixed; inset: 0; z-index: -1; background-image: ${encoded}; background-size: ${tileSize}px ${tileSize}px; background-repeat: repeat; opacity: ${o}; pointer-events: none; }`;
|
||||
} else if (p.id !== "svg") {
|
||||
const bg = generatePatternCSS(p.id, p.color, p.opacity, p.scale);
|
||||
const bgSize = generatePatternBgSize(p.id, p.scale);
|
||||
const bgPos = generatePatternBgPosition(p.id, p.scale);
|
||||
let css = `body { background-image: ${bg} !important;`;
|
||||
if (bgSize) css += ` background-size: ${bgSize} !important;`;
|
||||
if (bgPos) css += ` background-position: ${bgPos} !important;`;
|
||||
css += ` }`;
|
||||
styleEl.textContent = css;
|
||||
}
|
||||
} else {
|
||||
if (styleEl) styleEl.remove();
|
||||
}
|
||||
|
||||
// Font
|
||||
if (custom && custom.fontId) {
|
||||
applyCustomFont(custom.fontId);
|
||||
} else {
|
||||
const fontEl = document.getElementById("wfm-custom-font-style");
|
||||
if (fontEl) fontEl.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function clearCustomOverrides() {
|
||||
const root = document.documentElement;
|
||||
for (const ct of COLOR_TARGETS) {
|
||||
root.style.removeProperty(ct.varName);
|
||||
}
|
||||
const styleEl = document.getElementById("wfm-custom-theme-style");
|
||||
if (styleEl) styleEl.remove();
|
||||
const fontEl = document.getElementById("wfm-custom-font-style");
|
||||
if (fontEl) fontEl.remove();
|
||||
}
|
||||
|
||||
export function applyTheme(themeId) {
|
||||
if (themeId) {
|
||||
document.documentElement.setAttribute("data-theme", themeId);
|
||||
} else {
|
||||
document.documentElement.removeAttribute("data-theme");
|
||||
}
|
||||
// Apply saved custom overrides
|
||||
const settings = loadLocalSettings();
|
||||
clearCustomOverrides();
|
||||
if (settings.themeCustom) {
|
||||
applyCustomOverrides(settings.themeCustom);
|
||||
}
|
||||
}
|
||||
|
||||
export function getSavedTheme() {
|
||||
@@ -93,6 +346,12 @@ export async function initSettingsTab() {
|
||||
workflowsDirInfo = await res.json();
|
||||
} catch {}
|
||||
|
||||
// Load gallery output dir info
|
||||
let outputDirInfo = { current: "", default: "", saved: "" };
|
||||
try {
|
||||
const res = await fetch("/api/wfm/settings/output-dir");
|
||||
outputDirInfo = await res.json();
|
||||
} catch {}
|
||||
|
||||
const uiLang = getLang();
|
||||
const summaryLang = getSummaryLang();
|
||||
@@ -100,9 +359,115 @@ export async function initSettingsTab() {
|
||||
container.innerHTML = `
|
||||
<h2 style="font-size:18px;margin-bottom:20px;">${t("settingsTitle")}</h2>
|
||||
|
||||
<div class="wfm-settings-layout">
|
||||
|
||||
<!-- Right column: Theme (floated right) -->
|
||||
<div class="wfm-settings-right-col">
|
||||
<!-- Theme -->
|
||||
<details class="wfm-settings-section" open>
|
||||
<summary class="wfm-settings-summary">${t("themeLabel")}</summary>
|
||||
<div class="wfm-theme-grid" id="wfm-theme-grid">
|
||||
${THEMES.map(th => `
|
||||
<div class="wfm-theme-card ${(settings.theme || "") === th.id ? "active" : ""}" data-theme-id="${th.id}">
|
||||
<div class="wfm-theme-swatch">
|
||||
${th.colors.map(c => `<span style="background:${c};"></span>`).join("")}
|
||||
</div>
|
||||
<div class="wfm-theme-card-label">${t(th.key)}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
|
||||
<!-- Theme Customizer -->
|
||||
<button class="wfm-customizer-toggle" id="wfm-customizer-toggle">
|
||||
<span class="arrow">▶</span> ${t("themeCustomize")}
|
||||
</button>
|
||||
<div class="wfm-customizer-panel" id="wfm-customizer-panel">
|
||||
<!-- Color overrides -->
|
||||
<div class="wfm-customizer-section">
|
||||
<h4>${t("themeCustomizeColors")}</h4>
|
||||
<div class="wfm-color-grid" id="wfm-color-grid">
|
||||
${COLOR_TARGETS.map(ct => {
|
||||
const saved = settings.themeCustom?.colors?.[ct.varName] || "";
|
||||
return `<div class="wfm-color-item">
|
||||
<label>${t(ct.key)}</label>
|
||||
<input type="color" data-var="${ct.varName}" value="${saved || getComputedStyle(document.documentElement).getPropertyValue(ct.varName).trim()}" title="${ct.varName}">
|
||||
</div>`;
|
||||
}).join("")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background pattern -->
|
||||
<div class="wfm-customizer-section">
|
||||
<h4>${t("themeCustomizeBgPattern")}</h4>
|
||||
<div class="wfm-pattern-grid" id="wfm-pattern-grid">
|
||||
${BG_PATTERNS.map(p => {
|
||||
const active = (settings.themeCustom?.pattern?.id || "none") === p.id ? "active" : "";
|
||||
const preview = generatePatternPreviewSVG(p.id);
|
||||
const bgStyle = preview
|
||||
? `background:url('${preview}') no-repeat center/cover;`
|
||||
: "background:#333;";
|
||||
return `<div class="wfm-pattern-item ${active} ${p.id === 'svg' ? 'wfm-svg-upload-btn' : ''}" data-pattern-id="${p.id}" style="${bgStyle}">
|
||||
<span class="wfm-pattern-item-label">${t(p.key)}</span>
|
||||
</div>`;
|
||||
}).join("")}
|
||||
</div>
|
||||
<input type="file" id="wfm-svg-upload" accept=".svg" style="display:none;">
|
||||
|
||||
<!-- Pattern options -->
|
||||
<div class="wfm-pattern-options" id="wfm-pattern-options" style="${(!settings.themeCustom?.pattern?.id || settings.themeCustom?.pattern?.id === 'none') ? 'display:none;' : ''}">
|
||||
<label>
|
||||
${t("themePatternColor")}
|
||||
<input type="color" id="wfm-pattern-color" value="${settings.themeCustom?.pattern?.color || '#ffffff'}">
|
||||
</label>
|
||||
<label>
|
||||
${t("themePatternOpacity")}
|
||||
<input type="range" id="wfm-pattern-opacity" min="0.02" max="0.5" step="0.02" value="${settings.themeCustom?.pattern?.opacity ?? 0.1}">
|
||||
<span id="wfm-pattern-opacity-val">${settings.themeCustom?.pattern?.opacity ?? 0.1}</span>
|
||||
</label>
|
||||
<label>
|
||||
${t("themePatternScale")}
|
||||
<input type="range" id="wfm-pattern-scale" min="8" max="80" step="2" value="${settings.themeCustom?.pattern?.scale ?? 20}">
|
||||
<span id="wfm-pattern-scale-val">${settings.themeCustom?.pattern?.scale ?? 20}px</span>
|
||||
</label>
|
||||
<label>
|
||||
${t("themePatternGap")}
|
||||
<input type="range" id="wfm-pattern-gap" min="0" max="60" step="2" value="${settings.themeCustom?.pattern?.gap ?? 0}">
|
||||
<span id="wfm-pattern-gap-val">${settings.themeCustom?.pattern?.gap ?? 0}px</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="wfm-svg-name" style="font-size:11px;color:var(--wfm-text-secondary);margin-top:6px;${settings.themeCustom?.pattern?.id === 'svg' ? '' : 'display:none;'}">
|
||||
${settings.themeCustom?.pattern?.svgName ? `SVG: ${settings.themeCustom.pattern.svgName}` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font -->
|
||||
<div class="wfm-customizer-section">
|
||||
<h4>${t("themeCustomizeFont")}</h4>
|
||||
<div class="wfm-font-grid" id="wfm-font-grid">
|
||||
${FONT_OPTIONS.map(f => {
|
||||
const active = (settings.themeCustom?.fontId || "") === f.id ? "active" : "";
|
||||
return `<div class="wfm-font-item ${active}" data-font-id="${f.id}" title="${f.css || 'System Default'}">
|
||||
<span class="wfm-font-preview" style="${f.css ? `font-family:${f.css};` : ''}">${t(f.key)}</span>
|
||||
</div>`;
|
||||
}).join("")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="wfm-customizer-actions">
|
||||
<button class="wfm-btn wfm-btn-primary wfm-btn-sm" id="wfm-customizer-apply">${t("themeCustomizerApply")}</button>
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-customizer-reset">${t("themeCustomizerReset")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div><!-- /wfm-settings-right-col -->
|
||||
|
||||
<!-- Left column: all settings (Language + rest), flows left of floated Theme -->
|
||||
<div class="wfm-settings-left-col">
|
||||
<!-- Language Settings -->
|
||||
<div style="border:1px solid var(--wfm-border);border-radius:var(--wfm-radius);padding:16px;margin-bottom:20px;">
|
||||
<h3 style="font-size:15px;margin-bottom:12px;">${t("langLabel")} / ${t("summaryLangLabel")}</h3>
|
||||
<details class="wfm-settings-section" open>
|
||||
<summary class="wfm-settings-summary">${t("langLabel")} / ${t("summaryLangLabel")}</summary>
|
||||
<div class="wfm-form-group">
|
||||
<label>${t("langLabel")}</label>
|
||||
<select class="wfm-select" id="wfm-settings-ui-lang">
|
||||
@@ -118,26 +483,11 @@ export async function initSettingsTab() {
|
||||
⚠ ${t("summaryLangNote")}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Theme -->
|
||||
<div style="border:1px solid var(--wfm-border);border-radius:var(--wfm-radius);padding:16px;margin-bottom:20px;">
|
||||
<h3 style="font-size:15px;margin-bottom:12px;">${t("themeLabel")}</h3>
|
||||
<div class="wfm-theme-grid" id="wfm-theme-grid">
|
||||
${THEMES.map(th => `
|
||||
<div class="wfm-theme-card ${(settings.theme || "") === th.id ? "active" : ""}" data-theme-id="${th.id}">
|
||||
<div class="wfm-theme-swatch">
|
||||
${th.colors.map(c => `<span style="background:${c};"></span>`).join("")}
|
||||
</div>
|
||||
<div class="wfm-theme-card-label">${t(th.key)}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Workflow Data Folder -->
|
||||
<div style="border:1px solid var(--wfm-border);border-radius:var(--wfm-radius);padding:16px;margin-bottom:20px;">
|
||||
<h3 style="font-size:15px;margin-bottom:12px;">${t("workflowsDir")}</h3>
|
||||
<details class="wfm-settings-section">
|
||||
<summary class="wfm-settings-summary">${t("workflowsDir")}</summary>
|
||||
<div class="wfm-form-group">
|
||||
<label>${t("workflowsDirLabel")}</label>
|
||||
<div style="display:flex;gap:8px;">
|
||||
@@ -154,11 +504,32 @@ export async function initSettingsTab() {
|
||||
${t("workflowsDirCurrent")}: <code id="wfm-settings-workflows-dir-current" style="color:var(--wfm-primary);word-break:break-all;">${workflowsDirInfo.current}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Gallery Output Folder -->
|
||||
<details class="wfm-settings-section">
|
||||
<summary class="wfm-settings-summary">${t("galleryOutputDir")}</summary>
|
||||
<div class="wfm-form-group">
|
||||
<label>${t("galleryOutputDirLabel")}</label>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<input type="text" class="wfm-input" id="wfm-settings-output-dir"
|
||||
value="${serverSettings.gallery_output_dir || ""}"
|
||||
placeholder="${outputDirInfo.default}">
|
||||
<button class="wfm-btn wfm-btn-primary wfm-btn-sm" id="wfm-settings-output-dir-apply">${t("workflowsDirApply")}</button>
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-settings-output-dir-reset">${t("workflowsDirDefault")}</button>
|
||||
</div>
|
||||
<small style="color:var(--wfm-text-secondary);font-size:11px;display:block;margin-top:4px;">
|
||||
${t("galleryOutputDirHint")}
|
||||
</small>
|
||||
<div style="font-size:11px;color:var(--wfm-text-secondary);margin-top:6px;">
|
||||
${t("workflowsDirCurrent")}: <code id="wfm-settings-output-dir-current" style="color:var(--wfm-primary);word-break:break-all;">${outputDirInfo.current}</code>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- ComfyUI Settings -->
|
||||
<div style="border:1px solid var(--wfm-border);border-radius:var(--wfm-radius);padding:16px;margin-bottom:20px;">
|
||||
<h3 style="font-size:15px;margin-bottom:12px;">${t("comfyuiConnection")}</h3>
|
||||
<details class="wfm-settings-section">
|
||||
<summary class="wfm-settings-summary">${t("comfyuiConnection")}</summary>
|
||||
<div class="wfm-form-group">
|
||||
<label>${t("comfyuiUrl")}</label>
|
||||
<div style="display:flex;gap:8px;">
|
||||
@@ -172,11 +543,11 @@ export async function initSettingsTab() {
|
||||
</small>
|
||||
</div>
|
||||
<div id="wfm-settings-url-status" style="font-size:12px;margin-top:4px;"></div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Ollama Settings -->
|
||||
<div style="border:1px solid var(--wfm-border);border-radius:var(--wfm-radius);padding:16px;margin-bottom:20px;">
|
||||
<h3 style="font-size:15px;margin-bottom:12px;">${t("ollamaSettings")}</h3>
|
||||
<details class="wfm-settings-section">
|
||||
<summary class="wfm-settings-summary">${t("ollamaSettings")}</summary>
|
||||
<div class="wfm-form-group">
|
||||
<label>${t("ollamaUrl")}</label>
|
||||
<input type="text" class="wfm-input" id="wfm-settings-ollama-url"
|
||||
@@ -197,11 +568,11 @@ export async function initSettingsTab() {
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-settings-ollama-test">${t("testConnection")}</button>
|
||||
<span id="wfm-settings-ollama-status" style="font-size:12px;line-height:28px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Default Workflow -->
|
||||
<div style="border:1px solid var(--wfm-border);border-radius:var(--wfm-radius);padding:16px;margin-bottom:20px;">
|
||||
<h3 style="font-size:15px;margin-bottom:12px;">${t("defaultWorkflow")}</h3>
|
||||
<details class="wfm-settings-section">
|
||||
<summary class="wfm-settings-summary">${t("defaultWorkflow")}</summary>
|
||||
<div class="wfm-form-group">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span style="font-size:13px;" id="wfm-settings-default-wf-name">${settings.defaultWorkflow || t("defaultWorkflowNone")}</span>
|
||||
@@ -211,11 +582,11 @@ export async function initSettingsTab() {
|
||||
${t("defaultWorkflowHint")}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Eagle Integration (optional) -->
|
||||
<div style="border:1px solid var(--wfm-border);border-radius:var(--wfm-radius);padding:16px;margin-bottom:20px;">
|
||||
<h3 style="font-size:15px;margin-bottom:12px;">${t("eagleIntegration")}</h3>
|
||||
<details class="wfm-settings-section">
|
||||
<summary class="wfm-settings-summary">${t("eagleIntegration")}</summary>
|
||||
<div class="wfm-form-group">
|
||||
<label>${t("eagleUrl")}</label>
|
||||
<div style="display:flex;gap:8px;">
|
||||
@@ -233,10 +604,29 @@ export async function initSettingsTab() {
|
||||
${t("eagleAutoSave")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Data Management -->
|
||||
<details class="wfm-settings-section">
|
||||
<summary class="wfm-settings-summary">${t("dataManagement")}</summary>
|
||||
<p style="font-size:12px;color:var(--wfm-text-secondary);margin-bottom:12px;">${t("dataManagementHint")}</p>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-settings-export">${t("exportData")}</button>
|
||||
<label class="wfm-btn wfm-btn-sm" style="cursor:pointer;margin:0;">
|
||||
${t("importData")}
|
||||
<input type="file" id="wfm-settings-import-file" accept=".json" style="display:none;">
|
||||
</label>
|
||||
</div>
|
||||
<div id="wfm-settings-data-status" style="font-size:12px;margin-top:8px;"></div>
|
||||
</details>
|
||||
|
||||
<!-- Save Button -->
|
||||
<button class="wfm-btn wfm-btn-primary" id="wfm-settings-save" style="min-width:120px;">${t("saveSettings")}</button>
|
||||
|
||||
</div><!-- /wfm-settings-left-col -->
|
||||
|
||||
<div style="clear:both;"></div>
|
||||
</div><!-- /wfm-settings-layout -->
|
||||
`;
|
||||
|
||||
// --- Theme change handler ---
|
||||
@@ -244,11 +634,193 @@ export async function initSettingsTab() {
|
||||
const card = e.target.closest(".wfm-theme-card");
|
||||
if (!card) return;
|
||||
const themeId = card.dataset.themeId;
|
||||
// Clear custom overrides when switching theme base
|
||||
clearCustomOverrides();
|
||||
const cur = loadLocalSettings();
|
||||
delete cur.themeCustom;
|
||||
cur.theme = themeId;
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(cur));
|
||||
applyTheme(themeId);
|
||||
saveLocalSettings({ theme: themeId });
|
||||
// Update active state
|
||||
document.querySelectorAll(".wfm-theme-card").forEach(c => c.classList.remove("active"));
|
||||
card.classList.add("active");
|
||||
// Update color pickers to reflect new theme's computed values
|
||||
requestAnimationFrame(() => {
|
||||
document.querySelectorAll("#wfm-color-grid input[type=color]").forEach(inp => {
|
||||
const v = getComputedStyle(document.documentElement).getPropertyValue(inp.dataset.var).trim();
|
||||
if (v) inp.value = v.startsWith("#") ? v : rgbToHex(v);
|
||||
});
|
||||
});
|
||||
showToast(t("settingsSaved"), "success");
|
||||
});
|
||||
|
||||
// --- Theme Customizer handlers ---
|
||||
// State for live editing
|
||||
let customizerState = {
|
||||
colors: { ...(settings.themeCustom?.colors || {}) },
|
||||
pattern: { ...(settings.themeCustom?.pattern || { id: "none", color: "#ffffff", opacity: 0.1, scale: 20 }) },
|
||||
fontId: settings.themeCustom?.fontId || "",
|
||||
};
|
||||
|
||||
// Toggle panel
|
||||
document.getElementById("wfm-customizer-toggle")?.addEventListener("click", () => {
|
||||
const toggle = document.getElementById("wfm-customizer-toggle");
|
||||
const panel = document.getElementById("wfm-customizer-panel");
|
||||
toggle.classList.toggle("open");
|
||||
panel.classList.toggle("open");
|
||||
});
|
||||
|
||||
// Live color change
|
||||
document.getElementById("wfm-color-grid")?.addEventListener("input", (e) => {
|
||||
if (e.target.type !== "color") return;
|
||||
const varName = e.target.dataset.var;
|
||||
const value = e.target.value;
|
||||
customizerState.colors[varName] = value;
|
||||
document.documentElement.style.setProperty(varName, value);
|
||||
});
|
||||
|
||||
// Pattern selection
|
||||
document.getElementById("wfm-pattern-grid")?.addEventListener("click", (e) => {
|
||||
const item = e.target.closest(".wfm-pattern-item");
|
||||
if (!item) return;
|
||||
const patternId = item.dataset.patternId;
|
||||
|
||||
// SVG file upload
|
||||
if (patternId === "svg") {
|
||||
document.getElementById("wfm-svg-upload")?.click();
|
||||
return;
|
||||
}
|
||||
|
||||
customizerState.pattern.id = patternId;
|
||||
// Update active state
|
||||
document.querySelectorAll(".wfm-pattern-item").forEach(i => i.classList.remove("active"));
|
||||
item.classList.add("active");
|
||||
|
||||
// Show/hide options
|
||||
const optionsEl = document.getElementById("wfm-pattern-options");
|
||||
const svgNameEl = document.getElementById("wfm-svg-name");
|
||||
if (patternId === "none") {
|
||||
optionsEl.style.display = "none";
|
||||
svgNameEl.style.display = "none";
|
||||
} else {
|
||||
optionsEl.style.display = "";
|
||||
svgNameEl.style.display = "none";
|
||||
}
|
||||
|
||||
// Live preview
|
||||
applyCustomOverrides(customizerState);
|
||||
});
|
||||
|
||||
// SVG file upload handler
|
||||
document.getElementById("wfm-svg-upload")?.addEventListener("change", (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (ev) => {
|
||||
const svgData = ev.target.result;
|
||||
customizerState.pattern.id = "svg";
|
||||
customizerState.pattern.svgData = svgData;
|
||||
customizerState.pattern.svgName = file.name;
|
||||
|
||||
// Update active state
|
||||
document.querySelectorAll(".wfm-pattern-item").forEach(i => i.classList.remove("active"));
|
||||
document.querySelector('.wfm-pattern-item[data-pattern-id="svg"]')?.classList.add("active");
|
||||
|
||||
// Show options + name
|
||||
document.getElementById("wfm-pattern-options").style.display = "";
|
||||
const svgNameEl = document.getElementById("wfm-svg-name");
|
||||
svgNameEl.textContent = `SVG: ${file.name}`;
|
||||
svgNameEl.style.display = "";
|
||||
|
||||
applyCustomOverrides(customizerState);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
e.target.value = "";
|
||||
});
|
||||
|
||||
// Pattern option changes (live)
|
||||
document.getElementById("wfm-pattern-color")?.addEventListener("input", (e) => {
|
||||
customizerState.pattern.color = e.target.value;
|
||||
applyCustomOverrides(customizerState);
|
||||
});
|
||||
document.getElementById("wfm-pattern-opacity")?.addEventListener("input", (e) => {
|
||||
const v = parseFloat(e.target.value);
|
||||
customizerState.pattern.opacity = v;
|
||||
document.getElementById("wfm-pattern-opacity-val").textContent = v;
|
||||
applyCustomOverrides(customizerState);
|
||||
});
|
||||
document.getElementById("wfm-pattern-scale")?.addEventListener("input", (e) => {
|
||||
const v = parseInt(e.target.value);
|
||||
customizerState.pattern.scale = v;
|
||||
document.getElementById("wfm-pattern-scale-val").textContent = v + "px";
|
||||
applyCustomOverrides(customizerState);
|
||||
});
|
||||
document.getElementById("wfm-pattern-gap")?.addEventListener("input", (e) => {
|
||||
const v = parseInt(e.target.value);
|
||||
customizerState.pattern.gap = v;
|
||||
document.getElementById("wfm-pattern-gap-val").textContent = v + "px";
|
||||
applyCustomOverrides(customizerState);
|
||||
});
|
||||
|
||||
// Font selection
|
||||
document.getElementById("wfm-font-grid")?.addEventListener("click", (e) => {
|
||||
const item = e.target.closest(".wfm-font-item");
|
||||
if (!item) return;
|
||||
const fontId = item.dataset.fontId;
|
||||
customizerState.fontId = fontId;
|
||||
// Load web font for preview
|
||||
const font = FONT_OPTIONS.find(f => f.id === fontId);
|
||||
if (font?.google) loadGoogleFont(font.google);
|
||||
applyCustomFont(fontId);
|
||||
// Update active state
|
||||
document.querySelectorAll(".wfm-font-item").forEach(i => i.classList.remove("active"));
|
||||
item.classList.add("active");
|
||||
});
|
||||
|
||||
// Apply & Save
|
||||
document.getElementById("wfm-customizer-apply")?.addEventListener("click", () => {
|
||||
// Clean empty color overrides
|
||||
const cleanColors = {};
|
||||
for (const [k, v] of Object.entries(customizerState.colors)) {
|
||||
if (v) cleanColors[k] = v;
|
||||
}
|
||||
const custom = {
|
||||
colors: Object.keys(cleanColors).length ? cleanColors : undefined,
|
||||
pattern: customizerState.pattern.id !== "none" ? { ...customizerState.pattern } : undefined,
|
||||
fontId: customizerState.fontId || undefined,
|
||||
};
|
||||
saveLocalSettings({ themeCustom: (custom.colors || custom.pattern || custom.fontId) ? custom : undefined });
|
||||
showToast(t("settingsSaved"), "success");
|
||||
});
|
||||
|
||||
// Reset
|
||||
document.getElementById("wfm-customizer-reset")?.addEventListener("click", () => {
|
||||
clearCustomOverrides();
|
||||
customizerState = {
|
||||
colors: {},
|
||||
pattern: { id: "none", color: "#ffffff", opacity: 0.1, scale: 20, gap: 0 },
|
||||
fontId: "",
|
||||
};
|
||||
// Remove themeCustom from localStorage directly (spread merge won't delete keys)
|
||||
const cur = loadLocalSettings();
|
||||
delete cur.themeCustom;
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(cur));
|
||||
applyTheme(cur.theme || "");
|
||||
|
||||
// Reset UI
|
||||
requestAnimationFrame(() => {
|
||||
document.querySelectorAll("#wfm-color-grid input[type=color]").forEach(inp => {
|
||||
const v = getComputedStyle(document.documentElement).getPropertyValue(inp.dataset.var).trim();
|
||||
if (v) inp.value = v.startsWith("#") ? v : rgbToHex(v);
|
||||
});
|
||||
});
|
||||
document.querySelectorAll(".wfm-pattern-item").forEach(i => i.classList.remove("active"));
|
||||
document.querySelector('.wfm-pattern-item[data-pattern-id="none"]')?.classList.add("active");
|
||||
document.getElementById("wfm-pattern-options").style.display = "none";
|
||||
document.getElementById("wfm-svg-name").style.display = "none";
|
||||
// Reset font UI
|
||||
document.querySelectorAll(".wfm-font-item").forEach(i => i.classList.remove("active"));
|
||||
document.querySelector('.wfm-font-item[data-font-id=""]')?.classList.add("active");
|
||||
showToast(t("settingsSaved"), "success");
|
||||
});
|
||||
|
||||
@@ -310,6 +882,50 @@ export async function initSettingsTab() {
|
||||
}
|
||||
});
|
||||
|
||||
// --- Gallery output dir handlers ---
|
||||
document.getElementById("wfm-settings-output-dir-apply")?.addEventListener("click", async () => {
|
||||
const dirInput = document.getElementById("wfm-settings-output-dir");
|
||||
const currentEl = document.getElementById("wfm-settings-output-dir-current");
|
||||
const newDir = dirInput.value.trim();
|
||||
try {
|
||||
const res = await fetch("/api/wfm/settings/output-dir", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ gallery_output_dir: newDir }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.error) {
|
||||
showToast(`${t("workflowsDirError")}: ${data.error}`, "error");
|
||||
} else {
|
||||
if (currentEl) currentEl.textContent = data.current;
|
||||
showToast(t("workflowsDirChanged"), "success");
|
||||
// gallery-tab に通知して再ロード
|
||||
window.dispatchEvent(new CustomEvent("wfm-output-dir-changed", { detail: { path: data.current } }));
|
||||
}
|
||||
} catch (err) {
|
||||
showToast(`${t("workflowsDirError")}: ${err.message}`, "error");
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("wfm-settings-output-dir-reset")?.addEventListener("click", async () => {
|
||||
const dirInput = document.getElementById("wfm-settings-output-dir");
|
||||
const currentEl = document.getElementById("wfm-settings-output-dir-current");
|
||||
dirInput.value = "";
|
||||
try {
|
||||
const res = await fetch("/api/wfm/settings/output-dir", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ gallery_output_dir: "" }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (currentEl) currentEl.textContent = data.current;
|
||||
showToast(t("workflowsDirChanged"), "success");
|
||||
window.dispatchEvent(new CustomEvent("wfm-output-dir-changed", { detail: { path: data.current } }));
|
||||
} catch (err) {
|
||||
showToast(`${t("workflowsDirError")}: ${err.message}`, "error");
|
||||
}
|
||||
});
|
||||
|
||||
// --- Ollama model list loader ---
|
||||
async function loadOllamaModels() {
|
||||
const select = document.getElementById("wfm-settings-ollama-model");
|
||||
@@ -434,4 +1050,51 @@ export async function initSettingsTab() {
|
||||
if (savedUrl) {
|
||||
comfyUI.updateUrl(savedUrl);
|
||||
}
|
||||
|
||||
// --- Data Export ---
|
||||
document.getElementById("wfm-settings-export")?.addEventListener("click", async () => {
|
||||
const statusEl = document.getElementById("wfm-settings-data-status");
|
||||
try {
|
||||
const res = await fetch("/api/wfm/settings/export");
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "wfm-data-export.json";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
statusEl.textContent = t("exportSuccess");
|
||||
statusEl.style.color = "var(--wfm-success, #4caf50)";
|
||||
} catch (e) {
|
||||
statusEl.textContent = t("exportError") + ": " + e.message;
|
||||
statusEl.style.color = "var(--wfm-error, #f44336)";
|
||||
}
|
||||
});
|
||||
|
||||
// --- Data Import ---
|
||||
document.getElementById("wfm-settings-import-file")?.addEventListener("change", async (e) => {
|
||||
const statusEl = document.getElementById("wfm-settings-data-status");
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
try {
|
||||
const text = await file.text();
|
||||
const bundle = JSON.parse(text);
|
||||
const res = await fetch("/api/wfm/settings/import", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(bundle),
|
||||
});
|
||||
const result = await res.json();
|
||||
if (!res.ok) throw new Error(result.error || res.statusText);
|
||||
const imported = result.imported?.join(", ") || "-";
|
||||
statusEl.textContent = t("importSuccess") + ": " + imported;
|
||||
statusEl.style.color = "var(--wfm-success, #4caf50)";
|
||||
} catch (e) {
|
||||
statusEl.textContent = t("importError") + ": " + e.message;
|
||||
statusEl.style.color = "var(--wfm-error, #f44336)";
|
||||
}
|
||||
// Reset file input so same file can be re-selected
|
||||
e.target.value = "";
|
||||
});
|
||||
}
|
||||
|
||||
+255
-254
@@ -9,6 +9,7 @@ import { comfyWorkflow } from "./comfyui-workflow.js";
|
||||
import { loadWorkflowIntoEditor } from "./generate-tab.js";
|
||||
import { t, getSummaryPrompt } from "./i18n.js";
|
||||
import { highlightJSON } from "./json-highlight.js";
|
||||
import { openBadgeEditModal } from "./models-tab.js";
|
||||
|
||||
// ============================================
|
||||
// State
|
||||
@@ -16,26 +17,31 @@ import { highlightJSON } from "./json-highlight.js";
|
||||
|
||||
const state = {
|
||||
workflows: [],
|
||||
activeModel: "ALL",
|
||||
activeBadge: "ALL",
|
||||
searchText: "",
|
||||
viewMode: localStorage.getItem("wfm_default_view") || "thumb", // thumb | card | table
|
||||
selectedWf: null,
|
||||
groupFilter: "", // empty = all groups
|
||||
badgeColors: (() => {
|
||||
try { return JSON.parse(localStorage.getItem("wfm_badge_colors") || "{}"); }
|
||||
catch { return {}; }
|
||||
})(),
|
||||
currentPage: 0,
|
||||
};
|
||||
|
||||
const BADGE_DEFAULT_COLORS = {
|
||||
"SD1.5": "#e67e22",
|
||||
SDXL: "#2ecc71",
|
||||
Flux: "#9b59b6",
|
||||
Flux2: "#8e44ad",
|
||||
SD3: "#3498db",
|
||||
Qwen: "#e74c3c",
|
||||
"Z-IMAGE": "#1abc9c",
|
||||
};
|
||||
|
||||
function getBadgePalette() {
|
||||
try { return JSON.parse(localStorage.getItem("wfm_models_badge_palette") || "{}"); }
|
||||
catch { return {}; }
|
||||
}
|
||||
|
||||
function saveBadgePalette(palette) {
|
||||
localStorage.setItem("wfm_models_badge_palette", JSON.stringify(palette));
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Open in ComfyUI
|
||||
@@ -214,15 +220,22 @@ async function getRawWorkflow(filename) {
|
||||
// Rendering Helpers
|
||||
// ============================================
|
||||
|
||||
function badgeHtml(type) {
|
||||
const color = state.badgeColors[type] || BADGE_DEFAULT_COLORS[type] || "#0077ff";
|
||||
return `<span class="wfm-badge wfm-badge-model" style="background:${color}">${type}</span>`;
|
||||
function badgeHtml(label) {
|
||||
const palette = getBadgePalette();
|
||||
const color = palette[label] || "";
|
||||
const style = color ? ` style="background:${color};color:#fff;"` : "";
|
||||
return `<span class="wfm-badge wfm-badge-model"${style}>${escapeHtml(label)}</span>`;
|
||||
}
|
||||
|
||||
function getAllModelTypes() {
|
||||
function wfBadgesHtml(wf) {
|
||||
const badges = wf.metadata?.badges || [];
|
||||
return badges.map(label => badgeHtml(label)).join("");
|
||||
}
|
||||
|
||||
function getAllBadges() {
|
||||
const set = new Set();
|
||||
state.workflows.forEach((wf) =>
|
||||
(wf.analysis.modelTypes || []).forEach((t) => set.add(t))
|
||||
(wf.metadata?.badges || []).forEach((b) => set.add(b))
|
||||
);
|
||||
return [...set].sort();
|
||||
}
|
||||
@@ -231,17 +244,23 @@ function renderModelFilters() {
|
||||
const container = document.getElementById("wfm-model-filters");
|
||||
if (!container) return;
|
||||
|
||||
const types = getAllModelTypes();
|
||||
const palette = getBadgePalette();
|
||||
const badges = Object.keys(palette).sort();
|
||||
|
||||
container.innerHTML = `
|
||||
<button class="wfm-filter-btn ${state.activeModel === "ALL" ? "active" : ""}" data-filter="ALL">ALL</button>
|
||||
<button class="wfm-filter-btn ${state.activeModel === "FAVORITE" ? "active" : ""}" data-filter="FAVORITE">★</button>
|
||||
${types.map((t) => `<button class="wfm-filter-btn ${state.activeModel === t ? "active" : ""}" data-filter="${t}">${t}</button>`).join("")}
|
||||
<button class="wfm-filter-btn ${state.activeBadge === "ALL" ? "active" : ""}" data-filter="ALL">ALL</button>
|
||||
<button class="wfm-filter-btn ${state.activeBadge === "FAVORITE" ? "active" : ""}" data-filter="FAVORITE">★</button>
|
||||
${badges.map((b) => {
|
||||
const color = palette[b] || "";
|
||||
const style = color ? ` style="background:${color};color:#fff;"` : "";
|
||||
return `<button class="wfm-filter-btn ${state.activeBadge === b ? "active" : ""}" data-filter="${escapeHtml(b)}"${style}>${escapeHtml(b)}</button>`;
|
||||
}).join("")}
|
||||
`;
|
||||
|
||||
container.querySelectorAll(".wfm-filter-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
state.activeModel = btn.dataset.filter;
|
||||
state.activeBadge = btn.dataset.filter;
|
||||
state.currentPage = 0;
|
||||
renderModelFilters();
|
||||
renderGrid();
|
||||
});
|
||||
@@ -250,10 +269,12 @@ function renderModelFilters() {
|
||||
|
||||
function filterWorkflows() {
|
||||
return state.workflows.filter((wf) => {
|
||||
if (state.activeModel === "FAVORITE") {
|
||||
if (wf.filename === ".index.json") return false;
|
||||
|
||||
if (state.activeBadge === "FAVORITE") {
|
||||
if (!wf.metadata.favorite) return false;
|
||||
} else if (state.activeModel !== "ALL") {
|
||||
if (!(wf.analysis.modelTypes || []).includes(state.activeModel))
|
||||
} else if (state.activeBadge !== "ALL") {
|
||||
if (!(wf.metadata?.badges || []).includes(state.activeBadge))
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -305,14 +326,13 @@ function renderGrid() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Thumbnail / Card view
|
||||
grid.innerHTML = "";
|
||||
filtered.forEach((wf) => {
|
||||
const card = document.createElement("div");
|
||||
card.className = "wfm-card";
|
||||
card.dataset.filename = wf.filename;
|
||||
const hasThumb = !!wf.thumbnail;
|
||||
const badges = (wf.analysis.modelTypes || []).map((t) => badgeHtml(t)).join("");
|
||||
const badges = wfBadgesHtml(wf);
|
||||
const tags = (wf.metadata.tags || []).map((t) => `<span class="wfm-tag">#${t}</span>`).join("");
|
||||
const favStar = wf.metadata.favorite ? "\u2605" : "\u2606";
|
||||
const favClass = wf.metadata.favorite ? "wfm-fav-btn active" : "wfm-fav-btn";
|
||||
@@ -357,6 +377,7 @@ function renderGrid() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function renderTableView(grid, filtered) {
|
||||
const table = document.createElement("table");
|
||||
table.className = "wfm-table";
|
||||
@@ -376,7 +397,7 @@ function renderTableView(grid, filtered) {
|
||||
const tr = document.createElement("tr");
|
||||
tr.className = "wfm-table-row";
|
||||
tr.dataset.filename = wf.filename;
|
||||
const badges = (wf.analysis.modelTypes || []).map((t) => badgeHtml(t)).join("");
|
||||
const badges = wfBadgesHtml(wf);
|
||||
const tags = (wf.metadata.tags || []).map((t) => `<span class="wfm-tag">#${t}</span>`).join("");
|
||||
const thumbHtml = wf.thumbnail
|
||||
? `<img src="${wf.thumbnail}" class="wfm-table-thumb" loading="lazy" />`
|
||||
@@ -442,7 +463,6 @@ async function showSidePanel(wf, cardEl) {
|
||||
|
||||
titleEl.textContent = wf.filename.replace(/\.json$/, "");
|
||||
contentEl.textContent = t("loading");
|
||||
panel.style.display = "flex";
|
||||
|
||||
state.selectedWf = wf;
|
||||
|
||||
@@ -462,7 +482,7 @@ async function showSidePanel(wf, cardEl) {
|
||||
sidePanelThumbUpdate(wf);
|
||||
|
||||
// Update group tab
|
||||
sidePanelGroupUpdate();
|
||||
renderSideGroup(wf);
|
||||
|
||||
const badgeEl = document.getElementById("wfm-json-format-badge");
|
||||
try {
|
||||
@@ -486,17 +506,17 @@ async function showSidePanel(wf, cardEl) {
|
||||
}
|
||||
|
||||
function closeSidePanel() {
|
||||
const panel = document.getElementById("wfm-side-panel");
|
||||
if (panel) panel.style.display = "none";
|
||||
document.querySelectorAll(".wfm-card, .wfm-table-row").forEach((c) =>
|
||||
c.classList.remove("wfm-card-selected")
|
||||
);
|
||||
state.selectedWf = null;
|
||||
const titleEl = document.getElementById("wfm-side-panel-title");
|
||||
if (titleEl) titleEl.textContent = "";
|
||||
const listLoadBtn = document.getElementById("wfm-list-load-btn");
|
||||
if (listLoadBtn) { listLoadBtn.disabled = true; listLoadBtn.title = t("selectCardFirst"); }
|
||||
const listOpenComfyBtn = document.getElementById("wfm-list-open-comfyui-btn");
|
||||
if (listOpenComfyBtn) { listOpenComfyBtn.disabled = true; listOpenComfyBtn.title = t("selectCardFirst"); }
|
||||
sidePanelGroupUpdate();
|
||||
renderSideGroup(null);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
@@ -519,7 +539,7 @@ function sidePanelThumbUpdate(wf) {
|
||||
nameEl.textContent = wf ? wf.filename.replace(/\.json$/, "") : "";
|
||||
}
|
||||
if (metaEl && wf) {
|
||||
const badges = (wf.analysis.modelTypes || []).map((mt) => badgeHtml(mt)).join(" ");
|
||||
const badges = wfBadgesHtml(wf);
|
||||
const io = `P:${wf.analysis.inputs?.prompts || 0} I:${wf.analysis.inputs?.images || 0} → ${wf.analysis.outputs?.images || 0}`;
|
||||
metaEl.innerHTML = `${badges} <span style="margin-left:4px;">${io}</span>`;
|
||||
} else if (metaEl) {
|
||||
@@ -531,60 +551,166 @@ function sidePanelThumbUpdate(wf) {
|
||||
// Group Tab in Side Panel
|
||||
// ============================================
|
||||
|
||||
function sidePanelGroupUpdate() {
|
||||
const nameEl = document.getElementById("wfm-grp-prop-name");
|
||||
const groupEl = document.getElementById("wfm-grp-prop-group");
|
||||
const assignBtn = document.getElementById("wfm-assign-group-btn");
|
||||
const removeBtn = document.getElementById("wfm-remove-group-btn");
|
||||
function renderSideGroup(wf) {
|
||||
const el = document.getElementById("wfm-side-tab-group");
|
||||
if (!el) return;
|
||||
|
||||
if (!state.selectedWf) {
|
||||
if (nameEl) nameEl.textContent = t("noSelection");
|
||||
if (groupEl) groupEl.textContent = "";
|
||||
if (assignBtn) assignBtn.disabled = true;
|
||||
if (removeBtn) removeBtn.disabled = true;
|
||||
const allGroups = groups.groupNames();
|
||||
|
||||
if (!wf) {
|
||||
el.innerHTML = `<p style="padding:12px;color:var(--wfm-text-secondary);font-size:12px;">${t("noSelection")}</p>`;
|
||||
_refreshGroupFilter();
|
||||
return;
|
||||
}
|
||||
|
||||
const filename = state.selectedWf.filename;
|
||||
if (nameEl) nameEl.textContent = filename.replace(/\.json$/, "");
|
||||
const grps = groups.groupsOf(filename);
|
||||
if (groupEl) groupEl.textContent = grps.length > 0 ? `${t("groupsLabel")}: ${grps.join(", ")}` : `${t("groupsLabel")}: ${t("groupsNone")}`;
|
||||
if (assignBtn) assignBtn.disabled = false;
|
||||
const filename = wf.filename;
|
||||
const memberOf = groups.groupsOf(filename);
|
||||
const available = allGroups.filter(g => !memberOf.includes(g));
|
||||
|
||||
const selGroup = document.getElementById("wfm-group-select")?.value;
|
||||
if (removeBtn) removeBtn.disabled = !selGroup || !grps.includes(selGroup);
|
||||
}
|
||||
el.innerHTML = `
|
||||
<div style="padding:8px;">
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsCurrentGroups")}</div>
|
||||
${memberOf.length === 0
|
||||
? `<p style="color:var(--wfm-text-secondary);font-size:12px;">${t("modelsNoGroup")}</p>`
|
||||
: memberOf.map(g =>
|
||||
`<div style="display:flex;align-items:center;justify-content:space-between;padding:3px 0;">
|
||||
<span style="font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapeHtml(g)}</span>
|
||||
<button class="wfm-btn wfm-btn-sm wfm-btn-danger wfm-wf-grp-remove" data-group="${escapeHtml(g)}" title="${t("modelsRemoveFromGroup")}">×</button>
|
||||
</div>`
|
||||
).join("")}
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsAssignGroup")}</div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<select id="wfm-grp-assign-sel" class="wfm-select" style="flex:1;font-size:12px;padding:3px 6px;">
|
||||
${available.length === 0
|
||||
? `<option value="">${t("modelsNoGroupAvailable")}</option>`
|
||||
: available.map(g => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("")}
|
||||
</select>
|
||||
<button id="wfm-grp-assign-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary"
|
||||
${available.length === 0 ? "disabled" : ""}>${t("modelsAdd")}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsCreateGroup")}</div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<input type="text" id="wfm-grp-new-input" class="wfm-input"
|
||||
style="flex:1;font-size:12px;padding:3px 6px;" placeholder="${t("modelsGroupName")}">
|
||||
<button id="wfm-grp-create-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary">${t("modelsCreate")}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid var(--wfm-border);padding-top:10px;margin-top:4px;">
|
||||
<div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsManageGroups")}</div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<select id="wfm-grp-manage-sel" class="wfm-select" style="flex:1;font-size:12px;padding:3px 6px;">
|
||||
${allGroups.length === 0
|
||||
? `<option value="">${t("modelsNoGroupAvailable")}</option>`
|
||||
: allGroups.map(g => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("")}
|
||||
</select>
|
||||
<button id="wfm-grp-rename-btn" class="wfm-btn wfm-btn-sm"
|
||||
${allGroups.length === 0 ? "disabled" : ""} title="${t("modelsRename")}">✎</button>
|
||||
<button id="wfm-grp-delete-btn" class="wfm-btn wfm-btn-sm wfm-btn-danger"
|
||||
${allGroups.length === 0 ? "disabled" : ""} title="${t("modelsDelete")}">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function refreshGroupSelects() {
|
||||
const sideSel = document.getElementById("wfm-group-select");
|
||||
const filterSel = document.getElementById("wfm-group-filter");
|
||||
const grpNames = groups.groupNames();
|
||||
|
||||
[filterSel, sideSel].forEach((sel, i) => {
|
||||
if (!sel) return;
|
||||
const prevVal = sel.value;
|
||||
sel.innerHTML = i === 0
|
||||
? `<option value="">${t("allGroups")}</option>`
|
||||
: `<option value="">${t("selectGroup")}</option>`;
|
||||
grpNames.forEach((g) => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = g;
|
||||
opt.textContent = g;
|
||||
sel.appendChild(opt);
|
||||
// グループから除外
|
||||
el.querySelectorAll(".wfm-wf-grp-remove").forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
groups.remove(filename, btn.dataset.group);
|
||||
renderSideGroup(wf);
|
||||
_refreshGroupFilter();
|
||||
showToast(`Removed from "${btn.dataset.group}"`, "success");
|
||||
});
|
||||
if (grpNames.includes(prevVal)) sel.value = prevVal;
|
||||
});
|
||||
|
||||
// グループに追加
|
||||
el.querySelector("#wfm-grp-assign-btn")?.addEventListener("click", () => {
|
||||
const g = el.querySelector("#wfm-grp-assign-sel")?.value;
|
||||
if (!g) return;
|
||||
groups.assign(filename, g);
|
||||
renderSideGroup(wf);
|
||||
showToast(`Added to "${g}"`, "success");
|
||||
});
|
||||
|
||||
// グループ作成（作成後に現在のWFに追加）
|
||||
el.querySelector("#wfm-grp-create-btn")?.addEventListener("click", () => {
|
||||
const input = el.querySelector("#wfm-grp-new-input");
|
||||
const name = input?.value.trim();
|
||||
if (!name) return;
|
||||
if (!groups.createGroup(name)) {
|
||||
showToast(`"${name}" already exists`, "warning");
|
||||
return;
|
||||
}
|
||||
groups.assign(filename, name);
|
||||
input.value = "";
|
||||
renderSideGroup(wf);
|
||||
_refreshGroupFilter();
|
||||
showToast(`Group "${name}" created`, "success");
|
||||
});
|
||||
|
||||
// グループ名変更
|
||||
el.querySelector("#wfm-grp-rename-btn")?.addEventListener("click", () => {
|
||||
const oldName = el.querySelector("#wfm-grp-manage-sel")?.value;
|
||||
if (!oldName) return;
|
||||
const newName = prompt(`Rename group "${oldName}" to:`, oldName);
|
||||
if (!newName || newName === oldName) return;
|
||||
if (!groups.renameGroup(oldName, newName)) {
|
||||
showToast("Rename failed", "error");
|
||||
return;
|
||||
}
|
||||
if (state.groupFilter === oldName) state.groupFilter = newName;
|
||||
renderSideGroup(wf);
|
||||
_refreshGroupFilter();
|
||||
showToast(`Renamed to "${newName}"`, "success");
|
||||
});
|
||||
|
||||
// グループ削除
|
||||
el.querySelector("#wfm-grp-delete-btn")?.addEventListener("click", () => {
|
||||
const name = el.querySelector("#wfm-grp-manage-sel")?.value;
|
||||
if (!name) return;
|
||||
if (!confirm(`Delete group "${name}"?`)) return;
|
||||
groups.deleteGroup(name);
|
||||
if (state.groupFilter === name) {
|
||||
state.groupFilter = "";
|
||||
const filterSel = document.getElementById("wfm-group-filter");
|
||||
if (filterSel) filterSel.value = "";
|
||||
}
|
||||
renderSideGroup(wf);
|
||||
_refreshGroupFilter();
|
||||
showToast(`Group "${name}" deleted`, "success");
|
||||
});
|
||||
|
||||
_refreshGroupFilter();
|
||||
}
|
||||
|
||||
/** ツールバーのグループフィルタセレクトのみ更新 */
|
||||
function _refreshGroupFilter() {
|
||||
const filterSel = document.getElementById("wfm-group-filter");
|
||||
if (!filterSel) return;
|
||||
const prevVal = filterSel.value;
|
||||
const grpNames = groups.groupNames();
|
||||
filterSel.innerHTML = `<option value="">${t("allGroups")}</option>`;
|
||||
grpNames.forEach(g => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = g;
|
||||
opt.textContent = g;
|
||||
filterSel.appendChild(opt);
|
||||
});
|
||||
if (grpNames.includes(prevVal)) filterSel.value = prevVal;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Badge Color Settings
|
||||
// View Settings Panel
|
||||
// ============================================
|
||||
|
||||
function renderBadgeSettings() {
|
||||
function renderViewSettings() {
|
||||
const panel = document.getElementById("wfm-badge-settings-panel");
|
||||
if (!panel) return;
|
||||
|
||||
// === Default View section ===
|
||||
const currentView = localStorage.getItem("wfm_default_view") || "thumb";
|
||||
const viewOptions = [
|
||||
{ value: "thumb", label: t("viewThumbnail") },
|
||||
@@ -598,57 +724,20 @@ function renderBadgeSettings() {
|
||||
</label>`
|
||||
).join("");
|
||||
|
||||
// === Badge Colors section ===
|
||||
const types = getAllModelTypes();
|
||||
const allKnown = new Set([...Object.keys(BADGE_DEFAULT_COLORS), ...types]);
|
||||
const rows = [...allKnown].sort().map((type) => {
|
||||
const color = state.badgeColors[type] || BADGE_DEFAULT_COLORS[type] || "#0077ff";
|
||||
return `<div class="wfm-badge-color-row" data-type="${type}">
|
||||
<span class="wfm-badge wfm-badge-model" style="background:${color}">${type}</span>
|
||||
<input type="color" class="wfm-badge-color-input" value="${color}" data-type="${type}" title="Change color for ${type}" />
|
||||
</div>`;
|
||||
}).join("");
|
||||
|
||||
panel.innerHTML = `
|
||||
<div class="wfm-badge-settings-title">${t("defaultView")}</div>
|
||||
<div class="wfm-settings-radio-group">${viewRadios}</div>
|
||||
<hr style="border:none;border-top:1px solid var(--wfm-border);margin:8px 0;">
|
||||
<div class="wfm-badge-settings-title">${t("badgeColors")}</div>
|
||||
${rows}
|
||||
<button id="wfm-badge-color-reset" class="wfm-btn wfm-btn-sm" style="margin-top:6px;width:100%;">${t("resetColors")}</button>`;
|
||||
<div class="wfm-settings-radio-group">${viewRadios}</div>`;
|
||||
|
||||
// Default view change
|
||||
panel.querySelectorAll('input[name="wfm-default-view"]').forEach((radio) => {
|
||||
radio.addEventListener("change", () => {
|
||||
localStorage.setItem("wfm_default_view", radio.value);
|
||||
state.viewMode = radio.value;
|
||||
// Update active state on view mode buttons
|
||||
document.querySelectorAll(".wfm-view-btn").forEach((b) => {
|
||||
b.classList.toggle("active", b.dataset.view === radio.value);
|
||||
});
|
||||
renderGrid();
|
||||
});
|
||||
});
|
||||
|
||||
// Badge color change
|
||||
panel.querySelectorAll(".wfm-badge-color-input").forEach((input) => {
|
||||
input.addEventListener("input", (e) => {
|
||||
const type = e.target.dataset.type;
|
||||
const color = e.target.value;
|
||||
state.badgeColors[type] = color;
|
||||
localStorage.setItem("wfm_badge_colors", JSON.stringify(state.badgeColors));
|
||||
const badge = e.target.closest(".wfm-badge-color-row")?.querySelector(".wfm-badge");
|
||||
if (badge) badge.style.background = color;
|
||||
renderGrid();
|
||||
});
|
||||
});
|
||||
|
||||
panel.querySelector("#wfm-badge-color-reset")?.addEventListener("click", () => {
|
||||
state.badgeColors = {};
|
||||
localStorage.removeItem("wfm_badge_colors");
|
||||
renderBadgeSettings();
|
||||
renderGrid();
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
@@ -673,10 +762,21 @@ async function saveModalMeta(wf) {
|
||||
|
||||
function openDetailModal(wf) {
|
||||
const meta = wf.metadata;
|
||||
const types = (wf.analysis.modelTypes || []).map((t) => badgeHtml(t)).join(" ");
|
||||
const io = `P:${wf.analysis.inputs?.prompts || 0} I:${wf.analysis.inputs?.images || 0} → ${wf.analysis.outputs?.images || 0}`;
|
||||
const overrideText = (meta.modelTypesOverride || []).join(", ");
|
||||
const isFav = !!meta.favorite;
|
||||
const palette = getBadgePalette();
|
||||
const allBadgeLabels = Object.keys(palette).sort();
|
||||
const activeBadges = meta.badges || [];
|
||||
const badgeCheckboxes = allBadgeLabels.length === 0
|
||||
? `<span style="color:var(--wfm-text-secondary);font-size:12px;">${t("badgeNoneHint")}</span>`
|
||||
: allBadgeLabels.map((label) => {
|
||||
const color = palette[label] || "";
|
||||
const style = color ? ` style="background:${color};color:#fff;"` : "";
|
||||
const checked = activeBadges.includes(label) ? " checked" : "";
|
||||
return `<label class="wfm-badge-check-label">
|
||||
<input type="checkbox" class="wfm-badge-checkbox" value="${escapeHtml(label)}"${checked}>
|
||||
<span class="wfm-badge wfm-badge-model"${style}>${escapeHtml(label)}</span>
|
||||
</label>`;
|
||||
}).join("");
|
||||
|
||||
const thumbSrc = wf.thumbnail || "";
|
||||
const html = `
|
||||
@@ -689,23 +789,9 @@ function openDetailModal(wf) {
|
||||
<div class="wfm-modal-two-col">
|
||||
<div class="wfm-modal-left">
|
||||
<section>
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||||
<h4>${t("analysis")}</h4>
|
||||
<button class="wfm-btn wfm-btn-sm" id="wfm-detail-analyze">${t("analyze")}</button>
|
||||
</div>
|
||||
<div id="wfm-detail-analysis" class="wfm-detail-analysis">
|
||||
<div>${types || `<span style="color:var(--wfm-text-secondary)">${t("noModelDetected")}</span>`}</div>
|
||||
<div style="font-size:11px;color:var(--wfm-text-secondary);margin-top:4px;">${io}</div>
|
||||
</div>
|
||||
<div id="wfm-detail-override-row" style="margin-top:8px;">
|
||||
<div style="display:flex;gap:4px;align-items:center;">
|
||||
<span style="font-size:12px;color:var(--wfm-text-secondary);white-space:nowrap;">${t("modelCategory")}</span>
|
||||
<input type="text" class="wfm-input" id="wfm-detail-model-override"
|
||||
value="${overrideText}"
|
||||
placeholder="${t("modelOverridePlaceholder")}" style="flex:1;font-size:12px;padding:4px 6px;min-width:0;">
|
||||
<button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-detail-override-save">${t("save")}</button>
|
||||
</div>
|
||||
</div>
|
||||
<h4>${t("modelsBadges")} <button class="wfm-btn wfm-btn-sm" id="wfm-detail-badge-manage">⚙ ${t("badgeManage")}</button></h4>
|
||||
<div id="wfm-detail-badge-checkboxes" class="wfm-badge-checkboxes">${badgeCheckboxes}</div>
|
||||
<button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-detail-badges-save" style="margin-top:6px;">${t("save")}</button>
|
||||
</section>
|
||||
<section>
|
||||
<h4>${t("tags")} <span style="font-weight:normal;font-size:11px;">${t("tagsHint")}</span></h4>
|
||||
@@ -813,51 +899,40 @@ function openDetailModal(wf) {
|
||||
document.getElementById(id)?.addEventListener("blur", () => saveModalMeta(wf));
|
||||
});
|
||||
|
||||
// Analyze button
|
||||
document.getElementById("wfm-detail-analyze")?.addEventListener("click", async () => {
|
||||
const btn = document.getElementById("wfm-detail-analyze");
|
||||
btn.disabled = true;
|
||||
btn.textContent = t("analyzing");
|
||||
try {
|
||||
const res = await fetch("/api/wfm/workflows/analyze", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ filename: wf.filename }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
wf.analysis = data.analysis;
|
||||
const cached = state.workflows.find((w) => w.filename === wf.filename);
|
||||
if (cached) cached.analysis = data.analysis;
|
||||
// Re-render analysis section
|
||||
const analysisEl = document.getElementById("wfm-detail-analysis");
|
||||
if (analysisEl) {
|
||||
const newTypes = (data.analysis.modelTypes || []).map((mt) => badgeHtml(mt)).join(" ");
|
||||
const newIo = `P:${data.analysis.inputs?.prompts || 0} I:${data.analysis.inputs?.images || 0} → ${data.analysis.outputs?.images || 0}`;
|
||||
analysisEl.innerHTML = `<div>${newTypes || `<span style="color:var(--wfm-text-secondary)">${t("noModelDetected")}</span>`}</div>
|
||||
<div style="font-size:11px;color:var(--wfm-text-secondary);margin-top:4px;">${newIo}</div>`;
|
||||
}
|
||||
renderGrid();
|
||||
showToast(t("analysisComplete"), "success");
|
||||
} catch (err) {
|
||||
showToast(t("analyzeError") + ": " + err.message, "error");
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = t("analyze");
|
||||
}
|
||||
// Badge manage button
|
||||
document.getElementById("wfm-detail-badge-manage")?.addEventListener("click", () => {
|
||||
openBadgeEditModal(() => {
|
||||
// Rebuild checkboxes after palette changes
|
||||
const palette = getBadgePalette();
|
||||
const allLabels = Object.keys(palette).sort();
|
||||
const currentBadges = [...document.querySelectorAll(".wfm-badge-checkbox:checked")].map(cb => cb.value);
|
||||
const el = document.getElementById("wfm-detail-badge-checkboxes");
|
||||
if (!el) return;
|
||||
el.innerHTML = allLabels.length === 0
|
||||
? `<span style="color:var(--wfm-text-secondary);font-size:12px;">${t("badgeNoneHint")}</span>`
|
||||
: allLabels.map((label) => {
|
||||
const color = palette[label] || "";
|
||||
const style = color ? ` style="background:${color};color:#fff;"` : "";
|
||||
const checked = currentBadges.includes(label) ? " checked" : "";
|
||||
return `<label class="wfm-badge-check-label">
|
||||
<input type="checkbox" class="wfm-badge-checkbox" value="${escapeHtml(label)}"${checked}>
|
||||
<span class="wfm-badge wfm-badge-model"${style}>${escapeHtml(label)}</span>
|
||||
</label>`;
|
||||
}).join("");
|
||||
});
|
||||
});
|
||||
|
||||
// Model type override save
|
||||
document.getElementById("wfm-detail-override-save")?.addEventListener("click", async () => {
|
||||
const overrideStr = document.getElementById("wfm-detail-model-override")?.value || "";
|
||||
const modelTypesOverride = overrideStr.split(",").map((t) => t.trim()).filter(Boolean);
|
||||
// Badge save
|
||||
document.getElementById("wfm-detail-badges-save")?.addEventListener("click", async () => {
|
||||
const badges = [...document.querySelectorAll(".wfm-badge-checkbox:checked")].map(cb => cb.value);
|
||||
try {
|
||||
await saveMetadata(wf.filename, { modelTypesOverride });
|
||||
wf.metadata.modelTypesOverride = modelTypesOverride;
|
||||
await saveMetadata(wf.filename, { badges });
|
||||
wf.metadata.badges = badges;
|
||||
const cached = state.workflows.find((w) => w.filename === wf.filename);
|
||||
if (cached) cached.metadata.modelTypesOverride = modelTypesOverride;
|
||||
if (cached) cached.metadata.badges = badges;
|
||||
renderGrid();
|
||||
showToast(t("overrideSaved"), "success");
|
||||
renderModelFilters();
|
||||
showToast(t("modelsSaved"), "success");
|
||||
} catch (err) {
|
||||
showToast(t("saveError") + ": " + err.message, "error");
|
||||
}
|
||||
@@ -1070,6 +1145,7 @@ export function initWorkflowTab() {
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", () => {
|
||||
state.searchText = searchInput.value;
|
||||
state.currentPage = 0;
|
||||
renderGrid();
|
||||
});
|
||||
}
|
||||
@@ -1097,9 +1173,6 @@ export function initWorkflowTab() {
|
||||
});
|
||||
}
|
||||
|
||||
// Side panel: close button
|
||||
document.getElementById("wfm-side-panel-close")?.addEventListener("click", closeSidePanel);
|
||||
|
||||
// Side panel: tab switching
|
||||
document.querySelectorAll(".wfm-side-tab-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
@@ -1133,78 +1206,12 @@ export function initWorkflowTab() {
|
||||
|
||||
// Group management
|
||||
groups.load();
|
||||
refreshGroupSelects();
|
||||
|
||||
// Add group
|
||||
document.getElementById("wfm-group-add-btn")?.addEventListener("click", () => {
|
||||
const input = document.getElementById("wfm-group-name-input");
|
||||
const name = input?.value.trim();
|
||||
if (!name) return;
|
||||
if (!groups.createGroup(name)) {
|
||||
showToast(`"${name}" already exists`, "error");
|
||||
return;
|
||||
}
|
||||
input.value = "";
|
||||
refreshGroupSelects();
|
||||
showToast(`Group "${name}" created`, "success");
|
||||
});
|
||||
|
||||
// Rename group
|
||||
document.getElementById("wfm-group-rename-btn")?.addEventListener("click", () => {
|
||||
const sel = document.getElementById("wfm-group-select");
|
||||
const oldName = sel?.value;
|
||||
if (!oldName) return;
|
||||
const newName = prompt("New group name:", oldName);
|
||||
if (!newName || newName === oldName) return;
|
||||
if (!groups.renameGroup(oldName, newName)) {
|
||||
showToast("Rename failed", "error");
|
||||
return;
|
||||
}
|
||||
refreshGroupSelects();
|
||||
sidePanelGroupUpdate();
|
||||
showToast(`Group renamed to "${newName}"`, "success");
|
||||
});
|
||||
|
||||
// Delete group
|
||||
document.getElementById("wfm-group-delete-btn")?.addEventListener("click", () => {
|
||||
const sel = document.getElementById("wfm-group-select");
|
||||
const name = sel?.value;
|
||||
if (!name) return;
|
||||
if (!confirm(`Delete group "${name}"?`)) return;
|
||||
groups.deleteGroup(name);
|
||||
refreshGroupSelects();
|
||||
sidePanelGroupUpdate();
|
||||
showToast(`Group "${name}" deleted`, "success");
|
||||
});
|
||||
|
||||
// Assign to group
|
||||
document.getElementById("wfm-assign-group-btn")?.addEventListener("click", () => {
|
||||
const sel = document.getElementById("wfm-group-select");
|
||||
const groupName = sel?.value;
|
||||
if (!groupName || !state.selectedWf) return;
|
||||
groups.assign(state.selectedWf.filename, groupName);
|
||||
sidePanelGroupUpdate();
|
||||
showToast(`Added to "${groupName}"`, "success");
|
||||
});
|
||||
|
||||
// Remove from group
|
||||
document.getElementById("wfm-remove-group-btn")?.addEventListener("click", () => {
|
||||
const sel = document.getElementById("wfm-group-select");
|
||||
const groupName = sel?.value;
|
||||
if (!groupName || !state.selectedWf) return;
|
||||
groups.remove(state.selectedWf.filename, groupName);
|
||||
sidePanelGroupUpdate();
|
||||
showToast(`Removed from "${groupName}"`, "success");
|
||||
});
|
||||
|
||||
// Update remove button state when group select changes
|
||||
document.getElementById("wfm-group-select")?.addEventListener("change", () => {
|
||||
sidePanelGroupUpdate();
|
||||
});
|
||||
_refreshGroupFilter();
|
||||
|
||||
// Toolbar: group filter dropdown
|
||||
document.getElementById("wfm-group-filter")?.addEventListener("change", (e) => {
|
||||
state.groupFilter = e.target.value;
|
||||
state.currentPage = 0;
|
||||
renderGrid();
|
||||
});
|
||||
|
||||
@@ -1238,7 +1245,7 @@ export function initWorkflowTab() {
|
||||
showToast("Refreshed", "success");
|
||||
});
|
||||
|
||||
// Toolbar: Badge color settings
|
||||
// Toolbar: ⚙ settings button (view settings panel)
|
||||
const badgeSettingsBtn = document.getElementById("wfm-badge-settings-btn");
|
||||
const badgeSettingsPanel = document.getElementById("wfm-badge-settings-panel");
|
||||
if (badgeSettingsBtn && badgeSettingsPanel) {
|
||||
@@ -1249,7 +1256,7 @@ export function initWorkflowTab() {
|
||||
badgeSettingsPanel.style.display = "none";
|
||||
return;
|
||||
}
|
||||
renderBadgeSettings();
|
||||
renderViewSettings();
|
||||
badgeSettingsPanel.style.display = "";
|
||||
});
|
||||
document.addEventListener("click", (e) => {
|
||||
@@ -1259,15 +1266,9 @@ export function initWorkflowTab() {
|
||||
});
|
||||
}
|
||||
|
||||
// Toolbar: Reanalyze All button
|
||||
document.getElementById("wfm-reanalyze-btn")?.addEventListener("click", async () => {
|
||||
try {
|
||||
const result = await reanalyzeAll();
|
||||
showToast(`Reanalyzed ${result.count ?? 0} workflows`, "success");
|
||||
await loadWorkflows();
|
||||
} catch (err) {
|
||||
showToast("Reanalyze error: " + err.message, "error");
|
||||
}
|
||||
// Toolbar: ⚙ Badge button
|
||||
document.getElementById("wfm-badge-btn")?.addEventListener("click", () => {
|
||||
openBadgeEditModal(() => renderGrid());
|
||||
});
|
||||
|
||||
// Initial load
|
||||
|
||||
+350
-87
@@ -6,6 +6,7 @@
|
||||
<title>Workflow Studio</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/wfm_static/favicon.svg">
|
||||
<link rel="stylesheet" href="/wfm_static/css/main.css">
|
||||
<link rel="stylesheet" href="/wfm_static/css/gallery-tab.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
@@ -16,8 +17,10 @@
|
||||
<nav class="wfm-tabs">
|
||||
<button class="wfm-tab active" data-tab="workflow">Workflow</button>
|
||||
<button class="wfm-tab" data-tab="nodes">Nodes</button>
|
||||
<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="gallery">Gallery</button>
|
||||
<button class="wfm-tab" data-tab="settings">Settings</button>
|
||||
<button class="wfm-tab" data-tab="help">Help</button>
|
||||
</nav>
|
||||
@@ -49,13 +52,13 @@
|
||||
<button class="wfm-view-btn" data-view="table" title="Table">≡</button>
|
||||
</div>
|
||||
<button id="wfm-refresh-btn" class="wfm-btn wfm-btn-sm">Refresh</button>
|
||||
<button id="wfm-reanalyze-btn" class="wfm-btn wfm-btn-sm" title="Re-analyze all workflows">Reanalyze All</button>
|
||||
<label class="wfm-btn wfm-btn-sm" style="cursor:pointer;">
|
||||
Import
|
||||
<input type="file" id="wfm-import-input" multiple accept=".json,.png" style="display:none">
|
||||
</label>
|
||||
<button id="wfm-badge-btn" class="wfm-btn wfm-btn-sm" title="Badge settings">⚙ Badge</button>
|
||||
<div class="wfm-badge-settings-wrap">
|
||||
<button id="wfm-badge-settings-btn" class="wfm-btn wfm-btn-sm" title="Badge color settings">⚙</button>
|
||||
<button id="wfm-badge-settings-btn" class="wfm-btn wfm-btn-sm" title="View settings">⚙</button>
|
||||
<div id="wfm-badge-settings-panel" class="wfm-badge-settings-panel" style="display:none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,10 +68,9 @@
|
||||
<p class="wfm-placeholder">Loading workflows...</p>
|
||||
</div>
|
||||
<!-- Side Panel -->
|
||||
<div id="wfm-side-panel" class="wfm-side-panel" style="display:none;">
|
||||
<div id="wfm-side-panel" class="wfm-side-panel">
|
||||
<div class="wfm-side-panel-header">
|
||||
<span id="wfm-side-panel-title" class="wfm-side-panel-title"></span>
|
||||
<button id="wfm-side-panel-close" class="wfm-side-panel-close">×</button>
|
||||
</div>
|
||||
<div class="wfm-side-tab-nav">
|
||||
<button class="wfm-side-tab-btn active" data-side-tab="thumb">Thumbnail</button>
|
||||
@@ -96,35 +98,8 @@
|
||||
<pre id="wfm-json-content" class="wfm-json-content"></pre>
|
||||
</div>
|
||||
<!-- Group Tab -->
|
||||
<div id="wfm-side-tab-group" class="wfm-side-tab-content" style="display:none;">
|
||||
<div class="wfm-group-panel">
|
||||
<div class="wfm-group-section">
|
||||
<div class="wfm-group-section-title">Properties</div>
|
||||
<div id="wfm-grp-prop-name" class="wfm-group-prop">No selection</div>
|
||||
<div id="wfm-grp-prop-group" class="wfm-group-prop"></div>
|
||||
</div>
|
||||
<hr class="wfm-group-divider">
|
||||
<div class="wfm-group-section">
|
||||
<div class="wfm-group-section-title">Group Management</div>
|
||||
<div style="display:flex;gap:4px;margin-bottom:6px;">
|
||||
<input type="text" id="wfm-group-name-input" class="wfm-input" placeholder="Group name" style="flex:1;min-width:0;padding:4px 6px;font-size:12px;">
|
||||
<button id="wfm-group-add-btn" class="wfm-btn wfm-btn-sm" title="Create group">Add</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:4px;margin-bottom:6px;">
|
||||
<select id="wfm-group-select" class="wfm-select" style="flex:1;min-width:0;padding:4px 6px;font-size:12px;">
|
||||
<option value="">Select group</option>
|
||||
</select>
|
||||
<button id="wfm-group-rename-btn" class="wfm-btn wfm-btn-sm" title="Rename group">✎</button>
|
||||
<button id="wfm-group-delete-btn" class="wfm-btn wfm-btn-sm wfm-btn-danger" title="Delete group" style="padding:4px 8px;font-size:12px;">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="wfm-group-divider">
|
||||
<div class="wfm-group-section">
|
||||
<div class="wfm-group-section-title">Workflow Actions</div>
|
||||
<button id="wfm-assign-group-btn" class="wfm-btn wfm-btn-sm" style="width:100%;margin-bottom:4px;" disabled>Add to Group</button>
|
||||
<button id="wfm-remove-group-btn" class="wfm-btn wfm-btn-sm wfm-btn-danger" style="width:100%;margin-bottom:4px;font-size:12px;" disabled>Remove from Group</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wfm-side-tab-group" class="wfm-side-tab-content" style="display:none;overflow-y:auto;">
|
||||
<!-- JS動的生成: renderSideGroup() -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -163,10 +138,9 @@
|
||||
<p class="wfm-placeholder" id="wfm-nodes-placeholder">Click to load nodes...</p>
|
||||
</div>
|
||||
<!-- Side Panel -->
|
||||
<div id="wfm-nodes-side-panel" class="wfm-side-panel" style="display:none;">
|
||||
<div id="wfm-nodes-side-panel" class="wfm-side-panel">
|
||||
<div class="wfm-side-panel-header">
|
||||
<span id="wfm-nodes-panel-title" class="wfm-side-panel-title"></span>
|
||||
<button id="wfm-nodes-panel-close" class="wfm-side-panel-close">×</button>
|
||||
</div>
|
||||
<div class="wfm-side-tab-nav">
|
||||
<button class="wfm-nodes-side-tab-btn active" data-side-tab="details">Details</button>
|
||||
@@ -193,6 +167,80 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Models Tab -->
|
||||
<section id="wfm-tab-models" class="wfm-tab-content">
|
||||
<div class="wfm-toolbar">
|
||||
<!-- Row 1: Model type sub-tabs + badge filter -->
|
||||
<div class="wfm-toolbar-row" style="gap:8px;flex-wrap:wrap;align-items:center;">
|
||||
<div class="wfm-models-type-nav">
|
||||
<button class="wfm-models-type-btn active" data-model-type="checkpoint">Checkpoint</button>
|
||||
<button class="wfm-models-type-btn" data-model-type="lora">LoRA</button>
|
||||
<button class="wfm-models-type-btn" data-model-type="vae">VAE</button>
|
||||
<button class="wfm-models-type-btn" data-model-type="controlnet">ControlNet</button>
|
||||
<button class="wfm-models-type-btn" data-model-type="unet">UNET</button>
|
||||
<button class="wfm-models-type-btn" data-model-type="textencoder">TextEncoder</button>
|
||||
<button class="wfm-models-type-btn" data-model-type="hypernetwork">Hypernetwork</button>
|
||||
<button class="wfm-models-type-btn" data-model-type="embedding">Embedding</button>
|
||||
</div>
|
||||
<div class="wfm-models-type-divider"></div>
|
||||
<div id="wfm-models-badge-filter-bar" class="wfm-badge-filter-bar"></div>
|
||||
</div>
|
||||
<!-- Row 2: Search / filter toolbar -->
|
||||
<div id="wfm-models-toolbar" class="wfm-toolbar-row" style="gap:6px;flex-wrap:wrap;">
|
||||
<button class="wfm-filter-btn" id="wfm-models-fav-btn" title="Favorites">★</button>
|
||||
<input type="text" id="wfm-models-search" class="wfm-search-input" placeholder="Search models...">
|
||||
<select id="wfm-models-tag-filter" class="wfm-select wfm-toolbar-select"><option value="">All Tags</option></select>
|
||||
<select id="wfm-models-dir-filter" class="wfm-select wfm-toolbar-select"><option value="">All Folders</option></select>
|
||||
<select id="wfm-models-group-filter" class="wfm-select wfm-toolbar-select"><option value="">All Groups</option></select>
|
||||
<select id="wfm-models-status-filter" class="wfm-select wfm-toolbar-select">
|
||||
<option value="all">All</option>
|
||||
<option value="enabled">Enabled only</option>
|
||||
<option value="disabled">Disabled only</option>
|
||||
</select>
|
||||
<div class="wfm-view-btns">
|
||||
<button class="wfm-view-btn active" data-models-view="thumb" title="Thumbnail">⊞</button>
|
||||
<button class="wfm-view-btn" data-models-view="card" title="Card">☰</button>
|
||||
<button class="wfm-view-btn" data-models-view="table" title="Table">≡</button>
|
||||
</div>
|
||||
<span id="wfm-models-count" class="wfm-nodes-count"></span>
|
||||
<button id="wfm-models-refresh-btn" class="wfm-btn wfm-btn-sm">Refresh</button>
|
||||
<button id="wfm-models-civitai-batch-btn" class="wfm-btn wfm-btn-sm" title="Fetch CivitAI info for all models">CivitAI</button>
|
||||
<span id="wfm-models-civitai-progress" style="font-size:12px;color:var(--wfm-text-secondary);"></span>
|
||||
<button id="wfm-models-badge-settings-btn" class="wfm-btn wfm-btn-sm" title="Badge settings">⚙ Badge</button>
|
||||
<button id="wfm-models-select-btn" class="wfm-btn wfm-btn-sm" title="Multi-select models">Select</button>
|
||||
</div>
|
||||
<!-- Bulk action bar (shown in select mode) -->
|
||||
<div id="wfm-models-bulk-bar" class="wfm-bulk-bar" style="display:none;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Grid + Side Panel -->
|
||||
<div class="wfm-workflow-area">
|
||||
<div id="wfm-models-grid" class="wfm-grid wfm-view-thumb">
|
||||
<p class="wfm-placeholder" id="wfm-models-placeholder">Click Refresh to load models...</p>
|
||||
</div>
|
||||
<!-- Side Panel -->
|
||||
<div id="wfm-models-side-panel" class="wfm-side-panel">
|
||||
<div class="wfm-side-panel-header">
|
||||
<span id="wfm-models-panel-title" class="wfm-side-panel-title"></span>
|
||||
</div>
|
||||
<div class="wfm-side-tab-nav">
|
||||
<button class="wfm-models-side-tab-btn active" data-side-tab="info">Info</button>
|
||||
<button class="wfm-models-side-tab-btn" data-side-tab="group">Group</button>
|
||||
<button class="wfm-models-side-tab-btn" data-side-tab="civitai">CivitAI</button>
|
||||
</div>
|
||||
<!-- Info Tab -->
|
||||
<div id="wfm-models-side-info" class="wfm-models-side-content active" style="overflow-y:auto;padding:12px;">
|
||||
</div>
|
||||
<!-- Group Tab -->
|
||||
<div id="wfm-models-side-group" class="wfm-models-side-content" style="display:none;overflow-y:auto;padding:12px;">
|
||||
</div>
|
||||
<!-- CivitAI Tab -->
|
||||
<div id="wfm-models-side-civitai" class="wfm-models-side-content" style="display:none;overflow-y:auto;padding:12px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GenerateUI Tab -->
|
||||
<section id="wfm-tab-generate" class="wfm-tab-content">
|
||||
<!-- Header Row -->
|
||||
@@ -209,53 +257,57 @@
|
||||
|
||||
<!-- Editor Layout -->
|
||||
<div class="wfm-gen-layout">
|
||||
<!-- Left Column: Parameter Editor -->
|
||||
<!-- Left Column: Parameter Tabs -->
|
||||
<div class="wfm-gen-left">
|
||||
<!-- Subtab Navigation -->
|
||||
<!-- Tab Navigation -->
|
||||
<div class="wfm-gen-subtab-nav">
|
||||
<button class="wfm-gen-subtab-btn active" data-subtab="prompt">Prompt</button>
|
||||
<button class="wfm-gen-subtab-btn" data-subtab="image">Image</button>
|
||||
<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="raw">Raw JSON</button>
|
||||
</div>
|
||||
|
||||
<!-- Subtab: Prompt -->
|
||||
<div id="wfm-gen-subtab-prompt" class="wfm-gen-subtab-content active">
|
||||
<div id="wfm-gen-prompt-fields">
|
||||
<p class="wfm-placeholder">Load a workflow to edit prompts</p>
|
||||
<!-- Tab: Input — left sub-col: Prompt(top)+Image(bottom), right sub-col: Raw JSON -->
|
||||
<div id="wfm-gen-subtab-input" class="wfm-gen-subtab-content active">
|
||||
<div class="wfm-gen-tab-cols">
|
||||
<div class="wfm-gen-params-col">
|
||||
<div class="wfm-gen-params-section">
|
||||
<h3 class="wfm-gen-col-title">Prompt</h3>
|
||||
<div id="wfm-gen-prompt-fields">
|
||||
<p class="wfm-placeholder">Load a workflow to edit prompts</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wfm-gen-params-section wfm-gen-params-section--top-border">
|
||||
<h3 class="wfm-gen-col-title">Image</h3>
|
||||
<div id="wfm-gen-image-fields">
|
||||
<p class="wfm-placeholder">Load a workflow to set input images</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wfm-gen-rawjson-col" id="wfm-gen-rawjson-col-input"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subtab: Image Input -->
|
||||
<div id="wfm-gen-subtab-image" class="wfm-gen-subtab-content">
|
||||
<div id="wfm-gen-image-fields">
|
||||
<p class="wfm-placeholder">Load a workflow to set input images</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subtab: Model -->
|
||||
<!-- Tab: Model — left sub-col: model selects, right sub-col: Raw JSON -->
|
||||
<div id="wfm-gen-subtab-model" class="wfm-gen-subtab-content">
|
||||
<div id="wfm-gen-model-fields">
|
||||
<p class="wfm-placeholder">Load a workflow to edit models</p>
|
||||
<div class="wfm-gen-tab-cols">
|
||||
<div class="wfm-gen-params-col wfm-gen-params-col--scroll">
|
||||
<div id="wfm-gen-model-fields">
|
||||
<p class="wfm-placeholder">Load a workflow to edit models</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wfm-gen-rawjson-col" id="wfm-gen-rawjson-col-model"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subtab: Settings -->
|
||||
<!-- Tab: Settings — left sub-col: KSampler(top)+LatentImage(bottom), right sub-col: Raw JSON -->
|
||||
<div id="wfm-gen-subtab-settings" class="wfm-gen-subtab-content">
|
||||
<div id="wfm-gen-settings-fields">
|
||||
<p class="wfm-placeholder">Load a workflow to edit settings</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subtab: Raw JSON -->
|
||||
<div id="wfm-gen-subtab-raw" class="wfm-gen-subtab-content">
|
||||
<div style="margin-bottom:8px;">
|
||||
<button id="wfm-gen-apply-raw-btn" class="wfm-btn wfm-btn-sm">Apply JSON</button>
|
||||
</div>
|
||||
<div class="wfm-json-container" style="height:500px;">
|
||||
<pre id="wfm-gen-raw-json-highlight" class="wfm-json-highlight"></pre>
|
||||
<textarea id="wfm-gen-raw-json" class="wfm-json-editor" spellcheck="false" placeholder="Paste workflow JSON here..."></textarea>
|
||||
<div class="wfm-gen-tab-cols">
|
||||
<div class="wfm-gen-params-col wfm-gen-params-col--scroll">
|
||||
<div id="wfm-gen-settings-fields">
|
||||
<p class="wfm-placeholder">Load a workflow to edit settings</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wfm-gen-rawjson-col" id="wfm-gen-rawjson-col-settings"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -278,10 +330,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Seed -->
|
||||
<div style="display:flex;gap:8px;align-items:center;margin-top:8px;">
|
||||
<label style="font-size:12px;color:var(--wfm-text-secondary);white-space:nowrap;">Seed:</label>
|
||||
<input type="number" id="wfm-gen-seed-value" class="wfm-input" value="-1" style="width:140px;">
|
||||
<select id="wfm-gen-seed-mode" class="wfm-select" style="width:auto;">
|
||||
<div style="display:flex;flex-direction:column;gap:4px;margin-top:8px;">
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<label style="font-size:12px;color:var(--wfm-text-secondary);white-space:nowrap;">Seed:</label>
|
||||
<input type="number" id="wfm-gen-seed-value" class="wfm-input" value="-1" style="flex:1;min-width:0;">
|
||||
</div>
|
||||
<select id="wfm-gen-seed-mode" class="wfm-select" style="width:100%;">
|
||||
<option value="random">Random</option>
|
||||
<option value="fixed">Fixed</option>
|
||||
<option value="increment">Increment</option>
|
||||
@@ -290,6 +344,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Checkpoint Batch Panel -->
|
||||
<div class="wfm-gen-panel" id="wfm-ckpt-batch-panel">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="checkbox" id="wfm-ckpt-batch-enabled" style="width:14px;height:14px;cursor:pointer;accent-color:var(--wfm-primary);">
|
||||
<label for="wfm-ckpt-batch-enabled" style="font-weight:600;font-size:13px;cursor:pointer;">Checkpoint Batch</label>
|
||||
</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>
|
||||
<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;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:11px;">
|
||||
<span id="wfm-ckpt-batch-current-name" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75%;color:var(--wfm-text-primary);"></span>
|
||||
<span id="wfm-ckpt-batch-count" style="color:var(--wfm-text-secondary);white-space:nowrap;margin-left:8px;"></span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result Display -->
|
||||
<div class="wfm-gen-result">
|
||||
<img id="wfm-gen-result-img" style="display:none;max-width:100%;border-radius:6px;">
|
||||
@@ -297,6 +379,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Raw JSON shared widget (moved into active tab's rawjson-col by JS) -->
|
||||
<div id="wfm-gen-rawjson-widget" style="display:none;flex-direction:column;height:100%;">
|
||||
<div class="wfm-gen-rawjson-header">
|
||||
<span class="wfm-gen-rawjson-label">Raw JSON</span>
|
||||
<button id="wfm-gen-apply-raw-btn" class="wfm-btn wfm-btn-sm">Apply</button>
|
||||
</div>
|
||||
<div class="wfm-json-container wfm-gen-rawjson-editor">
|
||||
<pre id="wfm-gen-raw-json-highlight" class="wfm-json-highlight"></pre>
|
||||
<textarea id="wfm-gen-raw-json" class="wfm-json-editor" spellcheck="false" placeholder="Paste workflow JSON here..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Prompt Tab -->
|
||||
@@ -430,9 +524,8 @@
|
||||
<li id="wfm-help-wf-3">Create, rename, delete groups and assign/remove workflows</li>
|
||||
<li id="wfm-help-wf-4">Import JSON/PNG files via button or drag & drop</li>
|
||||
<li id="wfm-help-wf-5">Side panel: thumbnail, JSON viewer (format badge: UI/API/App), clipboard copy, group management</li>
|
||||
<li id="wfm-help-wf-6">Detail modal: rename, favorite, thumbnail change, analysis, category override, tags, memo, AI summary, open in ComfyUI, load in GenerateUI, set as default, delete</li>
|
||||
<li id="wfm-help-wf-7">Customize badge colors per category</li>
|
||||
<li id="wfm-help-wf-8">Batch re-analysis of all workflow I/O (P: prompt nodes, I: image nodes, output: save nodes)</li>
|
||||
<li id="wfm-help-wf-6">Detail modal: rename, favorite, thumbnail change, badge assignment, tags, memo, AI summary, open in ComfyUI, load in GenerateUI, set as default, delete</li>
|
||||
<li id="wfm-help-wf-7">Badge management: add, rename, delete badges with custom colors shared with the Models tab (⚙ Badge button)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -441,11 +534,15 @@
|
||||
<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">Edit parameters: Prompt, Image (drag & drop), Model (checkpoint/VAE/LoRA/ControlNet with filter), Settings (steps/CFG/sampler/scheduler/resolution), Raw JSON</li>
|
||||
<li id="wfm-help-gen-4">Seed control: random, fixed, increment, decrement</li>
|
||||
<li id="wfm-help-gen-5">Generate, progress display, and stop</li>
|
||||
<li id="wfm-help-gen-6">View results with main image and thumbnail history</li>
|
||||
<li id="wfm-help-gen-7">Eagle integration: auto-save generated images to Eagle</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-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-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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -466,11 +563,14 @@
|
||||
<h3>Settings Tab</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-settings-1">UI language and summary language</li>
|
||||
<li id="wfm-help-settings-2">Workflow data folder path</li>
|
||||
<li id="wfm-help-settings-3">ComfyUI connection URL and test</li>
|
||||
<li id="wfm-help-settings-4">Ollama URL, default model, and connection test</li>
|
||||
<li id="wfm-help-settings-5">Default workflow setting</li>
|
||||
<li id="wfm-help-settings-6">Eagle integration URL and auto-save toggle</li>
|
||||
<li id="wfm-help-settings-2">Theme selection (13 presets) with customization: color overrides, background patterns (stripes, polka dot, checkerboard, SVG tiling), and font selection (16 Google Fonts including Japanese display fonts)</li>
|
||||
<li id="wfm-help-settings-3">Workflow data folder path</li>
|
||||
<li id="wfm-help-settings-4">ComfyUI connection URL and test</li>
|
||||
<li id="wfm-help-settings-5">Ollama URL, default model, and connection test</li>
|
||||
<li id="wfm-help-settings-6">Default workflow setting</li>
|
||||
<li id="wfm-help-settings-7">Eagle integration URL and auto-save toggle</li>
|
||||
<li id="wfm-help-settings-8">Data Management: export all plugin data to JSON / import to restore</li>
|
||||
<li id="wfm-help-settings-9">All sections are collapsible accordion panels</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -486,12 +586,47 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3 id="wfm-help-gallery-title">Gallery Tab</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-gallery-1">Browse images in the ComfyUI output folder — set the folder path in Settings > Gallery Output Folder</li>
|
||||
<li id="wfm-help-gallery-2">3-column layout: folder tree (left) | image grid (center) | detail panel (right)</li>
|
||||
<li id="wfm-help-gallery-3">Thumbnail and Table view modes; double-click any image to open fullscreen lightbox</li>
|
||||
<li id="wfm-help-gallery-4">Toolbar filters: favorites (★), text search, tag filter, group filter, sort by date/name</li>
|
||||
<li id="wfm-help-gallery-5">Folder tree: click to load images, expand with ▶; "+ New" creates a subfolder inside the selected folder, "Del" deletes it with all contents</li>
|
||||
<li id="wfm-help-gallery-6">Multi-select with Ctrl+click — bulk operations: Add to Group, Favorite All, Unfavorite All, Move To..., Delete</li>
|
||||
<li id="wfm-help-gallery-7">Detail panel — Info tab: filename, size, date, tags (add/remove), memo; "Move To..." moves the image to another folder, "Delete" removes it permanently</li>
|
||||
<li id="wfm-help-gallery-8">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</li>
|
||||
<li id="wfm-help-gallery-9">Detail panel — Groups tab: create, assign, remove, rename, and delete groups per image</li>
|
||||
<li id="wfm-help-gallery-10">Workflow auto-save: images generated in the Generate UI tab automatically have their workflow saved to gallery metadata and shown in the Metadata tab</li>
|
||||
<li id="wfm-help-gallery-11">Supports PNG (tEXt/iTXt), JPEG, WebP, GIF; workflow extraction reads ComfyUI prompt and workflow keys embedded in PNG metadata</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3>Models Tab</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-models-1">Browse installed models: Checkpoint, LoRA, VAE, ControlNet, UNET, TextEncoder, Hypernetwork, Embedding with sub-tab switching</li>
|
||||
<li id="wfm-help-models-2">Thumbnail, Card, and Table view modes with pagination</li>
|
||||
<li id="wfm-help-models-3">Search, tag filter, group filter, favorites filter, and status filter (All / Enabled only / Disabled only)</li>
|
||||
<li id="wfm-help-models-4">Side panel: Info (file path, tags, memo), Groups management, CivitAI integration</li>
|
||||
<li id="wfm-help-models-5">CivitAI integration: fetch model info by SHA256 hash, batch fetch per model type</li>
|
||||
<li id="wfm-help-models-6">Detail modal: preview image, CivitAI info (base model, trained words, tags), thumbnail change</li>
|
||||
<li id="wfm-help-models-7">Group management: create, rename, delete groups and assign/remove models</li>
|
||||
<li id="wfm-help-models-8">GenUI Model button: apply the selected model to the corresponding node in GenerateUI's current workflow (Checkpoint / LoRA / VAE / ControlNet / UNET / TextEncoder)</li>
|
||||
<li id="wfm-help-models-9">User-defined badges: assign free-label badges with custom colors shared with the Workflow tab</li>
|
||||
<li id="wfm-help-models-10">Enable/Disable models: toggle visibility in ComfyUI by renaming file extension (.disabled suffix). Disable per model (⏸ button on each card) or per group (Enable All / Disable All in Group panel). Changes take effect after ComfyUI refresh.</li>
|
||||
<li id="wfm-help-models-11">Multi-select & bulk operations: click Select to enter selection mode, check multiple models, then use the bulk action bar to add/remove from groups or permanently delete files (model file + preview images + sidecar files such as .json/.info).</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3 id="wfm-help-sidepanel-title">Workflow Studio Library (ComfyUI Side Panel)</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-sidepanel-1">Open from the Workflow Studio Library button in the ComfyUI toolbar</li>
|
||||
<li id="wfm-help-sidepanel-2">Workflows tab: browse favorite workflows, filter by model type, and filter by group</li>
|
||||
<li id="wfm-help-sidepanel-3">Nodes tab: browse favorite nodes, node sets, and node groups</li>
|
||||
<li id="wfm-help-sidepanel-2">Workflows tab: All / ★ Favorites / Groups sub-tabs; ★ shown for favorites in All view</li>
|
||||
<li id="wfm-help-sidepanel-3">Nodes tab: All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Package sub-tabs; Category and Package show a dropdown to filter nodes</li>
|
||||
<li id="wfm-help-sidepanel-11">Models tab: All / ★ Favorites / Groups / By Type sub-tabs</li>
|
||||
<li id="wfm-help-sidepanel-4">Prompts tab: browse prompt presets with All/Favorites/Categories sub-tabs</li>
|
||||
<li id="wfm-help-sidepanel-5">Drag & drop workflows onto the canvas to load them</li>
|
||||
<li id="wfm-help-sidepanel-6">Drag & drop nodes/node sets onto the canvas to place them</li>
|
||||
@@ -499,6 +634,7 @@
|
||||
<li id="wfm-help-sidepanel-8">Copy individual positive (P) or negative (N) prompts from sidebar items</li>
|
||||
<li id="wfm-help-sidepanel-9">Double-click items to load/place without dragging</li>
|
||||
<li id="wfm-help-sidepanel-10">Search within each sub-tab to quickly find items</li>
|
||||
<li id="wfm-help-sidepanel-12">⚙ Theme button (header): customize panel background, text, border colors — saved to localStorage</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -553,6 +689,133 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery Tab -->
|
||||
<section id="wfm-tab-gallery" class="wfm-tab-content">
|
||||
<!-- Toolbar -->
|
||||
<div class="wfm-toolbar">
|
||||
<div class="wfm-toolbar-row" style="gap:6px;flex-wrap:wrap;align-items:center;">
|
||||
<button id="wfm-gallery-fav-btn" class="wfm-filter-btn" title="Favorites">★</button>
|
||||
<input type="text" id="wfm-gallery-search" class="wfm-search-input" placeholder="Search images...">
|
||||
<select id="wfm-gallery-tag-filter" class="wfm-select wfm-toolbar-select">
|
||||
<option value="">All Tags</option>
|
||||
</select>
|
||||
<select id="wfm-gallery-group-filter" class="wfm-select wfm-toolbar-select">
|
||||
<option value="">All Groups</option>
|
||||
</select>
|
||||
<select id="wfm-gallery-sort" class="wfm-select wfm-toolbar-select">
|
||||
<option value="date_desc">Date (Newest)</option>
|
||||
<option value="date_asc">Date (Oldest)</option>
|
||||
<option value="name_asc">Name A-Z</option>
|
||||
<option value="name_desc">Name Z-A</option>
|
||||
</select>
|
||||
<div class="wfm-view-btns">
|
||||
<button class="wfm-view-btn active" data-gallery-view="thumb" title="Thumbnail">⊞</button>
|
||||
<button class="wfm-view-btn" data-gallery-view="table" title="Table">≡</button>
|
||||
</div>
|
||||
<span id="wfm-gallery-count" class="wfm-nodes-count"></span>
|
||||
<button id="wfm-gallery-refresh-btn" class="wfm-btn wfm-btn-sm">Refresh</button>
|
||||
</div>
|
||||
<!-- 複数選択時の一括操作バー -->
|
||||
<div id="wfm-gallery-bulk-bar" class="wfm-gallery-bulk-bar" style="display:none;">
|
||||
<span id="wfm-gallery-bulk-count" class="wfm-gallery-bulk-count"></span>
|
||||
<button id="wfm-gallery-bulk-deselect" class="wfm-btn wfm-btn-sm">Deselect All</button>
|
||||
<select id="wfm-gallery-bulk-group-select" class="wfm-select" style="font-size:12px;padding:3px 6px;">
|
||||
<option value="">Add to Group...</option>
|
||||
</select>
|
||||
<button id="wfm-gallery-bulk-group-add" class="wfm-btn wfm-btn-sm wfm-btn-primary">Add</button>
|
||||
<button id="wfm-gallery-bulk-fav" class="wfm-btn wfm-btn-sm">★ Favorite All</button>
|
||||
<button id="wfm-gallery-bulk-unfav" class="wfm-btn wfm-btn-sm">☆ Unfavorite All</button>
|
||||
<button id="wfm-gallery-bulk-move" class="wfm-btn wfm-btn-sm">Move To...</button>
|
||||
<button id="wfm-gallery-bulk-delete" class="wfm-btn wfm-btn-sm wfm-btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3カラムレイアウト -->
|
||||
<div class="wfm-gallery-layout">
|
||||
<!-- 左: フォルダツリー -->
|
||||
<div id="wfm-gallery-tree-panel" class="wfm-gallery-tree-panel">
|
||||
<div class="wfm-gallery-tree-header">
|
||||
<span class="wfm-gallery-tree-title">Folders</span>
|
||||
<div class="wfm-gallery-tree-actions">
|
||||
<button id="wfm-gallery-folder-create-btn" class="wfm-btn wfm-btn-sm" title="Create subfolder in selected folder">+ New</button>
|
||||
<button id="wfm-gallery-folder-delete-btn" class="wfm-btn wfm-btn-sm wfm-btn-danger" title="Delete selected folder" disabled>Del</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wfm-gallery-tree" class="wfm-gallery-tree">
|
||||
<p class="wfm-placeholder" id="wfm-gallery-tree-placeholder">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中: 画像一覧 -->
|
||||
<div id="wfm-gallery-list-panel" class="wfm-gallery-list-panel">
|
||||
<div id="wfm-gallery-grid" class="wfm-gallery-grid wfm-gallery-view-thumb">
|
||||
<p class="wfm-placeholder" id="wfm-gallery-list-placeholder">Select a folder to browse images.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右: 詳細情報サイドパネル -->
|
||||
<div id="wfm-gallery-detail-panel" class="wfm-gallery-detail-panel">
|
||||
<div class="wfm-gallery-detail-header">
|
||||
<span id="wfm-gallery-detail-filename" class="wfm-gallery-detail-filename"></span>
|
||||
</div>
|
||||
<!-- サムネイルプレビュー -->
|
||||
<div id="wfm-gallery-detail-preview" class="wfm-gallery-detail-preview">
|
||||
<span class="wfm-placeholder">No selection</span>
|
||||
</div>
|
||||
<!-- タブナビ -->
|
||||
<div class="wfm-side-tab-nav">
|
||||
<button class="wfm-gallery-detail-tab-btn active" data-detail-tab="info">Info</button>
|
||||
<button class="wfm-gallery-detail-tab-btn" data-detail-tab="meta">Metadata</button>
|
||||
<button class="wfm-gallery-detail-tab-btn" data-detail-tab="group">Groups</button>
|
||||
</div>
|
||||
<!-- Info タブ -->
|
||||
<div id="wfm-gallery-detail-info" class="wfm-gallery-detail-tab-content active">
|
||||
<div class="wfm-gallery-info-section">
|
||||
<div class="wfm-gallery-info-row" id="wfm-gallery-info-name"></div>
|
||||
<div class="wfm-gallery-info-row" id="wfm-gallery-info-size"></div>
|
||||
<div class="wfm-gallery-info-row" id="wfm-gallery-info-date"></div>
|
||||
</div>
|
||||
<hr class="wfm-group-divider">
|
||||
<!-- タグ -->
|
||||
<div class="wfm-gallery-info-section">
|
||||
<div class="wfm-gallery-section-title">Tags</div>
|
||||
<div id="wfm-gallery-tags-display" class="wfm-gallery-tags-display"></div>
|
||||
<div style="display:flex;gap:4px;margin-top:4px;">
|
||||
<input type="text" id="wfm-gallery-tag-input" class="wfm-input" placeholder="Add tag..." style="flex:1;min-width:0;font-size:12px;padding:4px 6px;">
|
||||
<button id="wfm-gallery-tag-add-btn" class="wfm-btn wfm-btn-sm">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="wfm-group-divider">
|
||||
<!-- メモ -->
|
||||
<div class="wfm-gallery-info-section">
|
||||
<div class="wfm-gallery-section-title">Memo</div>
|
||||
<textarea id="wfm-gallery-memo" class="wfm-gallery-memo" placeholder="Write a memo..." rows="3"></textarea>
|
||||
<button id="wfm-gallery-memo-save-btn" class="wfm-btn wfm-btn-sm" style="margin-top:4px;width:100%;">Save Memo</button>
|
||||
</div>
|
||||
<hr class="wfm-group-divider">
|
||||
<!-- ファイル操作 -->
|
||||
<div class="wfm-gallery-info-section wfm-gallery-file-actions">
|
||||
<button id="wfm-gallery-img-move-btn" class="wfm-btn wfm-btn-sm" disabled>Move To...</button>
|
||||
<button id="wfm-gallery-img-delete-btn" class="wfm-btn wfm-btn-sm wfm-btn-danger" disabled>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Metadata タブ -->
|
||||
<div id="wfm-gallery-detail-meta" class="wfm-gallery-detail-tab-content wfm-gallery-meta-tab" style="display:none;">
|
||||
<div class="wfm-gallery-meta-toolbar">
|
||||
<span id="wfm-gallery-meta-status" class="wfm-gallery-meta-status"></span>
|
||||
<button id="wfm-gallery-copy-workflow-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary" disabled title="Copy embedded workflow JSON">Copy Workflow</button>
|
||||
</div>
|
||||
<pre id="wfm-gallery-workflow-json" class="wfm-gallery-workflow-json">No workflow found in this image.</pre>
|
||||
</div>
|
||||
|
||||
<!-- Group タブ -->
|
||||
<div id="wfm-gallery-detail-group" class="wfm-gallery-detail-tab-content" style="display:none;overflow-y:auto;">
|
||||
<!-- JS動的生成: renderDetailGroup() -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Workflow Detail Modal -->
|
||||
|
||||
+872
-32
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,818 @@
|
||||
/**
|
||||
* Node Library Sidebar Panel
|
||||
*
|
||||
* Fixed sidebar panel injected into ComfyUI DOM.
|
||||
* Three tabs: Favorites (single nodes), Node Sets (multi-node), Groups.
|
||||
* Items are draggable onto the canvas or click-to-place.
|
||||
*/
|
||||
console.log("[WFM] node_sets_menu.js loading...");
|
||||
import { app } from "../../scripts/app.js";
|
||||
console.log("[WFM] node_sets_menu.js: app imported");
|
||||
|
||||
export const NODE_SETS_TOOLTIP = "Node Library – Browse & drag nodes onto canvas";
|
||||
|
||||
// ============================================
|
||||
// State
|
||||
// ============================================
|
||||
|
||||
const state = {
|
||||
visible: false,
|
||||
activeTab: "favorites", // favorites | sets | groups
|
||||
favorites: [], // [{name, display_name}]
|
||||
nodeSets: [],
|
||||
groups: {}, // {groupName: [nodeName, ...]}
|
||||
metadata: {},
|
||||
searchText: "",
|
||||
loaded: false,
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// API
|
||||
// ============================================
|
||||
|
||||
const fetchNodeSets = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/wfm/node-sets");
|
||||
return res.ok ? await res.json() : [];
|
||||
} catch { return []; }
|
||||
};
|
||||
|
||||
const fetchMetadata = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/wfm/nodes/metadata");
|
||||
return res.ok ? await res.json() : {};
|
||||
} catch { return {}; }
|
||||
};
|
||||
|
||||
const fetchGroups = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/wfm/nodes/groups");
|
||||
return res.ok ? await res.json() : {};
|
||||
} catch { return {}; }
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
const [metadata, nodeSets, groups] = await Promise.all([
|
||||
fetchMetadata(), fetchNodeSets(), fetchGroups(),
|
||||
]);
|
||||
state.metadata = metadata;
|
||||
state.nodeSets = nodeSets;
|
||||
state.groups = groups;
|
||||
|
||||
// Extract favorites from metadata
|
||||
state.favorites = [];
|
||||
for (const [name, meta] of Object.entries(metadata)) {
|
||||
if (name === "_groups") continue;
|
||||
if (meta.favorite) {
|
||||
state.favorites.push({ name, display_name: name });
|
||||
}
|
||||
}
|
||||
state.loaded = true;
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Canvas placement helpers
|
||||
// ============================================
|
||||
|
||||
const getCanvasDropPos = (e) => {
|
||||
const canvas = app.canvas;
|
||||
if (!canvas) return [100, 100];
|
||||
const rect = canvas.canvas.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left) / canvas.ds.scale - canvas.ds.offset[0];
|
||||
const y = (e.clientY - rect.top) / canvas.ds.scale - canvas.ds.offset[1];
|
||||
return [x, y];
|
||||
};
|
||||
|
||||
const placeSingleNode = (classType, pos) => {
|
||||
const graph = app.graph;
|
||||
if (!graph) return;
|
||||
const node = LiteGraph.createNode(classType);
|
||||
if (!node) {
|
||||
showToast(`Unknown node: ${classType}`, "error");
|
||||
return;
|
||||
}
|
||||
node.pos = pos || [100, 100];
|
||||
graph.add(node);
|
||||
app.canvas.setDirty(true, true);
|
||||
showToast(`Placed: ${node.title || classType}`, "success");
|
||||
};
|
||||
|
||||
const placeNodeSet = (nodeSet, pos) => {
|
||||
const graph = app.graph;
|
||||
const canvas = app.canvas;
|
||||
if (!graph || !canvas) return;
|
||||
|
||||
const nodes = nodeSet.nodes || [];
|
||||
if (nodes.length === 0) return;
|
||||
|
||||
const baseX = pos ? pos[0] : (-canvas.ds.offset[0] + canvas.canvas.width / 2 / canvas.ds.scale);
|
||||
const baseY = pos ? pos[1] : (-canvas.ds.offset[1] + canvas.canvas.height / 2 / canvas.ds.scale);
|
||||
|
||||
const positions = nodes.map(n => n.rel_pos || [0, 0]);
|
||||
const minX = Math.min(...positions.map(p => p[0]));
|
||||
const minY = Math.min(...positions.map(p => p[1]));
|
||||
|
||||
const createdNodes = [];
|
||||
for (const nodeDef of nodes) {
|
||||
if (!nodeDef.class_type) { createdNodes.push(null); continue; }
|
||||
const node = LiteGraph.createNode(nodeDef.class_type);
|
||||
if (!node) { createdNodes.push(null); continue; }
|
||||
const rp = nodeDef.rel_pos || [0, 0];
|
||||
node.pos = [baseX + rp[0] - minX, baseY + rp[1] - minY];
|
||||
if (nodeDef.title) node.title = nodeDef.title;
|
||||
if (nodeDef.widget_values && node.widgets) {
|
||||
for (const [k, v] of Object.entries(nodeDef.widget_values)) {
|
||||
const w = node.widgets.find(ww => ww.name === k);
|
||||
if (w) w.value = v;
|
||||
}
|
||||
}
|
||||
graph.add(node);
|
||||
createdNodes.push(node);
|
||||
}
|
||||
|
||||
for (const link of (nodeSet.links || [])) {
|
||||
const from = createdNodes[link.from_node];
|
||||
const to = createdNodes[link.to_node];
|
||||
if (from && to) {
|
||||
try { from.connect(link.from_slot ?? 0, to, link.to_slot ?? 0); } catch {}
|
||||
}
|
||||
}
|
||||
|
||||
canvas.setDirty(true, true);
|
||||
showToast(`Placed "${nodeSet.name}" (${createdNodes.filter(Boolean).length} nodes)`, "success");
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Drag & Drop onto canvas
|
||||
// ============================================
|
||||
|
||||
let dropHandlerInstalled = false;
|
||||
|
||||
const installCanvasDropHandler = () => {
|
||||
if (dropHandlerInstalled) return;
|
||||
dropHandlerInstalled = true;
|
||||
|
||||
const canvasEl = document.getElementById("graph-canvas");
|
||||
if (!canvasEl) return;
|
||||
|
||||
canvasEl.addEventListener("dragover", (e) => {
|
||||
if (e.dataTransfer.types.includes("application/x-wfm-node")) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "copy";
|
||||
}
|
||||
});
|
||||
|
||||
canvasEl.addEventListener("drop", (e) => {
|
||||
const raw = e.dataTransfer.getData("application/x-wfm-node");
|
||||
if (!raw) return;
|
||||
e.preventDefault();
|
||||
|
||||
const data = JSON.parse(raw);
|
||||
const pos = getCanvasDropPos(e);
|
||||
|
||||
if (data.type === "single") {
|
||||
placeSingleNode(data.classType, pos);
|
||||
} else if (data.type === "set") {
|
||||
const set = state.nodeSets.find(s => s.id === data.setId);
|
||||
if (set) placeNodeSet(set, pos);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Sidebar Panel DOM
|
||||
// ============================================
|
||||
|
||||
let panelEl = null;
|
||||
|
||||
const PANEL_ID = "wfm-node-library-panel";
|
||||
|
||||
const createPanel = () => {
|
||||
if (panelEl) return panelEl;
|
||||
|
||||
const panel = document.createElement("div");
|
||||
panel.id = PANEL_ID;
|
||||
panel.innerHTML = `
|
||||
<div class="wfm-nlp-header">
|
||||
<span class="wfm-nlp-title">Node Library</span>
|
||||
<button class="wfm-nlp-refresh" title="Refresh">↻</button>
|
||||
<button class="wfm-nlp-close" title="Close">×</button>
|
||||
</div>
|
||||
<div class="wfm-nlp-tabs">
|
||||
<button class="wfm-nlp-tab active" data-tab="favorites">★ Favorites</button>
|
||||
<button class="wfm-nlp-tab" data-tab="sets">☰ Sets</button>
|
||||
<button class="wfm-nlp-tab" data-tab="groups">📁 Groups</button>
|
||||
</div>
|
||||
<div class="wfm-nlp-search">
|
||||
<input type="text" class="wfm-nlp-search-input" placeholder="Search...">
|
||||
</div>
|
||||
<div class="wfm-nlp-content"></div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(panel);
|
||||
panelEl = panel;
|
||||
|
||||
// Tab switching
|
||||
panel.querySelectorAll(".wfm-nlp-tab").forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
state.activeTab = btn.dataset.tab;
|
||||
panel.querySelectorAll(".wfm-nlp-tab").forEach(b => b.classList.remove("active"));
|
||||
btn.classList.add("active");
|
||||
renderContent();
|
||||
});
|
||||
});
|
||||
|
||||
// Close
|
||||
panel.querySelector(".wfm-nlp-close").addEventListener("click", () => togglePanel());
|
||||
|
||||
// Search
|
||||
panel.querySelector(".wfm-nlp-search-input").addEventListener("input", (e) => {
|
||||
state.searchText = e.target.value.toLowerCase().trim();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
// Refresh
|
||||
panel.querySelector(".wfm-nlp-refresh").addEventListener("click", async () => {
|
||||
await loadData();
|
||||
renderContent();
|
||||
showToast("Node Library refreshed", "success");
|
||||
});
|
||||
|
||||
injectStyles();
|
||||
return panel;
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Render content
|
||||
// ============================================
|
||||
|
||||
const renderContent = () => {
|
||||
const content = panelEl?.querySelector(".wfm-nlp-content");
|
||||
if (!content) return;
|
||||
|
||||
if (!state.loaded) {
|
||||
content.innerHTML = `<div class="wfm-nlp-empty">Loading...</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (state.activeTab) {
|
||||
case "favorites": renderFavorites(content); break;
|
||||
case "sets": renderSets(content); break;
|
||||
case "groups": renderGroups(content); break;
|
||||
}
|
||||
};
|
||||
|
||||
const renderFavorites = (container) => {
|
||||
let items = state.favorites;
|
||||
if (state.searchText) {
|
||||
items = items.filter(n => n.name.toLowerCase().includes(state.searchText));
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = `<div class="wfm-nlp-empty">
|
||||
${state.favorites.length === 0 ? "No favorites yet.<br><small>Star nodes in Workflow Studio → Nodes tab</small>" : "No matches"}
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = "";
|
||||
for (const node of items) {
|
||||
const el = createDraggableItem(node.display_name || node.name, "single", { classType: node.name });
|
||||
el.addEventListener("dblclick", () => {
|
||||
placeSingleNode(node.name);
|
||||
});
|
||||
container.appendChild(el);
|
||||
}
|
||||
};
|
||||
|
||||
const renderSets = (container) => {
|
||||
let items = state.nodeSets;
|
||||
if (state.searchText) {
|
||||
items = items.filter(s =>
|
||||
s.name.toLowerCase().includes(state.searchText) ||
|
||||
(s.tags || []).some(t => t.toLowerCase().includes(state.searchText))
|
||||
);
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = `<div class="wfm-nlp-empty">
|
||||
${state.nodeSets.length === 0 ? "No node sets.<br><small>Create sets in Workflow Studio → Nodes tab</small>" : "No matches"}
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = "";
|
||||
for (const set of items) {
|
||||
const count = (set.nodes || []).length;
|
||||
const el = createDraggableItem(
|
||||
`${esc(set.name)} <span class="wfm-nlp-badge">${count} nodes</span>`,
|
||||
"set",
|
||||
{ setId: set.id },
|
||||
set.description
|
||||
);
|
||||
el.addEventListener("dblclick", () => {
|
||||
placeNodeSet(set);
|
||||
});
|
||||
container.appendChild(el);
|
||||
}
|
||||
};
|
||||
|
||||
const renderGroups = (container) => {
|
||||
const groupNames = Object.keys(state.groups).sort();
|
||||
|
||||
if (groupNames.length === 0) {
|
||||
container.innerHTML = `<div class="wfm-nlp-empty">
|
||||
No groups.<br><small>Create groups in Workflow Studio → Nodes tab</small>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
let filtered = groupNames;
|
||||
if (state.searchText) {
|
||||
filtered = groupNames.filter(g =>
|
||||
g.toLowerCase().includes(state.searchText) ||
|
||||
(state.groups[g] || []).some(n => n.toLowerCase().includes(state.searchText))
|
||||
);
|
||||
}
|
||||
|
||||
container.innerHTML = "";
|
||||
for (const groupName of filtered) {
|
||||
const nodes = state.groups[groupName] || [];
|
||||
|
||||
const section = document.createElement("div");
|
||||
section.className = "wfm-nlp-group-section";
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "wfm-nlp-group-header";
|
||||
header.innerHTML = `<span>${esc(groupName)}</span> <span class="wfm-nlp-badge">${nodes.length}</span>`;
|
||||
header.addEventListener("click", () => {
|
||||
const list = section.querySelector(".wfm-nlp-group-list");
|
||||
list.style.display = list.style.display === "none" ? "block" : "none";
|
||||
header.classList.toggle("collapsed");
|
||||
});
|
||||
section.appendChild(header);
|
||||
|
||||
const list = document.createElement("div");
|
||||
list.className = "wfm-nlp-group-list";
|
||||
for (const nodeName of nodes) {
|
||||
const el = createDraggableItem(nodeName, "single", { classType: nodeName });
|
||||
el.addEventListener("dblclick", () => placeSingleNode(nodeName));
|
||||
list.appendChild(el);
|
||||
}
|
||||
section.appendChild(list);
|
||||
container.appendChild(section);
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Draggable item factory
|
||||
// ============================================
|
||||
|
||||
const createDraggableItem = (label, type, data, subtitle) => {
|
||||
const el = document.createElement("div");
|
||||
el.className = "wfm-nlp-item";
|
||||
el.draggable = true;
|
||||
el.innerHTML = `
|
||||
<div class="wfm-nlp-item-label">${label}</div>
|
||||
${subtitle ? `<div class="wfm-nlp-item-sub">${esc(subtitle)}</div>` : ""}
|
||||
`;
|
||||
|
||||
el.addEventListener("dragstart", (e) => {
|
||||
e.dataTransfer.effectAllowed = "copy";
|
||||
e.dataTransfer.setData("application/x-wfm-node", JSON.stringify({ type, ...data }));
|
||||
el.classList.add("dragging");
|
||||
});
|
||||
|
||||
el.addEventListener("dragend", () => {
|
||||
el.classList.remove("dragging");
|
||||
});
|
||||
|
||||
return el;
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Toggle & exports
|
||||
// ============================================
|
||||
|
||||
export const togglePanel = async () => {
|
||||
const panel = createPanel();
|
||||
state.visible = !state.visible;
|
||||
panel.style.display = state.visible ? "flex" : "none";
|
||||
|
||||
if (state.visible && !state.loaded) {
|
||||
await loadData();
|
||||
renderContent();
|
||||
}
|
||||
|
||||
installCanvasDropHandler();
|
||||
};
|
||||
|
||||
export const getNodeSetsIcon = () => `
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="14" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="3" y="14" width="7" height="7" rx="1"/>
|
||||
<path d="M17.5 14v7M14 17.5h7"/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
// ============================================
|
||||
// Toast
|
||||
// ============================================
|
||||
|
||||
const showToast = (message, type = "info") => {
|
||||
const existing = document.getElementById("wfm-ns-toast");
|
||||
if (existing) existing.remove();
|
||||
|
||||
const toast = document.createElement("div");
|
||||
toast.id = "wfm-ns-toast";
|
||||
const colors = {
|
||||
success: { bg: "rgba(46,213,115,0.95)" },
|
||||
error: { bg: "rgba(255,71,87,0.95)" },
|
||||
info: { bg: "rgba(74,158,255,0.95)" },
|
||||
};
|
||||
Object.assign(toast.style, {
|
||||
position: "fixed", bottom: "24px", left: "50%", transform: "translateX(-50%)",
|
||||
padding: "10px 24px", background: (colors[type] || colors.info).bg, color: "#fff",
|
||||
borderRadius: "8px", fontSize: "14px", fontWeight: "500", zIndex: "99999",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.3)", transition: "opacity 0.3s", whiteSpace: "nowrap",
|
||||
});
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(() => { toast.style.opacity = "0"; setTimeout(() => toast.remove(), 300); }, 3000);
|
||||
};
|
||||
|
||||
const esc = (s) => s ? String(s).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """) : "";
|
||||
|
||||
// ============================================
|
||||
// Save selected nodes as Node Set (context menu)
|
||||
// ============================================
|
||||
|
||||
const saveSelectedAsNodeSet = async () => {
|
||||
const selectedNodes = Object.values(app.canvas.selected_nodes || {});
|
||||
if (selectedNodes.length === 0) {
|
||||
showToast("Select at least one node first", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
// Prompt for name
|
||||
const name = prompt("Node Set name:");
|
||||
if (!name || !name.trim()) return;
|
||||
|
||||
// Build node list with relative positions
|
||||
// Use the top-left of the bounding box as origin
|
||||
const minX = Math.min(...selectedNodes.map(n => n.pos[0]));
|
||||
const minY = Math.min(...selectedNodes.map(n => n.pos[1]));
|
||||
|
||||
const nodeIdToIndex = new Map();
|
||||
const nodes = [];
|
||||
selectedNodes.forEach((node, i) => {
|
||||
nodeIdToIndex.set(node.id, i);
|
||||
nodes.push({
|
||||
class_type: node.type || node.comfyClass || "",
|
||||
title: node.title || "",
|
||||
rel_pos: [Math.round(node.pos[0] - minX), Math.round(node.pos[1] - minY)],
|
||||
});
|
||||
});
|
||||
|
||||
// Extract links between selected nodes
|
||||
const links = [];
|
||||
const graph = app.graph;
|
||||
|
||||
for (const node of selectedNodes) {
|
||||
if (!node.inputs) continue;
|
||||
for (let slotIdx = 0; slotIdx < node.inputs.length; slotIdx++) {
|
||||
const input = node.inputs[slotIdx];
|
||||
if (input.link == null) continue;
|
||||
|
||||
// Resolve link data
|
||||
let linkData = null;
|
||||
if (graph.links instanceof Map) {
|
||||
linkData = graph.links.get(input.link);
|
||||
} else if (graph.links) {
|
||||
linkData = graph.links[input.link];
|
||||
}
|
||||
if (!linkData) continue;
|
||||
|
||||
// linkData: [id, origin_id, origin_slot, target_id, target_slot, type]
|
||||
// or object with .origin_id, .origin_slot, etc.
|
||||
const originId = linkData.origin_id ?? linkData[1];
|
||||
const originSlot = linkData.origin_slot ?? linkData[2];
|
||||
const targetSlot = linkData.target_slot ?? linkData[4];
|
||||
|
||||
// Only include if both source and target are in the selection
|
||||
if (nodeIdToIndex.has(originId) && nodeIdToIndex.has(node.id)) {
|
||||
links.push({
|
||||
from_node: nodeIdToIndex.get(originId),
|
||||
from_slot: originSlot,
|
||||
to_node: nodeIdToIndex.get(node.id),
|
||||
to_slot: targetSlot,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Save via API
|
||||
try {
|
||||
const res = await fetch("/api/wfm/node-sets", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name: name.trim(), description: "", tags: [], nodes, links }),
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result.status === "ok") {
|
||||
showToast(`Node Set "${name.trim()}" saved (${nodes.length} nodes, ${links.length} links)`, "success");
|
||||
// Refresh sidebar if open
|
||||
if (state.loaded) {
|
||||
await loadData();
|
||||
renderContent();
|
||||
}
|
||||
} else {
|
||||
showToast("Failed to save: " + (result.error || "Unknown error"), "error");
|
||||
}
|
||||
} catch (err) {
|
||||
showToast("Failed to save: " + err.message, "error");
|
||||
}
|
||||
};
|
||||
|
||||
// Register context menu item on all nodes
|
||||
app.registerExtension({
|
||||
name: "WorkflowStudio.NodeSetContextMenu",
|
||||
beforeRegisterNodeDef(nodeType, _nodeData, _app) {
|
||||
const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
|
||||
nodeType.prototype.getExtraMenuOptions = function(_, options) {
|
||||
origGetExtraMenuOptions?.apply(this, arguments);
|
||||
|
||||
const selectedCount = Object.keys(app.canvas.selected_nodes || {}).length;
|
||||
|
||||
// Add separator + menu item
|
||||
options.push(null);
|
||||
options.push({
|
||||
content: `Save as Node Set${selectedCount > 1 ? ` (${selectedCount} nodes)` : ""}`,
|
||||
callback: saveSelectedAsNodeSet,
|
||||
});
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// Styles
|
||||
// ============================================
|
||||
|
||||
const injectStyles = () => {
|
||||
if (document.getElementById("wfm-nlp-styles")) return;
|
||||
const style = document.createElement("style");
|
||||
style.id = "wfm-nlp-styles";
|
||||
style.textContent = `
|
||||
#${PANEL_ID} {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
background: var(--comfy-menu-bg, #1e1e1e);
|
||||
border-left: 1px solid var(--border-color, #4e4e4e);
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
font-family: sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--input-text, #ddd);
|
||||
box-shadow: -4px 0 16px rgba(0,0,0,0.3);
|
||||
}
|
||||
.wfm-nlp-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border-color, #4e4e4e);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wfm-nlp-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
.wfm-nlp-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--input-text, #ddd);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.wfm-nlp-close:hover { opacity: 1; }
|
||||
.wfm-nlp-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border-color, #4e4e4e);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wfm-nlp-tab {
|
||||
flex: 1;
|
||||
padding: 8px 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--input-text, #ddd);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wfm-nlp-tab:hover { opacity: 0.9; }
|
||||
.wfm-nlp-tab.active {
|
||||
opacity: 1;
|
||||
border-bottom-color: var(--p-button-background, #4a9eff);
|
||||
}
|
||||
.wfm-nlp-search {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--border-color, #4e4e4e);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wfm-nlp-search-input {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
background: var(--comfy-input-bg, #2a2a2a);
|
||||
border: 1px solid var(--border-color, #4e4e4e);
|
||||
border-radius: 4px;
|
||||
color: var(--input-text, #ddd);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wfm-nlp-search-input:focus {
|
||||
border-color: var(--p-button-background, #4a9eff);
|
||||
}
|
||||
.wfm-nlp-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.wfm-nlp-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: var(--descrip-text, #999);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.wfm-nlp-item {
|
||||
padding: 7px 12px;
|
||||
cursor: grab;
|
||||
border-bottom: 1px solid var(--border-color, #3a3a3a);
|
||||
transition: background 0.12s;
|
||||
user-select: none;
|
||||
}
|
||||
.wfm-nlp-item:hover {
|
||||
background: var(--comfy-input-bg, #333);
|
||||
}
|
||||
.wfm-nlp-item.dragging {
|
||||
opacity: 0.5;
|
||||
background: var(--comfy-input-bg, #333);
|
||||
}
|
||||
.wfm-nlp-item-label {
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.wfm-nlp-item-sub {
|
||||
font-size: 10px;
|
||||
color: var(--descrip-text, #888);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.wfm-nlp-badge {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
padding: 1px 5px;
|
||||
background: var(--comfy-input-bg, #444);
|
||||
border-radius: 3px;
|
||||
color: var(--descrip-text, #aaa);
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wfm-nlp-group-section {
|
||||
border-bottom: 1px solid var(--border-color, #3a3a3a);
|
||||
}
|
||||
.wfm-nlp-group-header {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.wfm-nlp-group-header:hover {
|
||||
background: var(--comfy-input-bg, #333);
|
||||
}
|
||||
.wfm-nlp-group-header::before {
|
||||
content: "\\25BC";
|
||||
font-size: 8px;
|
||||
margin-right: 6px;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.wfm-nlp-group-header.collapsed::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.wfm-nlp-group-list {
|
||||
padding-left: 8px;
|
||||
}
|
||||
.wfm-nlp-group-list .wfm-nlp-item {
|
||||
padding: 5px 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.wfm-nlp-refresh {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--input-text, #ddd);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.wfm-nlp-refresh:hover { opacity: 1; }
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Context Menu — Save selected nodes as Node Set
|
||||
// ============================================
|
||||
|
||||
const saveSelectedAsNodeSet = async () => {
|
||||
const selectedNodes = Object.values(app.canvas.selected_nodes || {});
|
||||
if (selectedNodes.length === 0) {
|
||||
showToast("Select at least one node first", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const name = prompt("Node Set name:");
|
||||
if (!name || !name.trim()) return;
|
||||
|
||||
const minX = Math.min(...selectedNodes.map(n => n.pos[0]));
|
||||
const minY = Math.min(...selectedNodes.map(n => n.pos[1]));
|
||||
|
||||
const nodeIdToIndex = new Map();
|
||||
const nodes = [];
|
||||
selectedNodes.forEach((node, i) => {
|
||||
nodeIdToIndex.set(node.id, i);
|
||||
nodes.push({
|
||||
class_type: node.type || node.comfyClass || "",
|
||||
title: node.title || "",
|
||||
rel_pos: [Math.round(node.pos[0] - minX), Math.round(node.pos[1] - minY)],
|
||||
});
|
||||
});
|
||||
|
||||
const links = [];
|
||||
const graph = app.graph;
|
||||
for (const node of selectedNodes) {
|
||||
if (!node.inputs) continue;
|
||||
for (let slotIdx = 0; slotIdx < node.inputs.length; slotIdx++) {
|
||||
const input = node.inputs[slotIdx];
|
||||
if (input.link == null) continue;
|
||||
|
||||
let linkData = null;
|
||||
if (graph.links instanceof Map) {
|
||||
linkData = graph.links.get(input.link);
|
||||
} else if (graph.links) {
|
||||
linkData = graph.links[input.link];
|
||||
}
|
||||
if (!linkData) continue;
|
||||
|
||||
const originId = linkData.origin_id ?? linkData[1];
|
||||
const originSlot = linkData.origin_slot ?? linkData[2];
|
||||
const targetSlot = linkData.target_slot ?? linkData[4];
|
||||
|
||||
if (nodeIdToIndex.has(originId) && nodeIdToIndex.has(node.id)) {
|
||||
links.push({
|
||||
from_node: nodeIdToIndex.get(originId),
|
||||
from_slot: originSlot,
|
||||
to_node: nodeIdToIndex.get(node.id),
|
||||
to_slot: targetSlot,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/wfm/node-sets", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name: name.trim(), description: "", tags: [], nodes, links }),
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result.status === "ok") {
|
||||
showToast(`Node Set "${name.trim()}" saved (${nodes.length} nodes, ${links.length} links)`, "success");
|
||||
if (state.loaded) { await loadData(); renderContent(); }
|
||||
} else {
|
||||
showToast("Failed to save: " + (result.error || "Unknown error"), "error");
|
||||
}
|
||||
} catch (err) {
|
||||
showToast("Failed to save: " + err.message, "error");
|
||||
}
|
||||
};
|
||||
|
||||
export { saveSelectedAsNodeSet };
|
||||
@@ -605,51 +605,50 @@ app.registerExtension({
|
||||
};
|
||||
injectStyles();
|
||||
|
||||
const replaceButtonIcon = () => {
|
||||
const wfmButtons = document.querySelectorAll(`button[aria-label="${BUTTON_TOOLTIP}"]`);
|
||||
wfmButtons.forEach((button) => {
|
||||
button.classList.add("wfm-top-menu-button");
|
||||
button.innerHTML = getWfmIcon();
|
||||
button.style.borderRadius = "4px";
|
||||
button.style.padding = "6px";
|
||||
button.style.backgroundColor = "var(--primary-bg)";
|
||||
const svg = button.querySelector("svg");
|
||||
if (svg) {
|
||||
svg.style.width = "20px";
|
||||
svg.style.height = "20px";
|
||||
}
|
||||
});
|
||||
|
||||
const snapButtons = document.querySelectorAll(`button[aria-label="${SNAPSHOT_TOOLTIP}"]`);
|
||||
snapButtons.forEach((button) => {
|
||||
button.classList.add("wfm-snapshot-button");
|
||||
button.innerHTML = getSnapshotIcon();
|
||||
button.style.borderRadius = "4px";
|
||||
button.style.padding = "6px";
|
||||
const svg = button.querySelector("svg");
|
||||
if (svg) {
|
||||
svg.style.width = "20px";
|
||||
svg.style.height = "20px";
|
||||
}
|
||||
});
|
||||
|
||||
const nsButtons = document.querySelectorAll(`button[aria-label="${NODE_SETS_TOOLTIP}"]`);
|
||||
nsButtons.forEach((button) => {
|
||||
button.classList.add("wfm-node-sets-btn");
|
||||
button.innerHTML = getNodeSetsIcon();
|
||||
button.style.borderRadius = "4px";
|
||||
button.style.padding = "6px";
|
||||
const svg = button.querySelector("svg");
|
||||
if (svg) {
|
||||
svg.style.width = "20px";
|
||||
svg.style.height = "20px";
|
||||
}
|
||||
});
|
||||
|
||||
if (wfmButtons.length === 0) {
|
||||
requestAnimationFrame(replaceButtonIcon);
|
||||
const applyButtonIcon = (button, className, getIconFn, extraStyles) => {
|
||||
if (button.querySelector("svg")) return;
|
||||
button.classList.add(className);
|
||||
button.innerHTML = getIconFn();
|
||||
button.style.borderRadius = "4px";
|
||||
button.style.padding = "6px";
|
||||
if (extraStyles) Object.assign(button.style, extraStyles);
|
||||
const svg = button.querySelector("svg");
|
||||
if (svg) {
|
||||
svg.style.width = "20px";
|
||||
svg.style.height = "20px";
|
||||
}
|
||||
};
|
||||
requestAnimationFrame(replaceButtonIcon);
|
||||
|
||||
const buttonConfigs = [
|
||||
{ tooltip: BUTTON_TOOLTIP, className: "wfm-top-menu-button", getIcon: getWfmIcon, styles: { backgroundColor: "var(--primary-bg)" } },
|
||||
{ tooltip: SNAPSHOT_TOOLTIP, className: "wfm-snapshot-button", getIcon: getSnapshotIcon, styles: null },
|
||||
{ tooltip: NODE_SETS_TOOLTIP, className: "wfm-node-sets-btn", getIcon: getNodeSetsIcon, styles: null },
|
||||
];
|
||||
|
||||
const replaceAllIcons = () => {
|
||||
for (const cfg of buttonConfigs) {
|
||||
document.querySelectorAll(`button[aria-label="${cfg.tooltip}"]`).forEach((btn) => {
|
||||
applyButtonIcon(btn, cfg.className, cfg.getIcon, cfg.styles);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const waitAndObserve = () => {
|
||||
const firstBtn = document.querySelector(`button[aria-label="${BUTTON_TOOLTIP}"]`);
|
||||
if (!firstBtn) {
|
||||
requestAnimationFrame(waitAndObserve);
|
||||
return;
|
||||
}
|
||||
replaceAllIcons();
|
||||
|
||||
const container = firstBtn.closest(".actionbar-container") || firstBtn.parentElement;
|
||||
if (container) {
|
||||
new MutationObserver(() => replaceAllIcons()).observe(container, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
requestAnimationFrame(waitAndObserve);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,565 @@
|
||||
console.log("[WFM] top_menu_extension.js loading...");
|
||||
import { app } from "../../scripts/app.js";
|
||||
console.log("[WFM] app imported:", !!app);
|
||||
import { togglePanel, getNodeSetsIcon, NODE_SETS_TOOLTIP, saveSelectedAsNodeSet } from "./node_sets_menu.js";
|
||||
console.log("[WFM] node_sets_menu imports loaded");
|
||||
|
||||
const BUTTON_TOOLTIP = "Launch Workflow Studio (Shift+Click opens in new window)";
|
||||
const SNAPSHOT_TOOLTIP = "Save workflow canvas image as thumbnail";
|
||||
const WFM_PATH = "/wfm";
|
||||
const NEW_WINDOW_FEATURES = "width=1400,height=900,resizable=yes,scrollbars=yes,status=yes";
|
||||
const MAX_ATTACH_ATTEMPTS = 120;
|
||||
const BUTTON_GROUP_CLASS = "wfm-top-menu-group";
|
||||
|
||||
const MIN_VERSION_FOR_ACTION_BAR = [1, 33, 9];
|
||||
|
||||
const openWorkflowStudio = (event) => {
|
||||
const url = `${window.location.origin}${WFM_PATH}`;
|
||||
|
||||
if (event.shiftKey) {
|
||||
window.open(url, "_blank", NEW_WINDOW_FEATURES);
|
||||
return;
|
||||
}
|
||||
|
||||
window.open(url, "_blank");
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Canvas Snapshot - Export workflow as PNG thumbnail
|
||||
// ============================================
|
||||
|
||||
const getWorkflowFilename = () => {
|
||||
const now = new Date();
|
||||
const pad = (n) => String(n).padStart(2, "0");
|
||||
const stamp = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
|
||||
return `wf_${stamp}.json`;
|
||||
};
|
||||
|
||||
// ---- PNG tEXt chunk embedding helpers ----
|
||||
|
||||
const n2b = (n) => new Uint8Array([(n >> 24) & 0xff, (n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff]);
|
||||
|
||||
const joinArrayBuffer = (...bufs) => {
|
||||
const result = new Uint8Array(bufs.reduce((total, buf) => total + buf.byteLength, 0));
|
||||
bufs.reduce((offset, buf) => {
|
||||
result.set(buf, offset);
|
||||
return offset + buf.byteLength;
|
||||
}, 0);
|
||||
return result;
|
||||
};
|
||||
|
||||
let _crcTable = null;
|
||||
const crc32 = (data) => {
|
||||
if (!_crcTable) {
|
||||
_crcTable = [];
|
||||
for (let n = 0; n < 256; n++) {
|
||||
let c = n;
|
||||
for (let k = 0; k < 8; k++) {
|
||||
c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
|
||||
}
|
||||
_crcTable[n] = c;
|
||||
}
|
||||
}
|
||||
let crc = 0 ^ -1;
|
||||
for (let i = 0; i < data.byteLength; i++) {
|
||||
crc = (crc >>> 8) ^ _crcTable[(crc ^ data[i]) & 0xff];
|
||||
}
|
||||
return (crc ^ -1) >>> 0;
|
||||
};
|
||||
|
||||
const embedWorkflowInPng = async (blob, workflowJson) => {
|
||||
const buffer = await blob.arrayBuffer();
|
||||
const typedArr = new Uint8Array(buffer);
|
||||
const view = new DataView(buffer);
|
||||
|
||||
// Create tEXt chunk: "tEXtworkflow\0{json}"
|
||||
const data = new TextEncoder().encode(`tEXtworkflow\0${workflowJson}`);
|
||||
const chunk = joinArrayBuffer(n2b(data.byteLength - 4), data, n2b(crc32(data)));
|
||||
|
||||
// Insert after IHDR chunk (8-byte signature + IHDR length field(4) + IHDR type(4) + IHDR data + CRC(4))
|
||||
const ihdrDataLen = view.getUint32(8);
|
||||
const sz = ihdrDataLen + 20; // 8(sig) + 4(len) + 4(type) + ihdrDataLen + 4(crc)
|
||||
const result = joinArrayBuffer(typedArr.subarray(0, sz), chunk, typedArr.subarray(sz));
|
||||
|
||||
return new Blob([result], { type: "image/png" });
|
||||
};
|
||||
|
||||
// ---- Canvas capture ----
|
||||
|
||||
const captureCanvasSnapshot = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const graph = app.graph;
|
||||
const canvas = app.canvas;
|
||||
if (!graph || !canvas || !graph._nodes?.length) {
|
||||
reject(new Error("No workflow loaded"));
|
||||
return;
|
||||
}
|
||||
|
||||
// Serialize workflow data before changing canvas state
|
||||
const workflowJson = JSON.stringify(graph.serialize());
|
||||
|
||||
// Calculate bounds of all nodes
|
||||
const bounds = graph._nodes.reduce(
|
||||
(p, n) => {
|
||||
if (n.pos[0] < p[0]) p[0] = n.pos[0];
|
||||
if (n.pos[1] < p[1]) p[1] = n.pos[1];
|
||||
const b = n.getBounding();
|
||||
const r = n.pos[0] + b[2];
|
||||
const bot = n.pos[1] + b[3];
|
||||
if (r > p[2]) p[2] = r;
|
||||
if (bot > p[3]) p[3] = bot;
|
||||
return p;
|
||||
},
|
||||
[99999, 99999, -99999, -99999]
|
||||
);
|
||||
|
||||
// Add padding
|
||||
const padding = 80;
|
||||
bounds[0] -= padding;
|
||||
bounds[1] -= padding;
|
||||
bounds[2] += padding;
|
||||
bounds[3] += padding;
|
||||
|
||||
// Save current canvas state
|
||||
const savedState = {
|
||||
scale: canvas.ds.scale,
|
||||
width: canvas.canvas.width,
|
||||
height: canvas.canvas.height,
|
||||
offset: [...canvas.ds.offset],
|
||||
transform: canvas.canvas.getContext("2d").getTransform(),
|
||||
};
|
||||
|
||||
// Set canvas to render full workflow
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.ds.scale = 1;
|
||||
canvas.canvas.width = (bounds[2] - bounds[0]) * dpr;
|
||||
canvas.canvas.height = (bounds[3] - bounds[1]) * dpr;
|
||||
canvas.ds.offset = [-bounds[0], -bounds[1]];
|
||||
canvas.canvas.getContext("2d").setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
|
||||
// Render
|
||||
canvas.draw(true, true);
|
||||
|
||||
// Capture to blob
|
||||
canvas.canvas.toBlob(async (rawBlob) => {
|
||||
// Restore canvas state
|
||||
canvas.ds.scale = savedState.scale;
|
||||
canvas.canvas.width = savedState.width;
|
||||
canvas.canvas.height = savedState.height;
|
||||
canvas.ds.offset = savedState.offset;
|
||||
canvas.canvas.getContext("2d").setTransform(savedState.transform);
|
||||
canvas.draw(true, true);
|
||||
|
||||
if (!rawBlob) {
|
||||
reject(new Error("Failed to generate canvas image"));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Embed workflow JSON into PNG tEXt chunk
|
||||
const blob = await embedWorkflowInPng(rawBlob, workflowJson);
|
||||
resolve(blob);
|
||||
} catch (embedErr) {
|
||||
console.warn("Workflow Studio: failed to embed workflow metadata, saving without it:", embedErr);
|
||||
resolve(rawBlob);
|
||||
}
|
||||
}, "image/png");
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const saveCanvasToWorkflowStudio = async () => {
|
||||
const filename = getWorkflowFilename();
|
||||
|
||||
try {
|
||||
showNotification("Capturing workflow image...", "info");
|
||||
const blob = await captureCanvasSnapshot();
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append("filename", filename);
|
||||
fd.append("image", blob, "canvas.png");
|
||||
|
||||
const res = await fetch("/api/wfm/workflows/save-canvas-image", {
|
||||
method: "POST",
|
||||
body: fd,
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (data.error) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
|
||||
showNotification(`Workflow saved: ${filename.replace(/\.json$/, "")}`, "success");
|
||||
} catch (err) {
|
||||
showNotification("Error: " + err.message, "error");
|
||||
}
|
||||
};
|
||||
|
||||
const showNotification = (message, type = "info") => {
|
||||
// Try using ComfyUI's built-in toast if available
|
||||
try {
|
||||
if (app.ui?.dialog) {
|
||||
// Fallback: use a simple temporary notification
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
|
||||
// Simple toast notification
|
||||
const existing = document.getElementById("wfm-snapshot-toast");
|
||||
if (existing) existing.remove();
|
||||
|
||||
const toast = document.createElement("div");
|
||||
toast.id = "wfm-snapshot-toast";
|
||||
const colors = {
|
||||
success: { bg: "rgba(46,213,115,0.95)", color: "#fff" },
|
||||
error: { bg: "rgba(255,71,87,0.95)", color: "#fff" },
|
||||
info: { bg: "rgba(74,158,255,0.95)", color: "#fff" },
|
||||
};
|
||||
const c = colors[type] || colors.info;
|
||||
Object.assign(toast.style, {
|
||||
position: "fixed",
|
||||
bottom: "24px",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
padding: "10px 24px",
|
||||
background: c.bg,
|
||||
color: c.color,
|
||||
borderRadius: "8px",
|
||||
fontSize: "14px",
|
||||
fontWeight: "500",
|
||||
zIndex: "99999",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
|
||||
transition: "opacity 0.3s ease",
|
||||
whiteSpace: "nowrap",
|
||||
});
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
if (type !== "info") {
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = "0";
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 3000);
|
||||
} else {
|
||||
// Info messages will be replaced by success/error
|
||||
setTimeout(() => {
|
||||
if (toast.parentNode) {
|
||||
toast.style.opacity = "0";
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}
|
||||
}, 10000);
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Version Detection & UI
|
||||
// ============================================
|
||||
|
||||
const getComfyUIFrontendVersion = async () => {
|
||||
try {
|
||||
if (window["__COMFYUI_FRONTEND_VERSION__"]) {
|
||||
return window["__COMFYUI_FRONTEND_VERSION__"];
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("Workflow Studio: unable to read __COMFYUI_FRONTEND_VERSION__:", error);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/system_stats");
|
||||
const data = await response.json();
|
||||
|
||||
if (data?.system?.comfyui_frontend_version) {
|
||||
return data.system.comfyui_frontend_version;
|
||||
}
|
||||
|
||||
if (data?.system?.required_frontend_version) {
|
||||
return data.system.required_frontend_version;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("Workflow Studio: unable to fetch system_stats:", error);
|
||||
}
|
||||
|
||||
return "0.0.0";
|
||||
};
|
||||
|
||||
const parseVersion = (versionStr) => {
|
||||
if (!versionStr || typeof versionStr !== "string") {
|
||||
return [0, 0, 0];
|
||||
}
|
||||
|
||||
const cleanVersion = versionStr.replace(/^[vV]/, "").split("-")[0];
|
||||
const parts = cleanVersion.split(".").map((part) => parseInt(part, 10) || 0);
|
||||
|
||||
while (parts.length < 3) {
|
||||
parts.push(0);
|
||||
}
|
||||
|
||||
return parts;
|
||||
};
|
||||
|
||||
const compareVersions = (version1, version2) => {
|
||||
const v1 = typeof version1 === "string" ? parseVersion(version1) : version1;
|
||||
const v2 = typeof version2 === "string" ? parseVersion(version2) : version2;
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (v1[i] > v2[i]) return 1;
|
||||
if (v1[i] < v2[i]) return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
};
|
||||
|
||||
const supportsActionBarButtons = async () => {
|
||||
const version = await getComfyUIFrontendVersion();
|
||||
return compareVersions(version, MIN_VERSION_FOR_ACTION_BAR) >= 0;
|
||||
};
|
||||
|
||||
const getWfmIcon = () => {
|
||||
return `
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 5 L7 17 L12 7 L17 17 L21 5" stroke-width="2.3"/>
|
||||
<path d="M5 20 Q9 17 12 20 Q15 23 19 20" stroke-width="1.8"/>
|
||||
</svg>
|
||||
`;
|
||||
};
|
||||
|
||||
const getSnapshotIcon = () => {
|
||||
return `
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M8 5 L9 3 L15 3 L16 5"/>
|
||||
</svg>
|
||||
`;
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// Button Creation
|
||||
// ============================================
|
||||
|
||||
const createTopMenuButton = async () => {
|
||||
const { ComfyButton } = await import("../../scripts/ui/components/button.js");
|
||||
|
||||
const button = new ComfyButton({
|
||||
icon: "wfm",
|
||||
tooltip: BUTTON_TOOLTIP,
|
||||
app,
|
||||
enabled: true,
|
||||
classList: "comfyui-button comfyui-menu-mobile-collapse primary",
|
||||
});
|
||||
|
||||
button.element.setAttribute("aria-label", BUTTON_TOOLTIP);
|
||||
button.element.title = BUTTON_TOOLTIP;
|
||||
|
||||
if (button.iconElement) {
|
||||
button.iconElement.innerHTML = getWfmIcon();
|
||||
button.iconElement.style.width = "1.2rem";
|
||||
button.iconElement.style.height = "1.2rem";
|
||||
}
|
||||
|
||||
button.element.addEventListener("click", openWorkflowStudio);
|
||||
return button;
|
||||
};
|
||||
|
||||
const createSnapshotButton = async () => {
|
||||
const { ComfyButton } = await import("../../scripts/ui/components/button.js");
|
||||
|
||||
const button = new ComfyButton({
|
||||
icon: "snapshot",
|
||||
tooltip: SNAPSHOT_TOOLTIP,
|
||||
app,
|
||||
enabled: true,
|
||||
classList: "comfyui-button comfyui-menu-mobile-collapse",
|
||||
});
|
||||
|
||||
button.element.setAttribute("aria-label", SNAPSHOT_TOOLTIP);
|
||||
button.element.title = SNAPSHOT_TOOLTIP;
|
||||
|
||||
if (button.iconElement) {
|
||||
button.iconElement.innerHTML = getSnapshotIcon();
|
||||
button.iconElement.style.width = "1.2rem";
|
||||
button.iconElement.style.height = "1.2rem";
|
||||
}
|
||||
|
||||
button.element.addEventListener("click", saveCanvasToWorkflowStudio);
|
||||
return button;
|
||||
};
|
||||
|
||||
const createNodeSetsButton = async () => {
|
||||
const { ComfyButton } = await import("../../scripts/ui/components/button.js");
|
||||
|
||||
const button = new ComfyButton({
|
||||
icon: "node-sets",
|
||||
tooltip: NODE_SETS_TOOLTIP,
|
||||
app,
|
||||
enabled: true,
|
||||
classList: "comfyui-button comfyui-menu-mobile-collapse wfm-node-sets-btn",
|
||||
});
|
||||
|
||||
button.element.setAttribute("aria-label", NODE_SETS_TOOLTIP);
|
||||
button.element.title = NODE_SETS_TOOLTIP;
|
||||
|
||||
if (button.iconElement) {
|
||||
button.iconElement.innerHTML = getNodeSetsIcon();
|
||||
button.iconElement.style.width = "1.2rem";
|
||||
button.iconElement.style.height = "1.2rem";
|
||||
}
|
||||
|
||||
button.element.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
togglePanel();
|
||||
});
|
||||
|
||||
return button;
|
||||
};
|
||||
|
||||
const attachTopMenuButton = async (attempt = 0) => {
|
||||
if (document.querySelector(`.${BUTTON_GROUP_CLASS}`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Try settingsGroup first (legacy ComfyUI)
|
||||
const settingsGroup = app.menu?.settingsGroup;
|
||||
// Fallback: find the legacy topbar container used by newer ComfyUI
|
||||
const legacyContainer = document.querySelector('[data-testid="legacy-topbar-container"] .flex');
|
||||
|
||||
if (!settingsGroup?.element?.parentElement && !legacyContainer) {
|
||||
if (attempt >= MAX_ATTACH_ATTEMPTS) {
|
||||
console.warn("Workflow Studio: unable to locate the ComfyUI menu container.");
|
||||
return;
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => attachTopMenuButton(attempt + 1));
|
||||
return;
|
||||
}
|
||||
|
||||
const wfmButton = await createTopMenuButton();
|
||||
const snapshotButton = await createSnapshotButton();
|
||||
const nodeSetsButton = await createNodeSetsButton();
|
||||
const { ComfyButtonGroup } = await import("../../scripts/ui/components/buttonGroup.js");
|
||||
|
||||
const buttonGroup = new ComfyButtonGroup(wfmButton, snapshotButton, nodeSetsButton);
|
||||
buttonGroup.element.classList.add(BUTTON_GROUP_CLASS);
|
||||
|
||||
if (settingsGroup?.element?.parentElement) {
|
||||
settingsGroup.element.before(buttonGroup.element);
|
||||
} else if (legacyContainer) {
|
||||
legacyContainer.prepend(buttonGroup.element);
|
||||
}
|
||||
};
|
||||
|
||||
app.registerExtension({
|
||||
name: "WorkflowStudio.TopMenu",
|
||||
actionBarButtons: [
|
||||
{
|
||||
icon: "icon-[mdi--file-document-multiple] size-4",
|
||||
tooltip: BUTTON_TOOLTIP,
|
||||
onClick: openWorkflowStudio,
|
||||
},
|
||||
{
|
||||
icon: "icon-[mdi--camera] size-4",
|
||||
tooltip: SNAPSHOT_TOOLTIP,
|
||||
onClick: saveCanvasToWorkflowStudio,
|
||||
},
|
||||
{
|
||||
icon: "icon-[mdi--view-grid-plus] size-4",
|
||||
tooltip: NODE_SETS_TOOLTIP,
|
||||
onClick: () => togglePanel(),
|
||||
},
|
||||
],
|
||||
beforeRegisterNodeDef(nodeType, _nodeData, _app) {
|
||||
const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
|
||||
nodeType.prototype.getExtraMenuOptions = function (_, options) {
|
||||
origGetExtraMenuOptions?.apply(this, arguments);
|
||||
const selectedCount = Object.keys(app.canvas.selected_nodes || {}).length;
|
||||
options.push(null);
|
||||
options.push({
|
||||
content: `Save as Node Set${selectedCount > 1 ? ` (${selectedCount} nodes)` : ""}`,
|
||||
callback: saveSelectedAsNodeSet,
|
||||
});
|
||||
};
|
||||
},
|
||||
async setup() {
|
||||
const injectStyles = () => {
|
||||
const styleId = "wfm-top-menu-button-styles";
|
||||
if (document.getElementById(styleId)) return;
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.id = styleId;
|
||||
style.textContent = `
|
||||
button[aria-label="${BUTTON_TOOLTIP}"].wfm-top-menu-button {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
button[aria-label="${BUTTON_TOOLTIP}"].wfm-top-menu-button:hover {
|
||||
background-color: var(--primary-hover-bg) !important;
|
||||
}
|
||||
button[aria-label="${SNAPSHOT_TOOLTIP}"].wfm-snapshot-button {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
button[aria-label="${SNAPSHOT_TOOLTIP}"].wfm-snapshot-button:hover {
|
||||
background-color: var(--primary-hover-bg) !important;
|
||||
}
|
||||
button[aria-label="${NODE_SETS_TOOLTIP}"].wfm-node-sets-btn {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
button[aria-label="${NODE_SETS_TOOLTIP}"].wfm-node-sets-btn:hover {
|
||||
background-color: var(--primary-hover-bg) !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
};
|
||||
injectStyles();
|
||||
|
||||
const replaceButtonIcon = () => {
|
||||
const wfmButtons = document.querySelectorAll(`button[aria-label="${BUTTON_TOOLTIP}"]`);
|
||||
wfmButtons.forEach((button) => {
|
||||
button.classList.add("wfm-top-menu-button");
|
||||
button.innerHTML = getWfmIcon();
|
||||
button.style.borderRadius = "4px";
|
||||
button.style.padding = "6px";
|
||||
button.style.backgroundColor = "var(--primary-bg)";
|
||||
const svg = button.querySelector("svg");
|
||||
if (svg) {
|
||||
svg.style.width = "20px";
|
||||
svg.style.height = "20px";
|
||||
}
|
||||
});
|
||||
|
||||
const snapButtons = document.querySelectorAll(`button[aria-label="${SNAPSHOT_TOOLTIP}"]`);
|
||||
snapButtons.forEach((button) => {
|
||||
button.classList.add("wfm-snapshot-button");
|
||||
button.innerHTML = getSnapshotIcon();
|
||||
button.style.borderRadius = "4px";
|
||||
button.style.padding = "6px";
|
||||
const svg = button.querySelector("svg");
|
||||
if (svg) {
|
||||
svg.style.width = "20px";
|
||||
svg.style.height = "20px";
|
||||
}
|
||||
});
|
||||
|
||||
const nsButtons = document.querySelectorAll(`button[aria-label="${NODE_SETS_TOOLTIP}"]`);
|
||||
nsButtons.forEach((button) => {
|
||||
button.classList.add("wfm-node-sets-btn");
|
||||
button.innerHTML = getNodeSetsIcon();
|
||||
button.style.borderRadius = "4px";
|
||||
button.style.padding = "6px";
|
||||
const svg = button.querySelector("svg");
|
||||
if (svg) {
|
||||
svg.style.width = "20px";
|
||||
svg.style.height = "20px";
|
||||
}
|
||||
});
|
||||
|
||||
if (wfmButtons.length === 0) {
|
||||
requestAnimationFrame(replaceButtonIcon);
|
||||
}
|
||||
};
|
||||
requestAnimationFrame(replaceButtonIcon);
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user