Compare commits

...
1 Commits
Author SHA1 Message Date
ketle-manandClaude Sonnet 4.6 823f1ebd54 v0.3.3: Wildcard support panel & Impact Pack integration
- Add wildcard input toolbar to Prompt tab (right column) with one-click
  syntax buttons ({|}, {n$|}, __|__, <lora:>, etc.) and selection wrapping
- Add wildcard file manager: create/edit/delete .txt/.yaml files stored in
  user/default/Workflow-Studio/wildcard/
- Tab-ify Prompt tab center pane (Presets / Preset Manager toggle)
- New wildcard CRUD API (GET/POST /api/wfm/wildcards/*)
- New Wildcard Integration section in Settings tab: auto-detects
  ComfyUI-Impact-Pack and creates a directory junction (Windows) or symlink
  (other OS) between WFS wildcard dir and Impact Pack wildcards dir; existing
  files are migrated automatically; link can be removed via UI

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-28 21:02:10 +09:00
12 changed files with 1236 additions and 51 deletions
+97
View File
@@ -1,5 +1,102 @@
# DEVLOG - ComfyUI-Workflow-Studio
## 2026-04-28: v0.3.3 Promptタブ — ワイルドカード支援パネル・Impact Packシンボリックリンク連携
### 概要
- Promptタブのレイアウトを3カラム構成に変更
- 中央ペイン(Col2): Presets / Preset Manager をタブ切り替え化
- 右ペイン(Col3): ワイルドカード支援パネルを新設
- ワイルドカードファイル管理(txt/yaml)の CRUD API を追加
- Settingsタブに Wildcard Integration セクションを追加(Impact Pack ジャンクション/シンボリックリンク連携)
### 変更内容
#### `py/config.py`
- `COMFYUI_ROOT = _COMFYUI_ROOT` を追加(外部モジュールから参照可能に)
- `WILDCARD_DIR = DATA_DIR / "wildcard"` を追加
#### `py/services/wildcard_service.py` — 新規作成
- `WildcardService(wildcard_dir)` クラス
- `list_wildcards()` — txt/yaml/yml ファイル一覧を返す
- `get_content(filename)` — ファイル内容を取得
- `save_file(filename, content)` — ファイルを保存(新規/上書き)
- `delete_file(filename)` — ファイルを削除
- `_safe_path(filename)` — `..` / スラッシュ / 拡張子チェックによるパストラバーサル防止
- Impact Pack 連携メソッド
- `find_impact_pack_wildcards(comfyui_root)` — `custom_nodes/` 以下で "impact-pack" ディレクトリを検索
- `get_link_status(comfyui_root)` — インストール状況・リンク状態・パスを返す dict
- `create_link(comfyui_root)` — 既存 WFS ファイルを Impact Pack dir へ移行後、ジャンクション/シンボリックリンクを作成
- `remove_link()` — ジャンクション/シンボリックリンクを削除して通常ディレクトリに復元
- プラットフォームヘルパー
- `_is_junction(path)` — Windows の `GetFileAttributesW` + `FILE_ATTRIBUTE_REPARSE_POINT` でジャンクション検出(`os.path.islink()` では検出不可)
- `_create_junction_or_symlink(link, target)` — Windows は `mklink /J`、他 OS は `os.symlink`
- `_remove_junction_or_symlink(path)` — Windows は `rmdir`(ジャンクションを削除、中身に影響なし)、他は `os.unlink`
- コンストラクタ: `_is_junction()` で事前確認し、ジャンクション/シンボリックリンクの場合は mkdir をスキップ
#### `py/routes/wildcard_routes.py` — 新規作成
- `GET /api/wfm/wildcards` — ファイル一覧
- `GET /api/wfm/wildcards/content?filename=` — ファイル内容取得
- `POST /api/wfm/wildcards/save` — ファイル保存
- `POST /api/wfm/wildcards/delete` — ファイル削除
- `GET /api/wfm/wildcards/link-status` — Impact Pack リンク状態取得
- `POST /api/wfm/wildcards/create-link` — ジャンクション/シンボリックリンク作成(移行ファイルリストを返す)
- `POST /api/wfm/wildcards/remove-link` — リンク解除
#### `py/wfm.py`
- `wildcard_routes.setup_routes(app)` を追加
#### `templates/index.html`
- Promptタブ Col2 をタブ切り替え構造(`.wfm-prompt-center-tabnav` + `.wfm-prompt-center-pane`)に変更
- Promptタブ Col3 にワイルドカード支援パネル(`.wfm-wc-panel`)を新設
- ツールバー: `{|}`, `|`, `__`, `:`, `;`, `$`, `<lora:>`, `[]`, `{n$|}`, ファイルピッカーボタン
- プロンプトテキストエリア(`.wfm-wc-prompt-ta`)
- ファイル管理セクション(ファイル一覧 + インラインエディタ)
- Helpタブ: `wfm-help-prompt-8`、`wfm-help-prompt-9`、`wfm-help-settings-10` を追加
#### `static/js/prompt-tab.js`
- ワイルドカード API ヘルパー: `wcFetchFiles()`、`wcFetchContent()`、`wcSaveFile()`、`wcDeleteFile()`
- `wcInsertAtCursor(textarea, open, close)` — 選択テキストをラップ、または `open+close` を挿入してカーソルを `open` の末尾に移動
- `wcRenderFileList()`、`wcOpenEditor()`、`wcCloseEditor()`、`wcRefreshFiles()`、`wcUpdateFilePicker()`
- `initPromptTab()` に追加:
- 中央ペインのタブ切り替えハンドラ
- ワイルドカードツールバーボタン(`data-wc-open` / `data-wc-close` 属性で制御)
- Loraボタン: `<lora::1:LBW=;>` を挿入してカーソル位置調整
- `{n$|}` ボタン: `prompt()` で n を入力し `{n$|}` を挿入
- ファイルピッカー(ポップアップ型、クリックで `__filename__` 挿入)
- ファイルマネージャのイベントハンドラ(新規作成・保存・削除)
#### `static/js/settings-tab.js`
- Data Management セクションの直後に **Wildcard Integration** `<details>` セクションを追加
- セクション展開時に `GET /api/wfm/wildcards/link-status` を呼び出して動的 UI をレンダリング
- Impact Pack 未インストール: インストール誘導メッセージ + GitHub リンク
- インストール済み・リンクなし: Impact Pack パス表示 + 「リンクを作成」ボタン(移行ファイル名を表示)
- リンク済み: リンク先パス表示 + 「リンクを解除」ボタン
#### `static/js/app.js`
- `wfm-help-prompt-8`、`wfm-help-prompt-9`、`wfm-help-settings-10` の ID マッピングを追加
#### `static/js/i18n.js`
- `helpPrompt8`、`helpPrompt9`、`helpSettings10` を EN/JA/ZH に追加
#### `static/css/main.css`
- `.wfm-prompt-center-tabnav`、`.wfm-prompt-center-tab`、`.wfm-prompt-center-pane` — 中央ペインタブ UI
- `.wfm-wc-panel`、`.wfm-wc-toolbar`、`.wfm-wc-btn`、`.wfm-wc-prompt-ta` — ワイルドカードパネル
- `.wfm-wc-file-picker-wrap`、`.wfm-wc-file-picker`、`.wfm-wc-picker-item` — ファイルピッカー
- `.wfm-wc-files-section`、`.wfm-wc-file-list`、`.wfm-wc-file-item`、`.wfm-wc-editor` — ファイルマネージャ
---
## 2026-04-28: v0.3.2 生成UIタブ — Checkpoint Batch・Seed UIレイアウト修正
### 概要
+11 -2
View File
@@ -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.
![Workflow Studio](https://img.shields.io/badge/ComfyUI-Custom_Node-blue)
![Version](https://img.shields.io/badge/version-0.3.2-green)
![Version](https://img.shields.io/badge/version-0.3.3-green)
## Screenshots
@@ -63,7 +63,7 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
- **Eagle integration** — auto-save generated images to [Eagle](https://eagle.cool/) with metadata
### Prompt Tab
- **3-column layout** — AI Assistant, Presets editor, and Preset Manager displayed side-by-side
- **3-column layout** — AI Assistant (left), Presets/Preset Manager tab-panel (center), Wildcard support (right)
- **AI chat assistant** — powered by [Ollama](https://ollama.com/), generate and refine prompts interactively
- **Image attachment** — attach reference images for vision-capable models
- **Translation** — JA/EN/ZH translation buttons for multilingual prompt creation
@@ -72,6 +72,8 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
- **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
- **Wildcard input toolbar** — one-click buttons to insert `{|}`, `{n$|}`, `__|__`, `<lora::1:LBW=;>` and other wildcard syntax; wraps selected text when applicable
- **Wildcard file manager** — create, view, and edit `.txt` / `.yaml` wildcard files stored in `user/default/Workflow-Studio/wildcard/`; click a filename in the file picker to insert `__filename__` at cursor
### Settings Tab
- **2-column layout** — left column for all settings; right column shows the Theme panel fixed in place (sticky)
@@ -84,6 +86,7 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
- **Ollama connection** — configure Ollama server URL
- **Default workflow** — set a workflow to auto-load on startup
- **Data Management** — export all plugin data (settings, metadata, prompts, etc.) to a single JSON file; import to restore data (useful when migrating or reinstalling)
- **Wildcard Integration** — link the WFS wildcard directory to ComfyUI-Impact-Pack's `wildcards/` directory (directory junction on Windows, symlink on other OS); existing WFS wildcard files are automatically migrated; requires [ComfyUI-Impact-Pack](https://github.com/ltdrdata/ComfyUI-Impact-Pack)
- **Language** — English / Japanese / Chinese
### Gallery Tab (v0.3.1)
@@ -215,6 +218,12 @@ Click the **camera icon** (next to the W button) in ComfyUI's top bar to capture
## Changelog
### v0.3.3
- **Wildcard support panel** — new right column in the Prompt tab with a one-click toolbar for inserting wildcard syntax (`{|}`, `{n$|}`, `__|__`, `:`, `;`, `$`, `<lora::1:LBW=;>`, `[]`, single/multi pick) and wrapping selected text; dedicated prompt textarea and wildcard file picker (click to insert `__filename__`)
- **Wildcard file manager** — create, view, edit, and delete `.txt` / `.yaml` wildcard files stored in `user/default/Workflow-Studio/wildcard/`; editor opens inline with filename input and save/cancel controls
- **Preset/Preset Manager tab switch** — the center pane of the Prompt tab is now a two-tab panel (Presets / Preset Manager) to reclaim horizontal space for the new wildcard panel
- **Wildcard Integration setting** — new accordion section in Settings tab; auto-detects ComfyUI-Impact-Pack; when installed, provides a button to create a directory junction (Windows) or symlink (other OS) from the WFS wildcard directory to Impact Pack's `wildcards/` directory; existing WFS files are migrated automatically; a Remove Link button reverses the operation
### v0.3.2
- **Checkpoint Batch** — new panel in the GenerateUI right column (below Seed, above results); enable via checkbox to auto-generate once per checkpoint model; filter included/excluded subfolders by comma-separated names (empty = all checkpoints); real-time preview of matched model count; amber progress bar shows current model name and index; Stop button aborts the loop after the current generation completes; failed models are counted and reported in the summary toast
- **Seed layout fix** — seed value input and mode selector (Random / Fixed / Increment / Decrement) now stacked vertically so neither is clipped in narrow panels
+2
View File
@@ -13,6 +13,7 @@ STATIC_DIR = PLUGIN_DIR / "static"
# ComfyUI root is custom_nodes/../../ = two levels up
_COMFYUI_ROOT = PLUGIN_DIR.parent.parent
COMFYUI_ROOT = _COMFYUI_ROOT # exposed for external use
# Data directory: prefer ComfyUI's user/default/Workflow-Studio/, fallback to plugin data/
_COMFYUI_USER_DEFAULT = _COMFYUI_ROOT / "user" / "default"
@@ -67,3 +68,4 @@ 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"
WILDCARD_DIR = DATA_DIR / "wildcard"
+98
View File
@@ -0,0 +1,98 @@
"""Wildcard file management API routes."""
import asyncio
import logging
from aiohttp import web
from ..config import DATA_DIR, COMFYUI_ROOT
from ..services.wildcard_service import WildcardService
logger = logging.getLogger(__name__)
_service = WildcardService(DATA_DIR / "wildcard")
def setup_routes(app: web.Application):
app.router.add_get("/api/wfm/wildcards", handle_list)
app.router.add_get("/api/wfm/wildcards/content", handle_get_content)
app.router.add_post("/api/wfm/wildcards/save", handle_save)
app.router.add_post("/api/wfm/wildcards/delete", handle_delete)
app.router.add_get("/api/wfm/wildcards/link-status", handle_link_status)
app.router.add_post("/api/wfm/wildcards/create-link", handle_create_link)
app.router.add_post("/api/wfm/wildcards/remove-link", handle_remove_link)
async def handle_list(request: web.Request) -> web.Response:
try:
result = await asyncio.to_thread(_service.list_wildcards)
return web.json_response(result)
except Exception as e:
logger.error("Error listing wildcards: %s", e)
return web.json_response({"error": str(e)}, status=500)
async def handle_get_content(request: web.Request) -> web.Response:
filename = request.rel_url.query.get("filename", "")
try:
content = await asyncio.to_thread(_service.get_content, filename)
return web.json_response({"content": content})
except FileNotFoundError:
return web.json_response({"error": "not found"}, status=404)
except Exception as e:
logger.error("Error getting wildcard content: %s", e)
return web.json_response({"error": str(e)}, status=500)
async def handle_save(request: web.Request) -> web.Response:
try:
body = await request.json()
filename = body.get("filename", "")
content = body.get("content", "")
result = await asyncio.to_thread(_service.save_file, filename, content)
return web.json_response({"status": "ok", "file": result})
except Exception as e:
logger.error("Error saving wildcard: %s", e)
return web.json_response({"error": str(e)}, status=500)
async def handle_delete(request: web.Request) -> web.Response:
try:
body = await request.json()
filename = body.get("filename", "")
await asyncio.to_thread(_service.delete_file, filename)
return web.json_response({"status": "ok"})
except Exception as e:
logger.error("Error deleting wildcard: %s", e)
return web.json_response({"error": str(e)}, status=500)
async def handle_link_status(request: web.Request) -> web.Response:
try:
result = await asyncio.to_thread(_service.get_link_status, COMFYUI_ROOT)
return web.json_response(result)
except Exception as e:
logger.error("Error getting wildcard link status: %s", e)
return web.json_response({"error": str(e)}, status=500)
async def handle_create_link(request: web.Request) -> web.Response:
try:
result = await asyncio.to_thread(_service.create_link, COMFYUI_ROOT)
return web.json_response({"status": "ok", **result})
except RuntimeError as e:
return web.json_response({"error": str(e)}, status=400)
except Exception as e:
logger.error("Error creating wildcard link: %s", e)
return web.json_response({"error": str(e)}, status=500)
async def handle_remove_link(request: web.Request) -> web.Response:
try:
await asyncio.to_thread(_service.remove_link)
return web.json_response({"status": "ok"})
except RuntimeError as e:
return web.json_response({"error": str(e)}, status=400)
except Exception as e:
logger.error("Error removing wildcard link: %s", e)
return web.json_response({"error": str(e)}, status=500)
+185
View File
@@ -0,0 +1,185 @@
"""Wildcard file management service."""
import logging
import os
import platform
import shutil
import subprocess
from pathlib import Path
logger = logging.getLogger(__name__)
ALLOWED_EXTS = {"txt", "yaml", "yml"}
class WildcardService:
def __init__(self, wildcard_dir: Path):
self.wildcard_dir = wildcard_dir
# Only mkdir if it is a real directory (not a junction/symlink)
if not self.wildcard_dir.exists() and not self._is_junction(self.wildcard_dir):
self.wildcard_dir.mkdir(parents=True, exist_ok=True)
# ------------------------------------------------------------------
# File CRUD
# ------------------------------------------------------------------
def list_wildcards(self) -> list[dict]:
"""Return sorted list of wildcard files (follows junction/symlink)."""
if not self.wildcard_dir.exists():
return []
files = []
for path in sorted(self.wildcard_dir.iterdir()):
if path.is_file() and path.suffix.lstrip(".").lower() in ALLOWED_EXTS:
files.append({
"name": path.stem,
"filename": path.name,
"ext": path.suffix.lstrip(".").lower(),
"size": path.stat().st_size,
})
return files
def get_content(self, filename: str) -> str:
path = self._safe_path(filename)
if path is None:
raise ValueError(f"Invalid filename: {filename}")
if not path.is_file():
raise FileNotFoundError(f"File not found: {filename}")
return path.read_text(encoding="utf-8")
def save_file(self, filename: str, content: str) -> dict:
path = self._safe_path(filename)
if path is None:
raise ValueError(f"Invalid filename: {filename}")
path.write_text(content, encoding="utf-8")
return {
"name": path.stem,
"filename": path.name,
"ext": path.suffix.lstrip(".").lower(),
"size": path.stat().st_size,
}
def delete_file(self, filename: str) -> None:
path = self._safe_path(filename)
if path is None:
raise ValueError(f"Invalid filename: {filename}")
if path.is_file():
path.unlink()
def _safe_path(self, filename: str) -> Path | None:
if not filename or ".." in filename or "/" in filename or "\\" in filename:
return None
ext = Path(filename).suffix.lstrip(".").lower()
if ext not in ALLOWED_EXTS:
return None
return self.wildcard_dir / filename
# ------------------------------------------------------------------
# Impact Pack integration
# ------------------------------------------------------------------
@staticmethod
def find_impact_pack_wildcards(comfyui_root: Path) -> Path | None:
"""Return Impact Pack wildcards directory path, or None if not installed."""
custom_nodes = comfyui_root / "custom_nodes"
if not custom_nodes.is_dir():
return None
for d in custom_nodes.iterdir():
if d.is_dir() and "impact-pack" in d.name.lower():
wildcards = d / "wildcards"
if wildcards.is_dir():
return wildcards
return None
def get_link_status(self, comfyui_root: Path) -> dict:
"""Return current Impact Pack integration status."""
impact_dir = self.find_impact_pack_wildcards(comfyui_root)
is_linked = self._is_junction(self.wildcard_dir) or self.wildcard_dir.is_symlink()
resolved_target = None
if is_linked:
try:
resolved_target = str(self.wildcard_dir.resolve())
except Exception:
pass
return {
"impact_pack_installed": impact_dir is not None,
"impact_pack_wildcards_dir": str(impact_dir) if impact_dir else None,
"wfs_wildcard_dir": str(self.wildcard_dir),
"is_linked": is_linked,
"link_target": resolved_target,
}
def create_link(self, comfyui_root: Path) -> dict:
"""Replace WFS wildcard dir with a junction/symlink → Impact Pack wildcards."""
impact_dir = self.find_impact_pack_wildcards(comfyui_root)
if impact_dir is None:
raise RuntimeError("ComfyUI-Impact-Pack is not installed.")
if self._is_junction(self.wildcard_dir) or self.wildcard_dir.is_symlink():
raise RuntimeError("Link already exists.")
# Migrate existing WFS files to Impact Pack dir
migrated: list[str] = []
if self.wildcard_dir.is_dir():
for f in self.wildcard_dir.iterdir():
if f.is_file():
dest = impact_dir / f.name
if not dest.exists():
shutil.copy2(str(f), str(dest))
migrated.append(f.name)
shutil.rmtree(str(self.wildcard_dir))
# Create junction (Windows) or symlink (others)
self._create_junction_or_symlink(self.wildcard_dir, impact_dir)
logger.info("Wildcard link created: %s -> %s", self.wildcard_dir, impact_dir)
return {"migrated_files": migrated}
def remove_link(self) -> None:
"""Remove junction/symlink and restore WFS wildcard dir as a plain directory."""
if not (self._is_junction(self.wildcard_dir) or self.wildcard_dir.is_symlink()):
raise RuntimeError("No link to remove.")
self._remove_junction_or_symlink(self.wildcard_dir)
self.wildcard_dir.mkdir(parents=True, exist_ok=True)
logger.info("Wildcard link removed, restored plain dir: %s", self.wildcard_dir)
# ------------------------------------------------------------------
# Platform helpers
# ------------------------------------------------------------------
@staticmethod
def _is_junction(path: Path) -> bool:
"""Return True if path is a Windows directory junction."""
if platform.system() != "Windows":
return False
try:
import ctypes
FILE_ATTRIBUTE_REPARSE_POINT = 0x0400
attrs = ctypes.windll.kernel32.GetFileAttributesW(str(path))
return attrs != 0xFFFFFFFF and bool(attrs & FILE_ATTRIBUTE_REPARSE_POINT)
except Exception:
return False
@staticmethod
def _create_junction_or_symlink(link: Path, target: Path) -> None:
if platform.system() == "Windows":
result = subprocess.run(
["cmd", "/c", "mklink", "/J", str(link), str(target)],
capture_output=True, text=True,
)
if result.returncode != 0:
raise RuntimeError(f"mklink /J failed: {result.stderr.strip()}")
else:
os.symlink(target, link, target_is_directory=True)
@staticmethod
def _remove_junction_or_symlink(path: Path) -> None:
if platform.system() == "Windows":
result = subprocess.run(
["cmd", "/c", "rmdir", str(path)],
capture_output=True, text=True,
)
if result.returncode != 0:
raise RuntimeError(f"rmdir failed: {result.stderr.strip()}")
else:
os.unlink(str(path))
+2 -1
View File
@@ -61,7 +61,7 @@ class WorkflowStudio:
app.router.add_get("/wfm", serve_index_page)
# API routes
from .routes import workflow_routes, settings_routes, ollama_routes, eagle_routes, nodes_routes, prompts_routes, models_routes, gallery_routes
from .routes import workflow_routes, settings_routes, ollama_routes, eagle_routes, nodes_routes, prompts_routes, models_routes, gallery_routes, wildcard_routes
workflow_routes.setup_routes(app)
settings_routes.setup_routes(app)
@@ -71,5 +71,6 @@ class WorkflowStudio:
prompts_routes.setup_routes(app)
models_routes.setup_routes(app)
gallery_routes.setup_routes(app)
wildcard_routes.setup_routes(app)
logger.info("Workflow Studio: Routes registered successfully")
+281
View File
@@ -1923,6 +1923,287 @@ body {
flex-shrink: 0;
}
/* ============================================
Prompt Tab — Center column tabs
============================================ */
.wfm-prompt-center-tabnav {
display: flex;
border-bottom: 1px solid var(--wfm-border);
flex-shrink: 0;
}
.wfm-prompt-center-tab {
flex: 1;
padding: 8px 4px;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--wfm-text-secondary);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.wfm-prompt-center-tab:hover {
color: var(--wfm-text);
}
.wfm-prompt-center-tab.active {
color: var(--wfm-text);
border-bottom-color: var(--wfm-primary);
}
.wfm-prompt-center-pane {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* ============================================
Wildcard Panel
============================================ */
.wfm-wc-panel {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 10px 12px;
gap: 0;
}
/* Input assistance section */
.wfm-wc-input-section {
display: flex;
flex-direction: column;
gap: 6px;
flex-shrink: 0;
}
/* Wildcard syntax button toolbar */
.wfm-wc-toolbar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px 0;
}
.wfm-wc-btn {
padding: 3px 7px;
font-size: 11px;
font-family: monospace;
background: var(--wfm-surface);
border: 1px solid var(--wfm-border);
border-radius: var(--wfm-radius-sm);
color: var(--wfm-text);
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
white-space: nowrap;
line-height: 1.4;
}
.wfm-wc-btn:hover {
background: var(--wfm-surface-2, var(--wfm-surface));
border-color: var(--wfm-primary);
color: var(--wfm-primary);
}
.wfm-wc-prompt-ta {
resize: vertical;
min-height: 70px;
font-family: monospace;
font-size: 12px;
}
.wfm-wc-prompt-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
/* File picker popup */
.wfm-wc-file-picker-wrap {
position: relative;
}
.wfm-wc-file-picker {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 200;
background: var(--wfm-bg);
border: 1px solid var(--wfm-border);
border-radius: var(--wfm-radius);
min-width: 160px;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.wfm-wc-picker-item {
display: block;
width: 100%;
padding: 6px 10px;
text-align: left;
background: none;
border: none;
border-bottom: 1px solid var(--wfm-border);
color: var(--wfm-text);
font-size: 11px;
font-family: monospace;
cursor: pointer;
transition: background 0.1s;
}
.wfm-wc-picker-item:last-child {
border-bottom: none;
}
.wfm-wc-picker-item:hover {
background: var(--wfm-surface);
color: var(--wfm-primary);
}
/* File manager section */
.wfm-wc-files-section {
display: flex;
flex-direction: column;
margin-top: 10px;
border-top: 1px solid var(--wfm-border);
padding-top: 8px;
flex: 1;
min-height: 0;
}
.wfm-wc-files-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
margin-bottom: 6px;
}
.wfm-wc-files-title {
font-size: 12px;
font-weight: 600;
color: var(--wfm-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wfm-wc-file-list {
flex: 1;
min-height: 0;
overflow-y: auto;
border: 1px solid var(--wfm-border);
border-radius: var(--wfm-radius-sm);
max-height: 180px;
}
.wfm-wc-file-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px;
border-bottom: 1px solid var(--wfm-border);
cursor: pointer;
transition: background 0.1s;
}
.wfm-wc-file-item:last-child {
border-bottom: none;
}
.wfm-wc-file-item:hover {
background: var(--wfm-surface);
}
.wfm-wc-file-item-info {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
flex: 1;
overflow: hidden;
}
.wfm-wc-file-name {
font-size: 12px;
font-family: monospace;
color: var(--wfm-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wfm-wc-file-ext {
font-size: 10px;
color: var(--wfm-text-secondary);
background: var(--wfm-surface);
border: 1px solid var(--wfm-border);
border-radius: 3px;
padding: 1px 4px;
flex-shrink: 0;
}
.wfm-wc-file-item-actions {
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 0.12s;
flex-shrink: 0;
}
.wfm-wc-file-item:hover .wfm-wc-file-item-actions {
opacity: 1;
}
.wfm-wc-use-btn {
font-size: 10px !important;
color: var(--wfm-primary) !important;
}
/* File editor */
.wfm-wc-editor {
margin-top: 8px;
border: 1px solid var(--wfm-border);
border-radius: var(--wfm-radius);
padding: 8px;
background: var(--wfm-surface);
display: flex;
flex-direction: column;
gap: 6px;
}
.wfm-wc-editor-header {
display: flex;
gap: 6px;
align-items: center;
}
.wfm-wc-editor-hint {
font-size: 10px;
color: var(--wfm-text-secondary);
padding: 0 2px;
}
.wfm-wc-editor-ta {
font-family: monospace;
font-size: 12px;
resize: vertical;
min-height: 120px;
}
.wfm-wc-editor-actions {
display: flex;
gap: 4px;
}
/* ============================================
Image Input (I2I) Slots
============================================ */
+3 -2
View File
@@ -268,12 +268,13 @@ function applyI18nToHtml() {
"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-prompt-7": "helpPrompt7", "wfm-help-prompt-8": "helpPrompt8",
"wfm-help-prompt-9": "helpPrompt9",
"wfm-help-settings-1": "helpSettings1", "wfm-help-settings-2": "helpSettings2",
"wfm-help-settings-3": "helpSettings3", "wfm-help-settings-4": "helpSettings4",
"wfm-help-settings-5": "helpSettings5", "wfm-help-settings-6": "helpSettings6",
"wfm-help-settings-7": "helpSettings7", "wfm-help-settings-8": "helpSettings8",
"wfm-help-settings-9": "helpSettings9",
"wfm-help-settings-9": "helpSettings9", "wfm-help-settings-10": "helpSettings10",
"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",
+9
View File
@@ -355,6 +355,8 @@ const LANGUAGES = {
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",
helpPrompt8: "Wildcard toolbar: one-click buttons to insert wildcard syntax ({|}, {n$|}, __|__, <lora:>, etc.); wraps selected text",
helpPrompt9: "Wildcard file manager: create/edit/delete .txt/.yaml wildcard files; click filename to insert __filename__ at cursor",
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",
@@ -364,6 +366,7 @@ const LANGUAGES = {
helpSettings7: "Eagle integration URL and auto-save toggle",
helpSettings8: "Data Management: export all plugin data (settings, metadata, prompts, etc.) to a JSON file, or import to restore. After importing, restart ComfyUI.",
helpSettings9: "All sections are collapsible accordion panels",
helpSettings10: "Wildcard Integration: link WFS wildcard dir to ComfyUI-Impact-Pack wildcards (directory junction on Windows / symlink on other OS); existing files migrated automatically",
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",
@@ -878,6 +881,8 @@ const LANGUAGES = {
helpPrompt5: "プリセットマネージャー:全プリセット一覧、お気に入り、グループ別フィルタリング",
helpPrompt6: "グループ管理:グループ作成、プリセットの割り当て・解除、グループ削除",
helpPrompt7: "GenUI Set:プリセットのプロンプトをGenerateUIに直接適用",
helpPrompt8: "ワイルドカードツールバー:{|}・{n$|}・__|__・<lora:>などの構文をワンクリック挿入。選択テキストのラップも対応",
helpPrompt9: "ワイルドカードファイルマネージャー:.txt/.yamlファイルの作成・編集・削除。ファイル名をクリックすると__ファイル名__をカーソル位置に挿入",
helpSettings1: "UI言語と要約言語の設定",
helpSettings2: "テーマ選択(13種プリセット)+カスタマイズ:カラー調整、背景パターン(ストライプ、ポルカドット、チェック、SVGタイリング)、フォント選択(日本語デザインフォント含む16種のGoogle Fonts)",
helpSettings3: "ワークフローデータフォルダのパス変更・リセット",
@@ -887,6 +892,7 @@ const LANGUAGES = {
helpSettings7: "Eagle連携URL、自動保存の有効/無効",
helpSettings8: "データ管理:設定・メタデータ・プロンプトなど全データをJSONにエクスポート、またはインポートして復元。インポート後はComfyUIを再起動してください。",
helpSettings9: "各セクションはアコーディオン式で折りたたみ可能",
helpSettings10: "Wildcard Integration:WFSのワイルドカードディレクトリをComfyUI-Impact-Packのwildcardsディレクトリへリンク(Windowsはジャンクション、他OSはシンボリックリンク)。既存ファイルは自動で移行されます",
helpNodes1: "ノードブラウザ:名前/説明/エイリアス/タグで検索、カテゴリ・パッケージ・タグ・グループ・お気に入りフィルタ",
helpNodes2: "カード / テーブル表示モード切り替え(ページネーション付き)",
helpNodes3: "ノードのお気に入り登録、カスタムタグの追加で整理",
@@ -1397,6 +1403,8 @@ const LANGUAGES = {
helpPrompt5: "预设管理器:浏览所有预设、收藏、按组筛选",
helpPrompt6: "组管理:创建组、分配/移除预设、删除组",
helpPrompt7: "GenUI Set:将预设提示词直接应用到生成UI",
helpPrompt8: "通配符工具栏:一键插入通配符语法({|}、{n$|}、__|__、<lora:>等);支持包裹选中文本",
helpPrompt9: "通配符文件管理:创建/编辑/删除.txt/.yaml通配符文件;点击文件名在光标处插入__文件名__",
helpSettings1: "UI语言和摘要语言设置",
helpSettings2: "主题选择(13种预设)+ 自定义:颜色调整、背景图案(条纹、波点、棋盘格、SVG平铺)、字体选择(含日文显示字体在内的16种Google Fonts)",
helpSettings3: "工作流数据文件夹路径更改/重置",
@@ -1406,6 +1414,7 @@ const LANGUAGES = {
helpSettings7: "Eagle集成URL、自动保存开关",
helpSettings8: "数据管理:将所有插件数据(设置、元数据、提示词等)导出为JSON文件,或导入以恢复。导入后请重启ComfyUI。",
helpSettings9: "各部分可折叠展开",
helpSettings10: "Wildcard Integration:将WFS通配符目录链接到ComfyUI-Impact-Pack的wildcards目录(Windows为目录联结,其他OS为符号链接);现有文件自动迁移",
helpNodes1: "节点浏览器:按名称/描述/别名/标签搜索,按分类、包、标签、组、收藏筛选",
helpNodes2: "卡片和表格视图模式切换(带分页)",
helpNodes3: "收藏节点,添加自定义标签进行整理",
+332
View File
@@ -593,6 +593,191 @@ function applyToGenerateUI(text) {
showToast(t("appliedToGenerateUI"), "success");
}
// ============================================
// Wildcard API helpers
// ============================================
async function wcFetchFiles() {
try {
const res = await fetch("/api/wfm/wildcards");
return res.ok ? await res.json() : [];
} catch { return []; }
}
async function wcFetchContent(filename) {
try {
const res = await fetch(`/api/wfm/wildcards/content?filename=${encodeURIComponent(filename)}`);
const data = await res.json();
return data.content ?? null;
} catch { return null; }
}
async function wcSaveFile(filename, content) {
try {
const res = await fetch("/api/wfm/wildcards/save", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ filename, content }),
});
const data = await res.json();
return data.status === "ok" ? data.file : null;
} catch { return null; }
}
async function wcDeleteFile(filename) {
try {
await fetch("/api/wfm/wildcards/delete", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ filename }),
});
} catch { /* ignore */ }
}
// ============================================
// Wildcard state & helpers
// ============================================
let wcFiles = [];
let wcEditingFilename = null; // null = new file
// Insert text at cursor; if open+close provided wraps selection
function wcInsertAtCursor(textarea, open, close = "") {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selected = textarea.value.substring(start, end);
let inserted, cursorStart, cursorEnd;
if (selected && close) {
inserted = open + selected + close;
cursorStart = start + open.length;
cursorEnd = cursorStart + selected.length;
} else if (close) {
inserted = open + close;
cursorStart = start + open.length;
cursorEnd = cursorStart;
} else {
inserted = open;
cursorStart = start + open.length;
cursorEnd = cursorStart;
}
textarea.value =
textarea.value.substring(0, start) +
inserted +
textarea.value.substring(end);
textarea.setSelectionRange(cursorStart, cursorEnd);
textarea.focus();
textarea.dispatchEvent(new Event("input"));
}
// ============================================
// Wildcard file list rendering
// ============================================
function wcRenderFileList() {
const list = document.getElementById("wfm-wc-file-list");
if (!list) return;
list.innerHTML = "";
if (wcFiles.length === 0) {
list.innerHTML = `<div class="wfm-pm-empty" style="font-size:12px;">No wildcard files yet.<br><small>Click "+ New" to create one.</small></div>`;
return;
}
for (const f of wcFiles) {
const item = document.createElement("div");
item.className = "wfm-wc-file-item";
item.innerHTML = `
<div class="wfm-wc-file-item-info">
<span class="wfm-wc-file-name">${esc(f.name)}</span>
<span class="wfm-wc-file-ext">.${esc(f.ext)}</span>
</div>
<div class="wfm-wc-file-item-actions">
<button class="wfm-pm-action-btn wfm-wc-use-btn" title="Insert __${esc(f.name)}__ at cursor">Use</button>
<button class="wfm-pm-action-btn wfm-wc-edit-btn" title="Edit file">&#9998;</button>
</div>
`;
// Insert reference into wildcard prompt
item.querySelector(".wfm-wc-use-btn").addEventListener("click", (e) => {
e.stopPropagation();
const ta = document.getElementById("wfm-wc-prompt");
if (ta) wcInsertAtCursor(ta, `__${f.name}__`);
});
// Open editor
item.querySelector(".wfm-wc-edit-btn").addEventListener("click", async (e) => {
e.stopPropagation();
const content = await wcFetchContent(f.filename);
wcOpenEditor(f.name, f.ext, content ?? "", f.filename);
});
// Click row = same as Use
item.addEventListener("click", () => {
const ta = document.getElementById("wfm-wc-prompt");
if (ta) wcInsertAtCursor(ta, `__${f.name}__`);
});
list.appendChild(item);
}
}
// ============================================
// Wildcard file editor
// ============================================
function wcOpenEditor(name, ext, content, existingFilename) {
wcEditingFilename = existingFilename || null;
const editor = document.getElementById("wfm-wc-editor");
const nameInput = document.getElementById("wfm-wc-editor-name");
const extSelect = document.getElementById("wfm-wc-editor-ext");
const contentTA = document.getElementById("wfm-wc-editor-content");
const deleteBtn = document.getElementById("wfm-wc-editor-delete-btn");
if (!editor) return;
nameInput.value = name || "";
extSelect.value = ext || "txt";
contentTA.value = content || "";
deleteBtn.style.display = existingFilename ? "" : "none";
editor.style.display = "";
nameInput.focus();
}
function wcCloseEditor() {
wcEditingFilename = null;
const editor = document.getElementById("wfm-wc-editor");
if (editor) editor.style.display = "none";
}
async function wcRefreshFiles() {
wcFiles = await wcFetchFiles();
wcRenderFileList();
wcUpdateFilePicker();
}
// ============================================
// Wildcard file picker popup
// ============================================
function wcUpdateFilePicker() {
const picker = document.getElementById("wfm-wc-file-picker");
if (!picker) return;
picker.innerHTML = "";
if (wcFiles.length === 0) {
picker.innerHTML = `<div style="padding:8px;font-size:11px;color:var(--wfm-text-secondary);">No wildcard files</div>`;
return;
}
for (const f of wcFiles) {
const btn = document.createElement("button");
btn.className = "wfm-wc-picker-item";
btn.textContent = `__${f.name}__`;
btn.addEventListener("click", () => {
const ta = document.getElementById("wfm-wc-prompt");
if (ta) wcInsertAtCursor(ta, `__${f.name}__`);
picker.style.display = "none";
});
picker.appendChild(btn);
}
}
// ============================================
// Initialize
// ============================================
@@ -853,4 +1038,151 @@ export function initPromptTab() {
pmSearchText = e.target.value.trim();
renderPresetManager();
});
// ── Center column tab switching ──────────────────────────
document.querySelectorAll(".wfm-prompt-center-tab").forEach(btn => {
btn.addEventListener("click", () => {
const target = btn.dataset.ptab;
document.querySelectorAll(".wfm-prompt-center-tab").forEach(b => b.classList.remove("active"));
btn.classList.add("active");
document.querySelectorAll(".wfm-prompt-center-pane").forEach(p => {
p.style.display = p.id === `wfm-ptab-${target}` ? "" : "none";
});
});
});
// ── Wildcard syntax buttons ──────────────────────────────
document.querySelectorAll(".wfm-wc-btn[data-wc-open]").forEach(btn => {
btn.addEventListener("click", () => {
const ta = document.getElementById("wfm-wc-prompt");
if (!ta) return;
const open = btn.dataset.wcOpen || "";
const close = btn.dataset.wcClose || "";
wcInsertAtCursor(ta, open, close);
});
});
// LoRA LBW template button
document.getElementById("wfm-wc-lora-btn")?.addEventListener("click", () => {
const ta = document.getElementById("wfm-wc-prompt");
if (!ta) return;
wcInsertAtCursor(ta, "<lora::1:LBW=;>");
// Move cursor to after "lora:" for the name
const pos = ta.selectionStart - "<lora::1:LBW=;>".length + 6;
ta.setSelectionRange(pos, pos);
ta.focus();
});
// n$${ } button — asks for n then inserts multi-pick template
document.getElementById("wfm-wc-nset-btn")?.addEventListener("click", () => {
const ta = document.getElementById("wfm-wc-prompt");
if (!ta) return;
const n = prompt("Number of items to pick (n):", "2");
if (n === null) return;
const num = parseInt(n, 10);
if (isNaN(num) || num < 1) { showToast("Enter a positive integer", "error"); return; }
const template = "{" + num + "$$|}";
const start = ta.selectionStart;
wcInsertAtCursor(ta, template);
// Move cursor between $$ and |
const inner = start + ("{" + num + "$$").length;
ta.setSelectionRange(inner, inner);
ta.focus();
});
// File picker toggle
const filePickBtn = document.getElementById("wfm-wc-filepick-btn");
const filePicker = document.getElementById("wfm-wc-file-picker");
filePickBtn?.addEventListener("click", (e) => {
e.stopPropagation();
if (!filePicker) return;
const isOpen = filePicker.style.display !== "none";
filePicker.style.display = isOpen ? "none" : "";
if (!isOpen) wcUpdateFilePicker();
});
document.addEventListener("click", () => {
if (filePicker) filePicker.style.display = "none";
});
// ── Wildcard prompt actions ──────────────────────────────
document.getElementById("wfm-wc-copy-btn")?.addEventListener("click", () => {
const ta = document.getElementById("wfm-wc-prompt");
const text = ta?.value || "";
if (!text.trim()) { showToast(t("noTextToCopy"), "error"); return; }
navigator.clipboard.writeText(text).then(() => showToast(t("copiedToClipboard"), "success"));
});
document.getElementById("wfm-wc-to-pos-btn")?.addEventListener("click", () => {
const src = document.getElementById("wfm-wc-prompt");
const dst = document.getElementById("wfm-preset-pos");
if (!src || !dst) return;
dst.value = src.value;
dst.dispatchEvent(new Event("input", { bubbles: true }));
showToast("Sent to Positive Prompt", "success");
});
document.getElementById("wfm-wc-to-neg-btn")?.addEventListener("click", () => {
const src = document.getElementById("wfm-wc-prompt");
const dst = document.getElementById("wfm-preset-neg");
if (!src || !dst) return;
dst.value = src.value;
dst.dispatchEvent(new Event("input", { bubbles: true }));
showToast("Sent to Negative Prompt", "success");
});
document.getElementById("wfm-wc-clear-btn")?.addEventListener("click", () => {
const ta = document.getElementById("wfm-wc-prompt");
if (ta) { ta.value = ""; ta.focus(); }
});
// ── Wildcard file manager ────────────────────────────────
document.getElementById("wfm-wc-new-file-btn")?.addEventListener("click", () => {
wcOpenEditor("", "txt", "", null);
});
document.getElementById("wfm-wc-files-refresh-btn")?.addEventListener("click", () => {
wcRefreshFiles();
});
// Editor: save
document.getElementById("wfm-wc-editor-save-btn")?.addEventListener("click", async () => {
const nameInput = document.getElementById("wfm-wc-editor-name");
const extSelect = document.getElementById("wfm-wc-editor-ext");
const contentTA = document.getElementById("wfm-wc-editor-content");
const name = nameInput?.value.trim();
const ext = extSelect?.value || "txt";
const content = contentTA?.value || "";
if (!name) { showToast("Enter a filename", "error"); return; }
if (!/^[\w\-. ]+$/.test(name)) { showToast("Filename can only contain letters, numbers, -, _, .", "error"); return; }
const filename = `${name}.${ext}`;
const saved = await wcSaveFile(filename, content);
if (saved) {
showToast(`Saved: ${filename}`, "success");
wcCloseEditor();
wcRefreshFiles();
} else {
showToast("Failed to save file", "error");
}
});
// Editor: delete
document.getElementById("wfm-wc-editor-delete-btn")?.addEventListener("click", async () => {
if (!wcEditingFilename) return;
if (!confirm(`Delete "${wcEditingFilename}"?`)) return;
await wcDeleteFile(wcEditingFilename);
showToast(`Deleted: ${wcEditingFilename}`, "success");
wcCloseEditor();
wcRefreshFiles();
});
// Editor: cancel
document.getElementById("wfm-wc-editor-cancel-btn")?.addEventListener("click", () => {
wcCloseEditor();
});
// Initial wildcard file load
wcRefreshFiles();
}
+89
View File
@@ -620,6 +620,12 @@ export async function initSettingsTab() {
<div id="wfm-settings-data-status" style="font-size:12px;margin-top:8px;"></div>
</details>
<!-- Wildcard Integration -->
<details class="wfm-settings-section" id="wfm-wildcard-integration-section">
<summary class="wfm-settings-summary">Wildcard Integration</summary>
<div id="wfm-wildcard-link-status" style="font-size:13px;color:var(--wfm-text-secondary);">Loading...</div>
</details>
<!-- Save Button -->
<button class="wfm-btn wfm-btn-primary" id="wfm-settings-save" style="min-width:120px;">${t("saveSettings")}</button>
@@ -1051,6 +1057,89 @@ export async function initSettingsTab() {
comfyUI.updateUrl(savedUrl);
}
// --- Wildcard Integration ---
async function wcLoadLinkStatus() {
const el = document.getElementById("wfm-wildcard-link-status");
if (!el) return;
try {
const res = await fetch("/api/wfm/wildcards/link-status");
const data = await res.json();
wcRenderLinkStatus(el, data);
} catch (e) {
el.innerHTML = `<span style="color:var(--wfm-error,#f44336)">Error: ${e.message}</span>`;
}
}
function wcRenderLinkStatus(el, data) {
if (!data.impact_pack_installed) {
el.innerHTML = `
<p style="margin:0 0 8px;">ComfyUI-Impact-Pack がインストールされていません。</p>
<p style="margin:0;font-size:12px;color:var(--wfm-text-secondary);">
ワイルドカードを Impact Pack と共有するには、先に
<a href="https://github.com/ltdrdata/ComfyUI-Impact-Pack" target="_blank" rel="noopener"
style="color:var(--wfm-accent);">ComfyUI-Impact-Pack</a>
をインストールしてください。
</p>`;
return;
}
if (data.is_linked) {
el.innerHTML = `
<p style="margin:0 0 4px;color:var(--wfm-success,#4caf50);">✓ リンク済み</p>
<p style="margin:0 0 8px;font-size:12px;color:var(--wfm-text-secondary);">
WFS wildcard → ${data.link_target || data.impact_pack_wildcards_dir}
</p>
<button class="wfm-btn wfm-btn-sm wfm-btn-danger" id="wfm-wc-remove-link">リンクを解除</button>
<div id="wfm-wc-link-msg" style="font-size:12px;margin-top:8px;"></div>`;
document.getElementById("wfm-wc-remove-link")?.addEventListener("click", async () => {
const msg = document.getElementById("wfm-wc-link-msg");
try {
const r = await fetch("/api/wfm/wildcards/remove-link", { method: "POST" });
const d = await r.json();
if (!r.ok) throw new Error(d.error || r.statusText);
msg.textContent = "リンクを解除しました。";
msg.style.color = "var(--wfm-success,#4caf50)";
setTimeout(wcLoadLinkStatus, 800);
} catch (e) {
msg.textContent = "エラー: " + e.message;
msg.style.color = "var(--wfm-error,#f44336)";
}
});
} else {
el.innerHTML = `
<p style="margin:0 0 4px;">Impact Pack wildcards ディレクトリ:</p>
<p style="margin:0 0 8px;font-size:12px;color:var(--wfm-text-secondary);">${data.impact_pack_wildcards_dir}</p>
<p style="margin:0 0 8px;font-size:12px;color:var(--wfm-text-secondary);">
WFS の wildcard ディレクトリを Impact Pack の wildcards ディレクトリへのリンクに置き換えます。
既存の WFS ワイルドカードファイルは Impact Pack ディレクトリへ移行されます。
</p>
<button class="wfm-btn wfm-btn-sm" id="wfm-wc-create-link">リンクを作成</button>
<div id="wfm-wc-link-msg" style="font-size:12px;margin-top:8px;"></div>`;
document.getElementById("wfm-wc-create-link")?.addEventListener("click", async () => {
const msg = document.getElementById("wfm-wc-link-msg");
try {
const r = await fetch("/api/wfm/wildcards/create-link", { method: "POST" });
const d = await r.json();
if (!r.ok) throw new Error(d.error || r.statusText);
const migrated = d.migrated_files?.length
? ` (移行: ${d.migrated_files.join(", ")})`
: "";
msg.textContent = "リンクを作成しました。" + migrated;
msg.style.color = "var(--wfm-success,#4caf50)";
setTimeout(wcLoadLinkStatus, 800);
} catch (e) {
msg.textContent = "エラー: " + e.message;
msg.style.color = "var(--wfm-error,#f44336)";
}
});
}
}
// Load wildcard link status when section is opened
document.getElementById("wfm-wildcard-integration-section")?.addEventListener("toggle", (e) => {
if (e.target.open) wcLoadLinkStatus();
});
// --- Data Export ---
document.getElementById("wfm-settings-export")?.addEventListener("click", async () => {
const statusEl = document.getElementById("wfm-settings-data-status");
+127 -46
View File
@@ -434,61 +434,139 @@
</div>
</div>
<!-- Col 2: Preset Editor -->
<!-- Col 2: Presets + Preset Manager (tabbed) -->
<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">GenUI Set</button>
<!-- Center column tab navigation -->
<div class="wfm-prompt-center-tabnav">
<button class="wfm-prompt-center-tab active" data-ptab="presets">Presets</button>
<button class="wfm-prompt-center-tab" data-ptab="manager">Preset Manager</button>
</div>
<!-- Presets pane -->
<div id="wfm-ptab-presets" class="wfm-prompt-center-pane">
<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">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" style="flex:1;" placeholder="Positive prompt..."></textarea>
</div>
<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" style="flex:1;" placeholder="Negative prompt..."></textarea>
</div>
<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 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" style="flex:1;" placeholder="Positive prompt..."></textarea>
</div>
<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" style="flex:1;" placeholder="Negative prompt..."></textarea>
</div>
<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>
<!-- Preset Manager pane -->
<div id="wfm-ptab-manager" class="wfm-prompt-center-pane" style="display:none;">
<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">&#9733;</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>
<!-- Col 3: Preset Manager (list, favorites, groups) -->
<!-- Col 3: Wildcard support -->
<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">&#9733;</button>
<button class="wfm-pm-tab" data-pmtab="groups">Groups</button>
<div class="wfm-prompt-split-header">Wildcard</div>
<div class="wfm-wc-panel">
<!-- Input assistance section -->
<div class="wfm-wc-input-section">
<!-- Wildcard syntax buttons -->
<div class="wfm-wc-toolbar">
<button class="wfm-wc-btn" data-wc-open="{" data-wc-close="}" title="Random pick set e.g. {cat|dog}">{ }</button>
<button class="wfm-wc-btn" data-wc-open="|" title="Separator">|</button>
<button class="wfm-wc-btn" data-wc-open="__" data-wc-close="__" title="Wildcard file reference e.g. __animals__">__</button>
<button class="wfm-wc-btn" data-wc-open=":" title="Colon">:</button>
<button class="wfm-wc-btn" data-wc-open=";" title="Semicolon">;</button>
<button class="wfm-wc-btn" data-wc-open="$$" title="Multi-pick e.g. {2$$cat|dog|bird}">$$</button>
<button class="wfm-wc-btn" data-wc-open="[" data-wc-close="]" title="Bracket set e.g. [cat|dog]">[ ]</button>
<button class="wfm-wc-btn" id="wfm-wc-lora-btn" title="LoRA with LBW e.g. &lt;lora:name:1:LBW=...;...&gt;">&lt;lora&gt;</button>
<button class="wfm-wc-btn" id="wfm-wc-nset-btn" title="Multi-pick set e.g. {2$$cat|dog|bird}">n$${ }</button>
<div class="wfm-wc-file-picker-wrap">
<button class="wfm-wc-btn" id="wfm-wc-filepick-btn" title="Insert wildcard file reference">&#128194; File</button>
<div id="wfm-wc-file-picker" class="wfm-wc-file-picker" style="display:none;"></div>
</div>
</div>
<!-- Prompt textarea -->
<textarea id="wfm-wc-prompt" class="wfm-textarea wfm-wc-prompt-ta" rows="4" placeholder="Compose wildcard prompt here...&#10;e.g. a photo of {cat|dog}, __colors__ background"></textarea>
<!-- Action buttons -->
<div class="wfm-wc-prompt-actions">
<button id="wfm-wc-copy-btn" class="wfm-btn wfm-btn-sm">Copy</button>
<button id="wfm-wc-to-pos-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary" title="Send to Preset Positive Prompt">&#8594; Pos</button>
<button id="wfm-wc-to-neg-btn" class="wfm-btn wfm-btn-sm" title="Send to Preset Negative Prompt">&#8594; Neg</button>
<button id="wfm-wc-clear-btn" class="wfm-btn wfm-btn-sm" style="margin-left:auto;">Clear</button>
</div>
</div>
<div class="wfm-pm-search">
<input type="text" id="wfm-pm-search-input" class="wfm-input" placeholder="Search presets...">
<!-- Wildcard file manager section -->
<div class="wfm-wc-files-section">
<div class="wfm-wc-files-header">
<span class="wfm-wc-files-title">Wildcard Files</span>
<div style="display:flex;gap:4px;">
<button id="wfm-wc-new-file-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary">+ New</button>
<button id="wfm-wc-files-refresh-btn" class="wfm-btn wfm-btn-sm" title="Reload file list">&#8635;</button>
</div>
</div>
<!-- File list -->
<div id="wfm-wc-file-list" class="wfm-wc-file-list">
<p class="wfm-placeholder" style="padding:12px;font-size:12px;">Loading...</p>
</div>
<!-- Editor (shown when a file is selected or New is clicked) -->
<div id="wfm-wc-editor" class="wfm-wc-editor" style="display:none;">
<div class="wfm-wc-editor-header">
<input type="text" id="wfm-wc-editor-name" class="wfm-input" placeholder="filename (no extension)" style="flex:1;min-width:0;">
<select id="wfm-wc-editor-ext" class="wfm-select" style="width:70px;">
<option value="txt">txt</option>
<option value="yaml">yaml</option>
</select>
</div>
<div class="wfm-wc-editor-hint">
txt: one item per line &nbsp;|&nbsp; yaml: key: [item1, item2, ...]
</div>
<textarea id="wfm-wc-editor-content" class="wfm-textarea wfm-wc-editor-ta" rows="8" placeholder="one item per line (txt)&#10;or YAML format (yaml)"></textarea>
<div class="wfm-wc-editor-actions">
<button id="wfm-wc-editor-save-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary">Save</button>
<button id="wfm-wc-editor-delete-btn" class="wfm-btn wfm-btn-sm wfm-btn-danger" style="display:none;">Delete</button>
<button id="wfm-wc-editor-cancel-btn" class="wfm-btn wfm-btn-sm" style="margin-left:auto;">Cancel</button>
</div>
</div>
</div>
<div id="wfm-pm-list" class="wfm-pm-list"></div>
</div>
</div>
</div>
@@ -556,6 +634,8 @@
<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>
<li id="wfm-help-prompt-8">Wildcard toolbar: one-click buttons to insert wildcard syntax ({|}, {n$|}, __|__, &lt;lora:&gt;, etc.); wraps selected text</li>
<li id="wfm-help-prompt-9">Wildcard file manager: create/edit/delete .txt/.yaml wildcard files; click filename to insert __filename__ at cursor</li>
</ul>
</div>
@@ -571,6 +651,7 @@
<li id="wfm-help-settings-7">Eagle integration URL and auto-save toggle</li>
<li id="wfm-help-settings-8">Data Management: export all plugin data to JSON / import to restore</li>
<li id="wfm-help-settings-9">All sections are collapsible accordion panels</li>
<li id="wfm-help-settings-10">Wildcard Integration: link WFS wildcard dir to ComfyUI-Impact-Pack wildcards (junction/symlink); existing files migrated automatically</li>
</ul>
</div>