initial gradio 3.22 support

5 files changed, 50 insertions, 37 deletions

diff --git a/modules/scripts.py b/modules/scripts.py
index 8de19884..40d8dcc6 100644
--- a/modules/scripts.py
+++ b/modules/scripts.py
@@ -521,6 +521,9 @@ def IOComponent_init(self, *args, **kwargs):
 

     res = original_IOComponent_init(self, *args, **kwargs)

 

+    # this adds gradio-* to every component for css styling (ie gradio-button to gr.Button)

+    self.elem_classes = ["gradio-" + self.get_block_name(), *(self.elem_classes or [])]

+

     script_callbacks.after_component_callback(self, **kwargs)

 

     if scripts_current is not None:

diff --git a/modules/scripts_postprocessing.py b/modules/scripts_postprocessing.py
index ce0ebb61..b11568c0 100644
--- a/modules/scripts_postprocessing.py
+++ b/modules/scripts_postprocessing.py
@@ -109,7 +109,7 @@ class ScriptPostprocessingRunner:
         inputs = []

 

         for script in self.scripts_in_preferred_order():

-            with gr.Box() as group:

+            with gr.Row() as group:

                 self.create_script_ui(script, inputs)

 

             script.group = group

diff --git a/modules/ui.py b/modules/ui.py
index 7e603332..80807ce3 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -20,7 +20,7 @@ from PIL import Image, PngImagePlugin
 from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, wrap_gradio_call

 

 from modules import sd_hijack, sd_models, localization, script_callbacks, ui_extensions, deepbooru, sd_vae, extra_networks, postprocessing, ui_components, ui_common, ui_postprocessing

-from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML

+from modules.ui_components import FormRow, FormColumn, FormGroup, ToolButton, FormHTML

 from modules.paths import script_path, data_path

 

 from modules.shared import opts, cmd_opts, restricted_opts

@@ -89,7 +89,7 @@ paste_symbol = '\u2199\ufe0f'  # ↙
 refresh_symbol = '\U0001f504'  # 🔄

 save_style_symbol = '\U0001f4be'  # 💾

 apply_style_symbol = '\U0001f4cb'  # 📋

-clear_prompt_symbol = '\U0001F5D1'  # 🗑️

+clear_prompt_symbol = '\U0001f5d1\ufe0f'  # 🗑️

 extra_networks_symbol = '\U0001F3B4'  # 🎴

 switch_values_symbol = '\U000021C5' # ⇅

 

@@ -179,14 +179,13 @@ def interrogate_deepbooru(image):
 

 

 def create_seed_inputs(target_interface):

-    with FormRow(elem_id=target_interface + '_seed_row'):

+    with FormRow(elem_id=target_interface + '_seed_row', variant="compact"):

         seed = (gr.Textbox if cmd_opts.use_textbox_seed else gr.Number)(label='Seed', value=-1, elem_id=target_interface + '_seed')

         seed.style(container=False)

-        random_seed = gr.Button(random_symbol, elem_id=target_interface + '_random_seed')

-        reuse_seed = gr.Button(reuse_symbol, elem_id=target_interface + '_reuse_seed')

+        random_seed = ToolButton(random_symbol, elem_id=target_interface + '_random_seed')

+        reuse_seed = ToolButton(reuse_symbol, elem_id=target_interface + '_reuse_seed')

 

-        with gr.Group(elem_id=target_interface + '_subseed_show_box'):

-            seed_checkbox = gr.Checkbox(label='Extra', elem_id=target_interface + '_subseed_show', value=False)

+        seed_checkbox = gr.Checkbox(label='Extra', elem_id=target_interface + '_subseed_show', value=False)

 

     # Components to show/hide based on the 'Extra' checkbox

     seed_extras = []

@@ -195,8 +194,8 @@ def create_seed_inputs(target_interface):
         seed_extras.append(seed_extra_row_1)

         subseed = gr.Number(label='Variation seed', value=-1, elem_id=target_interface + '_subseed')

         subseed.style(container=False)

-        random_subseed = gr.Button(random_symbol, elem_id=target_interface + '_random_subseed')

-        reuse_subseed = gr.Button(reuse_symbol, elem_id=target_interface + '_reuse_subseed')

+        random_subseed = ToolButton(random_symbol, elem_id=target_interface + '_random_subseed')

