diff --git a/js/comfyui-share-copus.js b/js/comfyui-share-copus.js index ef08c580..a9ea902a 100644 --- a/js/comfyui-share-copus.js +++ b/js/comfyui-share-copus.js @@ -71,7 +71,7 @@ export class CopusShareDialog extends ComfyDialog { this.allFiles = []; this.titleNum = 0; } - + createButtons() { const inputStyle = { display: "block", @@ -202,7 +202,7 @@ export class CopusShareDialog extends ComfyDialog { this.LockInput = $el("input", { type: "text", placeholder: "", - style: { + style: { width: "100px", padding: "7px", borderRadius: "4px", @@ -301,7 +301,7 @@ export class CopusShareDialog extends ComfyDialog { }, [] ); - + const titleNumDom = $el( "label", { @@ -342,15 +342,11 @@ export class CopusShareDialog extends ComfyDialog { ["0/70"] ); // Additional Inputs Section - const additionalInputsSection = $el( - "div", - { style: { ...sectionStyle, } }, - [ - $el("label", { style: labelStyle }, ["3️⃣ Title "]), - this.TitleInput, - titleNumDom, - ] - ); + const additionalInputsSection = $el("div", { style: { ...sectionStyle } }, [ + $el("label", { style: labelStyle }, ["3️⃣ Title "]), + this.TitleInput, + titleNumDom, + ]); const SubtitleSection = $el("div", { style: sectionStyle }, [ $el("label", { style: labelStyle }, ["4️⃣ Subtitle "]), this.SubTitleInput, @@ -392,11 +388,31 @@ export class CopusShareDialog extends ComfyDialog { }, [ 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( + "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( @@ -404,14 +420,28 @@ export class CopusShareDialog extends ComfyDialog { { style: { display: "flex", alignItems: "center", cursor: "pointer" } }, [ this.radioButtonsCheckOff_lock, - $el("span", { style: { marginLeft: "5px" } }, ["OFF"]), + $el( + "div", + { + style: { + marginLeft: "5px", + display: "flex", + alignItems: "center", + }, + }, + [ + $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."] + [ + "Get paid from your workflow. You can change the price and withdraw your earnings on Copus.", + ] ), ]); @@ -432,7 +462,7 @@ export class CopusShareDialog extends ComfyDialog { }); const blockChainSection = $el("div", { style: sectionStyle }, [ - $el("label", { style: labelStyle }, ["7️⃣ Store on blockchain "]), + $el("label", { style: labelStyle }, ["8️⃣ Store on blockchain "]), $el( "label", { @@ -463,6 +493,139 @@ export class CopusShareDialog extends ComfyDialog { ), ]); + this.ratingRadioButtonsCheck0 = $el("input", { + type: "radio", + name: "content_rating", + value: "0", + id: "content_rating0", + }); + this.ratingRadioButtonsCheck1 = $el("input", { + type: "radio", + name: "content_rating", + value: "1", + id: "content_rating1", + }); + this.ratingRadioButtonsCheck2 = $el("input", { + type: "radio", + name: "content_rating", + value: "2", + id: "content_rating2", + }); + this.ratingRadioButtonsCheck_1 = $el("input", { + type: "radio", + name: "content_rating", + value: "-1", + id: "content_rating_1", + checked: true, + }); + + // content rating + const contentRatingSection = $el("div", { style: sectionStyle }, [ + $el("label", { style: labelStyle }, ["7️⃣ Content rating "]), + $el( + "label", + { + style: { + marginTop: "10px", + display: "flex", + alignItems: "center", + cursor: "pointer", + }, + }, + [ + this.ratingRadioButtonsCheck0, + $el("img", { + style: { + width: "12px", + height: "12px", + marginLeft: "5px", + }, + src: "https://static.copus.io/images/client/202507/test/b9f17da83b054d53cd0cb4508c2c30dc.png", + }), + $el("span", { style: { marginLeft: "5px", color: "#fff" } }, [ + "All ages", + ]), + ] + ), + $el( + "p", + { style: { fontSize: "10px", color: "#fff", marginLeft: "20px" } }, + ["Safe for all viewers; no profanity, violence, or mature themes."] + ), + $el( + "label", + { style: { display: "flex", alignItems: "center", cursor: "pointer" } }, + [ + this.ratingRadioButtonsCheck1, + $el("img", { + style: { + width: "12px", + height: "12px", + marginLeft: "5px", + }, + src: "https://static.copus.io/images/client/202507/test/7848bc0d3690671df21c7cf00c4cfc81.png", + }), + $el("span", { style: { marginLeft: "5px", color: "#fff" } }, [ + "13+ (Teen)", + ]), + ] + ), + $el( + "p", + { style: { fontSize: "10px", color: "#fff", marginLeft: "20px" } }, + [ + "Mild language, light themes, or cartoon violence; no explicit content. ", + ] + ), + $el( + "label", + { style: { display: "flex", alignItems: "center", cursor: "pointer" } }, + [ + this.ratingRadioButtonsCheck2, + $el("img", { + style: { + width: "12px", + height: "12px", + marginLeft: "5px", + }, + src: "https://static.copus.io/images/client/202507/test/bc51839c208d68d91173e43c23bff039.png", + }), + $el("span", { style: { marginLeft: "5px", color: "#fff" } }, [ + "18+ (Explicit)", + ]), + ] + ), + $el( + "p", + { style: { fontSize: "10px", color: "#fff", marginLeft: "20px" } }, + [ + "Explicit content, including sexual content, strong violence, or intense themes. ", + ] + ), + $el( + "label", + { style: { display: "flex", alignItems: "center", cursor: "pointer" } }, + [ + this.ratingRadioButtonsCheck_1, + $el("img", { + style: { + width: "12px", + height: "12px", + marginLeft: "5px", + }, + src: "https://static.copus.io/images/client/202507/test/5c802fdcaaea4e7bbed37393eec0d5ba.png", + }), + $el("span", { style: { marginLeft: "5px", color: "#fff" } }, [ + "Not Rated", + ]), + ] + ), + $el( + "p", + { style: { fontSize: "10px", color: "#fff", marginLeft: "20px" } }, + ["No age rating provided."] + ), + ]); // Message Section this.message = $el( @@ -526,6 +689,7 @@ export class CopusShareDialog extends ComfyDialog { DescriptionSection, // contestSection, blockChainSection_lock, + contentRatingSection, blockChainSection, this.message, buttonsSection, @@ -534,7 +698,7 @@ export class CopusShareDialog extends ComfyDialog { return layout; } /** - * api + * api * @param {url} path * @param {params} options * @param {statusText} statusText @@ -587,7 +751,9 @@ export class CopusShareDialog extends ComfyDialog { url: data, }); } else { - throw new Error("make sure your API key is correct and try again later"); + throw new Error( + "make sure your API key is correct and try again later" + ); } } catch (e) { if (e?.response?.status === 413) { @@ -628,8 +794,15 @@ 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, + lockState: this.radioButtonsCheck_lock.checked ? 2 : 0, + unlockPrice: this.LockInput.value, + rating: this.ratingRadioButtonsCheck0.checked + ? 0 + : this.ratingRadioButtonsCheck1.checked + ? 1 + : this.ratingRadioButtonsCheck2.checked + ? 2 + : -1, }; if (!this.keyInput.value) { @@ -644,8 +817,8 @@ export class CopusShareDialog extends ComfyDialog { throw new Error("Title is required"); } - if(this.radioButtonsCheck_lock.checked){ - if (!this.LockInput.value){ + if (this.radioButtonsCheck_lock.checked) { + if (!this.LockInput.value) { throw new Error("Price is required"); } } @@ -695,23 +868,23 @@ export class CopusShareDialog extends ComfyDialog { "Uploading workflow..." ); - if (res.status && res.data.status && res.data) { - localStorage.setItem("copus_token",this.keyInput.value); - const { data } = res.data; - if (data) { - const url = `${DEFAULT_HOMEPAGE_URL}/work/${data}`; - this.message.innerHTML = `Workflow has been shared successfully. Click here to view it.`; - this.previewImage.src = ""; - this.previewImage.style.display = "none"; - this.uploadedImages = []; - this.allFilesImages = []; - this.allFiles = []; - this.TitleInput.value = ""; - this.SubTitleInput.value = ""; - this.descriptionInput.value = ""; - this.selectedFile = null; - } - } + if (res.status && res.data.status && res.data) { + localStorage.setItem("copus_token", this.keyInput.value); + const { data } = res.data; + if (data) { + const url = `${DEFAULT_HOMEPAGE_URL}/work/${data}`; + this.message.innerHTML = `Workflow has been shared successfully. Click here to view it.`; + this.previewImage.src = ""; + this.previewImage.style.display = "none"; + this.uploadedImages = []; + this.allFilesImages = []; + this.allFiles = []; + this.TitleInput.value = ""; + this.SubTitleInput.value = ""; + this.descriptionInput.value = ""; + this.selectedFile = null; + } + } } catch (e) { throw new Error("Error sharing workflow: " + e.message); } @@ -757,7 +930,7 @@ export class CopusShareDialog extends ComfyDialog { this.element.style.display = "block"; this.previewImage.src = ""; this.previewImage.style.display = "none"; - this.keyInput.value = apiToken!=null?apiToken:""; + this.keyInput.value = apiToken != null ? apiToken : ""; this.uploadedImages = []; this.allFilesImages = []; this.allFiles = [];