diff --git a/frontend/css_and_js.py b/frontend/css_and_js.py index 266cf43..64e6dd5 100644 --- a/frontend/css_and_js.py +++ b/frontend/css_and_js.py @@ -24,19 +24,6 @@ def js(opt): return data - -def js_painterro_launch(to_id): - return w(f"Painterro.init('{to_id}')") - -def js_move_image(from_id, to_id): - return w(f"moveImageFromGallery('{from_id}', '{to_id}')") - -def js_copy_to_clipboard(from_id): - return w(f"copyImageFromGalleryToClipboard('{from_id}')") - -def js_img2img_submit(prompt_row_id): - return w(f"clickFirstVisibleButton('{prompt_row_id}')") - # TODO : @altryne fix this to the new JS format js_copy_txt2img_output = "(x) => {navigator.clipboard.writeText(document.querySelector('gradio-app').shadowRoot.querySelector('#highlight .textfield').textContent.replace(/\s+/g,' ').replace(/: /g,':'))}" @@ -93,12 +80,13 @@ return [txt2img_prompt, parseInt(txt2img_width), parseInt(txt2img_height), parse """ -# @altryne this came up as conflict, still needed or no? # Wrap the typical SD method call into async closure for ease of use # Supplies the js function with a params object # That includes all the passed arguments and input from Gradio: x +# ATTENTION: x is an array of values of all components passed to your +# python event handler # Example call in Gradio component's event handler (pass the result to _js arg): # _js=call_JS("myJsMethod", arg1="string", arg2=100, arg3=[]) def call_JS(sd_method, **kwargs): param_str = json.dumps(kwargs) - return f"async (x) => {{ return await SD.{sd_method}({{ x, ...{param_str} }}) ?? []; }}" + return f"async (...x) => {{ return await SD.{sd_method}({{ x, ...{param_str} }}) ?? []; }}" diff --git a/frontend/frontend.py b/frontend/frontend.py index 41e8672..365f9d3 100644 --- a/frontend/frontend.py +++ b/frontend/frontend.py @@ -372,7 +372,7 @@ def draw_gradio_ui(opt, img2img=lambda x: x, txt2img=lambda x: x, imgproc=lambda rowId="prompt_row")) img2img_painterro_btn.click(None, - [img2img_image_editor], + [img2img_image_editor, img2img_image_mask, img2img_image_editor_mode], [img2img_image_editor, img2img_image_mask], _js=call_JS("Painterro.init", toId="img2img_editor") ) diff --git a/frontend/js/index.js b/frontend/js/index.js index 64b9f18..2afe2db 100644 --- a/frontend/js/index.js +++ b/frontend/js/index.js @@ -6,8 +6,9 @@ window.SD = (() => { class PainterroClass { static isOpen = false; static async init ({ x, toId }) { - const img = x; - const originalImage = Array.isArray(img) ? img[0] : img; + console.log(x) + + const originalImage = x[2] === 'Mask' ? x[1]?.image : x[0]; if (window.Painterro === undefined) { try { @@ -52,8 +53,8 @@ window.SD = (() => { return result ? this.success(result) : this.fallback(originalImage); } - static success (result) { return [result, result]; } - static fallback (image) { return [image, image]; } + static success (result) { return [result, { image: result, mask: result }] }; + static fallback (image) { return [image, { image: image, mask: image }] }; static load () { return new Promise((resolve, reject) => { const scriptId = '__painterro-script'; @@ -112,6 +113,7 @@ window.SD = (() => { el = new ElementCache(); Painterro = PainterroClass; moveImageFromGallery ({ x, fromId, toId }) { + x = x[0]; if (!Array.isArray(x) || x.length === 0) return; this.clearImageInput(this.el.get(`#${toId}`)); @@ -121,6 +123,7 @@ window.SD = (() => { return [x[i].replace('data:;','data:image/png;')]; } async copyImageFromGalleryToClipboard ({ x, fromId }) { + x = x[0]; if (!Array.isArray(x) || x.length === 0) return; const i = this.#getGallerySelectedIndex(this.el.get(`#${fromId}`)); @@ -147,7 +150,7 @@ window.SD = (() => { } } } - async gradioInputToClipboard ({ x }) { return this.copyToClipboard(x); } + async gradioInputToClipboard ({ x }) { return this.copyToClipboard(x[0]); } async copyToClipboard (value) { if (!value || typeof value === 'boolean') return; try {