mirror of
https://github.com/Comfy-Org/ComfyUI-Manager.git
synced 2025-12-16 18:02:58 +08:00
Added "Pay-to-Download" & Christmas Theme (#1346)
* url update * feat: for pay * feat: for pay * feat: for pay --------- Co-authored-by: john <john@server31.io>
This commit is contained in:
copusDev
GitHub
parent
145410eb93
commit
8a4853948a
@ -336,7 +336,7 @@ export class ShareDialogChooser extends ComfyDialog {
|
||||
key: "Copus",
|
||||
textContent: "Copus",
|
||||
website: "https://www.copus.io",
|
||||
description: "🔴 Permanently store and secure ownership of your workflow on the open-source platform: <a style='color:var(--input-text);' href='https://copus.io' target='_blank'>Copus.io</a>",
|
||||
description: "🔴 Earn simple. Get paid from your ComfyUI workflows—no revenue sharing. Ever.",
|
||||
onclick: () => {
|
||||
showCopusShareDialog();
|
||||
this.close();
|
||||
@ -356,7 +356,8 @@ export class ShareDialogChooser extends ComfyDialog {
|
||||
});
|
||||
|
||||
buttons.forEach(b => {
|
||||
const button = $el("button", {
|
||||
const button = $el("button",
|
||||
{
|
||||
type: "button",
|
||||
textContent: b.textContent,
|
||||
onclick: b.onclick,
|
||||
@ -369,8 +370,14 @@ export class ShareDialogChooser extends ComfyDialog {
|
||||
'padding': '5px 5px',
|
||||
'margin-bottom': '5px',
|
||||
'transition': 'background-color 0.3s',
|
||||
'position':'relative'
|
||||
}
|
||||
});
|
||||
},
|
||||
[
|
||||
$el("span", { style: {
|
||||
} }),
|
||||
]
|
||||
);
|
||||
button.addEventListener('mouseover', () => {
|
||||
button.style.backgroundColor = '#007BFF'; // Change color on hover
|
||||
});
|
||||
@ -388,6 +395,28 @@ export class ShareDialogChooser extends ComfyDialog {
|
||||
},
|
||||
});
|
||||
|
||||
const copus_ui =$el("div", { style: {
|
||||
'position': 'absolute',
|
||||
'height': '100%',
|
||||
'left': '-25px',
|
||||
'top': '-26px',
|
||||
'width': '100%',
|
||||
'z-index':'-1',
|
||||
'background':'url("https://static.copus.io/images/client/202412/test/f28ac6ef8f4c6f3d5d50856a272ed02c.png")',
|
||||
'background-repeat': 'no-repeat',
|
||||
} });
|
||||
const copus_ui_bottom =$el("div", { style: {
|
||||
'position': 'absolute',
|
||||
'height': '100%',
|
||||
'left': '25px',
|
||||
'bottom': '-26px',
|
||||
'width': '100%',
|
||||
'transform':'scale(-1, -1)',
|
||||
'z-index':'-1',
|
||||
'background':'url("https://static.copus.io/images/client/202412/test/f28ac6ef8f4c6f3d5d50856a272ed02c.png")',
|
||||
'background-repeat': 'no-repeat',
|
||||
} });
|
||||
|
||||
const websiteLink = $el("a", {
|
||||
textContent: "🌐 Website",
|
||||
href: b.website,
|
||||
@ -417,7 +446,6 @@ export class ShareDialogChooser extends ComfyDialog {
|
||||
'margin-bottom': '10px',
|
||||
}
|
||||
}, [button, websiteLink]);
|
||||
|
||||
const column = $el("div", {
|
||||
style: {
|
||||
'flex-basis': '100%',
|
||||
@ -426,8 +454,17 @@ export class ShareDialogChooser extends ComfyDialog {
|
||||
'border': '1px solid #ddd',
|
||||
'border-radius': '5px',
|
||||
'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
'position':'relative'
|
||||
}
|
||||
}, [buttonLinkContainer, description]);
|
||||
}, [buttonLinkContainer, description
|
||||
,
|
||||
b.key ==='Copus' ?
|
||||
copus_ui
|
||||
:'',
|
||||
b.key ==='Copus' ?
|
||||
copus_ui_bottom
|
||||
:'',
|
||||
]);
|
||||
|
||||
container.appendChild(column);
|
||||
});
|
||||
|
||||
@ -4,10 +4,10 @@ const env = "prod";
|
||||
|
||||
let DEFAULT_HOMEPAGE_URL = "https://copus.io";
|
||||
|
||||
let API_ENDPOINT = "https://api.client.prod.copus.io/copus-client";
|
||||
let API_ENDPOINT = "https://api.client.prod.copus.io";
|
||||
|
||||
if (env !== "prod") {
|
||||
API_ENDPOINT = "https://api.dev.copus.io/copus-client";
|
||||
API_ENDPOINT = "https://api.test.copus.io";
|
||||
DEFAULT_HOMEPAGE_URL = "https://test.copus.io";
|
||||
}
|
||||
|
||||
@ -61,6 +61,7 @@ export class CopusShareDialog extends ComfyDialog {
|
||||
[$el("div.comfy-modal-content", {}, [...this.createButtons()])]
|
||||
);
|
||||
this.selectedOutputIndex = 0;
|
||||
this.selectedOutput_lock = 0;
|
||||
this.selectedNodeId = null;
|
||||
this.uploadedImages = [];
|
||||
this.allFilesImages = [];
|
||||
@ -190,10 +191,36 @@ export class CopusShareDialog extends ComfyDialog {
|
||||
type: "text",
|
||||
placeholder: "Subtitle (Optional)",
|
||||
style: inputStyle,
|
||||
maxLength: "70",
|
||||
maxLength: "350",
|
||||
oninput: () => {
|
||||
const titleNum = this.SubTitleInput.value.length;
|
||||
subTitleNumDom.textContent = `${titleNum}/70`;
|
||||
subTitleNumDom.textContent = `${titleNum}/350`;
|
||||
},
|
||||
});
|
||||
this.LockInput = $el("input", {
|
||||
type: "text",
|
||||
placeholder: "",
|
||||
style: {
|
||||
width: "100px",
|
||||
padding: "7px",
|
||||
borderRadius: "4px",
|
||||
border: "1px solid #ddd",
|
||||
boxSizing: "border-box",
|
||||
},
|
||||
oninput: (event) => {
|
||||
let input = event.target.value;
|
||||
// Use a regular expression to match a number with up to two decimal places
|
||||
const regex = /^\d*\.?\d{0,2}$/;
|
||||
if (!regex.test(input)) {
|
||||
// If the input doesn't match, remove the last entered character
|
||||
event.target.value = input.slice(0, -1);
|
||||
}
|
||||
const numericValue = parseFloat(input);
|
||||
if (numericValue > 9999) {
|
||||
input = "9999";
|
||||
}
|
||||
// Update the input field with the valid value
|
||||
event.target.value = input;
|
||||
},
|
||||
});
|
||||
this.descriptionInput = $el("textarea", {
|
||||
@ -297,7 +324,7 @@ export class CopusShareDialog extends ComfyDialog {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
["0/70"]
|
||||
["0/350"]
|
||||
);
|
||||
const descriptionNumDom = $el(
|
||||
"label",
|
||||
@ -333,6 +360,59 @@ export class CopusShareDialog extends ComfyDialog {
|
||||
// descriptionNumDom,
|
||||
]);
|
||||
// switch between outputs section and additional inputs section
|
||||
this.radioButtons_lock = [];
|
||||
|
||||
this.radioButtonsCheck_lock = $el("input", {
|
||||
type: "radio",
|
||||
name: "output_type_lock",
|
||||
value: "0",
|
||||
id: "blockchain1_lock",
|
||||
checked: true,
|
||||
});
|
||||
this.radioButtonsCheckOff_lock = $el("input", {
|
||||
type: "radio",
|
||||
name: "output_type_lock",
|
||||
value: "1",
|
||||
id: "blockchain_lock",
|
||||
});
|
||||
|
||||
const blockChainSection_lock = $el("div", { style: sectionStyle }, [
|
||||
$el("label", { style: labelStyle }, ["6️⃣ Pay to download"]),
|
||||
$el(
|
||||
"label",
|
||||
{
|
||||
style: {
|
||||
marginTop: "10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
cursor: "pointer",
|
||||
},
|
||||
},
|
||||
[
|
||||
this.radioButtonsCheck_lock,
|
||||
$el("div", { style: { marginLeft: "5px" ,display:'flex',alignItems:'center'} }, [
|
||||
$el("span", { style: { marginLeft: "5px" } }, ["ON"]),
|
||||
$el("span", { style: { marginLeft: "20px",marginRight:'10px' ,color:'#fff'} }, ["Price US$"]),
|
||||
this.LockInput
|
||||
]),
|
||||
]
|
||||
),
|
||||
$el(
|
||||
"label",
|
||||
{ style: { display: "flex", alignItems: "center", cursor: "pointer" } },
|
||||
[
|
||||
this.radioButtonsCheckOff_lock,
|
||||
$el("span", { style: { marginLeft: "5px" } }, ["OFF"]),
|
||||
]
|
||||
),
|
||||
|
||||
$el(
|
||||
"p",
|
||||
{ style: { fontSize: "16px", color: "#fff", margin: "10px 0 0 0" } },
|
||||
["Get paid from your workflow. You can change the price and withdraw your earnings on Copus."]
|
||||
),
|
||||
]);
|
||||
|
||||
this.radioButtons = [];
|
||||
|
||||
this.radioButtonsCheck = $el("input", {
|
||||
@ -350,7 +430,7 @@ export class CopusShareDialog extends ComfyDialog {
|
||||
});
|
||||
|
||||
const blockChainSection = $el("div", { style: sectionStyle }, [
|
||||
$el("label", { style: labelStyle }, ["6️⃣ Store on blockchain "]),
|
||||
$el("label", { style: labelStyle }, ["7️⃣ Store on blockchain "]),
|
||||
$el(
|
||||
"label",
|
||||
{
|
||||
@ -380,6 +460,8 @@ export class CopusShareDialog extends ComfyDialog {
|
||||
["Secure ownership with a permanent & decentralized storage"]
|
||||
),
|
||||
]);
|
||||
|
||||
|
||||
// Message Section
|
||||
this.message = $el(
|
||||
"div",
|
||||
@ -441,6 +523,7 @@ export class CopusShareDialog extends ComfyDialog {
|
||||
SubtitleSection,
|
||||
DescriptionSection,
|
||||
// contestSection,
|
||||
blockChainSection_lock,
|
||||
blockChainSection,
|
||||
this.message,
|
||||
buttonsSection,
|
||||
@ -543,6 +626,8 @@ export class CopusShareDialog extends ComfyDialog {
|
||||
subTitle: this.SubTitleInput.value,
|
||||
content: this.descriptionInput.value,
|
||||
storeOnChain: this.radioButtonsCheck.checked ? true : false,
|
||||
lockState:this.radioButtonsCheck_lock.checked ? 2 : 0,
|
||||
unlockPrice:this.LockInput.value,
|
||||
};
|
||||
|
||||
if (!this.keyInput.value) {
|
||||
@ -557,6 +642,12 @@ export class CopusShareDialog extends ComfyDialog {
|
||||
throw new Error("Title is required");
|
||||
}
|
||||
|
||||
if(this.radioButtonsCheck_lock.checked){
|
||||
if (!this.LockInput.value){
|
||||
throw new Error("Price is required");
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.uploadedImages.length) {
|
||||
if (this.selectedFile) {
|
||||
await this.uploadThumbnail(this.selectedFile);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user