111 lines
4.3 KiB
JavaScript
111 lines
4.3 KiB
JavaScript
import { ComfyWidgets } from "../../../scripts/widgets.js";
|
|
import { fitHeight } from "./utils.js";
|
|
import { formatAndDisplayJSON } from "./gtUIUtils.js";
|
|
export function setupDisplayNodes(nodeType, nodeData, app) {
|
|
if (nodeData.name === "Griptape Display: Artifact") {
|
|
setupArtifactDisplayNode(nodeType, nodeData, app);
|
|
} else if (nodeData.name === "Griptape Display: Text") {
|
|
setupTextDisplayNode(nodeType, nodeData, app);
|
|
} else if (nodeData.name === "Griptape Display: Data as Text") {
|
|
setupDataAsTextDisplayNode(nodeType, nodeData, app);
|
|
} else if (nodeData.name === "Griptape LoRA: Image Captions") {
|
|
setupImageCaptionsNode(nodeType, nodeData, app);
|
|
}
|
|
|
|
}
|
|
|
|
function setupArtifactDisplayNode(nodeType, nodeData, app) {
|
|
nodeType.prototype.onNodeCreated = function() {
|
|
this.message = ComfyWidgets.STRING(this, 'Output Text', ['STRING', { multiline: true }], app).widget;
|
|
this.message.value = "";
|
|
setupMessageStyle(this.message);
|
|
fitHeight(this, true);
|
|
};
|
|
|
|
nodeType.prototype.onExecuted = function(message) {
|
|
updateMessageValue(this, message["INPUT"].join(""));
|
|
// this.onResize?.(this.size);
|
|
this?.graph?.setDirtyCanvas(true, true);
|
|
};
|
|
}
|
|
|
|
function setupImageCaptionsNode(nodeType, nodeData, app) {
|
|
nodeType.prototype.onExecuted = function(message) {
|
|
|
|
if (typeof message !== 'object' || message === null) {
|
|
console.error("Unexpected message format:", message);
|
|
return;
|
|
}
|
|
|
|
if (message.sample_output) {
|
|
const allOutput = message.sample_output.join('');
|
|
let index_widget = this.widgets.find(w => w.name === "sample_index");
|
|
let sampleOutputWidget = this.widgets.find(w => w.name === "sample_output");
|
|
if (index_widget) {
|
|
index_widget.callback = async() => {
|
|
let index = index_widget.value;
|
|
|
|
// get the correct index of the output
|
|
const parsedOutput = JSON.parse(allOutput);
|
|
const sampleOutput = parsedOutput["captions"];
|
|
if (sampleOutputWidget) {
|
|
const description = sampleOutput[index]?.description || "No description available";
|
|
sampleOutputWidget.value = ("Example Output:\n" + description);
|
|
}
|
|
}
|
|
setTimeout(() => { index_widget.callback() }, 5);
|
|
}
|
|
// Update the sample_output widget if it exists
|
|
|
|
} else {
|
|
console.error("Unexpected sample_output format:", message.sample_output);
|
|
}
|
|
this.onResize?.(this.size);
|
|
this.setDirtyCanvas(true, true);
|
|
};
|
|
}
|
|
function setupTextDisplayNode(nodeType, nodeData, app) {
|
|
nodeType.prototype.onExecuted = function(message) {
|
|
let stringWidget = this.widgets.find(w => w.name === "STRING");
|
|
if (stringWidget && message.hasOwnProperty("INPUT")) {
|
|
let new_val = Array.isArray(message["INPUT"]) ? message["INPUT"].join("") : String(message["INPUT"]);
|
|
if (typeof new_val === 'string' && new_val.trim() !== "") {
|
|
stringWidget.value = new_val;
|
|
// this.size[1] = Math.max(this.size[1], new_val.split("\n").length * 20 + 40);
|
|
}
|
|
}
|
|
this.onResize?.(this.size);
|
|
this.setDirtyCanvas(true, true);
|
|
};
|
|
}
|
|
|
|
function setupDataAsTextDisplayNode(nodeType, nodeData, app) {
|
|
nodeType.prototype.onNodeCreated = function() {
|
|
this.message = ComfyWidgets.STRING(this, 'Output Text', ['STRING', { multiline: true }], app).widget;
|
|
this.message.value = "";
|
|
setupMessageStyle(this.message);
|
|
fitHeight(this);
|
|
};
|
|
|
|
nodeType.prototype.onExecuted = function(message) {
|
|
if (this.widgets.find(w => w.type === "customtext")) {
|
|
const new_val = message["INPUT"].join("");
|
|
let formattedJSON = formatAndDisplayJSON(new_val);
|
|
updateMessageValue(this, formattedJSON);
|
|
}
|
|
this.onResize?.(this.size);
|
|
this?.graph?.setDirtyCanvas(true, true);
|
|
};
|
|
}
|
|
|
|
function setupMessageStyle(message) {
|
|
message.inputEl.style.borderRadius = "8px";
|
|
message.inputEl.style.padding = "8px";
|
|
message.inputEl.style.height = "100%";
|
|
message.inputEl.classList.add("language-python");
|
|
}
|
|
|
|
function updateMessageValue(node, value) {
|
|
node.message.value = value;
|
|
node.message.inputEl.scrollTop = node.message.inputEl.scrollHeight;
|
|
} |