From 05ec128ca94fa8e72502a91a6db3dfae04917a08 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Mon, 20 Mar 2023 15:42:36 -0700
Subject: fix img2img alt for SD v2.x

---
 scripts/img2imgalt.py | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'scripts')

diff --git a/scripts/img2imgalt.py b/scripts/img2imgalt.py
index 2572443f..0b7ca633 100644
--- a/scripts/img2imgalt.py
+++ b/scripts/img2imgalt.py
@@ -22,7 +22,12 @@ def find_noise_for_image(p, cond, uncond, cfg_scale, steps):
     x = p.init_latent
 
     s_in = x.new_ones([x.shape[0]])
-    dnw = K.external.CompVisDenoiser(shared.sd_model)
+    if shared.sd_model.parameterization == "v":
+        dnw = K.external.CompVisVDenoiser(shared.sd_model)
+        skip = 1
+    else:
+        dnw = K.external.CompVisDenoiser(shared.sd_model)
+        skip = 0
     sigmas = dnw.get_sigmas(steps).flip(0)
 
     shared.state.sampling_steps = steps
@@ -37,7 +42,7 @@ def find_noise_for_image(p, cond, uncond, cfg_scale, steps):
         image_conditioning = torch.cat([p.image_conditioning] * 2)
         cond_in = {"c_concat": [image_conditioning], "c_crossattn": [cond_in]}
 
-        c_out, c_in = [K.utils.append_dims(k, x_in.ndim) for k in dnw.get_scalings(sigma_in)]
+        c_out, c_in = [K.utils.append_dims(k, x_in.ndim) for k in dnw.get_scalings(sigma_in)[skip:]]
         t = dnw.sigma_to_t(sigma_in)
 
         eps = shared.sd_model.apply_model(x_in * c_in, t, cond=cond_in)
@@ -69,7 +74,12 @@ def find_noise_for_image_sigma_adjustment(p, cond, uncond, cfg_scale, steps):
     x = p.init_latent
 
     s_in = x.new_ones([x.shape[0]])
-    dnw = K.external.CompVisDenoiser(shared.sd_model)
+    if shared.sd_model.parameterization == "v":
+        dnw = K.external.CompVisVDenoiser(shared.sd_model)
+        skip = 1
+    else:
+        dnw = K.external.CompVisDenoiser(shared.sd_model)
+        skip = 0
     sigmas = dnw.get_sigmas(steps).flip(0)
 
     shared.state.sampling_steps = steps
@@ -84,7 +94,7 @@ def find_noise_for_image_sigma_adjustment(p, cond, uncond, cfg_scale, steps):
         image_conditioning = torch.cat([p.image_conditioning] * 2)
         cond_in = {"c_concat": [image_conditioning], "c_crossattn": [cond_in]}
 
-        c_out, c_in = [K.utils.append_dims(k, x_in.ndim) for k in dnw.get_scalings(sigma_in)]
+        c_out, c_in = [K.utils.append_dims(k, x_in.ndim) for k in dnw.get_scalings(sigma_in)[skip:]]
 
         if i == 1:
             t = dnw.sigma_to_t(torch.cat([sigmas[i] * s_in] * 2))
-- 
cgit v1.2.3


From c9c692c4d96a58d80b037d1fd3f3bf8bd27cc4c0 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Mon, 20 Mar 2023 15:43:01 -0700
Subject: cleanup the img2img alt file a bit

---
 scripts/img2imgalt.py | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

(limited to 'scripts')

diff --git a/scripts/img2imgalt.py b/scripts/img2imgalt.py
index 0b7ca633..bb00fb3f 100644
--- a/scripts/img2imgalt.py
+++ b/scripts/img2imgalt.py
@@ -6,18 +6,11 @@ from tqdm import trange
 import modules.scripts as scripts
 import gradio as gr
 
-from modules import processing, shared, sd_samplers, prompt_parser, sd_samplers_common
-from modules.processing import Processed
-from modules.shared import opts, cmd_opts, state
+from modules import processing, shared, sd_samplers, sd_samplers_common
 
 import torch
 import k_diffusion as K
 
-from PIL import Image
-from torch import autocast
-from einops import rearrange, repeat
-
-
 def find_noise_for_image(p, cond, uncond, cfg_scale, steps):
     x = p.init_latent
 
@@ -135,7 +128,7 @@ class Script(scripts.Script):
     def show(self, is_img2img):
         return is_img2img
 
-    def ui(self, is_img2img):     
+    def ui(self, is_img2img):
         info = gr.Markdown('''
         * `CFG Scale` should be 2 or lower.
         ''')
@@ -223,4 +216,3 @@ class Script(scripts.Script):
         processed = processing.process_images(p)
 
         return processed
-
-- 
cgit v1.2.3


From 33b85391474098b021946a5f1d8e07f8a6d27aa2 Mon Sep 17 00:00:00 2001
From: James Railton <JaRail@users.noreply.github.com>
Date: Tue, 21 Mar 2023 21:07:33 -0400
Subject: Loopback Script Updates

- Improved user experience. You can now pick the denoising strength of the final loop and one of three curves. Previously you picked a multiplier such as 0.98 or 1.03 to define the change to the denoising strength for each loop. You had to do a ton of math in your head to visualize what was happening. The new UX makes it very easy to understand what's going on and tweak.
- For batch sizes over 1, intermediate images no longer returned. For a batch size of 1, intermediate images from each loop will continue to be returned. When more than 1 image is returned, a grid will also be generated. Previously for larger jobs, you'd get back a mess of many grids and potentially hundreds of images with no organization. To make large jobs usable, only final images are returned.
- Added support for skipping current image. Fixed interrupt to cleanly end and return images. Previously these would throw.
- Improved tooltip descriptions
- Fix some edge cases
---
 javascript/hints.js |  9 +++---
 scripts/loopback.py | 93 ++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 72 insertions(+), 30 deletions(-)

(limited to 'scripts')

