split settings into three columns

added a different workaround for gradio mask bug with info in UI
switched to newer gradio version

6 files changed, 101 insertions, 100 deletions

diff --git a/modules/shared.py b/modules/shared.py
index 5c7b1503..6a61fb86 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -102,7 +102,7 @@ class Options:
         "save_to_dirs_prompt_len": OptionInfo(10, "When using above, how many words from prompt to put into directory name", gr.Slider, {"minimum": 1, "maximum": 32, "step": 1}),

         "outdir_save": OptionInfo("log/images", "Directory for saving images using the Save button"),

         "samples_save": OptionInfo(True, "Save indiviual samples"),

-        "samples_format": OptionInfo('png', 'File format for indiviual samples'),

+        "samples_format": OptionInfo('png', 'File format for individual samples'),

         "grid_save": OptionInfo(True, "Save image grids"),

         "return_grid": OptionInfo(True, "Show grid in results for web"),

         "grid_format": OptionInfo('png', 'File format for grids'),

diff --git a/modules/ui.py b/modules/ui.py
index 05301584..d6a338a7 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -2,6 +2,7 @@ import base64
 import html

 import io

 import json

+import math

 import mimetypes

 import os

 import random

@@ -363,7 +364,6 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
                 ]

             )

 

-

     with gr.Blocks(analytics_enabled=False) as img2img_interface:

         with gr.Row():

             img2img_prompt = gr.Textbox(label="Prompt", elem_id="img2img_prompt", show_label=False, placeholder="Prompt", lines=1)

@@ -373,12 +373,12 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
             check_progress = gr.Button('Check progress', elem_id="check_progress", visible=False)

 

         with gr.Row().style(equal_height=False):

-

             with gr.Column(variant='panel'):

                 with gr.Group():

                     switch_mode = gr.Radio(label='Mode', elem_id="img2img_mode", choices=['Redraw whole image', 'Inpaint a part of image', 'Loopback', 'SD upscale'], value='Redraw whole image', type="index", show_label=False)

                     init_img = gr.Image(label="Image for img2img", source="upload", interactive=True, type="pil")

                     init_img_with_mask = gr.Image(label="Image for inpainting with mask", elem_id="img2maskimg", source="upload", interactive=True, type="pil", tool="sketch", visible=False, image_mode="RGBA")

+                    init_img_with_mask_comment = gr.HTML(elem_id="mask_bug_info", value="<small>if the editor shows ERROR, switch to another img2img mode above and back</small>", visible=False)

                     init_mask = gr.Image(label="Mask", source="upload", interactive=True, type="pil", visible=False)

 

                     with gr.Row():

@@ -450,6 +450,7 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
                 return {

                     init_img: gr_show(not is_inpaint or (is_inpaint and uploadmask == 1)),

                     init_img_with_mask: gr_show(is_inpaint and uploadmask == 0),

+                    init_img_with_mask_comment: gr_show(is_inpaint and uploadmask == 0),

                     init_mask: gr_show(is_inpaint and uploadmask == 1),

                     mask_mode: gr_show(is_inpaint),

                     mask_blur: gr_show(is_inpaint),

@@ -469,6 +470,7 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
                 outputs=[

                     init_img,

                     init_img_with_mask,

+                    init_img_with_mask_comment,

                     init_mask,

                     mask_mode,

                     mask_blur,

@@ -566,34 +568,6 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
                 ]

             )

 

-            send_to_img2img.click(

-                fn=lambda x: image_from_url_text(x),

-                _js="extract_image_from_gallery",

-                inputs=[txt2img_gallery],

-                outputs=[init_img],

-            )

-

-            send_to_inpaint.click(

-                fn=lambda x: image_from_url_text(x),

-                _js="extract_image_from_gallery",

-                inputs=[txt2img_gallery],

-                outputs=[init_img_with_mask],

-            )

-

-            img2img_send_to_img2img.click(

-                fn=lambda x: image_from_url_text(x),

-                _js="extract_image_from_gallery",

-                inputs=[img2img_gallery],

-                outputs=[init_img],

-            )

-

-            img2img_send_to_inpaint.click(

-                fn=lambda x: image_from_url_text(x),

-                _js="extract_image_from_gallery",

-                inputs=[img2img_gallery],

-                outputs=[init_img_with_mask],

-            )

