Skip to content

Commit

Permalink
fix for webui update #26, #27, #29
Browse files Browse the repository at this point in the history
  • Loading branch information
@hnmr293
hnmr293 committed Apr 1, 2023
1 parent 233daf8 commit a1cdda8
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 80 deletions.
60 changes: 37 additions & 23 deletions javascript/lazyload/posex-webui.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
console.log('[Posex] loading...');

async function _import() {
if (!globalThis.posex || !globalThis.posex.import) {
return await import('posex');
Expand Down Expand Up @@ -329,6 +327,7 @@ const { init, init_3d } = await _import();
animate();

onUiTabChange(() => {
debugger;
const tabname = get_uiCurrentTabContent().id;
if (type === 't2i') {
if (0 <= tabname.indexOf('txt2img')) {
Expand All @@ -348,25 +347,40 @@ const { init, init_3d } = await _import();
});
}

const app = gradioApp();
await init_canvas(
't2i',
app.querySelector('#posex-t2i-enabled input[type=checkbox]'),
app.querySelector('#txt2img_generate'),
app.querySelector('#posex-t2i-html'),
{
load_all_poses: app.querySelector('#posex-t2i-api-all_pose'),
delete_pose: app.querySelector('#posex-t2i-api-delete_pose'),
}
);
await init_canvas(
'i2i',
app.querySelector('#posex-i2i-enabled input[type=checkbox]'),
app.querySelector('#img2img_generate'),
app.querySelector('#posex-i2i-html'),
{
load_all_poses: app.querySelector('#posex-i2i-api-all_pose'),
delete_pose: app.querySelector('#posex-i2i-api-delete_pose'),
}
);
async function init_t2i() {
const app = gradioApp();
await init_canvas(
't2i',
app.querySelector('#posex-t2i-enabled input[type=checkbox]'),
app.querySelector('#txt2img_generate'),
app.querySelector('#posex-t2i-html'),
{
load_all_poses: app.querySelector('#posex-t2i-api-all_pose'),
delete_pose: app.querySelector('#posex-t2i-api-delete_pose'),
}
);
}

async function init_i2i() {
const app = gradioApp();
await init_canvas(
'i2i',
app.querySelector('#posex-i2i-enabled input[type=checkbox]'),
app.querySelector('#img2img_generate'),
app.querySelector('#posex-i2i-html'),
{
load_all_poses: app.querySelector('#posex-i2i-api-all_pose'),
delete_pose: app.querySelector('#posex-i2i-api-delete_pose'),
}
);
}

if (!globalThis.posex) globalThis.posex = {};
const posex = globalThis.posex;
posex.init_t2i = init_t2i;
posex.init_i2i = init_i2i;

posex.script_loaded = true;
document.dispatchEvent(new CustomEvent('posexscriptloaded'));

})();
137 changes: 81 additions & 56 deletions javascript/posex-webui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,67 +3,92 @@
const posex = globalThis.posex;

function load(cont) {
const scripts = cont.textContent.trim().split('\n');
const base_path = `/file=${scripts.shift()}/js`;
cont.textContent = '';
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) {
const script = document.createElement('script');
script.async = true;
script.type = 'module';
script.src = `file=${src}`;
df.appendChild(script);
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);
}

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);
return posex.script_loaded ? Promise.resolve() : new Promise(resolve => {
document.addEventListener('posexscriptloaded', () => resolve(), false);
load_();
});
}

onUiUpdate(() => {
const app = gradioApp();
if (!app || app === document) return;

const t2i_cont = app.querySelector('#posex-t2i-js')
const i2i_cont = app.querySelector('#posex-i2i-js')
if (!t2i_cont || !i2i_cont) return;

const t2i_enabled = app.querySelector('#posex-t2i-enabled input[type=checkbox]');
const i2i_enabled = app.querySelector('#posex-i2i-enabled input[type=checkbox]');

const t2i_callback = () => {
if (!posex.t2i_called) {
posex.t2i_called = true;
load(t2i_cont);
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);
}
};

const i2i_callback = () => {
if (!posex.t2i_called) {
posex.t2i_called = true;
load(t2i_cont);
});
}

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
}
}
}
};

if (t2i_enabled.checked) {
t2i_callback();
} else {
t2i_enabled.addEventListener('change', t2i_callback, false);
}

if (i2i_enabled.checked) {
i2i_callback();
} else {
i2i_enabled.addEventListener('change', i2i_callback, false);
}
});
});
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 = acc.querySelector(`#posex-${type}-js`);
const enabled = acc.querySelector(`#posex-${type}-enabled input[type=checkbox]`);
if (enabled.checked) {
await load(cont);
await posex[`init_${type}`]();
console.log(`[Posex] ${type} initialized`);
} else {
enabled.addEventListener('change', async () => {
await load(cont);
await posex[`init_${type}`]();
console.log(`[Posex] ${type} initialized`);
}, { once: true });
}
}));
}

launch('t2i').then(() => console.log('[Posex] t2i initialized'));
launch('i2i').then(() => console.log('[Posex] i2i initialized'));

})();
2 changes: 1 addition & 1 deletion scripts/posex.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ def ui(self, is_img2img):
js_ = [f'{x.path}?{os.path.getmtime(x.path)}' for x in ext.list_files('javascript/lazyload', '.js')]
js_.insert(0, ext.path)

with gr.Accordion('Posex', open=False):
with gr.Accordion('Posex', open=False, elem_id=id('accordion')):
with gr.Row():
enabled = gr.Checkbox(value=False, label='Send this image to ControlNet.', elem_id=id('enabled'))
cn_num = gr.Number(value=0, precision=0, label='Target ControlNet number', visible=self.max_cn_num()!=1)
Expand Down

0 comments on commit a1cdda8

Please sign in to comment.