diff --git a/js/AvatarPreview.js b/js/AvatarPreview.js index 1f43a37..1d5849b 100644 --- a/js/AvatarPreview.js +++ b/js/AvatarPreview.js @@ -2,7 +2,8 @@ import { van } from "./van.js"; import { imageUrl, showPreview, previewUrl, showEditor } from "./state.js"; const { button, iframe, div, img, input, label, span } = van.tags; import { app } from "./app.js"; -import { uploadPreview } from './index.js'; +import { uploadPreview } from "./index.js"; +import { api } from "./api.js"; async function loadJSONWorkflow() { const json = await (await fetch("./get_default_workflow")).json(); @@ -31,6 +32,16 @@ export function AvatarPreview() { jsonWorkflowLoading.val = false; }); + const loading = van.state(false); + + api.addEventListener("execution_start", (evt) => { + loading.val = true; + }); + + api.addEventListener("executed", (evt) => { + loading.val = false; + }); + const email = van.state(""); return div( @@ -159,7 +170,7 @@ export function AvatarPreview() { /** @type {import('../../../web/types/litegraph.js').LGraph}*/ const graph = app.graph; const imageNodes = graph.findNodesByType("LoadImage"); - if(!imageNodes[0].imgs) return + if (!imageNodes[0].imgs) return; const nodes = graph.findNodesByType("SAM MultiLayer"); @@ -179,12 +190,17 @@ export function AvatarPreview() { onclick: () => { const graph = app.graph; const imageNodes = graph.findNodesByType("LoadImage"); - if(!imageNodes[0].imgs) return + if (!imageNodes[0].imgs) return; document.getElementById("queue-button").click(); }, }, div({ class: "badge badge-neutral" }, "3"), - "Generate", + () => + loading.val + ? span({ + class: "loading loading-spinner loading-lg", + }) + : "Generate", ), ), ), @@ -225,7 +241,7 @@ export function AvatarPreview() { "btn btn-outline !rounded-l-none !rounded-r-lg p-1 normal-case", onclick: async () => { const url = await (await fetch("./get_webhook")).json(); - await uploadPreview() + await uploadPreview(); await fetch(url, { method: "POST", headers: { diff --git a/js/tw-styles.css b/js/tw-styles.css index c14b1ad..25ee0be 100644 --- a/js/tw-styles.css +++ b/js/tw-styles.css @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Gabarito&display=swap'); /* -! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */ /* @@ -803,7 +803,7 @@ html{ display: inline-block; } -.dropdown > *:not(summary):focus{ +.dropdown > *:focus{ outline: 2px solid transparent; outline-offset: 2px; } @@ -840,6 +840,16 @@ html{ opacity: 1; } + .btm-nav > *.disabled:hover, + .btm-nav > *[disabled]:hover{ + pointer-events: none; + --tw-border-opacity: 0; + background-color: hsl(var(--n) / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.1; + color: hsl(var(--bc) / var(--tw-text-opacity)); + --tw-text-opacity: 0.2; + } + .btn:hover{ --tw-border-opacity: 1; border-color: hsl(var(--b3) / var(--tw-border-opacity)); @@ -993,7 +1003,8 @@ html{ .file-input::file-selector-button{ margin-right: 1rem; display: inline-flex; - height: 100%; + height: 2.875rem; + min-height: 2.875rem; flex-shrink: 0; cursor: pointer; -webkit-user-select: none; @@ -1071,8 +1082,8 @@ html{ .join .dropdown .join-item:first-child:not(:last-child), .join *:first-child:not(:last-child) .dropdown .join-item{ - border-start-end-radius: inherit; - border-end-end-radius: inherit; + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; } .link{ @@ -1244,6 +1255,16 @@ html{ background-color: hsl(var(--b1) / var(--tw-bg-opacity)); } +.btm-nav > *.disabled, + .btm-nav > *[disabled]{ + pointer-events: none; + --tw-border-opacity: 0; + background-color: hsl(var(--n) / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.1; + color: hsl(var(--bc) / var(--tw-text-opacity)); + --tw-text-opacity: 0.2; +} + .btm-nav > * .label{ font-size: 1rem; line-height: 1.5rem; @@ -1648,11 +1669,6 @@ details.collapse summary::-webkit-details-marker{ --tw-text-opacity: 0.2; } -.input input:focus{ - outline: 2px solid transparent; - outline-offset: 2px; -} - .input[list]::-webkit-calendar-picker-indicator{ line-height: 1em; } @@ -1661,8 +1677,7 @@ details.collapse summary::-webkit-details-marker{ --tw-border-opacity: 0.2; } -.input:focus, - .input:focus-within{ +.input:focus{ outline-style: solid; outline-width: 2px; outline-offset: 2px; @@ -1718,6 +1733,22 @@ details.collapse summary::-webkit-details-marker{ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } +.\!loading{ + pointer-events: none !important; + display: inline-block !important; + aspect-ratio: 1 / 1 !important; + width: 1.5rem !important; + background-color: currentColor !important; + -webkit-mask-size: 100% !important; + mask-size: 100% !important; + -webkit-mask-repeat: no-repeat !important; + mask-repeat: no-repeat !important; + -webkit-mask-position: center !important; + mask-position: center !important; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important; + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important; +} + .loading-spinner{ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); @@ -1735,9 +1766,9 @@ details.collapse summary::-webkit-details-marker{ .menu :where(li ul):before{ position: absolute; - bottom: 0.75rem; left: 0px; top: 0.75rem; + bottom: 0.75rem; width: 1px; background-color: hsl(var(--bc) / 0.1); content: ""; @@ -1834,8 +1865,8 @@ details.collapse summary::-webkit-details-marker{ .mockup-browser .mockup-browser-toolbar .input:before{ content: ""; position: absolute; - left: 0.5rem; top: 50%; + left: 0.5rem; aspect-ratio: 1 / 1; height: 0.75rem; --tw-translate-y: -50%; @@ -1849,8 +1880,8 @@ details.collapse summary::-webkit-details-marker{ .mockup-browser .mockup-browser-toolbar .input:after{ content: ""; position: absolute; - left: 1.25rem; top: 50%; + left: 1.25rem; height: 0.5rem; --tw-translate-y: 25%; --tw-rotate: -45deg; @@ -2080,8 +2111,8 @@ details.collapse summary::-webkit-details-marker{ } .btn-group .btn:first-child:not(:last-child){ - margin-left: -1px; margin-top: -0px; + margin-left: -1px; border-top-left-radius: var(--rounded-btn, 0.5rem); border-top-right-radius: 0; border-bottom-left-radius: var(--rounded-btn, 0.5rem); @@ -2103,8 +2134,8 @@ details.collapse summary::-webkit-details-marker{ } .btn-group-horizontal .btn:first-child:not(:last-child){ - margin-left: -1px; margin-top: -0px; + margin-left: -1px; border-top-left-radius: var(--rounded-btn, 0.5rem); border-top-right-radius: 0; border-bottom-left-radius: var(--rounded-btn, 0.5rem); @@ -2119,8 +2150,8 @@ details.collapse summary::-webkit-details-marker{ } .btn-group-vertical .btn:first-child:not(:last-child){ - margin-left: -0px; margin-top: -1px; + margin-left: -0px; border-top-left-radius: var(--rounded-btn, 0.5rem); border-top-right-radius: var(--rounded-btn, 0.5rem); border-bottom-left-radius: 0; @@ -2330,8 +2361,8 @@ details.collapse summary::-webkit-details-marker{ height: 394px; } -.h-\[450px\]{ - height: 450px; +.h-\[400px\]{ + height: 400px; } .h-full{ @@ -2342,6 +2373,10 @@ details.collapse summary::-webkit-details-marker{ height: 100vh; } +.h-\[450px\]{ + height: 450px; +} + .w-24{ width: 6rem; } @@ -2362,8 +2397,8 @@ details.collapse summary::-webkit-details-marker{ width: 24rem; } -.w-\[450px\]{ - width: 450px; +.w-\[401px\]{ + width: 401px; } .w-\[550px\]{ @@ -2379,6 +2414,10 @@ details.collapse summary::-webkit-details-marker{ width: 100%; } +.w-\[450px\]{ + width: 450px; +} + .-translate-x-1\/2{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));