Skip to content

Fixes script loading when the application starts in stable-diffusion-webui #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zif002 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fixes script loading when the application starts in stable-diffusion-webui #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29900e6
fix on load posex
zif002 Feb 3, 2024
d240aba
fix load script to webui
zif002 Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions javascript/lazyload/posex-webui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -322,9 +322,7 @@ const { init, init_3d } = await _import();
}

init(ui);

const animate = init_3d(ui);

animate();

onUiTabChange(() => {
Expand Down
134 changes: 54 additions & 80 deletions javascript/posex-webui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +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
}
}
window.addEventListener('DOMContentLoaded', () => {
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(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 () => {
await posex[`init_${type}`]();
console.log(`[Posex] ${type} initialized`);
}, { once: true });
}
}));
}

launch('t2i');
launch('i2i');

})
observer.observe(gradioApp(), { childList: true, subtree: true })
})
})();