Compare commits

...
2 Commits
Author SHA1 Message Date
ketle-manandClaude Sonnet 4.6 8d48c2276f v0.3.0: Cross-type group filter & sidebar group display fix
- models-tab.js: group filter dropdown now shows groups from all model
  types with [TypeLabel] prefix; selecting a group auto-switches type
- node_sets_menu.js: fix TypeError in renderModelGroups caused by v0.2.9
  per-type group format; add type label badge to each group header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-18 14:23:50 +09:00
ketle-manandClaude Sonnet 4.6 918ab54004 v0.2.9: Model Enable/Disable, per-type groups, multi-select & bulk delete
- Toggle model visibility by renaming file extension (.disabled suffix)
  per card (⏸ button), per group (Enable All / Disable All), or via
  status filter (All / Enabled / Disabled)
- Groups are now scoped per model type; old flat groups auto-migrated
- Multi-select mode with bulk action bar: add/remove from groups,
  permanently delete model files + preview + sidecar (.json/.info)
- Fix: subdirectory model disable path-doubling error
- Fix: Hypernetwork tab showing C/O/M/B from new ComfyUI COMBO format

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-18 10:11:29 +09:00
11 changed files with 1105 additions and 64 deletions
+129
View File
@@ -1,5 +1,134 @@
# DEVLOG - ComfyUI-Workflow-Studio
## 2026-04-18: v0.3.0 モデルグループ表示改善(全タイプ横断・サイドパネル修正)
### 概要
- モデルタブのグループフィルタードロップダウンを全タイプ横断表示に改善
- ComfyUIサイドパネルのModel Groupsビューを v0.2.9 のタイプ別形式に対応させバグ修正
### 変更内容
#### `static/js/models-tab.js` — グループフィルター全タイプ横断表示
- `state.allModelGroups` 追加 — 全タイプのグループを `{ type: { groupName: [models] } }` 形式で保持
- `fetchAllModelGroups()` 追加 — `type` パラメータなしで全タイプのグループをAPIから一括取得
- `renderGroupFilter()` 改善 — ドロップダウンオプションを `[Checkpoint] GroupName` / `[LoRA] GroupName` 形式で全タイプ分表示。値は `type::groupName` としてエンコード
- グループフィルター `change` ハンドラ更新 — 選択したグループが現在と異なるタイプの場合、モデルタイプタブを自動切り替えしてモデルを再ロード
- `saveModelGroups()` — 保存時に `state.allModelGroups[type]` も更新
- `loadModelsForCurrentType()` — ロード時に `state.allModelGroups[type]` を同期
- `loadMetadataAndModels()` — 初回ロード時に `fetchAllModelGroups()` で全タイプのグループを一括取得
#### `web/comfyui/node_sets_menu.js` — サイドパネルのModel Groupsビュー修正
- `renderModelGroups()` を新タイプ別形式 `{ type: { groupName: [...] } }` に対応
- 旧: `groups[groupName]` が配列を期待 → `TypeError: .filter is not a function` でクラッシュ
- 新: `flatGroups = [{modelType, groupName, members}]` にフラット展開してから描画
- グループヘッダーに `[Checkpoint]` / `[LoRA]` 等のタイプラベルを追加(`wfm-nlp-model-type-badge`クラス)
- `typeOf[name] || modelType` — モデルリスト未取得時のフォールバックをグループのモデルタイプに変更
---
## 2026-04-18: v0.2.9 モデル有効/無効・複数選択・一括削除
### 概要
- モデルファイルの拡張子リネーム(`.disabled`サフィックス)でComfyUIへの表示を制御
- モデル種別ごとのグループスコープ(checkpointグループはcheckpointタブにのみ表示)
- 複数選択モードと一括グループ操作・ファイル削除機能を追加
### 変更内容
#### `py/services/models_service.py` — 有効/無効・削除ロジック追加
- `_DISABLED_SUFFIX = ".disabled"` 定数追加
- `_SIDECAR_EXTENSIONS` — 削除対象の付属ファイル拡張子リスト(`.preview.png` 〜 `.webp` + `.json`, `.civitai.info`, `.info`)
- `find_model_file(model_type, model_name)` — 有効・無効両状態を検索、`(Path, is_enabled)` を返す
- `enable_model(model_type, model_name)` — `.disabled` → 元の拡張子にリネーム
- `disable_model(model_type, model_name)` — 元の拡張子 → `.disabled` にリネーム(`path.name` ベースでサブディレクトリ二重化バグを回避)
- `scan_disabled_models(model_type)` — `rglob("*.disabled")` でスキャン、正規化名リストを返す
- `get_model_groups(model_type=None)` — `model_type` パラメータ追加。旧フラット形式 `{ "groupName": [...] }` を `_groups_legacy` に退避し、`{ "_groups": { "checkpoint": {...} } }` 形式へ自動マイグレーション
- `save_model_groups(groups, model_type)` — `model_type` パラメータ追加、種別ごとに保存
- `delete_model(model_type, model_name)` — モデルファイル(有効・無効どちらも対応)を削除。`path.name` から `.disabled` を除去してstemを正しく計算し、全サイドカーファイルを削除。メタデータエントリも削除
#### `py/routes/models_routes.py` — エンドポイント追加・変更
**新エンドポイント:**
- `GET /api/wfm/models/disabled?type=` — 指定タイプの無効モデル名リストを返す
- `POST /api/wfm/models/toggle` — `{ model_type, model_name, enabled }` でモデル1件の有効/無効を切り替え
- `POST /api/wfm/models/group-toggle` — `{ model_type, group_name, enabled }` でグループ内全モデルを一括切り替え
- `POST /api/wfm/models/delete` — `{ model_type, model_names: [] }` で複数モデルを一括削除
**変更:**
- `GET /api/wfm/models/groups` — `?type=` クエリパラメータ追加
- `POST /api/wfm/models/groups` — ボディを `{ "model_type": ..., "groups": {...} }` 形式に変更
#### `static/js/comfyui-client.js` — Hypernetworkバグ修正
- `_fetchModelList` で新ComfyUI APIフォーマット `["COMBO", {"values":[...]}]` に対応
- `Array.isArray(first)` チェックを追加、文字列 `"COMBO"` をスプレッドしてしまう問題を解消
#### `static/js/models-tab.js` — フロントエンド全体
**state追加:**
- `disabledModels: {}` — タイプ別の無効モデルSet
- `statusFilter: "all"` — "all" / "enabled" / "disabled"
- `selectMode: false`, `selectedModels: new Set()` — 複数選択状態
**新関数:**
- `isModelDisabled()`, `fetchDisabledModels()`, `toggleModelEnable()`, `toggleGroupEnable()` — 有効/無効操作
- `toggleSelectMode()` — 選択モードのON/OFF切り替え、ボタンテキスト更新
- `toggleModelSelection(modelName)` — DOM直接更新(再レンダリングなし)
- `clearSelection()` — 選択リセット
- `renderBulkActionBar()` — グループ選択・追加/削除・新規作成・削除ボタンを描画
- `bulkAddToGroup()`, `bulkRemoveFromGroup()` — 一括グループ操作
- `bulkDeleteModels()` — `confirm()` で確認後 `/api/wfm/models/delete` を呼び出し、ローカルstateを即時更新
**各ビュー:**
- ThumbView / CardView: 無効オーバーレイ・⏸ボタン・selectMode時チェックボックスオーバーレイ追加
- TableView: チェックボックス列・`wfm-table-td-check` 追加
- `renderSideGroup()`: "全て有効化" / "全て無効化" ボタン追加
**タイプ切り替え:**
- `groupFilter`, `statusFilter`, `selectMode`, `selectedModels` をリセット
#### `templates/index.html` — UI要素追加
- `<select id="wfm-models-status-filter">` — All / Enabled / Disabled フィルター
- `<button id="wfm-models-select-btn">` — 選択モード切り替え
- `<div id="wfm-models-bulk-bar">` — 一括操作バー(初期非表示)
- `<li id="wfm-help-models-11">` — ヘルプ項目追加
#### `static/css/main.css` — スタイル追加
- `.wfm-model-disabled` / `.wfm-disabled-overlay` — 無効状態の見た目
- `.wfm-toggle-btn` / `.wfm-toggle-btn.wfm-toggle-disabled` — ⏸ボタン
- `.wfm-badge-disabled` — 無効バッジ
- `.wfm-select-check` / `.wfm-select-check.checked` — チェックボックス
- `.wfm-card-checked` — 選択済みカードのアウトライン
- `.wfm-bulk-bar` / `.wfm-bulk-count` / `.wfm-bulk-sep` / `.wfm-table-td-check` — 一括操作バー
#### `static/js/i18n.js` — 新キー追加(3言語)
- 有効/無効操作: `modelEnable`, `modelDisable`, `modelDisabled`, `modelStatusAll`, `modelStatusEnabled`, `modelStatusDisabled`, `modelGroupEnableAll`, `modelGroupDisableAll`, `modelToggleError`, `modelStatusWarning`
- 複数選択: `modelSelectMode`, `modelSelectExit`, `modelSelected`, `modelBulkAddGroup`, `modelBulkRemoveGroup`, `modelBulkCreateAdd`, `modelBulkAddDone`, `modelBulkRemoveDone`
- ファイル削除: `modelBulkDelete`, `modelBulkDeleteConfirm`, `modelBulkDeleteDone`, `modelBulkDeleteError`
- ヘルプ: `helpModels11`(複数選択・一括削除の説明)、`helpModels3` 更新(ステータスフィルター追記)
### 技術的な判断
- **拡張子リネーム方式**: ComfyUIはスキャン時に認識拡張子のみ列挙するため、`.disabled`サフィックスを付けるだけでモデルを隠せる。ファイル移動や専用DBを使わず最もシンプルな実装
- **DOM直接更新(選択モード)**: 選択トグルのたびに`renderModelGrid()`を呼ぶと大量再レンダリングが起きる。`querySelectorAll("[data-model-name]")`で対象要素を絞り`classList.toggle()`のみ実行
- **stemバグの根本原因**: `path.stem`は最後のサフィックスのみ除去する。`model.safetensors.disabled`の`stem`は`model.safetensors`になるため、`model.safetensors.png`を探してしまう。`.disabled`を先に除去してから`Path.stem`を計算する必要がある
---
## 2026-04-14: v0.2.8 データ保存先変更・エクスポート/インポート機能追加
### 概要
+17 -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.2.8-green)
![Version](https://img.shields.io/badge/version-0.3.0-green)
## Screenshots
@@ -114,9 +114,11 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
- **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
- **Group management** — create, rename, delete groups and assign/remove models; groups are scoped per model type (checkpoint groups only appear in the Checkpoint tab)
- **Table view memo** — memo column displayed in table view for quick reference
- **Preview images** — auto-detect `{model_stem}.preview.png` next to model files
- **Enable / Disable models** — hide models from ComfyUI by renaming the file extension (`.disabled` suffix); toggle per card (⏸ button), per group (Enable All / Disable All), or filter by status (All / Enabled / Disabled)
- **Multi-select & bulk operations** — enter selection mode to check multiple models; bulk action bar supports add/remove from groups and permanent file deletion (model file + preview images + sidecar files such as `.json` / `.info`)
### Workflow Studio Library (ComfyUI Side Panel) (v0.2.5)
- **Workflows tab** — browse favorite workflows (All / ★ Favorites / Groups / By Badge sub-tabs), ★ star shown for favorites in All view
@@ -208,6 +210,19 @@ Click the **camera icon** (next to the W button) in ComfyUI's top bar to capture
## Changelog
### v0.3.0
- **Cross-type group filter** — the group filter dropdown in the Models tab now shows groups from all model types simultaneously, each prefixed with a type label (`[Checkpoint]`, `[LoRA]`, etc.); selecting a group automatically switches to the corresponding model type
- **Sidebar group display fixed** — the ComfyUI sidebar "Model Groups" view now correctly renders per-type groups (introduced in v0.2.9) with a type label on each group header; fixes a crash where `.filter is not a function` was thrown on the new nested group structure
### v0.2.9
- **Model Enable/Disable** — hide models from ComfyUI by renaming the file extension to `.disabled`; toggle per model (⏸ button on each card/row), per group (Enable All / Disable All buttons in the Group panel), or filter the grid by status (All / Enabled only / Disabled only). Changes take effect after ComfyUI refresh.
- **Per-type model groups** — groups are now scoped to each model type; checkpoint groups only appear in the Checkpoint tab, LoRA groups only in the LoRA tab, etc. Existing flat groups are automatically migrated.
- **Multi-select mode** — click the Select button in the toolbar to enter selection mode; check individual models across Thumbnail / Card / Table views
- **Bulk group operations** — with models selected, add or remove them from any group in one click, or create a new group and add them simultaneously
- **Bulk file delete** — permanently delete selected model files along with all associated preview images and sidecar files (`.json`, `.civitai.info`, `.info`); requires confirmation before deleting
- **Bug fix** — models in subdirectories could not be disabled due to a path-doubling error; fixed by computing the rename target from `path.name` instead of `model_name`
- **Bug fix** — Hypernetwork tab showed `C`, `O`, `M`, `B` as fake model items; caused by the new ComfyUI API format returning `"COMBO"` as the first element; fixed in `comfyui-client.js`
### v0.2.8
- **Data storage moved** — plugin data (settings, metadata, prompts, etc.) is now stored in `ComfyUI/user/default/Workflow-Studio/` instead of `custom_nodes/ComfyUI-Workflow-Studio/data/`; falls back to the old `data/` directory if `user/default/` does not exist
- **Data Management section** — new Settings tab section to export all plugin data to a single JSON file and import it back; useful for migration, backup, and reinstallation
+148 -5
View File
@@ -27,6 +27,10 @@ def setup_routes(app: web.Application):
app.router.add_post("/api/wfm/models/civitai/batch", handle_civitai_batch)
app.router.add_post("/api/wfm/models/change-preview", handle_change_preview)
app.router.add_get("/api/wfm/models/filepath", handle_get_filepath)
app.router.add_get("/api/wfm/models/disabled", handle_get_disabled)
app.router.add_post("/api/wfm/models/toggle", handle_toggle_model)
app.router.add_post("/api/wfm/models/group-toggle", handle_toggle_group)
app.router.add_post("/api/wfm/models/delete", handle_delete_models)
# ── Model Metadata ─────────────────────────────────────────
@@ -61,9 +65,10 @@ async def handle_save_metadata(request: web.Request) -> web.Response:
async def handle_get_groups(request: web.Request) -> web.Response:
"""GET /api/wfm/models/groups"""
"""GET /api/wfm/models/groups?type=checkpoint"""
model_type = request.query.get("type", "")
try:
result = await asyncio.to_thread(_service.get_model_groups)
result = await asyncio.to_thread(_service.get_model_groups, model_type or None)
return web.json_response(result)
except Exception as e:
logger.error("Error loading model groups: %s", e)
@@ -71,10 +76,17 @@ async def handle_get_groups(request: web.Request) -> web.Response:
async def handle_save_groups(request: web.Request) -> web.Response:
"""POST /api/wfm/models/groups"""
"""POST /api/wfm/models/groups
Body: { "model_type": "checkpoint", "groups": { "groupName": [...] } }
"""
try:
groups = await request.json()
result = await asyncio.to_thread(_service.save_model_groups, groups)
body = await request.json()
model_type = body.get("model_type", "")
groups = body.get("groups", {})
if not model_type:
return web.json_response({"error": "model_type required"}, status=400)
result = await asyncio.to_thread(_service.save_model_groups, groups, model_type)
return web.json_response({"status": "ok", "groups": result})
except Exception as e:
logger.error("Error saving model groups: %s", e)
@@ -386,3 +398,134 @@ async def handle_get_filepath(request: web.Request) -> web.Response:
except Exception as e:
logger.error("Error resolving model filepath: %s", e)
return web.json_response({"error": str(e)}, status=500)
# ── Model Enable / Disable ────────────────────────────────
async def handle_get_disabled(request: web.Request) -> web.Response:
"""GET /api/wfm/models/disabled?type=checkpoint
Returns list of disabled model names (normalized, without .disabled suffix).
"""
model_type = request.query.get("type", "")
if not model_type:
return web.json_response({"error": "type required"}, status=400)
try:
result = await asyncio.to_thread(_service.scan_disabled_models, model_type)
return web.json_response(result)
except Exception as e:
logger.error("Error scanning disabled models: %s", e)
return web.json_response({"error": str(e)}, status=500)
async def handle_toggle_model(request: web.Request) -> web.Response:
"""POST /api/wfm/models/toggle
Body: { "model_type": "checkpoint", "model_name": "v1-5.safetensors", "enabled": false }
Renames the model file to add/remove .disabled suffix.
"""
try:
body = await request.json()
model_type = body.get("model_type", "")
model_name = body.get("model_name", "")
enabled = body.get("enabled", True)
if not model_type or not model_name:
return web.json_response({"error": "model_type and model_name required"}, status=400)
if ".." in model_name:
return web.json_response({"error": "Invalid model name"}, status=400)
if enabled:
await asyncio.to_thread(_service.enable_model, model_type, model_name)
else:
await asyncio.to_thread(_service.disable_model, model_type, model_name)
return web.json_response({"status": "ok", "enabled": enabled})
except FileNotFoundError as e:
return web.json_response({"error": str(e)}, status=404)
except OSError as e:
logger.error("OS error toggling model: %s", e)
return web.json_response({"error": str(e)}, status=500)
except Exception as e:
logger.error("Error toggling model: %s", e)
return web.json_response({"error": str(e)}, status=500)
async def handle_toggle_group(request: web.Request) -> web.Response:
"""POST /api/wfm/models/group-toggle
Body: { "model_type": "checkpoint", "group_name": "MyGroup", "enabled": true }
Enables or disables all models belonging to the specified group.
"""
try:
body = await request.json()
model_type = body.get("model_type", "")
group_name = body.get("group_name", "")
enabled = body.get("enabled", True)
if not model_type or not group_name:
return web.json_response({"error": "model_type and group_name required"}, status=400)
groups = await asyncio.to_thread(_service.get_model_groups, model_type)
members = groups.get(group_name, [])
ok_list = []
error_list = []
for model_name in members:
if ".." in model_name:
continue
try:
if enabled:
await asyncio.to_thread(_service.enable_model, model_type, model_name)
else:
await asyncio.to_thread(_service.disable_model, model_type, model_name)
ok_list.append(model_name)
except Exception as e:
error_list.append({"model": model_name, "error": str(e)})
return web.json_response({
"status": "ok",
"enabled": enabled,
"ok": ok_list,
"errors": error_list,
})
except Exception as e:
logger.error("Error toggling group: %s", e)
return web.json_response({"error": str(e)}, status=500)
async def handle_delete_models(request: web.Request) -> web.Response:
"""POST /api/wfm/models/delete
Body: { "model_type": "checkpoint", "model_names": ["a.safetensors", "b.safetensors"] }
Deletes each model file and associated preview/sidecar files, then removes metadata.
"""
try:
body = await request.json()
model_type = body.get("model_type", "")
model_names = body.get("model_names", [])
if not model_type or not isinstance(model_names, list) or not model_names:
return web.json_response({"error": "model_type and model_names[] required"}, status=400)
ok_list = []
error_list = []
for model_name in model_names:
if ".." in str(model_name):
error_list.append({"model": model_name, "error": "Invalid model name"})
continue
try:
result = await asyncio.to_thread(_service.delete_model, model_type, model_name)
ok_list.append({"model": model_name, "deleted": result["deleted"]})
logger.info("Deleted model: %s (%s files)", model_name, len(result["deleted"]))
except FileNotFoundError as e:
error_list.append({"model": model_name, "error": str(e)})
except Exception as e:
logger.error("Error deleting model %s: %s", model_name, e)
error_list.append({"model": model_name, "error": str(e)})
return web.json_response({"status": "ok", "ok": ok_list, "errors": error_list})
except Exception as e:
logger.error("Error in delete_models: %s", e)
return web.json_response({"error": str(e)}, status=500)
+130 -4
View File
@@ -13,6 +13,15 @@ logger = logging.getLogger(__name__)
_PREVIEW_EXTENSIONS = [".preview.png", ".preview.jpg", ".preview.jpeg", ".preview.webp",
".png", ".jpg", ".jpeg", ".webp"]
# All sidecar extensions to delete when a model is deleted
_SIDECAR_EXTENSIONS = [
".preview.png", ".preview.jpg", ".preview.jpeg", ".preview.webp",
".png", ".jpg", ".jpeg", ".webp",
".json", ".civitai.info", ".info",
]
_DISABLED_SUFFIX = ".disabled"
# ComfyUI model type → folder_paths key mapping
MODEL_TYPE_FOLDER_KEYS = {
"checkpoint": "checkpoints",
@@ -100,16 +109,88 @@ class ModelsService:
self._save_metadata(data)
return entry
def get_model_groups(self):
def get_model_groups(self, model_type=None):
data = self._load_metadata()
return data.get("_groups", {})
raw = data.get("_groups", {})
def save_model_groups(self, groups):
# Migrate old flat format { "groupName": [...] } → per-type { "checkpoint": {...} }
if raw and not any(k in MODEL_TYPE_FOLDER_KEYS for k in raw):
logger.info("Migrating groups to per-type format (old data moved to _groups_legacy)")
data["_groups_legacy"] = raw
data["_groups"] = {}
self._save_metadata(data)
raw = {}
if model_type:
return raw.get(model_type, {})
return raw
def save_model_groups(self, groups, model_type):
data = self._load_metadata()
data["_groups"] = groups
if not isinstance(data.get("_groups"), dict):
data["_groups"] = {}
data["_groups"][model_type] = groups
self._save_metadata(data)
return groups
def find_model_file(self, model_type, model_name):
"""Find a model file, checking both enabled and disabled states.
Returns (Path, is_enabled) or (None, None) if not found.
"""
dirs = _get_model_dirs(model_type)
for d in dirs:
enabled = d / model_name
if enabled.is_file():
return enabled, True
disabled = d / (model_name + _DISABLED_SUFFIX)
if disabled.is_file():
return disabled, False
return None, None
def enable_model(self, model_type, model_name):
"""Rename model.safetensors.disabled → model.safetensors."""
path, is_enabled = self.find_model_file(model_type, model_name)
if path is None:
raise FileNotFoundError(f"Model not found: {model_name}")
if is_enabled:
return
target = path.parent / path.name[: -len(_DISABLED_SUFFIX)]
path.rename(target)
logger.info("Enabled model: %s", model_name)
def disable_model(self, model_type, model_name):
"""Rename model.safetensors → model.safetensors.disabled."""
path, is_enabled = self.find_model_file(model_type, model_name)
if path is None:
raise FileNotFoundError(f"Model not found: {model_name}")
if not is_enabled:
return
target = path.parent / (path.name + _DISABLED_SUFFIX)
path.rename(target)
logger.info("Disabled model: %s", model_name)
def scan_disabled_models(self, model_type):
"""Scan directories for .disabled files.
Returns list of normalized model names (without .disabled suffix).
"""
dirs = _get_model_dirs(model_type)
disabled = []
for d in dirs:
if not d.is_dir():
continue
for f in d.rglob("*"):
if f.is_file() and f.name.endswith(_DISABLED_SUFFIX):
try:
rel = str(f.relative_to(d))
if rel.endswith(_DISABLED_SUFFIX):
rel = rel[: -len(_DISABLED_SUFFIX)]
disabled.append(rel.replace("\\", "/"))
except ValueError:
pass
return disabled
def find_preview_image(self, model_type, model_name):
"""Find preview image for a model file.
@@ -148,3 +229,48 @@ class ModelsService:
logger.debug("Preview: model file not found in any dir: %s", model_name)
return None
def delete_model(self, model_type, model_name):
"""Delete a model file and all associated preview/sidecar files.
Also removes the model's metadata entry.
Returns dict with deleted file paths.
"""
if ".." in model_name:
raise ValueError(f"Invalid model name: {model_name}")
path, _ = self.find_model_file(model_type, model_name)
if path is None:
raise FileNotFoundError(f"Model not found: {model_name}")
deleted = []
parent = path.parent
# Compute stem from the original (non-disabled) filename.
# path.name for a disabled file is e.g. "model.safetensors.disabled"
# so we strip the .disabled suffix first, then take Path.stem.
orig_name = path.name
if orig_name.endswith(_DISABLED_SUFFIX):
orig_name = orig_name[: -len(_DISABLED_SUFFIX)]
stem = Path(orig_name).stem # "model.safetensors" -> "model"
# Delete the model file itself
path.unlink()
deleted.append(str(path))
logger.info("Deleted model file: %s", path)
# Delete all sidecar files (previews, metadata, info)
for ext in _SIDECAR_EXTENSIONS:
sidecar = parent / (stem + ext)
if sidecar.is_file():
sidecar.unlink()
deleted.append(str(sidecar))
logger.info("Deleted sidecar: %s", sidecar)
# Remove metadata entry
data = self._load_metadata()
if model_name in data:
del data[model_name]
self._save_metadata(data)
return {"deleted": deleted}
+143
View File
@@ -3235,3 +3235,146 @@ body {
flex: 1;
overflow-y: auto;
}
/* ============================================
Model Enable / Disable
============================================ */
/* Disabled model: gray out the card */
.wfm-model-disabled {
opacity: 0.45;
filter: grayscale(60%);
}
.wfm-model-disabled:hover {
opacity: 0.65;
}
/* Overlay label on thumb */
.wfm-disabled-overlay {
position: absolute;
bottom: 4px;
left: 4px;
background: rgba(0,0,0,0.65);
color: #ff6b6b;
font-size: 10px;
font-weight: 700;
padding: 2px 5px;
border-radius: 3px;
letter-spacing: 0.5px;
pointer-events: none;
}
/* Toggle button – thumb/card view (absolute bottom-right) */
.wfm-toggle-btn {
position: absolute;
bottom: 6px;
right: 6px;
background: none;
border: none;
font-size: 13px;
color: var(--wfm-text-secondary);
cursor: pointer;
padding: 2px;
line-height: 1;
opacity: 0.4;
transition: opacity 0.15s, color 0.15s;
}
.wfm-toggle-btn:hover {
opacity: 1;
color: var(--wfm-primary);
}
.wfm-toggle-btn.wfm-toggle-disabled {
color: #ff6b6b;
opacity: 0.7;
}
/* Card view: fav and toggle are flex siblings */
.wfm-view-card .wfm-toggle-btn {
position: static;
flex-shrink: 0;
margin-right: 4px;
}
/* Table view toggle cell */
.wfm-table-td-toggle {
text-align: center;
width: 40px;
}
.wfm-table-td-toggle .wfm-toggle-btn {
position: static;
opacity: 0.5;
}
/* Disabled badge in card title */
.wfm-badge-disabled {
background: rgba(255, 107, 107, 0.2);
color: #ff6b6b;
font-size: 10px;
font-weight: 700;
border: 1px solid rgba(255, 107, 107, 0.4);
}
/* ── Multi-select ─────────────────────────────────────── */
.wfm-select-check {
position: absolute;
top: 6px;
left: 6px;
width: 20px;
height: 20px;
border-radius: 4px;
border: 2px solid rgba(255, 255, 255, 0.6);
background: rgba(0, 0, 0, 0.45);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wfm-select-check.checked {
background: #6c8ef5;
border-color: #6c8ef5;
color: #fff;
}
.wfm-select-check.checked::after {
content: "✓";
}
.wfm-view-thumb .wfm-model-card.wfm-card-checked,
.wfm-view-card .wfm-model-card.wfm-card-checked {
outline: 2px solid #6c8ef5;
outline-offset: -2px;
}
.wfm-table-td-check {
width: 28px;
text-align: center;
padding: 0 4px;
}
.wfm-table-td-check .wfm-select-check {
position: static;
}
.wfm-bulk-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(108, 142, 245, 0.12);
border-bottom: 1px solid rgba(108, 142, 245, 0.3);
flex-wrap: wrap;
}
.wfm-bulk-count {
font-size: 13px;
color: #a0a8c0;
margin-right: 4px;
}
.wfm-bulk-sep {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, 0.15);
margin: 0 4px;
}
+2 -1
View File
@@ -281,7 +281,8 @@ function applyI18nToHtml() {
"wfm-help-models-3": "helpModels3", "wfm-help-models-4": "helpModels4",
"wfm-help-models-5": "helpModels5", "wfm-help-models-6": "helpModels6",
"wfm-help-models-7": "helpModels7", "wfm-help-models-8": "helpModels8",
"wfm-help-models-9": "helpModels9",
"wfm-help-models-9": "helpModels9", "wfm-help-models-10": "helpModels10",
"wfm-help-models-11": "helpModels11",
"wfm-help-gallery-title": "helpGalleryTitle",
"wfm-help-gallery-1": "helpGallery1", "wfm-help-gallery-2": "helpGallery2",
"wfm-help-gallery-3": "helpGallery3", "wfm-help-gallery-4": "helpGallery4",
+7 -1
View File
@@ -88,7 +88,13 @@ export const comfyUI = {
try {
const info = await this.fetchObjectInfo(cls);
if (info?.[cls]?.input?.required?.[inputKey]) {
return info[cls].input.required[inputKey][0] || [];
const inputDef = info[cls].input.required[inputKey];
const first = inputDef[0];
if (Array.isArray(first)) return first;
// Newer ComfyUI format: ["COMBO", { "values": [...] }]
if (typeof first === "string" && Array.isArray(inputDef[1]?.values)) {
return inputDef[1].values;
}
}
} catch {}
}
+75 -3
View File
@@ -273,6 +273,28 @@ const LANGUAGES = {
modelsGroupExists: "Group already exists",
modelsRenamePrompt: "Enter new group name:",
modelsDeleteGroupConfirm: "Delete group \"{name}\"?",
modelEnable: "Enable",
modelDisable: "Disable",
modelDisabled: "Disabled",
modelStatusAll: "All",
modelStatusEnabled: "Enabled only",
modelStatusDisabled: "Disabled only",
modelGroupEnableAll: "Enable All",
modelGroupDisableAll: "Disable All",
modelToggleError: "Failed to toggle model",
modelStatusWarning: "Changes take effect after ComfyUI refresh",
modelSelectMode: "Select",
modelSelectExit: "Exit Select",
modelSelected: "selected",
modelBulkAddGroup: "Add to Group",
modelBulkRemoveGroup: "Remove from Group",
modelBulkCreateAdd: "Create & Add",
modelBulkAddDone: "models added to group",
modelBulkRemoveDone: "models removed from group",
modelBulkDelete: "Delete Files",
modelBulkDeleteConfirm: "Permanently delete {count} model file(s) and their preview images? This cannot be undone.",
modelBulkDeleteDone: "model file(s) deleted",
modelBulkDeleteError: "Failed to delete some models",
civitaiFetchDesc: "Fetch model information from CivitAI using SHA256 hash.",
civitaiFetch: "Fetch from CivitAI",
civitaiHashing: "Calculating hash... (may take a while for large files)",
@@ -350,13 +372,15 @@ const LANGUAGES = {
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",
helpModels3: "Search, tag filter, group filter, favorites filter, and status filter (All / Enabled only / Disabled only)",
helpModels4: "Side panel: Info (file path, tags, memo), Groups management, CivitAI integration",
helpModels5: "CivitAI integration: fetch model info by SHA256 hash, batch fetch per model type",
helpModels6: "Detail modal: preview image, CivitAI info (base model, trained words, tags), thumbnail change",
helpModels7: "Group management: create, rename, delete groups and assign/remove models",
helpModels8: "GenUI Model button: apply the selected model to the corresponding node in GenerateUI's current workflow (Checkpoint / LoRA / VAE / ControlNet / UNET / TextEncoder)",
helpModels9: "User-defined badges: assign free-label badges with custom colors shared with the Workflow tab",
helpModels10: "Enable/Disable models: toggle visibility in ComfyUI by renaming file extension (.disabled suffix). Disable per model (⏸ button on each card) or per group (Enable All / Disable All in Group panel). Changes take effect after ComfyUI refresh.",
helpModels11: "Multi-select & bulk operations: click Select to enter selection mode, check multiple models, then use the bulk action bar to add/remove from groups or permanently delete files (model file + preview images + sidecar files such as .json/.info).",
helpGalleryTitle: "Gallery Tab",
helpGallery1: "Browse images in the ComfyUI output folder — set the folder path in Settings > Gallery Output Folder",
helpGallery2: "3-column layout: folder tree (left) | image grid (center) | detail panel (right)",
@@ -772,6 +796,28 @@ const LANGUAGES = {
modelsGroupExists: "同名のグループが既に存在します",
modelsRenamePrompt: "新しいグループ名を入力:",
modelsDeleteGroupConfirm: "グループ「{name}」を削除しますか?",
modelEnable: "有効化",
modelDisable: "無効化",
modelDisabled: "無効",
modelStatusAll: "すべて",
modelStatusEnabled: "有効のみ",
modelStatusDisabled: "無効のみ",
modelGroupEnableAll: "全て有効化",
modelGroupDisableAll: "全て無効化",
modelToggleError: "切り替えに失敗しました",
modelStatusWarning: "ComfyUIをリフレッシュ後に反映されます",
modelSelectMode: "選択",
modelSelectExit: "選択終了",
modelSelected: "件選択中",
modelBulkAddGroup: "グループに追加",
modelBulkRemoveGroup: "グループから削除",
modelBulkCreateAdd: "作成して追加",
modelBulkAddDone: "件をグループに追加しました",
modelBulkRemoveDone: "件をグループから削除しました",
modelBulkDelete: "ファイルを削除",
modelBulkDeleteConfirm: "{count}件のモデルファイルとプレビュー画像を完全に削除しますか?この操作は取り消せません。",
modelBulkDeleteDone: "件のモデルファイルを削除しました",
modelBulkDeleteError: "一部のモデルの削除に失敗しました",
civitaiFetchDesc: "SHA256ハッシュを使用してCivitAIからモデル情報を取得します。",
civitaiFetch: "CivitAIから取得",
civitaiHashing: "ハッシュ計算中...(大きいファイルは時間がかかります)",
@@ -849,13 +895,15 @@ const LANGUAGES = {
helpNodes6: "ノードセット:再利用可能なノードコレクションの作成(説明、タグ、ノード間リンク定義付き)",
helpModels1: "インストール済みモデルの閲覧:Checkpoint、LoRA、VAE、ControlNet、UNET、TextEncoder、Hypernetwork、Embeddingをサブタブで切り替え",
helpModels2: "サムネイル / カード / テーブル表示モード切り替え(ページネーション付き)",
helpModels3: "検索、タグフィルタ、グループフィルタ、お気に入りフィルタ",
helpModels3: "検索、タグフィルタ、グループフィルタ、お気に入りフィルタ、ステータスフィルタ(すべて / 有効のみ / 無効のみ)",
helpModels4: "サイドパネル:基本情報(ファイルパス、タグ、メモ)、グループ管理、CivitAI連携",
helpModels5: "CivitAI連携:SHA256ハッシュでモデル情報取得、モデルタイプごとの一括取得",
helpModels6: "詳細モーダル:プレビュー画像、CivitAI情報(ベースモデル、トリガーワード、タグ)、サムネイル変更",
helpModels7: "グループ管理:グループの作成・名前変更・削除、モデルの割り当て・解除",
helpModels8: "GenUI Modelボタン:選択モデルをGenerateUIの現在のワークフローの該当ノードに直接適用(Checkpoint / LoRA / VAE / ControlNet / UNET / TextEncoder)",
helpModels9: "ユーザー定義バッジ:自由ラベルのバッジをモデルに付与(Workflowタブと色パレットを共有)",
helpModels10: "モデルの有効/無効切り替え:拡張子リネーム(.disabledサフィックス)でComfyUIへの表示を制御。各カードの⏸ボタンで単体操作、グループパネルの「全て有効化 / 全て無効化」でグループ一括操作。変更はComfyUIリフレッシュ後に反映。",
helpModels11: "複数選択と一括操作:「選択」ボタンで選択モードに入り複数モデルにチェックを入れると、一括操作バーからグループへの追加/削除、またはファイルの完全削除(モデルファイル+プレビュー画像+.json/.infoなどのサイドカーファイル)が行えます。",
helpGalleryTitle: "Galleryタブ",
helpGallery1: "ComfyUIの出力フォルダ内画像を閲覧 — Settings > Gallery Output Folder でフォルダパスを設定可能",
helpGallery2: "3カラムレイアウト: フォルダツリー (左) | 画像グリッド (中央) | 詳細パネル (右)",
@@ -1267,6 +1315,28 @@ const LANGUAGES = {
modelsGroupExists: "同名分组已存在",
modelsRenamePrompt: "输入新分组名称:",
modelsDeleteGroupConfirm: "删除分组「{name}」?",
modelEnable: "启用",
modelDisable: "禁用",
modelDisabled: "已禁用",
modelStatusAll: "全部",
modelStatusEnabled: "仅启用",
modelStatusDisabled: "仅禁用",
modelGroupEnableAll: "全部启用",
modelGroupDisableAll: "全部禁用",
modelToggleError: "切换失败",
modelStatusWarning: "刷新ComfyUI后生效",
modelSelectMode: "选择",
modelSelectExit: "退出选择",
modelSelected: "个已选中",
modelBulkAddGroup: "添加到分组",
modelBulkRemoveGroup: "从分组移除",
modelBulkCreateAdd: "创建并添加",
modelBulkAddDone: "个模型已添加到分组",
modelBulkRemoveDone: "个模型已从分组移除",
modelBulkDelete: "删除文件",
modelBulkDeleteConfirm: "永久删除 {count} 个模型文件及其预览图?此操作无法撤销。",
modelBulkDeleteDone: "个模型文件已删除",
modelBulkDeleteError: "部分模型删除失败",
civitaiFetchDesc: "使用SHA256哈希从CivitAI获取模型信息。",
civitaiFetch: "从CivitAI获取",
civitaiHashing: "计算哈希中...(大文件可能需要较长时间)",
@@ -1344,13 +1414,15 @@ const LANGUAGES = {
helpNodes6: "节点集:创建可复用的节点集合(含描述、标签、节点间链接定义)",
helpModels1: "浏览已安装模型:Checkpoint、LoRA、VAE、ControlNet、UNET、TextEncoder、Hypernetwork、Embedding,通过子标签切换",
helpModels2: "缩略图、卡片和表格视图模式切换(带分页)",
helpModels3: "搜索、标签筛选、分组筛选、收藏筛选",
helpModels3: "搜索、标签筛选、分组筛选、收藏筛选、状态筛选(全部 / 仅启用 / 仅禁用)",
helpModels4: "侧面板:基本信息(文件路径、标签、备注)、分组管理、CivitAI集成",
helpModels5: "CivitAI集成:通过SHA256哈希获取模型信息,按模型类型批量获取",
helpModels6: "详情弹窗:预览图片、CivitAI信息(基础模型、触发词、标签)、缩略图更改",
helpModels7: "分组管理:创建、重命名、删除分组,分配/移除模型",
helpModels8: "GenUI Model按钮:将选中模型直接应用到GenerateUI当前工作流的对应节点(Checkpoint / LoRA / VAE / ControlNet / UNET / TextEncoder)",
helpModels9: "用户自定义徽章:为模型添加自由标签徽章(颜色调色板与Workflow标签共享)",
helpModels10: "模型启用/禁用:通过重命名文件扩展名(添加.disabled后缀)控制ComfyUI中的显示。点击每个卡片上的⏸按钮单独操作,或在分组面板中使用「全部启用/全部禁用」进行批量操作。更改在刷新ComfyUI后生效。",
helpModels11: "多选与批量操作:点击「选择」按钮进入选择模式,勾选多个模型后,可通过批量操作栏将其添加/移出分组,或永久删除文件(模型文件+预览图+.json/.info等附属文件)。",
helpGalleryTitle: "图库标签页 (Gallery)",
helpGallery1: "浏览 ComfyUI 输出文件夹中的图像 — 可以在 设置 > 图库输出文件夹 中设置文件夹路径",
helpGallery2: "三列布局:文件夹树(左) | 图像网格(中) | 详情面板(右)",
+422 -29
View File
@@ -23,12 +23,17 @@ const state = {
},
modelMetadata: {},
modelGroups: {},
allModelGroups: {}, // { type: { groupName: [models] } } — all types
civitaiCache: {},
disabledModels: {}, // { type: Set<modelName> }
selectMode: false,
selectedModels: new Set(),
searchText: "",
tagFilter: "",
badgeFilter: "",
dirFilter: "",
groupFilter: "",
statusFilter: "all", // "all" | "enabled" | "disabled"
showFavoritesOnly: false,
viewMode: localStorage.getItem("wfm_models_view") || "thumb",
activeModelType: "checkpoint",
@@ -200,6 +205,225 @@ function modelBadgesHtml(modelName, clickable = false) {
// ── API ───────────────────────────────────────────────────
// ── Multi-select & Bulk Group Operations ─────────────────
function toggleSelectMode() {
state.selectMode = !state.selectMode;
if (!state.selectMode) state.selectedModels.clear();
const btn = document.getElementById("wfm-models-select-btn");
if (btn) {
btn.classList.toggle("active", state.selectMode);
btn.textContent = state.selectMode ? t("modelSelectExit") : t("modelSelectMode");
}
renderModelGrid();
renderBulkActionBar();
}
function toggleModelSelection(modelName) {
if (state.selectedModels.has(modelName)) {
state.selectedModels.delete(modelName);
} else {
state.selectedModels.add(modelName);
}
// Update DOM directly (avoid full re-render)
document.querySelectorAll("[data-model-name]").forEach((el) => {
if (el.dataset.modelName !== modelName) return;
const checked = state.selectedModels.has(modelName);
el.classList.toggle("wfm-card-checked", checked);
const c = el.querySelector(".wfm-select-check");
if (c) c.classList.toggle("checked", checked);
});
renderBulkActionBar();
}
function clearSelection() {
state.selectedModels.clear();
renderModelGrid();
renderBulkActionBar();
}
function renderBulkActionBar() {
const bar = document.getElementById("wfm-models-bulk-bar");
if (!bar) return;
if (!state.selectMode || state.selectedModels.size === 0) {
bar.style.display = "none";
return;
}
const count = state.selectedModels.size;
const groupNames = Object.keys(state.modelGroups).sort();
const noGroups = groupNames.length === 0;
const groupOptions = noGroups
? `<option value="">${t("modelsNoGroupAvailable")}</option>`
: groupNames.map((g) => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("");
bar.style.display = "flex";
bar.innerHTML = `
<span class="wfm-bulk-count">${count} ${t("modelSelected")}</span>
<select id="wfm-bulk-group-select" class="wfm-select" style="font-size:12px;">${groupOptions}</select>
<button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-bulk-add-btn"${noGroups ? " disabled" : ""}>${t("modelBulkAddGroup")}</button>
<button class="wfm-btn wfm-btn-sm wfm-btn-danger" id="wfm-bulk-remove-btn"${noGroups ? " disabled" : ""}>${t("modelBulkRemoveGroup")}</button>
<span class="wfm-bulk-sep">|</span>
<input type="text" id="wfm-bulk-new-group-input" class="wfm-search-input" style="width:120px;font-size:12px;" placeholder="${t("modelsGroupName")}">
<button class="wfm-btn wfm-btn-sm" id="wfm-bulk-create-add-btn">${t("modelBulkCreateAdd")}</button>
<button class="wfm-btn wfm-btn-sm" id="wfm-bulk-clear-btn" title="Clear selection">&times;</button>
<span class="wfm-bulk-sep" style="margin-left:8px;"></span>
<button class="wfm-btn wfm-btn-sm wfm-btn-danger" id="wfm-bulk-delete-btn">${t("modelBulkDelete")}</button>
`;
document.getElementById("wfm-bulk-add-btn")?.addEventListener("click", () => {
const g = document.getElementById("wfm-bulk-group-select")?.value;
if (g) bulkAddToGroup(g);
});
document.getElementById("wfm-bulk-remove-btn")?.addEventListener("click", () => {
const g = document.getElementById("wfm-bulk-group-select")?.value;
if (g) bulkRemoveFromGroup(g);
});
document.getElementById("wfm-bulk-create-add-btn")?.addEventListener("click", () => {
const input = document.getElementById("wfm-bulk-new-group-input");
const name = input?.value.trim();
if (!name) return;
if (state.modelGroups[name]) { showToast(t("modelsGroupExists"), "warning"); return; }
bulkAddToGroup(name);
});
document.getElementById("wfm-bulk-clear-btn")?.addEventListener("click", clearSelection);
document.getElementById("wfm-bulk-delete-btn")?.addEventListener("click", bulkDeleteModels);
}
async function bulkAddToGroup(groupName) {
const groups = { ...state.modelGroups };
if (!groups[groupName]) groups[groupName] = [];
const toAdd = [...state.selectedModels].filter((m) => !groups[groupName].includes(m));
groups[groupName] = [...groups[groupName], ...toAdd];
await saveModelGroups(groups);
showToast(`${toAdd.length} ${t("modelBulkAddDone")}`, "success");
renderBulkActionBar();
}
async function bulkRemoveFromGroup(groupName) {
const groups = { ...state.modelGroups };
if (!groups[groupName]) return;
const before = groups[groupName].length;
groups[groupName] = groups[groupName].filter((m) => !state.selectedModels.has(m));
const removed = before - groups[groupName].length;
if (groups[groupName].length === 0) delete groups[groupName];
await saveModelGroups(groups);
showToast(`${removed} ${t("modelBulkRemoveDone")}`, "success");
renderModelGrid();
renderBulkActionBar();
}
async function bulkDeleteModels() {
const count = state.selectedModels.size;
if (count === 0) return;
const msg = t("modelBulkDeleteConfirm").replace("{count}", count);
if (!window.confirm(msg)) return;
const model_names = [...state.selectedModels];
try {
const res = await fetch("/api/wfm/models/delete", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ model_type: state.activeModelType, model_names }),
});
const data = await res.json();
const okCount = (data.ok || []).length;
const errCount = (data.errors || []).length;
if (errCount > 0) {
showToast(`${t("modelBulkDeleteError")}: ${errCount} errors`, "error");
}
if (okCount > 0) {
showToast(`${okCount} ${t("modelBulkDeleteDone")}`, "success");
// Remove deleted models from local state
model_names.forEach((mn) => {
const list = state.modelsByType[state.activeModelType];
const idx = list.indexOf(mn);
if (idx !== -1) list.splice(idx, 1);
delete state.modelMetadata[mn];
const ds = state.disabledModels[state.activeModelType];
if (ds) ds.delete(mn);
state.selectedModels.delete(mn);
});
state.loaded[state.activeModelType] = false;
renderModelGrid();
renderBulkActionBar();
}
} catch (err) {
showToast(`${t("modelBulkDeleteError")}: ${err.message}`, "error");
}
}
// ── Enable / Disable helpers ──────────────────────────────
function isModelDisabled(modelName) {
const s = state.disabledModels[state.activeModelType];
return s ? s.has(modelName) : false;
}
async function fetchDisabledModels(type) {
try {
const res = await fetch(`/api/wfm/models/disabled?type=${encodeURIComponent(type)}`);
return res.ok ? await res.json() : [];
} catch { return []; }
}
async function toggleModelEnable(modelName) {
const nowDisabled = isModelDisabled(modelName);
const newEnabled = nowDisabled;
try {
const res = await fetch("/api/wfm/models/toggle", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model_type: state.activeModelType,
model_name: modelName,
enabled: newEnabled,
}),
});
if (!res.ok) {
const err = await res.json();
throw new Error(err.error || "toggle failed");
}
const s = state.disabledModels[state.activeModelType] || new Set();
if (newEnabled) s.delete(modelName);
else s.add(modelName);
state.disabledModels[state.activeModelType] = s;
showToast(t("modelStatusWarning"), "info");
renderModelGrid();
if (state.selectedModel === modelName) renderSideInfo(modelName);
} catch (err) {
showToast(t("modelToggleError") + ": " + err.message, "error");
}
}
async function toggleGroupEnable(groupName, enable) {
try {
const res = await fetch("/api/wfm/models/group-toggle", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model_type: state.activeModelType,
group_name: groupName,
enabled: enable,
}),
});
if (!res.ok) {
const err = await res.json();
throw new Error(err.error || "group toggle failed");
}
const data = await res.json();
const members = state.modelGroups[groupName] || [];
const s = state.disabledModels[state.activeModelType] || new Set();
members.forEach((m) => { if (enable) s.delete(m); else s.add(m); });
state.disabledModels[state.activeModelType] = s;
const errCount = data.errors?.length || 0;
if (errCount > 0) showToast(`${errCount} ${t("modelToggleError")}`, "warning");
showToast(t("modelStatusWarning"), "info");
renderModelGrid();
} catch (err) {
showToast(t("modelToggleError") + ": " + err.message, "error");
}
}
async function fetchModelMetadata() {
try {
const res = await fetch("/api/wfm/models/metadata");
@@ -236,6 +460,12 @@ function getCurrentModels() {
function filterModels() {
let models = getCurrentModels();
if (state.statusFilter === "enabled") {
models = models.filter((m) => !isModelDisabled(m));
} else if (state.statusFilter === "disabled") {
models = models.filter((m) => isModelDisabled(m));
}
if (state.showFavoritesOnly) {
models = models.filter((m) => {
const meta = state.modelMetadata[m];
@@ -428,11 +658,31 @@ function renderTagFilter() {
function renderGroupFilter() {
const select = document.getElementById("wfm-models-group-filter");
if (!select) return;
const groups = Object.keys(state.modelGroups).sort();
// Collect groups across all types with type labels
const options = [];
const typeOrder = Object.keys(TYPE_LABELS);
typeOrder.forEach((type) => {
const groups = state.allModelGroups[type];
if (!groups) return;
const names = Object.keys(groups).sort();
names.forEach((g) => {
options.push({ type, name: g });
});
});
const currentValue = state.groupFilter
? `${state.activeModelType}::${state.groupFilter}`
: "";
select.innerHTML =
`<option value="">${t("modelsAllGroups")}</option>` +
groups.map((g) => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("");
select.value = state.groupFilter;
options.map(({ type, name }) => {
const typeLabel = TYPE_LABELS[type] || type;
const value = `${type}::${name}`;
const isActive = value === currentValue;
return `<option value="${escapeHtml(value)}"${isActive ? " selected" : ""}>[${typeLabel}] ${escapeHtml(name)}</option>`;
}).join("");
}
function renderDirFilter() {
@@ -450,6 +700,13 @@ function renderDirFilter() {
}
async function fetchModelGroups() {
try {
const res = await fetch(`/api/wfm/models/groups?type=${encodeURIComponent(state.activeModelType)}`);
return res.ok ? await res.json() : {};
} catch { return {}; }
}
async function fetchAllModelGroups() {
try {
const res = await fetch("/api/wfm/models/groups");
return res.ok ? await res.json() : {};
@@ -458,12 +715,14 @@ async function fetchModelGroups() {
async function saveModelGroups(groups) {
state.modelGroups = groups;
state.allModelGroups[state.activeModelType] = groups;
await fetch("/api/wfm/models/groups", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(groups),
body: JSON.stringify({ model_type: state.activeModelType, groups }),
});
renderGroupFilter();
renderBulkActionBar();
}
// ── Render: Grid ──────────────────────────────────────────
@@ -503,6 +762,7 @@ function renderThumbView(grid, models) {
models.forEach((modelName) => {
const meta = state.modelMetadata[modelName] || {};
const { name } = parseModelPath(modelName);
const disabled = isModelDisabled(modelName);
const userBadges = modelBadgesHtml(modelName);
const tagsHtml = (meta.tags || []).map((tag) => `<span class="wfm-badge wfm-badge-sm">${escapeHtml(tag)}</span>`).join("");
const favStar = meta.favorite ? "\u2605" : "\u2606";
@@ -510,6 +770,7 @@ function renderThumbView(grid, models) {
const card = document.createElement("div");
card.className = "wfm-card";
if (disabled) card.classList.add("wfm-model-disabled");
if (state.selectedModel === modelName) card.classList.add("wfm-card-selected");
card.dataset.modelName = modelName;
@@ -517,12 +778,14 @@ function renderThumbView(grid, models) {
<div class="wfm-card-thumb">
<img style="display:none" />
<span class="wfm-card-thumb-placeholder">${t("modelsNoPreview")}</span>
${disabled ? `<span class="wfm-disabled-overlay">${t("modelDisabled")}</span>` : ""}
</div>
<div class="wfm-card-body">
<div class="wfm-card-title" title="${escapeHtml(modelName)}">${escapeHtml(getStem(name))}</div>
<div class="wfm-card-meta">${userBadges} ${tagsHtml}</div>
</div>
<button class="${favClass}" title="${t("modelsFavorite")}">${favStar}</button>`;
<button class="${favClass}" title="${t("modelsFavorite")}">${favStar}</button>
<button class="wfm-toggle-btn${disabled ? " wfm-toggle-disabled" : ""}" title="${disabled ? t("modelEnable") : t("modelDisable")}">${disabled ? "▶" : "⏸"}</button>`;
// Load preview without 404 console spam
const img = card.querySelector(".wfm-card-thumb img");
@@ -533,11 +796,24 @@ function renderThumbView(grid, models) {
e.stopPropagation();
toggleFavorite(modelName);
});
card.addEventListener("click", () => showSidePanel(modelName));
card.addEventListener("dblclick", (e) => {
card.querySelector(".wfm-toggle-btn").addEventListener("click", (e) => {
e.stopPropagation();
openDetailModal(modelName);
toggleModelEnable(modelName);
});
if (state.selectMode) {
const isChecked = state.selectedModels.has(modelName);
card.classList.toggle("wfm-card-checked", isChecked);
const checkEl = document.createElement("div");
checkEl.className = "wfm-select-check" + (isChecked ? " checked" : "");
card.appendChild(checkEl);
card.addEventListener("click", (e) => {
if (e.target.closest(".wfm-fav-btn, .wfm-toggle-btn")) return;
toggleModelSelection(modelName);
});
} else {
card.addEventListener("click", () => showSidePanel(modelName));
card.addEventListener("dblclick", (e) => { e.stopPropagation(); openDetailModal(modelName); });
}
grid.appendChild(card);
});
}
@@ -550,6 +826,7 @@ function renderCardView(grid, models) {
const meta = state.modelMetadata[modelName] || {};
const { dir, name } = parseModelPath(modelName);
const ext = getExtension(name);
const disabled = isModelDisabled(modelName);
const userBadges = modelBadgesHtml(modelName);
const tagsHtml = (meta.tags || []).map((tag) => `<span class="wfm-badge wfm-badge-sm">${escapeHtml(tag)}</span>`).join("");
const favStar = meta.favorite ? "\u2605" : "\u2606";
@@ -557,27 +834,42 @@ function renderCardView(grid, models) {
const card = document.createElement("div");
card.className = "wfm-card wfm-model-card";
if (disabled) card.classList.add("wfm-model-disabled");
if (state.selectedModel === modelName) card.classList.add("wfm-card-selected");
card.dataset.modelName = modelName;
card.innerHTML = `
<div class="wfm-card-body">
<div class="wfm-card-title" title="${escapeHtml(modelName)}">${escapeHtml(name)}</div>
<div class="wfm-card-title" title="${escapeHtml(modelName)}">${escapeHtml(name)}${disabled ? ` <span class="wfm-badge wfm-badge-disabled">${t("modelDisabled")}</span>` : ""}</div>
<div class="wfm-card-meta">
${userBadges} ${tagsHtml}
</div>
</div>
<button class="${favClass}" title="${t("modelsFavorite")}">${favStar}</button>`;
<button class="${favClass}" title="${t("modelsFavorite")}">${favStar}</button>
<button class="wfm-toggle-btn${disabled ? " wfm-toggle-disabled" : ""}" title="${disabled ? t("modelEnable") : t("modelDisable")}">${disabled ? "▶" : "⏸"}</button>`;
card.querySelector(".wfm-fav-btn").addEventListener("click", (e) => {
e.stopPropagation();
toggleFavorite(modelName);
});
card.addEventListener("click", () => showSidePanel(modelName));
card.addEventListener("dblclick", (e) => {
card.querySelector(".wfm-toggle-btn").addEventListener("click", (e) => {
e.stopPropagation();
openDetailModal(modelName);
toggleModelEnable(modelName);
});
if (state.selectMode) {
const isChecked = state.selectedModels.has(modelName);
card.classList.toggle("wfm-card-checked", isChecked);
const checkEl = document.createElement("div");
checkEl.className = "wfm-select-check" + (isChecked ? " checked" : "");
card.appendChild(checkEl);
card.addEventListener("click", (e) => {
if (e.target.closest(".wfm-fav-btn, .wfm-toggle-btn")) return;
toggleModelSelection(modelName);
});
} else {
card.addEventListener("click", () => showSidePanel(modelName));
card.addEventListener("dblclick", (e) => { e.stopPropagation(); openDetailModal(modelName); });
}
grid.appendChild(card);
});
}
@@ -590,10 +882,18 @@ function renderTableView(grid, models) {
const meta = state.modelMetadata[modelName] || {};
const { dir, name } = parseModelPath(modelName);
const ext = getExtension(name);
const disabled = isModelDisabled(modelName);
const isChecked = state.selectMode && state.selectedModels.has(modelName);
const favIcon = meta.favorite ? "&#9733;" : "&#9734;";
const tagsStr = (meta.tags || []).join(", ");
const memo = meta.memo || "";
return `<tr class="wfm-models-table-row${state.selectedModel === modelName ? " wfm-card-selected" : ""}" data-model-name="${escapeHtml(modelName)}">
const toggleLabel = disabled ? t("modelEnable") : t("modelDisable");
const toggleIcon = disabled ? "▶" : "⏸";
const checkCell = state.selectMode
? `<td class="wfm-table-td-check"><div class="wfm-select-check${isChecked ? " checked" : ""}"></div></td>`
: "";
return `<tr class="wfm-models-table-row${state.selectedModel === modelName ? " wfm-card-selected" : ""}${disabled ? " wfm-model-disabled" : ""}${isChecked ? " wfm-card-checked" : ""}" data-model-name="${escapeHtml(modelName)}">
${checkCell}
<td class="wfm-models-table-fav" title="Favorite">${favIcon}</td>
<td class="wfm-table-td-thumb"><img class="wfm-table-thumb" style="display:none" /></td>
<td title="${escapeHtml(modelName)}">${escapeHtml(name)}</td>
@@ -601,11 +901,14 @@ function renderTableView(grid, models) {
<td class="wfm-table-td-ext">${escapeHtml(ext)}</td>
<td>${escapeHtml(tagsStr)}</td>
<td class="wfm-table-td-memo" title="${escapeHtml(memo)}">${escapeHtml(memo)}</td>
<td class="wfm-table-td-toggle"><button class="wfm-toggle-btn${disabled ? " wfm-toggle-disabled" : ""}" title="${toggleLabel}">${toggleIcon}</button></td>
</tr>`;
})
.join("");
const checkTh = state.selectMode ? `<th style="width:24px;"></th>` : "";
grid.innerHTML = `<table class="wfm-models-table"><thead><tr>
${checkTh}
<th style="width:30px;">&#9733;</th>
<th style="width:40px;"></th>
<th>${t("modelsFileName")}</th>
@@ -613,23 +916,31 @@ function renderTableView(grid, models) {
<th class="wfm-table-th-ext">${t("modelsExt")}</th>
<th>${t("modelsTags")}</th>
<th>${t("modelsMemo")}</th>
<th style="width:50px;"></th>
</tr></thead><tbody>${rows}</tbody></table>`;
grid.querySelectorAll(".wfm-models-table-row").forEach((row) => {
const mn = row.dataset.modelName;
// Load preview image without 404 console spam
const img = row.querySelector(".wfm-table-thumb");
if (img) loadPreviewImage(img, null, mn);
row.addEventListener("click", () => showSidePanel(mn));
row.addEventListener("dblclick", (e) => {
e.stopPropagation();
openDetailModal(mn);
});
if (state.selectMode) {
row.addEventListener("click", (e) => {
if (e.target.closest(".wfm-models-table-fav, .wfm-toggle-btn")) return;
toggleModelSelection(mn);
});
} else {
row.addEventListener("click", () => showSidePanel(mn));
row.addEventListener("dblclick", (e) => { e.stopPropagation(); openDetailModal(mn); });
}
row.querySelector(".wfm-models-table-fav").addEventListener("click", (e) => {
e.stopPropagation();
toggleFavorite(mn);
});
row.querySelector(".wfm-toggle-btn").addEventListener("click", (e) => {
e.stopPropagation();
toggleModelEnable(mn);
});
});
}
@@ -993,6 +1304,10 @@ function renderSideGroup(modelName) {
<button class="wfm-btn wfm-btn-sm" id="wfm-models-group-rename-btn" ${allGroups.length === 0 ? "disabled" : ""}>${t("modelsRename")}</button>
<button class="wfm-btn wfm-btn-sm wfm-btn-danger" id="wfm-models-group-delete-btn" ${allGroups.length === 0 ? "disabled" : ""}>${t("modelsDelete")}</button>
</div>
<div style="display:flex;gap:4px;">
<button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-models-group-enable-btn" ${allGroups.length === 0 ? "disabled" : ""}>${t("modelGroupEnableAll")}</button>
<button class="wfm-btn wfm-btn-sm" id="wfm-models-group-disable-btn" ${allGroups.length === 0 ? "disabled" : ""}>${t("modelGroupDisableAll")}</button>
</div>
</div>
</div>
`;
@@ -1069,6 +1384,22 @@ function renderSideGroup(modelName) {
renderModelGrid();
});
});
// Enable all models in selected group
document.getElementById("wfm-models-group-enable-btn")?.addEventListener("click", () => {
const sel = document.getElementById("wfm-models-group-manage-select");
const g = sel?.value;
if (!g) return;
toggleGroupEnable(g, true).then(() => renderSideGroup(modelName));
});
// Disable all models in selected group
document.getElementById("wfm-models-group-disable-btn")?.addEventListener("click", () => {
const sel = document.getElementById("wfm-models-group-manage-select");
const g = sel?.value;
if (!g) return;
toggleGroupEnable(g, false).then(() => renderSideGroup(modelName));
});
}
// ── Side Panel: CivitAI Tab ───────────────────────────────
@@ -1197,8 +1528,12 @@ async function loadModelsForCurrentType() {
const placeholder = document.getElementById("wfm-models-placeholder");
if (state.loaded[type] && state.modelsByType[type].length > 0) {
// Reload groups for this type (groups are per-type)
state.modelGroups = await fetchModelGroups();
state.allModelGroups[type] = state.modelGroups;
renderTagFilter();
renderDirFilter();
renderGroupFilter();
renderModelGrid();
return;
}
@@ -1209,12 +1544,24 @@ async function loadModelsForCurrentType() {
const fetchFn = FETCH_MAP[type];
if (!fetchFn) throw new Error("Unknown model type: " + type);
const models = await fetchFn();
state.modelsByType[type] = models || [];
const [models, disabledList, groups] = await Promise.all([
fetchFn(), fetchDisabledModels(type), fetchModelGroups(),
]);
const disabledSet = new Set(Array.isArray(disabledList) ? disabledList : []);
state.disabledModels[type] = disabledSet;
state.modelGroups = groups;
state.allModelGroups[type] = groups;
// Merge enabled + disabled into one list (dedup)
// Guard: ensure models is an array (ComfyUI may return non-array on edge cases)
const enabledList = Array.isArray(models) ? models : [];
const allModels = [...new Set([...enabledList, ...disabledSet])];
state.modelsByType[type] = allModels;
state.loaded[type] = true;
renderTagFilter();
renderDirFilter();
renderGroupFilter();
renderModelGrid();
} catch (err) {
console.error("Failed to load models:", err);
@@ -1312,13 +1659,13 @@ async function batchFetchCivitai() {
}
async function loadMetadataAndModels() {
const [metadata, groups, civitaiCache] = await Promise.all([
fetchModelMetadata(), fetchModelGroups(), fetchCivitaiCache()
const [metadata, civitaiCache, allGroups] = await Promise.all([
fetchModelMetadata(), fetchCivitaiCache(), fetchAllModelGroups()
]);
state.modelMetadata = metadata;
state.modelGroups = groups;
state.civitaiCache = civitaiCache;
renderGroupFilter();
state.allModelGroups = allGroups;
// groups are loaded per-type inside loadModelsForCurrentType
await loadModelsForCurrentType();
}
@@ -1335,8 +1682,17 @@ export function initModelsTab() {
state.tagFilter = "";
state.badgeFilter = "";
state.dirFilter = "";
state.groupFilter = "";
state.statusFilter = "all";
state.currentPage = 0;
state.selectedModel = null;
const statusFilter = document.getElementById("wfm-models-status-filter");
if (statusFilter) statusFilter.value = "all";
state.selectMode = false;
state.selectedModels.clear();
const selectBtn = document.getElementById("wfm-models-select-btn");
if (selectBtn) { selectBtn.classList.remove("active"); selectBtn.textContent = t("modelSelectMode"); }
renderBulkActionBar();
closeSidePanel();
const searchInput = document.getElementById("wfm-models-search");
@@ -1373,9 +1729,43 @@ export function initModelsTab() {
renderModelGrid();
});
// Group filter
document.getElementById("wfm-models-group-filter")?.addEventListener("change", (e) => {
state.groupFilter = e.target.value;
// Group filter — value is "type::groupName" or "" for all
document.getElementById("wfm-models-group-filter")?.addEventListener("change", async (e) => {
const value = e.target.value;
if (!value) {
state.groupFilter = "";
} else {
const sepIdx = value.indexOf("::");
const type = value.substring(0, sepIdx);
const groupName = value.substring(sepIdx + 2);
// Auto-switch model type if different
if (type !== state.activeModelType) {
document.querySelectorAll(".wfm-models-type-btn").forEach((b) => {
b.classList.toggle("active", b.dataset.modelType === type);
});
state.activeModelType = type;
state.searchText = "";
state.tagFilter = "";
state.badgeFilter = "";
state.dirFilter = "";
state.statusFilter = "all";
state.selectedModel = null;
const statusFilter = document.getElementById("wfm-models-status-filter");
if (statusFilter) statusFilter.value = "all";
const searchInput = document.getElementById("wfm-models-search");
if (searchInput) searchInput.value = "";
closeSidePanel();
await loadModelsForCurrentType();
}
state.groupFilter = groupName;
}
state.currentPage = 0;
renderModelGrid();
});
// Status filter
document.getElementById("wfm-models-status-filter")?.addEventListener("change", (e) => {
state.statusFilter = e.target.value;
state.currentPage = 0;
renderModelGrid();
});
@@ -1418,6 +1808,9 @@ export function initModelsTab() {
loadModelsForCurrentType();
});
// Select mode
document.getElementById("wfm-models-select-btn")?.addEventListener("click", toggleSelectMode);
// CivitAI batch fetch
document.getElementById("wfm-models-civitai-batch-btn")?.addEventListener("click", () => {
batchFetchCivitai();
+11 -1
View File
@@ -192,6 +192,11 @@
<select id="wfm-models-tag-filter" class="wfm-select wfm-toolbar-select"><option value="">All Tags</option></select>
<select id="wfm-models-dir-filter" class="wfm-select wfm-toolbar-select"><option value="">All Folders</option></select>
<select id="wfm-models-group-filter" class="wfm-select wfm-toolbar-select"><option value="">All Groups</option></select>
<select id="wfm-models-status-filter" class="wfm-select wfm-toolbar-select">
<option value="all">All</option>
<option value="enabled">Enabled only</option>
<option value="disabled">Disabled only</option>
</select>
<div class="wfm-view-btns">
<button class="wfm-view-btn active" data-models-view="thumb" title="Thumbnail">&#8862;</button>
<button class="wfm-view-btn" data-models-view="card" title="Card">&#9776;</button>
@@ -202,7 +207,10 @@
<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">&#9881; Badge</button>
<button id="wfm-models-select-btn" class="wfm-btn wfm-btn-sm" title="Multi-select models">Select</button>
</div>
<!-- Bulk action bar (shown in select mode) -->
<div id="wfm-models-bulk-bar" class="wfm-bulk-bar" style="display:none;"></div>
</div>
<!-- Grid + Side Panel -->
@@ -568,13 +576,15 @@
<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-3">Search, tag filter, group filter, favorites filter, and status filter (All / Enabled only / Disabled only)</li>
<li id="wfm-help-models-4">Side panel: Info (file path, tags, memo), Groups management, CivitAI integration</li>
<li id="wfm-help-models-5">CivitAI integration: fetch model info by SHA256 hash, batch fetch per model type</li>
<li id="wfm-help-models-6">Detail modal: preview image, CivitAI info (base model, trained words, tags), thumbnail change</li>
<li id="wfm-help-models-7">Group management: create, rename, delete groups and assign/remove models</li>
<li id="wfm-help-models-8">GenUI Model button: apply the selected model to the corresponding node in GenerateUI's current workflow (Checkpoint / LoRA / VAE / ControlNet / UNET / TextEncoder)</li>
<li id="wfm-help-models-9">User-defined badges: assign free-label badges with custom colors shared with the Workflow tab</li>
<li id="wfm-help-models-10">Enable/Disable models: toggle visibility in ComfyUI by renaming file extension (.disabled suffix). Disable per model (⏸ button on each card) or per group (Enable All / Disable All in Group panel). Changes take effect after ComfyUI refresh.</li>
<li id="wfm-help-models-11">Multi-select &amp; bulk operations: click Select to enter selection mode, check multiple models, then use the bulk action bar to add/remove from groups or permanently delete files (model file + preview images + sidecar files such as .json/.info).</li>
</ul>
</div>
+21 -18
View File
@@ -1324,10 +1324,21 @@ const renderModelFavorites = async (container) => {
const renderModelGroups = async (container) => {
container.innerHTML = `<div class="wfm-nlp-empty">Loading...</div>`;
const groups = state.modelGroups;
const groupNames = Object.keys(groups);
// allGroups is { type: { groupName: [modelName, ...] } }
const allGroups = state.modelGroups;
if (groupNames.length === 0) {
// Flatten into [{ modelType, groupName, members }]
const flatGroups = [];
for (const [modelType, groups] of Object.entries(allGroups)) {
if (typeof groups !== "object" || Array.isArray(groups)) continue;
for (const [groupName, members] of Object.entries(groups)) {
if (Array.isArray(members) && members.length > 0) {
flatGroups.push({ modelType, groupName, members });
}
}
}
if (flatGroups.length === 0) {
container.innerHTML = `<div class="wfm-nlp-empty">No groups found.</div>`;
return;
}
@@ -1347,18 +1358,18 @@ const renderModelGroups = async (container) => {
container.innerHTML = "";
let hasAny = false;
for (const groupName of groupNames) {
const members = (groups[groupName] || []).filter(name => matchesModelSearch(name));
if (state.searchText && members.length === 0) continue;
if ((groups[groupName] || []).length === 0) continue;
for (const { modelType, groupName, members } of flatGroups) {
const filtered = members.filter(name => matchesModelSearch(name));
if (state.searchText && filtered.length === 0) continue;
hasAny = true;
const section = document.createElement("div");
section.className = "wfm-nlp-group-section";
const typeLabel = MODEL_TYPE_LABELS[modelType] || modelType;
const header = document.createElement("div");
header.className = "wfm-nlp-group-header collapsed";
header.innerHTML = `<span>${esc(groupName)}</span> <span class="wfm-nlp-badge">${members.length}</span>`;
header.innerHTML = `<span class="wfm-nlp-model-type-badge">[${esc(typeLabel)}]</span> <span>${esc(groupName)}</span> <span class="wfm-nlp-badge">${filtered.length}</span>`;
header.addEventListener("click", () => {
const listEl = section.querySelector(".wfm-nlp-group-list");
listEl.style.display = listEl.style.display === "none" ? "block" : "none";
@@ -1369,17 +1380,9 @@ const renderModelGroups = async (container) => {
const listEl = document.createElement("div");
listEl.className = "wfm-nlp-group-list";
listEl.style.display = "none";
for (const name of members) {
const type = typeOf[name] || "checkpoint";
for (const name of filtered) {
const type = typeOf[name] || modelType;
const item = createModelItem(name, type);
const typeLabel = MODEL_TYPE_LABELS[type] || type;
const typeBadgeEl = item.querySelector(".wfm-nlp-item-body");
if (typeBadgeEl) {
const tb = document.createElement("span");
tb.className = "wfm-nlp-model-type-badge";
tb.textContent = typeLabel;
typeBadgeEl.prepend(tb);
}
listEl.appendChild(item);
}
section.appendChild(listEl);