Merge branch 'main' into fix-notice-board-padding

2024-01-20 15:25:05 +09:00
parent 239a2dcf73 06c2a99f6d
commit 27dd2a95fe
23 changed files with 4290 additions and 622 deletions
--- a/js/comfyui-manager.js
+++ b/js/comfyui-manager.js
@@ -1,23 +1,61 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js"
 import { ComfyDialog, $el } from "../../scripts/ui.js";
-import { ShareDialog, SUPPORTED_OUTPUT_NODE_TYPES, getPotentialOutputsAndOutputNodes, ShareDialogChooser, showOpenArtShareDialog, showShareDialog } from "./comfyui-share-common.js";
+import {
+	ShareDialog,
+	SUPPORTED_OUTPUT_NODE_TYPES,
+	getPotentialOutputsAndOutputNodes,
+	ShareDialogChooser,
+	showOpenArtShareDialog,
+	showShareDialog,
+	showYouMLShareDialog
+} from "./comfyui-share-common.js";
 import { OpenArtShareDialog } from "./comfyui-share-openart.js";
 import { CustomNodesInstaller } from "./custom-nodes-downloader.js";
 import { AlternativesInstaller } from "./a1111-alter-downloader.js";
 import { SnapshotManager } from "./snapshot.js";
 import { ModelInstaller } from "./model-downloader.js";
-import { manager_instance, setManagerInstance, install_via_git_url, install_pip, rebootAPI, free_models } from  "./common.js";
+import { manager_instance, setManagerInstance, install_via_git_url, install_pip, rebootAPI, free_models } from "./common.js";
+import { ComponentBuilderDialog, load_components, set_component_policy, getPureName } from "./components-manager.js";

 var docStyle = document.createElement('style');
 docStyle.innerHTML = `
 #cm-manager-dialog {
 	width: 1000px;
-	height: 465px;
+	height: 495px;
 	box-sizing: content-box;
 	z-index: 10000;
 }

+.cb-widget {
+	width: 400px;
+	height: 25px;
+	box-sizing: border-box;
+	z-index: 10000;
+	margin-top: 10px;
+	margin-bottom: 5px;
+}
+
+.cb-widget-input {
+	width: 305px;
+	height: 25px;
+	box-sizing: border-box;
+}
+.cb-widget-input:disabled {
+	background-color: #444444;
+	color: white;
+}
+
+.cb-widget-input-label {
+	width: 90px;
+	height: 25px;
+	box-sizing: border-box;
+	color: white;
+	text-align: right;
+	display: inline-block;
+	margin-right: 5px;
+}
+
 .cm-menu-container {
 	column-gap: 20px;
 	display: flex;
@@ -63,6 +101,39 @@ docStyle.innerHTML = `
 	position: relative;
 }

+#custom-nodes-grid a {
+	color: #5555FF;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+#custom-nodes-grid a:hover {
+	color: #7777FF;
+	text-decoration: underline;
+}
+
+#external-models-grid a {
+	color: #5555FF;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+#external-models-grid a:hover {
+	color: #7777FF;
+	text-decoration: underline;
+}
+
+#alternatives-grid a {
+	color: #5555FF;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+#alternatives-grid a:hover {
+	color: #7777FF;
+	text-decoration: underline;
+}
+
 .cm-notice-board {
 	width: 290px;
 	height: 230px;
@@ -220,6 +291,16 @@ const style = `
 	box-sizing: border-box;
 }

+.cb-node-label {
+	width: 400px;
+	height:28px;
+	color: black;
+	background-color: #777777;
+	font-size: 18px;
+	text-align: center;
+	font-weight: bold;
+}
+
 #cm-close-button {
 	width: calc(100% - 65px);
 	bottom: 10px;
@@ -227,6 +308,16 @@ const style = `
 	overflow: hidden;
 }

