mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-08-07 14:30:15 -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:
Will Miao
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 JsonDisplayWidget from '@/components/JsonDisplayWidget.vue'
|
||||
import AutocompleteTextWidget from '@/components/AutocompleteTextWidget.vue'
|
||||
import LoraInfoWidget from '@/components/LoraInfoWidget.vue'
|
||||
import { createVueWidgetCleanup } from './vue-widget-cleanup'
|
||||
import type { LoraPoolConfig, RandomizerConfig, CyclerConfig } from './composables/types'
|
||||
import {
|
||||
@@ -23,6 +24,8 @@ const LORA_CYCLER_WIDGET_MIN_HEIGHT = 408
|
||||
const LORA_CYCLER_WIDGET_MAX_HEIGHT = LORA_CYCLER_WIDGET_MIN_HEIGHT
|
||||
const JSON_DISPLAY_WIDGET_MIN_WIDTH = 300
|
||||
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_MAX_HEIGHT = 100
|
||||
// Per-modelType min size hints for node initial sizing.
|
||||
@@ -642,6 +645,74 @@ if (app.ui?.settings) {
|
||||
}, 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
|
||||
// @ts-ignore
|
||||
function createAutocompleteTextWidgetFactory(
|
||||
@@ -804,7 +875,75 @@ app.registerExtension({
|
||||
updateDownstreamLoaders(node)
|
||||
} : 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)
|
||||
// @ts-ignore
|
||||
@@ -823,7 +962,7 @@ app.registerExtension({
|
||||
AUTOCOMPLETE_TEXT_PROMPT(node) {
|
||||
const options = widgetInputOptions.get(`${node.comfyClass}:text`) || {}
|
||||
return createAutocompleteTextWidgetFactory(node, 'text', 'prompt', options)
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@@ -903,5 +1042,17 @@ app.registerExtension({
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user