feat: share workflow

js/comfyui-share-openart.js

@@ -94,11 +94,13 @@ export class OpenArtShareDialog extends ComfyDialog {
       type: "file",
       multiple: false,
       style: inputStyle,
+      accept: "image/*",
     });
 
     this.uploadImagesInput.addEventListener("change", async (e) => {
       const file = e.target.files[0];
       if (!file) {
+        this.previewImage.src = "";
         return;
       }
       const reader = new FileReader();
@@ -135,12 +137,16 @@ export class OpenArtShareDialog extends ComfyDialog {
 
     // Account Section
     const AccountSection = $el("div", { style: sectionStyle }, [
-      $el("a", { style: hyperLinkStyle, href: DEFAULT_HOMEPAGE_URL }, [
-        "Check out 1000+ workflows others have uploaded.",
-      ]),
-      $el("a", { style: hyperLinkStyle, href: DEFAULT_HOMEPAGE_URL }, [
-        "You can get API key at here.",
-      ]),
+      $el(
+        "a",
+        { style: hyperLinkStyle, href: DEFAULT_HOMEPAGE_URL, target: "_blank" },
+        ["Check out 1000+ workflows others have uploaded."]
+      ),
+      $el(
+        "a",
+        { style: hyperLinkStyle, href: DEFAULT_HOMEPAGE_URL, target: "_blank" },
+        ["You can get API key at here."]
+      ),
       $el("label", { style: labelStyle }, ["OpenArt API Key"]),
       this.keyInput,
     ]);
@@ -232,11 +238,20 @@ export class OpenArtShareDialog extends ComfyDialog {
 
     const response = await fetch(fullPath, options);
 
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
     if (statusText) {
       this.message.textContent = "";
     }
-
-    return await response.json();
+    const data = await response.json();
+    return {
+      ok: response.ok,
+      statusText: response.statusText,
+      status: response.status,
+      data,
+    };
   }
   async uploadThumbnail(uploadFile) {
     const form = new FormData();
@@ -250,7 +265,8 @@ export class OpenArtShareDialog extends ComfyDialog {
         },
         "Uploading thumbnail..."
       );
-      if (res.status === 200 && res.data) {
+
+      if (res.ok && res.data) {
         const { image_url, width, height } = res.data;
         this.uploadedImages.push({
           url: image_url,
@@ -267,6 +283,8 @@ export class OpenArtShareDialog extends ComfyDialog {
     }
   }
   async handleShareButtonClick() {
+    this.message.textContent = "";
+    this.saveKeyToLocalStorage(this.keyInput.value);
     try {
       this.shareButton.disabled = true;
       this.shareButton.textContent = "Sharing...";
@@ -276,11 +294,8 @@ export class OpenArtShareDialog extends ComfyDialog {
     }
     this.shareButton.disabled = false;
     this.shareButton.textContent = "Share";
-	this.message.textContent = "";
-	this.uploadedImages = [];
   }
   async share() {
-    this.uploadedImages = [];
     const prompt = await app.graphToPrompt();
     const workflowJSON = prompt["workflow"];
     const form_values = {
@@ -300,14 +315,25 @@ export class OpenArtShareDialog extends ComfyDialog {
       throw new Error("Name is required");
     }
 
+    if (!this.uploadedImages.length) {
       for (const file of this.uploadImagesInput.files) {
+        try {
           await this.uploadThumbnail(file);
+        } catch (e) {
+          this.uploadedImages = [];
+          throw new Error(e.message);
+        }
       }
 
       if (this.uploadImagesInput.files.length === 0) {
         throw new Error("No thumbnail uploaded");
       }
 
+      if (this.uploadImagesInput.files.length === 0) {
+        throw new Error("No thumbnail uploaded");
+      }
+    }
+
     try {
       const response = await this.fetchApi(
         "/workflows/publish",
@@ -323,15 +349,18 @@ export class OpenArtShareDialog extends ComfyDialog {
         "Uploading workflow..."
       );
 
-      if (response.status === 200) {
-        console.log(response.data);
-        this.saveKeyToLocalStorage(this.keyInput.value);
+      if (response.ok) {
+        const { workflow_id } = response.data;
+        if (workflow_id) {
+          const url = `https://openart.ai/workflows/-/-/${workflow_id}`;
+          this.message.innerHTML = `Workflow has been shared successfully. <a href="${url}" target="_blank">Click here to view it.</a>`;
+        }
       }
     } catch (e) {
       throw new Error("Error sharing workflow: " + e.message);
     }
   }
-  show({ potential_outputs, potential_output_nodes }) {
+  show({ potential_outputs, potential_output_nodes } = {}) {
     this.element.style.display = "block";
     // read key from local storage and set it to the input
     const key = this.readKeyFromLocalStorage();