+#cm-save-button {
+	width: calc(100% - 65px);
+	bottom:40px;
+	position: absolute;
+	overflow: hidden;
+}
+#cm-save-button:disabled {
+	background-color: #444444;
+}
+
 .pysssss-workflow-arrow-2 {
 	position: absolute;
 	top: 0;
@@ -327,6 +418,15 @@ function getNickname(node, nodename) {
 		if (nicknames[nodename]) {
 			node.nickname = nicknames[nodename];
 		}
+		else if(node.getInnerNodes) {
+			let pure_name = getPureName(node);
+			let groupNode = app.graph.extra?.groupNodes?.[pure_name];
+			if(groupNode) {
+				let packname = groupNode.packname;
+				node.nickname = packname;
+			}
+			return node.nickname;
+		}
 		else {
 			for(let i in nickname_patterns) {
 				let item = nickname_patterns[i];
@@ -641,6 +741,18 @@ class ManagerMenuDialog extends ComfyDialog {
 						}
 				}),

+				$el("button.cm-button", {
+					type: "button",
+					textContent: "Install via Git URL",
+					onclick: () => {
+						var url = prompt("Please enter the URL of the Git repository to install", "");
+
+						if (url !== null) {
+							install_via_git_url(url, self);
+						}
+					}
+				}),
+
 				$el("br", {}, []),
 				update_all_button,
 				update_comfyui_button,
@@ -673,6 +785,7 @@ class ManagerMenuDialog extends ComfyDialog {

 		// db mode
 		this.datasrc_combo = document.createElement("select");
+		this.datasrc_combo.setAttribute("title", "Configure where to retrieve node/model information. If set to 'local,' the channel is ignored, and if set to 'channel (remote),' it fetches the latest information each time the list is opened.");
 		this.datasrc_combo.className = "cm-menu-combo";
 		this.datasrc_combo.appendChild($el('option', { value: 'cache', text: 'DB: Channel (1day cache)' }, []));
 		this.datasrc_combo.appendChild($el('option', { value: 'local', text: 'DB: Local' }, []));
@@ -680,6 +793,7 @@ class ManagerMenuDialog extends ComfyDialog {

 		// preview method
 		let preview_combo = document.createElement("select");
+		preview_combo.setAttribute("title", "Configure how latent variables will be decoded during preview in the sampling process.");
 		preview_combo.className = "cm-menu-combo";
 		preview_combo.appendChild($el('option', { value: 'auto', text: 'Preview method: Auto' }, []));
 		preview_combo.appendChild($el('option', { value: 'taesd', text: 'Preview method: TAESD (slow)' }, []));
@@ -688,7 +802,7 @@ class ManagerMenuDialog extends ComfyDialog {

 		api.fetchApi('/manager/preview_method')
 			.then(response => response.text())
-			.then(data => { preview_combo.value = data; })
+			.then(data => { preview_combo.value = data; });

 		preview_combo.addEventListener('change', function (event) {
 			api.fetchApi(`/manager/preview_method?value=${event.target.value}`);
@@ -696,6 +810,7 @@ class ManagerMenuDialog extends ComfyDialog {

 		// nickname
 		let badge_combo = document.createElement("select");
+		badge_combo.setAttribute("title", "Configure the content to be displayed on the badge at the top right corner of the node. The ID is the identifier of the node. If 'hide built-in' is selected, both unknown nodes and built-in nodes will be omitted, making them indistinguishable");
 		badge_combo.className = "cm-menu-combo";
 		badge_combo.appendChild($el('option', { value: 'none', text: 'Badge: None' }, []));
 		badge_combo.appendChild($el('option', { value: 'nick', text: 'Badge: Nickname' }, []));
@@ -715,6 +830,7 @@ class ManagerMenuDialog extends ComfyDialog {

 		// channel
 		let channel_combo = document.createElement("select");
+		channel_combo.setAttribute("title", "Configure the channel for retrieving data from the Custom Node list (including missing nodes) or the Model list. Note that the badge utilizes local information.");
 		channel_combo.className = "cm-menu-combo";
 		api.fetchApi('/manager/channel_url_list')
 			.then(response => response.json())
@@ -739,12 +855,30 @@ class ManagerMenuDialog extends ComfyDialog {
 				}
 			});

+		// default ui state
+		let default_ui_combo = document.createElement("select");
+		default_ui_combo.setAttribute("title", "Set the default state to be displayed in the main menu when the browser starts.");
+		default_ui_combo.className = "cm-menu-combo";
+		default_ui_combo.appendChild($el('option', { value: 'none', text: 'Default UI: None' }, []));
+		default_ui_combo.appendChild($el('option', { value: 'history', text: 'Default UI: History' }, []));
+		default_ui_combo.appendChild($el('option', { value: 'queue', text: 'Default UI: Queue' }, []));
+		api.fetchApi('/manager/default_ui')
+			.then(response => response.text())
+			.then(data => { default_ui_combo.value = data; });
+
+		default_ui_combo.addEventListener('change', function (event) {
+			api.fetchApi(`/manager/default_ui?value=${event.target.value}`);
+		});
+
+
 		// share
 		let share_combo = document.createElement("select");
+		share_combo.setAttribute("title", "Hide the share button in the main menu or set the default action upon clicking it. Additionally, configure the default share site when sharing via the context menu's share button.");
 		share_combo.className = "cm-menu-combo";
 		const share_options = [
 			['none', 'None'],
 			['openart', 'OpenArt AI'],
+			['youml', 'YouML'],
 			['matrix', 'Matrix Server'],
 			['comfyworkflows', 'ComfyWorkflows'],
 			['all', 'All'],
@@ -753,6 +887,25 @@ class ManagerMenuDialog extends ComfyDialog {
 			share_combo.appendChild($el('option', { value: option[0], text: `Share: ${option[1]}` }, []));
 		}

+		// default ui state
+		let component_policy_combo = document.createElement("select");
+		component_policy_combo.setAttribute("title", "When loading the workflow, configure which version of the component to use.");
+		component_policy_combo.className = "cm-menu-combo";
+		component_policy_combo.appendChild($el('option', { value: 'workflow', text: 'Component: Use workflow version' }, []));
+		component_policy_combo.appendChild($el('option', { value: 'higher', text: 'Component: Use higher version' }, []));
+		component_policy_combo.appendChild($el('option', { value: 'mine', text: 'Component: Use my version' }, []));
+		api.fetchApi('/manager/component/policy')
+			.then(response => response.text())
+			.then(data => {
+				component_policy_combo.value = data;
+				set_component_policy(data);
+			});
+
+		component_policy_combo.addEventListener('change', function (event) {
+			api.fetchApi(`/manager/component/policy?value=${event.target.value}`);
+			set_component_policy(event.target.value);
+		});
+
 		api.fetchApi('/manager/share_option')
 			.then(response => response.text())
 			.then(data => {
@@ -779,19 +932,10 @@ class ManagerMenuDialog extends ComfyDialog {
 			channel_combo,
 			preview_combo,
 			badge_combo,
+			default_ui_combo,
 			share_combo,
+			component_policy_combo,
 			$el("br", {}, []),
-			$el("button.cm-button", {
-				type: "button",
-				textContent: "Install via Git URL",
-				onclick: () => {
-					var url = prompt("Please enter the URL of the Git repository to install", "");
-
-					if (url !== null) {
-						install_via_git_url(url, self);
-					}
-				}
-			}),

 			$el("br", {}, []),
 			$el("filedset.cm-experimental", {}, [
@@ -825,7 +969,7 @@ class ManagerMenuDialog extends ComfyDialog {
 					})
 				]),
 		];
-}
+	}

 	createControlsRight() {
 		const elts = [
@@ -877,12 +1021,12 @@ class ManagerMenuDialog extends ComfyDialog {
 				]),

 				$el("button", {
-          id: 'workflowgallery-button',
-          type: "button",
+					id: 'workflowgallery-button',
+					type: "button",
 					style: {
-            ...(localStorage.getItem("wg_last_visited") ? {height: '50px'} : {})
+						...(localStorage.getItem("wg_last_visited") ? {height: '50px'} : {})
 					},
-          onclick: (e) => {
+					onclick: (e) => {
 						const last_visited_site = localStorage.getItem("wg_last_visited")
 						if (!!last_visited_site) {
 							window.open(last_visited_site, "comfyui-workflow-gallery");
@@ -892,15 +1036,15 @@ class ManagerMenuDialog extends ComfyDialog {
 					},
 				}, [
 					$el("p", {
-            textContent: 'Workflow Gallery',
-            style: {
-              'text-align': 'center',
-              'color': 'white',
-              'font-size': '18px',
-              'margin': 0,
-              'padding': 0,
-            }
-          }, [
+						textContent: 'Workflow Gallery',
+						style: {
+							'text-align': 'center',
+							'color': 'white',
+							'font-size': '18px',
+							'margin': 0,
+							'padding': 0,
+						}
+					}, [
 						$el("p", {
 							id: 'workflowgallery-button-last-visited-label',
 							textContent: `(${localStorage.getItem("wg_last_visited") ? localStorage.getItem("wg_last_visited").split('/')[2] : ''})`,
@@ -913,10 +1057,10 @@ class ManagerMenuDialog extends ComfyDialog {
 							}
 						})
 					]),
-          $el("div.pysssss-workflow-arrow-2", {
-            id: `comfyworkflows-button-arrow`,
-            onclick: this.handleWorkflowGalleryButtonClick
-          })
+					$el("div.pysssss-workflow-arrow-2", {
+						id: `comfyworkflows-button-arrow`,
+						onclick: this.handleWorkflowGalleryButtonClick
+					})
 				]),

 				$el("button.cm-button", {
@@ -971,10 +1115,10 @@ class ManagerMenuDialog extends ComfyDialog {
 		this.element.style.display = "block";
 	}

-  handleWorkflowGalleryButtonClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    LiteGraph.closeAllContextMenus();
+	handleWorkflowGalleryButtonClick(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		LiteGraph.closeAllContextMenus();

 		// Modify the style of the button so that the UI can indicate the last
 		// visited site right away.
@@ -985,60 +1129,72 @@ class ManagerMenuDialog extends ComfyDialog {
 			lastVisitedLabel.textContent = `(${url.split('/')[2]})`;
 		}

-    const menu = new LiteGraph.ContextMenu(
-      [
-        {
-          title: "Share your art",
-          callback: () => {
-            if (share_option === 'openart') {
-              showOpenArtShareDialog();
-              return;
-            } else if (share_option === 'matrix' || share_option === 'comfyworkflows') {
-              showShareDialog(share_option);
-              return;
-            }
+		const menu = new LiteGraph.ContextMenu(
+			[
+				{
+					title: "Share your art",
+					callback: () => {
+						if (share_option === 'openart') {
+							showOpenArtShareDialog();
+							return;
+						} else if (share_option === 'matrix' || share_option === 'comfyworkflows') {
+							showShareDialog(share_option);
+							return;
+						} else if (share_option === 'youml') {
+							showYouMLShareDialog();
+							return;
+						}

-            if (!ShareDialogChooser.instance) {
-              ShareDialogChooser.instance = new ShareDialogChooser();
-            }
-            ShareDialogChooser.instance.show();
-          },
-        },
-        {
-          title: "Open 'openart.ai'",
+						if (!ShareDialogChooser.instance) {
+							ShareDialogChooser.instance = new ShareDialogChooser();
+						}
+						ShareDialogChooser.instance.show();
+					},
+				},
+				{
+					title: "Open 'openart.ai'",
 					callback: () => {
 						const url = "https://openart.ai/workflows/dev";
 						localStorage.setItem("wg_last_visited", url);
 						window.open(url, "comfyui-workflow-gallery");
 						modifyButtonStyle(url);
 					},
-        },
-        {
-          title: "Open 'comfyworkflows.com'",
-          callback: () => {
+				},
+				{
+					title: "Open 'youml.com'",
+					callback: () => {
+						const url = "https://youml.com/?from=comfyui-share";
+						localStorage.setItem("wg_last_visited", url);
+						window.open(url, "comfyui-workflow-gallery");
+						modifyButtonStyle(url);
+					},
+				},
+				{
+					title: "Open 'comfyworkflows.com'",
+					callback: () => {
 						const url = "https://comfyworkflows.com/";
 						localStorage.setItem("wg_last_visited", url);
-            window.open(url, "comfyui-workflow-gallery");
+						window.open(url, "comfyui-workflow-gallery");
 						modifyButtonStyle(url);
-          },
-        },
-        {
-          title: "Close",
-          callback: () => {
-            LiteGraph.closeAllContextMenus();
-          },
-        }
-      ],
-      {
-        event: e,
-        scale: 1.3,
-      },
-      window
-    );
-    // set the id so that we can override the context menu's z-index to be above the comfyui manager menu
-    menu.root.id = "workflowgallery-button-menu";
-    menu.root.classList.add("pysssss-workflow-popup-2");
-  }
+					},
+				},
+				{
+					title: "Close",
+					callback: () => {
+						LiteGraph.closeAllContextMenus();
+					},
+				}
+			],
+			{
+				event: e,
+				scale: 1.3,
+			},
+			window
+		);
+		// set the id so that we can override the context menu's z-index to be above the comfyui manager menu
+		menu.root.id = "workflowgallery-button-menu";
+		menu.root.classList.add("pysssss-workflow-popup-2");
+	}
 }


@@ -1051,6 +1207,14 @@ app.registerExtension({
 		});
 	},
 	async setup() {
+		let orig_clear = app.graph.clear;
+		app.graph.clear = function () {
+			orig_clear.call(app.graph);
+			load_components();
+		};
+
+		load_components();
+
 		const menu = document.querySelector(".comfy-menu");
 		const separator = document.createElement("hr");

@@ -1078,6 +1242,9 @@ app.registerExtension({
 			} else if (share_option === 'matrix' || share_option === 'comfyworkflows') {
 				showShareDialog(share_option);
 				return;
+			} else if (share_option === 'youml') {
+				showYouMLShareDialog();
+				return;
 			}

 			if(!ShareDialogChooser.instance) {
@@ -1100,6 +1267,7 @@ app.registerExtension({
 	async beforeRegisterNodeDef(nodeType, nodeData, app) {
 		this._addExtraNodeContextMenu(nodeType, app);
 	},
+
 	async nodeCreated(node, app) {
 		if(!node.badge_enabled) {
 			node.getNickname = function () { return getNickname(node, node.comfyClass.trim()) };
@@ -1110,6 +1278,7 @@ app.registerExtension({
 			node.badge_enabled = true;
 		}
 	},
+
 	async loadedGraphNode(node, app) {
 		if(!node.badge_enabled) {
 			const orig = node.onDrawForeground;
@@ -1120,8 +1289,23 @@ app.registerExtension({

 	_addExtraNodeContextMenu(node, app) {
 		const origGetExtraMenuOptions = node.prototype.getExtraMenuOptions;
+		node.prototype.cm_menu_added = true;
 		node.prototype.getExtraMenuOptions = function (_, options) {
 			origGetExtraMenuOptions?.apply?.(this, arguments);
+
+			if (node.category.startsWith('group nodes/')) {
+				options.push({
+					content: "Save As Component",
+					callback: (obj) => {
+						if (!ComponentBuilderDialog.instance) {
+							ComponentBuilderDialog.instance = new ComponentBuilderDialog();
+						}
+						ComponentBuilderDialog.instance.target_node = node;
+						ComponentBuilderDialog.instance.show();
+					}
+				}, null);
+			}
+
 			if (isOutputNode(node)) {
 				const { potential_outputs } = getPotentialOutputsAndOutputNodes([this]);
 				const hasOutput = potential_outputs.length > 0;
@@ -1158,3 +1342,27 @@ app.registerExtension({
 		}
 	},
 });
+
+
+async function set_default_ui()
+{
+	let res = await api.fetchApi('/manager/default_ui');
+	if(res.status == 200) {
+		let mode = await res.text();
+		switch(mode) {
+		case 'history':
+			app.ui.queue.hide();
+			app.ui.history.show();
+			break;
+		case 'queue':
+			app.ui.queue.show();
+			app.ui.history.hide();
+			break;
+		default:
+			// do nothing
+			break;
+		}
+	}
+}
+
+set_default_ui();