diff --git a/js/comfyui-share-common.js b/js/comfyui-share-common.js index 42b514e6..d213c2f6 100644 --- a/js/comfyui-share-common.js +++ b/js/comfyui-share-common.js @@ -163,7 +163,7 @@ export class ShareDialogChooser extends ComfyDialog { {}, [...this.createButtons()]), ]); - + } createButtons() { const handleShowOpenArtShareDialog = () => { @@ -173,7 +173,7 @@ export class ShareDialogChooser extends ComfyDialog { OpenArtShareDialog.instance.show() this.close(); } - + const handleShowShareDialog = () => { if (!ShareDialog.instance) { ShareDialog.instance = new ShareDialog(); @@ -206,21 +206,21 @@ export class ShareDialogChooser extends ComfyDialog { key: "openart", textContent: "OpenArt AI", website: "https://openart.ai/workflows/", - description: "Best place to share your workflow and art.", + description: "Share ComfyUI workflows and art on OpenArt.ai", onclick: handleShowOpenArtShareDialog }, { key: "matrix", textContent: "Matrix Server", website: "https://app.element.io/#/room/%23comfyui_space%3Amatrix.org", - description: "Share your art on the official ComfyUI matrix server.", + description: "Share your art on the official ComfyUI matrix server", onclick: handleShowShareDialog }, { key: "comfyworkflows", textContent: "ComfyWorkflows", website: "https://comfyworkflows.com", - description: "Share ComfyUI art: Download & drop any image into ComfyUI to load its workflow.", + description: "Share ComfyUI art on comfyworkflows.com", onclick: handleShowShareDialog }, ]; @@ -235,7 +235,7 @@ export class ShareDialogChooser extends ComfyDialog { 'padding': '20px', } }); - + buttons.forEach(b => { const button = $el("button", { type: "button", @@ -258,18 +258,17 @@ export class ShareDialogChooser extends ComfyDialog { button.addEventListener('mouseout', () => { button.style.backgroundColor = b.backgroundColor || ''; }); - + const description = $el("p", { textContent: b.description, style: { - 'text-align': 'center', + 'text-align': 'left', color: 'white', - 'font-style': 'italic', 'font-size': '14px', 'margin-bottom': '10px', }, }); - + const websiteLink = $el("a", { textContent: "🌐 Website", href: b.website, @@ -287,11 +286,11 @@ export class ShareDialogChooser extends ComfyDialog { websiteLink.addEventListener('mouseover', () => { websiteLink.style.opacity = '0.7'; }); - + websiteLink.addEventListener('mouseout', () => { websiteLink.style.opacity = '1'; }); - + const buttonLinkContainer = $el("div", { style: { display: 'flex', @@ -299,7 +298,7 @@ export class ShareDialogChooser extends ComfyDialog { 'margin-bottom': '10px', } }, [button, websiteLink]); - + const column = $el("div", { style: { 'flex-basis': '100%', @@ -310,13 +309,13 @@ export class ShareDialogChooser extends ComfyDialog { 'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)', } }, [buttonLinkContainer, description]); - + container.appendChild(column); }); - + return container; } - + return [ $el("tr.td", { width: "100%" }, [ @@ -895,4 +894,4 @@ export class ShareDialog extends ComfyDialog { this.radio_buttons.appendChild(new_radio_buttons); this.element.style.display = "block"; } -} \ No newline at end of file +} diff --git a/js/comfyui-share-openart.js b/js/comfyui-share-openart.js index 4cadd449..f8faac0c 100644 --- a/js/comfyui-share-openart.js +++ b/js/comfyui-share-openart.js @@ -68,7 +68,7 @@ export class OpenArtShareDialog extends ComfyDialog { display: "block", marginBottom: "15px", fontWeight: "bold", - fontSize: "20px", + fontSize: "14px", }; const labelStyle = { @@ -135,18 +135,37 @@ export class OpenArtShareDialog extends ComfyDialog { }, }); + // LinkSection + this.communityLink = $el("a", { + style: hyperLinkStyle, + href: DEFAULT_HOMEPAGE_URL, + target: "_blank" + }, ["👉 Check out thousands of workflows shared from the community"]) + this.getAPIKeyLink = $el("a", { + style: { + ...hyperLinkStyle, + color: "#59E8C6" + }, + href: DEFAULT_HOMEPAGE_URL, + target: "_blank" + }, ["👉 Get your API key here"]) + const LinkSection = $el( + "div", + { + style: { + marginTop: "10px", + display: "flex", + flexDirection: "column", + }, + }, + [ + this.communityLink, + this.getAPIKeyLink, + ] + ); + // Account Section const AccountSection = $el("div", { style: sectionStyle }, [ - $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, ]); @@ -161,6 +180,20 @@ export class OpenArtShareDialog extends ComfyDialog { this.descriptionInput, ]); + // Message Section + this.message = $el( + "div", + { + style: { + color: "#ff3d00", + textAlign: "center", + padding: "10px", + fontSize: "20px", + }, + }, + [] + ); + this.shareButton = $el("button", { type: "submit", textContent: "Share", @@ -197,21 +230,9 @@ export class OpenArtShareDialog extends ComfyDialog { ] ); - // Message Section - this.message = $el( - "div", - { - style: { - color: "#ff3d00", - textAlign: "center", - padding: "10px", - fontSize: "20px", - }, - }, - [] - ); // Composing the full layout const layout = [ + LinkSection, AccountSection, additionalInputsSection, this.message,