split settings into three columns

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

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'),

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(
+    with gr.Blocks(analytics_enabled=False) as settings_interface:
-        run_settings,
+        submit = gr.Button(value="Apply settings", variant='primary')
-        inputs=[create_setting_component(key) for key in opts.data_labels.keys()],
+        result = gr.HTML()
-        outputs=[
+
-            gr.Textbox(label='Result'),
+        with gr.Row(elem_id="settings").style(equal_height=False):
-            gr.HTML(),
+            for colno in range(settings_cols):
-            gr.HTML(),
+                with gr.Column(variant='panel'):
-        ],
+                    for rowno in range(items_per_col):
-        title=None,
+                        index = rowno + colno * items_per_col
-        description=None,
+
-        allow_flagging="never",
+                        if index < len(keys):
-        analytics_enabled=False,
+                            components.append(create_setting_component(keys[index]))
-    )
+
+        submit.click(
+            fn=run_settings,
+            inputs=components,
+            outputs=[result]
+        )
 
     interfaces = [
-        (txt2img_interface, "txt2img"),
+        (txt2img_interface, "txt2img", "txt2img"),
-        (img2img_interface, "img2img"),
+        (img2img_interface, "img2img", "img2img"),
-        (extras_interface, "Extras"),
+        (extras_interface, "Extras", "extras"),
-        (pnginfo_interface, "PNG Info"),
+        (pnginfo_interface, "PNG Info", "pnginfo"),
-        (settings_interface, "Settings"),
+        (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(
+    with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo:
-        interface_list=[x[0] for x in interfaces],
+        with gr.Tabs() as tabs:
-        tab_names=[x[1] for x in interfaces],
+            for interface, label, ifid in interfaces:
-        analytics_enabled=False,
+                with gr.TabItem(label, id=ifid):
-        css=css,
+                    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 = {}

requirements_versions.txt

@@ -1,7 +1,7 @@
 basicsr==1.3.5
 gfpgan
-gradio==3.2
+gradio==3.3
-numpy==1.22.0
+numpy==1.23.3
 Pillow==9.2.0
 realesrgan==0.2.5.0
 torch

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;

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{

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