diff --git a/js/AvatarPreview.js b/js/AvatarPreview.js index fbdabcc..e886c72 100644 --- a/js/AvatarPreview.js +++ b/js/AvatarPreview.js @@ -95,21 +95,21 @@ export function AvatarPreview() { const renderSteps = () => { return div( { - class: () => "flex flex-col bg-white justify-center", + class: () => "flex flex-col bg-white justify-center w-[32rem]", }, div( { class: () => " bg-gradient-to-b from-black via-[#5F5F5F] via-60% to-white text-transparent bg-clip-text font-gabarito text-4xl", }, - "Avatech v1" + "Avatech v1", ), div( { class: () => " bg-gradient-to-b from-black via-[#5F5F5F] via-50% to-white text-transparent bg-clip-text font-gabarito text-2xl", }, - "Get your DALLE3 AI Personal Clone" + "Get your DALLE3 AI Personal Clone", ), // input({ // type: "file", @@ -139,99 +139,231 @@ export function AvatarPreview() { class: () => " w-full flex flex-col justify-center items-center gap-4", }, - button( - { - class: () => - "w-full mt-2 btn flex flex-row normal-case px-4 rounded-md left-0 top-0 z-[200] pointer-events-auto ", - onclick: async () => { - // previewImg.val = await uploadImage(); - stage.val = 1; - let input = document.createElement("input"); - input.type = "file"; - input.accept = "image/jpeg,image/png,image/webp"; - document.body.appendChild(input); - - // when the input content changes, do something - input.onchange = async function (e) { - if (Object.entries(e.target.files).length) { - await uploadFile(e.target.files[0], true); - } - previewImg.val = URL.createObjectURL(e.target.files[0]); - document.body.removeChild(input); - }; - input.click(); - }, - }, - div({ class: "badge badge-neutral" }, "1"), - div("Upload your image"), - span({ - class: "iconify text-lg", - "data-icon": "material-symbols:drive-folder-upload", - "data-inline": "false", + div( + { class: () => "tabs tabs-lifted tabs-lg w-full" }, + input({ + type: "radio", + name: "my_tabs_1", + class: () => "tab w-full", + checked: true, + ariaLabel: "Custom avatar", }), - () => - previewImgLoading.val - ? span({ - class: "loading loading-spinner loading-md", - }) - : "" + div( + { class: () => "tab-content text-black w-full" }, + div( + { + class: () => "flex flex-col justify-center items-center gap-4", + }, + button( + { + class: () => + "w-full mt-2 btn flex flex-row normal-case px-4 rounded-md left-0 top-0 z-[200] pointer-events-auto ", + onclick: async () => { + // previewImg.val = await uploadImage(); + // stage.val = 1; + var input = document.createElement("input"); + input.type = "file"; + + document.body.appendChild(input); + + // when the input content changes, do something + input.onchange = async function (e) { + stage.val = 1; + if (Object.entries(e.target.files).length) { + await uploadFile(e.target.files[0], true); + } + previewImg.val = URL.createObjectURL(e.target.files[0]); + // upload files + document.body.removeChild(input); + }; + + // Trigger file browser + input.click(); + }, + }, + div({ class: "badge badge-neutral" }, "1"), + div("Upload your image"), + span({ + class: "iconify text-lg", + "data-icon": "material-symbols:drive-folder-upload", + "data-inline": "false", + }), + () => + previewImgLoading.val + ? span({ + class: "loading loading-spinner loading-md", + }) + : "", + ), + () => + previewImg.val != "" + ? img({ + class: () => + "z-[10] object-contain w-full h-[394px] border", + src: previewImg, + }) + : "", + button( + { + class: () => + "btn w-full normal-case " + + (stage.val < 1 ? "btn-disabled" : ""), + onclick: () => { + /** @type {import('../../../web/types/litegraph.js').LGraph}*/ + const graph = app.graph; + const imageNodes = graph.findNodesByType("LoadImage"); + if (!imageNodes[0].imgs) return; + + const nodes = graph.findNodesByType("SAM MultiLayer"); + + /** @type {any[]}*/ + const widgets = nodes[0].widgets; + console.log(nodes[0]); + console.log(nodes[0].widgets); + widgets.find((x) => x.type == "button").callback(); + stage.val = 2; + }, + }, + div({ class: "badge badge-neutral" }, "2"), + "Edit segment", + ), + button( + { + class: () => + "btn w-full normal-case " + + (stage.val < 2 ? "btn-disabled" : ""), + onclick: async () => { + // const uploaded = await uploadSegments(); + // if (!uploaded) return; + + const graph = app.graph; + const imageNodes = graph.findNodesByType("LoadImage"); + if (!imageNodes[0].imgs) return; + document.getElementById("queue-button").click(); + }, + }, + div({ class: "badge badge-neutral" }, "3"), + () => + loading.val + ? span({ + class: "loading loading-spinner loading-lg", + }) + : "Generate", + ), + ), + ), + input({ + type: "radio", + name: "my_tabs_1", + class: () => "tab", + ariaLabel: "Generate avatar", + }), + div( + { class: () => "tab-content text-black w-full" }, + div( + { + class: () => "flex flex-col justify-center items-center gap-4", + }, + button( + { + class: () => + "w-full mt-2 btn flex flex-row normal-case px-4 rounded-md left-0 top-0 z-[200] pointer-events-auto ", + onclick: async () => { + // previewImg.val = await uploadImage(); + // stage.val = 1; + var input = document.createElement("input"); + input.type = "file"; + + document.body.appendChild(input); + + // when the input content changes, do something + input.onchange = async function (e) { + stage.val = 1; + if (Object.entries(e.target.files).length) { + await uploadFile(e.target.files[0], true); + } + previewImg.val = URL.createObjectURL(e.target.files[0]); + // upload files + document.body.removeChild(input); + }; + + // Trigger file browser + input.click(); + }, + }, + div({ class: "badge badge-neutral" }, "1"), + div("Generate image"), + span({ + class: "iconify text-lg", + "data-icon": "material-symbols:drive-folder-upload", + "data-inline": "false", + }), + () => + previewImgLoading.val + ? span({ + class: "loading loading-spinner loading-md", + }) + : "", + ), + () => + previewImg.val != "" + ? img({ + class: () => + "z-[10] object-contain w-full h-[394px] border", + src: previewImg, + }) + : "", + button( + { + class: () => + "btn w-full normal-case " + + (stage.val < 1 ? "btn-disabled" : ""), + onclick: () => { + /** @type {import('../../../web/types/litegraph.js').LGraph}*/ + const graph = app.graph; + const imageNodes = graph.findNodesByType("LoadImage"); + if (!imageNodes[0].imgs) return; + + const nodes = graph.findNodesByType("SAM MultiLayer"); + + /** @type {any[]}*/ + const widgets = nodes[0].widgets; + console.log(nodes[0]); + console.log(nodes[0].widgets); + widgets.find((x) => x.type == "button").callback(); + stage.val = 2; + }, + }, + div({ class: "badge badge-neutral" }, "2"), + "Auto segment", + ), + button( + { + class: () => + "btn w-full normal-case " + + (stage.val < 2 ? "btn-disabled" : ""), + onclick: async () => { + // const uploaded = await uploadSegments(); + // if (!uploaded) return; + + const graph = app.graph; + const imageNodes = graph.findNodesByType("LoadImage"); + if (!imageNodes[0].imgs) return; + document.getElementById("queue-button").click(); + }, + }, + div({ class: "badge badge-neutral" }, "3"), + () => + loading.val + ? span({ + class: "loading loading-spinner loading-lg", + }) + : "Generate", + ), + ), + ), ), - () => - previewImg.val != "" - ? img({ - class: () => "z-[10] object-contain w-[400px] h-[400px] border", - src: previewImg, - }) - : "", - button( - { - class: () => - "btn w-96 normal-case " + (stage.val < 1 ? "btn-disabled" : ""), - onclick: () => { - /** @type {import('../../../web/types/litegraph.js').LGraph}*/ - const graph = app.graph; - const imageNodes = graph.findNodesByType("LoadImage"); - if (!imageNodes[0].imgs) return; - - const nodes = graph.findNodesByType("SAM MultiLayer"); - - /** @type {any[]}*/ - const widgets = nodes[0].widgets; - console.log(nodes[0]); - console.log(nodes[0].widgets); - widgets.find((x) => x.type == "button").callback(); - stage.val = 2; - }, - }, - div({ class: "badge badge-neutral" }, "2"), - "Edit segment" - ), - button( - { - class: () => - "btn w-96 normal-case " + (stage.val < 2 ? "btn-disabled" : ""), - onclick: async () => { - // const uploaded = await uploadSegments(); - // if (!uploaded) return; - - const graph = app.graph; - const imageNodes = graph.findNodesByType("LoadImage"); - if (!imageNodes[0].imgs) return; - document.getElementById("queue-button").click(); - console.log("scrolling???"); - window.scrollTo({ top: 0, behavior: "smooth" }); - console.log("hi???"); - }, - }, - div({ class: "badge badge-neutral" }, "3"), - () => - loading.val - ? span({ - class: "loading loading-spinner loading-lg", - }) - : "Generate" - ) - ) + ), ); }; @@ -261,7 +393,7 @@ export function AvatarPreview() { class: () => "w-full flex justify-center font-bold italic text-gray-500", }, - span("We are launching OpenAI Assistant API integration soon!") + span("We are launching OpenAI Assistant API integration soon!"), ), div( { class: () => "w-[24rem] flex justify-center items-center" }, @@ -302,9 +434,9 @@ export function AvatarPreview() { ? span({ class: "loading loading-spinner loading-lg", }) - : "Get Avatar Link" - ) - ) + : "Get Avatar Link", + ), + ), ); }; @@ -321,7 +453,7 @@ export function AvatarPreview() { class: "iconify text-lg", "data-icon": "ic:round-close", "data-inline": "false", - }) + }), ); }; @@ -380,7 +512,7 @@ export function AvatarPreview() { "absolute top-4 right-4 btn sm:w-10 w-32 text-black btn-ghost text-xs !px-0 normal-case sm:btn-md btn-sm", onclick: () => window.open("https://twitter.com/avatech_gg", "_blank"), }, - "Twitter" + "Twitter", ); }; @@ -420,7 +552,7 @@ export function AvatarPreview() { }, renderIFrame(), renderSteps(), - renderShareLink() + renderShareLink(), ); } else { return div( @@ -433,12 +565,12 @@ export function AvatarPreview() { div( { class: () => "flex flex-col" }, renderIFrame(), - renderShareLink() - ) + renderShareLink(), + ), ); } - } - ) + }, + ), ); } @@ -458,8 +590,8 @@ function showImage(name) { } img.src = api.apiURL( `/view?filename=${encodeURIComponent( - name - )}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}` + name, + )}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`, ); node.setSizeForImage?.(); } diff --git a/package.json b/package.json index 59a6719..91641bb 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "license": "ISC", "devDependencies": { "chokidar": "^3.5.3", - "daisyui": "^3.7.5", + "daisyui": "^4.0.7", "tailwindcss": "^3.3.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ebd4edd..4721abd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ devDependencies: specifier: ^3.5.3 version: 3.5.3 daisyui: - specifier: ^3.7.5 - version: 3.7.5 + specifier: ^4.0.7 + version: 4.0.7(postcss@8.4.29) tailwindcss: specifier: ^3.3.3 version: 3.3.3 @@ -132,10 +132,6 @@ packages: fsevents: 2.3.3 dev: true - /colord@2.9.3: - resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} - dev: true - /commander@4.1.1: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} @@ -158,17 +154,21 @@ packages: hasBin: true dev: true - /daisyui@3.7.5: - resolution: {integrity: sha512-udhiBJYVvcPGXa+mL5IElke6EdddKecjbbz6m43+9IVqzK8GBwetg092Edclo42TkNboLD9nzodeesJygqZt2A==} + /culori@3.2.0: + resolution: {integrity: sha512-HIEbTSP7vs1mPq/2P9In6QyFE0Tkpevh0k9a+FkjhD+cwsYm9WRSbn4uMdW9O0yXlNYC3ppxL3gWWPOcvEl57w==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dev: true + + /daisyui@4.0.7(postcss@8.4.29): + resolution: {integrity: sha512-D84DnNDZKcamwNsxCMrwYaddyz5kC6VO6oe30nM1x67GzCAfarfd3Ar1rpLGXCIqSsEoNZUHO8EcXvX93W2ZkA==} engines: {node: '>=16.9.0'} dependencies: - colord: 2.9.3 css-selector-tokenizer: 0.8.0 - postcss: 8.4.29 + culori: 3.2.0 + picocolors: 1.0.0 postcss-js: 4.0.1(postcss@8.4.29) - tailwindcss: 3.3.3 transitivePeerDependencies: - - ts-node + - postcss dev: true /didyoumean@1.2.2: