From 29900e67a1f4ec270f0a3ff8dca189e13fbc4ac6 Mon Sep 17 00:00:00 2001 From: Jacob Date: Sat, 3 Feb 2024 18:46:33 +0300 Subject: [PATCH 1/2] fix on load posex --- javascript/posex-webui.js | 92 ++++++++++++++++++++++++--------------- 1 file changed, 57 insertions(+), 35 deletions(-) diff --git a/javascript/posex-webui.js b/javascript/posex-webui.js index caca72f..a4bcecc 100644 --- a/javascript/posex-webui.js +++ b/javascript/posex-webui.js @@ -6,7 +6,7 @@ function load_() { if (posex.script_loading || posex.script_loaded) return; posex.script_loading = true; - + const scripts = cont.textContent.trim().split('\n'); const base_path = `/file=${scripts.shift()}/js`; cont.textContent = ''; @@ -52,42 +52,64 @@ }); } - function hook_acc(acc, fn) { - const observer = new MutationObserver(list => { - for (let mut of list) { - if (mut.type === 'childList') { - if (mut.addedNodes.length != 0) { - // closed -> opened - fn(); - } else { - // opened -> closed - // do nothing - } - } - } - }); - observer.observe(acc, { childList: true, attributes: false, subtree: false }); - } - - function launch(type) { - return lazy(() => gradioApp()?.querySelector(`#posex-${type}-accordion`)). - then(acc => hook_acc(acc, async () => { - const cont = Array.from(acc.querySelectorAll(`#posex-${type}-js`)).at(-1); // ! - const enabled = acc.querySelector(`#posex-${type}-enabled input[type=checkbox]`); - await load(cont); - if (enabled.checked) { - await posex[`init_${type}`](); - console.log(`[Posex] ${type} initialized`); - } else { - enabled.addEventListener('change', async () => { + // function hook_acc(acc, fn) { + // const observer = new MutationObserver(list => { + // for (let mut of list) { + // if (mut.type === 'childList') { + // if (mut.addedNodes.length != 0) { + // // closed -> opened + // fn(); + // } else { + // // opened -> closed + // // do nothing + // } + // } + // } + // }); + // observer.observe(acc, { childList: true, attributes: false, subtree: false }); + // } + window.addEventListener('DOMContentLoaded', () => { + const observer = new MutationObserver((m) => { + const types = ['t2i', 'i2i'] + types.forEach(async (type) => { + if (gradioApp().querySelector(`#posex-${type}-accordion`) && gradioApp()?.querySelector(`#posex-${type}-accordion`)) { + const acc = gradioApp()?.querySelector(`#posex-${type}-accordion`); + const cont = Array.from(acc.querySelectorAll(`#posex-${type}-js`)).at(-1); + const enabled = acc.querySelector(`#posex-${type}-enabled input[type=checkbox]`); + await load(cont); + if (enabled.checked) { await posex[`init_${type}`](); console.log(`[Posex] ${type} initialized`); - }, { once: true }); + } else { + enabled.addEventListener('change', async () => { + await posex[`init_${type}`](); + console.log(`[Posex] ${type} initialized`); + }, { once: true }); + } + observer.disconnect(); } - })); - } - - launch('t2i'); - launch('i2i'); + }) + }) + observer.observe(depth_gradioApp(), { childList: true, subtree: true }) + }) + // function launch(type) { + // return lazy(() => gradioApp()?.querySelector(`#posex-${type}-accordion`)). + // then(acc => hook_acc(acc, async () => { + // const cont = Array.from(acc.querySelectorAll(`#posex-${type}-js`)).at(-1); // ! + // const enabled = acc.querySelector(`#posex-${type}-enabled input[type=checkbox]`); + // await load(cont); + // if (enabled.checked) { + // await posex[`init_${type}`](); + // console.log(`[Posex] ${type} initialized`); + // } else { + // enabled.addEventListener('change', async () => { + // await posex[`init_${type}`](); + // console.log(`[Posex] ${type} initialized`); + // }, { once: true }); + // } + // })); + // } + // launch('t2i'); + // launch('i2i'); })(); From d240aba234adfba1b435e9aec26ce3f7a1200244 Mon Sep 17 00:00:00 2001 From: Jacob Date: Sat, 3 Feb 2024 23:29:10 +0300 Subject: [PATCH 2/2] fix load script to webui --- javascript/lazyload/posex-webui.js | 12 +-- javascript/posex-webui.js | 152 ++++++++++------------------- 2 files changed, 57 insertions(+), 107 deletions(-) diff --git a/javascript/lazyload/posex-webui.js b/javascript/lazyload/posex-webui.js index 510422f..f9a6075 100644 --- a/javascript/lazyload/posex-webui.js +++ b/javascript/lazyload/posex-webui.js @@ -1,8 +1,8 @@ -async function _import() { +function _import() { if (!globalThis.posex || !globalThis.posex.import) { - return await import('posex'); + return import('posex'); } else { - return await globalThis.posex.imports.posex(); + return globalThis.posex.imports.posex(); } } const { init, init_3d } = await _import(); @@ -92,7 +92,7 @@ const { init, init_3d } = await _import(); ui.saved_poses.appendChild(df); } - function init_ui(type, api) { + function init_ui(type) { const $ = x => document.createElement(x); const all_reset = $('button'); @@ -258,7 +258,7 @@ const { init, init_3d } = await _import(); save_pose_callback, saved_poses, }; - + // init_3d(ui); const df = document.createDocumentFragment(); df.append( all_reset, @@ -322,9 +322,7 @@ const { init, init_3d } = await _import(); } init(ui); - const animate = init_3d(ui); - animate(); onUiTabChange(() => { diff --git a/javascript/posex-webui.js b/javascript/posex-webui.js index a4bcecc..f9ce093 100644 --- a/javascript/posex-webui.js +++ b/javascript/posex-webui.js @@ -1,115 +1,67 @@ (function () { if (!globalThis.posex) globalThis.posex = {}; const posex = globalThis.posex; + let posix_executed = false; + let isLoadScript = false; + const loadJsScripts = async (base_path) => { + globalThis.posex.import = async () => { + const THREE = await import(`${base_path}/three.module.js`); + const { TrackballControls } = await import(`${base_path}/TrackballControls.js`); + const { DragControls } = await import(`${base_path}/DragControls.js`); + const { MeshLine, MeshLineMaterial } = await import(`${base_path}/THREE.MeshLine.Module.min.js`); + return { THREE, TrackballControls, DragControls, MeshLine, MeshLineMaterial }; + }; + if (!globalThis.posex.imports) globalThis.posex.imports = {}; + if (!globalThis.posex.imports.three) globalThis.posex.imports.three = async () => await import(`${base_path}/three.module.js`); + if (!globalThis.posex.imports.posex) globalThis.posex.imports.posex = async () => await import(`${base_path}/posex.js`); - function load(cont) { - function load_() { - if (posex.script_loading || posex.script_loaded) return; - posex.script_loading = true; - - const scripts = cont.textContent.trim().split('\n'); - const base_path = `/file=${scripts.shift()}/js`; - cont.textContent = ''; - - const df = document.createDocumentFragment(); - for (let src of scripts) { - console.log(`[Posex] loading ${src}`); - const script = document.createElement('script'); - script.async = true; - script.type = 'module'; - script.src = `file=${src}`; - df.appendChild(script); - } + } - globalThis.posex.import = async () => { - const THREE = await import(`${base_path}/three.module.js`); - const { TrackballControls } = await import(`${base_path}/TrackballControls.js`); - const { DragControls } = await import(`${base_path}/DragControls.js`); - const { MeshLine, MeshLineMaterial } = await import(`${base_path}/THREE.MeshLine.Module.min.js`); - return { THREE, TrackballControls, DragControls, MeshLine, MeshLineMaterial }; - }; - if (!globalThis.posex.imports) globalThis.posex.imports = {}; - if (!globalThis.posex.imports.three) globalThis.posex.imports.three = async () => await import(`${base_path}/three.module.js`); - if (!globalThis.posex.imports.posex) globalThis.posex.imports.posex = async () => await import(`${base_path}/posex.js`); - cont.appendChild(df); + async function load(type) { + const acc = gradioApp().querySelector(`#posex-${type}-accordion`); + if (!acc) return; + //load scripts contents + const scriptsContainer = acc.querySelector(`#posex-${type}-js #posex-${type}-js`); + if (!scriptsContainer) return; + const scripts = scriptsContainer.textContent.trim().split('\n'); + scriptsContainer.textContent = ''; + const chgeckBoxInit = acc.querySelector(`#posex-${type}-enabled input[type=checkbox]`); + posex.script_loading = true; + const base_path = `/file=${scripts.shift()}/js`; + const df = document.createDocumentFragment(); + for (let src of scripts) { + console.log(`[Posex] loading ${src}`); + const script = document.createElement('script'); + script.async = true; + script.type = 'module'; + script.src = `file=${src}`; + df.appendChild(script); } + if (!isLoadScript) { + loadJsScripts(base_path) + isLoadScript = true; + } + scriptsContainer.appendChild(df); - return posex.script_loaded ? Promise.resolve() : new Promise(resolve => { - document.addEventListener('posexscriptloaded', () => resolve(), false); - load_(); - }); + document.addEventListener('posexscriptloaded', () => { + chgeckBoxInit.addEventListener('change', async () => { + await posex[`init_${type}`](); + console.log(`[Posex] ${type} initialized`); + }, { once: true }); + }, false); } - function lazy(fn, timeout) { - if (timeout === undefined) timeout = 500; - return new Promise(function callback(resolve) { - const result = fn(); - if (result) { - resolve(result); - } else { - setTimeout(() => callback(resolve), timeout); - } - }); - } - // function hook_acc(acc, fn) { - // const observer = new MutationObserver(list => { - // for (let mut of list) { - // if (mut.type === 'childList') { - // if (mut.addedNodes.length != 0) { - // // closed -> opened - // fn(); - // } else { - // // opened -> closed - // // do nothing - // } - // } - // } - // }); - // observer.observe(acc, { childList: true, attributes: false, subtree: false }); - // } window.addEventListener('DOMContentLoaded', () => { - const observer = new MutationObserver((m) => { - const types = ['t2i', 'i2i'] - types.forEach(async (type) => { - if (gradioApp().querySelector(`#posex-${type}-accordion`) && gradioApp()?.querySelector(`#posex-${type}-accordion`)) { - const acc = gradioApp()?.querySelector(`#posex-${type}-accordion`); - const cont = Array.from(acc.querySelectorAll(`#posex-${type}-js`)).at(-1); - const enabled = acc.querySelector(`#posex-${type}-enabled input[type=checkbox]`); - await load(cont); - if (enabled.checked) { - await posex[`init_${type}`](); - console.log(`[Posex] ${type} initialized`); - } else { - enabled.addEventListener('change', async () => { - await posex[`init_${type}`](); - console.log(`[Posex] ${type} initialized`); - }, { once: true }); - } - observer.disconnect(); - } - }) + const observer = new MutationObserver(async (m) => { + if (!posix_executed && gradioApp().querySelector(`#posex-t2i-accordion`)) { + posix_executed = true; + load('t2i'); + load('i2i') + observer.disconnect(); + } }) - observer.observe(depth_gradioApp(), { childList: true, subtree: true }) + observer.observe(gradioApp(), { childList: true, subtree: true }) }) - // function launch(type) { - // return lazy(() => gradioApp()?.querySelector(`#posex-${type}-accordion`)). - // then(acc => hook_acc(acc, async () => { - // const cont = Array.from(acc.querySelectorAll(`#posex-${type}-js`)).at(-1); // ! - // const enabled = acc.querySelector(`#posex-${type}-enabled input[type=checkbox]`); - // await load(cont); - // if (enabled.checked) { - // await posex[`init_${type}`](); - // console.log(`[Posex] ${type} initialized`); - // } else { - // enabled.addEventListener('change', async () => { - // await posex[`init_${type}`](); - // console.log(`[Posex] ${type} initialized`); - // }, { once: true }); - // } - // })); - // } - // launch('t2i'); - // launch('i2i'); })();