fix: advanced editor (#827), close #811

refactor js_Call hook to take all gradio arguments
This commit is contained in:
Thomas Mello 2022-09-08 15:43:08 +03:00 committed by GitHub
parent 648dc020a8
commit ffb2d7ae9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 21 deletions

View File

@ -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} }}) ?? []; }}"

View File

@ -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")
)

View File

@ -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 {