From b79ed40f6dd5ca42193d9d0d85a3da25b3746da3 Mon Sep 17 00:00:00 2001 From: KarrixLee Date: Tue, 26 Aug 2025 15:52:45 +0800 Subject: [PATCH] update ui --- web-plugin/index.js | 977 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 824 insertions(+), 153 deletions(-) diff --git a/web-plugin/index.js b/web-plugin/index.js index 02cf9a0..681ad7c 100644 --- a/web-plugin/index.js +++ b/web-plugin/index.js @@ -1032,94 +1032,60 @@ const ext = { function showError(title, message) { infoDialog.show( - `

${title}


${message} ` - ); -} - -function createDynamicUIHtml(data) { - console.log(data); - let html = - '
'; - const bgcolor = "var(--comfy-input-bg)"; - const evenBg = "var(--border-color)"; - const textColor = "var(--input-text)"; - - // Custom Nodes - html += `
`; - html += - '

Custom Nodes

'; - - if (data.missing_nodes?.length > 0) { - html += ` -
-

Missing Nodes

-

These nodes are not found with any matching custom_nodes in the ComfyUI Manager Database

- ${data.missing_nodes - .map((node) => { - return `

${node}

`; - }) - .join("")} + `
+
+
+ + + + + +
+
+

+ ${title} +

+

+ Something went wrong +

+
- `; - } - - Object.values(data.custom_nodes).forEach((node) => { - html += ` -
- ${ - node.name - } -

${node.hash}

- ${ - node.warning - ? `

${node.warning}

` - : "" - } -
- `; - }); - html += "
"; - - // Models - html += `
`; - html += - '

Models

'; - - Object.entries(data.models).forEach(([section, items]) => { - html += ` -
-

${ - section.charAt(0).toUpperCase() + section.slice(1) - }

`; - items.forEach((item) => { - html += `

${item.name}

`; - }); - html += "
"; - }); - html += "
"; - - // Models - html += `
`; - html += - '

Files

'; - - Object.entries(data.files).forEach(([section, items]) => { - html += ` -
-

${ - section.charAt(0).toUpperCase() + section.slice(1) - }

`; - items.forEach((item) => { - html += `

${item.name}

`; - }); - html += "
"; - }); - html += "
"; - - html += "
"; - return html; + +
+

+ ${message} +

+
+
` + ); } // Modify the existing deployWorkflow function @@ -1162,17 +1128,75 @@ async function deployWorkflow() { const workflow_id = deployMetaNode.widgets[1].value; const ok = await confirmDialog.confirm( - `Confirm deployment`, + `Confirm Deployment`, ` -
- - A new version of will be deployed, do you confirm? -

- - -
- - +
+
+
+ + + + +
+
+

+ Deploy New Version +

+

+ Confirm your deployment settings +

+
+
+ +
+

+ A new version will be deployed with the following details: +

+ +
+
+
WORKFLOW
+
${workflow_name}
+
+ +
+
ENDPOINT
+
${endpoint}
+
+
+
` ); @@ -1214,7 +1238,96 @@ async function deployWorkflow() { console.log(data); infoDialog.show( - `New version created!

Workflow ID: ${data.workflow_id}
Workflow Name: ${workflow_name}
Workflow Version: ${data.version}
` + `
+
+
+ + + + +
+
+

+ Deployment Successful +

+

+ New version created successfully +

+
+
+ +
+
+
+ Workflow ID + ${data.workflow_id} +
+ +
+ Workflow Name + ${workflow_name} +
+ +
+ Version + v${data.version} +
+
+
+
` ); deployMetaNode.widgets[2].value = data.version; @@ -1317,7 +1430,130 @@ async function deployWorkflow() { } infoDialog.show( - `Deployed successfully! -> View here

Workflow ID: ${data.workflow_id}
Workflow Name: ${workflow_name}
Workflow Version: 2
` + `
+
+
+ + + + +
+
+

+ Deployed Successfully! +

+

+ Your workflow is now live +

+
+
+ +
+
+
+ Workflow ID + ${data.workflow_id} +
+ +
+ Workflow Name + ${workflow_name} +
+ +
+ Version + v2 +
+ + +
+
+
` ); setTimeout(() => { @@ -1512,19 +1748,42 @@ export class InputDialog extends InfoDialog { type: "div", style: { display: "flex", - gap: "6px", + gap: "12px", justifyContent: "flex-end", width: "100%", + marginTop: "24px", + paddingTop: "20px", + borderTop: "1px solid #404040", }, }, [ $el("button", { type: "button", - textContent: "Close", + textContent: "Cancel", onclick: () => { this.callback?.(undefined); this.close(); }, + style: { + padding: "10px 20px", + borderRadius: "8px", + border: "1.5px solid #525252", + background: "transparent", + color: "#e5e5e5", + fontSize: "14px", + fontWeight: "500", + cursor: "pointer", + transition: "all 0.2s ease", + minWidth: "80px", + }, + onmouseenter: (e) => { + e.target.style.borderColor = "#6b7280"; + e.target.style.background = "#374151"; + }, + onmouseleave: (e) => { + e.target.style.borderColor = "#525252"; + e.target.style.background = "transparent"; + }, }), $el("button", { type: "button", @@ -1539,6 +1798,30 @@ export class InputDialog extends InfoDialog { this.textElement.querySelector("#input").value = ""; } }, + style: { + padding: "10px 20px", + borderRadius: "8px", + border: "none", + background: "linear-gradient(135deg, #3b82f6, #2563eb)", + color: "white", + fontSize: "14px", + fontWeight: "600", + cursor: "pointer", + transition: "all 0.2s ease", + minWidth: "80px", + }, + onmouseenter: (e) => { + e.target.style.background = + "linear-gradient(135deg, #2563eb, #1d4ed8)"; + e.target.style.transform = "translateY(-1px)"; + e.target.style.boxShadow = "0 4px 12px rgba(59, 130, 246, 0.3)"; + }, + onmouseleave: (e) => { + e.target.style.background = + "linear-gradient(135deg, #3b82f6, #2563eb)"; + e.target.style.transform = "translateY(0)"; + e.target.style.boxShadow = "none"; + }, }), ] ), @@ -1549,13 +1832,80 @@ export class InputDialog extends InfoDialog { return new Promise((resolve, reject) => { this.callback = resolve; this.show(` -
-