diff --git a/javascript/hints.js b/javascript/hints.js
index 7f4101b2..58e4a0a2 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -40,8 +40,7 @@ titles = {
     "Inpaint at full resolution": "Upscale masked region to target resolution, do inpainting, downscale back and paste into original image",
 
     "Denoising strength": "Determines how little respect the algorithm should have for image's content. At 0, nothing will change, and at 1 you'll get an unrelated image. With values below 1.0, processing will take less steps than the Sampling Steps slider specifies.",
-    "Denoising strength change factor": "In loopback mode, on each loop the denoising strength is multiplied by this value. <1 means decreasing variety so your sequence will converge on a fixed picture. >1 means increasing variety so your sequence will become more and more chaotic.",
-
+    
     "Skip": "Stop processing current image and continue processing.",
     "Interrupt": "Stop processing images and return any results accumulated so far.",
     "Save": "Write image to a directory (default - log/images) and generation parameters into csv file.",
@@ -71,8 +70,10 @@ titles = {
     "Directory name pattern": "Use following tags to define how subdirectories for images and grids are chosen: [steps], [cfg],[prompt_hash], [prompt], [prompt_no_styles], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [model_name], [prompt_words], [date], [datetime], [datetime<Format>], [datetime<Format><Time Zone>], [job_timestamp]; leave empty for default.",
     "Max prompt words": "Set the maximum number of words to be used in the [prompt_words] option; ATTENTION: If the words are too long, they may exceed the maximum length of the file path that the system can handle",
 
-    "Loopback": "Process an image, use it as an input, repeat.",
-    "Loops": "How many times to repeat processing an image and using it as input for the next iteration",
+    "Loopback": "Performs img2img processing multiple times. Output images are used as input for the next loop.",
+    "Loops": "How many times to process an image. Each output is used as the input of the next loop. If set to 1, behavior will be as if this script were not used.",
+    "Final denoising strength": "The denoising strength for the final loop of each image in the batch.",
+    "Denoising strength curve": "The denoising curve controls the rate of denoising strength change each loop. Aggressive: Most of the change will happen towards the start of the loops. Linear: Change will be constant through all loops. Lazy: Most of the change will happen towards the end of the loops.",
 
     "Style 1": "Style to apply; styles have components for both positive and negative prompts and apply to both",
     "Style 2": "Style to apply; styles have components for both positive and negative prompts and apply to both",
diff --git a/scripts/loopback.py b/scripts/loopback.py
index ec1f85e5..81577888 100644
--- a/scripts/loopback.py
+++ b/scripts/loopback.py
@@ -1,14 +1,10 @@
-import numpy as np
-from tqdm import trange
+import math
 
-import modules.scripts as scripts
 import gradio as gr
-
-from modules import processing, shared, sd_samplers, images
+import modules.scripts as scripts
+from modules import deepbooru, images, processing, shared
 from modules.processing import Processed
-from modules.sd_samplers import samplers
-from modules.shared import opts, cmd_opts, state
-from modules import deepbooru
+from modules.shared import opts, state
 
 
 class Script(scripts.Script):
@@ -20,24 +16,27 @@ class Script(scripts.Script):
 
     def ui(self, is_img2img):        
         loops = gr.Slider(minimum=1, maximum=32, step=1, label='Loops', value=4, elem_id=self.elem_id("loops"))
-        denoising_strength_change_factor = gr.Slider(minimum=0.9, maximum=1.1, step=0.01, label='Denoising strength change factor', value=1, elem_id=self.elem_id("denoising_strength_change_factor"))
+        final_denoising_strength = gr.Slider(minimum=0, maximum=1, step=0.01, label='Final denoising strength', value=0.5, elem_id=self.elem_id("final_denoising_strength"))
+        denoising_curve = gr.Dropdown(label="Denoising strength curve", choices=["Aggressive", "Linear", "Lazy"], value="Linear")
         append_interrogation = gr.Dropdown(label="Append interrogated prompt at each iteration", choices=["None", "CLIP", "DeepBooru"], value="None")
 
-        return [loops, denoising_strength_change_factor, append_interrogation]
+        return [loops, final_denoising_strength, denoising_curve, append_interrogation]
 
-    def run(self, p, loops, denoising_strength_change_factor, append_interrogation):
+    def run(self, p, loops, final_denoising_strength, denoising_curve, append_interrogation):
         processing.fix_seed(p)
         batch_count = p.n_iter
         p.extra_generation_params = {
-            "Denoising strength change factor": denoising_strength_change_factor,
+            "Final denoising strength": final_denoising_strength,
+            "Denoising curve": denoising_curve
         }
 
         p.batch_size = 1
         p.n_iter = 1
 
-        output_images, info = None, None
+        info = None
         initial_seed = None
         initial_info = None
+        initial_denoising_strength = p.denoising_strength
 
         grids = []
         all_images = []
@@ -47,12 +46,37 @@ class Script(scripts.Script):
 
         initial_color_corrections = [processing.setup_color_correction(p.init_images[0])]
 
-        for n in range(batch_count):
-            history = []
+        def calculate_denoising_strength(loop):
+            strength = initial_denoising_strength
+
+            if loops == 1:
+                return strength
+
+            progress = loop / (loops - 1)
+            match denoising_curve:
+                case "Aggressive":
+                    strength = math.sin((progress) * math.pi * 0.5)
+
+                case "Lazy":
+                    strength = 1 - math.cos((progress) * math.pi * 0.5)
+
+                case _:
+                    strength = progress
+
+            change = (final_denoising_strength - initial_denoising_strength) * strength
+            return initial_denoising_strength + change
 
+        history = []
+
+        for n in range(batch_count):
             # Reset to original init image at the start of each batch
             p.init_images = original_init_image
 
+            # Reset to original denoising strength
+            p.denoising_strength = initial_denoising_strength
+
+            last_image = None
+
             for i in range(loops):
                 p.n_iter = 1
                 p.batch_size = 1
@@ -72,26 +96,43 @@ class Script(scripts.Script):
 
                 processed = processing.process_images(p)
 
+                # Generation cancelled.
+                if state.interrupted:
+                    break
+
                 if initial_seed is None:
                     initial_seed = processed.seed
                     initial_info = processed.info
 
-                init_img = processed.images[0]
-
-                p.init_images = [init_img]
                 p.seed = processed.seed + 1
-                p.denoising_strength = min(max(p.denoising_strength * denoising_strength_change_factor, 0.1), 1)
-                history.append(processed.images[0])
-
+                p.denoising_strength = calculate_denoising_strength(i + 1)
+                
+                if state.skipped:
+                    break
+
+                last_image = processed.images[0]
+                p.init_images = [last_image]
+
+                if batch_count == 1:
+                    history.append(last_image)
+                    all_images.append(last_image)
+
+            if batch_count > 1 and not state.skipped and not state.interrupted:
+                history.append(last_image)
+                all_images.append(last_image)
+                
+            if state.interrupted:
+                    break
+
+        if len(history) > 1:
             grid = images.image_grid(history, rows=1)
             if opts.grid_save:
                 images.save_image(grid, p.outpath_grids, "grid", initial_seed, p.prompt, opts.grid_format, info=info, short_filename=not opts.grid_extended_filename, grid=True, p=p)
 
-            grids.append(grid)
-            all_images += history
-
-        if opts.return_grid:
-            all_images = grids + all_images
+            if opts.return_grid:
+                grids.append(grid)
+                
+        all_images = grids + all_images
 
         processed = Processed(p, all_images, initial_seed, initial_info)
 
-- 
cgit v1.2.3


From e7ac09b25a885a66d3e789b1c175885ad3165e92 Mon Sep 17 00:00:00 2001
From: EllangoK <karun.ellango7@gmail.com>
Date: Wed, 22 Mar 2023 02:11:38 -0400
Subject: fixes xyz extra_generation_params not being saved

---
 scripts/xyz_grid.py | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

(limited to 'scripts')

diff --git a/scripts/xyz_grid.py b/scripts/xyz_grid.py
index ce584981..3551aca0 100644
--- a/scripts/xyz_grid.py
+++ b/scripts/xyz_grid.py
@@ -247,7 +247,7 @@ def draw_xyz_grid(p, xs, ys, zs, x_labels, y_labels, z_labels, cell, draw_legend
 
         state.job = f"{index(ix, iy, iz) + 1} out of {list_size}"
 
-        processed: Processed = cell(x, y, z)
+        processed: Processed = cell(x, y, z, ix, iy, iz)
 
         if processed_result is None:
             # Use our first processed result object as a template container to hold our full results
@@ -558,8 +558,6 @@ class Script(scripts.Script):
         print(f"X/Y/Z plot will create {len(xs) * len(ys) * len(zs) * image_cell_count} images on {len(zs)} {len(xs)}x{len(ys)} grid{plural_s}{cell_console_text}. (Total steps to process: {total_steps})")
         shared.total_tqdm.updateTotal(total_steps)
 
-        grid_infotext = [None]
-
         state.xyz_plot_x = AxisInfo(x_opt, xs)
         state.xyz_plot_y = AxisInfo(y_opt, ys)
         state.xyz_plot_z = AxisInfo(z_opt, zs)
@@ -588,7 +586,9 @@ class Script(scripts.Script):
             else:
                 second_axes_processed = 'y'
 
-        def cell(x, y, z):
+        grid_infotext = [None] * (1 + len(zs))
+
+        def cell(x, y, z, ix, iy, iz):
             if shared.state.interrupted:
                 return Processed(p, [], p.seed, "")
 
@@ -600,7 +600,9 @@ class Script(scripts.Script):
 
             res = process_images(pc)
 
-            if grid_infotext[0] is None:
+            # Sets subgrid infotexts
+            subgrid_index = 1 + iz
+            if grid_infotext[subgrid_index] is None and ix == 0 and iy == 0:
                 pc.extra_generation_params = copy(pc.extra_generation_params)
                 pc.extra_generation_params['Script'] = self.title()
 
@@ -616,6 +618,12 @@ class Script(scripts.Script):
                     if y_opt.label in ["Seed", "Var. seed"] and not no_fixed_seeds:
                         pc.extra_generation_params["Fixed Y Values"] = ", ".join([str(y) for y in ys])
 
+                grid_infotext[subgrid_index] = processing.create_infotext(pc, pc.all_prompts, pc.all_seeds, pc.all_subseeds)
+
+            # Sets main grid infotext
+            if grid_infotext[0] is None and ix == 0 and iy == 0 and iz == 0:
+                pc.extra_generation_params = copy(pc.extra_generation_params)
+
                 if z_opt.label != 'Nothing':
                     pc.extra_generation_params["Z Type"] = z_opt.label
                     pc.extra_generation_params["Z Values"] = z_values
@@ -650,6 +658,9 @@ class Script(scripts.Script):
 
         z_count = len(zs)
 
+        # Set the grid infotexts to the real ones with extra_generation_params (1 main grid + z_count sub-grids)
+        processed.infotexts[:1+z_count] = grid_infotext[:1+z_count]
+
         if not include_lone_images:
             # Don't need sub-images anymore, drop from list:
             processed.images = processed.images[:z_count+1]
-- 
cgit v1.2.3


From a9eef1fbb1dcdce4f0eb0b8e0f79dcd4c96713e1 Mon Sep 17 00:00:00 2001
From: James Railton <JaRail@users.noreply.github.com>
Date: Thu, 23 Mar 2023 10:44:25 -0400
Subject: Fix "masked content" in loopback script

The loopback script did not set masked content to original after first loop. So each loop would apply a fill, or latent mask. This would essentially reset progress each loop.

The desired behavior is to use the mask for the first loop, then continue to iterate on the results of the previous loop.
---
 scripts/loopback.py | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'scripts')

diff --git a/scripts/loopback.py b/scripts/loopback.py
index 81577888..9c388aa8 100644
--- a/scripts/loopback.py
+++ b/scripts/loopback.py
@@ -42,6 +42,7 @@ class Script(scripts.Script):
         all_images = []
         original_init_image = p.init_images
         original_prompt = p.prompt
+        original_inpainting_fill = p.inpainting_fill
         state.job_count = loops * batch_count
 
         initial_color_corrections = [processing.setup_color_correction(p.init_images[0])]
@@ -112,6 +113,7 @@ class Script(scripts.Script):
 
                 last_image = processed.images[0]
                 p.init_images = [last_image]
+                p.inpainting_fill = 1 # Set "masked content" to "original" for next loop.
 
                 if batch_count == 1:
                     history.append(last_image)
@@ -120,6 +122,8 @@ class Script(scripts.Script):
             if batch_count > 1 and not state.skipped and not state.interrupted:
                 history.append(last_image)
                 all_images.append(last_image)
+
+            p.inpainting_fill = original_inpainting_fill
                 
             if state.interrupted:
                     break
-- 
cgit v1.2.3


From 9f0da9f6edfb9be1d69ba3492a61d96db769307b Mon Sep 17 00:00:00 2001
From: AUTOMATIC <16777216c@gmail.com>
Date: Mon, 20 Mar 2023 16:09:36 +0300
Subject: initial gradio 3.22 support

---
 .../javascript/prompt-bracket-checker.js           |  15 +-
 javascript/hints.js                                |   2 +-
 javascript/imageviewer.js                          |  70 +--
 javascript/progressbar.js                          |  67 +--
 javascript/ui.js                                   |   3 +-
 modules/scripts.py                                 |   3 +
 modules/scripts_postprocessing.py                  |   2 +-
 modules/ui.py                                      |  43 +-
 modules/ui_common.py                               |   3 +-
 modules/ui_components.py                           |  36 +-
 requirements.txt                                   |   2 +-
 requirements_versions.txt                          |   2 +-
 script.js                                          |   6 +-
 scripts/postprocessing_upscale.py                  |  34 +-
 style.css                                          | 626 ++++++---------------
 15 files changed, 289 insertions(+), 625 deletions(-)

(limited to 'scripts')

diff --git a/extensions-builtin/prompt-bracket-checker/javascript/prompt-bracket-checker.js b/extensions-builtin/prompt-bracket-checker/javascript/prompt-bracket-checker.js
index 4a85c8eb..f0918e26 100644
--- a/extensions-builtin/prompt-bracket-checker/javascript/prompt-bracket-checker.js
+++ b/extensions-builtin/prompt-bracket-checker/javascript/prompt-bracket-checker.js
@@ -89,22 +89,15 @@ function checkBrackets(evt, textArea, counterElt) {
 function setupBracketChecking(id_prompt, id_counter){
     var textarea = gradioApp().querySelector("#" + id_prompt + " > label > textarea");
     var counter = gradioApp().getElementById(id_counter)
+
     textarea.addEventListener("input", function(evt){
         checkBrackets(evt, textarea, counter)
     });
 }
 
-var shadowRootLoaded = setInterval(function() {
-    var shadowRoot = document.querySelector('gradio-app').shadowRoot;
-    if(! shadowRoot)  return false;
-
-    var shadowTextArea = shadowRoot.querySelectorAll('#txt2img_prompt > label > textarea');
-    if(shadowTextArea.length < 1)  return false;
-
-    clearInterval(shadowRootLoaded);
-
+onUiLoaded(function(){
     setupBracketChecking('txt2img_prompt', 'txt2img_token_counter')
     setupBracketChecking('txt2img_neg_prompt', 'txt2img_negative_token_counter')
-    setupBracketChecking('img2img_prompt', 'imgimg_token_counter')
+    setupBracketChecking('img2img_prompt', 'img2img_token_counter')
     setupBracketChecking('img2img_neg_prompt', 'img2img_negative_token_counter')
-}, 1000);
+})
\ No newline at end of file
diff --git a/javascript/hints.js b/javascript/hints.js
index 7f4101b2..61763e6b 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -18,7 +18,7 @@ titles = {
     "\u2199\ufe0f": "Read generation parameters from prompt or last generation if prompt is empty into user interface.",
     "\u{1f4c2}": "Open images output directory",
     "\u{1f4be}": "Save style",
-    "\u{1f5d1}": "Clear prompt",
+    "\u{1f5d1}\ufe0f": "Clear prompt",
     "\u{1f4cb}": "Apply selected styles to current prompt",
     "\u{1f4d2}": "Paste available values into the field",
     "\u{1f3b4}": "Show extra networks",
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 28e748b7..7547e771 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -50,7 +50,7 @@ function updateOnBackgroundChange() {
 }
 
 function modalImageSwitch(offset) {
-    var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
+    var allgalleryButtons = gradioApp().querySelectorAll(".gradio-gallery .thumbnail-item")
     var galleryButtons = []
     allgalleryButtons.forEach(function(elem) {
         if (elem.parentElement.offsetParent) {
@@ -59,7 +59,7 @@ function modalImageSwitch(offset) {
     })
 
     if (galleryButtons.length > 1) {
-        var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
+        var allcurrentButtons = gradioApp().querySelectorAll(".gradio-gallery .thumbnail-item.selected")
         var currentButton = null
         allcurrentButtons.forEach(function(elem) {
             if (elem.parentElement.offsetParent) {
@@ -136,37 +136,29 @@ function modalKeyHandler(event) {
     }
 }
 
-function showGalleryImage() {
-    setTimeout(function() {
-        fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain')
-
-        if (fullImg_preview != null) {
-            fullImg_preview.forEach(function function_name(e) {
-                if (e.dataset.modded)
-                    return;
-                e.dataset.modded = true;
-                if(e && e.parentElement.tagName == 'DIV'){
-                    e.style.cursor='pointer'
-                    e.style.userSelect='none'
-
-                    var isFirefox = isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
-
-                    // For Firefox, listening on click first switched to next image then shows the lightbox.
-                    // If you know how to fix this without switching to mousedown event, please.
-                    // For other browsers the event is click to make it possiblr to drag picture.
-                    var event = isFirefox ? 'mousedown' : 'click'
-
-                    e.addEventListener(event, function (evt) {
-                        if(!opts.js_modal_lightbox || evt.button != 0) return;
-                        modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
-                        evt.preventDefault()
-                        showModal(evt)
-                    }, true);
-                }
-            });
-        }
+function setupImageForLightbox(e) {
+	if (e.dataset.modded)
+		return;
+
+	e.dataset.modded = true;
+	e.style.cursor='pointer'
+	e.style.userSelect='none'
+
+	var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+
+	// For Firefox, listening on click first switched to next image then shows the lightbox.
+	// If you know how to fix this without switching to mousedown event, please.
+	// For other browsers the event is click to make it possiblr to drag picture.
+	var event = isFirefox ? 'mousedown' : 'click'
+
+	e.addEventListener(event, function (evt) {
+		if(!opts.js_modal_lightbox || evt.button != 0) return;
+
+		modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
+		evt.preventDefault()
+		showModal(evt)
+	}, true);
 
-    }, 100);
 }
 
 function modalZoomSet(modalImage, enable) {
@@ -199,21 +191,21 @@ function modalTileImageToggle(event) {
 }
 
 function galleryImageHandler(e) {
-    if (e && e.parentElement.tagName == 'BUTTON') {
+    //if (e && e.parentElement.tagName == 'BUTTON') {
         e.onclick = showGalleryImage;
-    }
+    //}
 }
 
 onUiUpdate(function() {
-    fullImg_preview = gradioApp().querySelectorAll('img.w-full')
+    fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
     if (fullImg_preview != null) {
-        fullImg_preview.forEach(galleryImageHandler);
+        fullImg_preview.forEach(setupImageForLightbox);
     }
     updateOnBackgroundChange();
 })
 
 document.addEventListener("DOMContentLoaded", function() {
-    const modalFragment = document.createDocumentFragment();
+    //const modalFragment = document.createDocumentFragment();
     const modal = document.createElement('div')
     modal.onclick = closeModal;
     modal.id = "lightboxModal";
@@ -277,9 +269,9 @@ document.addEventListener("DOMContentLoaded", function() {
 
     modal.appendChild(modalNext)
 
+    gradioApp().appendChild(modal)
 
-    gradioApp().getRootNode().appendChild(modal)
 
-    document.body.appendChild(modalFragment);
+    document.body.appendChild(modal);
 
 });
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 9ccc9da4..4ac9b8db 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -1,78 +1,13 @@
 // code related to showing and updating progressbar shown as the image is being made
 
-
-galleries = {}
-storedGallerySelections = {}
-galleryObservers = {}
-
 function rememberGallerySelection(id_gallery){
-    storedGallerySelections[id_gallery] = getGallerySelectedIndex(id_gallery)
-}
 
-function getGallerySelectedIndex(id_gallery){
-    let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item')
-    let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2')
-
-     let currentlySelectedIndex = -1
-     galleryButtons.forEach(function(v, i){ if(v==galleryBtnSelected) { currentlySelectedIndex = i } })
-
-     return currentlySelectedIndex
 }
 
-// this is a workaround for https://github.com/gradio-app/gradio/issues/2984
-function check_gallery(id_gallery){
-    let gallery = gradioApp().getElementById(id_gallery)
-    // if gallery has no change, no need to setting up observer again.
-    if (gallery && galleries[id_gallery] !== gallery){
-        galleries[id_gallery] = gallery;
-        if(galleryObservers[id_gallery]){
-            galleryObservers[id_gallery].disconnect();
-        }
+function getGallerySelectedIndex(id_gallery){
 
-        storedGallerySelections[id_gallery] = -1
-
-        galleryObservers[id_gallery] = new MutationObserver(function (){
-            let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item')
-            let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2')
-            let currentlySelectedIndex = getGallerySelectedIndex(id_gallery)
-            prevSelectedIndex = storedGallerySelections[id_gallery]
-            storedGallerySelections[id_gallery] = -1
-
-            if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) {
-                // automatically re-open previously selected index (if exists)
-                activeElement = gradioApp().activeElement;
-                let scrollX = window.scrollX;
-                let scrollY = window.scrollY;
-
-                galleryButtons[prevSelectedIndex].click();
-                showGalleryImage();
-
-                // When the gallery button is clicked, it gains focus and scrolls itself into view
-                // We need to scroll back to the previous position
-                setTimeout(function (){
-                    window.scrollTo(scrollX, scrollY);
-                }, 50);
-
-                if(activeElement){
-                    // i fought this for about an hour; i don't know why the focus is lost or why this helps recover it
-                    // if someone has a better solution please by all means
-                    setTimeout(function (){
-                        activeElement.focus({
-                            preventScroll: true // Refocus the element that was focused before the gallery was opened without scrolling to it
-                        })
-                    }, 1);
-                }
-            }
-        })
-        galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false })
-    }
 }
 
-onUiUpdate(function(){
-    check_gallery('txt2img_gallery')
-    check_gallery('img2img_gallery')
-})
-
 function request(url, data, handler, errorHandler){
     var xhr = new XMLHttpRequest();
     var url = url;
diff --git a/javascript/ui.js b/javascript/ui.js
index b7a8268a..fcaf5608 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -86,7 +86,7 @@ function get_tab_index(tabId){
     var res = 0
 
     gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){
-        if(button.className.indexOf('bg-white') != -1)
+        if(button.className.indexOf('selected') != -1)
             res = i
     })
 
@@ -255,7 +255,6 @@ onUiUpdate(function(){
         }
 
         prompt.parentElement.insertBefore(counter, prompt)
-        counter.classList.add("token-counter")
         prompt.parentElement.style.position = "relative"
 
 		promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); }
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)
diff --git a/requirements.txt b/requirements.txt
index 6d53f089..e71251c5 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -4,7 +4,7 @@ basicsr
 fonts
 font-roboto
 gfpgan
-gradio==3.16.2
+gradio==3.22.1
 invisible-watermark
 numpy
 omegaconf
diff --git a/requirements_versions.txt b/requirements_versions.txt
index 0031c616..ab16e4cc 100644
--- a/requirements_versions.txt
+++ b/requirements_versions.txt
@@ -3,7 +3,7 @@ transformers==4.25.1
 accelerate==0.12.0
 basicsr==1.4.2
 gfpgan==1.3.8
-gradio==3.16.2
+gradio==3.22.1
 numpy==1.23.3
 Pillow==9.4.0
 realesrgan==0.3.0
diff --git a/script.js b/script.js
index 97e0bfcf..978b948f 100644
--- a/script.js
+++ b/script.js
@@ -1,7 +1,9 @@
 function gradioApp() {
     const elems = document.getElementsByTagName('gradio-app')
-    const gradioShadowRoot = elems.length == 0 ? null : elems[0].shadowRoot
-    return !!gradioShadowRoot ? gradioShadowRoot : document;
+    const elem = elems.length == 0 ? document : elems[0]
+
+    elem.getElementById = function(id){ return document.getElementById(id) }
+    return elem.shadowRoot ? elem.shadowRoot : elem
 }
 
 function get_uiCurrentTab() {
diff --git a/scripts/postprocessing_upscale.py b/scripts/postprocessing_upscale.py
index 8842bd91..11eab31a 100644
--- a/scripts/postprocessing_upscale.py
+++ b/scripts/postprocessing_upscale.py
@@ -17,22 +17,24 @@ class ScriptPostprocessingUpscale(scripts_postprocessing.ScriptPostprocessing):
     def ui(self):
         selected_tab = gr.State(value=0)
 
-        with gr.Tabs(elem_id="extras_resize_mode"):
-            with gr.TabItem('Scale by', elem_id="extras_scale_by_tab") as tab_scale_by:
-                upscaling_resize = gr.Slider(minimum=1.0, maximum=8.0, step=0.05, label="Resize", value=4, elem_id="extras_upscaling_resize")
-
-            with gr.TabItem('Scale to', elem_id="extras_scale_to_tab") as tab_scale_to:
-                with FormRow():
-                    upscaling_resize_w = gr.Number(label="Width", value=512, precision=0, elem_id="extras_upscaling_resize_w")
-                    upscaling_resize_h = gr.Number(label="Height", value=512, precision=0, elem_id="extras_upscaling_resize_h")
-                    upscaling_crop = gr.Checkbox(label='Crop to fit', value=True, elem_id="extras_upscaling_crop")
-
-        with FormRow():
-            extras_upscaler_1 = gr.Dropdown(label='Upscaler 1', elem_id="extras_upscaler_1", choices=[x.name for x in shared.sd_upscalers], value=shared.sd_upscalers[0].name)
-
-        with FormRow():
-            extras_upscaler_2 = gr.Dropdown(label='Upscaler 2', elem_id="extras_upscaler_2", choices=[x.name for x in shared.sd_upscalers], value=shared.sd_upscalers[0].name)
-            extras_upscaler_2_visibility = gr.Slider(minimum=0.0, maximum=1.0, step=0.001, label="Upscaler 2 visibility", value=0.0, elem_id="extras_upscaler_2_visibility")
+        with gr.Column():
+            with FormRow():
+                with gr.Tabs(elem_id="extras_resize_mode"):
+                    with gr.TabItem('Scale by', elem_id="extras_scale_by_tab") as tab_scale_by:
+                        upscaling_resize = gr.Slider(minimum=1.0, maximum=8.0, step=0.05, label="Resize", value=4, elem_id="extras_upscaling_resize")
+
+                    with gr.TabItem('Scale to', elem_id="extras_scale_to_tab") as tab_scale_to:
+                        with FormRow():
+                            upscaling_resize_w = gr.Number(label="Width", value=512, precision=0, elem_id="extras_upscaling_resize_w")
+                            upscaling_resize_h = gr.Number(label="Height", value=512, precision=0, elem_id="extras_upscaling_resize_h")
+                            upscaling_crop = gr.Checkbox(label='Crop to fit', value=True, elem_id="extras_upscaling_crop")
+
+            with FormRow():
+                extras_upscaler_1 = gr.Dropdown(label='Upscaler 1', elem_id="extras_upscaler_1", choices=[x.name for x in shared.sd_upscalers], value=shared.sd_upscalers[0].name)
+
+            with FormRow():
+                extras_upscaler_2 = gr.Dropdown(label='Upscaler 2', elem_id="extras_upscaler_2", choices=[x.name for x in shared.sd_upscalers], value=shared.sd_upscalers[0].name)
+                extras_upscaler_2_visibility = gr.Slider(minimum=0.0, maximum=1.0, step=0.001, label="Upscaler 2 visibility", value=0.0, elem_id="extras_upscaler_2_visibility")
 
         tab_scale_by.select(fn=lambda: 0, inputs=[], outputs=[selected_tab])
         tab_scale_to.select(fn=lambda: 1, inputs=[], outputs=[selected_tab])
diff --git a/style.css b/style.css
index 3eac2b17..936930fd 100644
--- a/style.css
+++ b/style.css
@@ -1,270 +1,259 @@
-.container {
-    max-width: 100%;
-}
 
-.token-counter{
-    position: absolute;
-    display: inline-block;
-    right: 2em;
-    min-width: 0 !important;
-    width: auto;
-    z-index: 100;
-}
+/* general gradio fixes */
 
-.token-counter.error span{
-    box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075);
-    border: 2px solid rgba(255,0,0,0.4) !important;
+:root{
+    --checkbox-label-gap: 0.25em 0.1em;
+    --section-header-text-size: 12pt;
 }
 
-.token-counter div{
-    display: inline;
+.block.padded{
+    padding: 0.2em 0.5em !important;
 }
 
-.token-counter span{
-    padding: 0.1em 0.75em;
+div.gradio-container{
+    max-width: unset !important;
 }
 
-#sh{
-    min-width: 2em;
-    min-height: 2em;
-    max-width: 2em;
-    max-height: 2em;
-    flex-grow: 0;
-    padding-left: 0.25em;
-    padding-right: 0.25em;
-    margin: 0.1em 0;
-    opacity: 0%;
-    cursor: default;
+.hidden{
+    display: none;
 }
 
-.output-html p {margin: 0 0.5em;}
-
-.row > *,
-.row > .gr-form > * {
-    min-width: min(120px, 100%);
-    flex: 1 1 0%;
+.compact{
+    background: transparent !important;
+    padding: 0 !important;
 }
 
-.performance {
-    font-size: 0.85em;
-    color: #444;
+div.form{
+    border-width: 0;
+    box-shadow: none;
+    background: transparent;
+    overflow: visible;
+    gap: 0.5em;
 }
 
-.performance p{
-    display: inline-block;
+.block.gradio-dropdown,
+.block.gradio-slider,
+.block.gradio-checkbox,
+.block.gradio-textbox,
+.block.gradio-radio,
+.block.gradio-checkboxgroup,
+.block.gradio-number
+{
+    border-width: 0 !important;
+    box-shadow: none !important;
 }
 
-.performance .time {
-    margin-right: 0;
+.gap.compact{
+    padding: 0;
+    gap: 0;
 }
 
-.performance .vram {
+div.compact{
+    gap: 0.5em;
 }
 
-#txt2img_generate, #img2img_generate {
-    min-height: 4.5em;
+.gradio-dropdown ul.options{
+    max-height: 35em;
 }
 
-@media screen and (min-width: 2500px) {
-    #txt2img_gallery, #img2img_gallery {
-        min-height: 768px;
-    }
+.gradio-dropdown label span:not(.has-info){
+    margin-bottom: 0;
 }
 
-#txt2img_gallery img, #img2img_gallery img{
-    object-fit: scale-down;
-}
-#txt2img_actions_column, #img2img_actions_column {
-	margin: 0.35rem 0.75rem 0.35rem 0;	
-}
-#script_list {
-    padding: .625rem .75rem 0 .625rem;
-}
-.justify-center.overflow-x-scroll {
-    justify-content: left;
+.gradio-dropdown div.wrap.wrap.wrap.wrap{
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
-.justify-center.overflow-x-scroll button:first-of-type {
-    margin-left: auto;
+.gradio-slider input[type="number"]{
+    width: 6em;
 }
 
-.justify-center.overflow-x-scroll button:last-of-type {
-    margin-right: auto;
+.block.gradio-checkbox {
+    margin: 0.75em 1.5em 0 0;
 }
 
-[id$=_random_seed], [id$=_random_subseed], [id$=_reuse_seed], [id$=_reuse_subseed], #open_folder{
-    min-width: 2.3em;
-    height: 2.5em;
-    flex-grow: 0;
-    padding-left: 0.25em;
-    padding-right: 0.25em;
-}
+/* general styled components */
 
-#hidden_element{
-    display: none;
+.gradio-button.tool{
+    max-width: 2.2em;
+    min-width: 2.2em !important;
+    height: 2.4em;
+    align-self: end;
+    line-height: 1em;
+    border-radius: 0.5em;
 }
 
-[id$=_seed_row], [id$=_subseed_row]{
-    gap: 0.5rem;
-    padding: 0.6em;
+.checkboxes-row{
+    margin-bottom: 0.5em;
+    margin-left: 0em;
 }
-
-[id$=_subseed_show_box]{
+.checkboxes-row > div{
+    flex: 0;
+    white-space: nowrap;
     min-width: auto;
-    flex-grow: 0;
 }
 
-[id$=_subseed_show_box] > div{
-    border: 0;
-    height: 100%;
-}
 
-[id$=_subseed_show]{
-    min-width: auto;
-    flex-grow: 0;
-    padding: 0;
-}
+/* txt2img/img2img specific */
 
-[id$=_subseed_show] label{
-    height: 100%;
+.block.token-counter{
+    position: absolute;
+    display: inline-block;
+    right: 1em;
+    min-width: 0 !important;
+    width: auto;
+    z-index: 100;
 }
 
-#txt2img_actions_column, #img2img_actions_column{
-    gap: 0;
-    margin-right: .75rem;
+.block.token-counter span{
+    background: var(--input-background-fill) !important;
+    box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);
+    border: 2px solid rgba(192,192,192,0.4) !important;
+    border-radius: 0.4em;
 }
 
-#txt2img_tools, #img2img_tools{
-    gap: 0.4em;
+.block.token-counter.error span{
+    box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075);
+    border: 2px solid rgba(255,0,0,0.4) !important;
 }
 
-#interrogate_col{
-    min-width: 0 !important;
-    max-width: 8em !important;
-    margin-right: 1em;
-    gap: 0;
-}
-#interrogate, #deepbooru{
-    margin: 0em 0.25em 0.5em 0.25em;
-    min-width: 8em;
-    max-width: 8em;
+.block.token-counter div{
+    display: inline;
 }
 
-#style_pos_col, #style_neg_col{
-    min-width: 8em !important;
+.block.token-counter span{
+    padding: 0.1em 0.75em;
 }
 
-#txt2img_styles_row, #img2img_styles_row{
-    gap: 0.25em;
-    margin-top: 0.3em;
+[id$=_subseed_show]{
+    min-width: auto !important;
+    flex-grow: 0 !important;
+    display: flex;
 }
 
-#txt2img_styles_row > button, #img2img_styles_row > button{
-    margin: 0;
+[id$=_subseed_show] label{
+    margin-bottom: 0.5em;
+    align-self: end;
 }
 
-#txt2img_styles, #img2img_styles{
-    padding: 0;
+.performance {
+    font-size: 0.85em;
+    color: #444;
 }
 
-#txt2img_styles > label > div, #img2img_styles > label > div{
-    min-height: 3.2em;
+.performance p{
+    display: inline-block;
 }
 
-ul.list-none{
-    max-height: 35em;
-    z-index: 2000;
+.performance .time {
+    margin-right: 0;
 }
 
-.gr-form{
-    background: transparent;
+.performance .vram {
 }
 
-.my-4{
-    margin-top: 0;
-    margin-bottom: 0;
+#txt2img_generate, #img2img_generate {
+    min-height: 4.5em;
 }
 
-#resize_mode{
-    flex: 1.5;
+@media screen and (min-width: 2500px) {
+    #txt2img_gallery, #img2img_gallery {
+        min-height: 768px;
+    }
 }
 
-button{
-    align-self: stretch !important;
+#txt2img_gallery img, #img2img_gallery img{
+    object-fit: scale-down;
 }
-
-.overflow-hidden, .gr-panel{
-    overflow: visible !important;
+#txt2img_actions_column, #img2img_actions_column {
+    gap: 0.5em;
+}
+#txt2img_tools, #img2img_tools{
+    gap: 0.4em;
 }
 
-#x_type, #y_type{
-    max-width: 10em;
+.interrogate-col{
+    min-width: 0 !important;
+    max-width: fit-content;
+    gap: 0.5em;
+}
+.interrogate-col > button{
+    min-width: 8em;
+    max-width: 8em;
+    height: 5.45em;
 }
 
-#txt2img_preview, #img2img_preview, #ti_preview{
+.generate-box{
+    position: relative;
+}
+.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt{
     position: absolute;
-    width: 320px;
+    width: 50%;
+    height: 100%;
+    display: none;
+}
+.gradio-button.generate-box-interrupt{
     left: 0;
+    border-radius: 0.5rem 0 0 0.5rem;
+}
+.gradio-button.generate-box-skip{
     right: 0;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 34px;
-    z-index: 100;
-    border: none;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-radius: 0 0.5rem 0.5rem 0;
 }
 
-@media screen and (min-width: 768px) {
-    #txt2img_preview, #img2img_preview, #ti_preview {
-        position: absolute;
-    }
+#txtimg_hr_finalres{
+    min-height: 0 !important;
+    padding: .625rem .75rem;
+    margin-left: -0.75em
 }
 
-@media screen and (max-width: 767px) {
-    #txt2img_preview, #img2img_preview, #ti_preview {
-        position: relative;
-    }
+#txtimg_hr_finalres .resolution{
+    font-weight: bold;
 }
 
-#txt2img_preview div.left-0.top-0, #img2img_preview div.left-0.top-0, #ti_preview div.left-0.top-0{
-    display: none;
+.inactive{
+    opacity: 0.5;
 }
 
-fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500,  label.block span{
-    position: absolute;
-    top: -0.7em;
-    line-height: 1.2em;
-    padding: 0;
-    margin: 0 0.5em;
-
-    background-color: white;
-    box-shadow:  6px 0 6px 0px white, -6px 0 6px 0px white;
+[id$=_column_batch]{
+    min-width: min(13.5em, 100%) !important;
+}
 
-    z-index: 300;
+[id$=_dimensions_row]{
+    min-width: 0 !important;
+    max-width: fit-content;
+    padding: 0 1em;
 }
 
-.dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span{
-    background-color: rgb(31, 41, 55);
-    box-shadow: none;
-    border: 1px solid rgba(128, 128, 128, 0.1);
-    border-radius: 6px;
-    padding: 0.1em 0.5em;
+#mode_img2img .gradio-image > div.fixed-height, #mode_img2img .gradio-image > div.fixed-height img{
+    height: 480px !important;
+    max-height: 480px !important;
+    min-height: 480px !important;
 }
 
-#txt2img_column_batch, #img2img_column_batch{
-    min-width: min(13.5em, 100%) !important;
+
+/* settings */
+#quicksettings {
+    width: fit-content;
 }
 
-#settings fieldset span.text-gray-500, #settings .gr-block.gr-box span.text-gray-500, #settings label.block span{
-    position: relative;
+#quicksettings > div, #quicksettings > fieldset{
+    max-width: 24em;
+    min-width: 24em;
+    padding: 0;
     border: none;
-    margin-right: 8em;
+    box-shadow: none;
+    background: none;
+    margin-right: 10px;
 }
 
-#settings .gr-panel div.flex-col div.justify-between div{
-    position: relative;
-    z-index: 200;
+#quicksettings .gradio-dropdown .wrap-inner{
+    flex-wrap: unset;
+}
+
+#quicksettings .gradio-dropdown .single-select{
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 #settings{
@@ -276,14 +265,14 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500,  label.block s
     margin-left: 10em;
 }
 
-#settings > div.flex-wrap{
+#settings > div.tab-nav{
     float: left;
     display: block;
     margin-left: 0;
     width: 10em;
 }
 
-#settings > div.flex-wrap button{
+#settings > div.tab-nav button{
     display: block;
     border: none;
     text-align: left;
@@ -294,29 +283,8 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500,  label.block s
     margin: 0 1.2em;
 }
 
-input[type="range"]{
-    margin: 0.5em 0 -0.3em 0;
-}
-
-#mask_bug_info {
-  text-align: center;
-  display: block;
-  margin-top: -0.75em;
-  margin-bottom: -0.75em;
-}
-
-#txt2img_negative_prompt, #img2img_negative_prompt{
-}
-
-/* gradio 3.8 adds opacity to progressbar which makes it blink; disable it here */
-.transition.opacity-20 {
-  opacity: 1 !important;
-}
-
-/* more gradio's garbage cleanup */
-.min-h-\[4rem\] { min-height: unset !important; }
-.min-h-\[6rem\] { min-height: unset !important; }
 
+/* live preview */
 .progressDiv{
     position: relative;
     height: 20px;
@@ -362,6 +330,8 @@ input[type="range"]{
     height: 100%;
 }
 
+/* fullscreen popup (ie in Lora's (i) button) */
+
 .popup-metadata{
     color: black;
     background: white;
@@ -402,6 +372,8 @@ input[type="range"]{
     padding: 2em;
 }
 
+/* fullpage image viewer */
+
 #lightboxModal{
   display: none;
   position: fixed;
@@ -512,45 +484,7 @@ input[type="range"]{
   background-color: rgba(0, 0, 0, 0.8);
 }
 
-#imageARPreview{
-    position:absolute;
-    top:0px;
-    left:0px;
-    border:2px solid red;
-    background:rgba(255, 0, 0, 0.3);
-    z-index: 900;
-    pointer-events:none;
-    display:none
-}
-
-#txt2img_generate_box, #img2img_generate_box{
-    position: relative;
-}
-
-#txt2img_interrupt, #img2img_interrupt, #txt2img_skip, #img2img_skip{
-    position: absolute;
-    width: 50%;
-    height: 100%;
-    background: #b4c0cc;
-    display: none;
-}
-
-#txt2img_interrupt, #img2img_interrupt{
-    left: 0;
-    border-radius: 0.5rem 0 0 0.5rem;
-}
-#txt2img_skip, #img2img_skip{
-    right: 0;
-    border-radius: 0 0.5rem 0.5rem 0;
-}
-
-.red {
-	color: red;
-}
-
-.gallery-item {
-    --tw-bg-opacity: 0 !important;
-}
+/* context menu (ie for the generate button) */
 
 #context-menu{
     z-index:9999;
@@ -579,61 +513,8 @@ input[type="range"]{
     background: #a55000;
 }
 
-#quicksettings {
-    width: fit-content;
-}
 
-#quicksettings > div, #quicksettings > fieldset{
-    max-width: 24em;
-    min-width: 24em;
-    padding: 0;
-    border: none;
-    box-shadow: none;
-    background: none;
-    margin-right: 10px;
-}
-
-#quicksettings > div > div > div > label > span {
-    position: relative;
-    margin-right: 9em;
-    margin-bottom: -1em;
-}
-
-canvas[key="mask"] {
-    z-index: 12 !important;
-    filter: invert();
-    mix-blend-mode: multiply;
-    pointer-events: none;
-}
-
-
-/* gradio 3.4.1 stuff for editable scrollbar values */
-.gr-box > div > div > input.gr-text-input{
-    position: absolute;
-    right: 0.5em;
-    top: -0.6em;
-    z-index: 400;
-    width: 6em;
-}
-#quicksettings .gr-box > div > div > input.gr-text-input {
-  top: -1.12em;
-}
-
-.row.gr-compact{
-    overflow: visible;
-}
-
-#img2img_image, #img2img_image > .h-60, #img2img_image > .h-60 > div, #img2img_image > .h-60 > div > img,
-#img2img_sketch, #img2img_sketch > .h-60, #img2img_sketch > .h-60 > div, #img2img_sketch > .h-60 > div > img,
-#img2maskimg, #img2maskimg > .h-60, #img2maskimg > .h-60 > div, #img2maskimg > .h-60 > div > img,
-#inpaint_sketch, #inpaint_sketch > .h-60, #inpaint_sketch > .h-60 > div, #inpaint_sketch > .h-60 > div > img
-{
-    height: 480px !important;
-    max-height: 480px !important;
-    min-height: 480px !important;
-}
-
-/* Extensions */
+/* extensions */
 
 #tab_extensions table{
     border-collapse: collapse;
@@ -646,6 +527,7 @@ canvas[key="mask"] {
 
 #tab_extensions table input[type="checkbox"]{
     margin-right: 0.5em;
+    appearance: checkbox;
 }
 
 #tab_extensions button{
@@ -670,74 +552,7 @@ canvas[key="mask"] {
     font-size: 90%;
 }
 
-#image_buttons_txt2img button, #image_buttons_img2img button, #image_buttons_extras button{
-    min-width: auto;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-}
-
-.gr-form{
-    background-color: white;
-}
-
-.dark .gr-form{
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.gr-button-tool, .gr-button-tool-top{
-    max-width: 2.5em;
-    min-width: 2.5em !important;
-    height: 2.4em;
-}
-
-.gr-button-tool{
-    margin: 0.6em 0em 0.55em 0;
-}
-
-.gr-button-tool-top, #settings .gr-button-tool{
-    margin: 1.6em 0.7em 0.55em 0;
-}
-
-
-#modelmerger_results_container{
-    margin-top: 1em;
-    overflow: visible;
-}
-
-#modelmerger_models{
-    gap: 0;
-}
-
-
-#quicksettings .gr-button-tool{
-    margin: 0;
-    border-color: unset;
-	background-color: unset;
-}
-
-#modelmerger_interp_description>p {
-    margin: 0!important;
-    text-align: center;
-}
-#modelmerger_interp_description {
-    margin: 0.35rem 0.75rem 1.23rem;
-}
-#img2img_settings > div.gr-form, #txt2img_settings > div.gr-form {
-    padding-top: 0.9em;
-    padding-bottom: 0.9em;
-}
-#txt2img_settings {
-    padding-top: 1.16em;
-    padding-bottom: 0.9em;
-}
-#img2img_settings {
-    padding-bottom: 0.9em;
-}
-
-#img2img_settings div.gr-form .gr-form, #txt2img_settings div.gr-form .gr-form, #train_tabs div.gr-form .gr-form{
-    border: none;
-    padding-bottom: 0.5em;
-}
+/* replace original footer with ours */
 
 footer {
     display: none !important;
@@ -756,90 +571,7 @@ footer {
     opacity: 0.85;
 }
 
-#txtimg_hr_finalres{
-    min-height: 0 !important;
-    padding: .625rem .75rem;
-    margin-left: -0.75em
-
-}
-
-#txtimg_hr_finalres .resolution{
-    font-weight: bold;
-}
-
-#txt2img_checkboxes, #img2img_checkboxes{
-    margin-bottom: 0.5em;
-    margin-left: 0em;
-}
-#txt2img_checkboxes > div, #img2img_checkboxes > div{
-    flex: 0;
-    white-space: nowrap;
-    min-width: auto;
-}
-
-#img2img_copy_to_img2img, #img2img_copy_to_sketch, #img2img_copy_to_inpaint, #img2img_copy_to_inpaint_sketch{
-    margin-left: 0em;
-}
-
-#axis_options {
-    margin-left: 0em;
-}
-
-.inactive{
-    opacity: 0.5;
-}
-
-[id*='_prompt_container']{
-    gap: 0;
-}
-
-[id*='_prompt_container'] > div{
-    margin: -0.4em 0 0 0;
-}
-
-.gr-compact {
-    border: none;
-}
-
-.dark .gr-compact{
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-	margin-left: 0;
-}
-
-.gr-compact{
-    overflow: visible;
-}
-
-.gr-compact > *{
-}
-
-.gr-compact .gr-block, .gr-compact .gr-form{
-    border: none;
-    box-shadow: none;
-}
-
-.gr-compact .gr-box{
-    border-radius: .5rem !important;
-    border-width: 1px !important;
-}
-
-#mode_img2img > div > div{
-    gap: 0 !important;
-}
-
-[id*='img2img_copy_to_'] {
-    border: none;
-}
-
-[id*='img2img_copy_to_'] > button {
-}
-
-[id*='img2img_label_copy_to_'] {
-    font-size: 1.0em;
-    font-weight: bold;
-    text-align: center;
-    line-height: 2.4em;
-}
+/* extra networks UI */
 
 .extra-networks > div > [id *= '_extra_']{
     margin: 0.3em;
@@ -1025,7 +757,3 @@ footer {
 .extra-network-cards .card ul a:hover{
     color: red;
 }
-
-[id*='_prompt_container'] > div {
-	margin: 0!important;
-}
-- 
cgit v1.2.3