mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-08-06 22:10:14 -03:00
feat(lora-info): add Lora Info display node
Add a pure frontend node that shows filename and editable notes for a selected LoRA. Connect any output from a LoRA Loader/Stacker/Randomizer/ WanVideoSelect to the lora_source input — selecting a LoRA in the source widget updates the info display automatically. - Python node (LoraInfoLM): display-only, no workflow execution - Vue widget: filename label, auto-sizing notes textarea, save button with ComfyUI toast feedback on save - Frontend extension: wire-based selection propagation with stale-response race guard; clears display on wire disconnect - Backend: get-notes endpoint now returns file_path alongside notes; matching supports full-path lora syntax; fix NoneType crash in trigger words endpoint; document cache file_name invariant - Wired into all four lora widget nodes (Loader, Stacker, Randomizer, WanVideoSelect)
This commit is contained in:
@@ -15,6 +15,7 @@ try: # pragma: no cover - import fallback for pytest collection
|
|||||||
from .py.nodes.lora_pool import LoraPoolLM
|
from .py.nodes.lora_pool import LoraPoolLM
|
||||||
from .py.nodes.lora_randomizer import LoraRandomizerLM
|
from .py.nodes.lora_randomizer import LoraRandomizerLM
|
||||||
from .py.nodes.lora_cycler import LoraCyclerLM
|
from .py.nodes.lora_cycler import LoraCyclerLM
|
||||||
|
from .py.nodes.lora_info import LoraInfoLM
|
||||||
from .py.metadata_collector import init as init_metadata_collector
|
from .py.metadata_collector import init as init_metadata_collector
|
||||||
except (
|
except (
|
||||||
ImportError
|
ImportError
|
||||||
@@ -56,6 +57,7 @@ except (
|
|||||||
"py.nodes.lora_randomizer"
|
"py.nodes.lora_randomizer"
|
||||||
).LoraRandomizerLM
|
).LoraRandomizerLM
|
||||||
LoraCyclerLM = importlib.import_module("py.nodes.lora_cycler").LoraCyclerLM
|
LoraCyclerLM = importlib.import_module("py.nodes.lora_cycler").LoraCyclerLM
|
||||||
|
LoraInfoLM = importlib.import_module("py.nodes.lora_info").LoraInfoLM
|
||||||
init_metadata_collector = importlib.import_module("py.metadata_collector").init
|
init_metadata_collector = importlib.import_module("py.metadata_collector").init
|
||||||
|
|
||||||
NODE_CLASS_MAPPINGS = {
|
NODE_CLASS_MAPPINGS = {
|
||||||
@@ -75,6 +77,7 @@ NODE_CLASS_MAPPINGS = {
|
|||||||
LoraPoolLM.NAME: LoraPoolLM,
|
LoraPoolLM.NAME: LoraPoolLM,
|
||||||
LoraRandomizerLM.NAME: LoraRandomizerLM,
|
LoraRandomizerLM.NAME: LoraRandomizerLM,
|
||||||
LoraCyclerLM.NAME: LoraCyclerLM,
|
LoraCyclerLM.NAME: LoraCyclerLM,
|
||||||
|
LoraInfoLM.NAME: LoraInfoLM,
|
||||||
}
|
}
|
||||||
|
|
||||||
WEB_DIRECTORY = "./web/comfyui"
|
WEB_DIRECTORY = "./web/comfyui"
|
||||||
|
|||||||
45
py/nodes/lora_info.py
Normal file
45
py/nodes/lora_info.py
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
"""Lora Info display node — pure frontend node for showing selected LoRA info.
|
||||||
|
|
||||||
|
This node does NOT participate in workflow execution. Its single optional
|
||||||
|
"lora_source" input exists solely as a wire-connection anchor so that the
|
||||||
|
frontend can traverse the graph and push selection data to connected info nodes.
|
||||||
|
"""
|
||||||
|
|
||||||
|
from __future__ import annotations
|
||||||
|
|
||||||
|
|
||||||
|
class LoraInfoLM:
|
||||||
|
"""Display node that shows filename and notes for the selected LoRA."""
|
||||||
|
|
||||||
|
NAME = "Lora Info (LoraManager)"
|
||||||
|
CATEGORY = "Lora Manager/utils"
|
||||||
|
DESCRIPTION = (
|
||||||
|
"Displays information (filename, notes) about the currently selected "
|
||||||
|
"LoRA. Connect any output from a LoRA Loader or Stacker to the "
|
||||||
|
"lora_source input, then select a LoRA in the source widget — the "
|
||||||
|
"info updates automatically. Does not affect workflow execution."
|
||||||
|
)
|
||||||
|
|
||||||
|
@classmethod
|
||||||
|
def INPUT_TYPES(cls):
|
||||||
|
return {
|
||||||
|
"required": {},
|
||||||
|
}
|
||||||
|
|
||||||
|
RETURN_TYPES = ()
|
||||||
|
RETURN_NAMES = ()
|
||||||
|
OUTPUT_NODE = False
|
||||||
|
FUNCTION = "noop"
|
||||||
|
|
||||||
|
def noop(self, **kwargs):
|
||||||
|
# This node is display-only — no workflow execution needed.
|
||||||
|
return ()
|
||||||
|
|
||||||
|
|
||||||
|
NODE_CLASS_MAPPINGS = {
|
||||||
|
LoraInfoLM.NAME: LoraInfoLM,
|
||||||
|
}
|
||||||
|
|
||||||
|
NODE_DISPLAY_NAME_MAPPINGS = {
|
||||||
|
LoraInfoLM.NAME: "Lora Info (LoraManager)",
|
||||||
|
}
|
||||||
@@ -1275,9 +1275,13 @@ class ModelQueryHandler:
|
|||||||
text=f"{self._service.model_type.capitalize()} file name is required",
|
text=f"{self._service.model_type.capitalize()} file name is required",
|
||||||
status=400,
|
status=400,
|
||||||
)
|
)
|
||||||
notes = await self._service.get_model_notes(model_name)
|
result = await self._service.get_model_notes(model_name)
|
||||||
if notes is not None:
|
if result is not None:
|
||||||
return web.json_response({"success": True, "notes": notes})
|
return web.json_response({
|
||||||
|
"success": True,
|
||||||
|
"notes": result["notes"],
|
||||||
|
"file_path": result["file_path"],
|
||||||
|
})
|
||||||
return web.json_response(
|
return web.json_response(
|
||||||
{
|
{
|
||||||
"success": False,
|
"success": False,
|
||||||
|
|||||||
@@ -955,13 +955,21 @@ class BaseModelService(ABC):
|
|||||||
|
|
||||||
return unified_tree
|
return unified_tree
|
||||||
|
|
||||||
async def get_model_notes(self, model_name: str) -> Optional[str]:
|
async def get_model_notes(self, model_name: str) -> Optional[dict]:
|
||||||
"""Get notes for a specific model file"""
|
"""Get notes and file_path for a specific model file.
|
||||||
|
|
||||||
|
Supports both simple names (``OWSMianne_ANIMA_V1``) and full-path
|
||||||
|
syntax (``Anima/character/OWSMianne_ANIMA_V1``).
|
||||||
|
"""
|
||||||
cache = await self.scanner.get_cached_data()
|
cache = await self.scanner.get_cached_data()
|
||||||
|
|
||||||
for model in cache.raw_data:
|
for model in cache.raw_data:
|
||||||
if model["file_name"] == model_name:
|
file_name = model.get("file_name", "")
|
||||||
return model.get("notes", "")
|
if file_name == model_name or model_name.endswith("/" + file_name) or model_name.endswith("\\" + file_name):
|
||||||
|
return {
|
||||||
|
"notes": model.get("notes", ""),
|
||||||
|
"file_path": model.get("file_path", ""),
|
||||||
|
}
|
||||||
|
|
||||||
return None
|
return None
|
||||||
|
|
||||||
|
|||||||
@@ -271,12 +271,16 @@ class LoraService(BaseModelService):
|
|||||||
return letters
|
return letters
|
||||||
|
|
||||||
async def get_lora_trigger_words(self, lora_name: str) -> List[str]:
|
async def get_lora_trigger_words(self, lora_name: str) -> List[str]:
|
||||||
"""Get trigger words for a specific LoRA file"""
|
"""Get trigger words for a specific LoRA file.
|
||||||
|
|
||||||
|
Supports both simple names and full-path syntax.
|
||||||
|
"""
|
||||||
cache = await self.scanner.get_cached_data()
|
cache = await self.scanner.get_cached_data()
|
||||||
|
|
||||||
for lora in cache.raw_data:
|
for lora in cache.raw_data:
|
||||||
if lora["file_name"] == lora_name:
|
file_name = lora.get("file_name", "")
|
||||||
civitai_data = lora.get("civitai", {})
|
if file_name == lora_name or lora_name.endswith("/" + file_name) or lora_name.endswith("\\" + file_name):
|
||||||
|
civitai_data = lora.get("civitai") or {}
|
||||||
return civitai_data.get("trainedWords", [])
|
return civitai_data.get("trainedWords", [])
|
||||||
|
|
||||||
return []
|
return []
|
||||||
|
|||||||
@@ -227,6 +227,11 @@ class ModelScanner:
|
|||||||
|
|
||||||
entry: Dict[str, Any] = {
|
entry: Dict[str, Any] = {
|
||||||
'file_path': normalized_path,
|
'file_path': normalized_path,
|
||||||
|
# file_name is always stored WITHOUT extension (e.g. "OWSMianne_ANIMA_V1",
|
||||||
|
# not "OWSMianne_ANIMA_V1.safetensors"). All upstream population points
|
||||||
|
# (MetadataManager, from_civitai_info, download manager, etc.) strip the
|
||||||
|
# extension via os.path.splitext before writing. Code consuming this field
|
||||||
|
# should match against names that are likewise extension-free.
|
||||||
'file_name': get_value('file_name', '') or '',
|
'file_name': get_value('file_name', '') or '',
|
||||||
'model_name': get_value('model_name', '') or '',
|
'model_name': get_value('model_name', '') or '',
|
||||||
'folder': normalized_folder,
|
'folder': normalized_folder,
|
||||||
|
|||||||
245
vue-widgets/src/components/LoraInfoWidget.vue
Normal file
245
vue-widgets/src/components/LoraInfoWidget.vue
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
<template>
|
||||||
|
<div class="lora-info-widget">
|
||||||
|
<template v-if="loraName">
|
||||||
|
<div class="info-field">
|
||||||
|
<label class="info-label">Filename</label>
|
||||||
|
<div class="lora-filename">{{ loraName }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-field notes-field">
|
||||||
|
<label class="info-label">Notes</label>
|
||||||
|
<textarea
|
||||||
|
v-model="notes"
|
||||||
|
class="lora-notes"
|
||||||
|
placeholder="Add notes about this LoRA..."
|
||||||
|
:disabled="saving"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="save-btn"
|
||||||
|
:disabled="notes === originalNotes || saving"
|
||||||
|
@click="saveNotes"
|
||||||
|
>
|
||||||
|
{{ saving ? 'Saving...' : 'Save' }}
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<div v-else class="placeholder">No LoRA selected</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
|
interface LoraInfoWidget {
|
||||||
|
serializeValue?: () => Promise<unknown>
|
||||||
|
value?: unknown
|
||||||
|
onSetValue?: (v: unknown) => void
|
||||||
|
callback?: unknown
|
||||||
|
_setLoraInfo?: (data: { name: string; notes: string; filePath: string }) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
widget: LoraInfoWidget
|
||||||
|
node: { id: number }
|
||||||
|
api: { fetchApi: (url: string, options?: RequestInit) => Promise<Response> }
|
||||||
|
app: { extensionManager: { toast: { add: (opts: Record<string, unknown>) => void } } }
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const loraName = ref<string>('')
|
||||||
|
const notes = ref<string>('')
|
||||||
|
const originalNotes = ref<string>('')
|
||||||
|
const filePath = ref<string>('')
|
||||||
|
const saving = ref<boolean>(false)
|
||||||
|
|
||||||
|
async function saveNotes() {
|
||||||
|
if (notes.value === originalNotes.value || saving.value) return
|
||||||
|
if (!filePath.value) return
|
||||||
|
|
||||||
|
saving.value = true
|
||||||
|
try {
|
||||||
|
const response = await props.api.fetchApi('/lm/loras/save-metadata', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ file_path: filePath.value, notes: notes.value })
|
||||||
|
})
|
||||||
|
const result = await response.json()
|
||||||
|
if (result.success) {
|
||||||
|
props.app.extensionManager.toast.add({
|
||||||
|
severity: 'success',
|
||||||
|
summary: 'Saved',
|
||||||
|
detail: 'Notes updated successfully',
|
||||||
|
life: 2000
|
||||||
|
})
|
||||||
|
originalNotes.value = notes.value
|
||||||
|
} else {
|
||||||
|
props.app.extensionManager.toast.add({
|
||||||
|
severity: 'error',
|
||||||
|
summary: 'Error',
|
||||||
|
detail: result.message || result.error || 'Failed to save notes',
|
||||||
|
life: 3000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[LoraInfoWidget] Failed to save notes:', e)
|
||||||
|
props.app.extensionManager.toast.add({
|
||||||
|
severity: 'error',
|
||||||
|
summary: 'Error',
|
||||||
|
detail: (e as Error).message || 'Failed to save notes',
|
||||||
|
life: 3000
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// Display-only widget - return null on serialization to avoid saving to workflow
|
||||||
|
props.widget.serializeValue = async () => null
|
||||||
|
|
||||||
|
// Handle external value updates (e.g., loading workflow, paste)
|
||||||
|
props.widget.onSetValue = (v: unknown) => {
|
||||||
|
if (v && typeof v === 'object') {
|
||||||
|
const data = v as { name?: string; notes?: string; filePath?: string }
|
||||||
|
if (data.name !== undefined) loraName.value = data.name
|
||||||
|
if (data.notes !== undefined) {
|
||||||
|
notes.value = data.notes
|
||||||
|
originalNotes.value = data.notes
|
||||||
|
}
|
||||||
|
if (data.filePath !== undefined) filePath.value = data.filePath
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restore from saved value if exists (for workflow loading)
|
||||||
|
if (props.widget.value && typeof props.widget.value === 'object') {
|
||||||
|
const data = props.widget.value as { name?: string; notes?: string; filePath?: string }
|
||||||
|
if (data.name !== undefined) loraName.value = data.name
|
||||||
|
if (data.notes !== undefined) {
|
||||||
|
notes.value = data.notes
|
||||||
|
originalNotes.value = data.notes
|
||||||
|
}
|
||||||
|
if (data.filePath !== undefined) filePath.value = data.filePath
|
||||||
|
}
|
||||||
|
|
||||||
|
// Expose setLoraInfo on the widget object for external callers (e.g., lora_info.js).
|
||||||
|
// Accepts null to clear the display (when selection is deselected).
|
||||||
|
props.widget._setLoraInfo = (data: { name: string; notes: string; filePath: string } | null) => {
|
||||||
|
if (data) {
|
||||||
|
loraName.value = data.name
|
||||||
|
notes.value = data.notes
|
||||||
|
originalNotes.value = data.notes
|
||||||
|
filePath.value = data.filePath
|
||||||
|
} else {
|
||||||
|
loraName.value = ''
|
||||||
|
notes.value = ''
|
||||||
|
originalNotes.value = ''
|
||||||
|
filePath.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Consume any data pushed before the Vue component mounted (race condition fix)
|
||||||
|
if (props.widget.__pendingLoraInfo) {
|
||||||
|
props.widget._setLoraInfo(props.widget.__pendingLoraInfo)
|
||||||
|
delete props.widget.__pendingLoraInfo
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.lora-info-widget {
|
||||||
|
padding: 12px;
|
||||||
|
background: rgba(40, 44, 52, 0.6);
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: var(--fg-color, #fff);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lora-filename {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--fg-color, #fff);
|
||||||
|
word-break: break-all;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-field {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lora-notes {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 60px;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--border-color, #444);
|
||||||
|
background: var(--comfy-input-bg, #333);
|
||||||
|
color: var(--fg-color, #fff);
|
||||||
|
font-size: 12px;
|
||||||
|
resize: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: inherit;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lora-notes:focus {
|
||||||
|
border-color: var(--comfy-input-border, #444);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lora-notes:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(66, 153, 225, 0.4);
|
||||||
|
background: rgba(66, 153, 225, 0.15);
|
||||||
|
color: var(--fg-color, #fff);
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn:hover:not(:disabled) {
|
||||||
|
background: rgba(66, 153, 225, 0.25);
|
||||||
|
border-color: rgba(66, 153, 225, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
background: rgba(66, 153, 225, 0.05);
|
||||||
|
border-color: rgba(226, 232, 240, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
color: rgba(226, 232, 240, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
padding: 16px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -5,6 +5,7 @@ import LoraRandomizerWidget from '@/components/LoraRandomizerWidget.vue'
|
|||||||
import LoraCyclerWidget from '@/components/LoraCyclerWidget.vue'
|
import LoraCyclerWidget from '@/components/LoraCyclerWidget.vue'
|
||||||
import JsonDisplayWidget from '@/components/JsonDisplayWidget.vue'
|
import JsonDisplayWidget from '@/components/JsonDisplayWidget.vue'
|
||||||
import AutocompleteTextWidget from '@/components/AutocompleteTextWidget.vue'
|
import AutocompleteTextWidget from '@/components/AutocompleteTextWidget.vue'
|
||||||
|
import LoraInfoWidget from '@/components/LoraInfoWidget.vue'
|
||||||
import { createVueWidgetCleanup } from './vue-widget-cleanup'
|
import { createVueWidgetCleanup } from './vue-widget-cleanup'
|
||||||
import type { LoraPoolConfig, RandomizerConfig, CyclerConfig } from './composables/types'
|
import type { LoraPoolConfig, RandomizerConfig, CyclerConfig } from './composables/types'
|
||||||
import {
|
import {
|
||||||
@@ -23,6 +24,8 @@ const LORA_CYCLER_WIDGET_MIN_HEIGHT = 408
|
|||||||
const LORA_CYCLER_WIDGET_MAX_HEIGHT = LORA_CYCLER_WIDGET_MIN_HEIGHT
|
const LORA_CYCLER_WIDGET_MAX_HEIGHT = LORA_CYCLER_WIDGET_MIN_HEIGHT
|
||||||
const JSON_DISPLAY_WIDGET_MIN_WIDTH = 300
|
const JSON_DISPLAY_WIDGET_MIN_WIDTH = 300
|
||||||
const JSON_DISPLAY_WIDGET_MIN_HEIGHT = 200
|
const JSON_DISPLAY_WIDGET_MIN_HEIGHT = 200
|
||||||
|
const LORA_INFO_WIDGET_MIN_WIDTH = 300
|
||||||
|
const LORA_INFO_WIDGET_MIN_HEIGHT = 200
|
||||||
const AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT = 60
|
const AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT = 60
|
||||||
const AUTOCOMPLETE_TEXT_WIDGET_MAX_HEIGHT = 100
|
const AUTOCOMPLETE_TEXT_WIDGET_MAX_HEIGHT = 100
|
||||||
// Per-modelType min size hints for node initial sizing.
|
// Per-modelType min size hints for node initial sizing.
|
||||||
@@ -642,6 +645,74 @@ if (app.ui?.settings) {
|
|||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
function createLoraInfoWidget(node: any) {
|
||||||
|
const container = document.createElement('div')
|
||||||
|
container.id = `lora-info-widget-${node.id}`
|
||||||
|
container.style.width = '100%'
|
||||||
|
container.style.height = '100%'
|
||||||
|
container.style.display = 'flex'
|
||||||
|
container.style.flexDirection = 'column'
|
||||||
|
container.style.overflow = 'hidden'
|
||||||
|
|
||||||
|
forwardMiddleMouseToCanvas(container)
|
||||||
|
|
||||||
|
let internalValue: { name?: string; notes?: string; filePath?: string } | undefined
|
||||||
|
|
||||||
|
const widget = node.addDOMWidget(
|
||||||
|
'lora_info_display',
|
||||||
|
'LORA_INFO_DISPLAY',
|
||||||
|
container,
|
||||||
|
{
|
||||||
|
getValue() {
|
||||||
|
return internalValue
|
||||||
|
},
|
||||||
|
setValue(v: { name?: string; notes?: string; filePath?: string }) {
|
||||||
|
internalValue = v
|
||||||
|
if (typeof widget.onSetValue === 'function') {
|
||||||
|
widget.onSetValue(v)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
serialize: false, // Display-only widget
|
||||||
|
getMinHeight() {
|
||||||
|
return LORA_INFO_WIDGET_MIN_HEIGHT
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const vueApp = createApp(LoraInfoWidget, {
|
||||||
|
widget,
|
||||||
|
node,
|
||||||
|
api,
|
||||||
|
app,
|
||||||
|
})
|
||||||
|
|
||||||
|
vueApp.use(PrimeVue, {
|
||||||
|
unstyled: true,
|
||||||
|
ripple: false
|
||||||
|
})
|
||||||
|
|
||||||
|
vueApp.mount(container)
|
||||||
|
vueApps.set(node.id + 40000, vueApp) // Offset to avoid collision
|
||||||
|
|
||||||
|
widget.computeLayoutSize = () => {
|
||||||
|
const minWidth = LORA_INFO_WIDGET_MIN_WIDTH
|
||||||
|
const minHeight = LORA_INFO_WIDGET_MIN_HEIGHT
|
||||||
|
|
||||||
|
return { minHeight, minWidth }
|
||||||
|
}
|
||||||
|
|
||||||
|
widget.onRemove = () => {
|
||||||
|
const vueApp = vueApps.get(node.id + 40000)
|
||||||
|
if (vueApp) {
|
||||||
|
vueApp.unmount()
|
||||||
|
vueApps.delete(node.id + 40000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { widget }
|
||||||
|
}
|
||||||
|
|
||||||
// Factory function for creating autocomplete text widgets
|
// Factory function for creating autocomplete text widgets
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
function createAutocompleteTextWidgetFactory(
|
function createAutocompleteTextWidgetFactory(
|
||||||
@@ -804,7 +875,75 @@ app.registerExtension({
|
|||||||
updateDownstreamLoaders(node)
|
updateDownstreamLoaders(node)
|
||||||
} : null
|
} : null
|
||||||
|
|
||||||
return addLorasWidgetCache(node, 'loras', { isRandomizerNode }, callback)
|
const opts: { isRandomizerNode?: boolean; onSelectionChange?: (selection: any) => void } = {
|
||||||
|
isRandomizerNode,
|
||||||
|
}
|
||||||
|
if (isRandomizerNode) {
|
||||||
|
opts.onSelectionChange = async (selection: any) => {
|
||||||
|
if (!selection?.name || !selection?.active) return
|
||||||
|
|
||||||
|
// Walk outputs to find directly connected Lora Info nodes
|
||||||
|
const infoNodes: any[] = []
|
||||||
|
if (node.outputs) {
|
||||||
|
for (const output of node.outputs) {
|
||||||
|
if (!output?.links?.length) continue
|
||||||
|
for (const linkId of output.links) {
|
||||||
|
const links = node.graph?.links
|
||||||
|
if (!links) continue
|
||||||
|
const link = Array.isArray(links) ? links[linkId] : links.get?.(linkId)
|
||||||
|
if (!link) continue
|
||||||
|
const targetNode = node.graph?.getNodeById?.(link.target_id)
|
||||||
|
if (targetNode?.comfyClass === 'Lora Info (LoraManager)') {
|
||||||
|
infoNodes.push(targetNode)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (infoNodes.length === 0) return
|
||||||
|
|
||||||
|
// Bump request token to guard against stale async responses
|
||||||
|
for (const infoNode of infoNodes) {
|
||||||
|
infoNode.__loraInfoReqId = (infoNode.__loraInfoReqId || 0) + 1
|
||||||
|
}
|
||||||
|
const reqIdSnapshot = new Map<any, number>()
|
||||||
|
for (const infoNode of infoNodes) {
|
||||||
|
reqIdSnapshot.set(infoNode, infoNode.__loraInfoReqId)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch notes via the real ComfyUI api
|
||||||
|
let infoData: any
|
||||||
|
try {
|
||||||
|
const response = await api.fetchApi(
|
||||||
|
`/lm/loras/get-notes?name=${encodeURIComponent(selection.name)}`,
|
||||||
|
{ method: 'GET' }
|
||||||
|
)
|
||||||
|
if (response?.ok) {
|
||||||
|
const data = await response.json()
|
||||||
|
infoData = {
|
||||||
|
name: selection.name,
|
||||||
|
notes: data?.notes || '',
|
||||||
|
filePath: data?.file_path || '',
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
infoData = { name: selection.name, notes: '[Error loading notes]', filePath: '' }
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
infoData = { name: selection.name, notes: '[Error loading notes]', filePath: '' }
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const infoNode of infoNodes) {
|
||||||
|
if (infoNode.__loraInfoReqId !== reqIdSnapshot.get(infoNode)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if (typeof infoNode._setLoraInfo === 'function') {
|
||||||
|
infoNode._setLoraInfo(infoData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return addLorasWidgetCache(node, 'loras', opts, callback)
|
||||||
},
|
},
|
||||||
// Autocomplete text widget for LoRAs (used by Lora Loader, Lora Stacker, WanVideo Lora Select)
|
// Autocomplete text widget for LoRAs (used by Lora Loader, Lora Stacker, WanVideo Lora Select)
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@@ -823,7 +962,7 @@ app.registerExtension({
|
|||||||
AUTOCOMPLETE_TEXT_PROMPT(node) {
|
AUTOCOMPLETE_TEXT_PROMPT(node) {
|
||||||
const options = widgetInputOptions.get(`${node.comfyClass}:text`) || {}
|
const options = widgetInputOptions.get(`${node.comfyClass}:text`) || {}
|
||||||
return createAutocompleteTextWidgetFactory(node, 'text', 'prompt', options)
|
return createAutocompleteTextWidgetFactory(node, 'text', 'prompt', options)
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -903,5 +1042,17 @@ app.registerExtension({
|
|||||||
createJsonDisplayWidget(this)
|
createJsonDisplayWidget(this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add the Lora Info display widget
|
||||||
|
if (nodeData.name === 'Lora Info (LoraManager)') {
|
||||||
|
const onNodeCreated = nodeType.prototype.onNodeCreated
|
||||||
|
|
||||||
|
nodeType.prototype.onNodeCreated = function () {
|
||||||
|
onNodeCreated?.apply(this, [])
|
||||||
|
|
||||||
|
// Create the lora info display widget
|
||||||
|
createLoraInfoWidget(this)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
182
web/comfyui/lora_info.js
Normal file
182
web/comfyui/lora_info.js
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
import { app } from "../../scripts/app.js";
|
||||||
|
import { api } from "../../scripts/api.js";
|
||||||
|
import {
|
||||||
|
getLinkFromGraph,
|
||||||
|
chainCallback,
|
||||||
|
} from "./utils.js";
|
||||||
|
|
||||||
|
const LORA_INFO_CLASS = "Lora Info (LoraManager)";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Find Lora Info nodes directly connected to the given node's outputs.
|
||||||
|
* Mirrors the getConnectedTriggerToggleNodes pattern from utils.js.
|
||||||
|
* @param {object} node - The source node to check outputs from
|
||||||
|
* @returns {object[]} Array of connected Lora Info node instances
|
||||||
|
*/
|
||||||
|
export function getConnectedLoraInfoNodes(node) {
|
||||||
|
const connectedNodes = [];
|
||||||
|
|
||||||
|
if (!node?.outputs) {
|
||||||
|
return connectedNodes;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const output of node.outputs) {
|
||||||
|
if (!output?.links?.length) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const linkId of output.links) {
|
||||||
|
const link = getLinkFromGraph(node.graph, linkId);
|
||||||
|
if (!link) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const targetNode = node.graph?.getNodeById?.(link.target_id);
|
||||||
|
if (targetNode && targetNode.comfyClass === LORA_INFO_CLASS) {
|
||||||
|
connectedNodes.push(targetNode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return connectedNodes;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch notes for the selected lora and push them to all directly connected
|
||||||
|
* Lora Info nodes (no recursive chain traversal — only direct connections).
|
||||||
|
* @param {object} node - The source LoRA Loader/Stacker node
|
||||||
|
* @param {object|null} selection - The current lora selection {name, active, entry}
|
||||||
|
*/
|
||||||
|
export async function updateConnectedLoraInfoNodes(node, selection) {
|
||||||
|
if (!node) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const infoNodes = getConnectedLoraInfoNodes(node);
|
||||||
|
|
||||||
|
if (infoNodes.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// No selection or inactive — clear the display on all connected info nodes
|
||||||
|
if (!selection?.name || !selection?.active) {
|
||||||
|
for (const infoNode of infoNodes) {
|
||||||
|
infoNode.__loraInfoReqId = (infoNode.__loraInfoReqId || 0) + 1;
|
||||||
|
if (typeof infoNode._setLoraInfo === "function") {
|
||||||
|
infoNode._setLoraInfo(null);
|
||||||
|
} else {
|
||||||
|
infoNode.__pendingLoraInfo = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bump request token on each info node to guard against stale async responses
|
||||||
|
for (const infoNode of infoNodes) {
|
||||||
|
infoNode.__loraInfoReqId = (infoNode.__loraInfoReqId || 0) + 1;
|
||||||
|
}
|
||||||
|
const reqIdSnapshot = new Map();
|
||||||
|
for (const infoNode of infoNodes) {
|
||||||
|
reqIdSnapshot.set(infoNode, infoNode.__loraInfoReqId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch notes for the selected lora
|
||||||
|
try {
|
||||||
|
const response = await api.fetchApi(
|
||||||
|
`/lm/loras/get-notes?name=${encodeURIComponent(selection.name)}`,
|
||||||
|
{ method: "GET" }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response?.ok) {
|
||||||
|
throw new Error(`Failed to fetch notes for ${selection.name}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
const infoData = {
|
||||||
|
name: selection.name,
|
||||||
|
notes: data?.notes || "",
|
||||||
|
filePath: data?.file_path || "",
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const infoNode of infoNodes) {
|
||||||
|
// Discard if a newer request has been issued for this node
|
||||||
|
if (infoNode.__loraInfoReqId !== reqIdSnapshot.get(infoNode)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (typeof infoNode._setLoraInfo === "function") {
|
||||||
|
infoNode._setLoraInfo(infoData);
|
||||||
|
} else {
|
||||||
|
infoNode.__pendingLoraInfo = infoData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching notes for lora info:", error);
|
||||||
|
|
||||||
|
const errorData = {
|
||||||
|
name: selection.name,
|
||||||
|
notes: "[Error loading notes]",
|
||||||
|
filePath: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const infoNode of infoNodes) {
|
||||||
|
if (infoNode.__loraInfoReqId !== reqIdSnapshot.get(infoNode)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (typeof infoNode._setLoraInfo === "function") {
|
||||||
|
infoNode._setLoraInfo(errorData);
|
||||||
|
} else {
|
||||||
|
infoNode.__pendingLoraInfo = errorData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
app.registerExtension({
|
||||||
|
name: "LoraManager.LoraInfo",
|
||||||
|
|
||||||
|
beforeRegisterNodeDef(nodeType, nodeData) {
|
||||||
|
if (nodeData.name !== LORA_INFO_CLASS) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
chainCallback(nodeType.prototype, "onNodeCreated", function () {
|
||||||
|
// Add wire-only input for receiving connections from LoRA nodes
|
||||||
|
this.addInput("lora_source", "*", { shape: 7 });
|
||||||
|
|
||||||
|
// Forward lora info data to the Vue widget when available.
|
||||||
|
this._setLoraInfo = function (data) {
|
||||||
|
const widget = this.widgets?.find(
|
||||||
|
(w) => w.type === "LORA_INFO_DISPLAY"
|
||||||
|
);
|
||||||
|
if (widget) {
|
||||||
|
if (typeof widget._setLoraInfo === "function") {
|
||||||
|
widget._setLoraInfo(data);
|
||||||
|
} else {
|
||||||
|
widget.__pendingLoraInfo = data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// When the lora_source wire is disconnected, clear the display.
|
||||||
|
const origOnConnectionsChange = nodeType.prototype.onConnectionsChange;
|
||||||
|
nodeType.prototype.onConnectionsChange = function (type, index, connected, link_info) {
|
||||||
|
if (origOnConnectionsChange) {
|
||||||
|
origOnConnectionsChange.apply(this, arguments);
|
||||||
|
}
|
||||||
|
// type 1 = input connection change; disconnected = !connected
|
||||||
|
if (type === 1 && !connected) {
|
||||||
|
const input = this.inputs?.[index];
|
||||||
|
if (input?.name === "lora_source") {
|
||||||
|
// Check if any lora_source input still has a connection
|
||||||
|
const hasLoraSourceConnection = this.inputs?.some(
|
||||||
|
(inp) => inp.name === "lora_source" && inp.link != null
|
||||||
|
);
|
||||||
|
if (!hasLoraSourceConnection) {
|
||||||
|
this._setLoraInfo?.(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -13,6 +13,7 @@ import {
|
|||||||
import { addLorasWidget } from "./loras_widget.js";
|
import { addLorasWidget } from "./loras_widget.js";
|
||||||
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
|
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
|
||||||
import { applySelectionHighlight } from "./trigger_word_highlight.js";
|
import { applySelectionHighlight } from "./trigger_word_highlight.js";
|
||||||
|
import { updateConnectedLoraInfoNodes } from "./lora_info.js";
|
||||||
|
|
||||||
app.registerExtension({
|
app.registerExtension({
|
||||||
name: "LoraManager.LoraLoader",
|
name: "LoraManager.LoraLoader",
|
||||||
@@ -185,8 +186,10 @@ app.registerExtension({
|
|||||||
this,
|
this,
|
||||||
"loras",
|
"loras",
|
||||||
{
|
{
|
||||||
onSelectionChange: (selection) =>
|
onSelectionChange: (selection) => {
|
||||||
applySelectionHighlight(this, selection),
|
applySelectionHighlight(this, selection);
|
||||||
|
updateConnectedLoraInfoNodes(this, selection);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
(value) => {
|
(value) => {
|
||||||
// Prevent recursive calls
|
// Prevent recursive calls
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import {
|
|||||||
import { addLorasWidget } from "./loras_widget.js";
|
import { addLorasWidget } from "./loras_widget.js";
|
||||||
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
|
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
|
||||||
import { applySelectionHighlight } from "./trigger_word_highlight.js";
|
import { applySelectionHighlight } from "./trigger_word_highlight.js";
|
||||||
|
import { updateConnectedLoraInfoNodes } from "./lora_info.js";
|
||||||
|
|
||||||
app.registerExtension({
|
app.registerExtension({
|
||||||
name: "LoraManager.LoraStacker",
|
name: "LoraManager.LoraStacker",
|
||||||
@@ -64,8 +65,10 @@ app.registerExtension({
|
|||||||
this,
|
this,
|
||||||
"loras",
|
"loras",
|
||||||
{
|
{
|
||||||
onSelectionChange: (selection) =>
|
onSelectionChange: (selection) => {
|
||||||
applySelectionHighlight(this, selection),
|
applySelectionHighlight(this, selection);
|
||||||
|
updateConnectedLoraInfoNodes(this, selection);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
(value) => {
|
(value) => {
|
||||||
// Prevent recursive calls
|
// Prevent recursive calls
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -9,6 +9,7 @@ import {
|
|||||||
} from "./utils.js";
|
} from "./utils.js";
|
||||||
import { addLorasWidget } from "./loras_widget.js";
|
import { addLorasWidget } from "./loras_widget.js";
|
||||||
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
|
import { applyLoraValuesToText, debounce } from "./lora_syntax_utils.js";
|
||||||
|
import { updateConnectedLoraInfoNodes } from "./lora_info.js";
|
||||||
|
|
||||||
app.registerExtension({
|
app.registerExtension({
|
||||||
name: "LoraManager.WanVideoLoraSelect",
|
name: "LoraManager.WanVideoLoraSelect",
|
||||||
@@ -63,7 +64,11 @@ app.registerExtension({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const result = addLorasWidget(this, "loras", {}, (value) => {
|
const result = addLorasWidget(this, "loras", {
|
||||||
|
onSelectionChange: (selection) => {
|
||||||
|
updateConnectedLoraInfoNodes(this, selection);
|
||||||
|
},
|
||||||
|
}, (value) => {
|
||||||
// Prevent recursive calls
|
// Prevent recursive calls
|
||||||
if (isUpdating) return;
|
if (isUpdating) return;
|
||||||
isUpdating = true;
|
isUpdating = true;
|
||||||
|
|||||||
Reference in New Issue
Block a user