+        reuse_subseed = ToolButton(reuse_symbol, elem_id=target_interface + '_reuse_subseed')

         subseed_strength = gr.Slider(label='Variation strength', value=0.0, minimum=0, maximum=1, step=0.01, elem_id=target_interface + '_subseed_strength')

 

     with FormRow(visible=False) as seed_extra_row_2:

@@ -291,19 +290,19 @@ def create_toprow(is_img2img):
             with gr.Row():

                 with gr.Column(scale=80):

                     with gr.Row():

-                        negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=False, lines=2, placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)")

+                        negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=False, lines=3, placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)")

 

         button_interrogate = None

         button_deepbooru = None

         if is_img2img:

-            with gr.Column(scale=1, elem_id="interrogate_col"):

+            with gr.Column(scale=1, elem_classes="interrogate-col"):

                 button_interrogate = gr.Button('Interrogate\nCLIP', elem_id="interrogate")

                 button_deepbooru = gr.Button('Interrogate\nDeepBooru', elem_id="deepbooru")

 

         with gr.Column(scale=1, elem_id=f"{id_part}_actions_column"):

-            with gr.Row(elem_id=f"{id_part}_generate_box"):

-                interrupt = gr.Button('Interrupt', elem_id=f"{id_part}_interrupt")

-                skip = gr.Button('Skip', elem_id=f"{id_part}_skip")

+            with gr.Row(elem_id=f"{id_part}_generate_box", elem_classes="generate-box"):

+                interrupt = gr.Button('Interrupt', elem_id=f"{id_part}_interrupt", elem_classes="generate-box-interrupt")

+                skip = gr.Button('Skip', elem_id=f"{id_part}_skip", elem_classes="generate-box-skip")

                 submit = gr.Button('Generate', elem_id=f"{id_part}_generate", variant='primary')

 

                 skip.click(

@@ -325,9 +324,9 @@ def create_toprow(is_img2img):
                 prompt_style_apply = ToolButton(value=apply_style_symbol, elem_id=f"{id_part}_style_apply")

                 save_style = ToolButton(value=save_style_symbol, elem_id=f"{id_part}_style_create")

 

-                token_counter = gr.HTML(value="<span></span>", elem_id=f"{id_part}_token_counter")

+                token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{id_part}_token_counter", elem_classes=["token-counter"])

                 token_button = gr.Button(visible=False, elem_id=f"{id_part}_token_button")

-                negative_token_counter = gr.HTML(value="<span></span>", elem_id=f"{id_part}_negative_token_counter")

+                negative_token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{id_part}_negative_token_counter", elem_classes=["token-counter"])

                 negative_token_button = gr.Button(visible=False, elem_id=f"{id_part}_negative_token_button")

 

                 clear_prompt_button.click(

@@ -479,7 +478,9 @@ def create_ui():
                                 width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="txt2img_width")

                                 height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="txt2img_height")

 

-                            res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="txt2img_res_switch_btn")

+                            with gr.Column(elem_id="txt2img_dimensions_row", scale=1):

+                                res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="txt2img_res_switch_btn")

+

                             if opts.dimensions_and_batch_together:

                                 with gr.Column(elem_id="txt2img_column_batch"):

                                     batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="txt2img_batch_count")

@@ -492,7 +493,7 @@ def create_ui():
                         seed, reuse_seed, subseed, reuse_subseed, subseed_strength, seed_resize_from_h, seed_resize_from_w, seed_checkbox = create_seed_inputs('txt2img')

 

                     elif category == "checkboxes":

-                        with FormRow(elem_id="txt2img_checkboxes", variant="compact"):

+                        with FormRow(elem_classes="checkboxes-row", variant="compact"):

                             restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="txt2img_restore_faces")

                             tiling = gr.Checkbox(label='Tiling', value=False, elem_id="txt2img_tiling")

                             enable_hr = gr.Checkbox(label='Hires. fix', value=False, elem_id="txt2img_enable_hr")

@@ -757,7 +758,9 @@ def create_ui():
                                 width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width")

                                 height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="img2img_height")

 

-                            res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn")

+                            with gr.Column(elem_id="img2img_dimensions_row", scale=1):

+                                res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn")

+

                             if opts.dimensions_and_batch_together:

                                 with gr.Column(elem_id="img2img_column_batch"):

                                     batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="img2img_batch_count")

