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

refactor: back to top right corner

Browse Source
This commit is contained in:
EdwinWong
2023-12-20 19:04:37 +08:00
parent c1ba8164fc
commit 08b16d4efb
4 changed files with 132 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/AvatarPreview.js
+3 -46
View File
@@ -173,10 +173,6 @@ async function prepareImageFromUrlRedirect(stage) {
export function AvatarPreview() {
console.log("getting workflow json now");
loadJSONWorkflow("default").then(() => {
console.log("done loading");
jsonWorkflowLoading.val = false;
});
const loading = van.state(false);
const shareLoading = van.state("share"); // share, loading, shared
@@ -465,7 +461,7 @@ export function AvatarPreview() {
name: "avatech-viewer-iframe",
allow: "cross-origin-isolated",
class: () =>
"w-full h-full min-w-[400px] min-h-[400px] z-[100] pointer-events-auto flex border-none overflow-hidden" +
"w-full h-full min-w-[350px] min-h-[350px] z-[100] pointer-events-auto flex border-none overflow-hidden bg-transparent" +
(showPreview.val ? "" : "hidden"),
// src: "https://labs.avatech.ai/viewer/default",
// src: "http://localhost:3000/viewer/default",
@@ -711,50 +707,11 @@ export function AvatarPreview() {
return (
(showPreview.val ? "" : "hidden ") +
"w-full h-full absolute left-0 top-0 z-[99] pointer-events-auto flex border-none bg-white"
"absolute w-[360px] h-[360px] rounded-xl overflow-hidden right-0 top-0 z-[99] pointer-events-auto flex border-none bg-transparent"
);
},
},
div(
{ class: "overflow-y-auto overflow-x-hidden w-full h-full" },
div(
{
class: "absolute top-4 left-4 flex flex-row gap-2",
},
renderCloseButton(),
renderRestartButton(),
renderChangeWorkflowButton()
),
renderTwitter(),
() => {
if (isMobileDevice()) {
return div(
{
class: () =>
"flex flex-col w-full h-fit bg-white justify-center items-center py-16 px-4 gap-2" +
(showPreview.val ? "" : "hidden"),
},
renderIFrame(),
renderSteps(),
renderShareLink()
);
} else {
return div(
{
class: () =>
"flex w-full h-full bg-white justify-around items-center p-24" +
(showPreview.val ? "" : "hidden"),
},
renderSteps(),
div(
{ class: () => "flex flex-col" },
renderIFrame(),
renderShareLink()
)
);
}
}
)
renderIFrame(),
);
}
js/state.js
+1 -1
View File
@@ -25,7 +25,7 @@ export const showEditor = van.state(false);
// localStorage.getItem("showPreview") == 'true'
export const showPreview = van.state(true);
export const previewUrl = van.state(
"https://editor.avatech.ai/viewer?avatarId=default&debug=false&width=400&height=400&hideTrigger=true&voiceSelection=true&hideUI=true"
"https://editor.avatech.ai/viewer?avatarId=default&debug=true&width=350&height=350&hideTrigger=true&voiceSelection=true&hideUI=true"
);
export const previewImg = van.state("");
export const previewImgLoading = van.state(false);
js/tw-styles.css
+127 -70
View File
@@ -1,7 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Gabarito&display=swap');
/*
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
*/
/*
@@ -34,9 +34,11 @@
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html {
html,
:host {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
@@ -46,12 +48,14 @@ html {
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
@@ -123,8 +127,10 @@ strong {
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
@@ -133,8 +139,12 @@ samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-size: 1em;
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
@@ -501,7 +511,7 @@ html{
:root{
color-scheme: light;
--in: 0.7206 0.191 231.6;
--su: 0.7441 0.213 164.75;
--su: 64.8% 0.150 160;
--wa: 0.8471 0.199 83.87;
--er: 0.7176 0.221 22.18;
--pc: 0.89824 0.06192 275.75;
@@ -742,7 +752,7 @@ html{
justify-content: center;
border-radius: var(--rounded-btn, 0.5rem);
border-color: transparent;
border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1));
border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
@@ -762,7 +772,9 @@ html{
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-color: var(--fallback-bc,oklch(var(--bc)/1));
background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1));
background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
--tw-bg-opacity: 1;
--tw-border-opacity: 1;
}
.btn-disabled,
@@ -870,8 +882,7 @@ html{
flex-grow: 1;
--tw-content: '';
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
}
.dropdown{
@@ -959,18 +970,23 @@ html{
.btn:hover{
--tw-border-opacity: 1;
border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
border-color: color-mix(
in oklab,
oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
black
);
--tw-bg-opacity: 1;
background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
background-color: color-mix(
in oklab,
oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
black
);
}
@supports (color: color-mix(in oklab, black, black)){
.btn:hover{
background-color: color-mix(
in oklab,
oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
black
);
border-color: color-mix(
in oklab,
oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
black
);
}
}
@supports not (color: oklch(0 0 0)){
@@ -1005,9 +1021,11 @@ html{
--tw-text-opacity: 0.2;
}
.btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover{
background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
@supports (color: color-mix(in oklab, black, black)){
.btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover{
background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
}
}
.dropdown.dropdown-hover:hover .dropdown-content{
@@ -1018,8 +1036,6 @@ html{
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover{
cursor: pointer;
--tw-text-opacity: 1;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
outline: 2px solid transparent;
outline-offset: 2px;
}
@@ -1050,6 +1066,9 @@ html{
.input{
flex-shrink: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
@@ -1152,10 +1171,8 @@ html{
.menu :where(li ul){
position: relative;
white-space: nowrap;
-webkit-margin-start: 1rem;
margin-inline-start: 1rem;
-webkit-padding-start: 0.5rem;
padding-inline-start: 0.5rem;
margin-inline-start: 1rem;
padding-inline-start: 0.5rem;
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
@@ -1485,8 +1502,7 @@ details.collapse summary::-webkit-details-marker{
:where(.collapse > input[type="radio"]){
width: 100%;
padding: 1rem;
-webkit-padding-end: 3rem;
padding-inline-end: 3rem;
padding-inline-end: 3rem;
min-height: 3.75rem;
transition: background-color 0.2s ease-out;
}
@@ -1577,11 +1593,14 @@ details.collapse summary::-webkit-details-marker{
--tw-placeholder-opacity: 0.2;
}
.input::-webkit-date-and-time-value{
text-align: inherit;
}
.join > :where(*:not(:first-child)){
margin-top: 0px;
margin-bottom: 0px;
-webkit-margin-start: -1px;
margin-inline-start: -1px;
margin-inline-start: -1px;
}
.link:focus{
@@ -1624,7 +1643,9 @@ details.collapse summary::-webkit-details-marker{
}
:where(.menu li:empty){
background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
--tw-bg-opacity: 1;
background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
opacity: 0.1;
margin: 0.5rem 1rem;
height: 1px;
}
@@ -1635,7 +1656,9 @@ details.collapse summary::-webkit-details-marker{
inset-inline-start: 0px;
top: 0.75rem;
width: 1px;
background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
--tw-bg-opacity: 1;
background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
opacity: 0.1;
content: "";
}
@@ -1760,7 +1783,7 @@ details.collapse summary::-webkit-details-marker{
.modal:not(dialog:not(.modal-open)),
.modal::backdrop{
background-color: rgba(0, 0, 0, 0.3);
background-color: #0006;
animation: modal-pop 0.2s ease-out;
}
@@ -2083,8 +2106,7 @@ details.collapse summary::-webkit-details-marker{
.join.join-horizontal > :where(*:not(:first-child)){
margin-top: 0px;
margin-bottom: 0px;
-webkit-margin-start: -1px;
margin-inline-start: -1px;
margin-inline-start: -1px;
}
.modal-top :where(.modal-box){
@@ -2174,10 +2196,6 @@ details.collapse summary::-webkit-details-marker{
left: 50%;
}
.left-28{
left: 7rem;
}
.left-4{
left: 1rem;
}
@@ -2268,10 +2286,6 @@ details.collapse summary::-webkit-details-marker{
margin-top: 0.5rem;
}
.mt-4{
margin-top: 1rem;
}
.mt-8{
margin-top: 2rem;
}
@@ -2304,19 +2318,43 @@ details.collapse summary::-webkit-details-marker{
height: 394px;
}
.h-full{
height: 100%;
}
.h-fit{
height: -moz-fit-content;
height: fit-content;
}
.h-full{
height: 100%;
.h-\[400px\]{
height: 400px;
}
.h-\[420px\]{
height: 420px;
}
.h-\[410px\]{
height: 410px;
}
.h-\[360px\]{
height: 360px;
}
.min-h-\[400px\]{
min-height: 400px;
}
.min-h-\[380px\]{
min-height: 380px;
}
.min-h-\[350px\]{
min-height: 350px;
}
.w-20{
width: 5rem;
}
@@ -2350,10 +2388,42 @@ details.collapse summary::-webkit-details-marker{
width: 100%;
}
.w-\[\]{
width: ;
}
.w-\[400px\]{
width: 400px;
}
.w-\[420px\]{
width: 420px;
}
.w-\[410px\]{
width: 410px;
}
.w-\[360px\]{
width: 360px;
}
.min-w-\[400px\]{
min-width: 400px;
}
.min-w-\[380\]{
min-width: 380;
}
.min-w-\[380px\]{
min-width: 380px;
}
.min-w-\[350px\]{
min-width: 350px;
}
.max-w-\[100\%\]{
max-width: 100%;
}
@@ -2404,10 +2474,6 @@ details.collapse summary::-webkit-details-marker{
justify-content: space-between;
}
.justify-around{
justify-content: space-around;
}
.gap-2{
gap: 0.5rem;
}
@@ -2424,14 +2490,6 @@ details.collapse summary::-webkit-details-marker{
overflow: hidden;
}
.overflow-y-auto{
overflow-y: auto;
}
.overflow-x-hidden{
overflow-x: hidden;
}
.rounded{
border-radius: 0.25rem;
}
@@ -2456,6 +2514,14 @@ details.collapse summary::-webkit-details-marker{
border-radius: 0.125rem;
}
.rounded-2xl{
border-radius: 1rem;
}
.rounded-xl{
border-radius: 0.75rem;
}
.rounded-b-md{
border-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
@@ -2669,10 +2735,6 @@ details.collapse summary::-webkit-details-marker{
padding: 0.5rem;
}
.p-24{
padding: 6rem;
}
.p-4{
padding: 1rem;
}
@@ -2692,11 +2754,6 @@ details.collapse summary::-webkit-details-marker{
padding-right: 1rem;
}
.py-16{
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-2{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
routes.py
+1 -5
View File
@@ -125,7 +125,7 @@ async def post_sam_model(request):
}
json.dump(data, f)
else:
sam = sam_model_registry[model_type](checkpoint=ckpt).to("cuda")
sam = sam_model_registry[model_type](checkpoint=ckpt)
predictor = SamPredictor(sam)
image_np = (image * 255).astype(np.uint8)
@@ -260,8 +260,6 @@ def load_workflow(workflow_name):
return "\n".join(f.readlines())
default_workflow = load_workflow("avatar_generation_mask_api_v11(FaceToon)")
@server.PromptServer.instance.routes.post("/avatar_generation")
async def post_prompt_block(request):
@@ -273,8 +271,6 @@ async def post_prompt_block(request):
workflow = uploaded_workflow
elif workflow_name is not None:
workflow = load_workflow(workflow_name)
else:
workflow = default_workflow
ref_image = post.get("ref_image")
base_image = post.get("base_image")