feat: copus content add rating (#1962)

Co-authored-by: john <john@server31.io>

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(
+    const additionalInputsSection = $el("div", { style: { ...sectionStyle } }, [
-      "div",
+      $el("label", { style: labelStyle }, ["3️⃣ Title "]),
-      { style: { ...sectionStyle,  } },
+      this.TitleInput,
-      [
+      titleNumDom,
-        $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(
-            $el("span", { style: { marginLeft: "5px" } }, ["ON"]),
+            "div",
-            $el("span", { style: { marginLeft: "20px",marginRight:'10px' ,color:'#fff'} }, ["Price US$"]),
+            {
-            this.LockInput
+              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,
+      lockState: this.radioButtonsCheck_lock.checked ? 2 : 0,
-      unlockPrice:this.LockInput.value,
+      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.radioButtonsCheck_lock.checked) {
-      if (!this.LockInput.value){
+      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) {
+      if (res.status && res.data.status && res.data) {
-      localStorage.setItem("copus_token",this.keyInput.value);
+        localStorage.setItem("copus_token", this.keyInput.value);
-       const { data } = res.data;
+        const { data } = res.data;
-       if (data) {
+        if (data) {
-         const url = `${DEFAULT_HOMEPAGE_URL}/work/${data}`;
+          const url = `${DEFAULT_HOMEPAGE_URL}/work/${data}`;
-         this.message.innerHTML = `Workflow has been shared successfully. <a href="${url}" target="_blank">Click here to view it.</a>`;
+          this.message.innerHTML = `Workflow has been shared successfully. <a href="${url}" target="_blank">Click here to view it.</a>`;
-         this.previewImage.src = "";
+          this.previewImage.src = "";
-         this.previewImage.style.display = "none";
+          this.previewImage.style.display = "none";
-         this.uploadedImages = [];
+          this.uploadedImages = [];
-         this.allFilesImages = [];
+          this.allFilesImages = [];
-         this.allFiles = [];
+          this.allFiles = [];
-         this.TitleInput.value = "";
+          this.TitleInput.value = "";
-         this.SubTitleInput.value = "";
+          this.SubTitleInput.value = "";
-         this.descriptionInput.value = "";
+          this.descriptionInput.value = "";
-         this.selectedFile = null;
+          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 = [];