Sygil-Dev/sygil-webui
1
1
Fork 0
mirror of https://github.com/Sygil-Dev/sygil-webui.git synced 2024-12-14 22:13:41 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/css_and_js.py
View File

@ -24,19 +24,6 @@ def js(opt):
return data 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 # 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,':'))}" 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 # Wrap the typical SD method call into async closure for ease of use
# Supplies the js function with a params object # Supplies the js function with a params object
# That includes all the passed arguments and input from Gradio: x # 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): # Example call in Gradio component's event handler (pass the result to _js arg):
# _js=call_JS("myJsMethod", arg1="string", arg2=100, arg3=[]) # _js=call_JS("myJsMethod", arg1="string", arg2=100, arg3=[])
def call_JS(sd_method, **kwargs): def call_JS(sd_method, **kwargs):
param_str = json.dumps(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} }}) ?? []; }}"

2
frontend/frontend.py
View File

@ -372,7 +372,7 @@ def draw_gradio_ui(opt, img2img=lambda x: x, txt2img=lambda x: x, imgproc=lambda
rowId="prompt_row")) rowId="prompt_row"))
img2img_painterro_btn.click(None, img2img_painterro_btn.click(None,
[img2img_image_editor], [img2img_image_editor, img2img_image_mask, img2img_image_editor_mode],
[img2img_image_editor, img2img_image_mask], [img2img_image_editor, img2img_image_mask],
_js=call_JS("Painterro.init", toId="img2img_editor") _js=call_JS("Painterro.init", toId="img2img_editor")
) )

13
frontend/js/index.js
View File

@ -6,8 +6,9 @@ window.SD = (() => {
class PainterroClass { class PainterroClass {
static isOpen = false; static isOpen = false;
static async init ({ x, toId }) { static async init ({ x, toId }) {
const img = x; console.log(x)
const originalImage = Array.isArray(img) ? img[0] : img;
const originalImage = x[2] === 'Mask' ? x[1]?.image : x[0];
if (window.Painterro === undefined) { if (window.Painterro === undefined) {
try { try {
@ -52,8 +53,8 @@ window.SD = (() => {
return result ? this.success(result) : this.fallback(originalImage); return result ? this.success(result) : this.fallback(originalImage);
} }
static success (result) { return [result, result]; } static success (result) { return [result, { image: result, mask: result }] };
static fallback (image) { return [image, image]; } static fallback (image) { return [image, { image: image, mask: image }] };
static load () { static load () {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const scriptId = '__painterro-script'; const scriptId = '__painterro-script';
@ -112,6 +113,7 @@ window.SD = (() => {
el = new ElementCache(); el = new ElementCache();
Painterro = PainterroClass; Painterro = PainterroClass;
moveImageFromGallery ({ x, fromId, toId }) { moveImageFromGallery ({ x, fromId, toId }) {
x = x[0];
if (!Array.isArray(x) || x.length === 0) return; if (!Array.isArray(x) || x.length === 0) return;
this.clearImageInput(this.el.get(`#${toId}`)); this.clearImageInput(this.el.get(`#${toId}`));
@ -121,6 +123,7 @@ window.SD = (() => {
return [x[i].replace('data:;','data:image/png;')]; return [x[i].replace('data:;','data:image/png;')];
} }
async copyImageFromGalleryToClipboard ({ x, fromId }) { async copyImageFromGalleryToClipboard ({ x, fromId }) {
x = x[0];
if (!Array.isArray(x) || x.length === 0) return; if (!Array.isArray(x) || x.length === 0) return;
const i = this.#getGallerySelectedIndex(this.el.get(`#${fromId}`)); 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) { async copyToClipboard (value) {
if (!value || typeof value === 'boolean') return; if (!value || typeof value === 'boolean') return;
try { try {