docs: add frontend UI architecture and ComfyUI widget guidelines

- Document dual UI systems: standalone web UI and ComfyUI custom node widgets
- Add ComfyUI widget development guidelines including styling and constraints
- Update terminology in LoraRandomizerNode from 'frontend/backend' to 'fixed/always' for clarity
- Include UI constraints for ComfyUI widgets: minimize vertical space, avoid dynamic height changes, keep UI simple
This commit is contained in:
Will Miao
2026-01-13 11:20:50 +08:00
parent bce6b0e610
commit 6a17e75782
16 changed files with 877 additions and 244 deletions

View File

@@ -1,40 +0,0 @@
import { app } from "../../../scripts/app.js";
app.registerExtension({
name: "LoraManager.LoraDemo",
// Hook into node creation
async nodeCreated(node) {
if (node.comfyClass !== "Lora Demo (LoraManager)") {
return;
}
// Store original onExecuted
const originalOnExecuted = node.onExecuted?.bind(node);
// Override onExecuted to handle UI updates
node.onExecuted = function(output) {
// Check if output has loras data
if (output?.loras && Array.isArray(output.loras)) {
console.log("[LoraDemoNode] Received loras data from backend:", output.loras);
// Find the loras widget on this node
const lorasWidget = node.widgets.find(w => w.name === 'loras');
if (lorasWidget) {
// Update widget value with backend data
lorasWidget.value = output.loras;
console.log(`[LoraDemoNode] Updated widget with ${output.loras.length} loras`);
} else {
console.warn("[LoraDemoNode] loras widget not found on node");
}
}
// Call original onExecuted if it exists
if (originalOnExecuted) {
return originalOnExecuted(output);
}
};
}
});

View File

@@ -1,44 +0,0 @@
import { app } from "../../../scripts/app.js";
app.registerExtension({
name: "LoraManager.LoraRandomizer",
// Hook into node creation
async nodeCreated(node) {
if (node.comfyClass !== "Lora Randomizer (LoraManager)") {
return;
}
console.log("[LoraRandomizerWidget] Node created:", node.id);
// Store original onExecuted
const originalOnExecuted = node.onExecuted?.bind(node);
// Override onExecuted to handle UI updates
node.onExecuted = function(output) {
console.log("[LoraRandomizerWidget] Node executed with output:", output);
// Check if output has loras data
if (output?.loras && Array.isArray(output.loras)) {
console.log("[LoraRandomizerWidget] Received loras data from backend:", output.loras);
// Find the loras widget on this node
const lorasWidget = node.widgets.find(w => w.name === 'loras');
if (lorasWidget) {
// Update widget value with backend data
lorasWidget.value = output.loras;
console.log(`[LoraRandomizerWidget] Updated widget with ${output.loras.length} loras`);
} else {
console.warn("[LoraRandomizerWidget] loras widget not found on node");
}
}
// Call original onExecuted if it exists
if (originalOnExecuted) {
return originalOnExecuted(output);
}
};
}
});

View File

@@ -699,6 +699,7 @@ export function addLorasWidget(node, name, opts, callback) {
return widgetValue;
},
setValue: function(v) {
console.log('loras widget value update: ', v);
// Remove duplicates by keeping the last occurrence of each lora name
const uniqueValue = (v || []).reduce((acc, lora) => {
// Remove any existing lora with the same name

View File

@@ -239,7 +239,6 @@ app.registerExtension({
// Handle trigger word updates from Python
handleTriggerWordUpdate(id, graphId, message) {
console.log('trigger word update: ', id, graphId, message);
const node = getNodeFromGraph(graphId, id);
if (!node || node.comfyClass !== "TriggerWord Toggle (LoraManager)") {
console.warn("Node not found or not a TriggerWordToggle:", id);

View File

@@ -328,8 +328,6 @@ export function updateConnectedTriggerWords(node, loraNames) {
.map((connectedNode) => getNodeReference(connectedNode))
.filter((reference) => reference !== null);
console.log('node ids: ', nodeIds, loraNames);
if (nodeIds.length === 0) {
return;
}