Restart Required`;
}
const buttons = this.getActionButtons(action, rowItem);
return `${buttons}
`;
}
}, {
id: "alternatives",
name: "Alternatives",
width: 400,
maxWidth: 5000,
invisible: !this.hasAlternatives(),
classMap: 'cn-node-desc'
}, {
id: 'description',
name: 'Description',
width: 400,
maxWidth: 5000,
classMap: 'cn-node-desc'
}, {
id: "extensions",
name: "Extensions",
width: 80,
align: 'center',
formatter: (extensions, rowItem, columnItem) => {
const extensionsList = rowItem.extensionsList;
if (!extensionsList) {
return;
}
const list = [];
const eId = `popover_extensions_${columnItem.id}_${rowItem.tg_index}`;
list.push(``)
list.push(``)
list.push(`
【${rowItem.title}】Extension Nodes (${extensionsList.length})
`);
extensionsList.forEach(en => {
list.push(`${en}`);
})
list.push("");
return list.join("");
}
}, {
id: "conflicts",
name: "Conflicts",
width: 80,
align: 'center',
formatter: (conflicts, rowItem, columnItem) => {
const conflictsList = rowItem.conflictsList;
if (!conflictsList) {
return;
}
const list = [];
const cId = `popover_conflicts_${columnItem.id}_${rowItem.tg_index}`;
list.push(``)
list.push(``)
list.push(`
【${rowItem.title}】Conflicted Nodes (${conflictsList.length})
`);
conflictsList.forEach(en => {
let [node_name, extension_name] = en;
extension_name = extension_name.split('/').filter(it => it).pop();
if(extension_name.endsWith('.git')) {
extension_name = extension_name.slice(0, -4);
}
list.push(`${node_name} [${extension_name}]`);
})
list.push("");
return list.join("");
}
}, {
id: 'author',
name: 'Author',
width: 120,
classMap: "cn-node-author",
formatter: (author, rowItem, columnItem) => {
if (rowItem.trust) {
return `✅ ${author}`;
}
return author;
}
}, {
id: 'stars',
name: '★',
align: 'center',
classMap: "cn-node-stars",
formatter: (stars) => {
if (stars < 0) {
return 'N/A';
}
if (typeof stars === 'number') {
return stars.toLocaleString();
}
return stars;
}
}, {
id: 'last_update',
name: 'Last Update',
align: 'center',
type: 'date',
width: 100,
classMap: "cn-node-last-update",
formatter: (last_update) => {
if (last_update < 0) {
return 'N/A';
}
return `${last_update}`.split(' ')[0];
}
}];
let rows_values = Object.keys(rows).map(key => rows[key]);
rows_values =
rows_values.sort((a, b) => {
if (a.version == 'unknown' && b.version != 'unknown') return 1;
if (a.version != 'unknown' && b.version == 'unknown') return -1;
if (a.stars !== b.stars) {
return b.stars - a.stars;
}
if (a.last_update !== b.last_update) {
return new Date(b.last_update) - new Date(a.last_update);
}
return 0;
});
this.grid.setData({
options: options,
rows: rows_values,
columns: columns
});
for(let i=0; i {
let type = item.action;
if (item.restart) {
type = "Restart Required";
}
if (selectedMap[type]) {
selectedMap[type].push(item.hash);
} else {
selectedMap[type] = [item.hash];
}
});
this.selectedMap = selectedMap;
const list = [];
Object.keys(selectedMap).forEach(v => {
const filterItem = this.getFilterItem(v);
list.push(`
Selected ${selectedMap[v].length} ${filterItem ? filterItem.label : v}
${this.grid.hasMask ? "" : this.getActionButtons(v, null, true)}
`);
});
this.showSelection(list.join(""));
}
focusInstall(item, mode) {
const cellNode = this.grid.getCellNode(item, "installed");
if (cellNode) {
const cellBtn = cellNode.querySelector(`button[mode="${mode}"]`);
if (cellBtn) {
cellBtn.classList.add("cn-btn-loading");
return true
}
}
}
async installNodeWithVersion(rowItem, btn, is_enable) {
let hash = rowItem.hash;
let title = rowItem.title;
const item = this.grid.getRowItemBy("hash", hash);
let node_id = item.originalData.id;
this.showLoading();
let res;
if(is_enable) {
res = await api.fetchApi(`/customnode/disabled_versions/${node_id}`, { cache: "no-store" });
}
else {
res = await api.fetchApi(`/customnode/versions/${node_id}`, { cache: "no-store" });
}
this.hideLoading();
if(res.status == 200) {
let obj = await res.json();
let versions = [];
let default_version;
let version_cnt = 0;
if(!is_enable) {
if(rowItem.originalData.active_version != 'nightly') {
versions.push('nightly');
default_version = 'nightly';
version_cnt++;
}
if(rowItem.cnr_latest != rowItem.originalData.active_version && obj.length > 0) {
versions.push('latest');
}
}
for(let v of obj) {
if(rowItem.originalData.active_version != v.version) {
default_version = v.version;
versions.push(v.version);
version_cnt++;
}
}
this.showVersionSelectorDialog(versions, (selected_version) => {
this.installNodes([hash], btn, title, selected_version);
});
}
else {
show_message('Failed to fetch versions from ComfyRegistry.');
}
}
async installNodes(list, btn, title, selected_version) {
const { target, label, mode} = btn;
if(mode === "uninstall") {
title = title || `${list.length} custom nodes`;
const confirmed = await customConfirm(`Are you sure uninstall ${title}?`);
if (!confirmed) {
return;
}
}
if(mode === "reinstall") {
title = title || `${list.length} custom nodes`;
const confirmed = await customConfirm(`Are you sure reinstall ${title}?`);
if (!confirmed) {
return;
}
}
target.classList.add("cn-btn-loading");
this.showError("");
let needRestart = false;
let errorMsg = "";
for (const hash of list) {
const item = this.grid.getRowItemBy("hash", hash);
if (!item) {
errorMsg = `Not found custom node: ${hash}`;
break;
}
this.grid.scrollRowIntoView(item);
if (!this.focusInstall(item, mode)) {
this.grid.onNextUpdated(() => {
this.focusInstall(item, mode);
});
}
this.showStatus(`${label} ${item.title} ...`);
const data = item.originalData;
data.selected_version = selected_version;
data.channel = this.channel;
data.mode = this.mode;
let install_mode = mode;
if(mode == 'switch') {
install_mode = 'install';
}
// don't post install if install_mode == 'enable'
data.skip_post_install = install_mode == 'enable';
let api_mode = install_mode;
if(install_mode == 'enable') {
api_mode = 'install';
}
if(install_mode == 'reinstall') {
api_mode = 'reinstall';
}
const res = await api.fetchApi(`/customnode/${api_mode}`, {
method: 'POST',
body: JSON.stringify(data)
});
if (res.status != 200) {
errorMsg = `${item.title} ${mode} failed: `;
if(res.status == 403) {
errorMsg += `This action is not allowed with this security level configuration.`;
} else if(res.status == 404) {
errorMsg += `With the current security level configuration, only custom nodes from the "default channel" can be installed.`;
} else {
errorMsg += await res.text();
}
break;
}
needRestart = true;
this.grid.setRowSelected(item, false);
item.restart = true;
this.restartMap[item.hash] = true;
this.grid.updateCell(item, "action");
//console.log(res.data);
}
target.classList.remove("cn-btn-loading");
if (errorMsg) {
this.showError(errorMsg);
show_message("Installation Error:\n"+errorMsg);
} else {
this.showStatus(`${label} ${list.length} custom node(s) successfully`);
}
if (needRestart) {
this.showRestart();
this.showMessage(`To apply the installed/updated/disabled/enabled custom node, please restart ComfyUI. And refresh browser.`, "red")
}
}
// ===========================================================================================
async getExtensionMappings() {
const mode = manager_instance.datasrc_combo.value;
this.showStatus(`Loading extension mappings (${mode}) ...`);
const res = await fetchData(`/customnode/getmappings?mode=${mode}`);
if (res.error) {
console.log(res.error);
return {}
}
const data = res.data;
const extension_mappings = {};
const conflicts_map = {};
Object.keys(data).forEach(k => {
const [extensions, metadata] = data[k];
extension_mappings[k] = {
extensions,
metadata
}
extensions.forEach(node => {
let l = conflicts_map[node];
if(!l) {
l = [];
conflicts_map[node] = l;
}
l.push(k);
})
})
Object.keys(conflicts_map).forEach(node => {
const list = conflicts_map[node];
if(list.length > 1) {
list.forEach(k => {
const item = extension_mappings[k];
if(!item) {
console.log(`not found ${k}`)
return;
}
if (!item.conflicts) {
item.conflicts = [];
}
list.forEach(key => {
if(k !== key) {
item.conflicts.push([node, key])
}
})
})
}
})
return extension_mappings;
}
async getMissingNodes() {
const mode = manager_instance.datasrc_combo.value;
this.showStatus(`Loading missing nodes (${mode}) ...`);
const res = await fetchData(`/customnode/getmappings?mode=${mode}`);
if (res.error) {
this.showError(`Failed to get custom node mappings: ${res.error}`);
return;
}
const mappings = res.data;
// build regex->url map
const regex_to_pack = [];
for(let k in this.custom_nodes) {
let node = this.custom_nodes[k];
if(node.nodename_pattern) {
regex_to_pack.push({
regex: new RegExp(node.nodename_pattern),
url: node.files[0]
});
}
}
// build name->url map
const name_to_packs = {};
for (const url in mappings) {
const names = mappings[url];
for(const name in names[0]) {
let v = name_to_packs[names[0][name]];
if(v == undefined) {
v = [];
name_to_packs[names[0][name]] = v;
}
v.push(url);
}
}
const registered_nodes = new Set();
for (let i in LiteGraph.registered_node_types) {
registered_nodes.add(LiteGraph.registered_node_types[i].type);
}
const missing_nodes = new Set();
const workflow = app.graph.serialize();
const group_nodes = workflow.extra && workflow.extra.groupNodes ? workflow.extra.groupNodes : [];
let nodes = workflow.nodes;
for (let i in group_nodes) {
let group_node = group_nodes[i];
nodes = nodes.concat(group_node.nodes);
}
for (let i in nodes) {
const node_type = nodes[i].type;
if(node_type.startsWith('workflow/') || node_type.startsWith('workflow>'))
continue;
if (!registered_nodes.has(node_type)) {
const packs = name_to_packs[node_type.trim()];
if(packs)
packs.forEach(url => {
missing_nodes.add(url);
});
else {
for(let j in regex_to_pack) {
if(regex_to_pack[j].regex.test(node_type)) {
missing_nodes.add(regex_to_pack[j].url);
}
}
}
}
}
const hashMap = {};
for(let k in this.custom_nodes) {
let item = this.custom_nodes[k];
if(missing_nodes.has(item.id)) {
hashMap[item.hash] = true;
}
else if (item.files?.some(file => missing_nodes.has(file))) {
hashMap[item.hash] = true;
}
}
return hashMap;
}
async getFavorites() {
const hashMap = {};
for(let k in this.custom_nodes) {
let item = this.custom_nodes[k];
if(item.is_favorite)
hashMap[item.hash] = true;
}
return hashMap;
}
async getAlternatives() {
const mode = manager_instance.datasrc_combo.value;
this.showStatus(`Loading alternatives (${mode}) ...`);
const res = await fetchData(`/customnode/alternatives?mode=${mode}`);
if (res.error) {
this.showError(`Failed to get alternatives: ${res.error}`);
return [];
}
const hashMap = {};
const items = res.data;
for(let i in items) {
let item = items[i];
let custom_node = this.custom_nodes[i];
if (!custom_node) {
console.log(`Not found custom node: ${item.id}`);
continue;
}
const tags = `${item.tags}`.split(",").map(tag => {
return `${tag.trim()}
`;
}).join("");
hashMap[custom_node.hash] = {
alternatives: `${tags}
${item.description}`
}
}
return hashMap;
}
async loadData(show_mode = ShowMode.NORMAL) {
this.show_mode = show_mode;
console.log("Show mode:", show_mode);
this.showLoading();
this.extension_mappings = await this.getExtensionMappings();
const mode = manager_instance.datasrc_combo.value;
this.showStatus(`Loading custom nodes (${mode}) ...`);
const skip_update = this.show_mode === ShowMode.UPDATE ? "" : "&skip_update=true";
const res = await fetchData(`/customnode/getlist?mode=${mode}${skip_update}`);
if (res.error) {
this.showError("Failed to get custom node list.");
this.hideLoading();
return
}
const { channel, node_packs } = res.data;
this.channel = channel;
this.mode = mode;
this.custom_nodes = node_packs;
if(this.channel !== 'default') {
this.element.querySelector(".cn-manager-channel").innerHTML = `Channel: ${this.channel} (Incomplete list)`;
}
for (const k in node_packs) {
let item = node_packs[k];
item.originalData = JSON.parse(JSON.stringify(item));
if(item.originalData.id == undefined) {
item.originalData.id = k;
}
item.hash = md5(k);
}
const filterItem = this.getFilterItem(this.show_mode);
if(filterItem) {
let hashMap;
if(this.show_mode == ShowMode.UPDATE) {
hashMap = {};
for (const k in node_packs) {
let it = node_packs[k];
if (it['update-state'] === "true") {
hashMap[it.hash] = true;
}
}
} else if(this.show_mode == ShowMode.MISSING) {
hashMap = await this.getMissingNodes();
} else if(this.show_mode == ShowMode.ALTERNATIVES) {
hashMap = await this.getAlternatives();
} else if(this.show_mode == ShowMode.FAVORITES) {
hashMap = await this.getFavorites();
}
filterItem.hashMap = hashMap;
filterItem.hasData = true;
}
for(let k in node_packs) {
let nodeItem = node_packs[k];
if (this.restartMap[nodeItem.hash]) {
nodeItem.restart = true;
}
if(nodeItem['update-state'] == "true") {
nodeItem.action = 'updatable';
}
else if(nodeItem['import-fail']) {
nodeItem.action = 'import-fail';
}
else {
nodeItem.action = nodeItem.state;
}
if(nodeItem['invalid-installation']) {
nodeItem.action = 'invalid-installation';
}
const filterTypes = new Set();
this.filterList.forEach(filterItem => {
const { value, hashMap } = filterItem;
if (hashMap) {
const hashData = hashMap[nodeItem.hash]
if (hashData) {
filterTypes.add(value);
if (value === ShowMode.UPDATE) {
nodeItem['update-state'] = "true";
}
if (value === ShowMode.MISSING) {
nodeItem['missing-node'] = "true";
}
if (typeof hashData === "object") {
Object.assign(nodeItem, hashData);
}
}
} else {
if (nodeItem.state === value) {
filterTypes.add(value);
}
switch(nodeItem.state) {
case "enabled":
filterTypes.add("enabled");
case "disabled":
filterTypes.add("installed");
break;
case "not-installed":
filterTypes.add("not-installed");
break;
}
if(nodeItem.version != 'unknown') {
filterTypes.add("cnr");
}
else {
filterTypes.add("unknown");
}
if(nodeItem['update-state'] == 'true') {
filterTypes.add("updatable");
}
if(nodeItem['import-fail']) {
filterTypes.add("import-fail");
}
if(nodeItem['invalid-installation']) {
filterTypes.add("invalid-installation");
}
}
});
nodeItem.filterTypes = Array.from(filterTypes);
}
this.renderGrid();
this.hideLoading();
}
// ===========================================================================================
showSelection(msg) {
this.element.querySelector(".cn-manager-selection").innerHTML = msg;
}
showError(err) {
this.showMessage(err, "red");
}
showMessage(msg, color) {
if (color) {
msg = `${msg}`;
}
this.element.querySelector(".cn-manager-message").innerHTML = msg;
}
showStatus(msg, color) {
if (color) {
msg = `${msg}`;
}
this.element.querySelector(".cn-manager-status").innerHTML = msg;
}
showLoading() {
this.setDisabled(true);
if (this.grid) {
this.grid.showLoading();
this.grid.showMask({
opacity: 0.05
});
}
}
hideLoading() {
this.setDisabled(false);
if (this.grid) {
this.grid.hideLoading();
this.grid.hideMask();
}
}
setDisabled(disabled) {
const $close = this.element.querySelector(".cn-manager-close");
const $restart = this.element.querySelector(".cn-manager-restart");
const list = [
".cn-manager-header input",
".cn-manager-header select",
".cn-manager-footer button",
".cn-manager-selection button"
].map(s => {
return Array.from(this.element.querySelectorAll(s));
})
.flat()
.filter(it => {
return it !== $close && it !== $restart;
});
list.forEach($elem => {
if (disabled) {
$elem.setAttribute("disabled", "disabled");
} else {
$elem.removeAttribute("disabled");
}
});
Array.from(this.element.querySelectorAll(".cn-btn-loading")).forEach($elem => {
$elem.classList.remove("cn-btn-loading");
});
}
showRestart() {
this.element.querySelector(".cn-manager-restart").style.display = "block";
}
setFilter(filterValue) {
let filter = "";
const filterItem = this.getFilterItem(filterValue);
if(filterItem) {
filter = filterItem.value;
}
this.filter = filter;
this.element.querySelector(".cn-manager-filter").value = filter;
}
setKeywords(keywords = "") {
this.keywords = keywords;
this.element.querySelector(".cn-manager-keywords").value = keywords;
}
show(show_mode) {
this.element.style.display = "flex";
this.setFilter(show_mode);
this.setKeywords("");
this.showSelection("");
this.showMessage("");
this.loadData(show_mode);
}
close() {
this.element.style.display = "none";
}
}