Latest Update Upstream fixes

html/footer.html

@@ -47,7 +47,7 @@
 				<div class="top">					
 					<img src="./file=html/200w.webp" width="160" height="90" alt="thanks for your support">
 					<i></i>
-					<p style="color:var(--ae-primary-color);">If you like this project and you want to support it consider a small donation. Enjoy!</p>
+					<p style="color:var(--ae-primary-color);">Your donation can help fund the continued development of Stable Diffusion web UI/UX project. Enjoy!</p>
 				</div>
 			</div>			
 		</li>		

javascript/ui.js

@@ -1,35 +1,30 @@
-// various functions for interaction with ui.py not large enough to warrant putting them in separate files
 function set_theme(theme) {
-  /*     
-	gradioURL = window.location.href
-    if (!gradioURL.includes('?__theme=')) {
+  /*
+  var gradioURL = window.location.href;
+  if (!gradioURL.includes('?__theme=')) {
       window.location.replace(gradioURL + '?__theme=' + theme);
-    } 
-	*/
+  }
+  */
 }
 
 function all_gallery_buttons() {
-  var allGalleryButtons = gradioApp().querySelectorAll(
-    '[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small'
-  );
+  var allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
   var visibleGalleryButtons = [];
-  allGalleryButtons.forEach(function (elem) {
-    if (elem.parentElement.offsetParent) {
-      visibleGalleryButtons.push(elem);
-    }
+  allGalleryButtons.forEach(function(elem) {
+      if (elem.parentElement.offsetParent) {
+          visibleGalleryButtons.push(elem);
+      }
   });
   return visibleGalleryButtons;
 }
 
 function selected_gallery_button() {
-  var allCurrentButtons = gradioApp().querySelectorAll(
-    '[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected'
-  );
+  var allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected');
   var visibleCurrentButton = null;
-  allCurrentButtons.forEach(function (elem) {
-    if (elem.parentElement.offsetParent) {
-      visibleCurrentButton = elem;
-    }
+  allCurrentButtons.forEach(function(elem) {
+      if (elem.parentElement.offsetParent) {
+          visibleCurrentButton = elem;
+      }
   });
   return visibleCurrentButton;
 }
@@ -39,10 +34,10 @@ function selected_gallery_index() {
   var button = selected_gallery_button();
 
   var result = -1;
-  buttons.forEach(function (v, i) {
-    if (v == button) {
-      result = i;
-    }
+  buttons.forEach(function(v, i) {
+      if (v == button) {
+          result = i;
+      }
   });
 
   return result;
@@ -50,137 +45,101 @@ function selected_gallery_index() {
 
 function extract_image_from_gallery(gallery) {
   if (gallery.length == 0) {
-    return [null];
+      return [null];
   }
   if (gallery.length == 1) {
-    return [gallery[0]];
+      return [gallery[0]];
   }
 
   var index = selected_gallery_index();
 
   if (index < 0 || index >= gallery.length) {
-    // Use the first image in the gallery as the default
-    index = 0;
+      // Use the first image in the gallery as the default
+      index = 0;
   }
 
   return [gallery[index]];
 }
 
-function args_to_array(args) {
-  var res = [];
-  for (var i = 0; i < args.length; i++) {
-    res.push(args[i]);
-  }
-  return res;
-}
+window.args_to_array = Array.from; // Compatibility with e.g. extensions that may expect this to be around
 
 function switch_to_txt2img() {
-  gradioApp().querySelector("#tabs").querySelectorAll("button")[0].click();
+  gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
 
-  return args_to_array(arguments);
+  return Array.from(arguments);
 }
 
 function switch_to_img2img_tab(no) {
-  gradioApp().querySelector("#tabs").querySelectorAll("button")[1].click();
-  gradioApp()
-    .getElementById("mode_img2img")
-    .querySelectorAll("button")
-    [no].click();
+  gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
+  gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
 }
 function switch_to_img2img() {
   switch_to_img2img_tab(0);
-  return args_to_array(arguments);
+  return Array.from(arguments);
 }
 
 function switch_to_sketch() {
   switch_to_img2img_tab(1);
-  return args_to_array(arguments);
+  return Array.from(arguments);
 }
 
 function switch_to_inpaint() {
   switch_to_img2img_tab(2);
-  return args_to_array(arguments);
+  return Array.from(arguments);
 }
 
 function switch_to_inpaint_sketch() {
   switch_to_img2img_tab(3);
-  return args_to_array(arguments);
-}
-
-function switch_to_inpaint() {
-  gradioApp().querySelector("#tabs").querySelectorAll("button")[1].click();
-  gradioApp()
-    .getElementById("mode_img2img")
-    .querySelectorAll("button")[2]
-    .click();
-  return args_to_array(arguments);
+  return Array.from(arguments);
 }
 
 function switch_to_extras() {
-  gradioApp().querySelector("#tabs").querySelectorAll("button")[2].click();
+  gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
 
-  return args_to_array(arguments);
+  return Array.from(arguments);
 }
 
 function get_tab_index(tabId) {
-  var res = 0;
-
-  gradioApp()
-    .getElementById(tabId)
-    .querySelector("div")
-    .querySelectorAll("button")
-    .forEach(function (button, i) {
-      if (button.className.indexOf("selected") != -1) res = i;
-    });
-
-  return res;
+  let buttons = gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button');
+  for (let i = 0; i < buttons.length; i++) {
+      if (buttons[i].classList.contains('selected')) {
+          return i;
+      }
+  }
+  return 0;
 }
 
 function create_tab_index_args(tabId, args) {
-  var res = [];
-  for (var i = 0; i < args.length; i++) {
-    res.push(args[i]);
-  }
-
+  var res = Array.from(args);
   res[0] = get_tab_index(tabId);
-
   return res;
 }
 
 function get_img2img_tab_index() {
-  let res = args_to_array(arguments);
+  let res = Array.from(arguments);
   res.splice(-2);
-  res[0] = get_tab_index("mode_img2img");
+  res[0] = get_tab_index('mode_img2img');
   return res;
 }
 
 function create_submit_args(args) {
-  var res = [];
-  for (var i = 0; i < args.length; i++) {
-    res.push(args[i]);
-  }
+  var res = Array.from(args);
 
   // As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
   // This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
   // I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
   // If gradio at some point stops sending outputs, this may break something
   if (Array.isArray(res[res.length - 3])) {
-    res[res.length - 3] = null;
+      res[res.length - 3] = null;
   }
 
   return res;
 }
 
 function showSubmitButtons(tabname, show) {
-  gradioApp().getElementById(tabname + "_interrupt").style.display = show
-    ? "none"
-    : "flex";
-  gradioApp().getElementById(tabname + "_skip").style.display = show
-    ? "none"
-    : "flex";
-  gradioApp().getElementById(tabname + "_generate").style.display = !show
-    ? "none"
-    : "flex";
+  gradioApp().getElementById(tabname + "_interrupt").style.display = show ? "none" : "flex";
+  gradioApp().getElementById(tabname + "_skip").style.display = show ? "none" : "flex";
+  gradioApp().getElementById(tabname + "_generate").style.display = !show ? "none" : "flex";
 }
 
 function showRestoreProgressButton(tabname, show) {
@@ -191,22 +150,16 @@ function showRestoreProgressButton(tabname, show) {
 }
 
 function submit() {
-  rememberGallerySelection("txt2img_gallery");
-  showSubmitButtons("txt2img", false);
+  showSubmitButtons('txt2img', false);
 
   var id = randomId();
   localStorage.setItem("txt2img_task_id", id);
 
-  requestProgress(
-    id,
-    gradioApp().getElementById("txt2img_gallery_container"),
-    gradioApp().getElementById("txt2img_gallery"),
-    function () {
-      showSubmitButtons("txt2img", true);
+  requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+      showSubmitButtons('txt2img', true);
       localStorage.removeItem("txt2img_task_id");
-      showRestoreProgressButton("txt2img", false);
-    }
-  );
+      showRestoreProgressButton('txt2img', false);
+  });
 
   var res = create_submit_args(arguments);
 
@@ -216,27 +169,21 @@ function submit() {
 }
 
 function submit_img2img() {
-  rememberGallerySelection("img2img_gallery");
-  showSubmitButtons("img2img", false);
+  showSubmitButtons('img2img', false);
 
   var id = randomId();
   localStorage.setItem("img2img_task_id", id);
 
-  requestProgress(
-    id,
-    gradioApp().getElementById("img2img_gallery_container"),
-    gradioApp().getElementById("img2img_gallery"),
-    function () {
-      showSubmitButtons("img2img", true);
+  requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+      showSubmitButtons('img2img', true);
       localStorage.removeItem("img2img_task_id");
-      showRestoreProgressButton("img2img", false);
-    }
-  );
+      showRestoreProgressButton('img2img', false);
+  });
 
   var res = create_submit_args(arguments);
 
   res[0] = id;
-  res[1] = get_tab_index("mode_img2img");
+  res[1] = get_tab_index('mode_img2img');
 
   return res;
 }
@@ -248,16 +195,9 @@ function restoreProgressTxt2img() {
   id = localStorage.getItem("txt2img_task_id");
 
   if (id) {
-    requestProgress(
-      id,
-      gradioApp().getElementById("txt2img_gallery_container"),
-      gradioApp().getElementById("txt2img_gallery"),
-      function () {
-        showSubmitButtons("txt2img", true);
-      },
-      null,
-      0
-    );
+      requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+          showSubmitButtons('txt2img', true);
+      }, null, 0);
   }
 
   return id;
@@ -269,69 +209,169 @@ function restoreProgressImg2img() {
   var id = localStorage.getItem("img2img_task_id");
 
   if (id) {
-    requestProgress(
-      id,
-      gradioApp().getElementById("img2img_gallery_container"),
-      gradioApp().getElementById("img2img_gallery"),
-      function () {
-        showSubmitButtons("img2img", true);
-      },
-      null,
-      0
-    );
+      requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+          showSubmitButtons('img2img', true);
+      }, null, 0);
   }
 
   return id;
 }
 
+
+onUiLoaded(function() {
+  showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"));
+  showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"));
+});
+
+
 function modelmerger() {
   var id = randomId();
-  requestProgress(
-    id,
-    gradioApp().getElementById("modelmerger_results_panel"),
-    null,
-    function () {}
-  );
+  requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function() {});
 
   var res = create_submit_args(arguments);
   res[0] = id;
   return res;
 }
 
+
 function ask_for_style_name(_, prompt_text, negative_prompt_text) {
-  var name_ = prompt("Style name:");
+  var name_ = prompt('Style name:');
   return [name_, prompt_text, negative_prompt_text];
 }
 
 function confirm_clear_prompt(prompt, negative_prompt) {
   if (confirm("Delete prompt?")) {
-    prompt = "";
-    negative_prompt = "";
+      prompt = "";
+      negative_prompt = "";
   }
 
   return [prompt, negative_prompt];
 }
 
-promptTokecountUpdateFuncs = {};
+
+var promptTokecountUpdateFuncs = {};
 
 function recalculatePromptTokens(name) {
   if (promptTokecountUpdateFuncs[name]) {
-    promptTokecountUpdateFuncs[name]();
+      promptTokecountUpdateFuncs[name]();
   }
 }
 
 function recalculate_prompts_txt2img() {
-  recalculatePromptTokens("txt2img_prompt");
-  recalculatePromptTokens("txt2img_neg_prompt");
-  return args_to_array(arguments);
+  recalculatePromptTokens('txt2img_prompt');
+  recalculatePromptTokens('txt2img_neg_prompt');
+  return Array.from(arguments);
 }
 
 function recalculate_prompts_img2img() {
-  recalculatePromptTokens("img2img_prompt");
-  recalculatePromptTokens("img2img_neg_prompt");
-  return args_to_array(arguments);
+  recalculatePromptTokens('img2img_prompt');
+  recalculatePromptTokens('img2img_neg_prompt');
+  return Array.from(arguments);
 }
 
+
+onOptionsChanged(function() {
+  var elem = gradioApp().getElementById('sd_checkpoint_hash');
+  var sd_checkpoint_hash = opts.sd_checkpoint_hash || "";
+  var shorthash = sd_checkpoint_hash.substring(0, 10);
+
+  if (elem && elem.textContent != shorthash) {
+      elem.textContent = shorthash;
+      elem.title = sd_checkpoint_hash;
+      elem.href = "https://google.com/search?q=" + sd_checkpoint_hash;
+  }
+});
+
+let txt2img_textarea, img2img_textarea = undefined;
+let wait_time = 800;
+let token_timeouts = {};
+
+function update_txt2img_tokens(...args) {
+  update_token_counter("txt2img_token_button");
+  if (args.length == 2) {
+      return args[0];
+  }
+  return args;
+}
+
+function update_img2img_tokens(...args) {
+  update_token_counter(
+      "img2img_token_button"
+  );
+  if (args.length == 2) {
+      return args[0];
+  }
+  return args;
+}
+
+function update_token_counter(button_id) {
+  if (token_timeouts[button_id]) {
+      clearTimeout(token_timeouts[button_id]);
+  }
+  token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
+}
+
+var desiredCheckpointName = null;
+function selectCheckpoint(name) {
+  desiredCheckpointName = name;
+  gradioApp().getElementById('change_checkpoint').click();
+}
+
+function currentImg2imgSourceResolution(w, h, scaleBy) {
+  var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img');
+  return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
+}
+
+function updateImg2imgResizeToTextAfterChangingImage() {
+  // At the time this is called from gradio, the image has no yet been replaced.
+  // There may be a better solution, but this is simple and straightforward so I'm going with it.
+
+  setTimeout(function() {
+      gradioApp().getElementById('img2img_update_resize_to').click();
+  }, 500);
+
+  return [];
+
+}
+
+function setRandomSeed(elem_id) {
+  var input = gradioApp().querySelector("#" + elem_id + " input");
+  if (!input) return [];
+
+  input.value = "-1";
+  updateInput(input);
+  return [];
+}
+
+function switchWidthHeight(tabname) {
+  var width = gradioApp().querySelector("#" + tabname + "_width input[type=number]");
+  var height = gradioApp().querySelector("#" + tabname + "_height input[type=number]");
+  if (!width || !height) return [];
+
+  var tmp = width.value;
+  width.value = height.value;
+  height.value = tmp;
+
+  updateInput(width);
+  updateInput(height);
+  return [];
+}
+
+onUiUpdate(function() {	
+  const theme_menu = gradioApp().querySelector("#theme_menu");
+  function disabled_extensions(value) {   
+    if (value) {
+      theme_menu.classList.remove("hidden");
+    } else {
+      theme_menu.classList.add("hidden");
+    }
+  }
+  const theme_ext = gradioApp().querySelector('#extensions input[name="enable_sd_theme_editor"]');
+  if(theme_ext){
+    disabled_extensions(theme_ext.checked);
+  }
+}) 
+
 let selectedTabItemId = "tab_txt2img";
 let opts = {};
 
@@ -792,19 +832,6 @@ onUiLoaded(function () {
   }
   if (theme_tab) theme_aside(true);
 
-  function disabled_extensions(value) {
-    //console.log(value);
-    if (value) {
-      theme_menu.classList.remove("hidden");
-    } else {
-      theme_menu.classList.add("hidden");
-    }
-  }
-  const theme_ext = gradioApp().querySelector(
-    '#extensions input[name="enable_sd_theme_editor"]'
-  );
-  disabled_extensions(theme_ext.checked);
-
   function generateOnRepeat(elem, isforever) {
     if (elem.generateOnRepeatInterval != null)
       clearInterval(elem.generateOnRepeatInterval);
@@ -1948,30 +1975,7 @@ onOptionsChanged(function () {
   }
 });
 
-let txt2img_textarea,
-  img2img_textarea = undefined;
-let wait_time = 800;
-let token_timeouts = {};
 
-function update_txt2img_tokens(...args) {
-  update_token_counter("txt2img_token_button");
-  if (args.length == 2) return args[0];
-  return args;
-}
-
-function update_img2img_tokens(...args) {
-  update_token_counter("img2img_token_button");
-  if (args.length == 2) return args[0];
-  return args;
-}
-
-function update_token_counter(button_id) {
-  if (token_timeouts[button_id]) clearTimeout(token_timeouts[button_id]);
-  token_timeouts[button_id] = setTimeout(
-    () => gradioApp().getElementById(button_id)?.click(),
-    wait_time
-  );
-}
 
 function restart_reload() {
   let bg_color = window
@@ -2040,29 +2044,6 @@ function updateInput(target) {
   target.dispatchEvent(eb);
 }
 
-var desiredCheckpointName = null;
-function selectCheckpoint(name) {
-  desiredCheckpointName = name;
-  gradioApp().getElementById("change_checkpoint").click();
-}
-
-function currentImg2imgSourceResolution(_, _, scaleBy) {
-  var img = gradioApp().querySelector(
-    '#mode_img2img > div[style="display: block;"] img'
-  );
-  return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
-}
-
-function updateImg2imgResizeToTextAfterChangingImage() {
-  // At the time this is called from gradio, the image has no yet been replaced.
-  // There may be a better solution, but this is simple and straightforward so I'm going with it.
-  setTimeout(function () {
-    gradioApp().getElementById("img2img_update_resize_to").click();
-  }, 500);
-
-  return [];
-}
-
 document.addEventListener("readystatechange", function (e) {
   document.body.style.display = "none";
   if (localStorage.hasOwnProperty("bg_color")) {

modules/shared.py

@@ -497,9 +497,6 @@ options_templates.update(options_section(('ui', "User interface"), {
     "hires_fix_show_sampler": OptionInfo(False, "Hires fix: show hires sampler selection").needs_restart(),
     "hires_fix_show_prompts": OptionInfo(False, "Hires fix: show hires prompt and negative prompt").needs_restart(),
     "quicksettings": OptionInfo("sd_model_checkpoint", "Quicksettings"),
-    "ui_hidden_tabs": OptionInfo("", "Hidden Tabs"),
-    "ui_header_tabs": OptionInfo("", "Header Tabs"),
-    "ui_views_order": OptionInfo("row-reverse", "Interface order input/parameters | output/preview", gr.Radio, {"choices": ["row", "row-reverse"]}),
     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"),
     "ui_hidden_tabs": OptionInfo("", "Hidden Tabs"),
     "ui_header_tabs": OptionInfo("", "Header Tabs"),

modules/ui.py

@@ -79,9 +79,10 @@ switch_values_symbol = '\u2B80' # ⮀
 restore_progress_symbol = '\U0001F300' # 🌀
 detect_image_size_symbol = '\U0001F4D0'  # 📐
 
-
 interogate_bubble_symbol = '\U0001F5E8' # 🗨
 interogate_2bubble_symbol = '\U0001F5EA' # 🗪
+generate_forever_symbol = '\u267E' # ♾
+
 def plaintext_to_html(text):
     return ui_common.plaintext_to_html(text)
 
@@ -816,8 +817,8 @@ def create_ui():
                                 for i, tab in enumerate(img2img_tabs):
                                     tab.select(fn=lambda tabnum=i: tabnum, inputs=[], outputs=[img2img_selected_tab])
                                     
-                            #for category in ordered_ui_categories():    
-                            #    if category == "inpaint":  
+                            for category in ordered_ui_categories():    
+                                if category == "inpaint":  
                                     
                                     with gr.Column(elem_id="dim_controls", visible=True):
                                         with gr.Row():
@@ -1812,23 +1813,19 @@ def create_ui():
             gr.Row(elem_id="quick_menu")
 
         parameters_copypaste.connect_paste_params_buttons()
- 
+        # with gr.Tabs(elem_id="tabs") as tabs:
+        #     for interface, label, ifid in interfaces:
+        #         with gr.TabItem(label, id=ifid, elem_id=f"tab_{ifid}"):
+        #             interface.render()
+        
         with gr.Tabs(elem_id="tabs") as tabs:
-            
             tab_order = {k: i for i, k in enumerate(opts.ui_tab_order)}
             sorted_interfaces = sorted(interfaces, key=lambda x: tab_order.get(x[1], 9999))
 
             for interface, label, ifid in sorted_interfaces:
-                if label in shared.opts.hidden_tabs:
-                    continue
-                    
                 with gr.TabItem(label, id=ifid, elem_id=f"tab_{ifid}"):
                     interface.render()
 
-            for interface, _label, ifid in interfaces:
-                if ifid in ["extensions", "settings"]:
-                    continue
-
                 loadsave.add_block(interface, ifid)
 
             loadsave.add_component(f"webui/Tabs@{tabs.elem_id}", tabs)

modules/ui_extra_networks.py

@@ -166,8 +166,8 @@ class ExtraNetworksPage:
         if onclick is None:
             onclick = '"' + html.escape(f"""return cardClicked({json.dumps(tabname)}, {item["prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
 
-        height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
-        width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
+        #height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
+        #width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
         background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
 
         metadata_button = ""
@@ -195,8 +195,8 @@ class ExtraNetworksPage:
             return ""
 
         args = {
-            "background_image": background_image,
-            "style": f"'display: none; {height}{width}'",
+            #"background_image": background_image,
+            #"style": f"'display: none; {height}{width}'",
             "preview_image": html.escape(preview) if preview else './file=html/card-no-preview.png',
             "prompt": item.get("prompt", None),
             "tabname": json.dumps(tabname),
@@ -308,9 +308,9 @@ def create_ui(container, button, tabname):
             for page in ui.stored_extra_pages:
                 page_id = page.title.lower().replace(" ", "_")
                 with gr.Tab(page.title, id=page_id):
-                    elem_id = f"{tabname}_{page_id}_cards_html"
-                    page_elem = gr.HTML('Loading...', elem_id=elem_id)
-                    #page_elem = gr.HTML(page.create_html(ui.tabname))
+                    #elem_id = f"{tabname}_{page_id}_cards_html"
+                    #page_elem = gr.HTML('Loading...', elem_id=elem_id)
+                    page_elem = gr.HTML(page.create_html(ui.tabname))
                     ui.pages.append(page_elem)
 
         filter = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False)       

style.css

@@ -111,7 +111,7 @@ License: GNU General Public License
       (
         var(--ae-top-header-height) + var(--ae-footer-height) +
           var(--ae-accordion-header-height) + var(--ae-outside-gap-size) * 4 +
-          34px
+          36px
       )
   );
 }
@@ -1227,7 +1227,7 @@ button.secondary {
   text-align: center !important;
 }
 
-.gradio-container-3-29-0 .prose * {
+.gradio-container-3-31-0 .prose * {
   color: var(--ae-label-color);
 }
 
@@ -1242,34 +1242,34 @@ button.secondary {
 
 .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label,
 .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label,
-.gradio-container-3-29-0 [type="text"],
-.gradio-container-3-29-0 [type="email"],
-.gradio-container-3-29-0 [type="url"],
-.gradio-container-3-29-0 [type="password"],
-.gradio-container-3-29-0 [type="number"],
-.gradio-container-3-29-0 [type="date"],
-.gradio-container-3-29-0 [type="datetime-local"],
-.gradio-container-3-29-0 [type="month"],
-.gradio-container-3-29-0 [type="search"],
-.gradio-container-3-29-0 [type="tel"],
-.gradio-container-3-29-0 [type="time"],
-.gradio-container-3-29-0 [type="week"],
-.gradio-container-3-29-0 [multiple],
-.gradio-container-3-29-0 textarea,
-.gradio-container-3-29-0 select {
+.gradio-container-3-31-0 [type="text"],
+.gradio-container-3-31-0 [type="email"],
+.gradio-container-3-31-0 [type="url"],
+.gradio-container-3-31-0 [type="password"],
+.gradio-container-3-31-0 [type="number"],
+.gradio-container-3-31-0 [type="date"],
+.gradio-container-3-31-0 [type="datetime-local"],
+.gradio-container-3-31-0 [type="month"],
+.gradio-container-3-31-0 [type="search"],
+.gradio-container-3-31-0 [type="tel"],
+.gradio-container-3-31-0 [type="time"],
+.gradio-container-3-31-0 [type="week"],
+.gradio-container-3-31-0 [multiple],
+.gradio-container-3-31-0 textarea,
+.gradio-container-3-31-0 select {
   line-height: 1.5rem;
   padding: 4px 8px;
 }
 
-.gradio-container-3-29-0 [type="checkbox"],
-.gradio-container-3-29-0 [type="radio"] {
+.gradio-container-3-31-0 [type="checkbox"],
+.gradio-container-3-31-0 [type="radio"] {
   background-color: var(--ae-input-bg-color);
   border: 1px solid var(--ae-input-border-color);
   border-radius: var(--ae-panel-border-radius);
 }
 
-.gradio-container-3-29-0 [type="checkbox"]:checked,
-.gradio-container-3-29-0 [type="radio"]:checked {
+.gradio-container-3-31-0 [type="checkbox"]:checked,
+.gradio-container-3-31-0 [type="radio"]:checked {
   background-color: var(--ae-primary-color);
 }
 
@@ -1639,7 +1639,7 @@ span.ml-2 {
   padding: var(--ae-inside-padding-size) !important;
 }
 
-.gradio-container-3-29-0 .prose {
+.gradio-container-3-31-0 .prose {
   min-height: unset !important;
 }
 
@@ -1853,6 +1853,12 @@ button.tool.secondary:hover,
   padding: 0;
 }
 
+#img2img_dimensions_row{
+  min-width:unset !important;
+  max-width:34px;
+}
+
+[id$="2img_detect_image_size_btn"],
 [id$="2img_res_switch_btn"] {
   margin: -1px !important;
 }
@@ -2913,6 +2919,12 @@ label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 {
 /*************/
 /* settings  */
 /*************/
+#row_setting_quicksettings_list,
+#row_setting_gradio_theme,
+#row_setting_hidden_tabs
+{
+display:none !important;
+}
 pre {
   white-space: pre-wrap;
   /* css-3 */
@@ -2960,7 +2972,7 @@ pre {
   float: left;
   display: block;
   margin-left: 0;
-  width: 10em;
+  width: 12em;
 }
 
 #settings > div.tab-nav button {