nodes/avatechai-avatar-graph-comfyui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loading state

Browse Source
This commit is contained in:
San
2023-11-10 20:37:14 +08:00
parent 0e3dce5354
commit eb6b2eea6c
2 changed files with 82 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/AvatarPreview.js
+21 -5
View File
@@ -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: {
js/tw-styles.css
+61 -22
View File
@@ -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));