add ui ordering

javascript/.eslintrc.json

@@ -15,6 +15,7 @@
       "camelcase":"off",
       "no-unused-vars":"off",
       "no-plusplus":"off",
-      "no-param-reassign":"off"
+      "no-param-reassign":"off",
+      "no-restricted-syntax":"off"
   }
 }

javascript/style.css

@@ -623,3 +623,5 @@ footer {
 .extra-network-cards .card ul a{ cursor: pointer; }
 .extra-network-cards .card ul a:hover{ color: red; }
 .theme-preview { display: none; position: fixed; border: 4px solid var(--neutral-600); box-shadow: 2px 2px 2px 2px var(--neutral-700); top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 75vw; z-index: 999; }
+
+#scripts_alwayson_txt2img, scripts_alwayson_img2img { display: grid }

javascript/ui.js

@@ -343,9 +343,29 @@ function create_theme_element() {
 }
 
 function sort_ui_elements() {
-  const tabs = gradioApp().getElementById('tabs');
-  const scripts = gradioApp().getElementById('scripts_alwayson');
-  console.log('HERE', opts, tabs, scripts);
+  // sort top-level tabs
+  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;
+  }
+  // sort always-on scripts
+  const find = (el, ordered) => {
+    for (const i in ordered) {
+      if (el.innerText.toLowerCase().startsWith(ordered[i])) return i;
+    }
+    return 99;
+  };
+
+  tabsOrder = opts.ui_scripts_reorder?.split(',').map((el) => el.trim().toLowerCase()) || [];
+
+  const scriptsTxt = gradioApp().getElementById('scripts_alwayson_txt2img').children;
+  for (const el of Array.from(scriptsTxt)) el.style.order = find(el, tabsOrder);
+
+  const scriptsImg = gradioApp().getElementById('scripts_alwayson_img2img');
+  for (const el of Array.from(scriptsImg)) el.style.order = find(el, tabsOrder);
 }
 
 function preview_theme() {

modules/scripts.py

@@ -256,6 +256,7 @@ class ScriptRunner:
         self.infotext_fields = []
         self.paste_field_names = []
         self.script_load_ctr = 0
+        self.is_img2img = False
 
     def initialize_scripts(self, is_img2img):
         from modules import scripts_auto_postprocessing
@@ -267,6 +268,7 @@ class ScriptRunner:
         self.infotext_fields.clear()
         self.paste_field_names.clear()
         self.script_load_ctr = 0
+        self.is_img2img = is_img2img
 
         self.scripts.clear()
         self.alwayson_scripts.clear()
@@ -308,10 +310,9 @@ class ScriptRunner:
             inputs_alwayson += [script.alwayson for _ in controls]
             script.args_to = len(inputs)
 
-        with gr.Group(elem_id='scripts_alwayson'):
+        with gr.Group(elem_id='scripts_alwayson_img2img' if self.is_img2img else 'scripts_alwayson_txt2img'):
             for script in self.alwayson_scripts:
                 elem_id = f'script_{"txt2img" if script.is_txt2img else "img2img"}_{script.title().lower().replace(" ", "_")}'
-                print(elem_id)
                 with gr.Group(elem_id=elem_id) as group:
                     create_script_ui(script, inputs, inputs_alwayson)
                 script.group = group

modules/scripts_postprocessing.py

@@ -149,4 +149,3 @@ class ScriptPostprocessingRunner:
     def image_changed(self):
         for script in self.scripts_in_preferred_order():
             script.image_changed()
-

modules/shared.py

@@ -242,7 +242,7 @@ options_templates.update(options_section(('sd', "Stable Diffusion"), {
     "enable_quantization": OptionInfo(True, "Enable quantization in K samplers for sharper and cleaner results"),
     "comma_padding_backtrack": OptionInfo(20, "Increase coherency by padding from the last comma within n tokens when using more than 75 tokens", gr.Slider, {"minimum": 0, "maximum": 74, "step": 1 }),
     "CLIP_stop_at_last_layers": OptionInfo(1, "Clip skip", gr.Slider, {"minimum": 1, "maximum": 8, "step": 1, "visible": False}),
-    "upcast_attn": OptionInfo(False, "Upcast cross attention layer to float32"),
+    "upcast_attn": OptionInfo(False, "Upcast cross attention layer to FP32"),
     "cross_attention_optimization": OptionInfo("Sub-quadratic" if is_device_dml else "Scaled-Dot-Product", "Cross-attention optimization method", gr.Radio, lambda: {"choices": shared_items.list_crossattention() }),
     "cross_attention_options": OptionInfo([], "Cross-attention advanced options", gr.CheckboxGroup, lambda: {"choices": ['xFormers enable flash Attention', 'SDP disable memory attention']}),
     "sub_quad_q_chunk_size": OptionInfo(512, "Sub-quadratic cross-attention query chunk size for the  layer optimization to use", gr.Slider, {"minimum": 16, "maximum": 8192, "step": 8}),
@@ -405,6 +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_reorder": OptionInfo(", ".join(ui_reorder_categories), "txt2img/img2img UI item order"),
     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"),
 }))

modules/ui.py

@@ -890,7 +890,6 @@ def create_ui():
     with gr.Blocks(analytics_enabled=False) as train_interface:
         with gr.Column(elem_id='ti_train_container'):
             with gr.Tabs(elem_id="train_tabs"):
-
                 with gr.Tab(label="Merge models") as modelmerger_interface:
                     with gr.Row().style(equal_height=False):
                         with gr.Column(variant='compact'):
@@ -1406,10 +1405,10 @@ def create_ui():
     interfaces = [
         (txt2img_interface, "From Text", "txt2img"),
         (img2img_interface, "From Image", "img2img"),
-        (extras_interface, "Process Image", "extras"),
+        (extras_interface, "Process Image", "process"),
         # (pnginfo_interface, "Image Info", "pnginfo"),
         # (modelmerger_interface, "Checkpoint Merger", "modelmerger"),
-        (train_interface, "Train", "ti"),
+        (train_interface, "Train", "train"),
     ]
 
     interfaces += script_callbacks.ui_tabs_callback()