532 lines
15 KiB
JavaScript
532 lines
15 KiB
JavaScript
import { api } from "./api.js"
|
|
import "./domWidget.js";
|
|
|
|
let controlValueRunBefore = false;
|
|
export function updateControlWidgetLabel(widget) {
|
|
let replacement = "after";
|
|
let find = "before";
|
|
if (controlValueRunBefore) {
|
|
[find, replacement] = [replacement, find]
|
|
}
|
|
widget.label = (widget.label ?? widget.name).replace(find, replacement);
|
|
}
|
|
|
|
const IS_CONTROL_WIDGET = Symbol();
|
|
const HAS_EXECUTED = Symbol();
|
|
|
|
function getNumberDefaults(inputData, defaultStep, precision, enable_rounding) {
|
|
let defaultVal = inputData[1]["default"];
|
|
let { min, max, step, round} = inputData[1];
|
|
|
|
if (defaultVal == undefined) defaultVal = 0;
|
|
if (min == undefined) min = 0;
|
|
if (max == undefined) max = 2048;
|
|
if (step == undefined) step = defaultStep;
|
|
// precision is the number of decimal places to show.
|
|
// by default, display the the smallest number of decimal places such that changes of size step are visible.
|
|
if (precision == undefined) {
|
|
precision = Math.max(-Math.floor(Math.log10(step)),0);
|
|
}
|
|
|
|
if (enable_rounding && (round == undefined || round === true)) {
|
|
// by default, round the value to those decimal places shown.
|
|
round = Math.round(1000000*Math.pow(0.1,precision))/1000000;
|
|
}
|
|
|
|
return { val: defaultVal, config: { min, max, step: 10.0 * step, round, precision } };
|
|
}
|
|
|
|
export function addValueControlWidget(node, targetWidget, defaultValue = "randomize", values, widgetName, inputData) {
|
|
let name = inputData[1]?.control_after_generate;
|
|
if(typeof name !== "string") {
|
|
name = widgetName;
|
|
}
|
|
const widgets = addValueControlWidgets(node, targetWidget, defaultValue, {
|
|
addFilterList: false,
|
|
controlAfterGenerateName: name
|
|
}, inputData);
|
|
return widgets[0];
|
|
}
|
|
|
|
export function addValueControlWidgets(node, targetWidget, defaultValue = "randomize", options, inputData) {
|
|
if (!defaultValue) defaultValue = "randomize";
|
|
if (!options) options = {};
|
|
|
|
const getName = (defaultName, optionName) => {
|
|
let name = defaultName;
|
|
if (options[optionName]) {
|
|
name = options[optionName];
|
|
} else if (typeof inputData?.[1]?.[defaultName] === "string") {
|
|
name = inputData?.[1]?.[defaultName];
|
|
} else if (inputData?.[1]?.control_prefix) {
|
|
name = inputData?.[1]?.control_prefix + " " + name
|
|
}
|
|
return name;
|
|
}
|
|
|
|
const widgets = [];
|
|
const valueControl = node.addWidget(
|
|
"combo",
|
|
getName("control_after_generate", "controlAfterGenerateName"),
|
|
defaultValue,
|
|
function () {},
|
|
{
|
|
values: ["fixed", "increment", "decrement", "randomize"],
|
|
serialize: false, // Don't include this in prompt.
|
|
}
|
|
);
|
|
valueControl[IS_CONTROL_WIDGET] = true;
|
|
updateControlWidgetLabel(valueControl);
|
|
widgets.push(valueControl);
|
|
|
|
const isCombo = targetWidget.type === "combo";
|
|
let comboFilter;
|
|
if (isCombo) {
|
|
valueControl.options.values.push("increment-wrap");
|
|
}
|
|
if (isCombo && options.addFilterList !== false) {
|
|
comboFilter = node.addWidget(
|
|
"string",
|
|
getName("control_filter_list", "controlFilterListName"),
|
|
"",
|
|
function () {},
|
|
{
|
|
serialize: false, // Don't include this in prompt.
|
|
}
|
|
);
|
|
updateControlWidgetLabel(comboFilter);
|
|
|
|
widgets.push(comboFilter);
|
|
}
|
|
|
|
const applyWidgetControl = () => {
|
|
var v = valueControl.value;
|
|
|
|
if (isCombo && v !== "fixed") {
|
|
let values = targetWidget.options.values;
|
|
const filter = comboFilter?.value;
|
|
if (filter) {
|
|
let check;
|
|
if (filter.startsWith("/") && filter.endsWith("/")) {
|
|
try {
|
|
const regex = new RegExp(filter.substring(1, filter.length - 1));
|
|
check = (item) => regex.test(item);
|
|
} catch (error) {
|
|
console.error("Error constructing RegExp filter for node " + node.id, filter, error);
|
|
}
|
|
}
|
|
if (!check) {
|
|
const lower = filter.toLocaleLowerCase();
|
|
check = (item) => item.toLocaleLowerCase().includes(lower);
|
|
}
|
|
values = values.filter(item => check(item));
|
|
if (!values.length && targetWidget.options.values.length) {
|
|
console.warn("Filter for node " + node.id + " has filtered out all items", filter);
|
|
}
|
|
}
|
|
let current_index = values.indexOf(targetWidget.value);
|
|
let current_length = values.length;
|
|
|
|
switch (v) {
|
|
case "increment":
|
|
current_index += 1;
|
|
break;
|
|
case "increment-wrap":
|
|
current_index += 1;
|
|
if ( current_index >= current_length ) {
|
|
current_index = 0;
|
|
}
|
|
break;
|
|
case "decrement":
|
|
current_index -= 1;
|
|
break;
|
|
case "randomize":
|
|
current_index = Math.floor(Math.random() * current_length);
|
|
default:
|
|
break;
|
|
}
|
|
current_index = Math.max(0, current_index);
|
|
current_index = Math.min(current_length - 1, current_index);
|
|
if (current_index >= 0) {
|
|
let value = values[current_index];
|
|
targetWidget.value = value;
|
|
targetWidget.callback(value);
|
|
}
|
|
} else {
|
|
//number
|
|
let min = targetWidget.options.min;
|
|
let max = targetWidget.options.max;
|
|
// limit to something that javascript can handle
|
|
max = Math.min(1125899906842624, max);
|
|
min = Math.max(-1125899906842624, min);
|
|
let range = (max - min) / (targetWidget.options.step / 10);
|
|
|
|
//adjust values based on valueControl Behaviour
|
|
switch (v) {
|
|
case "fixed":
|
|
break;
|
|
case "increment":
|
|
targetWidget.value += targetWidget.options.step / 10;
|
|
break;
|
|
case "decrement":
|
|
targetWidget.value -= targetWidget.options.step / 10;
|
|
break;
|
|
case "randomize":
|
|
targetWidget.value = Math.floor(Math.random() * range) * (targetWidget.options.step / 10) + min;
|
|
default:
|
|
break;
|
|
}
|
|
/*check if values are over or under their respective
|
|
* ranges and set them to min or max.*/
|
|
if (targetWidget.value < min) targetWidget.value = min;
|
|
|
|
if (targetWidget.value > max)
|
|
targetWidget.value = max;
|
|
targetWidget.callback(targetWidget.value);
|
|
}
|
|
};
|
|
|
|
valueControl.beforeQueued = () => {
|
|
if (controlValueRunBefore) {
|
|
// Don't run on first execution
|
|
if (valueControl[HAS_EXECUTED]) {
|
|
applyWidgetControl();
|
|
}
|
|
}
|
|
valueControl[HAS_EXECUTED] = true;
|
|
};
|
|
|
|
valueControl.afterQueued = () => {
|
|
if (!controlValueRunBefore) {
|
|
applyWidgetControl();
|
|
}
|
|
};
|
|
|
|
return widgets;
|
|
};
|
|
|
|
function seedWidget(node, inputName, inputData, app, widgetName) {
|
|
const seed = createIntWidget(node, inputName, inputData, app, true);
|
|
const seedControl = addValueControlWidget(node, seed.widget, "randomize", undefined, widgetName, inputData);
|
|
|
|
seed.widget.linkedWidgets = [seedControl];
|
|
return seed;
|
|
}
|
|
|
|
function createIntWidget(node, inputName, inputData, app, isSeedInput) {
|
|
const control = inputData[1]?.control_after_generate;
|
|
if (!isSeedInput && control) {
|
|
return seedWidget(node, inputName, inputData, app, typeof control === "string" ? control : undefined);
|
|
}
|
|
|
|
let widgetType = isSlider(inputData[1]["display"], app);
|
|
const { val, config } = getNumberDefaults(inputData, 1, 0, true);
|
|
Object.assign(config, { precision: 0 });
|
|
return {
|
|
widget: node.addWidget(
|
|
widgetType,
|
|
inputName,
|
|
val,
|
|
function (v) {
|
|
const s = this.options.step / 10;
|
|
let sh = this.options.min % s;
|
|
if (isNaN(sh)) {
|
|
sh = 0;
|
|
}
|
|
this.value = Math.round((v - sh) / s) * s + sh;
|
|
},
|
|
config
|
|
),
|
|
};
|
|
}
|
|
|
|
function addMultilineWidget(node, name, opts, app) {
|
|
const inputEl = document.createElement("textarea");
|
|
inputEl.className = "comfy-multiline-input";
|
|
inputEl.value = opts.defaultVal;
|
|
inputEl.placeholder = opts.placeholder || name;
|
|
|
|
const widget = node.addDOMWidget(name, "customtext", inputEl, {
|
|
getValue() {
|
|
return inputEl.value;
|
|
},
|
|
setValue(v) {
|
|
inputEl.value = v;
|
|
},
|
|
});
|
|
widget.inputEl = inputEl;
|
|
|
|
inputEl.addEventListener("input", () => {
|
|
widget.callback?.(widget.value);
|
|
});
|
|
|
|
return { minWidth: 400, minHeight: 200, widget };
|
|
}
|
|
|
|
function isSlider(display, app) {
|
|
if (app.ui.settings.getSettingValue("Comfy.DisableSliders")) {
|
|
return "number"
|
|
}
|
|
|
|
return (display==="slider") ? "slider" : "number"
|
|
}
|
|
|
|
export function initWidgets(app) {
|
|
app.ui.settings.addSetting({
|
|
id: "Comfy.WidgetControlMode",
|
|
name: "Widget Value Control Mode",
|
|
type: "combo",
|
|
defaultValue: "after",
|
|
options: ["before", "after"],
|
|
tooltip: "Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.",
|
|
onChange(value) {
|
|
controlValueRunBefore = value === "before";
|
|
for (const n of app.graph._nodes) {
|
|
if (!n.widgets) continue;
|
|
for (const w of n.widgets) {
|
|
if (w[IS_CONTROL_WIDGET]) {
|
|
updateControlWidgetLabel(w);
|
|
if (w.linkedWidgets) {
|
|
for (const l of w.linkedWidgets) {
|
|
updateControlWidgetLabel(l);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
app.graph.setDirtyCanvas(true);
|
|
},
|
|
});
|
|
}
|
|
|
|
export const ComfyWidgets = {
|
|
"INT:seed": seedWidget,
|
|
"INT:noise_seed": seedWidget,
|
|
FLOAT(node, inputName, inputData, app) {
|
|
let widgetType = isSlider(inputData[1]["display"], app);
|
|
let precision = app.ui.settings.getSettingValue("Comfy.FloatRoundingPrecision");
|
|
let disable_rounding = app.ui.settings.getSettingValue("Comfy.DisableFloatRounding")
|
|
if (precision == 0) precision = undefined;
|
|
const { val, config } = getNumberDefaults(inputData, 0.5, precision, !disable_rounding);
|
|
return { widget: node.addWidget(widgetType, inputName, val,
|
|
function (v) {
|
|
if (config.round) {
|
|
this.value = Math.round((v + Number.EPSILON)/config.round)*config.round;
|
|
if (this.value > config.max) this.value = config.max;
|
|
if (this.value < config.min) this.value = config.min;
|
|
} else {
|
|
this.value = v;
|
|
}
|
|
}, config) };
|
|
},
|
|
INT(node, inputName, inputData, app) {
|
|
return createIntWidget(node, inputName, inputData, app);
|
|
},
|
|
BOOLEAN(node, inputName, inputData) {
|
|
let defaultVal = false;
|
|
let options = {};
|
|
if (inputData[1]) {
|
|
if (inputData[1].default)
|
|
defaultVal = inputData[1].default;
|
|
if (inputData[1].label_on)
|
|
options["on"] = inputData[1].label_on;
|
|
if (inputData[1].label_off)
|
|
options["off"] = inputData[1].label_off;
|
|
}
|
|
return {
|
|
widget: node.addWidget(
|
|
"toggle",
|
|
inputName,
|
|
defaultVal,
|
|
() => {},
|
|
options,
|
|
)
|
|
};
|
|
},
|
|
STRING(node, inputName, inputData, app) {
|
|
const defaultVal = inputData[1].default || "";
|
|
const multiline = !!inputData[1].multiline;
|
|
|
|
let res;
|
|
if (multiline) {
|
|
res = addMultilineWidget(node, inputName, { defaultVal, ...inputData[1] }, app);
|
|
} else {
|
|
res = { widget: node.addWidget("text", inputName, defaultVal, () => {}, {}) };
|
|
}
|
|
|
|
if(inputData[1].dynamicPrompts != undefined)
|
|
res.widget.dynamicPrompts = inputData[1].dynamicPrompts;
|
|
|
|
return res;
|
|
},
|
|
COMBO(node, inputName, inputData) {
|
|
const type = inputData[0];
|
|
let defaultValue = type[0];
|
|
if (inputData[1] && inputData[1].default) {
|
|
defaultValue = inputData[1].default;
|
|
}
|
|
const res = { widget: node.addWidget("combo", inputName, defaultValue, () => {}, { values: type }) };
|
|
if (inputData[1]?.control_after_generate) {
|
|
res.widget.linkedWidgets = addValueControlWidgets(node, res.widget, undefined, undefined, inputData);
|
|
}
|
|
return res;
|
|
},
|
|
IMAGEUPLOAD(node, inputName, inputData, app) {
|
|
const imageWidget = node.widgets.find((w) => w.name === (inputData[1]?.widget ?? "image"));
|
|
let uploadWidget;
|
|
|
|
function showImage(name) {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
node.imgs = [img];
|
|
app.graph.setDirtyCanvas(true);
|
|
};
|
|
let folder_separator = name.lastIndexOf("/");
|
|
let subfolder = "";
|
|
if (folder_separator > -1) {
|
|
subfolder = name.substring(0, folder_separator);
|
|
name = name.substring(folder_separator + 1);
|
|
}
|
|
img.src = api.apiURL(`/view?filename=${encodeURIComponent(name)}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}${app.getRandParam()}`);
|
|
node.setSizeForImage?.();
|
|
}
|
|
|
|
var default_value = imageWidget.value;
|
|
Object.defineProperty(imageWidget, "value", {
|
|
set : function(value) {
|
|
this._real_value = value;
|
|
},
|
|
|
|
get : function() {
|
|
let value = "";
|
|
if (this._real_value) {
|
|
value = this._real_value;
|
|
} else {
|
|
return default_value;
|
|
}
|
|
|
|
if (value.filename) {
|
|
let real_value = value;
|
|
value = "";
|
|
if (real_value.subfolder) {
|
|
value = real_value.subfolder + "/";
|
|
}
|
|
|
|
value += real_value.filename;
|
|
|
|
if(real_value.type && real_value.type !== "input")
|
|
value += ` [${real_value.type}]`;
|
|
}
|
|
return value;
|
|
}
|
|
});
|
|
|
|
// Add our own callback to the combo widget to render an image when it changes
|
|
const cb = node.callback;
|
|
imageWidget.callback = function () {
|
|
showImage(imageWidget.value);
|
|
if (cb) {
|
|
return cb.apply(this, arguments);
|
|
}
|
|
};
|
|
|
|
// On load if we have a value then render the image
|
|
// The value isnt set immediately so we need to wait a moment
|
|
// No change callbacks seem to be fired on initial setting of the value
|
|
requestAnimationFrame(() => {
|
|
if (imageWidget.value) {
|
|
showImage(imageWidget.value);
|
|
}
|
|
});
|
|
|
|
async function uploadFile(file, updateNode, pasted = false) {
|
|
try {
|
|
// Wrap file in formdata so it includes filename
|
|
const body = new FormData();
|
|
body.append("image", file);
|
|
if (pasted) body.append("subfolder", "pasted");
|
|
const resp = await api.fetchApi("/upload/image", {
|
|
method: "POST",
|
|
body,
|
|
});
|
|
|
|
if (resp.status === 200) {
|
|
const data = await resp.json();
|
|
// Add the file to the dropdown list and update the widget value
|
|
let path = data.name;
|
|
if (data.subfolder) path = data.subfolder + "/" + path;
|
|
|
|
if (!imageWidget.options.values.includes(path)) {
|
|
imageWidget.options.values.push(path);
|
|
}
|
|
|
|
if (updateNode) {
|
|
showImage(path);
|
|
imageWidget.value = path;
|
|
}
|
|
} else {
|
|
alert(resp.status + " - " + resp.statusText);
|
|
}
|
|
} catch (error) {
|
|
alert(error);
|
|
}
|
|
}
|
|
|
|
const fileInput = document.createElement("input");
|
|
Object.assign(fileInput, {
|
|
type: "file",
|
|
accept: "image/jpeg,image/png,image/webp",
|
|
style: "display: none",
|
|
onchange: async () => {
|
|
if (fileInput.files.length) {
|
|
await uploadFile(fileInput.files[0], true);
|
|
}
|
|
},
|
|
});
|
|
document.body.append(fileInput);
|
|
|
|
// Create the button widget for selecting the files
|
|
uploadWidget = node.addWidget("button", inputName, "image", () => {
|
|
fileInput.click();
|
|
});
|
|
uploadWidget.label = "choose file to upload";
|
|
uploadWidget.serialize = false;
|
|
|
|
// Add handler to check if an image is being dragged over our node
|
|
node.onDragOver = function (e) {
|
|
if (e.dataTransfer && e.dataTransfer.items) {
|
|
const image = [...e.dataTransfer.items].find((f) => f.kind === "file");
|
|
return !!image;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
// On drop upload files
|
|
node.onDragDrop = function (e) {
|
|
console.log("onDragDrop called");
|
|
let handled = false;
|
|
for (const file of e.dataTransfer.files) {
|
|
if (file.type.startsWith("image/")) {
|
|
uploadFile(file, !handled); // Dont await these, any order is fine, only update on first one
|
|
handled = true;
|
|
}
|
|
}
|
|
|
|
return handled;
|
|
};
|
|
|
|
node.pasteFile = function(file) {
|
|
if (file.type.startsWith("image/")) {
|
|
const is_pasted = (file.name === "image.png") &&
|
|
(file.lastModified - Date.now() < 2000);
|
|
uploadFile(file, true, is_pasted);
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
return { widget: uploadWidget };
|
|
},
|
|
};
|