${title}

- +
+
+
+ + + + +
+
+

+ ${title} +

+

+ Enter the required information +

+
+ +
+ + +
+
`); }); } @@ -1576,30 +1926,74 @@ export class ConfirmDialog extends InfoDialog { type: "div", style: { display: "flex", - gap: "6px", + gap: "12px", justifyContent: "flex-end", width: "100%", + marginTop: "24px", + paddingTop: "20px", + borderTop: "1px solid #404040", }, }, [ $el("button", { type: "button", - textContent: "Close", + textContent: "Cancel", onclick: () => { this.callback?.(false); this.close(); }, + style: { + padding: "10px 20px", + borderRadius: "8px", + border: "1.5px solid #525252", + background: "transparent", + color: "#e5e5e5", + fontSize: "14px", + fontWeight: "500", + cursor: "pointer", + transition: "all 0.2s ease", + minWidth: "80px", + }, + onmouseenter: (e) => { + e.target.style.borderColor = "#6b7280"; + e.target.style.background = "#374151"; + }, + onmouseleave: (e) => { + e.target.style.borderColor = "#525252"; + e.target.style.background = "transparent"; + }, }), $el("button", { type: "button", textContent: "Confirm", - style: { - color: "green", - }, onclick: () => { this.callback?.(true); this.close(); }, + style: { + padding: "10px 20px", + borderRadius: "8px", + border: "none", + background: "linear-gradient(135deg, #f59e0b, #d97706)", + color: "white", + fontSize: "14px", + fontWeight: "600", + cursor: "pointer", + transition: "all 0.2s ease", + minWidth: "80px", + }, + onmouseenter: (e) => { + e.target.style.background = + "linear-gradient(135deg, #d97706, #b45309)"; + e.target.style.transform = "translateY(-1px)"; + e.target.style.boxShadow = "0 4px 12px rgba(245, 158, 11, 0.3)"; + }, + onmouseleave: (e) => { + e.target.style.background = + "linear-gradient(135deg, #f59e0b, #d97706)"; + e.target.style.transform = "translateY(0)"; + e.target.style.boxShadow = "none"; + }, }), ] ), @@ -1610,10 +2004,59 @@ export class ConfirmDialog extends InfoDialog { return new Promise((resolve, reject) => { this.callback = resolve; this.show(` -
-

${title}

- ${message} +
+
+
+ + + + + +
+
+

+ ${title} +

+

+ Please confirm your action +

+
+ +
+ ${message} +
+
`); }); } @@ -1686,13 +2129,12 @@ export class ConfigDialog extends ComfyDialog { type: "div", style: { display: "flex", - gap: "6px", + gap: "12px", justifyContent: "flex-end", width: "100%", - }, - onclick: () => { - this.save(); - this.close(); + // marginTop: "24px", + paddingTop: "20px", + borderTop: "1px solid #404040", }, }, [ @@ -1700,6 +2142,26 @@ export class ConfigDialog extends ComfyDialog { type: "button", textContent: "Close", onclick: () => this.close(), + style: { + padding: "10px 20px", + borderRadius: "8px", + border: "1.5px solid #525252", + background: "transparent", + color: "#e5e5e5", + fontSize: "14px", + fontWeight: "500", + cursor: "pointer", + transition: "all 0.2s ease", + minWidth: "80px", + }, + onmouseenter: (e) => { + e.target.style.borderColor = "#6b7280"; + e.target.style.background = "#374151"; + }, + onmouseleave: (e) => { + e.target.style.borderColor = "#525252"; + e.target.style.background = "transparent"; + }, }), $el("button", { type: "button", @@ -1708,6 +2170,30 @@ export class ConfigDialog extends ComfyDialog { this.save(); this.close(); }, + style: { + padding: "10px 20px", + borderRadius: "8px", + border: "none", + background: "linear-gradient(135deg, #0ea5e9, #3b82f6)", + color: "white", + fontSize: "14px", + fontWeight: "600", + cursor: "pointer", + transition: "all 0.2s ease", + minWidth: "80px", + }, + onmouseenter: (e) => { + e.target.style.background = + "linear-gradient(135deg, #0284c7, #2563eb)"; + e.target.style.transform = "translateY(-1px)"; + e.target.style.boxShadow = "0 4px 12px rgba(14, 165, 233, 0.3)"; + }, + onmouseleave: (e) => { + e.target.style.background = + "linear-gradient(135deg, #0ea5e9, #3b82f6)"; + e.target.style.transform = "translateY(0)"; + e.target.style.boxShadow = "none"; + }, }), ] ), @@ -1754,39 +2240,224 @@ export class ConfigDialog extends ComfyDialog { const data = getData(); this.container.innerHTML = ` -
-

Comfy Deploy Config

- - -
- API Key: User / Org ${ - data.displayName - ? `` - : "" - } - - -
+
+
+
+ + + + + + + +
+
+

+ ComfyDeploy Configuration +

+

+ Configure your deployment settings +

+
+
+ +
+
+ +
+ +
+ + + +
+
+
+ +
+ + +
+ +
+
+ + ${ + data.displayName + ? ` +
+ + + + + ${data.displayName} +
+ ` + : "" + } +
+ + +
+
`;