-

             for button, propmt in zip([txt2img_save_style, img2img_save_style], [txt2img_prompt, img2img_prompt]):

                 button.click(

                     fn=add_style,

@@ -652,20 +626,6 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
 

         submit.click(**extras_args)

 

-        send_to_extras.click(

-            fn=lambda x: image_from_url_text(x),

-            _js="extract_image_from_gallery",

-            inputs=[txt2img_gallery],

-            outputs=[image],

-        )

-

-        img2img_send_to_extras.click(

-            fn=lambda x: image_from_url_text(x),

-            _js="extract_image_from_gallery",

-            inputs=[img2img_gallery],

-            outputs=[image],

-        )

-

     pnginfo_interface = gr.Interface(

         wrap_gradio_call(run_pnginfo),

         inputs=[

@@ -701,37 +661,47 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
 

         return item

 

+    components = []

+    keys = list(opts.data_labels.keys())

+    settings_cols = 3

+    items_per_col = math.ceil(len(keys) / settings_cols)

+

     def run_settings(*args):

         up = []

 

-        for key, value, comp in zip(opts.data_labels.keys(), args, settings_interface.input_components):

+        for key, value, comp in zip(opts.data_labels.keys(), args, components):

             opts.data[key] = value

             up.append(comp.update(value=value))

 

         opts.save(shared.config_filename)

 

-        return 'Settings saved.', '', ''

+        return 'Settings applied.'

 

-    settings_interface = gr.Interface(

-        run_settings,

-        inputs=[create_setting_component(key) for key in opts.data_labels.keys()],

-        outputs=[

-            gr.Textbox(label='Result'),

-            gr.HTML(),

-            gr.HTML(),

-        ],

-        title=None,

-        description=None,

-        allow_flagging="never",

-        analytics_enabled=False,

-    )

+    with gr.Blocks(analytics_enabled=False) as settings_interface:

+        submit = gr.Button(value="Apply settings", variant='primary')

+        result = gr.HTML()

+

+        with gr.Row(elem_id="settings").style(equal_height=False):

+            for colno in range(settings_cols):

+                with gr.Column(variant='panel'):

+                    for rowno in range(items_per_col):

+                        index = rowno + colno * items_per_col

+

+                        if index < len(keys):

+                            components.append(create_setting_component(keys[index]))

+

+        submit.click(

+            fn=run_settings,

+            inputs=components,

+            outputs=[result]

+        )

 

     interfaces = [

-        (txt2img_interface, "txt2img"),

-        (img2img_interface, "img2img"),

-        (extras_interface, "Extras"),

-        (pnginfo_interface, "PNG Info"),

-        (settings_interface, "Settings"),

+        (txt2img_interface, "txt2img", "txt2img"),

+        (img2img_interface, "img2img", "img2img"),

+        (extras_interface, "Extras", "extras"),

+        (pnginfo_interface, "PNG Info", "pnginfo"),

+        (settings_interface, "Settings", "settings"),

     ]

 

     with open(os.path.join(script_path, "style.css"), "r", encoding="utf8") as file:

@@ -740,12 +710,59 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
     if not cmd_opts.no_progressbar_hiding:

         css += css_hide_progressbar

 

-    demo = gr.TabbedInterface(

-        interface_list=[x[0] for x in interfaces],

-        tab_names=[x[1] for x in interfaces],

-        analytics_enabled=False,

-        css=css,

-    )

+    with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo:

+        with gr.Tabs() as tabs:

+            for interface, label, ifid in interfaces:

+                with gr.TabItem(label, id=ifid):

+                    interface.render()

+

+        tabs.change(

+            fn=lambda x: x,

+            inputs=[init_img_with_mask],

+            outputs=[init_img_with_mask],

+        )

+

+        send_to_img2img.click(

+            fn=lambda x: image_from_url_text(x),

+            _js="extract_image_from_gallery",

+            inputs=[txt2img_gallery],

+            outputs=[init_img],

+        )

+

+        send_to_inpaint.click(

+            fn=lambda x: image_from_url_text(x),

+            _js="extract_image_from_gallery",

+            inputs=[txt2img_gallery],

+            outputs=[init_img_with_mask],

+        )

+

+        img2img_send_to_img2img.click(

+            fn=lambda x: image_from_url_text(x),

+            _js="extract_image_from_gallery",

+            inputs=[img2img_gallery],

+            outputs=[init_img],

+        )

+

+        img2img_send_to_inpaint.click(

+            fn=lambda x: image_from_url_text(x),

+            _js="extract_image_from_gallery",

+            inputs=[img2img_gallery],

+            outputs=[init_img_with_mask],

+        )

+

+        send_to_extras.click(

+            fn=lambda x: image_from_url_text(x),

+            _js="extract_image_from_gallery",

+            inputs=[txt2img_gallery],

+            outputs=[image],

+        )

+

+        img2img_send_to_extras.click(

+            fn=lambda x: image_from_url_text(x),

+            _js="extract_image_from_gallery",

+            inputs=[img2img_gallery],

+            outputs=[image],

+        )

 

     ui_config_file = cmd_opts.ui_config_file

     ui_settings = {}

diff --git a/requirements_versions.txt b/requirements_versions.txt
index 47e4e846..087040e1 100644
--- a/requirements_versions.txt
+++ b/requirements_versions.txt
@@ -1,7 +1,7 @@
 basicsr==1.3.5

 gfpgan

-gradio==3.2

-numpy==1.22.0

+gradio==3.3

+numpy==1.23.3

 Pillow==9.2.0

 realesrgan==0.2.5.0

 torch

diff --git a/script.js b/script.js
index 0f4e79f6..00bdc2f6 100644
--- a/script.js
+++ b/script.js
@@ -109,32 +109,11 @@ function addTitles(root){
 
 }
 
-tabNames =  {"txt2img": 1, "img2img": 1, "Extras": 1, "PNG Info": 1, "Settings": 1}
-
 document.addEventListener("DOMContentLoaded", function() {
     var mutationObserver = new MutationObserver(function(m){
         addTitles(gradioApp());
-
-        // fix for gradio breaking when you switch away from tab with mask
-        gradioApp().querySelectorAll('button').forEach(function(button){
-            title = button.textContent.trim()
-            if(tabNames[button.textContent.trim()]==null) return;
-
-            if(button.onclick == null){
-                button.onclick = function(){
-                    console.log("hiding mask")
-                    mask_buttons = gradioApp().querySelectorAll('#img2maskimg button');
-                    if(mask_buttons.length == 2){
-                        mask_buttons[1].click();
-                    }
-                }
-            }
-
-        })
     });
     mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
-
-
 });
 
 function selected_gallery_index(){
@@ -156,13 +135,12 @@ function extract_image_from_gallery(gallery){
     index = selected_gallery_index()
 
     if (index < 0 || index >= gallery.length){
-        return []
+        return [null]
     }
 
     return gallery[index];
 }
 
-
 function requestProgress(){
     btn = gradioApp().getElementById("check_progress");
     if(btn==null) return;
diff --git a/style.css b/style.css
index bebd0a53..a3646c16 100644
--- a/style.css
+++ b/style.css
@@ -93,6 +93,10 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500,  label.block s
     border-right: 1px solid rgb(55 65 81);

 }

 

+#settings fieldset span.text-gray-500, #settings .gr-block.gr-box span.text-gray-500, #settings label.block span{

+    position: relative;

+    border: none;

+}

 

 .gr-panel div.flex-col div.justify-between label span{

     margin: 0;

@@ -114,6 +118,11 @@ input[type="range"]{
     padding-right: 0.6em;

 }

 

+#mask_bug_info {

+  text-align: center;

+  display: block;

+  margin-bottom: 0.5em;

+}

 

 

 .progressDiv{

diff --git a/webui.bat b/webui.bat
index 3ece4dff..1b973448 100644
--- a/webui.bat
+++ b/webui.bat
@@ -89,12 +89,9 @@ goto :show_stdout_stderr
 if %ERRORLEVEL% == 0 goto :make_dirs

 echo Installing requirements...

 %PYTHON% -m pip install -r %REQS_FILE% --prefer-binary >tmp/stdout.txt 2>tmp/stderr.txt

-if %ERRORLEVEL% == 0 goto :update_numpy

+if %ERRORLEVEL% == 0 goto :make_dirs

 goto :show_stdout_stderr

 

-:update_numpy

-%PYTHON% -m pip install -U numpy --prefer-binary >tmp/stdout.txt 2>tmp/stderr.txt

-

 :make_dirs

 mkdir repositories 2>NUL