From ffb2d7ae9c7686310dabf54d84a50817b4fd2daa Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Thu, 8 Sep 2022 15:43:08 +0300
Subject: [PATCH] fix: advanced editor (#827), close #811

refactor js_Call hook to take all gradio arguments
---
 frontend/css_and_js.py | 18 +++---------------
 frontend/frontend.py   |  2 +-
 frontend/js/index.js   | 13 ++++++++-----
 3 files changed, 12 insertions(+), 21 deletions(-)

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 {