fix tab ordering

javascript/ui.js

@@ -1,6 +1,7 @@
 /* global gradioApp */
 
 window.opts = {};
+let tabSelected = '';
 
 function set_theme(theme) {
   const gradioURL = window.location.href;
@@ -192,6 +193,7 @@ function recalculate_prompts_inpaint(...args) {
 }
 
 onUiUpdate(() => {
+  sort_ui_elements();
   if (Object.keys(opts).length !== 0) return;
   const json_elem = gradioApp().getElementById('settings_json');
   if (!json_elem) return;
@@ -226,7 +228,6 @@ onUiUpdate(() => {
     localTextarea.addEventListener('input', promptTokecountUpdateFuncs[id]);
   }
 
-  sort_ui_elements();
   registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
   registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
   registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
@@ -344,12 +345,15 @@ function create_theme_element() {
 
 function sort_ui_elements() {
   // sort top-level tabs
+  const currSelected = gradioApp()?.querySelector('.tab-nav > .selected')?.innerText;
+  if (currSelected === tabSelected || !opts.ui_tab_reorder) return;
+  tabSelected = currSelected;
   const tabs = gradioApp().getElementById('tabs')?.children[0];
   if (!tabs) return;
   let tabsOrder = opts.ui_tab_reorder?.split(',').map((el) => el.trim().toLowerCase()) || [];
   for (const el of Array.from(tabs.children)) {
     const elIndex = tabsOrder.indexOf(el.innerText.toLowerCase());
-    el.style.order = elIndex > -1 ? elIndex : 99;
+    if (elIndex > -1) el.style.order = elIndex - 50; // default is 0 so setting to negative values
   }
   // sort always-on scripts
   const find = (el, ordered) => {

modules/shared.py

@@ -405,8 +405,8 @@ options_templates.update(options_section(('ui', "User interface"), {
     "keyedit_delimiters": OptionInfo(".,\/!?%^*;:{}=`~()", "Ctrl+up/down word delimiters"), # pylint: disable=anomalous-backslash-in-string
     "quicksettings": OptionInfo("sd_model_checkpoint", "Quicksettings list"),
     "hidden_tabs": OptionInfo([], "Hidden UI tabs", ui_components.DropdownMulti, lambda: {"choices": [x for x in tab_names]}),
-    "ui_tab_reorder": OptionInfo("", "UI tabs order"),
-    "ui_scripts_reorder": OptionInfo("", "UI scripts order"),
+    "ui_tab_reorder": OptionInfo("From Text, From Image, Process Image", "UI tabs order"),
+    "ui_scripts_reorder": OptionInfo("Enable Dynamic Thresholding, ControlNet", "UI scripts order"),
     "ui_reorder": OptionInfo(", ".join(ui_reorder_categories), "txt2img/img2img UI item order"),
     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"),
 }))

modules/ui.py

@@ -1417,10 +1417,8 @@ def create_ui():
         # (modelmerger_interface, "Checkpoint Merger", "modelmerger"),
         (train_interface, "Train", "train"),
     ]
-
     interfaces += script_callbacks.ui_tabs_callback()
     interfaces += [(settings_interface, "Settings", "settings")]
-
     extensions_interface = ui_extensions.create_ui()
     interfaces += [(extensions_interface, "Extensions", "extensions")]
 
@@ -1444,7 +1442,7 @@ def create_ui():
                     interface.render()
 
         if opts.notification_audio_enable and os.path.exists(os.path.join(script_path, opts.notification_audio_path)):
-            _audio_notification = gr.Audio(interactive=False, value=os.path.join(script_path, opts.notification_audio_path), elem_id="audio_notification", visible=False)
+            gr.Audio(interactive=False, value=os.path.join(script_path, opts.notification_audio_path), elem_id="audio_notification", visible=False)
 
         text_settings = gr.Textbox(elem_id="settings_json", value=lambda: opts.dumpjson(), visible=False)
         settings_submit.click(