@@ -774,7 +777,7 @@ def create_ui():
                         seed, reuse_seed, subseed, reuse_subseed, subseed_strength, seed_resize_from_h, seed_resize_from_w, seed_checkbox = create_seed_inputs('img2img')

 

                     elif category == "checkboxes":

-                        with FormRow(elem_id="img2img_checkboxes", variant="compact"):

+                        with FormRow(elem_classes="checkboxes-row", variant="compact"):

                             restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="img2img_restore_faces")

                             tiling = gr.Checkbox(label='Tiling', value=False, elem_id="img2img_tiling")

 

diff --git a/modules/ui_common.py b/modules/ui_common.py
index a12433d2..d4e00829 100644
--- a/modules/ui_common.py
+++ b/modules/ui_common.py
@@ -130,7 +130,7 @@ Requested path was: {f}
         generation_info = None

         with gr.Column():

             with gr.Row(elem_id=f"image_buttons_{tabname}"):

-                open_folder_button = gr.Button(folder_symbol, elem_id="hidden_element" if shared.cmd_opts.hide_ui_dir_config else f'open_folder_{tabname}')

+                open_folder_button = gr.Button(folder_symbol, visible=not shared.cmd_opts.hide_ui_dir_config)

 

                 if tabname != "extras":

                     save = gr.Button('Save', elem_id=f'save_{tabname}')

@@ -160,6 +160,7 @@ Requested path was: {f}
                             _js="function(x, y, z){ return [x, y, selected_gallery_index()] }",

                             inputs=[generation_info, html_info, html_info],

                             outputs=[html_info, html_info],

+                            show_progress=False,

                         )

 

                     save.click(

diff --git a/modules/ui_components.py b/modules/ui_components.py
index 284ca0cf..2b1da2cb 100644
--- a/modules/ui_components.py
+++ b/modules/ui_components.py
@@ -1,55 +1,61 @@
 import gradio as gr

 

 

-class ToolButton(gr.Button, gr.components.FormComponent):

-    """Small button with single emoji as text, fits inside gradio forms"""

+class FormComponent:

+    def get_expected_parent(self):

+        return gr.components.Form

 

-    def __init__(self, **kwargs):

-        super().__init__(variant="tool", **kwargs)

 

-    def get_block_name(self):

-        return "button"

+gr.Dropdown.get_expected_parent = FormComponent.get_expected_parent

 

 

-class ToolButtonTop(gr.Button, gr.components.FormComponent):

-    """Small button with single emoji as text, with extra margin at top, fits inside gradio forms"""

+class ToolButton(FormComponent, gr.Button):

+    """Small button with single emoji as text, fits inside gradio forms"""

 

-    def __init__(self, **kwargs):

-        super().__init__(variant="tool-top", **kwargs)

+    def __init__(self, *args, **kwargs):

+        classes = kwargs.pop("elem_classes", [])

+        super().__init__(*args, elem_classes=["tool", *classes], **kwargs)

 

     def get_block_name(self):

         return "button"

 

 

-class FormRow(gr.Row, gr.components.FormComponent):

+class FormRow(FormComponent, gr.Row):

     """Same as gr.Row but fits inside gradio forms"""

 

     def get_block_name(self):

         return "row"

 

 

-class FormGroup(gr.Group, gr.components.FormComponent):

+class FormColumn(FormComponent, gr.Column):

+    """Same as gr.Column but fits inside gradio forms"""

+

+    def get_block_name(self):

+        return "column"

+

+

+class FormGroup(FormComponent, gr.Group):

     """Same as gr.Row but fits inside gradio forms"""

 

     def get_block_name(self):

         return "group"

 

 

-class FormHTML(gr.HTML, gr.components.FormComponent):

+class FormHTML(FormComponent, gr.HTML):

     """Same as gr.HTML but fits inside gradio forms"""

 

     def get_block_name(self):

         return "html"

 

 

-class FormColorPicker(gr.ColorPicker, gr.components.FormComponent):

+class FormColorPicker(FormComponent, gr.ColorPicker):

     """Same as gr.ColorPicker but fits inside gradio forms"""

 

     def get_block_name(self):

         return "colorpicker"

 

 

-class DropdownMulti(gr.Dropdown):

+class DropdownMulti(FormComponent, gr.Dropdown):

     """Same as gr.Dropdown but always multiselect"""

     def __init__(self, **kwargs):

         super().__init__(multiselect=True, **kwargs)