Spaces:
Runtime error
Runtime error
| async function _import() { | |
| if (!globalThis.posex || !globalThis.posex.import) { | |
| return await import('posex'); | |
| } else { | |
| return await globalThis.posex.imports.posex(); | |
| } | |
| } | |
| const { init, init_3d } = await _import(); | |
| (async function () { | |
| let _r = 0; | |
| function to_gradio(v) { | |
| // force call `change` event on gradio | |
| return [v, _r++]; | |
| } | |
| function js2py(type, gradio_field, value) { | |
| // set `value` to gradio's field | |
| // (1) Click gradio's button. | |
| // (2) Gradio will fire js callback to retrieve value to be set. | |
| // (3) Gradio will fire another js callback to notify the process has been completed. | |
| return new Promise(resolve => { | |
| const callback_name = `posex-${type}-${gradio_field}`; | |
| // (2) | |
| globalThis[callback_name] = () => { | |
| delete globalThis[callback_name]; | |
| // (3) | |
| const callback_after = callback_name + '_after'; | |
| globalThis[callback_after] = () => { | |
| delete globalThis[callback_after]; | |
| resolve(); | |
| }; | |
| return to_gradio(JSON.parse(value)); | |
| // return to_gradio(value); | |
| }; | |
| // (1) | |
| gradioApp().querySelector(`#${callback_name}_set`).click(); | |
| }); | |
| } | |
| function py2js(type, pyname, ...args) { | |
| // call python's function | |
| // (1) Set args to gradio's field | |
| // (2) Click gradio's button | |
| // (3) JS callback will be kicked with return value from gradio | |
| // (1) | |
| return (args.length == 0 ? Promise.resolve() : js2py(type, pyname + '_args', JSON.stringify(args))) | |
| .then(() => { | |
| return new Promise(resolve => { | |
| const callback_name = `posex-${type}-${pyname}`; | |
| // (3) | |
| globalThis[callback_name] = value => { | |
| delete globalThis[callback_name]; | |
| resolve(value); | |
| } | |
| // (2) | |
| gradioApp().querySelector(`#${callback_name}_get`).click(); | |
| }); | |
| }); | |
| } | |
| function reload_poses(json, ui) { | |
| const df = document.createDocumentFragment(); | |
| for (let data of json) { | |
| const fig = document.createElement('figure') | |
| const img = document.createElement('img'); | |
| const cap = document.createElement('figcaption'); | |
| const clo = document.createElement('div'); | |
| const cloimg = document.createElement('img'); | |
| const clo2 = document.createElement('span'); | |
| fig.dataset.poseName = data.name; | |
| cap.textContent = data.name; | |
| clo.classList.add('close'); | |
| cloimg.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAAG3RFWHRTb2Z0d2FyZQBDZWxzeXMgU3R1ZGlvIFRvb2zBp+F8AAAAxElEQVQ4y82T0REBQRBEX0dAJk4GJwKXgZMBESADIiADJwKXATI4GRBB+1lqKa62+DFV+7E7U6+6e2plm19K/wWQ1AE2QBcobZ9fehVwCb3rWwWShmHwaLsfvW+BAihs71otSJoBc2BuexFBl7anSRlI2gN5OBXQxIpSAB2gCXlcgCzOJGkLkg5ABhyB/B5cqoI1UAb5BbCxPU4CSBqFdda2B1GoE9urVoCkHlCH68N3ZOfzGkNw9dvBZ3Bu+/SHf+GbugG9/4ThhKqF8gAAAABJRU5ErkJggg=='; | |
| clo2.classList.add('close2'); | |
| clo2.textContent = 'delete'; | |
| clo.append(cloimg, clo2); | |
| img.src = 'data:image/png;base64,' + data.image; | |
| img.title = data.name; | |
| fig.append(clo, img, cap); | |
| df.appendChild(fig); | |
| } | |
| ui.saved_poses.innerHTML = ''; | |
| ui.saved_poses.appendChild(df); | |
| } | |
| function init_ui(type, api) { | |
| const $ = x => document.createElement(x); | |
| const all_reset = $('button'); | |
| all_reset.innerHTML = '🔄 All Reset'; | |
| all_reset.classList.add('posex_all_reset', 'posex_box'); | |
| const reset_camera = $('button'); | |
| reset_camera.innerHTML = '🎥 Reset Camera'; | |
| reset_camera.classList.add('posex_reset_camera', 'posex_box'); | |
| const reset_pose = $('button'); | |
| reset_pose.innerHTML = '🧍 Reset Pose'; | |
| reset_pose.classList.add('posex_reset_pose', 'posex_box'); | |
| const reset_cont = $('div'); | |
| reset_cont.classList.add('posex_reset_cont'); | |
| reset_cont.append(reset_camera, reset_pose); | |
| const canvas = $('canvas'); | |
| canvas.width = 512; | |
| canvas.height = 512; | |
| const camera_marker = $('div'); camera_marker.textContent = '- Camera'; | |
| const fixed_roll_label = $('label'); | |
| const fixed_roll = $('input'); fixed_roll.type = 'checkbox'; fixed_roll.classList.add('posex_fixed_roll', 'posex_camera'); fixed_roll.checked = true; | |
| fixed_roll_label.append(fixed_roll, document.createTextNode('Fixed Roll')); | |
| const img_marker = $('div'); img_marker.textContent = '- Image'; | |
| const set_img = $('label'); set_img.classList.add('posex_bg'); | |
| const add_img = $('button'); add_img.classList.add('posex_add_body', 'posex_body'); add_img.innerHTML = '🖼 Add';add_img.onclick = () => img_input.click(); | |
| const img_input = $('input'); img_input.type = 'file'; img_input.style.display = 'none'; | |
| set_img.append(add_img, img_input); | |
| const reset_img = $('button'); reset_img.classList.add('posex_bg'); reset_img.innerHTML = '❌ Del'; | |
| const img_cont = $('div'); img_cont.classList.add('posex_bg_cont'); | |
| img_cont.append(set_img, reset_img); | |
| const body_marker = $('div'); body_marker.textContent = '- Body'; | |
| const add_body = $('button'); add_body.classList.add('posex_add_body', 'posex_body'); add_body.innerHTML = '➕ Add'; | |
| const remove_body = $('button'); remove_body.classList.add('posex_remove_body', 'posex_body'); remove_body.innerHTML = '➖ Remove'; | |
| const canvas_marker = $('div'); canvas_marker.textContent = '- Image Size'; | |
| const canvas_width = $('input'); canvas_width.type = 'number'; canvas_width.value = 512; canvas_width.min = 64; canvas_width.classList.add('posex_canvas_width', 'posex_canvas_size'); | |
| const canvas_height = $('input'); canvas_height.type = 'number'; canvas_height.value = 512; canvas_height.min = 64; canvas_height.classList.add('posex_canvas_height', 'posex_canvas_size'); | |
| const bg_marker = $('div'); bg_marker.textContent = '- Background'; | |
| const set_bg = $('label'); set_bg.classList.add('posex_bg'); | |
| const bg_button = $('button'); bg_button.innerHTML = '🖼 Set'; bg_button.onclick = () => bg_input.click(); | |
| const bg_input = $('input'); bg_input.type = 'file'; bg_input.style.display = 'none'; | |
| set_bg.append(bg_button, bg_input); | |
| const reset_bg = $('button'); reset_bg.classList.add('posex_bg'); reset_bg.innerHTML = '❌ Del'; | |
| const bg_cont = $('div'); bg_cont.classList.add('posex_bg_cont'); | |
| bg_cont.append(set_bg, reset_bg); | |
| const joint_marker = $('div'); joint_marker.textContent = '- Joints and Limbs'; | |
| const limb_width_label = $('label'); | |
| const limb_width = $('input'); limb_width.type = 'range'; limb_width.min = 1; limb_width.max = 16; limb_width.value = 4; limb_width.classList.add('posex_joints', 'posex_limb_width'); | |
| limb_width_label.append(limb_width, document.createTextNode('Limb Width')); | |
| const elliptic_limbs_label = $('label'); | |
| const elliptic_limbs = $('input'); elliptic_limbs.type = 'checkbox'; elliptic_limbs.classList.add('posex_joints', 'posex_elliptic_limbs'); elliptic_limbs.checked = true; | |
| elliptic_limbs_label.append(elliptic_limbs, document.createTextNode('Elliptic Limbs')); | |
| const other_marker = $('div'); other_marker.textContent = '- Others'; | |
| const low_fps_label = $('label'); | |
| const low_fps = $('input'); low_fps.type = 'checkbox'; low_fps.classList.add('posex_low_fps', 'posex_others'); low_fps.checked = false; | |
| low_fps_label.append(low_fps, document.createTextNode('Low fps')); | |
| const setting_cont = $('div'); | |
| setting_cont.classList.add('posex_setting_cont'); | |
| setting_cont.append( | |
| // camera_marker, | |
| // fixed_roll_label, | |
| // img_marker, | |
| // img_cont, | |
| all_reset, | |
| bg_marker, | |
| bg_cont, | |
| canvas_marker, | |
| canvas_width, | |
| canvas_height, | |
| body_marker, | |
| add_body, | |
| remove_body, | |
| // joint_marker, | |
| // limb_width_label, | |
| // elliptic_limbs_label, | |
| // other_marker, | |
| // low_fps_label, | |
| ); | |
| const canvas_cont = $('div'); | |
| canvas_cont.classList.add('posex_canvas_cont'); | |
| canvas_cont.append( | |
| canvas, | |
| setting_cont, | |
| ); | |
| const notation = $('p'); | |
| notation.classList.add('posex_notation'); | |
| const indicator1 = $('div'); | |
| indicator1.classList.add('posex_indicator1'); | |
| const indicator2 = $('div'); | |
| indicator2.classList.add('posex_indicator2'); | |
| const copy = $('button'); copy.classList.add('posex_copy', 'posex_misc', 'posex_box'); copy.innerHTML = '📋 Copy to clipboard'; | |
| const save = $('button'); save.classList.add('posex_save', 'posex_misc', 'posex_box'); save.innerHTML = '💾 Download image'; | |
| const misc_cont = $('div'); | |
| misc_cont.classList.add('posex_misc_cont'); | |
| misc_cont.append( | |
| copy, | |
| save | |
| ); | |
| const save_pose = $('button'); | |
| save_pose.classList.add('posex_save_pose', 'posex_box'); | |
| save_pose.innerHTML = '💾🧍 Save Pose'; | |
| const save_pose_callback = async obj => { | |
| await py2js(type, 'savepose', obj); | |
| const json = await py2js(type, 'allposes') | |
| reload_poses(JSON.parse(json), ui); | |
| return { result: '', ok: true }; | |
| }; | |
| const saved_poses = $('div'); | |
| saved_poses.classList.add('posex_saved_poses'); | |
| saved_poses.addEventListener('click', async e => { | |
| const get_name = ele => { | |
| while (ele && ele !== document) { | |
| if (ele.dataset && ele.dataset.poseName !== undefined) | |
| return ele.dataset.poseName; | |
| ele = ele.parentNode; | |
| } | |
| return ''; | |
| }; | |
| let target = e.target; | |
| if (target.tagName === 'IMG') target = target.parentNode; | |
| if (target.classList.contains('close2')) target = target.parentNode; | |
| if (target.tagName === 'FIGURE') { | |
| const name = get_name(target); | |
| if (name.length != 0) { | |
| const json = await py2js(type, 'loadpose', name); | |
| ui.loadPose(JSON.parse(json)); | |
| } | |
| } else if (target.classList.contains('close')) { | |
| const name = get_name(target); | |
| if (name.length != 0) { | |
| await py2js(type, 'delpose', name); | |
| const json = await py2js(type, 'allposes') | |
| reload_poses(JSON.parse(json), ui); | |
| } | |
| } | |
| }, false); | |
| const get_imgs = $('button'); | |
| get_imgs.classList.add('posex_get_imgs', 'posex_box'); | |
| get_imgs.innerHTML = '💾🧍 get_imgs'; | |
| const get_imgs_callback = async obj => { | |
| await py2js(type, 'getimgs', obj); | |
| return { result: '', ok: true }; | |
| }; | |
| const ui = { | |
| canvas, | |
| notation, | |
| indicator1, | |
| indicator2, | |
| all_reset, | |
| reset_camera, | |
| reset_pose, | |
| fixed_roll, | |
| img: img_input, | |
| reset_img, | |
| add_body, | |
| remove_body, | |
| canvas_width, | |
| canvas_height, | |
| bg: bg_input, | |
| reset_bg, | |
| limb_width, | |
| elliptic_limbs, | |
| low_fps, | |
| save, | |
| copy, | |
| save_pose, | |
| save_pose_callback, | |
| saved_poses, | |
| get_imgs, | |
| get_imgs_callback, | |
| }; | |
| const df = document.createDocumentFragment(); | |
| df.append( | |
| // all_reset, | |
| // reset_cont, | |
| canvas_cont, | |
| indicator2, | |
| indicator1, | |
| notation, | |
| // misc_cont, | |
| // save_pose, | |
| // saved_poses, | |
| // get_imgs, | |
| ); | |
| return { ui, df }; | |
| }; | |
| async function init_canvas( | |
| type, | |
| generate_button, | |
| container, | |
| api | |
| ) { | |
| container.classList.add('posex_cont'); | |
| container.innerHTML = ''; | |
| const { ui, df } = init_ui(type, api); | |
| container.appendChild(df); | |
| ui.container = container; | |
| ui.notify = function (str, type) { if (type === 'error') console.error(str); }; | |
| // { | |
| // // Send canvas image to ControlNet when button is clicked. | |
| // let force = false; | |
| // gradioApp().addEventListener('click', async e => { | |
| // if (e.target !== generate_button) return; | |
| // | |
| // if (!enabled.checked) return; | |
| // | |
| // if (force) { | |
| // force = false; | |
| // return; | |
| // } | |
| // | |
| // // hook `generate` button to add canvas data | |
| // e.preventDefault(); | |
| // e.stopPropagation(); | |
| // | |
| // const data_url = await ui.getDataURL(); | |
| // await js2py(type, 'base64', data_url); | |
| // force = true; | |
| // generate_button.click(); | |
| // }, true); | |
| // } | |
| // { | |
| // // Load saved poses. | |
| // const json = await py2js(type, 'allposes') | |
| // reload_poses(JSON.parse(json), ui); | |
| // } | |
| //界面加载 | |
| init(ui); | |
| //功能js加载 | |
| const animate = init_3d(ui); | |
| animate(); | |
| // onUiTabChange(() => { | |
| // const tabname = get_uiCurrentTabContent().id; | |
| // if (type === 't2i') { | |
| // if (0 <= tabname.indexOf('txt2img')) { | |
| // ui.play(); | |
| // } else { | |
| // ui.stop(); | |
| // } | |
| // } else if (type === 'i2i') { | |
| // if (0 <= tabname.indexOf('img2img')) { | |
| // ui.play(); | |
| // } else { | |
| // ui.stop(); | |
| // } | |
| // } else { | |
| // ui.stop(); | |
| // } | |
| // }); | |
| } | |
| async function init_t2i() { | |
| const app = gradioApp(); | |
| await init_canvas( | |
| 't2i', | |
| app.querySelector('#txt2img_generate'), | |
| Array.from(app.querySelectorAll('#posex-t2i-html')).at(-1), // ! | |
| { | |
| 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'), | |
| // Array.from(app.querySelectorAll('#posex-i2i-html')).at(-1), // ! | |
| // { | |
| // 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')); | |
| })(); | |