Compare commits
@@ -0,0 +1,187 @@
|
||||
# ComfyUI-Workflow-Studio 開発ガイドライン
|
||||
|
||||
## プロジェクト概要
|
||||
ComfyUI用ワークフロー管理プラグイン。aiohttp (ComfyUI PromptServer) 上でSPAを提供する。
|
||||
|
||||
## アーキテクチャ
|
||||
- エントリポイント: `__init__.py` → `py/wfm.py` (WorkflowStudio.add_routes)
|
||||
- バックエンド: `py/routes/` (aiohttp ルート), `py/services/` (ビジネスロジック)
|
||||
- フロントエンド: `web/comfyui/` (ComfyUI拡張), `static/` (SPA), `templates/` (Jinja2)
|
||||
- データ: `data/` (settings.json, metadata.json, node_metadata.json)
|
||||
- i18n: 英語 / 日本語 / 中国語
|
||||
|
||||
---
|
||||
|
||||
## ComfyUI カスタムノード開発ルール
|
||||
|
||||
### NODE_CLASS_MAPPINGS キーは永久に変更不可
|
||||
`NODE_CLASS_MAPPINGS` のキー文字列は、保存済みワークフローとノードを紐付ける公開識別子。
|
||||
一度公開したキーを変更すると、ユーザーの既存ワークフローが壊れる。
|
||||
将来ノードを追加する場合は、キー名を慎重に決定すること。
|
||||
- 名前空間衝突を防ぐため、パック名をプレフィックスに付ける (例: `"WFS_MyNode"`)
|
||||
- リネーム時は旧キーをエイリアスとして残す:
|
||||
```python
|
||||
NODE_CLASS_MAPPINGS = {
|
||||
"WFS_NewName": MyNodeClass, # 新名
|
||||
"WFS_OldName": MyNodeClass, # エイリアス（後方互換）
|
||||
}
|
||||
```
|
||||
|
||||
### ワークフローJSON: ウィジェット値は位置インデックスで格納される
|
||||
ワークフローJSONはウィジェットの値を「名前」ではなく「位置インデックス」で保存する。
|
||||
入力の追加・並べ替えは、保存済みワークフローの値を別パラメータにずらす破壊的変更になる。
|
||||
ワークフロー解析・編集コード (`workflow_analyzer.py`, `workflow_service.py`) を変更する際は、
|
||||
このインデックスマッピングを必ず考慮すること。
|
||||
|
||||
**INPUT_TYPES変更時のチェックリスト:**
|
||||
- ウィジェット追加: 末尾に追加が最も安全。中間挿入は全保存済みJSONの更新が必要
|
||||
- ウィジェット削除: 後続のインデックスが全てずれる。全保存済みJSONの`widgets_values`を修正
|
||||
- 並べ替え: `widgets_values`の順序も合わせて更新
|
||||
- `INPUT_TYPES`を変更するコミットは、影響を受けるワークフローJSONも同時にコミットする
|
||||
|
||||
### ワークフローJSON整合性ルール
|
||||
- `last_node_id` は最大ノードID以上であること（低いと重複IDが発生し無言で壊れる）
|
||||
- `last_link_id` は最大リンクID以上であること
|
||||
- リンクは3箇所で整合する必要がある: `links[]`配列、ソースノードの`outputs[slot].links`、ターゲットノードの`inputs[slot].link`
|
||||
- いずれかが不一致だと接続が無言で消える
|
||||
|
||||
### IS_CHANGED によるキャッシュ制御
|
||||
ComfyUIはキャッシュ付きデータフローグラフ実行エンジン。入力が変わらないと判断したノードはスキップされる。
|
||||
- 毎回実行が必要なノード: `IS_CHANGED` で `float("NaN")` を返す
|
||||
- 本番用: 入力に基づく決定論的なハッシュを返す
|
||||
- 注意: `IS_CHANGED` はスロット接続された入力に `None` を受け取ることがある。`None`チェックを必ず入れる
|
||||
|
||||
### VALIDATE_INPUTS の落とし穴
|
||||
スロット接続された入力は検証時に `None` として渡される（実行時には実値が来る）。
|
||||
```python
|
||||
@classmethod
|
||||
def VALIDATE_INPUTS(cls, text=None, **kwargs):
|
||||
if text is None:
|
||||
return True # スロット接続 — 実行時に実値が来る
|
||||
if isinstance(text, str) and text.strip() == "":
|
||||
return "Text input cannot be empty"
|
||||
return True
|
||||
```
|
||||
|
||||
### ノードの安全な分離読み込み
|
||||
1つの壊れた依存が全ノードを道連れにしないよう、個別にtry/exceptで読み込む:
|
||||
```python
|
||||
NODE_CLASS_MAPPINGS = {}
|
||||
for name, (mod_path, cls_name) in _NODE_MODULES.items():
|
||||
try:
|
||||
mod = importlib.import_module(mod_path, package=__name__)
|
||||
NODE_CLASS_MAPPINGS[name] = getattr(mod, cls_name)
|
||||
except Exception as e:
|
||||
print(f"[WARNING] Failed to load '{name}': {e}")
|
||||
```
|
||||
|
||||
### Hidden Inputs (UNIQUE_ID, PROMPT, EXTRA_PNGINFO)
|
||||
```python
|
||||
"hidden": {
|
||||
"unique_id": "UNIQUE_ID", # キャッシュの名前空間キーに使用
|
||||
"prompt": "PROMPT",
|
||||
"extra_pnginfo": "EXTRA_PNGINFO", # PNG出力にメタデータ埋め込み
|
||||
}
|
||||
```
|
||||
`UNIQUE_ID`を使わずモジュールレベルキャッシュを共有すると、同一ノードの複数インスタンスが干渉する。
|
||||
|
||||
### Lazy Inputs & 条件付き実行
|
||||
不要な上流実行を防ぐ:
|
||||
```python
|
||||
# INPUT_TYPESで宣言
|
||||
"optional": {"heavy_data": ("IMAGE", {"lazy": True})}
|
||||
|
||||
# 必要な入力だけリクエスト
|
||||
def check_lazy_status(self, **kwargs):
|
||||
needed = []
|
||||
if self.needs_heavy_data:
|
||||
needed.append("heavy_data")
|
||||
return needed # 空リスト = 上流実行をスキップ
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 開発時の注意事項
|
||||
|
||||
### Python変更後は必ずComfyUIを再起動
|
||||
ComfyUIは起動時に `custom_nodes/` を一度だけインポートする。
|
||||
Pythonファイルの変更はComfyUIプロセスの完全再起動まで反映されない。
|
||||
|
||||
### __pycache__ のクリア
|
||||
ディレクトリ間のコピーやブランチ切り替え後、古いバイトコードが残ることがある。
|
||||
動作がおかしい場合は `__pycache__/` を削除してから再起動する。
|
||||
|
||||
### 依存パッケージのインストール先
|
||||
Windows Portable版のComfyUIは `python_embeded/` 内の組み込みPythonを使用する。
|
||||
システムのPythonにインストールしても認識されない。
|
||||
```
|
||||
python_embeded/python.exe -m pip install package_name
|
||||
```
|
||||
torch関連パッケージはCUDA index URLを指定:
|
||||
```
|
||||
python_embeded/python.exe -m pip install torchaudio --index-url https://download.pytorch.org/whl/cu130
|
||||
```
|
||||
インストール後は必ず `torch.cuda.is_available()` で確認する。
|
||||
|
||||
### デプロイ
|
||||
ソースリポジトリと `custom_nodes/` のランタイムディレクトリは分離する。
|
||||
`custom_nodes/` 内で直接編集せず、同期スクリプトでパッケージ全体をデプロイする。
|
||||
部分的な同期は原因不明のエラーを引き起こす。
|
||||
デプロイ後はハッシュ比較でファイル同一性を検証する。
|
||||
|
||||
### prestartup_script.py
|
||||
環境変数の設定は `__init__.py` では遅い。`prestartup_script.py` はノードインポート前に実行される唯一の場所:
|
||||
```python
|
||||
# custom_nodes/ComfyUI-Workflow-Studio/prestartup_script.py
|
||||
import os
|
||||
os.environ["HF_HOME"] = "D:\\hf_cache"
|
||||
```
|
||||
|
||||
### 依存パッケージの競合防止
|
||||
- 依存はゆるくピン留め: `transformers>=4.40,<6.0` (厳密な `==` は避ける)
|
||||
- torchは `requirements.txt` にピン留めしない（ComfyUI本体が管理）
|
||||
- バージョン依存のインポートは `try/except` でフォールバック
|
||||
|
||||
### テスト戦略 (ComfyUI不要のテスト)
|
||||
1. `ast.parse()` で構文チェック (0.1秒)
|
||||
2. ビジネスロジックを `execute()` から分離し pytest でテスト (1-2秒)
|
||||
3. ComfyUI統合テストは最終確認のみ (30-60秒)
|
||||
|
||||
### ファイルパスの扱い
|
||||
出力・一時ファイルは `folder_paths.get_output_directory()` / `folder_paths.get_temp_directory()` を使用。
|
||||
相対パスはComfyUIの起動方法によって解決先が変わる。
|
||||
|
||||
### Windows固有の注意
|
||||
- PowerShellのデフォルトエンコーディングはUTF-8を壊す。ファイル書き込みはPython経由で行う
|
||||
- Windows MAX_PATH (260文字) 制限: 浅いパス (`C:\ComfyUI`) にインストールするか、LongPathsEnabled レジストリを有効化
|
||||
- HuggingFaceのシンボリックリンクは開発者モードなしだと無言でファイルが複製される (`HF_HOME`を短いパスに設定)
|
||||
|
||||
### バウンドキャッシュ
|
||||
モジュールレベルのキャッシュは `OrderedDict` + 最大サイズ制限で実装する。
|
||||
無制限キャッシュは長時間セッションでメモリを食い潰す。
|
||||
|
||||
---
|
||||
|
||||
## サイレント障害の診断
|
||||
|
||||
| 症状 | 原因 | 対処 |
|
||||
|------|------|------|
|
||||
| 編集後も動作が変わらない | 古いコード | ComfyUI再起動 + `__pycache__/` 削除 |
|
||||
| 変更したのにノードが実行されない | キャッシュ | `IS_CHANGED` で `float("NaN")` を返す |
|
||||
| ワークフロー読込で値がおかしい | UIマッピングずれ | ウィジェット位置が保存JSONと一致するか確認 |
|
||||
| ノードが赤い "missing" 表示 | タイプ名不一致 | `NODE_CLASS_MAPPINGS` のキーと大文字小文字を確認 |
|
||||
| 接続線が消える | リンクID不整合 | links[], outputs[].links, inputs[].link の3箇所を検証 |
|
||||
| 重複ノード動作 | `last_node_id` が低すぎる | 最大ノードID + 1 に設定 |
|
||||
| CUDAが使えなくなった | CPU版wheelのインストール | `torch.cuda.is_available()` 確認、CUDA index URLで再インストール |
|
||||
| ヘッドレスモードで失敗 | UI前提のコード | `{"ui": {...}, "result": (...)}` で分離 |
|
||||
|
||||
---
|
||||
|
||||
## コミット前チェックリスト
|
||||
1. 全ファイルを `custom_nodes/` に同期（部分同期しない）
|
||||
2. 両方の `__pycache__/` をクリア
|
||||
3. 全 .py ファイルのハッシュ比較で同一性を確認
|
||||
4. `ast.parse()` で全 .py ファイルの構文チェック
|
||||
5. `INPUT_TYPES` 変更時は `widgets_values` も同時更新
|
||||
6. 削除した依存への参照が残っていないか grep で確認
|
||||
7. ComfyUI完全再起動 → ワークフロー読み込み → エンドツーエンド実行確認
|
||||
@@ -1,5 +1,729 @@
|
||||
# DEVLOG - ComfyUI-Workflow-Studio
|
||||
|
||||
## 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改善・保存ダイアログ・バグ修正
|
||||
|
||||
### 概要
|
||||
- サイドパネルのサブタブを2段構成に変更、全ワークフロー/全ノード表示タブを追加
|
||||
- キャンバススナップショット保存時にファイル名編集ダイアログを表示
|
||||
- API/App形式バッジをワークフロー一覧に表示
|
||||
- グループ内の削除済みワークフロー（Not found）を自動クリーンアップ
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `web/comfyui/node_sets_menu.js` — サイドパネルサブタブ2段化
|
||||
- **Workflows サブタブ:**
|
||||
- 1段目: Workflows（全WF一覧）/ ★ Favorites / 📁 Groups
|
||||
- 2段目: ◦ Model Type
|
||||
- **Nodes サブタブ:**
|
||||
- 1段目: Nodes（全ノード一覧）/ ✳ Favorites / 📁 Groups
|
||||
- 2段目: ☰ Sets
|
||||
- **State 変更:** `wfSubTab2`, `activeTab2` を追加（2段目タブの排他制御用）
|
||||
- **新レンダリング関数:**
|
||||
- `renderWfAll()` — 全ワークフロー一覧表示
|
||||
- `renderWfFavorites()` — お気に入りワークフロー一覧（タブとして復活）
|
||||
- `renderAllNodes()` — `LiteGraph.registered_node_types` から全ノード一覧表示
|
||||
- **API/App形式バッジ:** `createDraggableWfItem()` でAPI形式（赤）・App形式（オレンジ）のバッジをファイル名前に表示
|
||||
- **グループ自動クリーンアップ:** `loadWfData()` でワークフロー一覧取得時に、存在しないファイルをグループから自動除去し localStorage を更新
|
||||
- **Not found 表示削除:** `renderWfGroups()` から削除済みワークフローの灰色表示コードを除去
|
||||
- **CSS 追加:**
|
||||
- `.wfm-nlp-subtabs-row2` — 2段目サブタブ行
|
||||
- `.wfm-nlp-fmt-badge`, `.wfm-nlp-fmt-api`, `.wfm-nlp-fmt-app` — 形式バッジスタイル
|
||||
|
||||
#### `web/comfyui/top_menu_extension.js` — 保存ダイアログ追加
|
||||
- **`showSaveDialog(defaultName)`** — モーダルダイアログでファイル名を編集可能に
|
||||
- タイムスタンプ形式のデフォルト名がプレースホルダーとして全選択状態で表示
|
||||
- Enter/Saveボタンで確定、Escape/Cancel/オーバーレイクリックでキャンセル
|
||||
- `.json` 拡張子は自動付与
|
||||
- **`saveCanvasToWorkflowStudio()`** — 自動保存からダイアログ経由の保存に変更
|
||||
|
||||
#### `py/services/workflow_analyzer.py` — ワークフロー形式検出
|
||||
- `analyze_workflow()` の返却値に `format` フィールドを追加
|
||||
- `"app"`: `definitions`（サブグラフ）キー存在 or `extra.linearMode === true`、フォールバックで `.app.json` ファイル名
|
||||
- `"ui"`: `nodes` 配列 + `links` 存在（App特徴なし）
|
||||
- `"api"`: 全トップレベル値に `class_type` 存在
|
||||
- `"unknown"`: 判定不能
|
||||
|
||||
#### `static/js/comfyui-workflow.js` — フロントエンド形式検出も構造ベースに変更
|
||||
- `detectFormat()` をファイル名依存から `definitions` / `extra.linearMode` による構造判定に変更
|
||||
|
||||
#### `static/js/workflow-tab.js` — グループクリーンアップ
|
||||
- `loadWorkflows()` でワークフロー取得後にグループの不要エントリを自動削除
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-24: v0.1.8 WF & Node Library サイドパネル拡張
|
||||
|
||||
### 概要
|
||||
- ComfyUI キャンバス右側の「Node Library」サイドパネルを「WF & Node Library」に拡張
|
||||
- ワークフローをサイドパネルからキャンバスにドラッグ＆ドロップで読み込み可能に
|
||||
- ヘルプタブに Nodes Tab / WF & Node Library の機能一覧を追加
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `web/comfyui/node_sets_menu.js` — サイドパネル全面改修
|
||||
- **パネル名変更:** "Node Library" → "WF & Node Library"
|
||||
- **2階層タブ構造:** トップレベル（Workflows / Nodes）+ サブタブ
|
||||
- Workflows サブタブ: Favorites（お気に入り）、Model Type（モデル種別）、Groups（グループ）
|
||||
- Nodes サブタブ: 既存の Favorites / Sets / Groups をそのまま維持
|
||||
- **State 拡張:** `topTab`, `wfSubTab`, `wfList`, `wfFavorites`, `wfModelTypes`, `wfGroups`, `wfLoaded` を追加
|
||||
- **API 追加:**
|
||||
- `fetchWorkflows()` — `GET /api/wfm/workflows`（既存エンドポイント流用）
|
||||
- `fetchWorkflowRaw(filename)` — `GET /api/wfm/workflows/raw`（既存エンドポイント流用）
|
||||
- `loadWfData()` — ワークフロー一覧取得 + favorites/modelTypes/groups 抽出
|
||||
- **ワークフロー読み込み:**
|
||||
- `loadWorkflowOnCanvas(filename)` — raw JSON 取得 → `app.loadGraphData(data)` でキャンバスに読み込み
|
||||
- 新 MIME タイプ `application/x-wfm-workflow` によるドラッグ＆ドロップ
|
||||
- ダブルクリックでもワークフロー読み込み可能
|
||||
- **ドロップハンドラー拡張:** `installCanvasDropHandler()` で `application/x-wfm-workflow` を追加受付
|
||||
- **レンダリング関数追加:**
|
||||
- `createDraggableWfItem(wf)` — ワークフロー名 + モデルタイプバッジ表示
|
||||
- `renderWfFavorites()` — お気に入りワークフロー一覧
|
||||
- `renderWfModelType()` — モデルタイプ別折りたたみセクション（初期: 折りたたみ状態）
|
||||
- `renderWfGroups()` — localStorage グループ別折りたたみセクション（初期: 折りたたみ状態）
|
||||
- `matchesWfSearch()` — filename, tags, memo, summary に対する検索フィルタ
|
||||
- **折りたたみ初期状態:** Model Type / Groups（WF・Node 両方）を初期状態で折りたたみ表示に変更
|
||||
- **CSS 追加:**
|
||||
- `.wfm-nlp-subtabs` — サブタブ行（背景色で視覚区別）
|
||||
- `.wfm-nlp-top-tab` — トップタブ（大きめフォント 12px, font-weight 600）
|
||||
- `.wfm-nlp-sub-tab` — サブタブ（小さめフォント 10px）
|
||||
- `.wfm-nlp-item-label` に `text-overflow: ellipsis` 追加（長いファイル名対応）
|
||||
- **tooltip 更新:** `NODE_SETS_TOOLTIP` → `"WF & Node Library – Browse & drag workflows/nodes onto canvas"`
|
||||
|
||||
#### `web/comfyui/top_menu_extension.js` — 変更なし
|
||||
- `NODE_SETS_TOOLTIP` を import しているため、tooltip 変更が自動反映
|
||||
|
||||
#### ヘルプタブ更新
|
||||
- **`templates/index.html`:**
|
||||
- Nodes Tab カード追加（6項目: ノードブラウザ、表示モード、お気に入り/タグ、グループ、サイドパネル、ノードセット）
|
||||
- WF & Node Library カード追加（7項目: ボタン起動、WFタブ、Nodesタブ、WFドラッグ、ノードドラッグ、ダブルクリック、検索）
|
||||
- About 説明文にノード管理を追記
|
||||
- **`static/js/i18n.js`:**
|
||||
- EN/JA/ZH に `helpNodes1`〜`helpNodes6`（6キー × 3言語）追加
|
||||
- EN/JA/ZH に `helpSidepanel1`〜`helpSidepanel7` + `helpSidepanelTitle`（8キー × 3言語）追加
|
||||
- 各言語の `helpAboutDesc` にノード管理の記述を追記
|
||||
- **`static/js/app.js`:**
|
||||
- `helpIdMap` に Nodes（6エントリ）+ Sidepanel（8エントリ）のマッピング追加
|
||||
|
||||
#### README.md 更新
|
||||
- バージョンバッジ: `0.1.7` → `0.1.8`
|
||||
- Screenshots セクション: Nodes Tab + WF & Node Library の行を追加（3行→4行、4枚→6枚）
|
||||
- ComfyUI Integration 画像をツールバー3ボタンにフォーカスした画像に差し替え
|
||||
- Features セクション: 新セクション「WF & Node Library (ComfyUI Side Panel) (v0.1.8)」追加
|
||||
- Changelog: v0.1.8 エントリ追加、v0.1.7 のサイドパネル記載を元に戻し
|
||||
- Project Structure: `node_sets_menu.js` の説明を更新
|
||||
|
||||
#### スクリーンショット追加
|
||||
- `docs/screenshot_nodes.png` — Nodes タブ（カードビュー + サイドパネル）
|
||||
- `docs/screenshot_wf_node_library.png` — ComfyUI 上の WF & Node Library サイドパネル
|
||||
- `docs/screenshot_comfyui_topbar.png` — ツールバー3ボタンにフォーカスした画像に差し替え
|
||||
|
||||
### バックエンド変更
|
||||
- なし（既存の `/api/wfm/workflows` と `/api/wfm/workflows/raw` を流用）
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-23: v0.1.7 Nodes タブ追加
|
||||
|
||||
### 概要
|
||||
- ComfyUI にインストールされた全ノードをブラウジング・整理・管理する「Nodes」タブを追加
|
||||
- ノードセット機能：複数ノード＋接続情報をセットとして保存し、再利用可能に
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### 新規ファイル
|
||||
- **`py/services/nodes_service.py`** — ノードメタデータ（お気に入り、タグ、グループ）とノードセットの CRUD サービス
|
||||
- **`py/routes/nodes_routes.py`** — 9つの API エンドポイント（metadata, groups, node-sets の GET/POST/update/delete/export）
|
||||
- **`static/js/nodes-tab.js`** — Nodes タブのメインロジック（Node Browser + Node Sets サブビュー）
|
||||
- **`web/comfyui/node_sets_menu.js`** — ComfyUI キャンバス内サイドパネル（Favorites/Sets/Groups タブ、ドラッグ&ドロップ配置）
|
||||
|
||||
#### 既存ファイル修正
|
||||
- **`py/wfm.py`** — `nodes_routes.setup_routes(app)` 追加
|
||||
- **`py/config.py`** — `NODE_METADATA_FILE`, `NODE_SETS_FILE` 定数追加
|
||||
- **`static/js/app.js`** — Nodes タブ登録、`initNodesTab()` 呼び出し
|
||||
- **`static/js/i18n.js`** — EN/JA/ZH に Nodes タブ関連 ~35 キー追加
|
||||
- **`static/js/comfyui-client.js`** — `fetchAllObjectInfo()` メソッド追加
|
||||
- **`static/css/main.css`** — ノードタブ固有スタイル（カード、テーブル、バッジ、ページネーション等）
|
||||
- **`templates/index.html`** — Nodes タブの HTML 構造追加
|
||||
- **`web/comfyui/top_menu_extension.js`** — Node Library ボタン＋右クリック "Save as Node Set" コンテキストメニュー追加
|
||||
|
||||
### 機能詳細
|
||||
|
||||
#### Node Browser（Sub-view 1）
|
||||
- ComfyUI `/object_info` API から全ノード取得（遅延読み込み）
|
||||
- Card / Table の2ビュー切り替え
|
||||
- フィルタ: カテゴリ、パッケージ、タグ、グループ、お気に入り
|
||||
- 全文検索: name, display_name, description, search_aliases, tags
|
||||
- パッケージ名カラーバッジ（ハッシュベース色生成）
|
||||
- サイドパネル: ノード詳細（I/O仕様テーブル、タグ編集、グループ管理）
|
||||
- 1ページ50ノード表示（ページネーション）
|
||||
|
||||
#### Node Sets（Sub-view 2）
|
||||
- ComfyUI キャンバスで選択したノード＋接続をセットとして保存
|
||||
- 右クリックコンテキストメニュー "Save as Node Set" から保存
|
||||
- セット一覧表示（名前、説明、ノード数、タグ）
|
||||
- 作成・編集・削除
|
||||
- ComfyUI 互換 JSON としてクリップボードにコピー
|
||||
|
||||
#### ComfyUI トップバー統合
|
||||
- 3ボタン: Workflow Studio / Snapshot / Node Library
|
||||
- Node Library ボタンでサイドパネル開閉
|
||||
|
||||
### バグ修正
|
||||
- `node_sets_menu.js` で `const saveSelectedAsNodeSet` が二重定義されていた ESM SyntaxError を修正（Vite preload wrapper により完全にサイレントだった）
|
||||
- デバッグ用 `console.log` 削除
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-23: v0.1.6 パストラバーサル脆弱性修正
|
||||
|
||||
### 概要
|
||||
- ComfyUI-Manager PR #2706 のレビューで指摘されたセキュリティ脆弱性を修正
|
||||
- `workflow_service.py` で任意のファイルパスへのアクセスが可能だった問題を解消
|
||||
|
||||
### 背景
|
||||
- ltdrdata（ComfyUI-Manager メンテナー）から `import_files` メソッド内のパス構築が安全でないとの指摘
|
||||
- `original_name` に `../../etc/passwd` のようなパストラバーサル文字列を送ることで、`workflows_dir` 外のファイルを読み書きできる状態だった
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### `py/services/workflow_service.py`
|
||||
- **`_validate_filename()` 強化** — `"."`, `".."`, null バイト (`\x00`) のチェックを追加
|
||||
- **`_safe_path()` メソッド新規追加** — ファイル名バリデーション + `resolve()` でパスを正規化し、`workflows_dir` 配下にあることを検証。違反時は `ValueError` を送出
|
||||
- **全公開メソッドに `_safe_path()` 適用:**
|
||||
- `import_files` — ループ冒頭で `_validate_filename` チェック追加、パス構築を `_safe_path` に変更
|
||||
- `get_raw` — `_safe_path` に変更
|
||||
- `rename` — old/new 両パスを `_safe_path` に変更
|
||||
- `delete` — `_safe_path` に変更
|
||||
- `analyze` — `_safe_path` に変更
|
||||
- `change_thumbnail` — `_safe_path` に変更
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-22: v0.1.5 テーマシステム追加
|
||||
|
||||
### 概要
|
||||
- 13種類のビルトインテーマを設定タブから切り替え可能に
|
||||
- テーマごとにカラー・フォント・角丸・影・特殊効果を変更
|
||||
- 選択テーマはlocalStorageに保存、ページ読み込み時にフラッシュなく復元
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### テーマ定義（CSS）
|
||||
- `static/css/main.css` — 12テーマの`[data-theme="xxx"]`変数定義を末尾に追加
|
||||
- Pop & Vibrant / Light Minimalist / Cyberpunk / Glassmorphism / Neumorphism / Retro 8-bit / Pastel Dream / Brutalism / Earthy / Material UI / Monotone + Accent / Corporate Trust
|
||||
- テーマ固有の特殊効果CSS:
|
||||
- Cyberpunk: ネオン発光ボーダー（`box-shadow`）、JSON構文ハイライト色変更
|
||||
- Glassmorphism: `backdrop-filter: blur(12px)` + メッシュグラデーション背景
|
||||
- Neumorphism: ダブルシャドウ（凸凹表現）、insetシャドウボタン
|
||||
- Retro-pixel / Brutalism: 太い黒ボーダー（`border: 3px solid #000`）
|
||||
- `.wfm-theme-grid` / `.wfm-theme-card` / `.wfm-theme-swatch` — テーマ選択UIスタイル
|
||||
|
||||
#### テーマ選択UI（JavaScript）
|
||||
- `static/js/settings-tab.js`:
|
||||
- `THEMES` 配列: テーマID・i18nキー・プレビュー用4色スウォッチを定義
|
||||
- `applyTheme(themeId)` — `<html>`の`data-theme`属性を設定/解除
|
||||
- `getSavedTheme()` — localStorageから保存テーマを取得
|
||||
- 設定タブにカラースウォッチ付きグリッドUIを生成（言語設定の直下）
|
||||
- クリックで即座にテーマ適用 + localStorage保存 + activeクラス更新
|
||||
- `static/js/app.js`:
|
||||
- `applyTheme` / `getSavedTheme` をインポート
|
||||
- `DOMContentLoaded`の前にテーマ復元を実行（テーマフラッシュ防止）
|
||||
|
||||
#### 多言語対応
|
||||
- `static/js/i18n.js` — 3言語（EN/JA/ZH）に `themeLabel` + 13テーマ名の翻訳キー追加
|
||||
|
||||
#### その他
|
||||
- `templates/index.html` — ヘルプページのGitHubリンクURL修正
|
||||
- `README.md` — v0.1.5更新、テーマ機能記載、git clone URL修正
|
||||
|
||||
### スクリーンショット
|
||||
| Workflow Tab (Pastel Dream) | Settings Tab (Theme) |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-22: v0.1.4 App形式対応・プリセットコピー・分析バグ修正
|
||||
|
||||
### 概要
|
||||
- ComfyUI App形式（`.app.json`）ワークフローの識別・表示対応
|
||||
- プリセットタブにポジティブ/ネガティブプロンプトのクリップボードコピーボタン追加
|
||||
- ワークフロー分析のクラッシュバグ修正
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### App形式ワークフロー対応
|
||||
- **背景:** ComfyUIの最新アップデートでAppモード（ノードを簡略化したWebアプリ風UI）が追加され、`.app.json`拡張子で保存される
|
||||
- **対応:**
|
||||
- `static/js/comfyui-workflow.js` — `detectFormat()`にファイル名ベースのApp形式判定を追加
|
||||
- `static/js/workflow-tab.js` — サイドパネルJSONタブのフォーマットバッジに「App形式」表示を追加
|
||||
- `static/js/generate-tab.js` — App形式ワークフローの生成UI読み込みをブロックし、「ComfyUIで開く」への誘導メッセージを表示
|
||||
- `static/css/main.css` — `.wfm-format-badge--app` スタイル追加（オレンジ色）
|
||||
- `static/js/i18n.js` — `appFormat` / `appFormatNotSupported` 翻訳キー追加（EN/JA/ZH）
|
||||
|
||||
#### プリセット クリップボードコピーボタン
|
||||
- **課題:** プリセットのプロンプトをComfyUI本体で使う際に手動コピーが必要だった
|
||||
- **対応:**
|
||||
- `templates/index.html` — プリセット保存ボタン行に「PP コピー」「NP コピー」ボタンを追加（flex:2/2/1比率）
|
||||
- `static/js/prompt-tab.js` — クリップボードコピー処理（`navigator.clipboard.writeText`）追加
|
||||
- `static/js/app.js` — コピーボタンのi18n適用
|
||||
- `static/js/i18n.js` — `copyPositivePrompt` / `copyNegativePrompt` / `copiedToClipboard` / `noTextToCopy` 翻訳キー追加
|
||||
|
||||
#### ワークフロー分析バグ修正
|
||||
- **問題:** UI形式ワークフローの`widgets_values[0]`が整数（例: EmptyLatentImageの`768`）の場合、`.lower()`で`AttributeError`が発生し、例外キャッチにより全分析結果がゼロになる
|
||||
- **修正:** `py/services/workflow_analyzer.py` — `_model_name_from_ui_node()`に`isinstance(val, str)`型チェックを追加
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-21: v0.1.3 ヘルプ＆サポートタブ追加
|
||||
|
||||
### 概要
|
||||
- ヘルプ＆サポートタブを新規追加（機能一覧 + サポートリンク）
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### ヘルプ＆サポートタブ
|
||||
- **課題:** プラグインの機能概要を確認する場所がなく、サポートへの導線もなかった
|
||||
- **対応:** 新しいメインタブ「Help」を追加し、機能一覧とサポートセクションを設置
|
||||
|
||||
##### 機能一覧セクション
|
||||
- 各タブ（Workflow / GenerateUI / Prompt / Settings）の主要機能をカード形式で表示
|
||||
- Tipsセクション（ドラッグ＆ドロップ、お気に入り、デフォルトワークフロー）
|
||||
|
||||
##### サポートセクション
|
||||
- GitHubリンク（バグ報告・機能リクエスト・コントリビュート）
|
||||
- Ko-fiリンク（開発支援）
|
||||
- SVGアイコン付きのリンクカード
|
||||
|
||||
#### 変更ファイル
|
||||
- `templates/index.html` — Helpタブボタン追加、ヘルプ＆サポートセクションのHTML構造
|
||||
- `static/js/i18n.js` — 3言語（EN/JA/ZH）のヘルプ関連翻訳キー30項目追加
|
||||
- `static/js/app.js` — タブマップにhelp追加、`applyI18nToHtml()`にヘルプタブのi18n適用ロジック追加
|
||||
- `static/css/main.css` — `.wfm-help-*` スタイル追加（コンテナ、セクション、カード、リンク）
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-19: v0.1.2 リリース
|
||||
|
||||
### 概要
|
||||
- キャンバススナップショット機能追加（ComfyUIトップバーにカメラボタン）
|
||||
- ワークフローサイドパネル・モーダルにサムネイルプレビュー追加
|
||||
|
||||
### 変更内容
|
||||
|
||||
#### Canvas Snapshot（キャンバススナップショット）
|
||||
- **課題:** ワークフローのキャンバス画像を保存するにはComfyUIのエクスポート機能を使い手動でファイル管理する必要があった
|
||||
- **対応:** ComfyUIトップバーにカメラボタンを追加し、ワンクリックでキャンバスをPNGキャプチャ→ワークフローデータフォルダに自動保存
|
||||
- `web/comfyui/top_menu_extension.js`:
|
||||
- カメラアイコンボタン追加（actionBarButtons API / legacy ComfyButtonGroup 両対応）
|
||||
- `captureCanvasSnapshot()` — LiteGraphキャンバスの状態保存→ノード範囲計算→レンダリング→Blob化→復元
|
||||
- PNG tEXtチャンク埋め込み (`n2b`, `joinArrayBuffer`, `crc32`, `embedWorkflowInPng`) — ComfyUIのドラッグ＆ドロップインポート互換
|
||||
- タイムスタンプファイル名 `wf_YYYYMMDDHHmmss.json` 形式で自動生成
|
||||
- `py/routes/workflow_routes.py`:
|
||||
- `POST /api/wfm/workflows/save-canvas-image` ルート追加
|
||||
- `import_files` を利用してPNGからワークフローJSON抽出＋サムネイル保存＋自動インポート
|
||||
- 参考実装: [pythongosssss/ComfyUI-Custom-Scripts](https://github.com/pythongosssss/ComfyUI-Custom-Scripts) の workflowImage.js
|
||||
|
||||
#### サムネイルプレビュー
|
||||
- `templates/index.html` — サイドパネルにThumbnailタブ追加（デフォルトアクティブ）
|
||||
- `static/js/workflow-tab.js`:
|
||||
- `sidePanelThumbUpdate()` — 選択ワークフローのサムネイル・メタ情報表示
|
||||
- モーダル上部にサムネイルセクション追加
|
||||
- サムネイル変更時にサイドパネル・モーダル両方を同期更新
|
||||
- `static/css/main.css` — `.wfm-side-thumb-*` / `.wfm-modal-thumb-*` スタイル追加
|
||||
|
||||
### スクリーンショット
|
||||
| Workflow Tab | ComfyUI Top Bar |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
### リリース
|
||||
- GitHub Release v0.1.2: https://github.com/ketle-man/ComfyUI-Workflow-Studio/releases/tag/v0.1.2
|
||||
|
||||
---
|
||||
|
||||
## 2026-03-19: v0.1.1 リリース
|
||||
|
||||
### 概要
|
||||
@@ -104,7 +828,7 @@ ComfyUI-Workflow-Studio/
|
||||
│ ├── config.py # パス設定
|
||||
│ ├── routes/ # APIルート
|
||||
│ └── services/ # ビジネスロジック
|
||||
├── templates/index.html # SPA (Workflow/GenerateUI/Prompt/Settings)
|
||||
├── templates/index.html # SPA (Workflow/GenerateUI/Prompt/Settings/Help)
|
||||
├── static/ # CSS/JS
|
||||
├── web/comfyui/ # ComfyUIメニュー拡張
|
||||
└── data/ # ワークフロー・メタデータ・設定
|
||||
|
||||
@@ -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,17 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
| ComfyUI Integration |
|
||||
|:---:|
|
||||
|  |
|
||||
| Nodes Tab | Models Tab |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
| Help & Support Tab | |
|
||||
|:---:|:---:|
|
||||
|  | |
|
||||
|
||||
| Workflow Studio Library (ComfyUI) | ComfyUI Integration |
|
||||
|:---:|:---:|
|
||||
|  |  |
|
||||
|
||||
---
|
||||
|
||||
@@ -28,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)
|
||||
@@ -42,29 +50,77 @@ 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.2.4)
|
||||
- **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
|
||||
- **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
|
||||
|
||||
### Prompt Tab
|
||||
- **Split-panel layout** — AI assistant and presets displayed side-by-side for simultaneous use
|
||||
- **3-column layout** — AI Assistant, Presets editor, and Preset Manager displayed side-by-side
|
||||
- **AI chat assistant** — powered by [Ollama](https://ollama.com/), generate and refine prompts interactively
|
||||
- **Image attachment** — attach reference images for vision-capable models
|
||||
- **Translation** — JA/EN/ZH translation buttons for multilingual prompt creation
|
||||
- **Prompt presets** — save/load reusable prompt templates (positive & negative)
|
||||
- **Apply to GenerateUI** — send prompts directly to the generation interface
|
||||
- **Prompt presets** — save/load reusable prompt templates (positive & negative) with category support
|
||||
- **Preset Manager** — browse all presets, favorites, and group-based filtering with search
|
||||
- **Group management** — create groups, assign/remove presets, delete groups from the Presets panel
|
||||
- **Clipboard copy** — copy positive/negative prompts individually (PP Copy / NP Copy)
|
||||
- **GenUI Set** — apply preset prompts directly to the GenerateUI interface
|
||||
|
||||
### Settings Tab
|
||||
- **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
|
||||
- **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
|
||||
- **Language** — English / Japanese / Chinese
|
||||
|
||||
### 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
|
||||
- **Package badges** — color-coded badges generated from package names
|
||||
- **Node detail panel** — view I/O specifications, edit tags, manage groups
|
||||
- **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
|
||||
|
||||
### 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
|
||||
- **Table view memo** — memo column displayed in table view for quick reference
|
||||
- **Preview images** — auto-detect `{model_stem}.preview.png` next to model files
|
||||
|
||||
### Workflow Studio Library (ComfyUI Side Panel) (v0.2.3)
|
||||
- **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 sub-tabs), ★ star shown for favorites in All view
|
||||
- **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
|
||||
- **Drag & drop prompts** — drag a preset onto the canvas to create a WFS_PromptText node with positive/negative prompts
|
||||
- **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
|
||||
|
||||
### Help & Support Tab (v0.1.3)
|
||||
- **Feature list** — overview of all features organized by tab
|
||||
- **Tips** — quick tips for drag & drop import, favorites, and default workflow
|
||||
- **Support links** — GitHub repository and Ko-fi donation page
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
@@ -77,7 +133,7 @@ Search for **Workflow Studio** in ComfyUI Manager and install.
|
||||
|
||||
```bash
|
||||
cd ComfyUI/custom_nodes
|
||||
git clone https://github.com/your-username/ComfyUI-Workflow-Studio.git
|
||||
git clone https://github.com/ketle-man/ComfyUI-Workflow-Studio.git
|
||||
```
|
||||
|
||||
Restart ComfyUI after installation.
|
||||
@@ -135,6 +191,77 @@ Click the **camera icon** (next to the W button) in ComfyUI's top bar to capture
|
||||
|
||||
## Changelog
|
||||
|
||||
### 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
|
||||
- **Preset Manager** — 3-column layout in Prompt tab: AI Assistant | Presets editor | Preset Manager (All / Favorites / Groups)
|
||||
- **Group management** — create groups, assign/remove presets, delete groups from the Presets panel
|
||||
- **GenUI Set** — renamed "Apply" button to clarify its purpose (applies presets to GenerateUI)
|
||||
- **Sidebar P/N copy buttons** — copy positive or negative prompts individually from sidebar items
|
||||
- **Panel renamed** — "WF & Node Library" renamed to "Workflow Studio Library"
|
||||
- **Backend API for presets** — presets migrated from localStorage to server-side API with one-time migration
|
||||
- **Help tab updated** — Prompt Tab and Workflow Studio Library sections reflect new features
|
||||
|
||||
### v0.1.9
|
||||
- **Side panel 2-row sub-tabs** — Workflows: row 1 (Workflows / Favorites / Groups), row 2 (Model Type); Nodes: row 1 (Nodes / Favorites / Groups), row 2 (Sets)
|
||||
- **Save dialog** — canvas snapshot now shows a filename edit dialog instead of auto-naming
|
||||
- **API/App format badge** — workflow items in side panel show red (API) or orange (APP) badge
|
||||
- **Group auto-cleanup** — deleted workflows are automatically removed from groups on refresh
|
||||
|
||||
### v0.1.8
|
||||
- **WF & Node Library side panel** — renamed from "Node Library", added two top-level tabs (Workflows / Nodes) accessible from ComfyUI top bar
|
||||
- **Workflows tab** — browse favorite workflows, filter by model type, filter by group with collapsible sections
|
||||
- **Workflow drag & drop** — drag workflows from the side panel onto the canvas to load them instantly
|
||||
- **Help tab update** — added Nodes Tab and WF & Node Library sections to the feature list
|
||||
|
||||
### v0.1.7
|
||||
- **Nodes tab** — browse, search, and filter all installed ComfyUI nodes with Card/Table views, pagination (50 nodes/page), package color badges, and node detail side panel with I/O specs
|
||||
- **Node Sets** — save selected nodes + connections from ComfyUI canvas as reusable sets via right-click context menu
|
||||
- **Node Library side panel** — accessible from ComfyUI top bar with Favorites, Sets, and Groups tabs, drag & drop placement
|
||||
- **3 top bar buttons** — Workflow Studio, Canvas Snapshot, and Node Library buttons in ComfyUI's action bar
|
||||
|
||||
### v0.1.6
|
||||
- **Security fix** — path traversal vulnerability in `workflow_service.py` (reported via ComfyUI-Manager PR review)
|
||||
|
||||
### v0.1.5
|
||||
- **Theme system** — 13 built-in themes selectable from Settings tab with instant preview (Deep Ocean Dark, Pop & Vibrant, Light Minimalist, Cyberpunk, Glassmorphism, Neumorphism, Retro 8-bit, Pastel Dream, Brutalism, Earthy, Material UI, Monotone + Accent, Corporate Trust)
|
||||
- Theme preference persisted in localStorage and restored on page load (no flash)
|
||||
- Special CSS effects per theme: neon glow (Cyberpunk), backdrop blur (Glassmorphism), dual shadow (Neumorphism), pixel borders (Retro/Brutalism)
|
||||
|
||||
### v0.1.4
|
||||
- **App format support** — detect `.app.json` workflows (ComfyUI App mode), show "App Format" badge, block loading in GenerateUI with guidance message
|
||||
- **Preset clipboard copy** — added PP Copy / NP Copy buttons to copy positive/negative prompts to clipboard
|
||||
- **Analysis bugfix** — fixed workflow analysis crash when `widgets_values` contains non-string values (e.g. integers)
|
||||
|
||||
### v0.1.3
|
||||
- Added **Help & Support tab** — feature list, tips, and support links (GitHub, Ko-fi)
|
||||
- Multi-language support (EN/JA/ZH) for all help content
|
||||
|
||||
### v0.1.2
|
||||
- Added **Canvas Snapshot** button to ComfyUI top bar — capture workflow canvas as PNG thumbnail with embedded workflow metadata
|
||||
- Added **Thumbnail tab** to the workflow side panel for quick visual preview
|
||||
@@ -154,18 +281,27 @@ ComfyUI-Workflow-Studio/
|
||||
├── py/
|
||||
│ ├── wfm.py # Main class & route registration
|
||||
│ ├── config.py # Path configuration
|
||||
│ ├── nodes/
|
||||
│ │ └── prompt_text.py # WFS_PromptText custom node (positive/negative prompt)
|
||||
│ ├── 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
|
||||
│ │ └── eagle_routes.py # Eagle integration API
|
||||
│ └── 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
|
||||
│ └── index.html # SPA template (Workflow/GenerateUI/Prompt/Settings/Nodes/Models/Help)
|
||||
├── static/
|
||||
│ ├── favicon.svg # Browser tab icon (W+S Wave)
|
||||
│ ├── css/main.css # Styles
|
||||
@@ -176,13 +312,16 @@ ComfyUI-Workflow-Studio/
|
||||
│ ├── prompt-tab.js # AI assistant & presets
|
||||
│ ├── 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
|
||||
│ └── i18n.js # Internationalization
|
||||
├── web/comfyui/
|
||||
│ └── top_menu_extension.js # ComfyUI menu bar integration
|
||||
└── data/ # Metadata & settings storage
|
||||
│ ├── top_menu_extension.js # ComfyUI menu bar integration
|
||||
│ └── node_sets_menu.js # Workflow Studio Library side panel
|
||||
└── data/ # Metadata & settings storage (incl. prompts.json, model_metadata.json, civitai_cache.json)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
+16
-1
@@ -1,9 +1,24 @@
|
||||
from .py.wfm import WorkflowStudio
|
||||
|
||||
NODE_CLASS_MAPPINGS = {}
|
||||
NODE_DISPLAY_NAME_MAPPINGS = {}
|
||||
WEB_DIRECTORY = "./web/comfyui"
|
||||
|
||||
# Register routes on import
|
||||
WorkflowStudio.add_routes()
|
||||
|
||||
__all__ = ["NODE_CLASS_MAPPINGS", "WEB_DIRECTORY"]
|
||||
# Register custom nodes (isolated loading)
|
||||
_NODE_MODULES = {
|
||||
"WFS_PromptText": (".py.nodes.prompt_text", "WFS_PromptText"),
|
||||
}
|
||||
|
||||
for _name, (_mod_path, _cls_name) in _NODE_MODULES.items():
|
||||
try:
|
||||
import importlib
|
||||
_mod = importlib.import_module(_mod_path, package=__name__)
|
||||
NODE_CLASS_MAPPINGS[_name] = getattr(_mod, _cls_name)
|
||||
NODE_DISPLAY_NAME_MAPPINGS[_name] = "Prompt Text (WFS)"
|
||||
except Exception as _e:
|
||||
print(f"[WARNING] Workflow Studio: Failed to load '{_name}': {_e}")
|
||||
|
||||
__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 975 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 148 KiB |
+461
@@ -0,0 +1,461 @@
|
||||
/* ============================================
|
||||
Workflow Studio - Theme Definitions
|
||||
============================================
|
||||
|
||||
各テーマは :root の CSS変数を上書きすることで適用される。
|
||||
body の font-family も各テーマで変更する。
|
||||
|
||||
現在のデフォルトテーマ (Deep Ocean Dark) の変数:
|
||||
--wfm-bg: #1a1a2e
|
||||
--wfm-bg-secondary: #16213e
|
||||
--wfm-bg-tertiary: #0f3460
|
||||
--wfm-surface: #1e2a4a
|
||||
--wfm-surface-hover: #253358
|
||||
--wfm-border: #2a3a5c
|
||||
--wfm-text: #e0e0e0
|
||||
--wfm-text-secondary: #a0a0b0
|
||||
--wfm-primary: #4a9eff
|
||||
--wfm-primary-hover: #3a8eef
|
||||
--wfm-danger: #ff4757
|
||||
--wfm-success: #2ed573
|
||||
--wfm-warning: #ffa502
|
||||
--wfm-accent: #7c5cfc
|
||||
--wfm-radius: 8px
|
||||
--wfm-radius-sm: 4px
|
||||
--wfm-shadow: 0 2px 8px rgba(0,0,0,0.3)
|
||||
============================================ */
|
||||
|
||||
|
||||
/* ============================================
|
||||
1. Pop & Vibrant (ポップ調)
|
||||
明るく楽しく、クリエイティビティを刺激するデザイン
|
||||
============================================ */
|
||||
|
||||
[data-theme="pop-vibrant"] {
|
||||
--wfm-bg: #F8F9FA;
|
||||
--wfm-bg-secondary: #FFFFFF;
|
||||
--wfm-bg-tertiary: #EEF0F2;
|
||||
--wfm-surface: #FFFFFF;
|
||||
--wfm-surface-hover: #F0F4FF;
|
||||
--wfm-border: #E0E0E0;
|
||||
--wfm-text: #2D2D2D;
|
||||
--wfm-text-secondary: #666666;
|
||||
--wfm-primary: #FF6B6B;
|
||||
--wfm-primary-hover: #FF5252;
|
||||
--wfm-danger: #FF4757;
|
||||
--wfm-success: #2ED573;
|
||||
--wfm-warning: #FFA502;
|
||||
--wfm-accent: #00D2D3;
|
||||
--wfm-radius: 16px;
|
||||
--wfm-radius-sm: 8px;
|
||||
--wfm-shadow: 0 4px 16px rgba(255, 107, 107, 0.15);
|
||||
/* 追加テーマ変数 */
|
||||
--wfm-tag-sdxl: #FF6B6B;
|
||||
--wfm-tag-sd15: #00D2D3;
|
||||
--wfm-tag-flux: #FFC048;
|
||||
--wfm-tag-default: #A55EEA;
|
||||
}
|
||||
|
||||
[data-theme="pop-vibrant"] body {
|
||||
font-family: 'Zen Maru Gothic', 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
2. Light Minimalist (クリーン＆ライト)
|
||||
現代的でノイズのない、コンテンツ集中型デザイン
|
||||
============================================ */
|
||||
|
||||
[data-theme="light-minimalist"] {
|
||||
--wfm-bg: #FFFFFF;
|
||||
--wfm-bg-secondary: #F5F5F5;
|
||||
--wfm-bg-tertiary: #FAFAFA;
|
||||
--wfm-surface: #FFFFFF;
|
||||
--wfm-surface-hover: #F0F4FF;
|
||||
--wfm-border: #EEEEEE;
|
||||
--wfm-text: #333333;
|
||||
--wfm-text-secondary: #888888;
|
||||
--wfm-primary: #4A9EFF;
|
||||
--wfm-primary-hover: #3A8EEF;
|
||||
--wfm-danger: #EF4444;
|
||||
--wfm-success: #22C55E;
|
||||
--wfm-warning: #F59E0B;
|
||||
--wfm-accent: #6366F1;
|
||||
--wfm-radius: 8px;
|
||||
--wfm-radius-sm: 4px;
|
||||
--wfm-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
[data-theme="light-minimalist"] body {
|
||||
font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
3. Cyberpunk / Hacker (サイバーパンク)
|
||||
SF映画のようなハッカー感・ギーク感
|
||||
============================================ */
|
||||
|
||||
[data-theme="cyberpunk"] {
|
||||
--wfm-bg: #000000;
|
||||
--wfm-bg-secondary: #0A0A0A;
|
||||
--wfm-bg-tertiary: #111111;
|
||||
--wfm-surface: #0D0D0D;
|
||||
--wfm-surface-hover: #1A1A1A;
|
||||
--wfm-border: #00FF4130;
|
||||
--wfm-text: #00FF41;
|
||||
--wfm-text-secondary: #00CC33;
|
||||
--wfm-primary: #FF00FF;
|
||||
--wfm-primary-hover: #CC00CC;
|
||||
--wfm-danger: #FF073A;
|
||||
--wfm-success: #00FF41;
|
||||
--wfm-warning: #FFD300;
|
||||
--wfm-accent: #00FFFF;
|
||||
--wfm-radius: 0px;
|
||||
--wfm-radius-sm: 0px;
|
||||
--wfm-shadow: 0 0 12px rgba(0, 255, 65, 0.3);
|
||||
/* ネオン発光ボーダー用 */
|
||||
--wfm-glow-primary: 0 0 8px rgba(255, 0, 255, 0.6);
|
||||
--wfm-glow-accent: 0 0 8px rgba(0, 255, 255, 0.6);
|
||||
/* JSONパネル用 */
|
||||
--wfm-code-text: #00FF41;
|
||||
--wfm-code-bg: #000000;
|
||||
}
|
||||
|
||||
[data-theme="cyberpunk"] body {
|
||||
font-family: 'Space Mono', 'Fira Code', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
4. Glassmorphism (グラスモーフィズム)
|
||||
半透明の洗練された未来的デザイン
|
||||
============================================ */
|
||||
|
||||
[data-theme="glassmorphism"] {
|
||||
--wfm-bg: #1A0533;
|
||||
--wfm-bg-secondary: rgba(255, 255, 255, 0.08);
|
||||
--wfm-bg-tertiary: rgba(255, 255, 255, 0.04);
|
||||
--wfm-surface: rgba(255, 255, 255, 0.10);
|
||||
--wfm-surface-hover: rgba(255, 255, 255, 0.16);
|
||||
--wfm-border: rgba(255, 255, 255, 0.18);
|
||||
--wfm-text: #F0F0F0;
|
||||
--wfm-text-secondary: #C0C0D0;
|
||||
--wfm-primary: #7B68EE;
|
||||
--wfm-primary-hover: #6A5ACD;
|
||||
--wfm-danger: #FF6B6B;
|
||||
--wfm-success: #69DB7C;
|
||||
--wfm-warning: #FFD43B;
|
||||
--wfm-accent: #DA77F2;
|
||||
--wfm-radius: 12px;
|
||||
--wfm-radius-sm: 8px;
|
||||
--wfm-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
/* Glassmorphism用追加変数 */
|
||||
--wfm-glass-blur: blur(12px);
|
||||
--wfm-glass-bg: rgba(255, 255, 255, 0.10);
|
||||
/* 背景メッシュグラデーション */
|
||||
--wfm-mesh-gradient: linear-gradient(135deg, #1A0533 0%, #0D1B3E 25%, #1A0533 50%, #2D1054 75%, #0D1B3E 100%);
|
||||
}
|
||||
|
||||
[data-theme="glassmorphism"] body {
|
||||
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
5. Neumorphism (ニューモーフィズム)
|
||||
柔らかく立体的な凸凹表現
|
||||
============================================ */
|
||||
|
||||
[data-theme="neumorphism"] {
|
||||
--wfm-bg: #D1D9E6;
|
||||
--wfm-bg-secondary: #D1D9E6;
|
||||
--wfm-bg-tertiary: #C8D0DD;
|
||||
--wfm-surface: #D1D9E6;
|
||||
--wfm-surface-hover: #D8E0ED;
|
||||
--wfm-border: transparent;
|
||||
--wfm-text: #4A5568;
|
||||
--wfm-text-secondary: #718096;
|
||||
--wfm-primary: #6C8EBF;
|
||||
--wfm-primary-hover: #5A7CAD;
|
||||
--wfm-danger: #E57373;
|
||||
--wfm-success: #81C784;
|
||||
--wfm-warning: #FFB74D;
|
||||
--wfm-accent: #7986CB;
|
||||
--wfm-radius: 12px;
|
||||
--wfm-radius-sm: 8px;
|
||||
/* ニューモーフィズム用の光と影 */
|
||||
--wfm-shadow: 6px 6px 12px #B8C0CC, -6px -6px 12px #EAF2FF;
|
||||
--wfm-shadow-inset: inset 4px 4px 8px #B8C0CC, inset -4px -4px 8px #EAF2FF;
|
||||
}
|
||||
|
||||
[data-theme="neumorphism"] body {
|
||||
font-family: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
6. Retro 8-bit / Pixel (レトロゲーム調)
|
||||
遊び心満載のファミコン風デザイン
|
||||
============================================ */
|
||||
|
||||
[data-theme="retro-pixel"] {
|
||||
--wfm-bg: #2C2C34;
|
||||
--wfm-bg-secondary: #3A3A44;
|
||||
--wfm-bg-tertiary: #24242C;
|
||||
--wfm-surface: #3A3A44;
|
||||
--wfm-surface-hover: #4A4A54;
|
||||
--wfm-border: #000000;
|
||||
--wfm-text: #F0F0E0;
|
||||
--wfm-text-secondary: #B0B0A0;
|
||||
--wfm-primary: #5B8FD4;
|
||||
--wfm-primary-hover: #4A7EC3;
|
||||
--wfm-danger: #D94848;
|
||||
--wfm-success: #48A848;
|
||||
--wfm-warning: #D4A017;
|
||||
--wfm-accent: #D45BD4;
|
||||
--wfm-radius: 0px;
|
||||
--wfm-radius-sm: 0px;
|
||||
/* 太い黒ボーダー + ベタ塗り影 */
|
||||
--wfm-shadow: 4px 4px 0px #000000;
|
||||
--wfm-border-width: 3px;
|
||||
}
|
||||
|
||||
[data-theme="retro-pixel"] body {
|
||||
font-family: 'DotGothic16', 'Press Start 2P', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
7. Pastel Dream (パステルドリーム)
|
||||
柔らかく優しい、目に優しいデザイン
|
||||
============================================ */
|
||||
|
||||
[data-theme="pastel-dream"] {
|
||||
--wfm-bg: #F0E6FF;
|
||||
--wfm-bg-secondary: #E8F5E9;
|
||||
--wfm-bg-tertiary: #F3E5F5;
|
||||
--wfm-surface: #FFFFFF;
|
||||
--wfm-surface-hover: #FFF3E0;
|
||||
--wfm-border: #E1BEE7;
|
||||
--wfm-text: #5D4E75;
|
||||
--wfm-text-secondary: #8E7CA8;
|
||||
--wfm-primary: #B39DDB;
|
||||
--wfm-primary-hover: #9575CD;
|
||||
--wfm-danger: #F48FB1;
|
||||
--wfm-success: #A5D6A7;
|
||||
--wfm-warning: #FFE082;
|
||||
--wfm-accent: #80DEEA;
|
||||
--wfm-radius: 20px;
|
||||
--wfm-radius-sm: 12px;
|
||||
--wfm-shadow: 0 4px 16px rgba(179, 157, 219, 0.2);
|
||||
/* パステルタグカラー */
|
||||
--wfm-tag-sdxl: #FFAB91;
|
||||
--wfm-tag-sd15: #A5D6A7;
|
||||
--wfm-tag-flux: #90CAF9;
|
||||
--wfm-tag-default: #CE93D8;
|
||||
}
|
||||
|
||||
[data-theme="pastel-dream"] body {
|
||||
font-family: 'M PLUS Rounded 1c', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
8. Brutalism / High Contrast (ブルータリズム)
|
||||
大胆で前衛的なハイコントラストデザイン
|
||||
============================================ */
|
||||
|
||||
[data-theme="brutalism"] {
|
||||
--wfm-bg: #FFFFFF;
|
||||
--wfm-bg-secondary: #FFFFFF;
|
||||
--wfm-bg-tertiary: #F0F0F0;
|
||||
--wfm-surface: #FFFFFF;
|
||||
--wfm-surface-hover: #CCFF00;
|
||||
--wfm-border: #000000;
|
||||
--wfm-text: #000000;
|
||||
--wfm-text-secondary: #333333;
|
||||
--wfm-primary: #CCFF00;
|
||||
--wfm-primary-hover: #BBEE00;
|
||||
--wfm-danger: #FF0000;
|
||||
--wfm-success: #00FF00;
|
||||
--wfm-warning: #FFFF00;
|
||||
--wfm-accent: #CCFF00;
|
||||
--wfm-radius: 0px;
|
||||
--wfm-radius-sm: 0px;
|
||||
/* 極太ボーダー + ベタ影 */
|
||||
--wfm-shadow: 6px 6px 0px #000000;
|
||||
--wfm-border-width: 3px;
|
||||
}
|
||||
|
||||
[data-theme="brutalism"] body {
|
||||
font-family: 'Arial Black', 'Impact', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
9. Earthy / Nature (アースカラー)
|
||||
落ち着いたオーガニックなナチュラルデザイン
|
||||
============================================ */
|
||||
|
||||
[data-theme="earthy"] {
|
||||
--wfm-bg: #F5E6D3;
|
||||
--wfm-bg-secondary: #EDE0D4;
|
||||
--wfm-bg-tertiary: #E8D5C0;
|
||||
--wfm-surface: #FFF8F0;
|
||||
--wfm-surface-hover: #F5EDE4;
|
||||
--wfm-border: #D4B896;
|
||||
--wfm-text: #3E2723;
|
||||
--wfm-text-secondary: #6D4C41;
|
||||
--wfm-primary: #8D6E63;
|
||||
--wfm-primary-hover: #795548;
|
||||
--wfm-danger: #C0392B;
|
||||
--wfm-success: #6B8E23;
|
||||
--wfm-warning: #D4A017;
|
||||
--wfm-accent: #BF6830;
|
||||
--wfm-radius: 8px;
|
||||
--wfm-radius-sm: 4px;
|
||||
--wfm-shadow: 0 2px 8px rgba(62, 39, 35, 0.12);
|
||||
/* アースカラータグ */
|
||||
--wfm-tag-sdxl: #6B8E23;
|
||||
--wfm-tag-sd15: #BF6830;
|
||||
--wfm-tag-flux: #D4A017;
|
||||
--wfm-tag-default: #8D6E63;
|
||||
}
|
||||
|
||||
[data-theme="earthy"] body {
|
||||
font-family: 'Noto Sans JP', 'Noto Serif JP', Georgia, serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
10. Material UI (マテリアルデザイン風)
|
||||
Googleライクな直感的デザイン
|
||||
============================================ */
|
||||
|
||||
[data-theme="material"] {
|
||||
--wfm-bg: #FAFAFA;
|
||||
--wfm-bg-secondary: #FFFFFF;
|
||||
--wfm-bg-tertiary: #F5F5F5;
|
||||
--wfm-surface: #FFFFFF;
|
||||
--wfm-surface-hover: #E8EAF6;
|
||||
--wfm-border: #E0E0E0;
|
||||
--wfm-text: #212121;
|
||||
--wfm-text-secondary: #757575;
|
||||
--wfm-primary: #3F51B5;
|
||||
--wfm-primary-hover: #303F9F;
|
||||
--wfm-danger: #F44336;
|
||||
--wfm-success: #4CAF50;
|
||||
--wfm-warning: #FF9800;
|
||||
--wfm-accent: #FF4081;
|
||||
--wfm-radius: 4px;
|
||||
--wfm-radius-sm: 2px;
|
||||
/* マテリアルシャドウ (Elevation 2) */
|
||||
--wfm-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
[data-theme="material"] body {
|
||||
font-family: 'Roboto', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
11. Monotone + One Accent (モノトーン＋ワンアクセント)
|
||||
スタイリッシュなプロツール感
|
||||
============================================ */
|
||||
|
||||
[data-theme="monotone-accent"] {
|
||||
--wfm-bg: #F7F7F7;
|
||||
--wfm-bg-secondary: #FFFFFF;
|
||||
--wfm-bg-tertiary: #EBEBEB;
|
||||
--wfm-surface: #FFFFFF;
|
||||
--wfm-surface-hover: #F0F0F0;
|
||||
--wfm-border: #D0D0D0;
|
||||
--wfm-text: #1A1A1A;
|
||||
--wfm-text-secondary: #808080;
|
||||
--wfm-primary: #FF6B35;
|
||||
--wfm-primary-hover: #E85D2A;
|
||||
--wfm-danger: #CC0000;
|
||||
--wfm-success: #555555;
|
||||
--wfm-warning: #888888;
|
||||
--wfm-accent: #FF6B35;
|
||||
--wfm-radius: 6px;
|
||||
--wfm-radius-sm: 3px;
|
||||
--wfm-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="monotone-accent"] body {
|
||||
font-family: 'Helvetica Neue', 'Arial', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
12. Corporate Trust (コーポレート・トラスト)
|
||||
信頼感と堅牢性のあるBtoB向けデザイン
|
||||
============================================ */
|
||||
|
||||
[data-theme="corporate"] {
|
||||
--wfm-bg: #F0F4F8;
|
||||
--wfm-bg-secondary: #FFFFFF;
|
||||
--wfm-bg-tertiary: #E2E8F0;
|
||||
--wfm-surface: #FFFFFF;
|
||||
--wfm-surface-hover: #EBF0F6;
|
||||
--wfm-border: #CBD5E1;
|
||||
--wfm-text: #1E293B;
|
||||
--wfm-text-secondary: #64748B;
|
||||
--wfm-primary: #2563EB;
|
||||
--wfm-primary-hover: #1D4ED8;
|
||||
--wfm-danger: #DC2626;
|
||||
--wfm-success: #16A34A;
|
||||
--wfm-warning: #D97706;
|
||||
--wfm-accent: #7C3AED;
|
||||
--wfm-radius: 4px;
|
||||
--wfm-radius-sm: 2px;
|
||||
--wfm-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
[data-theme="corporate"] body {
|
||||
font-family: 'Noto Sans JP', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
テーマ適用方法のメモ
|
||||
============================================
|
||||
|
||||
HTMLの <html> タグに data-theme 属性を設定して切り替える:
|
||||
|
||||
<html data-theme="cyberpunk">
|
||||
<html data-theme="pastel-dream">
|
||||
<html data-theme="brutalism">
|
||||
...
|
||||
|
||||
JavaScriptでの切り替え例:
|
||||
|
||||
document.documentElement.setAttribute('data-theme', 'cyberpunk');
|
||||
|
||||
テーマをリセットしてデフォルトに戻す場合:
|
||||
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
|
||||
============================================
|
||||
|
||||
テーマ一覧:
|
||||
|
||||
| ID | 名前 | 系統 |
|
||||
|-------------------|-------------------------------|----------|
|
||||
| (default) | Deep Ocean Dark | ダーク |
|
||||
| pop-vibrant | Pop & Vibrant | ライト |
|
||||
| light-minimalist | Light Minimalist | ライト |
|
||||
| cyberpunk | Cyberpunk / Hacker | ダーク |
|
||||
| glassmorphism | Glassmorphism | ダーク |
|
||||
| neumorphism | Neumorphism | ライト |
|
||||
| retro-pixel | Retro 8-bit / Pixel | ダーク |
|
||||
| pastel-dream | Pastel Dream | ライト |
|
||||
| brutalism | Brutalism / High Contrast | ライト |
|
||||
| earthy | Earthy / Nature | ライト |
|
||||
| material | Material UI | ライト |
|
||||
| monotone-accent | Monotone + One Accent | ライト |
|
||||
| corporate | Corporate Trust | ライト |
|
||||
|
||||
============================================ */
|
||||
@@ -55,3 +55,7 @@ DATA_DIR.mkdir(parents=True, exist_ok=True)
|
||||
# Metadata file path
|
||||
METADATA_FILE = DATA_DIR / "metadata.json"
|
||||
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,31 @@
|
||||
"""WFS_PromptText – Prompt preset node with positive/negative STRING outputs."""
|
||||
|
||||
|
||||
class WFS_PromptText:
|
||||
"""Outputs positive and negative prompt strings."""
|
||||
|
||||
@classmethod
|
||||
def INPUT_TYPES(cls):
|
||||
return {
|
||||
"required": {
|
||||
"positive": ("STRING", {
|
||||
"multiline": True,
|
||||
"default": "",
|
||||
"placeholder": "Positive prompt...",
|
||||
}),
|
||||
"negative": ("STRING", {
|
||||
"multiline": True,
|
||||
"default": "",
|
||||
"placeholder": "Negative prompt...",
|
||||
}),
|
||||
},
|
||||
}
|
||||
|
||||
RETURN_TYPES = ("STRING", "STRING")
|
||||
RETURN_NAMES = ("positive", "negative")
|
||||
FUNCTION = "execute"
|
||||
CATEGORY = "Workflow Studio"
|
||||
OUTPUT_NODE = False
|
||||
|
||||
def execute(self, positive, negative):
|
||||
return (positive, negative)
|
||||
@@ -0,0 +1,388 @@
|
||||
"""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)
|
||||
|
||||
|
||||
# ── 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"""
|
||||
try:
|
||||
result = await asyncio.to_thread(_service.get_model_groups)
|
||||
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"""
|
||||
try:
|
||||
groups = await request.json()
|
||||
result = await asyncio.to_thread(_service.save_model_groups, groups)
|
||||
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)
|
||||
@@ -0,0 +1,150 @@
|
||||
"""Node metadata and node sets API routes."""
|
||||
|
||||
import asyncio
|
||||
import logging
|
||||
|
||||
from aiohttp import web
|
||||
|
||||
from ..services.nodes_service import NodesService
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
_service = NodesService()
|
||||
|
||||
|
||||
def setup_routes(app: web.Application):
|
||||
"""Register all node management API routes."""
|
||||
# Node metadata
|
||||
app.router.add_get("/api/wfm/nodes/metadata", handle_get_metadata)
|
||||
app.router.add_post("/api/wfm/nodes/metadata", handle_save_metadata)
|
||||
# Node groups
|
||||
app.router.add_get("/api/wfm/nodes/groups", handle_get_groups)
|
||||
app.router.add_post("/api/wfm/nodes/groups", handle_save_groups)
|
||||
# Node sets
|
||||
app.router.add_get("/api/wfm/node-sets", handle_list_sets)
|
||||
app.router.add_post("/api/wfm/node-sets", handle_create_set)
|
||||
app.router.add_post("/api/wfm/node-sets/update", handle_update_set)
|
||||
app.router.add_post("/api/wfm/node-sets/delete", handle_delete_set)
|
||||
app.router.add_get("/api/wfm/node-sets/export", handle_export_set)
|
||||
|
||||
|
||||
# ── Node Metadata ──────────────────────────────────────────
|
||||
|
||||
|
||||
async def handle_get_metadata(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/nodes/metadata"""
|
||||
try:
|
||||
result = await asyncio.to_thread(_service.get_all_metadata)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
logger.error("Error loading node 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/nodes/metadata"""
|
||||
try:
|
||||
body = await request.json()
|
||||
node_name = body.get("nodeName", "")
|
||||
if not node_name:
|
||||
return web.json_response({"error": "nodeName is required"}, status=400)
|
||||
updates = {k: v for k, v in body.items() if k != "nodeName"}
|
||||
result = await asyncio.to_thread(_service.update_node_metadata, node_name, updates)
|
||||
return web.json_response({"status": "ok", "metadata": result})
|
||||
except Exception as e:
|
||||
logger.error("Error saving node metadata: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ── Node Groups ────────────────────────────────────────────
|
||||
|
||||
|
||||
async def handle_get_groups(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/nodes/groups"""
|
||||
try:
|
||||
result = await asyncio.to_thread(_service.get_node_groups)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
logger.error("Error loading node 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/nodes/groups"""
|
||||
try:
|
||||
body = await request.json()
|
||||
result = await asyncio.to_thread(_service.save_node_groups, body)
|
||||
return web.json_response({"status": "ok", "groups": result})
|
||||
except Exception as e:
|
||||
logger.error("Error saving node groups: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ── Node Sets ──────────────────────────────────────────────
|
||||
|
||||
|
||||
async def handle_list_sets(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/node-sets"""
|
||||
try:
|
||||
result = await asyncio.to_thread(_service.list_node_sets)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
logger.error("Error listing node sets: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_create_set(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/node-sets"""
|
||||
try:
|
||||
body = await request.json()
|
||||
result = await asyncio.to_thread(_service.create_node_set, body)
|
||||
return web.json_response({"status": "ok", "nodeSet": result})
|
||||
except Exception as e:
|
||||
logger.error("Error creating node set: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_update_set(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/node-sets/update"""
|
||||
try:
|
||||
body = await request.json()
|
||||
set_id = body.get("id", "")
|
||||
if not set_id:
|
||||
return web.json_response({"error": "id is required"}, status=400)
|
||||
updates = {k: v for k, v in body.items() if k != "id"}
|
||||
result = await asyncio.to_thread(_service.update_node_set, set_id, updates)
|
||||
if result is None:
|
||||
return web.json_response({"error": "node set not found"}, status=404)
|
||||
return web.json_response({"status": "ok", "nodeSet": result})
|
||||
except Exception as e:
|
||||
logger.error("Error updating node set: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_delete_set(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/node-sets/delete"""
|
||||
try:
|
||||
body = await request.json()
|
||||
set_id = body.get("id", "")
|
||||
if not set_id:
|
||||
return web.json_response({"error": "id is required"}, status=400)
|
||||
await asyncio.to_thread(_service.delete_node_set, set_id)
|
||||
return web.json_response({"status": "ok"})
|
||||
except Exception as e:
|
||||
logger.error("Error deleting node set: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
async def handle_export_set(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/node-sets/export?id=xxx"""
|
||||
try:
|
||||
set_id = request.query.get("id", "")
|
||||
if not set_id:
|
||||
return web.json_response({"error": "id is required"}, status=400)
|
||||
result = await asyncio.to_thread(_service.export_node_set_json, set_id)
|
||||
if result is None:
|
||||
return web.json_response({"error": "node set not found"}, status=404)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
logger.error("Error exporting node set: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
@@ -0,0 +1,84 @@
|
||||
"""Prompt presets API routes."""
|
||||
|
||||
import asyncio
|
||||
import logging
|
||||
|
||||
from aiohttp import web
|
||||
|
||||
from ..services.prompts_service import PromptsService
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
_service = PromptsService()
|
||||
|
||||
|
||||
def setup_routes(app: web.Application):
|
||||
"""Register all prompt management API routes."""
|
||||
app.router.add_get("/api/wfm/prompts", handle_list)
|
||||
app.router.add_post("/api/wfm/prompts", handle_create)
|
||||
app.router.add_post("/api/wfm/prompts/update", handle_update)
|
||||
app.router.add_post("/api/wfm/prompts/delete", handle_delete)
|
||||
|
||||
|
||||
# ── List ──────────────────────────────────────────────────
|
||||
|
||||
|
||||
async def handle_list(request: web.Request) -> web.Response:
|
||||
"""GET /api/wfm/prompts"""
|
||||
try:
|
||||
result = await asyncio.to_thread(_service.list_prompts)
|
||||
return web.json_response(result)
|
||||
except Exception as e:
|
||||
logger.error("Error listing prompts: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ── Create ────────────────────────────────────────────────
|
||||
|
||||
|
||||
async def handle_create(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/prompts"""
|
||||
try:
|
||||
body = await request.json()
|
||||
result = await asyncio.to_thread(_service.create_prompt, body)
|
||||
return web.json_response({"status": "ok", "prompt": result})
|
||||
except Exception as e:
|
||||
logger.error("Error creating prompt: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ── Update ────────────────────────────────────────────────
|
||||
|
||||
|
||||
async def handle_update(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/prompts/update"""
|
||||
try:
|
||||
body = await request.json()
|
||||
prompt_id = body.get("id", "")
|
||||
if not prompt_id:
|
||||
return web.json_response({"error": "id is required"}, status=400)
|
||||
updates = {k: v for k, v in body.items() if k != "id"}
|
||||
result = await asyncio.to_thread(_service.update_prompt, prompt_id, updates)
|
||||
if result is None:
|
||||
return web.json_response({"error": "prompt not found"}, status=404)
|
||||
return web.json_response({"status": "ok", "prompt": result})
|
||||
except Exception as e:
|
||||
logger.error("Error updating prompt: %s", e)
|
||||
return web.json_response({"error": str(e)}, status=500)
|
||||
|
||||
|
||||
# ── Delete ────────────────────────────────────────────────
|
||||
|
||||
|
||||
async def handle_delete(request: web.Request) -> web.Response:
|
||||
"""POST /api/wfm/prompts/delete"""
|
||||
try:
|
||||
body = await request.json()
|
||||
prompt_id = body.get("id", "")
|
||||
if not prompt_id:
|
||||
return web.json_response({"error": "id is required"}, status=400)
|
||||
await asyncio.to_thread(_service.delete_prompt, prompt_id)
|
||||
return web.json_response({"status": "ok"})
|
||||
except Exception as e:
|
||||
logger.error("Error deleting prompt: %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,150 @@
|
||||
"""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"]
|
||||
|
||||
# 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):
|
||||
data = self._load_metadata()
|
||||
return data.get("_groups", {})
|
||||
|
||||
def save_model_groups(self, groups):
|
||||
data = self._load_metadata()
|
||||
data["_groups"] = groups
|
||||
self._save_metadata(data)
|
||||
return groups
|
||||
|
||||
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
|
||||
@@ -0,0 +1,146 @@
|
||||
"""Node metadata and node sets management service."""
|
||||
|
||||
import json
|
||||
import uuid
|
||||
from datetime import datetime, timezone
|
||||
|
||||
from ..config import NODE_METADATA_FILE, NODE_SETS_FILE
|
||||
|
||||
|
||||
class NodesService:
|
||||
"""Manages user-defined node metadata (tags, favorites, groups) and node sets."""
|
||||
|
||||
def __init__(self):
|
||||
self.node_metadata_file = NODE_METADATA_FILE
|
||||
self.node_sets_file = NODE_SETS_FILE
|
||||
|
||||
def _now_iso(self):
|
||||
return datetime.now(timezone.utc).isoformat().replace("+00:00", "Z")
|
||||
|
||||
# ── Node Metadata ──────────────────────────────────────────
|
||||
|
||||
def _load_node_metadata(self):
|
||||
if self.node_metadata_file.exists():
|
||||
try:
|
||||
with open(self.node_metadata_file, "r", encoding="utf-8") as f:
|
||||
return json.load(f)
|
||||
except Exception:
|
||||
pass
|
||||
return {}
|
||||
|
||||
def _save_node_metadata(self, data):
|
||||
self.node_metadata_file.parent.mkdir(parents=True, exist_ok=True)
|
||||
with open(self.node_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_node_metadata()
|
||||
|
||||
def update_node_metadata(self, node_name, updates):
|
||||
data = self._load_node_metadata()
|
||||
if node_name not in data:
|
||||
data[node_name] = {"tags": [], "favorite": False}
|
||||
entry = data[node_name]
|
||||
if "tags" in updates:
|
||||
entry["tags"] = updates["tags"]
|
||||
if "favorite" in updates:
|
||||
entry["favorite"] = updates["favorite"]
|
||||
entry["updatedAt"] = self._now_iso()
|
||||
data[node_name] = entry
|
||||
self._save_node_metadata(data)
|
||||
return entry
|
||||
|
||||
# ── Node Groups ────────────────────────────────────────────
|
||||
|
||||
def get_node_groups(self):
|
||||
data = self._load_node_metadata()
|
||||
return data.get("_groups", {})
|
||||
|
||||
def save_node_groups(self, groups):
|
||||
data = self._load_node_metadata()
|
||||
data["_groups"] = groups
|
||||
self._save_node_metadata(data)
|
||||
return groups
|
||||
|
||||
# ── Node Sets ──────────────────────────────────────────────
|
||||
|
||||
def _load_node_sets(self):
|
||||
if self.node_sets_file.exists():
|
||||
try:
|
||||
with open(self.node_sets_file, "r", encoding="utf-8") as f:
|
||||
return json.load(f)
|
||||
except Exception:
|
||||
pass
|
||||
return []
|
||||
|
||||
def _save_node_sets(self, sets):
|
||||
self.node_sets_file.parent.mkdir(parents=True, exist_ok=True)
|
||||
with open(self.node_sets_file, "w", encoding="utf-8") as f:
|
||||
json.dump(sets, f, ensure_ascii=False, indent=2)
|
||||
|
||||
def list_node_sets(self):
|
||||
return self._load_node_sets()
|
||||
|
||||
def create_node_set(self, set_data):
|
||||
sets = self._load_node_sets()
|
||||
set_data["id"] = str(uuid.uuid4())
|
||||
set_data["created_at"] = self._now_iso()
|
||||
sets.append(set_data)
|
||||
self._save_node_sets(sets)
|
||||
return set_data
|
||||
|
||||
def update_node_set(self, set_id, updates):
|
||||
sets = self._load_node_sets()
|
||||
for s in sets:
|
||||
if s["id"] == set_id:
|
||||
for key in ("name", "description", "tags", "nodes", "links"):
|
||||
if key in updates:
|
||||
s[key] = updates[key]
|
||||
s["updated_at"] = self._now_iso()
|
||||
self._save_node_sets(sets)
|
||||
return s
|
||||
return None
|
||||
|
||||
def delete_node_set(self, set_id):
|
||||
sets = self._load_node_sets()
|
||||
sets = [s for s in sets if s["id"] != set_id]
|
||||
self._save_node_sets(sets)
|
||||
|
||||
def export_node_set_json(self, set_id):
|
||||
"""Export a node set as ComfyUI-compatible partial workflow JSON."""
|
||||
sets = self._load_node_sets()
|
||||
target = None
|
||||
for s in sets:
|
||||
if s["id"] == set_id:
|
||||
target = s
|
||||
break
|
||||
if target is None:
|
||||
return None
|
||||
|
||||
nodes = target.get("nodes", [])
|
||||
links = target.get("links", [])
|
||||
|
||||
# Build prompt-format dict
|
||||
prompt = {}
|
||||
base_id = 100
|
||||
for i, node in enumerate(nodes):
|
||||
node_id = str(base_id + i)
|
||||
inputs = {}
|
||||
# Apply links: set linked inputs as [source_node_id, slot]
|
||||
for link in links:
|
||||
if link.get("to_node") == i:
|
||||
input_name = link.get("to_input", "")
|
||||
from_id = str(base_id + link["from_node"])
|
||||
inputs[input_name] = [from_id, link.get("from_slot", 0)]
|
||||
prompt[node_id] = {
|
||||
"class_type": node["class_type"],
|
||||
"inputs": inputs,
|
||||
}
|
||||
if node.get("title"):
|
||||
prompt[node_id]["_meta"] = {"title": node["title"]}
|
||||
|
||||
return {
|
||||
"name": target.get("name", ""),
|
||||
"prompt": prompt,
|
||||
"node_count": len(nodes),
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
"""Prompt presets management service."""
|
||||
|
||||
import json
|
||||
import uuid
|
||||
from datetime import datetime, timezone
|
||||
|
||||
from ..config import PROMPTS_FILE
|
||||
|
||||
|
||||
class PromptsService:
|
||||
"""Manages prompt presets (CRUD, categories, favorites)."""
|
||||
|
||||
def __init__(self):
|
||||
self.prompts_file = PROMPTS_FILE
|
||||
|
||||
def _now_iso(self):
|
||||
return datetime.now(timezone.utc).isoformat().replace("+00:00", "Z")
|
||||
|
||||
# ── Persistence ─────────────────────────────────────────
|
||||
|
||||
def _load(self):
|
||||
if self.prompts_file.exists():
|
||||
try:
|
||||
with open(self.prompts_file, "r", encoding="utf-8") as f:
|
||||
return json.load(f)
|
||||
except Exception:
|
||||
pass
|
||||
return []
|
||||
|
||||
def _save(self, prompts):
|
||||
self.prompts_file.parent.mkdir(parents=True, exist_ok=True)
|
||||
with open(self.prompts_file, "w", encoding="utf-8") as f:
|
||||
json.dump(prompts, f, ensure_ascii=False, indent=2)
|
||||
|
||||
# ── List ────────────────────────────────────────────────
|
||||
|
||||
def list_prompts(self):
|
||||
return self._load()
|
||||
|
||||
# ── Create ──────────────────────────────────────────────
|
||||
|
||||
def create_prompt(self, data):
|
||||
prompts = self._load()
|
||||
prompt = {
|
||||
"id": str(uuid.uuid4()),
|
||||
"name": data.get("name", "Untitled"),
|
||||
"text": data.get("text", ""),
|
||||
"negText": data.get("negText", ""),
|
||||
"category": data.get("category", ""),
|
||||
"tags": data.get("tags", []),
|
||||
"favorite": data.get("favorite", False),
|
||||
"created_at": self._now_iso(),
|
||||
"updated_at": self._now_iso(),
|
||||
}
|
||||
prompts.append(prompt)
|
||||
self._save(prompts)
|
||||
return prompt
|
||||
|
||||
# ── Update ──────────────────────────────────────────────
|
||||
|
||||
def update_prompt(self, prompt_id, updates):
|
||||
prompts = self._load()
|
||||
for p in prompts:
|
||||
if p["id"] == prompt_id:
|
||||
for key in ("name", "text", "negText", "category", "tags", "favorite"):
|
||||
if key in updates:
|
||||
p[key] = updates[key]
|
||||
p["updated_at"] = self._now_iso()
|
||||
self._save(prompts)
|
||||
return p
|
||||
return None
|
||||
|
||||
# ── Delete ──────────────────────────────────────────────
|
||||
|
||||
def delete_prompt(self, prompt_id):
|
||||
prompts = self._load()
|
||||
prompts = [p for p in prompts if p["id"] != prompt_id]
|
||||
self._save(prompts)
|
||||
|
||||
# ── Categories (derived) ────────────────────────────────
|
||||
|
||||
def list_categories(self):
|
||||
prompts = self._load()
|
||||
cats = set()
|
||||
for p in prompts:
|
||||
c = p.get("category", "").strip()
|
||||
if c:
|
||||
cats.add(c)
|
||||
return sorted(cats)
|
||||
@@ -7,7 +7,8 @@ import re
|
||||
def _model_name_from_ui_node(node):
|
||||
"""Extract model filename from UI format node (lowercase)."""
|
||||
widgets = node.get("widgets_values", [])
|
||||
return (widgets[0] if widgets else "").lower()
|
||||
val = widgets[0] if widgets else ""
|
||||
return val.lower() if isinstance(val, str) else ""
|
||||
|
||||
|
||||
def _model_name_from_api_node(node):
|
||||
@@ -109,8 +110,30 @@ def analyze_workflow(workflow_data, filename=""):
|
||||
if ntype in ("SaveVideo", "VH_VideoCombine"):
|
||||
outputs["videos"] += 1
|
||||
|
||||
# Detect workflow format
|
||||
if raw_nodes is not None:
|
||||
# App format: UI-based structure with definitions (subgraphs) or linearMode
|
||||
extra = workflow_data.get("extra", {})
|
||||
if (
|
||||
"definitions" in workflow_data
|
||||
or extra.get("linearMode") is True
|
||||
):
|
||||
wf_format = "app"
|
||||
elif filename and filename.lower().endswith(".app.json"):
|
||||
wf_format = "app"
|
||||
else:
|
||||
wf_format = "ui"
|
||||
else:
|
||||
# Check if all top-level values have class_type (API format)
|
||||
has_class = any(
|
||||
isinstance(v, dict) and "class_type" in v
|
||||
for v in workflow_data.values()
|
||||
)
|
||||
wf_format = "api" if has_class else "unknown"
|
||||
|
||||
return {
|
||||
"modelTypes": sorted(model_types),
|
||||
"inputs": inputs,
|
||||
"outputs": outputs,
|
||||
"format": wf_format,
|
||||
}
|
||||
|
||||
@@ -42,8 +42,23 @@ class WorkflowService:
|
||||
"""Validate filename has no path traversal."""
|
||||
if not fname or "/" in fname or "\\" in fname:
|
||||
return False
|
||||
if fname in (".", "..") or "\x00" in fname:
|
||||
return False
|
||||
return True
|
||||
|
||||
def _safe_path(self, filename):
|
||||
"""Resolve path and ensure it stays within workflows_dir.
|
||||
|
||||
Raises ValueError if path traversal is detected.
|
||||
"""
|
||||
if not self._validate_filename(filename):
|
||||
raise ValueError(f"Invalid filename: {filename}")
|
||||
resolved = (self.workflows_dir / filename).resolve()
|
||||
workflows_resolved = self.workflows_dir.resolve()
|
||||
if not str(resolved).startswith(str(workflows_resolved) + os.sep) and resolved != workflows_resolved:
|
||||
raise ValueError(f"Path traversal detected: {filename}")
|
||||
return resolved
|
||||
|
||||
def _now_iso(self):
|
||||
return datetime.now(timezone.utc).isoformat().replace("+00:00", "Z")
|
||||
|
||||
@@ -69,6 +84,7 @@ class WorkflowService:
|
||||
"modelTypes": [],
|
||||
"inputs": {"prompts": 0, "images": 0, "videos": 0},
|
||||
"outputs": {"images": 0, "videos": 0},
|
||||
"format": "unknown",
|
||||
}
|
||||
|
||||
stat = fpath.stat()
|
||||
@@ -106,7 +122,7 @@ class WorkflowService:
|
||||
|
||||
def get_raw(self, filename):
|
||||
"""Get raw workflow JSON content."""
|
||||
fpath = self.workflows_dir / filename
|
||||
fpath = self._safe_path(filename)
|
||||
if not fpath.is_file():
|
||||
return None
|
||||
with open(fpath, "r", encoding="utf-8") as f:
|
||||
@@ -132,10 +148,16 @@ class WorkflowService:
|
||||
ext = os.path.splitext(original_name)[1].lower()
|
||||
base = os.path.splitext(original_name)[0]
|
||||
|
||||
if not self._validate_filename(original_name):
|
||||
results.append(
|
||||
{"name": original_name, "status": "error", "message": "Invalid filename"}
|
||||
)
|
||||
continue
|
||||
|
||||
if ext == ".json":
|
||||
try:
|
||||
wf_data = json.loads(file_data.decode("utf-8"))
|
||||
out_path = self.workflows_dir / original_name
|
||||
out_path = self._safe_path(original_name)
|
||||
with open(out_path, "w", encoding="utf-8") as f:
|
||||
json.dump(wf_data, f, ensure_ascii=False, indent=2)
|
||||
results.append({"name": original_name, "status": "success"})
|
||||
@@ -158,13 +180,13 @@ class WorkflowService:
|
||||
try:
|
||||
# Save PNG as thumbnail
|
||||
with open(
|
||||
self.workflows_dir / original_name, "wb"
|
||||
self._safe_path(original_name), "wb"
|
||||
) as f:
|
||||
f.write(file_data)
|
||||
# Save extracted workflow as JSON
|
||||
json_name = base + ".json"
|
||||
with open(
|
||||
self.workflows_dir / json_name, "w", encoding="utf-8"
|
||||
self._safe_path(json_name), "w", encoding="utf-8"
|
||||
) as f:
|
||||
json.dump(wf_data, f, ensure_ascii=False, indent=2)
|
||||
results.append({"name": json_name, "status": "success"})
|
||||
@@ -190,8 +212,8 @@ class WorkflowService:
|
||||
def rename(self, old_name, new_stem):
|
||||
"""Rename workflow and its associated thumbnail."""
|
||||
new_name = new_stem + ".json"
|
||||
old_json = self.workflows_dir / old_name
|
||||
new_json = self.workflows_dir / new_name
|
||||
old_json = self._safe_path(old_name)
|
||||
new_json = self._safe_path(new_name)
|
||||
|
||||
if not old_json.is_file():
|
||||
return {"error": "file not found"}, 404
|
||||
@@ -203,8 +225,8 @@ class WorkflowService:
|
||||
# Rename associated thumbnail
|
||||
old_stem = old_name[:-5] if old_name.endswith(".json") else old_name
|
||||
for ext in (".png", ".webp"):
|
||||
old_thumb = self.workflows_dir / (old_stem + ext)
|
||||
new_thumb = self.workflows_dir / (new_stem + ext)
|
||||
old_thumb = self._safe_path(old_stem + ext)
|
||||
new_thumb = self._safe_path(new_stem + ext)
|
||||
if old_thumb.is_file():
|
||||
os.rename(old_thumb, new_thumb)
|
||||
|
||||
@@ -218,13 +240,13 @@ class WorkflowService:
|
||||
|
||||
def delete(self, filename):
|
||||
"""Delete workflow JSON and associated thumbnail."""
|
||||
json_path = self.workflows_dir / filename
|
||||
json_path = self._safe_path(filename)
|
||||
if json_path.is_file():
|
||||
os.remove(json_path)
|
||||
|
||||
base = filename[:-5] if filename.endswith(".json") else filename
|
||||
for ext in (".png", ".webp"):
|
||||
thumb_path = self.workflows_dir / (base + ext)
|
||||
thumb_path = self._safe_path(base + ext)
|
||||
if thumb_path.is_file():
|
||||
os.remove(thumb_path)
|
||||
|
||||
@@ -235,7 +257,7 @@ class WorkflowService:
|
||||
|
||||
def analyze(self, filename):
|
||||
"""Re-analyze a workflow and save results to metadata."""
|
||||
fpath = self.workflows_dir / filename
|
||||
fpath = self._safe_path(filename)
|
||||
if not fpath.is_file():
|
||||
return None
|
||||
|
||||
@@ -280,6 +302,7 @@ class WorkflowService:
|
||||
|
||||
def change_thumbnail(self, filename, image_data, original_image_name):
|
||||
"""Change workflow thumbnail image."""
|
||||
self._safe_path(filename) # validate filename
|
||||
orig_name_lower = original_image_name.lower()
|
||||
if orig_name_lower.endswith(".webp"):
|
||||
new_ext = ".webp"
|
||||
@@ -292,15 +315,15 @@ class WorkflowService:
|
||||
|
||||
# Backup existing thumbnails
|
||||
for ext in (".png", ".webp", ".jpg", ".jpeg"):
|
||||
old_thumb = self.workflows_dir / (stem + ext)
|
||||
old_thumb = self._safe_path(stem + ext)
|
||||
if old_thumb.is_file():
|
||||
backup = self.workflows_dir / ("old_" + stem + ext)
|
||||
backup = self._safe_path("old_" + stem + ext)
|
||||
if backup.is_file():
|
||||
os.remove(backup)
|
||||
os.rename(old_thumb, backup)
|
||||
|
||||
# Save new thumbnail
|
||||
new_thumb_path = self.workflows_dir / (stem + new_ext)
|
||||
new_thumb_path = self._safe_path(stem + new_ext)
|
||||
with open(new_thumb_path, "wb") as f:
|
||||
f.write(image_data)
|
||||
|
||||
|
||||
@@ -61,11 +61,14 @@ class WorkflowStudio:
|
||||
app.router.add_get("/wfm", serve_index_page)
|
||||
|
||||
# API routes
|
||||
from .routes import workflow_routes, settings_routes, ollama_routes, eagle_routes
|
||||
from .routes import workflow_routes, settings_routes, ollama_routes, eagle_routes, nodes_routes, prompts_routes, models_routes
|
||||
|
||||
workflow_routes.setup_routes(app)
|
||||
settings_routes.setup_routes(app)
|
||||
ollama_routes.setup_routes(app)
|
||||
eagle_routes.setup_routes(app)
|
||||
nodes_routes.setup_routes(app)
|
||||
prompts_routes.setup_routes(app)
|
||||
models_routes.setup_routes(app)
|
||||
|
||||
logger.info("Workflow Studio: Routes registered successfully")
|
||||
|
||||
+1477
-16
File diff suppressed because it is too large
Load Diff
+114
-4
@@ -90,7 +90,7 @@ function initTabs() {
|
||||
|
||||
function applyI18nToHtml() {
|
||||
// Tab labels
|
||||
const tabMap = { workflow: "tabWorkflow", generate: "tabGenerate", prompt: "tabPrompt", settings: "tabSettings" };
|
||||
const tabMap = { workflow: "tabWorkflow", nodes: "tabNodes", models: "tabModels", generate: "tabGenerate", prompt: "tabPrompt", settings: "tabSettings", help: "tabHelp" };
|
||||
document.querySelectorAll(".wfm-tab").forEach((tab) => {
|
||||
const key = tabMap[tab.dataset.tab];
|
||||
if (key) tab.textContent = t(key);
|
||||
@@ -142,6 +142,52 @@ function applyI18nToHtml() {
|
||||
const copyBtn = document.getElementById("wfm-json-copy-btn");
|
||||
if (copyBtn) copyBtn.textContent = t("copy");
|
||||
|
||||
// Nodes tab
|
||||
const nodesSubBtns = document.querySelectorAll(".wfm-nodes-subview-btn");
|
||||
nodesSubBtns.forEach(btn => {
|
||||
if (btn.dataset.subview === "browser") btn.textContent = t("nodesAllNodes");
|
||||
if (btn.dataset.subview === "sets") btn.textContent = t("nodesNodeSets");
|
||||
});
|
||||
const nodesSearch = document.getElementById("wfm-nodes-search");
|
||||
if (nodesSearch) nodesSearch.placeholder = t("nodesSearchPlaceholder");
|
||||
const nodesRefreshBtn = document.getElementById("wfm-nodes-refresh-btn");
|
||||
if (nodesRefreshBtn) nodesRefreshBtn.textContent = t("nodesRefresh");
|
||||
const nodeSetCreateBtn = document.getElementById("wfm-node-set-create-btn");
|
||||
if (nodeSetCreateBtn) nodeSetCreateBtn.textContent = t("nodesCreateSet");
|
||||
const nodesSideTabBtns = document.querySelectorAll(".wfm-nodes-side-tab-btn");
|
||||
nodesSideTabBtns.forEach(btn => {
|
||||
if (btn.dataset.sideTab === "details") btn.textContent = t("nodesDetails");
|
||||
if (btn.dataset.sideTab === "io") btn.textContent = t("nodesIoSpec");
|
||||
if (btn.dataset.sideTab === "nodegroup") btn.textContent = t("nodesGroups");
|
||||
});
|
||||
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");
|
||||
});
|
||||
|
||||
// Prompt tab
|
||||
const assistantHeader = document.querySelector(".wfm-prompt-split-left .wfm-prompt-split-header");
|
||||
if (assistantHeader) assistantHeader.textContent = t("assistantSubtab");
|
||||
@@ -163,10 +209,12 @@ function applyI18nToHtml() {
|
||||
if (en2jaBtn) en2jaBtn.textContent = t("en2ja");
|
||||
const presetApplyBtn = document.getElementById("wfm-preset-apply-btn");
|
||||
if (presetApplyBtn) presetApplyBtn.textContent = t("applyPreset");
|
||||
const presetDeleteBtn = document.getElementById("wfm-preset-delete-btn");
|
||||
if (presetDeleteBtn) presetDeleteBtn.textContent = t("deletePreset");
|
||||
const presetSaveBtn = document.getElementById("wfm-preset-save-btn");
|
||||
if (presetSaveBtn) presetSaveBtn.textContent = t("savePreset");
|
||||
const presetCopyPosBtn = document.getElementById("wfm-preset-copy-pos-btn");
|
||||
if (presetCopyPosBtn) presetCopyPosBtn.textContent = t("copyPositivePrompt");
|
||||
const presetCopyNegBtn = document.getElementById("wfm-preset-copy-neg-btn");
|
||||
if (presetCopyNegBtn) presetCopyNegBtn.textContent = t("copyNegativePrompt");
|
||||
|
||||
// Group panel labels
|
||||
const propTitle = document.querySelector("#wfm-side-tab-group .wfm-group-section-title");
|
||||
@@ -193,6 +241,61 @@ function applyI18nToHtml() {
|
||||
|
||||
const removeBtn = document.getElementById("wfm-remove-group-btn");
|
||||
if (removeBtn) removeBtn.textContent = t("removeFromGroup");
|
||||
|
||||
// Help & Support tab
|
||||
const helpManualTitle = document.getElementById("wfm-help-manual-title");
|
||||
if (helpManualTitle) helpManualTitle.textContent = t("helpManualTitle");
|
||||
|
||||
const helpIdMap = {
|
||||
"wfm-help-about-title": "helpAboutTitle",
|
||||
"wfm-help-about-desc": "helpAboutDesc",
|
||||
"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-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",
|
||||
"wfm-help-prompt-7": "helpPrompt7",
|
||||
"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-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-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-shortcuts-title": "helpShortcutsTitle",
|
||||
"wfm-help-shortcuts-1": "helpShortcuts1", "wfm-help-shortcuts-2": "helpShortcuts2",
|
||||
"wfm-help-shortcuts-3": "helpShortcuts3", "wfm-help-shortcuts-4": "helpShortcuts4",
|
||||
"wfm-help-trouble-title": "helpTroubleTitle",
|
||||
"wfm-help-trouble-1": "helpTrouble1", "wfm-help-trouble-2": "helpTrouble2",
|
||||
"wfm-help-trouble-3": "helpTrouble3", "wfm-help-trouble-4": "helpTrouble4",
|
||||
"wfm-help-support-title": "helpSupportTitle",
|
||||
"wfm-help-support-desc": "helpSupportDesc",
|
||||
"wfm-help-github-desc": "helpGithubDesc",
|
||||
"wfm-help-kofi-desc": "helpKofiDesc",
|
||||
"wfm-help-thanks": "helpThanks",
|
||||
};
|
||||
for (const [id, key] of Object.entries(helpIdMap)) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = t(key);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
@@ -227,9 +330,14 @@ function initModal() {
|
||||
// ============================================
|
||||
|
||||
import { initWorkflowTab } from "./workflow-tab.js";
|
||||
import { initNodesTab } from "./nodes-tab.js";
|
||||
import { initGenerateTab } from "./generate-tab.js";
|
||||
import { initPromptTab } from "./prompt-tab.js";
|
||||
import { initSettingsTab } from "./settings-tab.js";
|
||||
import { initSettingsTab, applyTheme, getSavedTheme } from "./settings-tab.js";
|
||||
import { initModelsTab } from "./models-tab.js";
|
||||
|
||||
// Apply saved theme immediately to prevent flash of default theme
|
||||
applyTheme(getSavedTheme());
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
applyI18nToHtml();
|
||||
@@ -237,6 +345,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
initModal();
|
||||
initSettingsTab(); // Settings first (applies saved URL)
|
||||
initWorkflowTab();
|
||||
initNodesTab();
|
||||
initModelsTab();
|
||||
initGenerateTab();
|
||||
initPromptTab();
|
||||
|
||||
|
||||
@@ -70,13 +70,19 @@ export const comfyUI = {
|
||||
});
|
||||
},
|
||||
|
||||
// Model fetching
|
||||
// Node info fetching
|
||||
async fetchObjectInfo(nodeClass) {
|
||||
const res = await fetch(`${this.baseUrl}/object_info/${nodeClass}`);
|
||||
if (!res.ok) return null;
|
||||
return await res.json();
|
||||
},
|
||||
|
||||
async fetchAllObjectInfo() {
|
||||
const res = await fetch(`${this.baseUrl}/object_info`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
return await res.json();
|
||||
},
|
||||
|
||||
async _fetchModelList(nodeClasses, inputKey) {
|
||||
for (const cls of nodeClasses) {
|
||||
try {
|
||||
@@ -128,6 +134,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">
|
||||
|
||||
@@ -250,9 +250,14 @@ function _flattenSubgraphs(workflow) {
|
||||
}
|
||||
|
||||
export const comfyWorkflow = {
|
||||
detectFormat(workflow) {
|
||||
detectFormat(workflow, filename) {
|
||||
if (!workflow || typeof workflow !== "object") return "unknown";
|
||||
if (Array.isArray(workflow.nodes) && workflow.links !== undefined) return "ui";
|
||||
if (Array.isArray(workflow.nodes) && workflow.links !== undefined) {
|
||||
// App format: UI-based structure with definitions (subgraphs) or linearMode
|
||||
if (workflow.definitions || workflow.extra?.linearMode === true) return "app";
|
||||
if (filename && /\.app\.json$/i.test(filename)) return "app";
|
||||
return "ui";
|
||||
}
|
||||
// API format: top-level keys are node IDs with class_type
|
||||
const keys = Object.keys(workflow);
|
||||
if (keys.length > 0 && keys.every((k) => workflow[k]?.class_type)) return "api";
|
||||
|
||||
@@ -72,13 +72,16 @@ function updateStatus(connected) {
|
||||
|
||||
export async function loadWorkflowIntoEditor(workflow, filename) {
|
||||
let apiWorkflow = workflow;
|
||||
const format = comfyWorkflow.detectFormat(workflow);
|
||||
const format = comfyWorkflow.detectFormat(workflow, filename);
|
||||
|
||||
if (format === "ui") {
|
||||
if (format === "app") {
|
||||
showToast(t("appFormatNotSupported"), "error");
|
||||
return false;
|
||||
} else if (format === "ui") {
|
||||
apiWorkflow = await comfyWorkflow.convertUiToApi(workflow);
|
||||
} else if (format === "unknown") {
|
||||
showToast("Unknown workflow format", "error");
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
|
||||
comfyUI.currentWorkflow = apiWorkflow;
|
||||
@@ -107,6 +110,7 @@ export async function loadWorkflowIntoEditor(workflow, filename) {
|
||||
if (genBtn) genBtn.disabled = !comfyUI.connected;
|
||||
|
||||
showToast(`Workflow loaded: ${filename || ""}`, "success");
|
||||
return true;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
@@ -242,6 +246,16 @@ export async function initGenerateTab() {
|
||||
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", () => {
|
||||
@@ -250,10 +264,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;
|
||||
|
||||
+820
-8
@@ -31,6 +31,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",
|
||||
@@ -43,6 +50,8 @@ const LANGUAGES = {
|
||||
// -- Side panel --
|
||||
uiFormat: "UI Format",
|
||||
apiFormat: "API Format",
|
||||
appFormat: "App Format",
|
||||
appFormatNotSupported: "App format workflows cannot be loaded in GenerateUI. Please use 'Open in ComfyUI' instead.",
|
||||
noSelection: "No selection",
|
||||
groupsLabel: "Groups",
|
||||
groupsNone: "none",
|
||||
@@ -145,12 +154,219 @@ const LANGUAGES = {
|
||||
presetName: "Preset Name",
|
||||
positivePrompt: "Positive Prompt",
|
||||
negativePrompt: "Negative Prompt",
|
||||
savePreset: "Save Preset",
|
||||
applyPreset: "Apply",
|
||||
deletePreset: "Delete",
|
||||
savePreset: "Save",
|
||||
copyPositivePrompt: "PP Copy",
|
||||
copyNegativePrompt: "NP Copy",
|
||||
copiedToClipboard: "Copied to clipboard",
|
||||
noTextToCopy: "No text to copy",
|
||||
applyPreset: "GenUI Set",
|
||||
assistantSubtab: "AI Assistant",
|
||||
presetsSubtab: "Presets",
|
||||
|
||||
// -- Nodes tab --
|
||||
tabNodes: "Nodes",
|
||||
nodesAllNodes: "All Nodes",
|
||||
nodesNodeSets: "Node Sets",
|
||||
nodesSearchPlaceholder: "Search nodes...",
|
||||
nodesAllCategories: "All Categories",
|
||||
nodesAllPackages: "All Packages",
|
||||
nodesAllTags: "All Tags",
|
||||
nodesAllGroups: "All Groups",
|
||||
noNodesFound: "No nodes found",
|
||||
nodesDetails: "Details",
|
||||
nodesIoSpec: "I/O Spec",
|
||||
nodesGroups: "Groups",
|
||||
nodesInputs: "Inputs",
|
||||
nodesOutputs: "Outputs",
|
||||
nodesRequired: "Required",
|
||||
nodesOptional: "Optional",
|
||||
nodesClassName: "Class Name",
|
||||
nodesPackage: "Package",
|
||||
nodesCategory: "Category",
|
||||
nodesDescription: "Description",
|
||||
nodesExperimental: "Experimental",
|
||||
nodesDeprecated: "Deprecated",
|
||||
nodesOutputNode: "Output Node",
|
||||
nodesEditTags: "Tags (comma separated)",
|
||||
nodesCreateSet: "Create Node Set",
|
||||
nodesEditSet: "Edit",
|
||||
nodesSetName: "Set Name",
|
||||
nodesSetDescription: "Description",
|
||||
nodesSetNodes: "Nodes",
|
||||
nodesAddNode: "Add Node",
|
||||
nodesSetLinks: "Links",
|
||||
nodesAddLink: "Add Link",
|
||||
nodesCopyToClipboard: "Copy to Clipboard",
|
||||
nodesCopied: "Node set copied to clipboard",
|
||||
nodesCopyClassName: "Copy class name",
|
||||
nodesCopiedClassName: "Class name copied!",
|
||||
nodesDeleteSet: "Delete",
|
||||
nodesDeleteSetConfirm: "Delete this node set?",
|
||||
nodesSetUpdated: "Node set updated",
|
||||
nodesRefresh: "Refresh",
|
||||
nodesCreateGroup: "Create Group",
|
||||
nodesGroupName: "Group Name",
|
||||
nodesAssignGroup: "Assign to Group",
|
||||
nodesRemoveGroup: "Remove from Group",
|
||||
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)",
|
||||
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}\"?",
|
||||
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",
|
||||
|
||||
// -- Help & Support --
|
||||
tabHelp: "Help",
|
||||
helpManualTitle: "Features",
|
||||
helpAboutTitle: "About",
|
||||
helpAboutDesc: "A centralized control UI for managing ComfyUI workflow JSON files, generating images via API, assisting with prompt creation, and browsing/organizing nodes.",
|
||||
helpAbout1: "Install via ComfyUI Manager or git clone to custom_nodes",
|
||||
helpAbout2: "Launch from the Workflow Studio button in the ComfyUI toolbar, or open http://127.0.0.1:8188/wfm",
|
||||
helpWf1: "Switch between Thumbnail, Card, and Table view modes",
|
||||
helpWf2: "Search, category filter, favorites filter, and group filter",
|
||||
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, 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: "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",
|
||||
helpPrompt4: "Preset management: create, edit, positive/negative prompt clipboard copy (PP/NP)",
|
||||
helpPrompt5: "Preset Manager: browse all presets, favorites, and group-based filtering",
|
||||
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: "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: "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, and favorites filter",
|
||||
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",
|
||||
helpSidepanelTitle: "Workflow Studio Library (ComfyUI Side Panel)",
|
||||
helpSidepanel1: "Open from the Workflow Studio Library button in the ComfyUI toolbar",
|
||||
helpSidepanel2: "Workflows tab: All / ★ Favorites / Groups sub-tabs; ★ shown for favorites in All view",
|
||||
helpSidepanel3: "Nodes tab: All / ★ Favorites / Groups / Sets sub-tabs; ★ shown for favorites in All view",
|
||||
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",
|
||||
helpSidepanel7: "Drag & drop prompt presets to create WFS_PromptText nodes with positive/negative prompts",
|
||||
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",
|
||||
helpShortcutsTitle: "Keyboard Shortcuts",
|
||||
helpShortcuts1: "Escape: Close modal/panel",
|
||||
helpShortcuts2: "Enter: Confirm rename, send chat",
|
||||
helpShortcuts3: "Shift+Enter: New line in chat",
|
||||
helpShortcuts4: "Double-click: Open detail modal",
|
||||
helpTroubleTitle: "Troubleshooting",
|
||||
helpTrouble1: "Cannot connect to ComfyUI: Check if ComfyUI can generate images, verify URL in Settings, try refreshing or restarting",
|
||||
helpTrouble2: "Cannot connect to Ollama: Use connection test button, check if Ollama is running and models are downloaded",
|
||||
helpTrouble3: "Workflows not showing: Click refresh button, check if loadable in ComfyUI, try restarting browser/ComfyUI",
|
||||
helpTrouble4: "Image generation fails: Check if specified models exist in ComfyUI, verify connection, try restarting",
|
||||
helpSupportTitle: "Support",
|
||||
helpSupportDesc: "If you find this plugin useful, please consider supporting its development!",
|
||||
helpGithubDesc: "Report issues, request features, and contribute",
|
||||
helpKofiDesc: "Buy me a coffee to support development",
|
||||
helpThanks: "Thank you for using Workflow Studio!",
|
||||
|
||||
// -- Settings --
|
||||
workflowsDir: "Workflow Data Folder",
|
||||
workflowsDirLabel: "Folder Path",
|
||||
@@ -191,6 +407,62 @@ const LANGUAGES = {
|
||||
saveSettings: "Save Settings",
|
||||
settingsSaved: "Settings saved",
|
||||
ollamaSaved: "Ollama settings saved",
|
||||
// -- Theme --
|
||||
themeLabel: "Theme",
|
||||
themeDefault: "Deep Ocean Dark (Default)",
|
||||
themePopVibrant: "Pop & Vibrant",
|
||||
themeLightMinimalist: "Light Minimalist",
|
||||
themeCyberpunk: "Cyberpunk / Hacker",
|
||||
themeGlassmorphism: "Glassmorphism",
|
||||
themeNeumorphism: "Neumorphism",
|
||||
themeRetroPixel: "Retro 8-bit / Pixel",
|
||||
themePastelDream: "Pastel Dream",
|
||||
themeBrutalism: "Brutalism",
|
||||
themeEarthy: "Earthy / Nature",
|
||||
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: {
|
||||
@@ -220,6 +492,13 @@ const LANGUAGES = {
|
||||
import: "インポート",
|
||||
badgeColors: "バッジ色",
|
||||
resetColors: "リセット",
|
||||
badgeManage: "バッジ管理",
|
||||
badgeAdd: "追加",
|
||||
badgeDelete: "削除",
|
||||
badgeNone: "バッジが未定義です。",
|
||||
badgeNoneHint: "バッジが未定義です。⚙ バッジ管理から追加できます。",
|
||||
badgeNewLabel: "バッジ名...",
|
||||
badgeColorHint: "色を変更",
|
||||
defaultView: "デフォルト表示",
|
||||
viewThumbnail: "サムネイル",
|
||||
viewCard: "カード",
|
||||
@@ -232,6 +511,8 @@ const LANGUAGES = {
|
||||
// -- Side panel --
|
||||
uiFormat: "UI形式",
|
||||
apiFormat: "API形式",
|
||||
appFormat: "App形式",
|
||||
appFormatNotSupported: "App形式のワークフローは生成UIに読み込めません。「ComfyUIで開く」をご利用ください。",
|
||||
noSelection: "未選択",
|
||||
groupsLabel: "グループ",
|
||||
groupsNone: "なし",
|
||||
@@ -334,12 +615,219 @@ const LANGUAGES = {
|
||||
presetName: "プリセット名",
|
||||
positivePrompt: "ポジティブプロンプト",
|
||||
negativePrompt: "ネガティブプロンプト",
|
||||
savePreset: "プリセット保存",
|
||||
applyPreset: "適用",
|
||||
deletePreset: "削除",
|
||||
savePreset: "保存",
|
||||
copyPositivePrompt: "PP コピー",
|
||||
copyNegativePrompt: "NP コピー",
|
||||
copiedToClipboard: "クリップボードにコピーしました",
|
||||
noTextToCopy: "コピーするテキストがありません",
|
||||
applyPreset: "GenUI Set",
|
||||
assistantSubtab: "AIアシスタント",
|
||||
presetsSubtab: "プリセット",
|
||||
|
||||
// -- Nodes tab --
|
||||
tabNodes: "ノード",
|
||||
nodesAllNodes: "全ノード",
|
||||
nodesNodeSets: "ノードセット",
|
||||
nodesSearchPlaceholder: "ノードを検索...",
|
||||
nodesAllCategories: "全カテゴリ",
|
||||
nodesAllPackages: "全パッケージ",
|
||||
nodesAllTags: "全タグ",
|
||||
nodesAllGroups: "全グループ",
|
||||
noNodesFound: "ノードが見つかりません",
|
||||
nodesDetails: "詳細",
|
||||
nodesIoSpec: "I/O仕様",
|
||||
nodesGroups: "グループ",
|
||||
nodesInputs: "入力",
|
||||
nodesOutputs: "出力",
|
||||
nodesRequired: "必須",
|
||||
nodesOptional: "任意",
|
||||
nodesClassName: "クラス名",
|
||||
nodesPackage: "パッケージ",
|
||||
nodesCategory: "カテゴリ",
|
||||
nodesDescription: "説明",
|
||||
nodesExperimental: "実験的",
|
||||
nodesDeprecated: "非推奨",
|
||||
nodesOutputNode: "出力ノード",
|
||||
nodesEditTags: "タグ（カンマ区切り）",
|
||||
nodesCreateSet: "ノードセット作成",
|
||||
nodesEditSet: "編集",
|
||||
nodesSetName: "セット名",
|
||||
nodesSetDescription: "説明",
|
||||
nodesSetNodes: "ノード",
|
||||
nodesAddNode: "ノード追加",
|
||||
nodesSetLinks: "接続",
|
||||
nodesAddLink: "接続追加",
|
||||
nodesCopyToClipboard: "クリップボードにコピー",
|
||||
nodesCopied: "ノードセットをクリップボードにコピーしました",
|
||||
nodesCopyClassName: "クラス名をコピー",
|
||||
nodesCopiedClassName: "クラス名をコピーしました！",
|
||||
nodesDeleteSet: "削除",
|
||||
nodesDeleteSetConfirm: "このノードセットを削除しますか？",
|
||||
nodesSetUpdated: "ノードセットを更新しました",
|
||||
nodesRefresh: "更新",
|
||||
nodesCreateGroup: "グループ作成",
|
||||
nodesGroupName: "グループ名",
|
||||
nodesAssignGroup: "グループに追加",
|
||||
nodesRemoveGroup: "グループから削除",
|
||||
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: "(カンマ区切り)",
|
||||
modelsAllGroups: "すべてのグループ",
|
||||
modelsCurrentGroups: "所属グループ",
|
||||
modelsNoGroup: "グループに未所属",
|
||||
modelsAssignGroup: "グループに追加",
|
||||
modelsNoGroupAvailable: "グループがありません",
|
||||
modelsAdd: "追加",
|
||||
modelsCreateGroup: "新規グループ作成",
|
||||
modelsGroupName: "グループ名",
|
||||
modelsCreate: "作成",
|
||||
modelsManageGroups: "グループ管理",
|
||||
modelsRename: "名前変更",
|
||||
modelsDelete: "削除",
|
||||
modelsRemoveFromGroup: "グループから除外",
|
||||
modelsGroupExists: "同名のグループが既に存在します",
|
||||
modelsRenamePrompt: "新しいグループ名を入力:",
|
||||
modelsDeleteGroupConfirm: "グループ「{name}」を削除しますか？",
|
||||
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",
|
||||
|
||||
// -- Help & Support --
|
||||
tabHelp: "ヘルプ",
|
||||
helpManualTitle: "機能一覧",
|
||||
helpAboutTitle: "概要",
|
||||
helpAboutDesc: "ComfyUIのワークフローJSONファイルの管理、API接続による画像生成、プロンプト作成支援、ノードの閲覧・整理を行う集中コントロールUIです。",
|
||||
helpAbout1: "ComfyUIマネージャーからインストール、またはcustom_nodesフォルダへgit clone",
|
||||
helpAbout2: "ComfyUIツールバーのWorkflow Studioボタンから起動、またはhttp://127.0.0.1:8188/wfmを開く",
|
||||
helpWf1: "サムネイル / カード / テーブルの表示モード切り替え",
|
||||
helpWf2: "テキスト検索、カテゴリフィルタ、お気に入りフィルタ、グループフィルタ",
|
||||
helpWf3: "グループの作成・名前変更・削除、ワークフローの割り当て・解除",
|
||||
helpWf4: "JSON/PNGファイルのインポート（ボタンまたはドラッグ＆ドロップ）",
|
||||
helpWf5: "サイドパネル：サムネイル、JSONビューア（フォーマットバッジ：UI/API/App形式）、クリップボードコピー、グループ管理",
|
||||
helpWf6: "詳細モーダル：名前変更、お気に入り、サムネイル変更、バッジ付与、タグ、メモ、AI要約、ComfyUIで開く、生成UIに読み込み、デフォルト設定、削除",
|
||||
helpWf7: "バッジ管理：バッジの追加・名前変更・削除、カスタム色設定（Modelsタブと共有）— ⚙ Badgeボタン",
|
||||
helpGen1: "ComfyUIの接続・切断、接続状態の確認",
|
||||
helpGen2: "Workflowタブからワークフローを読み込み（App形式 .app.json は非対応）",
|
||||
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: "翻訳機能：日⇔英、中⇔英",
|
||||
helpPrompt4: "プリセット管理：作成・編集、ポジティブ/ネガティブプロンプトのクリップボードコピー（PP/NP）",
|
||||
helpPrompt5: "プリセットマネージャー：全プリセット一覧、お気に入り、グループ別フィルタリング",
|
||||
helpPrompt6: "グループ管理：グループ作成、プリセットの割り当て・解除、グループ削除",
|
||||
helpPrompt7: "GenUI Set：プリセットのプロンプトをGenerateUIに直接適用",
|
||||
helpSettings1: "UI言語と要約言語の設定",
|
||||
helpSettings2: "テーマ選択（13種プリセット）＋カスタマイズ：カラー調整、背景パターン（ストライプ、ポルカドット、チェック、SVGタイリング）、フォント選択（日本語デザインフォント含む16種のGoogle Fonts）",
|
||||
helpSettings3: "ワークフローデータフォルダのパス変更・リセット",
|
||||
helpSettings4: "ComfyUI接続URL設定と接続テスト",
|
||||
helpSettings5: "Ollama URL、デフォルトモデル、接続テスト",
|
||||
helpSettings6: "デフォルトワークフローの設定・解除",
|
||||
helpSettings7: "Eagle連携URL、自動保存の有効/無効",
|
||||
helpSettings8: "各セクションはアコーディオン式で折りたたみ可能",
|
||||
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タブと色パレットを共有）",
|
||||
helpSidepanelTitle: "Workflow Studio Library（ComfyUIサイドパネル）",
|
||||
helpSidepanel1: "ComfyUIツールバーのWorkflow Studio Libraryボタンから開く",
|
||||
helpSidepanel2: "Workflowsタブ：All / ★ Favorites / Groupsサブタブ、Allビューでお気に入りに★表示",
|
||||
helpSidepanel3: "Nodesタブ：All / ★ Favorites / Groups / Setsサブタブ、Allビューでお気に入りに★表示",
|
||||
helpSidepanel4: "Promptsタブ：プロンプトプリセットの閲覧（All/お気に入り/カテゴリ サブタブ）",
|
||||
helpSidepanel5: "ワークフローをキャンバスにドラッグ＆ドロップで読み込み",
|
||||
helpSidepanel6: "ノード/ノードセットをキャンバスにドラッグ＆ドロップで配置",
|
||||
helpSidepanel7: "プロンプトプリセットをドラッグ＆ドロップでWFS_PromptTextノードを作成（ポジティブ/ネガティブ対応）",
|
||||
helpSidepanel8: "サイドバーアイテムからポジティブ（P）/ネガティブ（N）プロンプトを個別コピー",
|
||||
helpSidepanel9: "ダブルクリックでもアイテムの読み込み・配置が可能",
|
||||
helpSidepanel10: "各サブタブ内で検索してアイテムをすばやく検索",
|
||||
helpSidepanel11: "Modelsタブ：All / ★ Favorites / Groups / By Typeサブタブ",
|
||||
helpShortcutsTitle: "キーボード操作",
|
||||
helpShortcuts1: "Escape：モーダル・パネルを閉じる",
|
||||
helpShortcuts2: "Enter：名前変更の確定、チャット送信",
|
||||
helpShortcuts3: "Shift+Enter：チャットで改行",
|
||||
helpShortcuts4: "ダブルクリック：詳細モーダルを開く",
|
||||
helpTroubleTitle: "トラブルシューティング",
|
||||
helpTrouble1: "ComfyUIに接続できない：ComfyUIで画像生成できるか確認、設定タブでURL確認、ブラウザ更新・再起動",
|
||||
helpTrouble2: "Ollamaに接続できない：接続テストボタンで確認、Ollamaの起動・モデルのダウンロードを確認",
|
||||
helpTrouble3: "ワークフローが表示されない：更新ボタン押下、ComfyUIで読み込めるか確認、ブラウザ・ComfyUI再起動",
|
||||
helpTrouble4: "画像生成が失敗する：指定モデルの存在確認、ComfyUI接続確認、再起動",
|
||||
helpSupportTitle: "サポート",
|
||||
helpSupportDesc: "このプラグインが役に立ったら、開発を支援していただけると嬉しいです！",
|
||||
helpGithubDesc: "バグ報告、機能リクエスト、コントリビュート",
|
||||
helpKofiDesc: "コーヒーを奢って開発を応援",
|
||||
helpThanks: "Workflow Studioをご利用いただきありがとうございます！",
|
||||
|
||||
// -- Settings --
|
||||
workflowsDir: "ワークフローデータフォルダ",
|
||||
workflowsDirLabel: "フォルダパス",
|
||||
@@ -380,6 +868,62 @@ const LANGUAGES = {
|
||||
saveSettings: "設定を保存",
|
||||
settingsSaved: "設定を保存しました",
|
||||
ollamaSaved: "Ollama設定を保存しました",
|
||||
// -- Theme --
|
||||
themeLabel: "テーマ",
|
||||
themeDefault: "Deep Ocean Dark (デフォルト)",
|
||||
themePopVibrant: "Pop & Vibrant (ポップ調)",
|
||||
themeLightMinimalist: "Light Minimalist (クリーン)",
|
||||
themeCyberpunk: "Cyberpunk / Hacker",
|
||||
themeGlassmorphism: "Glassmorphism (グラス)",
|
||||
themeNeumorphism: "Neumorphism (ニューモ)",
|
||||
themeRetroPixel: "Retro 8-bit (レトロ)",
|
||||
themePastelDream: "Pastel Dream (パステル)",
|
||||
themeBrutalism: "Brutalism (ブルータリズム)",
|
||||
themeEarthy: "Earthy / Nature (アース)",
|
||||
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: {
|
||||
@@ -409,6 +953,13 @@ const LANGUAGES = {
|
||||
import: "导入",
|
||||
badgeColors: "标签颜色",
|
||||
resetColors: "重置",
|
||||
badgeManage: "管理标签",
|
||||
badgeAdd: "添加",
|
||||
badgeDelete: "删除",
|
||||
badgeNone: "尚未定义标签。",
|
||||
badgeNoneHint: "尚未定义标签。点击 ⚙ 管理标签来添加。",
|
||||
badgeNewLabel: "标签名称...",
|
||||
badgeColorHint: "更改颜色",
|
||||
defaultView: "默认视图",
|
||||
viewThumbnail: "缩略图",
|
||||
viewCard: "卡片",
|
||||
@@ -421,6 +972,8 @@ const LANGUAGES = {
|
||||
// -- Side panel --
|
||||
uiFormat: "UI格式",
|
||||
apiFormat: "API格式",
|
||||
appFormat: "App格式",
|
||||
appFormatNotSupported: "App格式的工作流无法在生成UI中加载。请使用「在ComfyUI中打开」。",
|
||||
noSelection: "未选择",
|
||||
groupsLabel: "分组",
|
||||
groupsNone: "无",
|
||||
@@ -524,11 +1077,214 @@ const LANGUAGES = {
|
||||
positivePrompt: "正面提示词",
|
||||
negativePrompt: "负面提示词",
|
||||
savePreset: "保存预设",
|
||||
applyPreset: "应用",
|
||||
deletePreset: "删除",
|
||||
applyPreset: "GenUI Set",
|
||||
assistantSubtab: "AI助手",
|
||||
presetsSubtab: "预设",
|
||||
|
||||
// -- Nodes tab --
|
||||
tabNodes: "节点",
|
||||
nodesAllNodes: "所有节点",
|
||||
nodesNodeSets: "节点集",
|
||||
nodesSearchPlaceholder: "搜索节点...",
|
||||
nodesAllCategories: "所有分类",
|
||||
nodesAllPackages: "所有包",
|
||||
nodesAllTags: "所有标签",
|
||||
nodesAllGroups: "所有分组",
|
||||
noNodesFound: "未找到节点",
|
||||
nodesDetails: "详情",
|
||||
nodesIoSpec: "I/O规格",
|
||||
nodesGroups: "分组",
|
||||
nodesInputs: "输入",
|
||||
nodesOutputs: "输出",
|
||||
nodesRequired: "必需",
|
||||
nodesOptional: "可选",
|
||||
nodesClassName: "类名",
|
||||
nodesPackage: "包",
|
||||
nodesCategory: "分类",
|
||||
nodesDescription: "描述",
|
||||
nodesExperimental: "实验性",
|
||||
nodesDeprecated: "已弃用",
|
||||
nodesOutputNode: "输出节点",
|
||||
nodesEditTags: "标签（逗号分隔）",
|
||||
nodesCreateSet: "创建节点集",
|
||||
nodesEditSet: "编辑",
|
||||
nodesSetName: "集名称",
|
||||
nodesSetDescription: "描述",
|
||||
nodesSetNodes: "节点",
|
||||
nodesAddNode: "添加节点",
|
||||
nodesSetLinks: "连接",
|
||||
nodesAddLink: "添加连接",
|
||||
nodesCopyToClipboard: "复制到剪贴板",
|
||||
nodesCopied: "节点集已复制到剪贴板",
|
||||
nodesCopyClassName: "复制类名",
|
||||
nodesCopiedClassName: "类名已复制！",
|
||||
nodesDeleteSet: "删除",
|
||||
nodesDeleteSetConfirm: "删除此节点集？",
|
||||
nodesSetUpdated: "节点集已更新",
|
||||
nodesRefresh: "刷新",
|
||||
nodesCreateGroup: "创建分组",
|
||||
nodesGroupName: "分组名称",
|
||||
nodesAssignGroup: "添加到分组",
|
||||
nodesRemoveGroup: "从分组移除",
|
||||
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: "(逗号分隔)",
|
||||
modelsAllGroups: "所有分组",
|
||||
modelsCurrentGroups: "当前分组",
|
||||
modelsNoGroup: "未分配到任何分组",
|
||||
modelsAssignGroup: "分配到分组",
|
||||
modelsNoGroupAvailable: "没有可用的分组",
|
||||
modelsAdd: "添加",
|
||||
modelsCreateGroup: "创建新分组",
|
||||
modelsGroupName: "分组名称",
|
||||
modelsCreate: "创建",
|
||||
modelsManageGroups: "分组管理",
|
||||
modelsRename: "重命名",
|
||||
modelsDelete: "删除",
|
||||
modelsRemoveFromGroup: "从分组移除",
|
||||
modelsGroupExists: "同名分组已存在",
|
||||
modelsRenamePrompt: "输入新分组名称:",
|
||||
modelsDeleteGroupConfirm: "删除分组「{name}」？",
|
||||
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",
|
||||
|
||||
// -- Help & Support --
|
||||
tabHelp: "帮助",
|
||||
helpManualTitle: "功能列表",
|
||||
helpAboutTitle: "概述",
|
||||
helpAboutDesc: "用于管理ComfyUI工作流JSON文件、通过API生成图片、辅助提示词创作、浏览和整理节点的集中控制UI。",
|
||||
helpAbout1: "通过ComfyUI Manager安装，或git clone到custom_nodes文件夹",
|
||||
helpAbout2: "从ComfyUI工具栏的Workflow Studio按钮启动，或打开http://127.0.0.1:8188/wfm",
|
||||
helpWf1: "切换缩略图/卡片/表格视图模式",
|
||||
helpWf2: "文本搜索、分类筛选、收藏筛选、分组筛选",
|
||||
helpWf3: "创建、重命名、删除分组，分配/移除工作流",
|
||||
helpWf4: "通过按钮或拖放导入JSON/PNG文件",
|
||||
helpWf5: "侧面板：缩略图、JSON查看器（格式徽章：UI/API/App）、剪贴板复制、分组管理",
|
||||
helpWf6: "详情弹窗：重命名、收藏、缩略图更换、徽章分配、标签、备注、AI摘要、在ComfyUI中打开、加载到生成UI、设为默认、删除",
|
||||
helpWf7: "徽章管理：添加、重命名、删除徽章并自定义颜色（与Models标签共享）— ⚙ Badge按钮",
|
||||
helpGen1: "连接/断开ComfyUI，检查连接状态",
|
||||
helpGen2: "从工作流标签页加载工作流（不支持App格式.app.json）",
|
||||
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英",
|
||||
helpPrompt4: "预设管理：创建、编辑、正面/负面提示词剪贴板复制（PP/NP）",
|
||||
helpPrompt5: "预设管理器：浏览所有预设、收藏、按组筛选",
|
||||
helpPrompt6: "组管理：创建组、分配/移除预设、删除组",
|
||||
helpPrompt7: "GenUI Set：将预设提示词直接应用到生成UI",
|
||||
helpSettings1: "UI语言和摘要语言设置",
|
||||
helpSettings2: "主题选择（13种预设）+ 自定义：颜色调整、背景图案（条纹、波点、棋盘格、SVG平铺）、字体选择（含日文显示字体在内的16种Google Fonts）",
|
||||
helpSettings3: "工作流数据文件夹路径更改/重置",
|
||||
helpSettings4: "ComfyUI连接URL设置和测试",
|
||||
helpSettings5: "Ollama URL、默认模型、连接测试",
|
||||
helpSettings6: "默认工作流设置/取消",
|
||||
helpSettings7: "Eagle集成URL、自动保存开关",
|
||||
helpSettings8: "各部分可折叠展开",
|
||||
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标签共享）",
|
||||
helpSidepanelTitle: "Workflow Studio Library（ComfyUI侧面板）",
|
||||
helpSidepanel1: "从ComfyUI工具栏的Workflow Studio Library按钮打开",
|
||||
helpSidepanel2: "Workflows标签：All / ★ Favorites / Groups子标签，All视图中收藏项显示★",
|
||||
helpSidepanel3: "Nodes标签：All / ★ Favorites / Groups / Sets子标签，All视图中收藏项显示★",
|
||||
helpSidepanel4: "Prompts标签：浏览提示词预设（全部/收藏/分类 子标签）",
|
||||
helpSidepanel5: "将工作流拖放到画布上即可加载",
|
||||
helpSidepanel6: "将节点/节点集拖放到画布上即可放置",
|
||||
helpSidepanel7: "拖放提示词预设可创建WFS_PromptText节点（含正面/负面提示词）",
|
||||
helpSidepanel8: "从侧边栏项目中单独复制正面（P）或负面（N）提示词",
|
||||
helpSidepanel9: "双击项目也可加载/放置",
|
||||
helpSidepanel10: "在各子标签内搜索快速查找项目",
|
||||
helpSidepanel11: "Models标签：All / ★ Favorites / Groups / By Type子标签",
|
||||
helpShortcutsTitle: "键盘操作",
|
||||
helpShortcuts1: "Escape：关闭弹窗/面板",
|
||||
helpShortcuts2: "Enter：确认重命名、发送聊天",
|
||||
helpShortcuts3: "Shift+Enter：聊天中换行",
|
||||
helpShortcuts4: "双击：打开详情弹窗",
|
||||
helpTroubleTitle: "故障排除",
|
||||
helpTrouble1: "无法连接ComfyUI：确认ComfyUI能否生成图片、在设置中验证URL、尝试刷新或重启",
|
||||
helpTrouble2: "无法连接Ollama：使用连接测试按钮、确认Ollama运行中且已下载模型",
|
||||
helpTrouble3: "工作流不显示：点击刷新按钮、确认能在ComfyUI中加载、尝试重启浏览器/ComfyUI",
|
||||
helpTrouble4: "图片生成失败：确认指定模型存在、验证ComfyUI连接、尝试重启",
|
||||
helpSupportTitle: "支持",
|
||||
helpSupportDesc: "如果您觉得这个插件有用，请考虑支持它的开发！",
|
||||
helpGithubDesc: "报告问题、请求功能和贡献代码",
|
||||
helpKofiDesc: "请我喝杯咖啡来支持开发",
|
||||
helpThanks: "感谢您使用Workflow Studio！",
|
||||
|
||||
// -- Settings --
|
||||
workflowsDir: "工作流数据文件夹",
|
||||
workflowsDirLabel: "文件夹路径",
|
||||
@@ -569,6 +1325,62 @@ const LANGUAGES = {
|
||||
saveSettings: "保存设置",
|
||||
settingsSaved: "设置已保存",
|
||||
ollamaSaved: "Ollama设置已保存",
|
||||
// -- Theme --
|
||||
themeLabel: "主题",
|
||||
themeDefault: "Deep Ocean Dark (默认)",
|
||||
themePopVibrant: "Pop & Vibrant (活力)",
|
||||
themeLightMinimalist: "Light Minimalist (简约)",
|
||||
themeCyberpunk: "Cyberpunk / Hacker",
|
||||
themeGlassmorphism: "Glassmorphism (毛玻璃)",
|
||||
themeNeumorphism: "Neumorphism (新拟态)",
|
||||
themeRetroPixel: "Retro 8-bit (复古像素)",
|
||||
themePastelDream: "Pastel Dream (粉彩)",
|
||||
themeBrutalism: "Brutalism (粗野主义)",
|
||||
themeEarthy: "Earthy / Nature (自然)",
|
||||
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
File diff suppressed because it is too large
Load Diff
+460
-72
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* Prompt Tab - Ollama AI Assistant + Prompt Presets
|
||||
* Prompt Tab - Ollama AI Assistant + Prompt Presets + Preset Manager
|
||||
*/
|
||||
|
||||
import { showToast } from "./app.js";
|
||||
@@ -14,9 +14,335 @@ const ollamaState = {
|
||||
attachedImage: null,
|
||||
};
|
||||
|
||||
// Preset data (loaded from API, with localStorage migration)
|
||||
let promptPresets = [];
|
||||
let pmActiveTab = "all"; // "all" | "favorites" | "groups"
|
||||
let pmSearchText = "";
|
||||
let pmSelectedId = null; // currently selected preset id
|
||||
let pmGroups = {}; // { groupName: [presetId, ...] }
|
||||
const PM_GROUPS_KEY = "wfm_prompt_preset_groups";
|
||||
|
||||
// ============================================
|
||||
// Preset API helpers
|
||||
// ============================================
|
||||
|
||||
async function fetchPresets() {
|
||||
try {
|
||||
const res = await fetch("/api/wfm/prompts");
|
||||
return res.ok ? await res.json() : [];
|
||||
} catch { return []; }
|
||||
}
|
||||
|
||||
async function apiCreatePreset(data) {
|
||||
try {
|
||||
const res = await fetch("/api/wfm/prompts", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
const result = await res.json();
|
||||
return result.status === "ok" ? result.prompt : null;
|
||||
} catch { return null; }
|
||||
}
|
||||
|
||||
async function apiUpdatePreset(id, updates) {
|
||||
try {
|
||||
const res = await fetch("/api/wfm/prompts/update", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id, ...updates }),
|
||||
});
|
||||
const result = await res.json();
|
||||
return result.status === "ok" ? result.prompt : null;
|
||||
} catch { return null; }
|
||||
}
|
||||
|
||||
async function apiDeletePreset(id) {
|
||||
try {
|
||||
await fetch("/api/wfm/prompts/delete", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id }),
|
||||
});
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Migrate localStorage presets to API
|
||||
// ============================================
|
||||
|
||||
const PRESETS_KEY = "wfm_prompt_presets";
|
||||
|
||||
let promptPresets = [];
|
||||
async function migrateLocalStoragePresets() {
|
||||
try {
|
||||
const raw = localStorage.getItem(PRESETS_KEY);
|
||||
if (!raw) return;
|
||||
const local = JSON.parse(raw);
|
||||
if (!Array.isArray(local) || local.length === 0) return;
|
||||
|
||||
// Only migrate if API has no presets yet
|
||||
const existing = await fetchPresets();
|
||||
if (existing.length > 0) {
|
||||
localStorage.removeItem(PRESETS_KEY);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const p of local) {
|
||||
await apiCreatePreset({
|
||||
name: p.name || "Untitled",
|
||||
text: p.posText || p.text || "",
|
||||
category: "",
|
||||
tags: [],
|
||||
favorite: false,
|
||||
});
|
||||
// Note: negText is stored separately - we combine it
|
||||
if (p.negText) {
|
||||
// Create a separate entry for negative prompt reference
|
||||
// or store in the text field with marker
|
||||
}
|
||||
}
|
||||
localStorage.removeItem(PRESETS_KEY);
|
||||
} catch { /* ignore migration errors */ }
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Preset data management
|
||||
// ============================================
|
||||
|
||||
async function loadAllPresets() {
|
||||
await migrateLocalStoragePresets();
|
||||
promptPresets = await fetchPresets();
|
||||
|
||||
// Load groups from localStorage
|
||||
try {
|
||||
pmGroups = JSON.parse(localStorage.getItem(PM_GROUPS_KEY) || "{}");
|
||||
} catch { pmGroups = {}; }
|
||||
|
||||
// Clean stale entries from groups
|
||||
const validIds = new Set(promptPresets.map(p => p.id));
|
||||
for (const g of Object.keys(pmGroups)) {
|
||||
pmGroups[g] = (pmGroups[g] || []).filter(id => validIds.has(id));
|
||||
if (pmGroups[g].length === 0) delete pmGroups[g];
|
||||
}
|
||||
saveGroups();
|
||||
|
||||
renderPresetSelect();
|
||||
renderGroupSelect();
|
||||
renderPresetManager();
|
||||
}
|
||||
|
||||
function saveGroups() {
|
||||
localStorage.setItem(PM_GROUPS_KEY, JSON.stringify(pmGroups));
|
||||
renderGroupSelect();
|
||||
}
|
||||
|
||||
function renderGroupSelect() {
|
||||
const select = document.getElementById("wfm-preset-group-select");
|
||||
if (!select) return;
|
||||
const prevVal = select.value;
|
||||
select.innerHTML = `<option value="">Select group...</option>`;
|
||||
for (const g of Object.keys(pmGroups).sort()) {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = g;
|
||||
opt.textContent = g;
|
||||
select.appendChild(opt);
|
||||
}
|
||||
if (prevVal && pmGroups[prevVal]) select.value = prevVal;
|
||||
}
|
||||
|
||||
function renderPresetSelect() {
|
||||
const select = document.getElementById("wfm-preset-select");
|
||||
if (!select) return;
|
||||
const prevVal = select.value;
|
||||
select.innerHTML = `<option value="">${t("newPreset")}</option>`;
|
||||
promptPresets.forEach((p) => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = p.id;
|
||||
opt.textContent = p.name;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
// Restore selection if still valid
|
||||
if (prevVal && promptPresets.find(p => p.id === prevVal)) {
|
||||
select.value = prevVal;
|
||||
}
|
||||
}
|
||||
|
||||
function selectPresetInEditor(preset) {
|
||||
const presetSelect = document.getElementById("wfm-preset-select");
|
||||
const presetName = document.getElementById("wfm-preset-name");
|
||||
const presetCategory = document.getElementById("wfm-preset-category");
|
||||
const presetPos = document.getElementById("wfm-preset-pos");
|
||||
const presetNeg = document.getElementById("wfm-preset-neg");
|
||||
|
||||
if (presetSelect) presetSelect.value = preset ? preset.id : "";
|
||||
if (presetName) presetName.value = preset ? preset.name : "";
|
||||
if (presetCategory) presetCategory.value = preset ? (preset.category || "") : "";
|
||||
if (presetPos) presetPos.value = preset ? (preset.text || preset.posText || "") : "";
|
||||
if (presetNeg) presetNeg.value = preset ? (preset.negText || "") : "";
|
||||
|
||||
pmSelectedId = preset ? preset.id : null;
|
||||
renderPresetManager();
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Preset Manager rendering
|
||||
// ============================================
|
||||
|
||||
function esc(s) {
|
||||
return s ? String(s).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">") : "";
|
||||
}
|
||||
|
||||
function renderPresetManager() {
|
||||
const container = document.getElementById("wfm-pm-list");
|
||||
if (!container) return;
|
||||
container.innerHTML = "";
|
||||
|
||||
switch (pmActiveTab) {
|
||||
case "all": renderPmAll(container); break;
|
||||
case "favorites": renderPmFavorites(container); break;
|
||||
case "groups": renderPmGroups(container); break;
|
||||
}
|
||||
}
|
||||
|
||||
function matchesSearch(p) {
|
||||
if (!pmSearchText) return true;
|
||||
const s = pmSearchText.toLowerCase();
|
||||
return (p.name || "").toLowerCase().includes(s) ||
|
||||
(p.text || "").toLowerCase().includes(s) ||
|
||||
(p.category || "").toLowerCase().includes(s) ||
|
||||
(p.tags || []).some(t => t.toLowerCase().includes(s));
|
||||
}
|
||||
|
||||
function createPmItem(preset) {
|
||||
const el = document.createElement("div");
|
||||
el.className = "wfm-pm-item" + (pmSelectedId === preset.id ? " active" : "");
|
||||
|
||||
const previewText = (preset.text || "").length > 50
|
||||
? preset.text.substring(0, 50) + "..."
|
||||
: (preset.text || "");
|
||||
|
||||
const catBadge = preset.category
|
||||
? `<span style="font-size:9px;color:var(--wfm-primary);margin-left:4px;">[${esc(preset.category)}]</span>`
|
||||
: "";
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="wfm-pm-item-body">
|
||||
<div class="wfm-pm-item-name">${preset.favorite ? '<span style="color:#ffd700;">★</span> ' : ""}${esc(preset.name)}${catBadge}</div>
|
||||
<div class="wfm-pm-item-sub">${esc(previewText)}</div>
|
||||
</div>
|
||||
<div class="wfm-pm-item-actions">
|
||||
<button class="wfm-pm-action-btn pm-fav-btn${preset.favorite ? " fav-active" : ""}" title="Favorite">★</button>
|
||||
<button class="wfm-pm-action-btn pm-del-btn" title="Delete" style="color:var(--wfm-danger);">✕</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Click to select in editor
|
||||
el.addEventListener("click", (e) => {
|
||||
if (e.target.closest(".wfm-pm-item-actions")) return;
|
||||
selectPresetInEditor(preset);
|
||||
});
|
||||
|
||||
// Favorite toggle
|
||||
el.querySelector(".pm-fav-btn").addEventListener("click", async (e) => {
|
||||
e.stopPropagation();
|
||||
const updated = await apiUpdatePreset(preset.id, { favorite: !preset.favorite });
|
||||
if (updated) {
|
||||
const idx = promptPresets.findIndex(p => p.id === preset.id);
|
||||
if (idx >= 0) promptPresets[idx] = updated;
|
||||
renderPresetManager();
|
||||
}
|
||||
});
|
||||
|
||||
// Delete
|
||||
el.querySelector(".pm-del-btn").addEventListener("click", async (e) => {
|
||||
e.stopPropagation();
|
||||
if (!confirm(`Delete "${preset.name}"?`)) return;
|
||||
await apiDeletePreset(preset.id);
|
||||
promptPresets = promptPresets.filter(p => p.id !== preset.id);
|
||||
if (pmSelectedId === preset.id) {
|
||||
pmSelectedId = null;
|
||||
selectPresetInEditor(null);
|
||||
}
|
||||
renderPresetSelect();
|
||||
renderPresetManager();
|
||||
showToast(t("deleted"), "success");
|
||||
});
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
function renderPmAll(container) {
|
||||
const items = promptPresets.filter(matchesSearch);
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = `<div class="wfm-pm-empty">${promptPresets.length === 0 ? "No presets yet.<br><small>Create one in the Presets panel</small>" : "No matches"}</div>`;
|
||||
return;
|
||||
}
|
||||
for (const p of items) {
|
||||
container.appendChild(createPmItem(p));
|
||||
}
|
||||
}
|
||||
|
||||
function renderPmFavorites(container) {
|
||||
const favs = promptPresets.filter(p => p.favorite);
|
||||
const items = favs.filter(matchesSearch);
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = `<div class="wfm-pm-empty">${favs.length === 0 ? "No favorites yet.<br><small>Star presets to add them here</small>" : "No matches"}</div>`;
|
||||
return;
|
||||
}
|
||||
for (const p of items) {
|
||||
container.appendChild(createPmItem(p));
|
||||
}
|
||||
}
|
||||
|
||||
function renderPmGroups(container) {
|
||||
const groupNames = Object.keys(pmGroups).sort();
|
||||
|
||||
if (groupNames.length === 0) {
|
||||
container.innerHTML = `<div class="wfm-pm-empty">No groups yet.<br><small>Create groups from the Presets panel below</small></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
for (const groupName of groupNames) {
|
||||
const ids = pmGroups[groupName] || [];
|
||||
const presets = ids.map(id => promptPresets.find(p => p.id === id)).filter(Boolean);
|
||||
|
||||
const section = document.createElement("div");
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "wfm-pm-group-header collapsed";
|
||||
header.innerHTML = `<span>${esc(groupName)}</span> <span class="wfm-pm-badge">${presets.length}</span>`;
|
||||
|
||||
const list = document.createElement("div");
|
||||
list.style.display = "none";
|
||||
|
||||
header.addEventListener("click", () => {
|
||||
list.style.display = list.style.display === "none" ? "block" : "none";
|
||||
header.classList.toggle("collapsed");
|
||||
});
|
||||
|
||||
for (const p of presets) {
|
||||
const item = createPmItem(p);
|
||||
// Add remove-from-group button
|
||||
const removeBtn = document.createElement("button");
|
||||
removeBtn.className = "wfm-pm-action-btn";
|
||||
removeBtn.title = "Remove from group";
|
||||
removeBtn.textContent = "\u2796";
|
||||
removeBtn.style.fontSize = "10px";
|
||||
removeBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
pmGroups[groupName] = pmGroups[groupName].filter(id => id !== p.id);
|
||||
if (pmGroups[groupName].length === 0) delete pmGroups[groupName];
|
||||
saveGroups();
|
||||
renderPresetManager();
|
||||
});
|
||||
item.querySelector(".wfm-pm-item-actions").prepend(removeBtn);
|
||||
list.appendChild(item);
|
||||
}
|
||||
section.appendChild(header);
|
||||
section.appendChild(list);
|
||||
container.appendChild(section);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Ollama API helpers
|
||||
@@ -221,7 +547,7 @@ async function sendTranslate(direction) {
|
||||
return;
|
||||
}
|
||||
|
||||
const labels = { ja2en: "JA→EN", en2ja: "EN→JA", zh2en: "ZH→EN", en2zh: "EN→ZH" };
|
||||
const labels = { ja2en: "JA\u2192EN", en2ja: "EN\u2192JA", zh2en: "ZH\u2192EN", en2zh: "EN\u2192ZH" };
|
||||
addChatMessage("user", `[${labels[direction] || direction}]\n${text}`);
|
||||
input.value = "";
|
||||
|
||||
@@ -232,9 +558,9 @@ async function sendTranslate(direction) {
|
||||
try {
|
||||
const prompts = {
|
||||
ja2en: `Translate the following Japanese text into English. Output only the translated text, nothing else.\n\n${text}`,
|
||||
en2ja: `以下の英語のテキストを日本語に翻訳してください。翻訳結果のみを出力し、他の説明は不要です。\n\n${text}`,
|
||||
en2ja: `\u4ee5\u4e0b\u306e\u82f1\u8a9e\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u65e5\u672c\u8a9e\u306b\u7ffb\u8a33\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u7ffb\u8a33\u7d50\u679c\u306e\u307f\u3092\u51fa\u529b\u3057\u3001\u4ed6\u306e\u8aac\u660e\u306f\u4e0d\u8981\u3067\u3059\u3002\n\n${text}`,
|
||||
zh2en: `Translate the following Chinese text into English. Output only the translated text, nothing else.\n\n${text}`,
|
||||
en2zh: `请将以下英文翻译成中文。只输出翻译结果，不需要其他说明。\n\n${text}`,
|
||||
en2zh: `\u8bf7\u5c06\u4ee5\u4e0b\u82f1\u6587\u7ffb\u8bd1\u6210\u4e2d\u6587\u3002\u53ea\u8f93\u51fa\u7ffb\u8bd1\u7ed3\u679c\uff0c\u4e0d\u9700\u8981\u5176\u4ed6\u8bf4\u660e\u3002\n\n${text}`,
|
||||
};
|
||||
const prompt = prompts[direction];
|
||||
|
||||
@@ -267,36 +593,6 @@ function applyToGenerateUI(text) {
|
||||
showToast(t("appliedToGenerateUI"), "success");
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Presets
|
||||
// ============================================
|
||||
|
||||
function loadPresets() {
|
||||
try {
|
||||
promptPresets = JSON.parse(localStorage.getItem(PRESETS_KEY) || "[]");
|
||||
} catch {
|
||||
promptPresets = [];
|
||||
}
|
||||
renderPresets();
|
||||
}
|
||||
|
||||
function savePresets() {
|
||||
localStorage.setItem(PRESETS_KEY, JSON.stringify(promptPresets));
|
||||
renderPresets();
|
||||
}
|
||||
|
||||
function renderPresets() {
|
||||
const select = document.getElementById("wfm-preset-select");
|
||||
if (!select) return;
|
||||
select.innerHTML = `<option value="">${t("newPreset")}</option>`;
|
||||
promptPresets.forEach((p, i) => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = i.toString();
|
||||
opt.textContent = p.name;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Initialize
|
||||
// ============================================
|
||||
@@ -377,32 +673,50 @@ export function initPromptTab() {
|
||||
document.getElementById("wfm-ollama-zh2en-btn")?.addEventListener("click", () => sendTranslate("zh2en"));
|
||||
document.getElementById("wfm-ollama-en2zh-btn")?.addEventListener("click", () => sendTranslate("en2zh"));
|
||||
|
||||
// --- Presets ---
|
||||
loadPresets();
|
||||
// --- Presets (API-based) ---
|
||||
loadAllPresets();
|
||||
|
||||
const presetSelect = document.getElementById("wfm-preset-select");
|
||||
const presetName = document.getElementById("wfm-preset-name");
|
||||
const presetCategory = document.getElementById("wfm-preset-category");
|
||||
const presetPos = document.getElementById("wfm-preset-pos");
|
||||
const presetNeg = document.getElementById("wfm-preset-neg");
|
||||
|
||||
// Load preset on selection
|
||||
presetSelect?.addEventListener("change", () => {
|
||||
const idx = presetSelect.value;
|
||||
if (idx !== "" && promptPresets[idx]) {
|
||||
const p = promptPresets[idx];
|
||||
if (presetName) presetName.value = p.name;
|
||||
if (presetPos) presetPos.value = p.posText || p.text || "";
|
||||
if (presetNeg) presetNeg.value = p.negText || "";
|
||||
} else {
|
||||
if (presetName) presetName.value = "";
|
||||
if (presetPos) presetPos.value = "";
|
||||
if (presetNeg) presetNeg.value = "";
|
||||
}
|
||||
const id = presetSelect.value;
|
||||
const p = promptPresets.find(pp => pp.id === id);
|
||||
selectPresetInEditor(p || null);
|
||||
});
|
||||
|
||||
// Save preset
|
||||
document.getElementById("wfm-preset-save-btn")?.addEventListener("click", () => {
|
||||
// Copy positive prompt to clipboard
|
||||
document.getElementById("wfm-preset-copy-pos-btn")?.addEventListener("click", () => {
|
||||
const text = presetPos?.value || "";
|
||||
if (!text.trim()) {
|
||||
showToast(t("noTextToCopy"), "error");
|
||||
return;
|
||||
}
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showToast(t("copiedToClipboard"), "success");
|
||||
});
|
||||
});
|
||||
|
||||
// Copy negative prompt to clipboard
|
||||
document.getElementById("wfm-preset-copy-neg-btn")?.addEventListener("click", () => {
|
||||
const text = presetNeg?.value || "";
|
||||
if (!text.trim()) {
|
||||
showToast(t("noTextToCopy"), "error");
|
||||
return;
|
||||
}
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showToast(t("copiedToClipboard"), "success");
|
||||
});
|
||||
});
|
||||
|
||||
// Save preset (create or update via API)
|
||||
document.getElementById("wfm-preset-save-btn")?.addEventListener("click", async () => {
|
||||
const name = presetName?.value.trim();
|
||||
const category = presetCategory?.value.trim() || "";
|
||||
const pos = presetPos?.value || "";
|
||||
const neg = presetNeg?.value || "";
|
||||
|
||||
@@ -415,32 +729,39 @@ export function initPromptTab() {
|
||||
return;
|
||||
}
|
||||
|
||||
const existIdx = promptPresets.findIndex((p) => p.name === name);
|
||||
if (existIdx >= 0) {
|
||||
promptPresets[existIdx].posText = pos;
|
||||
promptPresets[existIdx].negText = neg;
|
||||
const selectedId = presetSelect?.value;
|
||||
const existing = selectedId ? promptPresets.find(p => p.id === selectedId) : null;
|
||||
|
||||
if (existing) {
|
||||
// Update
|
||||
const updated = await apiUpdatePreset(existing.id, {
|
||||
name, text: pos, negText: neg, category,
|
||||
});
|
||||
if (updated) {
|
||||
const idx = promptPresets.findIndex(p => p.id === existing.id);
|
||||
if (idx >= 0) promptPresets[idx] = updated;
|
||||
showToast(t("presetSaved"), "success");
|
||||
}
|
||||
} else {
|
||||
promptPresets.push({ name, posText: pos, negText: neg });
|
||||
// Create
|
||||
const created = await apiCreatePreset({
|
||||
name, text: pos, negText: neg, category,
|
||||
tags: [], favorite: false,
|
||||
});
|
||||
if (created) {
|
||||
promptPresets.push(created);
|
||||
pmSelectedId = created.id;
|
||||
showToast(t("presetSaved"), "success");
|
||||
}
|
||||
}
|
||||
savePresets();
|
||||
showToast(t("presetSaved"), "success");
|
||||
|
||||
// Select newly saved
|
||||
const newIdx = promptPresets.findIndex((p) => p.name === name);
|
||||
if (presetSelect && newIdx >= 0) presetSelect.value = newIdx.toString();
|
||||
});
|
||||
renderPresetSelect();
|
||||
renderPresetManager();
|
||||
|
||||
// Delete preset
|
||||
document.getElementById("wfm-preset-delete-btn")?.addEventListener("click", () => {
|
||||
const idx = presetSelect?.value;
|
||||
if (idx === "" || !promptPresets[idx]) return;
|
||||
if (!confirm(t("deleteConfirm", promptPresets[idx].name))) return;
|
||||
promptPresets.splice(idx, 1);
|
||||
savePresets();
|
||||
if (presetName) presetName.value = "";
|
||||
if (presetPos) presetPos.value = "";
|
||||
if (presetNeg) presetNeg.value = "";
|
||||
showToast(t("deleted"), "success");
|
||||
// Re-select
|
||||
if (pmSelectedId && presetSelect) {
|
||||
presetSelect.value = pmSelectedId;
|
||||
}
|
||||
});
|
||||
|
||||
// Apply preset to GenerateUI
|
||||
@@ -465,4 +786,71 @@ export function initPromptTab() {
|
||||
}
|
||||
if (applied) showToast(t("appliedToGenerateUI"), "success");
|
||||
});
|
||||
|
||||
// --- Group management (Presets side) ---
|
||||
document.getElementById("wfm-preset-new-group-btn")?.addEventListener("click", () => {
|
||||
const name = prompt("Group name:");
|
||||
if (!name || !name.trim()) return;
|
||||
const key = name.trim();
|
||||
if (pmGroups[key]) {
|
||||
showToast("Group already exists", "error");
|
||||
return;
|
||||
}
|
||||
pmGroups[key] = [];
|
||||
saveGroups();
|
||||
renderPresetManager();
|
||||
showToast(`Group "${key}" created`, "success");
|
||||
});
|
||||
|
||||
document.getElementById("wfm-preset-add-to-group-btn")?.addEventListener("click", () => {
|
||||
const groupSelect = document.getElementById("wfm-preset-group-select");
|
||||
const groupName = groupSelect?.value;
|
||||
if (!groupName) {
|
||||
showToast("Select a group first", "error");
|
||||
return;
|
||||
}
|
||||
const id = presetSelect?.value;
|
||||
if (!id) {
|
||||
showToast("Select a preset first", "error");
|
||||
return;
|
||||
}
|
||||
if (!pmGroups[groupName]) pmGroups[groupName] = [];
|
||||
if (pmGroups[groupName].includes(id)) {
|
||||
showToast("Already in this group", "info");
|
||||
return;
|
||||
}
|
||||
pmGroups[groupName].push(id);
|
||||
saveGroups();
|
||||
renderPresetManager();
|
||||
showToast("Added to group", "success");
|
||||
});
|
||||
|
||||
document.getElementById("wfm-preset-del-group-btn")?.addEventListener("click", () => {
|
||||
const groupSelect = document.getElementById("wfm-preset-group-select");
|
||||
const groupName = groupSelect?.value;
|
||||
if (!groupName) {
|
||||
showToast("Select a group first", "error");
|
||||
return;
|
||||
}
|
||||
if (!confirm(`Delete group "${groupName}"?`)) return;
|
||||
delete pmGroups[groupName];
|
||||
saveGroups();
|
||||
renderPresetManager();
|
||||
showToast(`Group "${groupName}" deleted`, "success");
|
||||
});
|
||||
|
||||
// --- Preset Manager ---
|
||||
document.querySelectorAll(".wfm-pm-tab").forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
pmActiveTab = btn.dataset.pmtab;
|
||||
document.querySelectorAll(".wfm-pm-tab").forEach(b => b.classList.remove("active"));
|
||||
btn.classList.add("active");
|
||||
renderPresetManager();
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("wfm-pm-search-input")?.addEventListener("input", (e) => {
|
||||
pmSearchText = e.target.value.trim();
|
||||
renderPresetManager();
|
||||
});
|
||||
}
|
||||
|
||||
+594
-18
@@ -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) || "{}");
|
||||
@@ -50,6 +56,282 @@ function buildLangOptions(optionsMap, selectedValue) {
|
||||
.join("");
|
||||
}
|
||||
|
||||
// Theme definitions with swatch colors for preview
|
||||
const THEMES = [
|
||||
{ id: "", key: "themeDefault", colors: ["#1a1a2e", "#16213e", "#4a9eff", "#7c5cfc"] },
|
||||
{ id: "pop-vibrant", key: "themePopVibrant", colors: ["#F8F9FA", "#FFFFFF", "#FF6B6B", "#00D2D3"] },
|
||||
{ id: "light-minimalist", key: "themeLightMinimalist", colors: ["#FFFFFF", "#F5F5F5", "#4A9EFF", "#6366F1"] },
|
||||
{ id: "cyberpunk", key: "themeCyberpunk", colors: ["#000000", "#0A0A0A", "#FF00FF", "#00FFFF"] },
|
||||
{ id: "glassmorphism", key: "themeGlassmorphism", colors: ["#1A0533", "#0D1B3E", "#7B68EE", "#DA77F2"] },
|
||||
{ id: "neumorphism", key: "themeNeumorphism", colors: ["#D1D9E6", "#D1D9E6", "#6C8EBF", "#7986CB"] },
|
||||
{ id: "retro-pixel", key: "themeRetroPixel", colors: ["#2C2C34", "#3A3A44", "#5B8FD4", "#D45BD4"] },
|
||||
{ id: "pastel-dream", key: "themePastelDream", colors: ["#F0E6FF", "#E8F5E9", "#B39DDB", "#80DEEA"] },
|
||||
{ id: "brutalism", key: "themeBrutalism", colors: ["#FFFFFF", "#FFFFFF", "#CCFF00", "#000000"] },
|
||||
{ id: "earthy", key: "themeEarthy", colors: ["#F5E6D3", "#EDE0D4", "#8D6E63", "#BF6830"] },
|
||||
{ id: "material", key: "themeMaterial", colors: ["#FAFAFA", "#FFFFFF", "#3F51B5", "#FF4081"] },
|
||||
{ id: "monotone-accent", key: "themeMonotoneAccent", colors: ["#F7F7F7", "#FFFFFF", "#FF6B35", "#1A1A1A"] },
|
||||
{ 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() {
|
||||
return loadLocalSettings().theme || "";
|
||||
}
|
||||
|
||||
export async function initSettingsTab() {
|
||||
const container = document.querySelector("#wfm-tab-settings .wfm-settings-container");
|
||||
if (!container) return;
|
||||
@@ -72,8 +354,8 @@ export async function initSettingsTab() {
|
||||
<h2 style="font-size:18px;margin-bottom:20px;">${t("settingsTitle")}</h2>
|
||||
|
||||
<!-- 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">
|
||||
@@ -89,11 +371,109 @@ export async function initSettingsTab() {
|
||||
⚠ ${t("summaryLangNote")}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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;">
|
||||
@@ -110,11 +490,11 @@ 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>
|
||||
|
||||
<!-- 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;">
|
||||
@@ -128,11 +508,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"
|
||||
@@ -153,11 +533,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>
|
||||
@@ -167,11 +547,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;">
|
||||
@@ -189,12 +569,207 @@ export async function initSettingsTab() {
|
||||
${t("eagleAutoSave")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Save Button -->
|
||||
<button class="wfm-btn wfm-btn-primary" id="wfm-settings-save" style="min-width:120px;">${t("saveSettings")}</button>
|
||||
`;
|
||||
|
||||
// --- Theme change handler ---
|
||||
document.getElementById("wfm-theme-grid")?.addEventListener("click", (e) => {
|
||||
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);
|
||||
// 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");
|
||||
});
|
||||
|
||||
// --- Language change handlers ---
|
||||
document.getElementById("wfm-settings-ui-lang")?.addEventListener("change", (e) => {
|
||||
const lang = e.target.value;
|
||||
@@ -361,6 +936,7 @@ export async function initSettingsTab() {
|
||||
eagleAutoSave: document.getElementById("wfm-settings-eagle-auto-save")?.checked || false,
|
||||
uiLang: getLang(),
|
||||
summaryLang: getSummaryLang(),
|
||||
theme: document.documentElement.getAttribute("data-theme") || "",
|
||||
};
|
||||
|
||||
saveLocalSettings(patch);
|
||||
|
||||
+148
-150
@@ -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,32 @@ 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",
|
||||
};
|
||||
const WF_PER_PAGE = 24;
|
||||
|
||||
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 +221,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 +245,18 @@ function renderModelFilters() {
|
||||
const container = document.getElementById("wfm-model-filters");
|
||||
if (!container) return;
|
||||
|
||||
const types = getAllModelTypes();
|
||||
const badges = getAllBadges();
|
||||
|
||||
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) => `<button class="wfm-filter-btn ${state.activeBadge === b ? "active" : ""}" data-filter="${escapeHtml(b)}">${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 +265,10 @@ function renderModelFilters() {
|
||||
|
||||
function filterWorkflows() {
|
||||
return state.workflows.filter((wf) => {
|
||||
if (state.activeModel === "FAVORITE") {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -297,22 +312,32 @@ function renderGrid() {
|
||||
if (filtered.length === 0) {
|
||||
grid.innerHTML =
|
||||
'<p class="wfm-placeholder">No workflows found</p>';
|
||||
updateWfPagination(0);
|
||||
return;
|
||||
}
|
||||
|
||||
if (state.viewMode === "table") {
|
||||
renderTableView(grid, filtered);
|
||||
updateWfPagination(0);
|
||||
return;
|
||||
}
|
||||
|
||||
// Thumbnail / Card view
|
||||
// Thumbnail / Card view with pagination
|
||||
const totalPages = Math.ceil(filtered.length / WF_PER_PAGE);
|
||||
if (state.currentPage >= totalPages) state.currentPage = totalPages - 1;
|
||||
if (state.currentPage < 0) state.currentPage = 0;
|
||||
const start = state.currentPage * WF_PER_PAGE;
|
||||
const pageItems = filtered.slice(start, start + WF_PER_PAGE);
|
||||
|
||||
updateWfPagination(totalPages);
|
||||
|
||||
grid.innerHTML = "";
|
||||
filtered.forEach((wf) => {
|
||||
pageItems.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 +382,23 @@ function renderGrid() {
|
||||
}
|
||||
}
|
||||
|
||||
function updateWfPagination(totalPages) {
|
||||
const container = document.getElementById("wfm-workflow-pagination");
|
||||
if (!container) return;
|
||||
if (totalPages <= 1) { container.innerHTML = ""; return; }
|
||||
container.innerHTML = `
|
||||
<button class="wfm-btn wfm-btn-sm" ${state.currentPage === 0 ? "disabled" : ""} data-page="prev">«</button>
|
||||
<span>${state.currentPage + 1} / ${totalPages}</span>
|
||||
<button class="wfm-btn wfm-btn-sm" ${state.currentPage >= totalPages - 1 ? "disabled" : ""} data-page="next">»</button>
|
||||
`;
|
||||
container.querySelector('[data-page="prev"]').addEventListener("click", () => {
|
||||
if (state.currentPage > 0) { state.currentPage--; renderGrid(); }
|
||||
});
|
||||
container.querySelector('[data-page="next"]').addEventListener("click", () => {
|
||||
if (state.currentPage < totalPages - 1) { state.currentPage++; renderGrid(); }
|
||||
});
|
||||
}
|
||||
|
||||
function renderTableView(grid, filtered) {
|
||||
const table = document.createElement("table");
|
||||
table.className = "wfm-table";
|
||||
@@ -376,7 +418,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" />`
|
||||
@@ -468,8 +510,9 @@ async function showSidePanel(wf, cardEl) {
|
||||
try {
|
||||
const data = await getRawWorkflow(wf.filename);
|
||||
if (badgeEl) {
|
||||
const fmt = comfyWorkflow.detectFormat(data);
|
||||
badgeEl.textContent = fmt === "ui" ? t("uiFormat") : t("apiFormat");
|
||||
const fmt = comfyWorkflow.detectFormat(data, wf.filename);
|
||||
const formatLabels = { ui: t("uiFormat"), api: t("apiFormat"), app: t("appFormat") };
|
||||
badgeEl.textContent = formatLabels[fmt] || fmt;
|
||||
badgeEl.className = "wfm-format-badge wfm-format-badge--" + fmt;
|
||||
}
|
||||
const jsonStr = JSON.stringify(data, null, 2);
|
||||
@@ -518,7 +561,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) {
|
||||
@@ -576,14 +619,13 @@ function refreshGroupSelects() {
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 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") },
|
||||
@@ -597,57 +639,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();
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
@@ -672,10 +677,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 = `
|
||||
@@ -688,23 +704,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>
|
||||
@@ -812,51 +814,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");
|
||||
}
|
||||
@@ -866,10 +857,10 @@ function openDetailModal(wf) {
|
||||
document.getElementById("wfm-detail-load").addEventListener("click", async () => {
|
||||
try {
|
||||
const wfData = await getRawWorkflow(wf.filename);
|
||||
await loadWorkflowIntoEditor(wfData, wf.filename);
|
||||
const loaded = await loadWorkflowIntoEditor(wfData, wf.filename);
|
||||
if (loaded === false) return;
|
||||
document.querySelector('.wfm-tab[data-tab="generate"]')?.click();
|
||||
closeModal();
|
||||
showToast(`${t("loaded")}: ${wf.filename}`, "success");
|
||||
} catch (err) {
|
||||
showToast(t("loadError") + ": " + err.message, "error");
|
||||
}
|
||||
@@ -1002,6 +993,17 @@ function openDetailModal(wf) {
|
||||
async function loadWorkflows() {
|
||||
try {
|
||||
state.workflows = await fetchWorkflows();
|
||||
|
||||
// Clean up stale group entries (deleted workflows)
|
||||
const validFiles = new Set(state.workflows.map(w => w.filename));
|
||||
let groupsDirty = false;
|
||||
for (const g of Object.keys(groups.data)) {
|
||||
const before = groups.data[g].length;
|
||||
groups.data[g] = groups.data[g].filter(fn => validFiles.has(fn));
|
||||
if (groups.data[g].length !== before) groupsDirty = true;
|
||||
}
|
||||
if (groupsDirty) groups.save();
|
||||
|
||||
renderModelFilters();
|
||||
renderGrid();
|
||||
} catch (err) {
|
||||
@@ -1058,6 +1060,7 @@ export function initWorkflowTab() {
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", () => {
|
||||
state.searchText = searchInput.value;
|
||||
state.currentPage = 0;
|
||||
renderGrid();
|
||||
});
|
||||
}
|
||||
@@ -1193,6 +1196,7 @@ export function initWorkflowTab() {
|
||||
// Toolbar: group filter dropdown
|
||||
document.getElementById("wfm-group-filter")?.addEventListener("change", (e) => {
|
||||
state.groupFilter = e.target.value;
|
||||
state.currentPage = 0;
|
||||
renderGrid();
|
||||
});
|
||||
|
||||
@@ -1201,9 +1205,9 @@ export function initWorkflowTab() {
|
||||
if (!state.selectedWf) return;
|
||||
try {
|
||||
const wfData = await getRawWorkflow(state.selectedWf.filename);
|
||||
await loadWorkflowIntoEditor(wfData, state.selectedWf.filename);
|
||||
const loaded = await loadWorkflowIntoEditor(wfData, state.selectedWf.filename);
|
||||
if (loaded === false) return;
|
||||
document.querySelector('.wfm-tab[data-tab="generate"]')?.click();
|
||||
showToast(`${t("loaded")}: ${state.selectedWf.filename}`, "success");
|
||||
} catch (err) {
|
||||
showToast(t("loadError") + ": " + err.message, "error");
|
||||
}
|
||||
@@ -1226,7 +1230,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) {
|
||||
@@ -1237,7 +1241,7 @@ export function initWorkflowTab() {
|
||||
badgeSettingsPanel.style.display = "none";
|
||||
return;
|
||||
}
|
||||
renderBadgeSettings();
|
||||
renderViewSettings();
|
||||
badgeSettingsPanel.style.display = "";
|
||||
});
|
||||
document.addEventListener("click", (e) => {
|
||||
@@ -1247,15 +1251,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
|
||||
|
||||
+398
-48
@@ -15,9 +15,12 @@
|
||||
</div>
|
||||
<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="settings">Settings</button>
|
||||
<button class="wfm-tab" data-tab="help">Help</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -47,15 +50,16 @@
|
||||
<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 id="wfm-workflow-pagination" class="wfm-pagination-inline"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wfm-workflow-area">
|
||||
@@ -128,6 +132,137 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Nodes Tab -->
|
||||
<section id="wfm-tab-nodes" class="wfm-tab-content">
|
||||
<!-- Sub-view toggle + Toolbar -->
|
||||
<div class="wfm-toolbar">
|
||||
<div class="wfm-toolbar-row" style="gap:8px;">
|
||||
<div class="wfm-nodes-subview-nav">
|
||||
<button class="wfm-nodes-subview-btn active" data-subview="browser">All Nodes</button>
|
||||
<button class="wfm-nodes-subview-btn" data-subview="sets">Node Sets</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Browser toolbar -->
|
||||
<div id="wfm-nodes-browser-toolbar" class="wfm-toolbar-row" style="gap:6px;flex-wrap:wrap;">
|
||||
<button class="wfm-filter-btn" id="wfm-nodes-fav-btn" title="Favorites">★</button>
|
||||
<input type="text" id="wfm-nodes-search" class="wfm-search-input" placeholder="Search nodes...">
|
||||
<select id="wfm-nodes-category-filter" class="wfm-select wfm-toolbar-select"><option value="">All Categories</option></select>
|
||||
<select id="wfm-nodes-package-filter" class="wfm-select wfm-toolbar-select"><option value="">All Packages</option></select>
|
||||
<select id="wfm-nodes-tag-filter" class="wfm-select wfm-toolbar-select"><option value="">All Tags</option></select>
|
||||
<select id="wfm-nodes-group-filter" class="wfm-select wfm-toolbar-select"><option value="">All Groups</option></select>
|
||||
<div class="wfm-view-btns">
|
||||
<button class="wfm-view-btn active" data-nodes-view="card" title="Card">☰</button>
|
||||
<button class="wfm-view-btn" data-nodes-view="table" title="Table">≡</button>
|
||||
</div>
|
||||
<span id="wfm-nodes-count" class="wfm-nodes-count"></span>
|
||||
<button id="wfm-nodes-refresh-btn" class="wfm-btn wfm-btn-sm">Refresh</button>
|
||||
<div id="wfm-nodes-pagination" class="wfm-pagination-inline"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Browser sub-view -->
|
||||
<div id="wfm-nodes-browser" class="wfm-workflow-area">
|
||||
<div id="wfm-nodes-grid" class="wfm-grid wfm-view-card">
|
||||
<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 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>
|
||||
<button class="wfm-nodes-side-tab-btn" data-side-tab="io">I/O Spec</button>
|
||||
<button class="wfm-nodes-side-tab-btn" data-side-tab="nodegroup">Groups</button>
|
||||
</div>
|
||||
<div id="wfm-nodes-side-details" class="wfm-nodes-side-content active" style="overflow-y:auto;padding:12px;">
|
||||
</div>
|
||||
<div id="wfm-nodes-side-io" class="wfm-nodes-side-content" style="display:none;overflow-y:auto;padding:12px;">
|
||||
</div>
|
||||
<div id="wfm-nodes-side-group" class="wfm-nodes-side-content" style="display:none;overflow-y:auto;padding:12px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Node Sets sub-view -->
|
||||
<div id="wfm-nodes-sets" class="wfm-workflow-area" style="display:none;">
|
||||
<div style="padding:8px 0;">
|
||||
<button id="wfm-node-set-create-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary">Create Node Set</button>
|
||||
</div>
|
||||
<div id="wfm-node-sets-grid" class="wfm-grid wfm-view-card">
|
||||
<p class="wfm-placeholder">No node sets yet.</p>
|
||||
</div>
|
||||
</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-group-filter" class="wfm-select wfm-toolbar-select"><option value="">All Groups</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>
|
||||
<div id="wfm-models-pagination" class="wfm-pagination-inline"></div>
|
||||
</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" style="display:none;">
|
||||
<div class="wfm-side-panel-header">
|
||||
<span id="wfm-models-panel-title" class="wfm-side-panel-title"></span>
|
||||
<button id="wfm-models-panel-close" class="wfm-side-panel-close">×</button>
|
||||
</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 -->
|
||||
@@ -144,53 +279,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>
|
||||
@@ -215,7 +354,7 @@
|
||||
<!-- 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;">
|
||||
<input type="number" id="wfm-gen-seed-value" class="wfm-input" value="-1" style="width:130px;">
|
||||
<select id="wfm-gen-seed-mode" class="wfm-select" style="width:auto;">
|
||||
<option value="random">Random</option>
|
||||
<option value="fixed">Fixed</option>
|
||||
@@ -232,14 +371,26 @@
|
||||
</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 -->
|
||||
<section id="wfm-tab-prompt" class="wfm-tab-content">
|
||||
<div class="wfm-prompt-split">
|
||||
<!-- Left: Assistant -->
|
||||
<div class="wfm-prompt-split-left">
|
||||
<div class="wfm-prompt-split-header">Assistant</div>
|
||||
<div class="wfm-prompt-split wfm-prompt-split-3col">
|
||||
<!-- Col 1: AI Assistant -->
|
||||
<div class="wfm-prompt-split-col">
|
||||
<div class="wfm-prompt-split-header">AI Assistant</div>
|
||||
<div class="wfm-ollama-assistant">
|
||||
<div class="wfm-ollama-controls">
|
||||
<select id="wfm-ollama-model" class="wfm-select" style="flex:1;min-width:120px;">
|
||||
@@ -275,30 +426,61 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Presets -->
|
||||
<div class="wfm-prompt-split-right">
|
||||
<!-- Col 2: Preset Editor -->
|
||||
<div class="wfm-prompt-split-col">
|
||||
<div class="wfm-prompt-split-header">Presets</div>
|
||||
<div class="wfm-preset-panel">
|
||||
<div style="display:flex;gap:6px;margin-bottom:10px;align-items:center;">
|
||||
<select id="wfm-preset-select" class="wfm-select" style="flex:1;">
|
||||
<option value="">New Preset (none selected)</option>
|
||||
</select>
|
||||
<button id="wfm-preset-apply-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary">Apply to GenerateUI</button>
|
||||
<button id="wfm-preset-delete-btn" class="wfm-btn wfm-btn-sm wfm-btn-danger">Delete</button>
|
||||
<button id="wfm-preset-apply-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary">GenUI Set</button>
|
||||
</div>
|
||||
<div class="wfm-form-group">
|
||||
<label>Preset Name</label>
|
||||
<input type="text" id="wfm-preset-name" class="wfm-input" placeholder="Enter preset name...">
|
||||
</div>
|
||||
<div class="wfm-form-group">
|
||||
<label>Category</label>
|
||||
<input type="text" id="wfm-preset-category" class="wfm-input" placeholder="e.g. Portrait, Landscape...">
|
||||
</div>
|
||||
<div class="wfm-form-group" style="flex:1;min-height:0;display:flex;flex-direction:column;">
|
||||
<label>Positive Prompt</label>
|
||||
<textarea id="wfm-preset-pos" class="wfm-textarea" rows="4" placeholder="Positive prompt..."></textarea>
|
||||
<textarea id="wfm-preset-pos" class="wfm-textarea" style="flex:1;" placeholder="Positive prompt..."></textarea>
|
||||
</div>
|
||||
<div class="wfm-form-group">
|
||||
<div class="wfm-form-group" style="flex:1;min-height:0;display:flex;flex-direction:column;">
|
||||
<label>Negative Prompt</label>
|
||||
<textarea id="wfm-preset-neg" class="wfm-textarea" rows="3" placeholder="Negative prompt..."></textarea>
|
||||
<textarea id="wfm-preset-neg" class="wfm-textarea" style="flex:1;" placeholder="Negative prompt..."></textarea>
|
||||
</div>
|
||||
<button id="wfm-preset-save-btn" class="wfm-btn wfm-btn-primary" style="width:100%;">Save Preset</button>
|
||||
<div style="display:flex; gap:4px;">
|
||||
<button id="wfm-preset-copy-pos-btn" class="wfm-btn" style="flex:2;" title="Copy Positive Prompt">PP Copy</button>
|
||||
<button id="wfm-preset-copy-neg-btn" class="wfm-btn" style="flex:2;" title="Copy Negative Prompt">NP Copy</button>
|
||||
<button id="wfm-preset-save-btn" class="wfm-btn wfm-btn-primary" style="flex:1;">Save</button>
|
||||
</div>
|
||||
<div style="display:flex; gap:4px; margin-top:4px;">
|
||||
<select id="wfm-preset-group-select" class="wfm-select" style="flex:1;">
|
||||
<option value="">Select group...</option>
|
||||
</select>
|
||||
<button id="wfm-preset-add-to-group-btn" class="wfm-btn wfm-btn-sm">Add to Group</button>
|
||||
<button id="wfm-preset-new-group-btn" class="wfm-btn wfm-btn-sm">+ Group</button>
|
||||
<button id="wfm-preset-del-group-btn" class="wfm-btn wfm-btn-sm wfm-btn-danger" title="Delete selected group">Del Group</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Col 3: Preset Manager (list, favorites, groups) -->
|
||||
<div class="wfm-prompt-split-col">
|
||||
<div class="wfm-prompt-split-header">Preset Manager</div>
|
||||
<div class="wfm-preset-manager">
|
||||
<div class="wfm-pm-tabs">
|
||||
<button class="wfm-pm-tab active" data-pmtab="all">All</button>
|
||||
<button class="wfm-pm-tab" data-pmtab="favorites">★</button>
|
||||
<button class="wfm-pm-tab" data-pmtab="groups">Groups</button>
|
||||
</div>
|
||||
<div class="wfm-pm-search">
|
||||
<input type="text" id="wfm-pm-search-input" class="wfm-input" placeholder="Search presets...">
|
||||
</div>
|
||||
<div id="wfm-pm-list" class="wfm-pm-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -309,6 +491,174 @@
|
||||
<div class="wfm-settings-container">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Help & Support Tab -->
|
||||
<section id="wfm-tab-help" class="wfm-tab-content">
|
||||
<div class="wfm-help-container">
|
||||
<!-- Help Section -->
|
||||
<div class="wfm-help-section">
|
||||
<h2 class="wfm-help-section-title" id="wfm-help-manual-title">Features</h2>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3 id="wfm-help-about-title">About</h3>
|
||||
<p id="wfm-help-about-desc">A centralized control UI for managing ComfyUI workflow JSON files, generating images via API, assisting with prompt creation, and browsing/organizing nodes.</p>
|
||||
<ul>
|
||||
<li id="wfm-help-about-1">Install via ComfyUI Manager or git clone to custom_nodes</li>
|
||||
<li id="wfm-help-about-2">Launch from the Workflow Studio button in the ComfyUI toolbar, or open http://127.0.0.1:8188/wfm</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3>Workflow Tab</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-wf-1">Switch between Thumbnail, Card, and Table view modes</li>
|
||||
<li id="wfm-help-wf-2">Search, category filter, favorites filter, and group filter</li>
|
||||
<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, 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>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3>GenerateUI Tab</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-gen-1">Connect/disconnect ComfyUI and check connection status</li>
|
||||
<li id="wfm-help-gen-2">Load workflows from Workflow tab (App format .app.json not supported)</li>
|
||||
<li id="wfm-help-gen-3">3-tab layout — Input (Prompt + Image), Model, Settings — each with a Raw JSON column for instant preview and direct editing</li>
|
||||
<li id="wfm-help-gen-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</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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3>Prompt Tab</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-prompt-1">AI assistant (Ollama): model selection, chat for prompt consultation, image attachment (vision models)</li>
|
||||
<li id="wfm-help-prompt-2">Apply AI responses to GenerateUI prompts</li>
|
||||
<li id="wfm-help-prompt-3">Translation: JA↔EN, ZH↔EN</li>
|
||||
<li id="wfm-help-prompt-4">Preset management: create, edit, positive/negative prompt clipboard copy (PP/NP)</li>
|
||||
<li id="wfm-help-prompt-5">Preset Manager: browse all presets, favorites, and group-based filtering</li>
|
||||
<li id="wfm-help-prompt-6">Group management: create groups, assign/remove presets, delete groups</li>
|
||||
<li id="wfm-help-prompt-7">GenUI Set: apply preset prompts directly to GenerateUI</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3>Settings Tab</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-settings-1">UI language and summary language</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">All sections are collapsible accordion panels</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3>Nodes Tab</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-nodes-1">Node Browser: search by name/description/alias/tag, filter by category, package, tag, group, favorites</li>
|
||||
<li id="wfm-help-nodes-2">Card and Table view modes with pagination</li>
|
||||
<li id="wfm-help-nodes-3">Favorite nodes and add custom tags for organization</li>
|
||||
<li id="wfm-help-nodes-4">Create, rename, delete node groups and assign/remove nodes</li>
|
||||
<li id="wfm-help-nodes-5">Side panel: Details (class name, package, category, description, flags), I/O Spec (inputs/outputs with types and defaults), Groups management</li>
|
||||
<li id="wfm-help-nodes-6">Node Sets: create reusable node collections with descriptions, tags, and link definitions between nodes</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, and favorites filter</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>
|
||||
</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: All / ★ Favorites / Groups sub-tabs; ★ shown for favorites in All view</li>
|
||||
<li id="wfm-help-sidepanel-3">Nodes tab: All / ★ Favorites / Groups / Sets sub-tabs; ★ shown for favorites in All view</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>
|
||||
<li id="wfm-help-sidepanel-7">Drag & drop prompt presets to create WFS_PromptText nodes with positive/negative prompts</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3 id="wfm-help-shortcuts-title">Keyboard Shortcuts</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-shortcuts-1">Escape: Close modal/panel</li>
|
||||
<li id="wfm-help-shortcuts-2">Enter: Confirm rename, send chat</li>
|
||||
<li id="wfm-help-shortcuts-3">Shift+Enter: New line in chat</li>
|
||||
<li id="wfm-help-shortcuts-4">Double-click: Open detail modal</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wfm-help-card">
|
||||
<h3 id="wfm-help-trouble-title">Troubleshooting</h3>
|
||||
<ul>
|
||||
<li id="wfm-help-trouble-1">Cannot connect to ComfyUI: Check if ComfyUI can generate images, verify URL in Settings, try refreshing or restarting</li>
|
||||
<li id="wfm-help-trouble-2">Cannot connect to Ollama: Use connection test button, check if Ollama is running and models are downloaded</li>
|
||||
<li id="wfm-help-trouble-3">Workflows not showing: Click refresh button, check if loadable in ComfyUI, try restarting browser/ComfyUI</li>
|
||||
<li id="wfm-help-trouble-4">Image generation fails: Check if specified models exist in ComfyUI, verify connection, try restarting</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Support Section -->
|
||||
<div class="wfm-help-section">
|
||||
<h2 class="wfm-help-section-title" id="wfm-help-support-title">Support</h2>
|
||||
|
||||
<div class="wfm-help-card wfm-help-support-card">
|
||||
<p id="wfm-help-support-desc">If you find this plugin useful, please consider supporting its development!</p>
|
||||
|
||||
<div class="wfm-help-links">
|
||||
<a href="https://github.com/ketle-man/ComfyUI-Workflow-Studio" target="_blank" rel="noopener noreferrer" class="wfm-help-link wfm-help-link-github">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
<div>
|
||||
<div class="wfm-help-link-title">GitHub</div>
|
||||
<div class="wfm-help-link-desc" id="wfm-help-github-desc">Report issues, request features, and contribute</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://ko-fi.com/ninnin90033" target="_blank" rel="noopener noreferrer" class="wfm-help-link wfm-help-link-kofi">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
|
||||
<div>
|
||||
<div class="wfm-help-link-title">Ko-fi</div>
|
||||
<div class="wfm-help-link-desc" id="wfm-help-kofi-desc">Buy me a coffee to support development</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="wfm-help-thanks" id="wfm-help-thanks">Thank you for using Workflow Studio!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Workflow Detail Modal -->
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+247
-102
@@ -1,4 +1,5 @@
|
||||
import { app } from "../../scripts/app.js";
|
||||
import { togglePanel, getNodeSetsIcon, NODE_SETS_TOOLTIP, saveSelectedAsNodeSet } from "./node_sets_menu.js";
|
||||
|
||||
const BUTTON_TOOLTIP = "Launch Workflow Studio (Shift+Click opens in new window)";
|
||||
const SNAPSHOT_TOOLTIP = "Save workflow canvas image as thumbnail";
|
||||
@@ -167,8 +168,101 @@ const captureCanvasSnapshot = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const showSaveDialog = (defaultName) => {
|
||||
return new Promise((resolve) => {
|
||||
// Remove existing dialog if any
|
||||
const existing = document.getElementById("wfm-save-dialog-overlay");
|
||||
if (existing) existing.remove();
|
||||
|
||||
const overlay = document.createElement("div");
|
||||
overlay.id = "wfm-save-dialog-overlay";
|
||||
Object.assign(overlay.style, {
|
||||
position: "fixed",
|
||||
inset: "0",
|
||||
background: "rgba(0,0,0,0.5)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: "99999",
|
||||
});
|
||||
|
||||
const dialog = document.createElement("div");
|
||||
Object.assign(dialog.style, {
|
||||
background: "var(--comfy-menu-bg, #2a2a2a)",
|
||||
border: "1px solid var(--border-color, #4e4e4e)",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 20px",
|
||||
minWidth: "360px",
|
||||
maxWidth: "480px",
|
||||
boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
|
||||
color: "var(--input-text, #ddd)",
|
||||
fontFamily: "sans-serif",
|
||||
});
|
||||
|
||||
const stem = defaultName.replace(/\.json$/, "");
|
||||
|
||||
dialog.innerHTML = `
|
||||
<div style="font-size:14px;font-weight:bold;margin-bottom:12px;">Save Workflow</div>
|
||||
<label style="font-size:12px;color:var(--descrip-text,#999);display:block;margin-bottom:4px;">Filename</label>
|
||||
<input type="text" id="wfm-save-dialog-input" value="${stem}" style="
|
||||
width:100%;padding:8px 10px;font-size:13px;
|
||||
background:var(--comfy-input-bg,#1a1a1a);
|
||||
border:1px solid var(--border-color,#4e4e4e);
|
||||
border-radius:4px;color:var(--input-text,#ddd);
|
||||
outline:none;box-sizing:border-box;
|
||||
" />
|
||||
<div style="display:flex;gap:8px;margin-top:14px;justify-content:flex-end;">
|
||||
<button id="wfm-save-dialog-cancel" style="
|
||||
padding:6px 16px;font-size:12px;border-radius:4px;cursor:pointer;
|
||||
background:transparent;border:1px solid var(--border-color,#4e4e4e);
|
||||
color:var(--input-text,#ddd);
|
||||
">Cancel</button>
|
||||
<button id="wfm-save-dialog-ok" style="
|
||||
padding:6px 16px;font-size:12px;border-radius:4px;cursor:pointer;
|
||||
background:var(--p-button-background,#4a9eff);border:none;
|
||||
color:#fff;font-weight:bold;
|
||||
">Save</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
overlay.appendChild(dialog);
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
const input = dialog.querySelector("#wfm-save-dialog-input");
|
||||
const okBtn = dialog.querySelector("#wfm-save-dialog-ok");
|
||||
const cancelBtn = dialog.querySelector("#wfm-save-dialog-cancel");
|
||||
|
||||
const cleanup = () => overlay.remove();
|
||||
|
||||
const confirm = () => {
|
||||
const val = input.value.trim();
|
||||
cleanup();
|
||||
if (val) {
|
||||
resolve(val.endsWith(".json") ? val : val + ".json");
|
||||
} else {
|
||||
resolve(null);
|
||||
}
|
||||
};
|
||||
|
||||
const cancel = () => { cleanup(); resolve(null); };
|
||||
|
||||
okBtn.addEventListener("click", confirm);
|
||||
cancelBtn.addEventListener("click", cancel);
|
||||
overlay.addEventListener("click", (e) => { if (e.target === overlay) cancel(); });
|
||||
input.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") { e.preventDefault(); confirm(); }
|
||||
if (e.key === "Escape") cancel();
|
||||
});
|
||||
|
||||
input.focus();
|
||||
input.select();
|
||||
});
|
||||
};
|
||||
|
||||
const saveCanvasToWorkflowStudio = async () => {
|
||||
const filename = getWorkflowFilename();
|
||||
const defaultFilename = getWorkflowFilename();
|
||||
const filename = await showSaveDialog(defaultFilename);
|
||||
if (!filename) return; // cancelled
|
||||
|
||||
try {
|
||||
showNotification("Capturing workflow image...", "info");
|
||||
@@ -383,15 +477,47 @@ const createSnapshotButton = async () => {
|
||||
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;
|
||||
if (!settingsGroup?.element?.parentElement) {
|
||||
// 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 settings button group.");
|
||||
console.warn("Workflow Studio: unable to locate the ComfyUI menu container.");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -401,109 +527,128 @@ const attachTopMenuButton = async (attempt = 0) => {
|
||||
|
||||
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);
|
||||
const buttonGroup = new ComfyButtonGroup(wfmButton, snapshotButton, nodeSetsButton);
|
||||
buttonGroup.element.classList.add(BUTTON_GROUP_CLASS);
|
||||
|
||||
settingsGroup.element.before(buttonGroup.element);
|
||||
};
|
||||
|
||||
const createExtensionObject = (useActionBar) => {
|
||||
const extensionObj = {
|
||||
name: "WorkflowStudio.TopMenu",
|
||||
async setup() {
|
||||
if (!useActionBar) {
|
||||
console.log("Workflow Studio: using legacy button attachment (frontend version < 1.33.9)");
|
||||
await attachTopMenuButton();
|
||||
} else {
|
||||
console.log("Workflow Studio: using actionBarButtons API (frontend version >= 1.33.9)");
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
};
|
||||
injectStyles();
|
||||
|
||||
const replaceButtonIcon = () => {
|
||||
// WFM launch button
|
||||
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";
|
||||
}
|
||||
});
|
||||
|
||||
// Snapshot button
|
||||
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";
|
||||
}
|
||||
});
|
||||
|
||||
if (wfmButtons.length === 0) {
|
||||
requestAnimationFrame(replaceButtonIcon);
|
||||
}
|
||||
};
|
||||
requestAnimationFrame(replaceButtonIcon);
|
||||
},
|
||||
};
|
||||
|
||||
if (useActionBar) {
|
||||
extensionObj.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,
|
||||
},
|
||||
];
|
||||
if (settingsGroup?.element?.parentElement) {
|
||||
settingsGroup.element.before(buttonGroup.element);
|
||||
} else if (legacyContainer) {
|
||||
legacyContainer.prepend(buttonGroup.element);
|
||||
}
|
||||
|
||||
return extensionObj;
|
||||
};
|
||||
|
||||
(async () => {
|
||||
const useActionBar = await supportsActionBarButtons();
|
||||
const extensionObj = createExtensionObject(useActionBar);
|
||||
app.registerExtension(extensionObj);
|
||||
})();
|
||||
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 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";
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user