diff --git a/js/comfyui-share-common.js b/js/comfyui-share-common.js index d4b2567c..4e5ba768 100644 --- a/js/comfyui-share-common.js +++ b/js/comfyui-share-common.js @@ -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: Copus.io", + 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); }); diff --git a/js/comfyui-share-copus.js b/js/comfyui-share-copus.js index 318b1fe5..498414bb 100644 --- a/js/comfyui-share-copus.js +++ b/js/comfyui-share-copus.js @@ -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);