';
- const bgcolor = "var(--comfy-input-bg)";
- const evenBg = "var(--border-color)";
- const textColor = "var(--input-text)";
-
- // Custom Nodes
- html += `
`
+ );
}
// 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}
+
+ `
+ : ""
+ }
+
+
+
+
+
`;