b0121c83147577eb9727fe7ff6d755f7783afc96fc1f4bc321fe4afa32077ef2

javascript/token-counters.js

@@ -0,0 +1,83 @@
+let promptTokenCountDebounceTime = 800;
+let promptTokenCountTimeouts = {};
+var promptTokenCountUpdateFunctions = {};
+
+function update_txt2img_tokens(...args) {
+    // Called from Gradio
+    update_token_counter("txt2img_token_button");
+    if (args.length == 2) {
+        return args[0];
+    }
+    return args;
+}
+
+function update_img2img_tokens(...args) {
+    // Called from Gradio
+    update_token_counter("img2img_token_button");
+    if (args.length == 2) {
+        return args[0];
+    }
+    return args;
+}
+
+function update_token_counter(button_id) {
+    if (opts.disable_token_counters) {
+        return;
+    }
+    if (promptTokenCountTimeouts[button_id]) {
+        clearTimeout(promptTokenCountTimeouts[button_id]);
+    }
+    promptTokenCountTimeouts[button_id] = setTimeout(
+        () => gradioApp().getElementById(button_id)?.click(),
+        promptTokenCountDebounceTime,
+    );
+}
+
+
+function recalculatePromptTokens(name) {
+    promptTokenCountUpdateFunctions[name]?.();
+}
+
+function recalculate_prompts_txt2img() {
+    // Called from Gradio
+    recalculatePromptTokens('txt2img_prompt');
+    recalculatePromptTokens('txt2img_neg_prompt');
+    return Array.from(arguments);
+}
+
+function recalculate_prompts_img2img() {
+    // Called from Gradio
+    recalculatePromptTokens('img2img_prompt');
+    recalculatePromptTokens('img2img_neg_prompt');
+    return Array.from(arguments);
+}
+
+function setupTokenCounting(id, id_counter, id_button) {
+    var prompt = gradioApp().getElementById(id);
+    var counter = gradioApp().getElementById(id_counter);
+    var textarea = gradioApp().querySelector(`#${id} > label > textarea`);
+
+    if (opts.disable_token_counters) {
+        counter.style.display = "none";
+        return;
+    }
+
+    if (counter.parentElement == prompt.parentElement) {
+        return;
+    }
+
+    prompt.parentElement.insertBefore(counter, prompt);
+    prompt.parentElement.style.position = "relative";
+
+    promptTokenCountUpdateFunctions[id] = function() {
+        update_token_counter(id_button);
+    };
+    textarea.addEventListener("input", promptTokenCountUpdateFunctions[id]);
+}
+
+function setupTokenCounters() {
+    setupTokenCounting('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
+    setupTokenCounting('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
+    setupTokenCounting('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
+    setupTokenCounting('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
+}

javascript/ui.js

@@ -0,0 +1,2041 @@
+function set_theme(theme) {
+  /*
+  var gradioURL = window.location.href;
+  if (!gradioURL.includes('?__theme=')) {
+      window.location.replace(gradioURL + '?__theme=' + theme);
+  }
+  */
+}
+
+var selectedTabItemId = "tab_txt2img";
+
+function all_gallery_buttons() {
+  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);
+      }
+  });
+  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 visibleCurrentButton = null;
+  allCurrentButtons.forEach(function(elem) {
+      if (elem.parentElement.offsetParent) {
+          visibleCurrentButton = elem;
+      }
+  });
+  return visibleCurrentButton;
+}
+
+function selected_gallery_index() {
+  var buttons = all_gallery_buttons();
+  var button = selected_gallery_button();
+
+  var result = -1;
+  buttons.forEach(function(v, i) {
+      if (v == button) {
+          result = i;
+      }
+  });
+
+  return result;
+}
+
+function extract_image_from_gallery(gallery) {
+  if (gallery.length == 0) {
+      return [null];
+  }
+  if (gallery.length == 1) {
+      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;
+  }
+
+  return [gallery[index]];
+}
+
+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();
+
+  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();
+}
+function switch_to_img2img() {
+  switch_to_img2img_tab(0);
+  return Array.from(arguments);
+}
+
+function switch_to_sketch() {
+  switch_to_img2img_tab(1);
+  return Array.from(arguments);
+}
+
+function switch_to_inpaint() {
+  switch_to_img2img_tab(2);
+  return Array.from(arguments);
+}
+
+function switch_to_inpaint_sketch() {
+  switch_to_img2img_tab(3);
+  return Array.from(arguments);
+}
+
+function switch_to_extras() {
+  gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
+
+  return Array.from(arguments);
+}
+
+function get_tab_index(tabId) {
+  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 = Array.from(args);
+  res[0] = get_tab_index(tabId);
+  return res;
+}
+
+function get_img2img_tab_index() {
+  let res = Array.from(arguments);
+  res.splice(-2);
+  res[0] = get_tab_index('mode_img2img');
+  return res;
+}
+
+function create_submit_args(args) {
+  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;
+  }
+
+  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";
+}
+
+function showRestoreProgressButton(tabname, show) {
+  var button = gradioApp().getElementById(tabname + "_restore_progress");
+  if (!button) return;
+
+  button.style.display = show ? "flex" : "none";
+}
+
+
+function submit() {
+  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);
+      localStorage.removeItem("txt2img_task_id");
+      showRestoreProgressButton('txt2img', false);
+  });
+
+  var res = create_submit_args(arguments);
+
+  res[0] = id;
+
+  return res;
+}
+
+function submit_img2img() {
+  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);
+      localStorage.removeItem("img2img_task_id");
+      showRestoreProgressButton('img2img', false);
+  });
+
+  var res = create_submit_args(arguments);
+
+  res[0] = id;
+  res[1] = get_tab_index('mode_img2img');
+
+  return res;
+}
+
+function restoreProgressTxt2img() {
+  showRestoreProgressButton("txt2img", false);
+  var id = localStorage.getItem("txt2img_task_id");
+
+  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);
+  }
+
+  return id;
+}
+
+function restoreProgressImg2img() {
+  showRestoreProgressButton("img2img", false);
+
+  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);
+  }
+
+  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() {});
+
+  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:');
+  return [name_, prompt_text, negative_prompt_text];
+}
+
+function confirm_clear_prompt(prompt, negative_prompt) {
+  if (confirm("Delete prompt?")) {
+      prompt = "";
+      negative_prompt = "";
+  }
+
+  return [prompt, negative_prompt];
+}
+
+
+var promptTokecountUpdateFuncs = {};
+
+function recalculatePromptTokens(name) {
+  if (promptTokecountUpdateFuncs[name]) {
+      promptTokecountUpdateFuncs[name]();
+  }
+}
+
+function recalculate_prompts_txt2img() {
+  recalculatePromptTokens('txt2img_prompt');
+  recalculatePromptTokens('txt2img_neg_prompt');
+  return Array.from(arguments);
+}
+
+function recalculate_prompts_img2img() {
+  recalculatePromptTokens('img2img_prompt');
+  recalculatePromptTokens('img2img_neg_prompt');
+  return Array.from(arguments);
+}
+
+
+var opts = {};
+onUiUpdate(function() {
+  
+  if (Object.keys(opts).length != 0) return;
+
+  var json_elem = gradioApp().getElementById("settings_json");
+  if (json_elem == null) return;
+
+  var textarea = json_elem.querySelector("textarea");
+  var jsdata = textarea.value;
+  opts = JSON.parse(jsdata);
+  executeCallbacks(optionsChangedCallbacks);
+
+  Object.defineProperty(textarea, "value", {
+    set: function (newValue) {
+      var valueProp = Object.getOwnPropertyDescriptor(
+        HTMLTextAreaElement.prototype,
+        "value"
+      );
+      var oldValue = valueProp.get.call(textarea);
+      valueProp.set.call(textarea, newValue);
+
+      if (oldValue != newValue) {
+        opts = JSON.parse(textarea.value);
+      }
+
+      executeCallbacks(optionsChangedCallbacks);
+    },
+    get: function () {
+      var valueProp = Object.getOwnPropertyDescriptor(
+        HTMLTextAreaElement.prototype,
+        "value"
+      );
+      return valueProp.get.call(textarea);
+    },
+  });
+
+  //console.log(opts);
+
+  json_elem.parentElement.style.display = "none";
+
+  function registerTextarea(id, id_counter, id_button) {
+    var prompt = gradioApp().getElementById(id);
+    var counter = gradioApp().getElementById(id_counter);
+    var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
+
+    if (counter.parentElement == prompt.parentElement) {
+      return;
+    }
+
+    prompt.parentElement.insertBefore(counter, prompt);
+    counter.classList.add("token-counter");
+    prompt.parentElement.style.position = "relative";
+
+    promptTokecountUpdateFuncs[id] = function () {
+      update_token_counter(id_button);
+    };
+    textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
+  }
+
+  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"
+  );
+  registerTextarea(
+    "img2img_neg_prompt",
+    "img2img_negative_token_counter",
+    "img2img_negative_token_button"
+  );
+
+  var show_all_pages = gradioApp().getElementById("settings_show_all_pages");
+  var settings_tabs = gradioApp().querySelector("#settings div");
+  if (show_all_pages && settings_tabs) {
+    settings_tabs.appendChild(show_all_pages);
+    show_all_pages.onclick = function () {
+      gradioApp()
+        .querySelectorAll("#settings > div")
+        .forEach(function (elem) {
+          elem.style.display = "block";
+        });
+      gradioApp()
+        .querySelectorAll("#settings > div > div > div")
+        .forEach(function (elem) {
+          elem.style.maxHeight = "none";
+        });
+    };
+  }
+  /* 	
+	^ matches the start
+	* matches any position
+	$ matches the end
+	*/
+  /* anapnoe ui start	*/
+
+  /* auto grow textarea */
+  function autoGrowPromptTextarea() {
+    gradioApp()
+      .querySelectorAll('[id$="_prompt"] textarea')
+      .forEach(function (elem) {
+        elem.parentElement.click();
+      });
+  }
+
+  gradioApp()
+    .querySelectorAll(
+      '[id$="_prompt"] textarea, [id^="setting_"] textarea, textarea'
+    )
+    .forEach(function (elem) {
+      elem.style.boxSizing = "border-box";
+      var offset = elem.offsetHeight - elem.clientHeight;
+      elem.addEventListener("input", function (e) {
+        e.target.style.minHeight = "auto";
+        e.target.style.minHeight = e.target.scrollHeight + offset + 2 + "px";
+      });
+
+      elem.parentElement.addEventListener("click", function (e) {
+        let textarea = e.currentTarget.querySelector("textarea");
+        textarea.style.minHeight = "auto";
+        textarea.style.minHeight = textarea.scrollHeight + offset + 2 + "px";
+      });
+    });
+
+  /* resizable split view */
+  const resizeEvent = window.document.createEvent("UIEvents");
+  resizeEvent.initUIEvent("resize", true, false, window, 0);
+
+  gradioApp()
+    .querySelectorAll('[id $="2img_splitter"]')
+    .forEach((elem) => {
+      elem.addEventListener("mousedown", function (e) {
+        e.preventDefault();
+
+        let resizer = e.currentTarget;
+        let container = resizer.parentElement;
+
+        let flexDir = window
+          .getComputedStyle(container)
+          .getPropertyValue("flex-direction");
+
+        let leftSide = resizer.previousElementSibling;
+        let rightSide = resizer.nextElementSibling;
+
+        let dir = flexDir == "row-reverse" ? -1.0 : 1.0;
+
+        let x = e.clientX;
+        let y = e.clientY;
+        let leftWidth = leftSide.getBoundingClientRect().width;
+
+        function mouseMoveHandler(e) {
+          resizer.style.cursor = "col-resize";
+          container.style.cursor = "col-resize";
+
+          const dx = (e.clientX - x) * dir;
+          const dy = (e.clientY - y) * dir;
+
+          const newLeftWidth =
+            ((leftWidth + dx) * 100) / container.getBoundingClientRect().width;
+          leftSide.style.flexBasis = `${newLeftWidth}%`;
+          leftSide.style.userSelect = "none";
+          leftSide.style.pointerEvents = "none";
+          rightSide.style.userSelect = "none";
+          rightSide.style.pointerEvents = "none";
+          //window.dispatchEvent(resizeEvent);
+        }
+
+        function mouseUpHandler() {
+          resizer.style.removeProperty("cursor");
+          container.style.removeProperty("cursor");
+          leftSide.style.removeProperty("user-select");
+          leftSide.style.removeProperty("pointer-events");
+          rightSide.style.removeProperty("user-select");
+          rightSide.style.removeProperty("pointer-events");
+          container.removeEventListener("mousemove", mouseMoveHandler);
+          container.removeEventListener("mouseup", mouseUpHandler);
+          //window.dispatchEvent(resizeEvent);
+        }
+
+        container.addEventListener("mousemove", mouseMoveHandler);
+        container.addEventListener("mouseup", mouseUpHandler);
+      });
+
+      let flex_reverse = false;
+      elem.addEventListener("dblclick", function (e) {
+        flex_reverse = !flex_reverse;
+        e.preventDefault();
+
+        let resizer = e.currentTarget;
+        let container = resizer.parentElement;
+        //let flexDir = window.getComputedStyle(container).getPropertyValue('flex-direction');
+
+        if (flex_reverse) {
+          container.style.flexDirection = "row-reverse";
+        } else {
+          container.style.flexDirection = "row";
+        }
+      });
+    });
+
+  // set this globally
+  //let selectedTabItemId = "tab_txt2img";
+  /* switch tab item from instance button, this is the only method that works i havent found a workaround yet */
+  const Observe = (sel, opt, cb) => {
+    const Obs = new MutationObserver((m) => [...m].forEach(cb));
+    gradioApp()
+      .querySelectorAll(sel)
+      .forEach((el) => Obs.observe(el, opt));
+  };
+  Observe(
+    "#tabs > div.tabitem",
+    {
+      attributesList: ["style"],
+      attributeOldValue: true,
+    },
+    (m) => {
+      if (m.target.style.display === "block") {
+        let idx = parseInt(m.target.getAttribute("tab-item"));
+        selectedTabItemId = m.target.id;
+        tabItemChanged(idx);
+      }
+    }
+  );
+
+  function tabItemChanged(idx) {
+    gradioApp()
+      .querySelectorAll(
+        "#tabs > div > button.selected, #nav_menu_header_tabs > button.selected"
+      )
+      .forEach(function (tab) {
+        tab.classList.remove("selected");
+      });
+
+    gradioApp()
+      .querySelectorAll(
+        "#tabs > div > button:nth-child(" +
+          (idx + 1) +
+          "), #nav_menu_header_tabs > button:nth-child(" +
+          (idx + 1) +
+          ")"
+      )
+      .forEach(function (tab) {
+        tab.classList.add("selected");
+      });
+    //gardio removes listeners and attributes from tab buttons we add them again here
+    gradioApp()
+      .querySelectorAll("#tabs > div > button")
+      .forEach(function (tab, index) {
+        tab.setAttribute("tab-id", index);
+        tab.removeEventListener("mouseup", navTabClicked);
+        tab.addEventListener("mouseup", navTabClicked);
+        if (tab.innerHTML.indexOf("Theme") != -1) tab.style.display = "none";
+      });
+
+    /* 		gradioApp().querySelectorAll('[id^="image_buttons_"] button').forEach(function (elem){
+			
+			if(elem.id == "txt2img_tab"){
+				elem.setAttribute("tab-id", 0);
+				elem.removeEventListener('click', navTabClicked);
+				elem.addEventListener('click', navTabClicked);
+			}else if(elem.id == "img2img_tab" || elem.id == "inpaint_tab"){
+				elem.setAttribute("tab-id", 1);
+				elem.removeEventListener('click', navTabClicked);
+				elem.addEventListener('click', navTabClicked);
+			}if(elem.id == "extras_tab"){
+				elem.setAttribute("tab-id", 2);
+				elem.removeEventListener('click', navTabClicked);
+				elem.addEventListener('click', navTabClicked);
+			}		
+		}) */
+
+    /* 		const pdiv = gradioApp().querySelector("#"+selectedTabItemId+" .progressDiv");
+		if(!pdiv && selectedTabItemId == "tab_txt2img"){			
+			showSubmitButtons('txt2img', true);
+		}else if(!pdiv && selectedTabItemId == "tab_img2img"){
+			showSubmitButtons('img2img', true);
+		} */
+
+    //window.onUiHeaderTabUpdate();
+    // also here the same issue
+    /*
+		gradioApp().querySelectorAll('[id^="image_buttons"] [id$="_tab"]').forEach(function (button, index){
+			if(button.id == ("img2img_tab" || "inpaint_tab") ){
+				button.setAttribute("tab-id", 1 );
+			}else if(button.id == "extras_tab"){
+				button.setAttribute("tab-id", 2 );
+			}
+			
+			button.removeEventListener('mouseup', navTabClicked);
+			button.addEventListener('mouseup', navTabClicked);	
+			
+			
+		})
+		*/
+
+    netMenuVisibility();
+  }
+
+  // menu
+  function disableScroll() {
+    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    window.scrollTo(scrollLeft, scrollTop);
+
+    window.onscroll = function () {
+      window.scrollTo(scrollLeft, scrollTop);
+    };
+  }
+
+  function enableScroll() {
+    window.onscroll = function () {};
+  }
+
+  function getPos(el) {
+    let rect = el.getBoundingClientRect();
+    return { x: rect.left, y: rect.top };
+  }
+
+  function toggleMenu(isopen, icon, panel, func) {
+    if (isopen) {
+      panel.classList.add("open");
+      icon.classList.add("fixed");
+      gradioApp().addEventListener("click", func);
+      disableScroll();
+    } else {
+      panel.classList.remove("open");
+      icon.classList.remove("fixed");
+      gradioApp().removeEventListener("click", func);
+      enableScroll();
+    }
+  }
+
+  // close aside views
+  function closeAsideViews(menu) {
+    if (quick_menu != menu && quick_menu_open) quick_menu.click();
+    if (net_menu != menu && net_menu_open) net_menu.click();
+    if (theme_menu != menu && theme_menu_open) theme_menu.click();
+  }
+
+  // if we change to other view other than 2img and if aside mode is selected close extra networks aside and hide the net menu icon
+  let net_container = gradioApp().querySelector("#txt2img_extra_networks_row");
+  let net_menu_open = false;
+  const net_menu = gradioApp().querySelector("#extra_networks_menu");
+  function netMenuVisibility() {
+    if (selectedTabItemId.indexOf("2img") != -1) {
+      net_menu.style.display = "block";
+      let nid = selectedTabItemId.split("_")[1];
+      net_container = gradioApp().querySelector(
+        "#" + nid + "_extra_networks_row"
+      );
+      if (net_container.classList.contains("aside")) {
+        net_menu.style.display = "block";
+        toggleMenu(net_menu_open, net_menu, net_container, null);
+      } else {
+        net_menu.style.display = "none";
+      }
+    } else {
+      net_menu.style.display = "none";
+    }
+  }
+
+  // mobile nav menu
+  const tabs_menu = gradioApp().querySelector("#tabs > div:first-child");
+  const nav_menu = gradioApp().querySelector("#nav_menu");
+  const header = gradioApp().querySelector("#header-top");
+  let menu_open = false;
+  const z_menu = nav_menu.cloneNode(true);
+  z_menu.id = "clone_nav_menu";
+  header.parentElement.append(z_menu);
+  function toggleNavMenu(e) {
+    e.stopPropagation();
+    menu_open = !menu_open;
+    toggleMenu(menu_open, nav_menu, tabs_menu, toggleNavMenu);
+  }
+  z_menu.addEventListener("click", toggleNavMenu);
+
+  // quicksettings nav menu
+  let quick_menu_open = false;
+  const quicksettings_overflow = gradioApp().querySelector(
+    "#quicksettings_overflow"
+  );
+  const quick_menu = gradioApp().querySelector("#quick_menu");
+  function toggleQuickMenu(e) {
+    closeAsideViews(quick_menu);
+    quick_menu_open = !quick_menu_open;
+    const withinBoundaries = e.composedPath().includes(quicksettings_overflow);
+    if (!quick_menu_open && withinBoundaries) {
+      quick_menu_open = true;
+    } else {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleMenu(
+        quick_menu_open,
+        quick_menu,
+        quicksettings_overflow,
+        toggleQuickMenu
+      );
+    }
+  }
+  quick_menu.addEventListener("click", toggleQuickMenu);
+
+  // extra networks nav menu
+  function clickedOutside(e) {
+    //console.log(e.target.getAttribute('data-testid'));
+    if (
+      e.target.getAttribute("data-testid") != "textbox" &&
+      e.target.getAttribute("data-testid")
+    ) {
+      if (net_menu_open && e.target.closest('[id$="2img_settings_scroll"]'))
+        net_menu.click();
+    }
+  }
+  function toggleNetMenu(e) {
+    closeAsideViews(net_menu);
+    net_menu_open = !net_menu_open;
+    e.preventDefault();
+    e.stopPropagation();
+    toggleMenu(net_menu_open, net_menu, net_container, clickedOutside);
+  }
+  net_menu.addEventListener("click", toggleNetMenu);
+  gradioApp()
+    .querySelectorAll('button[id*="2img_extra_networks"]')
+    .forEach((elem) => {
+      elem.addEventListener("click", toggleNetMenu);
+    });
+
+  // theme nav menu
+  let theme_container = gradioApp().querySelector("#tab_ui_theme");
+  let theme_menu_open = false;
+  const theme_menu = gradioApp().querySelector("#theme_menu");
+  function toggleThemeMenu(e) {
+    closeAsideViews(theme_menu);
+    theme_menu_open = !theme_menu_open;
+    e.preventDefault();
+    e.stopPropagation();
+    toggleMenu(theme_menu_open, theme_menu, theme_container, null);
+  }
+  theme_menu.addEventListener("click", toggleThemeMenu);
+
+  const theme_tab = gradioApp().querySelector("#tab_ui_theme");
+  function theme_aside(value) {
+    if (value) {
+      theme_tab.classList.add("aside");
+    } else {
+      theme_tab.classList.remove("aside");
+    }
+  }
+  if (theme_tab) theme_aside(true);
+
+  function generateOnRepeat(elem, isforever) {
+    if (elem.generateOnRepeatInterval != null)
+      clearInterval(elem.generateOnRepeatInterval);
+    if (isforever) {
+      const generate_button = elem.previousElementSibling;
+      elem.generateOnRepeatInterval = setInterval(function () {
+        if (window.getComputedStyle(generate_button).display !== "none") {
+          generate_button.click();
+        }
+      }, 500);
+    }
+  }
+
+  function toggleGenerateForever(e) {
+    e.target.classList.toggle("active");
+    if (e.target.className.indexOf("active") != -1) {
+      generateOnRepeat(e.target, true);
+    } else {
+      generateOnRepeat(e.target, false);
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  gradioApp()
+    .querySelectorAll('button[id*="2img_generate_forever"]')
+    .forEach((elem) => {
+      elem.addEventListener("click", toggleGenerateForever);
+    });
+
+  /*   let generateOnRepeat = function (genbuttonid, interruptbuttonid) {
+    let genbutton = gradioApp().querySelector(genbuttonid);
+    let interruptbutton = gradioApp().querySelector(interruptbuttonid);
+    if (!interruptbutton.offsetParent) {
+      genbutton.click();
+    }
+    clearInterval(window.generateOnRepeatInterval);
+    window.generateOnRepeatInterval = setInterval(function () {
+      if (!interruptbutton.offsetParent) {
+        genbutton.click();
+      }
+    }, 500);
+  };
+
+  appendContextMenuOption("#txt2img_generate", "Generate forever", function () {
+    generateOnRepeat("#txt2img_generate", "#txt2img_interrupt");
+  });
+  appendContextMenuOption("#img2img_generate", "Generate forever", function () {
+    generateOnRepeat("#img2img_generate", "#img2img_interrupt");
+  });
+
+  let cancelGenerateForever = function () {
+    clearInterval(window.generateOnRepeatInterval);
+  }; */
+
+  //
+  /*
+  function attachAccordionListeners(elem) {
+    elem.querySelectorAll(".gradio-accordion > div.wrap").forEach((elem) => {
+      elem.addEventListener("click", toggleAccordion);
+    });
+  }
+   function toggleAccordion(e) {
+    //e.preventDefault();
+    //e.stopPropagation();
+    //e.stopImmediatePropagation();
+    let accordion_content =
+      e.currentTarget.parentElement.querySelector(".gap.svelte-vt1mxs");
+
+    if (accordion_content) {
+      e.preventDefault();
+      e.stopPropagation();
+      let accordion_icon = e.currentTarget.parentElement.querySelector(
+        ".label-wrap > .icon"
+      );
+      if (accordion_content.className.indexOf("hidden") != -1) {
+        accordion_content.classList.remove("hidden");
+        accordion_icon.style.setProperty("transform", "rotate(0deg)");
+        e.currentTarget.classList.add("hide");
+      } else {
+        accordion_content.classList.add("hidden");
+        accordion_icon.style.setProperty("transform", "rotate(90deg)");
+        e.currentTarget.classList.remove("hide");
+      }
+    } else {
+      let accordion_btn =
+        e.currentTarget.parentElement.querySelector(".label-wrap");
+      e.currentTarget.classList.add("hide");
+      accordion_btn.click();
+      //maybe here we need to setInterval until the content is available
+      setTimeout(function () {
+        accordion_content = accordion_btn.parentElement;
+        //console.log(accordion_content);
+        attachAccordionListeners(accordion_content);
+      }, 1000);
+    }
+  }
+
+  attachAccordionListeners(gradioApp());
+  */
+  // additional ui styles
+  let styleobj = {};
+  const r = gradioApp();
+  const style = document.createElement("style");
+  style.id = "ui-styles";
+  r.appendChild(style);
+
+  function updateOpStyles() {
+    let ops_styles = "";
+    for (const key in styleobj) {
+      ops_styles += styleobj[key];
+    }
+    const ui_styles = gradioApp().getElementById("ui-styles");
+    ui_styles.innerHTML = ops_styles;
+    //console.log(ui_styles);
+  }
+
+  // generated image fit contain - scale
+  function imageGeneratedFitMethod(value) {
+    styleobj.ui_view_fit =
+      "[id$='2img_gallery'] div>img {object-fit:" + value + "!important;}";
+  }
+  gradioApp()
+    .querySelector("#setting_ui_output_image_fit")
+    .addEventListener("click", function (e) {
+      if (e.target && e.target.matches("input[type='radio']")) {
+        imageGeneratedFitMethod(e.target.value.toLowerCase());
+        updateOpStyles();
+      }
+    });
+  imageGeneratedFitMethod(opts.ui_output_image_fit.toLowerCase());
+
+  // livePreview fit contain - scale
+  function imagePreviewFitMethod(value) {
+    styleobj.ui_fit = ".livePreview img {object-fit:" + value + "!important;}";
+  }
+  gradioApp()
+    .querySelector("#setting_live_preview_image_fit")
+    .addEventListener("click", function (e) {
+      if (e.target && e.target.matches("input[type='radio']")) {
+        imagePreviewFitMethod(e.target.value.toLowerCase());
+        updateOpStyles();
+      }
+    });
+  imagePreviewFitMethod(opts.live_preview_image_fit.toLowerCase());
+
+  // viewports order left - right
+  function viewportOrder(value) {
+    styleobj.ui_views_order =
+      "[id$=_prompt_image] + div {flex-direction:" + value + ";}";
+  }
+  gradioApp()
+    .querySelector("#setting_ui_views_order")
+    .addEventListener("click", function (e) {
+      if (e.target && e.target.matches("input[type='radio']")) {
+        viewportOrder(e.target.value.toLowerCase());
+        updateOpStyles();
+      }
+    });
+  viewportOrder(opts.ui_views_order.toLowerCase());
+
+  // sd max resolution output
+  function sdMaxOutputResolution(value) {
+    gradioApp()
+      .querySelectorAll('[id$="2img_width"] input,[id$="2img_height"] input')
+      .forEach((elem) => {
+        elem.max = value;
+      });
+  }
+  gradioApp()
+    .querySelector("#setting_sd_max_resolution")
+    .addEventListener("input", function (e) {
+      let intvalue = parseInt(e.target.value);
+      intvalue = Math.min(Math.max(intvalue, 512), 16384);
+      sdMaxOutputResolution(intvalue);
+    });
+  sdMaxOutputResolution(opts.sd_max_resolution);
+
+  function extra_networks_visibility(value) {
+    gradioApp()
+      .querySelectorAll('[id$="2img_extra_networks_row"]')
+      .forEach((elem) => {
+        if (value) {
+          elem.classList.remove("!hidden");
+        } else {
+          elem.classList.add("!hidden");
+        }
+      });
+  }
+  gradioApp()
+    .querySelector("#setting_extra_networks_default_visibility input")
+    .addEventListener("click", function (e) {
+      extra_networks_visibility(e.target.checked);
+    });
+  extra_networks_visibility(opts.extra_networks_default_visibility);
+
+  function extra_networks_card_size(value) {
+    styleobj.extra_networks_card_size =
+      ":root{--ae-extra-networks-card-size:" + value + ";}";
+  }
+  gradioApp()
+    .querySelectorAll("#setting_extra_networks_cards_size input")
+    .forEach(function (elem) {
+      elem.addEventListener("input", function (e) {
+        extra_networks_card_size(e.target.value);
+        updateOpStyles();
+      });
+    });
+  extra_networks_card_size(opts.extra_networks_cards_size);
+
+  function extra_networks_cards_visible_rows(value) {
+    styleobj.extra_networks_cards_visible_rows =
+      ":root{--ae-extra-networks-visible-rows:" + value + ";}";
+  }
+  gradioApp()
+    .querySelectorAll("#setting_extra_networks_cards_visible_rows input")
+    .forEach(function (elem) {
+      elem.addEventListener("input", function (e) {
+        extra_networks_cards_visible_rows(e.target.value);
+        updateOpStyles();
+      });
+    });
+  extra_networks_cards_visible_rows(opts.extra_networks_cards_visible_rows);
+
+  function extra_networks_aside(value) {
+    gradioApp()
+      .querySelectorAll('[id$="2img_extra_networks_row"]')
+      .forEach((elem) => {
+        if (value) {
+          elem.classList.add("aside");
+        } else {
+          elem.classList.remove("aside");
+        }
+        netMenuVisibility();
+      });
+  }
+  gradioApp()
+    .querySelector("#setting_extra_networks_aside input")
+    .addEventListener("click", function (e) {
+      extra_networks_aside(e.target.checked);
+    });
+  extra_networks_aside(opts.extra_networks_aside);
+
+  // hidden - header ui tabs
+  let radio_hidden_html = "";
+  let radio_header_html = "";
+  let hiddentabs = {};
+  let headertabs = {};
+  const setting_ui_hidden_tabs = gradioApp().querySelector(
+    "#setting_ui_hidden_tabs textarea"
+  );
+  const setting_ui_header_tabs = gradioApp().querySelector(
+    "#setting_ui_header_tabs textarea"
+  );
+  const parent_header_tabs = gradioApp().querySelector("#nav_menu_header_tabs");
+  setting_ui_hidden_tabs.style.display = "none";
+  setting_ui_header_tabs.style.display = "none";
+
+  const maintabs = gradioApp().querySelectorAll(
+    "#tabs > div:first-child > button"
+  );
+  const tabitems = gradioApp().querySelectorAll("#tabs > div.tabitem");
+
+  function tabOpsSave(setting) {
+    updateInput(setting);
+    
+  }
+
+  function tabsHiddenChange() {
+    const keys = Object.keys(hiddentabs);
+    setting_ui_hidden_tabs.value = "";
+    keys.forEach((key, index) => {
+      //console.log(`${key}: ${hiddentabs[key]} ${index}`);
+      if (hiddentabs[key] == true) {
+        styleobj[key] =
+          "#tabs > div:first-child > button:nth-child(" +
+          (index + 1) +
+          "){display:none;}";
+        setting_ui_hidden_tabs.value += key + ",";
+      } else {
+        styleobj[key] =
+          "#tabs > div:first-child  > button:nth-child(" +
+          (index + 1) +
+          "){display:block;}";
+      }
+    });
+
+    tabOpsSave(setting_ui_hidden_tabs);
+    tabsHeaderChange();
+  }
+  function tabsHeaderChange() {
+    const keys = Object.keys(headertabs);
+    setting_ui_header_tabs.value = "";
+    keys.forEach((key, index) => {
+      //console.log(`${key}: ${hiddentabs[key]} ${index}`);
+      let nkey = key + "_hr";
+      if (headertabs[key] == true && hiddentabs[key] == false) {
+        styleobj[nkey] =
+          "#nav_menu_header_tabs > button:nth-child(" +
+          (index + 1) +
+          "){display:block;}";
+        setting_ui_header_tabs.value += key + ",";
+      } else {
+        styleobj[nkey] =
+          "#nav_menu_header_tabs > button:nth-child(" +
+          (index + 1) +
+          "){display:none;}";
+      }
+    });
+
+    tabOpsSave(setting_ui_header_tabs);
+  }
+
+  function navigate2TabItem(idx) {
+    gradioApp()
+      .querySelectorAll("#tabs > div.tabitem")
+      .forEach(function (tabitem, index) {
+        if (idx == index) {
+          tabitem.style.display = "block";
+        } else {
+          tabitem.style.display = "none";
+        }
+      });
+  }
+
+  function navTabClicked(e) {
+    const idx = parseInt(e.currentTarget.getAttribute("tab-id"));
+    navigate2TabItem(idx);
+  }
+
+  maintabs.forEach(function (elem, index) {
+    let tabvalue = elem.innerText.replaceAll(" ", "");
+    hiddentabs[tabvalue] = false;
+    headertabs[tabvalue] = false;
+    let checked_hidden = "";
+    let checked_header = "";
+    if (setting_ui_hidden_tabs.value.indexOf(tabvalue) != -1) {
+      hiddentabs[tabvalue] = true;
+      checked_hidden = "checked";
+    }
+    if (setting_ui_header_tabs.value.indexOf(tabvalue) != -1) {
+      headertabs[tabvalue] = true;
+      checked_header = "checked";
+    }
+    radio_hidden_html +=
+      '<label class="_' +
+      tabvalue.toLowerCase() +
+      ' svelte-1qxcj04"><input type="checkbox" name="uiha" class="svelte-1qxcj04" ' +
+      checked_hidden +
+      ' value="' +
+      elem.innerText +
+      '"><span class="ml-2 svelte-1qxcj04">' +
+      elem.innerText +
+      "</span></label>";
+
+    radio_header_html +=
+      '<label class="_' +
+      tabvalue.toLowerCase() +
+      ' svelte-1qxcj04"><input type="checkbox" name="uiha" class="svelte-1qxcj04" ' +
+      checked_header +
+      ' value="' +
+      elem.innerText +
+      '"><span class="ml-2 svelte-1qxcj04">' +
+      elem.innerText +
+      "</span></label>";
+
+    tabitems[index].setAttribute("tab-item", index);
+    elem.setAttribute("tab-id", index);
+
+    let clonetab = elem.cloneNode(true);
+    clonetab.id = tabvalue + "_clone";
+    parent_header_tabs.append(clonetab);
+    clonetab.addEventListener("click", navTabClicked);
+  });
+
+  let div = document.createElement("div");
+  div.id = "hidden_radio_tabs_container";
+  div.classList.add("flex", "flex-wrap", "gap-2", "wrap", "svelte-1qxcj04");
+  div.innerHTML = radio_hidden_html;
+  setting_ui_hidden_tabs.parentElement.appendChild(div);
+
+  div = document.createElement("div");
+  div.id = "header_radio_tabs_container";
+  div.classList.add("flex", "flex-wrap", "gap-2", "wrap", "svelte-1qxcj04");
+  div.innerHTML = radio_header_html;
+  setting_ui_header_tabs.parentElement.appendChild(div);
+
+  // hidden tabs
+  gradioApp()
+    .querySelector("#hidden_radio_tabs_container")
+    .addEventListener("click", function (e) {
+      if (e.target && e.target.matches("input[type='checkbox']")) {
+        let tabvalue = e.target.value.replaceAll(" ", "");
+        hiddentabs[tabvalue] = e.target.checked;
+        tabsHiddenChange();
+        updateOpStyles();
+      }
+    });
+  // header tabs
+  gradioApp()
+    .querySelector("#header_radio_tabs_container")
+    .addEventListener("click", function (e) {
+      if (e.target && e.target.matches("input[type='checkbox']")) {
+        let tabvalue = e.target.value.replaceAll(" ", "");
+        headertabs[tabvalue] = e.target.checked;
+        tabsHeaderChange();
+        updateOpStyles();
+      }
+    });
+
+  tabsHiddenChange();
+
+  gradioApp()
+    .querySelectorAll('[id^="image_buttons_"] button, #png_2img_results button')
+    .forEach(function (elem) {
+      //console.log(opts.send_seed);
+      if (elem.id == "txt2img_tab") {
+        elem.setAttribute("tab-id", 0);
+        elem.addEventListener("click", navTabClicked);
+      } else if (elem.id == "img2img_tab" || elem.id == "inpaint_tab") {
+        elem.setAttribute("tab-id", 1);
+        elem.addEventListener("click", navTabClicked);
+      }
+      if (elem.id == "extras_tab") {
+        elem.setAttribute("tab-id", 2);
+        elem.addEventListener("click", navTabClicked);
+      }
+    });
+
+  gradioApp()
+    .querySelectorAll('[id$="2img_extra_tabs"] .search')
+    .forEach(function (elem) {
+      elem.addEventListener("keyup", function (e) {
+        if (e.defaultPrevented) {
+          return; // Do nothing if event already handled
+        }
+        switch (e.code) {
+          case "Escape":
+            if (e.target.value == "") {
+              net_menu.click();
+            } else {
+              e.target.value = "";
+              updateInput(e.target);
+            }
+            break;
+        }
+      });
+    });
+
+  // add - remove quicksettings
+  const settings_submit = gradioApp().querySelector("#settings_submit");
+  const quick_parent = gradioApp().querySelector(
+    "#quicksettings_overflow_container"
+  );
+  const setting_quicksettings = gradioApp().querySelector(
+    "#setting_quicksettings textarea"
+  );
+  function saveQuickSettings() {
+    updateInput(setting_quicksettings);
+    const cEvent = new Event("click"); //submit
+    Object.defineProperty(cEvent, "target", { value: settings_submit });
+    settings_submit.dispatchEvent(cEvent);
+    console.log(setting_quicksettings.value);
+  }
+
+  /* 	
+	function addModelCheckpoint(){
+		if(setting_quicksettings.value.indexOf("sd_model_checkpoint") === -1){
+			setting_quicksettings.value += ",sd_model_checkpoint";
+		}
+		saveQuickSettings();
+	} 
+	*/
+
+  function add2quickSettings(id, section, checked) {
+    let field_settings = setting_quicksettings.value.replace(" ", "");
+    if (checked) {
+      field_settings += "," + id;
+      let setting_row = gradioApp().querySelector("#row_setting_" + id);
+      quick_parent.append(setting_row);
+      setting_row.classList.add("warning");
+    } else {
+      field_settings = field_settings.replaceAll(id, ",");
+      const setting_parent = gradioApp().querySelector(
+        "#" + section + "_settings_2img_settings"
+      );
+      let quick_row = gradioApp().querySelector("#row_setting_" + id);
+      setting_parent.append(quick_row);
+      quick_row.classList.remove("warning");
+    }
+    field_settings = field_settings.replace(/,{2,}/g, ",");
+    setting_quicksettings.value = field_settings;
+    //addModelCheckpoint();
+    saveQuickSettings();
+    //console.log(section + " - " + id + " - " + checked);
+  }
+  gradioApp()
+    .querySelectorAll('[id*="add2quick_"]')
+    .forEach(function (elem) {
+      let trg = elem.id.split("_add2quick_setting_");
+      let sid = trg[0];
+      let tid = trg[1];
+      let elem_input = gradioApp().querySelector("#" + elem.id + " input");
+      if (elem_input) {
+        elem_input.addEventListener("click", function (e) {
+          add2quickSettings(tid, sid, e.target.checked);
+        });
+      }
+    });
+  //addModelCheckpoint();
+
+  // input release component dispatcher
+  let cached_clone_range;
+  let cached_clone_num;
+  let active_clone_input = [];
+  let focus_input;
+
+  function ui_input_release_component(elem) {
+    //console.log("ok");
+    if (active_clone_input.length > 0) return;
+
+    //img2img_width
+    let parent = elem.parentElement;
+    let comp_parent = parent.parentElement.parentElement;
+
+    if (
+      comp_parent.id == "img2img_width" ||
+      comp_parent.id == "img2img_height" ||
+      comp_parent.id == "img2img_scale" ||
+      comp_parent.id.indexOf("--ae-") != -1 ||
+      comp_parent.id.indexOf("theme") != -1 ||
+      comp_parent.className.indexOf("posex") != -1
+    )
+      return;
+
+    let clone_num = elem.cloneNode();
+    active_clone_input.push(clone_num);
+
+    let label = parent.querySelector("label");
+
+    clone_num.id = "num_clone";
+    clone_num.value = elem.value;
+    parent.append(clone_num);
+    elem.classList.add("hidden");
+
+    clone_num.addEventListener("change", function (e) {
+      elem.value = clone_num.value;
+      updateInput(elem);
+    });
+
+    clone_num.addEventListener("focus", function (e) {
+      focus_input = clone_num;
+    });
+
+    cached_clone_num = clone_num;
+    cached_clone_range = false;
+
+    if (label) {
+      let comp_range = comp_parent.querySelector("input[type='range']");
+      let clone_range = comp_range.cloneNode();
+      active_clone_input.push(clone_range);
+
+      clone_range.id = comp_range.id + "_clone";
+      clone_range.value = comp_range.value;
+      comp_range.parentElement.append(clone_range);
+      comp_range.classList.add("hidden");
+
+      clone_range.addEventListener("input", function (e) {
+        clone_num.value = e.target.value;
+      });
+      clone_range.addEventListener("change", function (e) {
+        elem.value = clone_range.value;
+        updateInput(elem);
+      });
+      clone_num.addEventListener("input", function (e) {
+        clone_range.value = e.target.value;
+      });
+
+      cached_clone_range = clone_range;
+    }
+  }
+  /*   function ui_input_focus_handler(e) {
+    if (e.target != focus_input) {
+      focus_input = false;
+      ui_input_release_handler(e);
+    }
+  } */
+
+  function ui_input_release_handler(e) {
+    const len = active_clone_input.length;
+    if (focus_input) {
+      return;
+    }
+    if (len > 0) {
+      if (e.target.id.indexOf("_clone") == -1) {
+        for (var i = len - 1; i >= 0; i--) {
+          let relem = active_clone_input[i];
+          relem.previousElementSibling.classList.remove("hidden");
+          relem.remove();
+          active_clone_input.pop();
+        }
+      }
+    }
+
+    let elem_type = e.target.tagName;
+    if (elem_type == "INPUT") {
+      let elem = e.target;
+      if (elem.type == "number") {
+        ui_input_release_component(elem);
+      } else if (elem.type == "range") {
+        elem = e.target.parentElement.querySelector("input[type='number']");
+        if (elem) {
+          ui_input_release_component(elem);
+        }
+      }
+    }
+  }
+  let timeoutId;
+
+  function ui_input_touchmove_handler(e) {
+    if (cached_clone_range && cached_clone_num) {
+      if (e.touches) {
+        const rect = cached_clone_range.getBoundingClientRect();
+        const xoffset_min = rect.left + window.scrollX;
+        //const xoffset_max = (rect.right + window.scrollX);
+        //const yoffset_min = (rect.top + window.scrollY);
+        //const yoffset_max = (rect.bottom + window.scrollY);
+        //if(	e.touches[0].pageY > yoffset_min && e.touches[0].pageY < yoffset_max && e.touches[0].pageX > xoffset_min && e.touches[0].pageX < xoffset_max){
+        e.preventDefault();
+        const percent =
+          parseInt(((e.touches[0].pageX - xoffset_min) / rect.width) * 10000) /
+          10000;
+        cached_clone_range.value =
+          percent * (cached_clone_range.max - cached_clone_range.min) +
+          parseFloat(cached_clone_range.min);
+        cached_clone_num.value = cached_clone_range.value;
+        //}
+      }
+    }
+  }
+  function ui_input_touchend_handler(e) {
+    if (cached_clone_range && cached_clone_num) {
+      const elem = cached_clone_range.previousElementSibling;
+      elem.value = cached_clone_range.value;
+      updateInput(elem);
+    }
+  }
+
+  function slider_contextmenu(e) {
+    e.preventDefault();
+  }
+  function slider_touchend(e) {
+    if (timeoutId) clearTimeout(timeoutId);
+  }
+  function slider_touchmove(e) {
+    if (timeoutId) clearTimeout(timeoutId);
+  }
+  function slider_touchstart(e) {
+    const gcontainer = e.target;
+    //gcontainer.removeEventListener('contextmenu',  slider_contextmenu);
+    gcontainer.removeEventListener("touchend", slider_touchend);
+    gcontainer.removeEventListener("touchmove", slider_touchmove);
+    gcontainer.removeEventListener("touchend", ui_input_touchend_handler);
+    gcontainer.removeEventListener("touchmove", ui_input_touchmove_handler);
+
+    timeoutId = setTimeout(function () {
+      timeoutId = null;
+      focus_input = false;
+      e.stopPropagation();
+      ui_input_release_handler(e);
+      ui_input_touchmove_handler(e);
+      gcontainer.addEventListener("touchmove", ui_input_touchmove_handler, {
+        passive: false,
+      });
+      gcontainer.addEventListener("touchend", ui_input_touchend_handler);
+    }, 500);
+
+    //gcontainer.addEventListener('contextmenu',  slider_contextmenu);
+    gcontainer.addEventListener("touchend", slider_touchend);
+    gcontainer.addEventListener("touchmove", slider_touchmove, {
+      passive: false,
+    });
+  }
+
+  function ui_dispatch_input_release(value) {
+    const gcontainer = gradioApp().querySelector(".gradio-container");
+    if (value) {
+      gcontainer.addEventListener("mouseover", ui_input_release_handler);
+      gcontainer.addEventListener("touchstart", slider_touchstart, {
+        passive: false,
+      });
+    } else {
+      gcontainer.removeEventListener("mouseover", ui_input_release_handler);
+      gcontainer.removeEventListener("touchstart", slider_touchstart);
+      //gcontainer.removeEventListener('contextmenu',  slider_contextmenu);
+      gcontainer.removeEventListener("touchend", slider_touchend);
+      gcontainer.removeEventListener("touchmove", slider_touchmove);
+      gcontainer.removeEventListener("touchend", ui_input_touchend_handler);
+      gcontainer.removeEventListener("touchmove", ui_input_touchmove_handler);
+    }
+  }
+  gradioApp()
+    .querySelector("#setting_ui_dispatch_input_release input")
+    .addEventListener("click", function (e) {
+      ui_dispatch_input_release(e.target.checked);
+    });
+  ui_dispatch_input_release(opts.ui_dispatch_input_release);
+
+  // step ticks for performant input range
+  function ui_show_range_ticks(value, interactive) {
+    if (value) {
+      const range_selectors = "input[type='range']";
+      //const range_selectors = "[id$='_clone']:is(input[type='range'])";
+      gradioApp()
+        .querySelectorAll(range_selectors)
+        .forEach(function (elem) {
+          let spacing = (elem.step / (elem.max - elem.min)) * 100.0;
+          let tsp = "max(3px, calc(" + spacing + "% - 1px))";
+          let fsp = "max(4px, calc(" + spacing + "% + 0px))";
+          var style = elem.style;
+          style.setProperty(
+            "--ae-slider-bg-overlay",
+            "repeating-linear-gradient( 90deg, transparent, transparent " +
+              tsp +
+              ", var(--ae-input-border-color) " +
+              tsp +
+              ", var(--ae-input-border-color) " +
+              fsp +
+              " )"
+          );
+        });
+    } else if (interactive) {
+      gradioApp()
+        .querySelectorAll("input[type='range']")
+        .forEach(function (elem) {
+          var style = elem.style;
+          style.setProperty("--ae-slider-bg-overlay", "transparent");
+        });
+    }
+  }
+  gradioApp()
+    .querySelector("#setting_ui_show_range_ticks input")
+    .addEventListener("click", function (e) {
+      ui_show_range_ticks(e.target.checked, true);
+    });
+  ui_show_range_ticks(opts.ui_show_range_ticks);
+
+  const gradio_main = gradioApp().querySelector(".gradio-container > div.main");
+  function ui_no_slider_layout(value) {
+    if (value) {
+      gradio_main.classList.add("no-slider-layout");
+    } else {
+      gradio_main.classList.remove("no-slider-layout");
+    }
+  }
+  gradioApp()
+    .querySelector("#setting_ui_no_slider_layout input")
+    .addEventListener("click", function (e) {
+      ui_no_slider_layout(e.target.checked, true);
+    });
+  ui_no_slider_layout(opts.ui_no_slider_layout);
+
+  // draggable reordable quicksettings
+  const container = gradioApp().querySelector(
+    "#quicksettings_overflow_container"
+  );
+  let draggables;
+  let lastElemAfter;
+  let islastChild;
+  let timeout;
+
+  function preventBehavior(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
+  }
+  let sdCheckpointModels = [];
+  function getSdCheckpointModels() {
+    gradioApp()
+      .querySelectorAll("#txt2img_checkpoints_cards .card")
+      .forEach(function (elem, i) {
+        sdCheckpointModels[i] = elem.getAttribute("onclick").split('"')[1];
+      });
+  }
+  getSdCheckpointModels();
+
+  function remove_overrides() {
+    let checked_overrides = [];
+    gradioApp()
+      .querySelectorAll("#setting_ignore_overrides input")
+      .forEach(function (elem, i) {
+        if (elem.checked) {
+          checked_overrides[i] = elem.nextElementSibling.innerHTML;
+        }
+      });
+    //console.log(checked_overrides);
+    gradioApp()
+      .querySelectorAll("[id$='2img_override_settings'] .token")
+      .forEach(function (token) {
+        let token_arr = token.querySelector("span").innerHTML.split(":");
+        let token_name = token_arr[0];
+        let token_value = token_arr[1];
+        token_value = token_value.replaceAll(" ", "");
+
+        if (token_name.indexOf("Model hash") != -1) {
+          const info_label = gradioApp().querySelector(
+            "[id$='2img_override_settings'] label span"
+          );
+          info_label.innerHTML = "Override settings MDL: unknown";
+          for (let m = 0; m < sdCheckpointModels.length; m++) {
+            let m_str = sdCheckpointModels[m];
+            if (m_str.indexOf(token_value) != -1) {
+              info_label.innerHTML =
+                "Override settings <i>MDL: " + m_str.split("[")[0] + "</i>";
+              break;
+            }
+          }
+        }
+        if (checked_overrides.indexOf(token_name) != -1) {
+          token.querySelector(".token-remove").click();
+          gradioApp()
+            .querySelector(
+              "#" + selectedTabItemId + " [id$='2img_override_settings']"
+            )
+            .parentElement.classList.add("show");
+        } else {
+          // maybe we add them again, for now we can select and add the removed tokens manually from the drop down
+        }
+      });
+  }
+  gradioApp()
+    .querySelector("#setting_ignore_overrides")
+    .addEventListener("click", function (e) {
+      setTimeout(function () {
+        remove_overrides();
+      }, 100);
+    });
+
+  function update_input_fields(tab) {
+    /* 
+		let input_selectors = "#tab_"+ tab + " [id^='num_clone']:is(input[type='number'])";
+		gradioApp().querySelectorAll(input_selectors).forEach(function (elem){
+			let elem_source = elem.previousElementSibling;		
+			elem.value = elem_source.value;
+			updateInput(elem);	
+		}) 
+		*/
+    remove_overrides();
+    autoGrowPromptTextarea();
+  }
+
+  gradioApp()
+    .querySelectorAll(
+      "#tab_pnginfo #png_2img_results button, [id$='2img_actions_column'] #paste"
+    )
+    .forEach(function (elem) {
+      elem.addEventListener("click", function (e) {
+        let button_id;
+        if (e.target.id == "paste") {
+          button_id = e.target.nextElementSibling.id.split("_")[0];
+        } else {
+          button_id = e.target.id.split("_")[0];
+        }
+        setTimeout(function () {
+          update_input_fields(button_id);
+        }, 500);
+      });
+    });
+
+  const pnginfo = gradioApp().querySelector("#tab_pnginfo");
+  function forwardFromPngInfo() {
+    if (selectedTabItemId == "tab_txt2img") {
+      pnginfo.querySelector("#txt2img_tab").click();
+      //close generation info
+      gradioApp()
+        .querySelector(
+          "#txt2img_results > div:last-child > div.gradio-accordion > div.hide"
+        )
+        ?.click();
+
+      const img_src = pnginfo.querySelector("img");
+      const gallery_parent = gradioApp().querySelector(
+        "#txt2img_gallery_container"
+      );
+      const live_preview = gallery_parent.querySelector(".livePreview");
+      if (live_preview) {
+        live_preview.innerHTML =
+          '<img width="' +
+          img_src.width +
+          '" height="' +
+          img_src.height +
+          '" src="' +
+          img_src.src +
+          '">';
+      } else {
+        const div = document.createElement("div");
+        div.classList.add("livePreview", "dropPreview");
+        div.innerHTML =
+          '<img width="' +
+          img_src.width +
+          '" height="' +
+          img_src.height +
+          '" src="' +
+          img_src.src +
+          '">';
+        gallery_parent.prepend(div);
+      }
+    } else if (selectedTabItemId == "tab_img2img") {
+      pnginfo.querySelector("#img2img_tab").click();
+      //close generation info
+      gradioApp()
+        .querySelector(
+          "#img2img_results > div:last-child > div.gradio-accordion > div.hide"
+        )
+        ?.click();
+    }
+  }
+
+  function fetchPngInfoData(files) {
+    /* const oldFetch = window.fetch;
+			
+		window.fetch = async (input, options) => {			
+			const response = await oldFetch(input, options);
+			if( 'run/predict/' === input ) {			
+				if(response.ok){									
+					window.fetch = oldFetch;										
+				}
+			}
+			return response;
+		};  */
+
+    const fileInput = gradioApp().querySelector(
+      '#pnginfo_image input[type="file"]'
+    );
+    if (fileInput.files != files) {
+      fileInput.files = files;
+      fileInput.dispatchEvent(new Event("change"));
+    }
+
+    setTimeout(function () {
+      forwardFromPngInfo();
+    }, 500);
+  }
+
+  function drop2View(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    const files = e.dataTransfer.files;
+
+    if (!isValidImageList(files)) {
+      return;
+    }
+    const data_image = gradioApp().querySelector(
+      '#pnginfo_image [data-testid="image"]'
+    );
+    data_image.querySelector('[aria-label="Clear"]')?.click();
+    setTimeout(function () {
+      fetchPngInfoData(files);
+    }, 1000);
+  }
+
+  gradioApp()
+    .querySelectorAll('[id$="2img_results"]')
+    .forEach((elem) => {
+      elem.addEventListener("drop", drop2View);
+    });
+
+  // function that gets the element next of cursor/touch
+  function getElementAfter(container, y) {
+    return draggables.reduce(
+      (closest, child) => {
+        const box = child.getBoundingClientRect();
+        const offset = y - box.top - box.height / 2;
+        if (offset < 0 && offset > closest.offset) {
+          return { offset: offset, element: child };
+        } else {
+          return closest;
+        }
+      },
+      { offset: Number.NEGATIVE_INFINITY }
+    ).element;
+  }
+
+  function dragOrderChange(elementAfter, isComplete, delem) {
+    if (lastElemAfter !== elementAfter || islastChild) {
+      if (lastElemAfter != null) {
+        lastElemAfter.classList.remove("marker-top", "marker-bottom");
+      }
+
+      if (elementAfter == null) {
+        islastChild = true;
+        lastElemAfter.classList.add("marker-bottom");
+      } else {
+        islastChild = false;
+        elementAfter.classList.add("marker-top");
+        lastElemAfter = elementAfter;
+      }
+    }
+
+    if (isComplete) {
+      if (elementAfter == null) {
+        container.append(delem);
+      } else {
+        container.insertBefore(delem, elementAfter);
+      }
+
+      let order_settings = "";
+
+      gradioApp()
+        .querySelectorAll("#quicksettings_overflow_container > div")
+        .forEach(function (el) {
+          el.classList.remove("marker-top", "marker-bottom", "dragging");
+          order_settings += el.id.split("row_setting_")[1] + ",";
+        });
+      //console.log(order_settings);
+      const setting_quicksettings = gradioApp().querySelector(
+        "#setting_quicksettings textarea"
+      );
+      setting_quicksettings.value = order_settings;
+      updateInput(setting_quicksettings);
+
+      const cEvent = new Event("click"); //submit
+      Object.defineProperty(cEvent, "target", { value: settings_submit });
+      settings_submit.dispatchEvent(cEvent);
+
+      container.classList.remove("no-scroll");
+    }
+  }
+
+  function touchmove(e) {
+    let y = e.touches[0].clientY;
+    let elementAfter = getElementAfter(container, y);
+    dragOrderChange(elementAfter);
+  }
+  function touchstart(e) {
+    e.currentTarget.draggable = "false";
+    let target = e.currentTarget;
+    // touch should be hold for 1 second
+    timeout = setTimeout(function () {
+      target.classList.add("dragging");
+      container.classList.add("no-scroll");
+      target.addEventListener("touchmove", touchmove);
+      container.addEventListener("touchmove", preventBehavior, {
+        passive: false,
+      });
+    }, 1000);
+
+    target.addEventListener("touchend", touchend);
+    target.addEventListener("touchcancel", touchcancel);
+  }
+  function touchend(e) {
+    e.currentTarget.draggable = "true";
+    clearTimeout(timeout);
+    e.currentTarget.removeEventListener("touchmove", touchmove);
+    container.removeEventListener("touchmove", preventBehavior);
+    let y = e.changedTouches[0].clientY;
+    let elementAfter = getElementAfter(container, y);
+    dragOrderChange(elementAfter, true, e.currentTarget);
+  }
+  function touchcancel(e) {
+    e.currentTarget.draggable = "true";
+    clearTimeout(timeout);
+    e.currentTarget.classList.remove("dragging");
+    e.currentTarget.removeEventListener("touchmove", touchmove);
+    container.removeEventListener("touchmove", preventBehavior);
+  }
+
+  function dragstart(e) {
+    e.currentTarget.draggable = "false";
+    e.currentTarget.classList.add("dragging");
+  }
+  function dragend(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    e.currentTarget.draggable = "true";
+    let y = e.clientY;
+    let elementAfter = getElementAfter(container, y);
+    dragOrderChange(elementAfter, true, e.currentTarget);
+  }
+  function dragOver(e) {
+    e.preventDefault();
+    let y = e.clientY;
+    let elementAfter = getElementAfter(container, y);
+    dragOrderChange(elementAfter);
+  }
+
+  function actionQuickSettingsDraggable(checked) {
+    if (checked) {
+      draggables = Array.from(
+        gradioApp().querySelectorAll(
+          "#quicksettings_overflow_container > div:not(.dragging)"
+        )
+      );
+      gradioApp().addEventListener("drop", preventBehavior);
+    } else {
+      gradioApp().removeEventListener("drop", preventBehavior);
+    }
+
+    gradioApp()
+      .querySelectorAll("#quicksettings_overflow_container > div")
+      .forEach(function (elem) {
+        elem.draggable = checked;
+        if (checked) {
+          elem.addEventListener("touchstart", touchstart);
+          elem.addEventListener("dragstart", dragstart);
+          elem.addEventListener("dragend", dragend);
+          elem.addEventListener("dragover", dragOver);
+        } else {
+          elem.removeEventListener("touchstart", touchstart, false);
+          elem.removeEventListener("touchend", touchend, false);
+          elem.removeEventListener("touchcancel", touchcancel, false);
+          elem.removeEventListener("touchmove", touchmove, false);
+          elem.removeEventListener("dragstart", dragstart, false);
+          elem.removeEventListener("dragend", dragend, false);
+          elem.removeEventListener("dragover", dragOver, false);
+        }
+      });
+  }
+
+  gradioApp()
+    .querySelector("#quicksettings_draggable")
+    .addEventListener("click", function (e) {
+      if (e.target && e.target.matches("input[type='checkbox']")) {
+        actionQuickSettingsDraggable(e.target.checked);
+      }
+    });
+
+  updateOpStyles();
+
+  /* anapnoe ui end */
+});
+
+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);
+}
+
+
+
+function restart_reload() {
+  let bg_color = window
+    .getComputedStyle(gradioApp().querySelector("#header-top"))
+    .getPropertyValue("--ae-main-bg-color");
+  let primary_color = window
+    .getComputedStyle(gradioApp().querySelector(".icon-info"))
+    .getPropertyValue("--ae-primary-color");
+  let panel_color = window
+    .getComputedStyle(gradioApp().querySelector(".gradio-box"))
+    .getPropertyValue("--ae-panel-bg-color");
+
+  localStorage.setItem("bg_color", bg_color);
+  localStorage.setItem("primary_color", primary_color);
+  localStorage.setItem("panel_color", panel_color);
+
+  if (localStorage.hasOwnProperty("bg_color")) {
+    bg_color = localStorage.getItem("bg_color");
+    primary_color = localStorage.getItem("primary_color");
+    panel_color = localStorage.getItem("panel_color");
+  }
+
+  document.body.style.backgroundColor = bg_color;
+
+  let style = document.createElement("style");
+  style.type = "text/css";
+  style.innerHTML =
+    ".loader{position:absolute;top:50vh;left:50vw;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .circles{position:absolute;left:-5px;top:0;height:60px;width:180px} .circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:" +
+    panel_color +
+    "} .circles span.one{right:80px} .circles span.two{right:40px} .circles span.three{right:0px} .circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear} @-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} @keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} .pacman{position:absolute;left:0;top:0;height:60px;width:60px} .pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:" +
+    bg_color +
+    '} .pacman span{position:absolute;top:0;left:0;height:60px;width:60px} .pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:' +
+    primary_color +
+    "} .pacman .top::before{top:0;border-radius:60px 60px 0px 0px} .pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px} .pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px} .pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite} @-webkit-keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} @keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} .pacman .bottom{-webkit-animation:animbottom 0.5s infinite;animation:animbottom 0.5s infinite} @-webkit-keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}} @keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}";
+
+  document.getElementsByTagName("head")[0].appendChild(style);
+  document.body.innerHTML =
+    '<div class="loader"><div class="circles"><span class="one"></span><span class="two"></span><span class="three"></span></div><div class="pacman"><span class="top"></span><span class="bottom"></span><span class="left"></span><div class="eye"></div></div></div>';
+
+  var requestPing = function () {
+    requestGet(
+      "./internal/ping",
+      {},
+      function (data) {
+        location.reload();
+      },
+      function () {
+        setTimeout(requestPing, 500);
+      }
+    );
+  };
+
+  setTimeout(requestPing, 2000);
+
+  return [];
+}
+
+// Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits
+// will only visible on web page and not sent to python.
+function updateInput(target) {
+  const e = new Event("input", { bubbles: true });
+  Object.defineProperty(e, "target", { value: target });
+  target.dispatchEvent(e);
+  const eb = new Event("blur");
+  Object.defineProperty(eb, "target", { value: target });
+  target.dispatchEvent(eb);
+}
+
+document.addEventListener("readystatechange", function (e) {
+  document.body.style.display = "none";
+  if (localStorage.hasOwnProperty("bg_color")) {
+    document.getElementsByTagName("html")[0].style.backgroundColor =
+      localStorage.getItem("bg_color");
+    document.body.style.backgroundColor = localStorage.getItem("bg_color");
+  }
+});
+
+window.onload = function () {
+  document.getElementsByTagName("html")[0].style.backgroundColor =
+    localStorage.getItem("bg_color");
+  document.body.style.backgroundColor = localStorage.getItem("bg_color");
+  document.body.style.display = "none";
+  document.body.classList.add("dark");
+  setTimeout(function () {
+    document.body.style.display = "block";
+  }, 1000);
+};
+
+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 [];
+}

javascript/ui_settings_hints.js

@@ -0,0 +1,60 @@
+var settingsHintsSetup = false;
+
+onOptionsChanged(function() {
+    if (settingsHintsSetup) return;
+    settingsHintsSetup = true;
+
+    gradioApp().querySelectorAll('#settings [id^=setting_]').forEach(function(div) {
+        var name = div.id.substr(8);
+        var commentBefore = opts._comments_before[name];
+        var commentAfter = opts._comments_after[name];
+
+        if (!commentBefore && !commentAfter) return;
+
+        var span = null;
+        if (div.classList.contains('gradio-checkbox')) span = div.querySelector('label span');
+        else if (div.classList.contains('gradio-checkboxgroup')) span = div.querySelector('span').firstChild;
+        else if (div.classList.contains('gradio-radio')) span = div.querySelector('span').firstChild;
+        else span = div.querySelector('label span').firstChild;
+
+        if (!span) return;
+
+        if (commentBefore) {
+            var comment = document.createElement('DIV');
+            comment.className = 'settings-comment';
+            comment.innerHTML = commentBefore;
+            span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
+            span.parentElement.insertBefore(comment, span);
+            span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
+        }
+        if (commentAfter) {
+            comment = document.createElement('DIV');
+            comment.className = 'settings-comment';
+            comment.innerHTML = commentAfter;
+            span.parentElement.insertBefore(comment, span.nextSibling);
+            span.parentElement.insertBefore(document.createTextNode('\xa0'), span.nextSibling);
+        }
+    });
+});
+
+function settingsHintsShowQuicksettings() {
+    requestGet("./internal/quicksettings-hint", {}, function(data) {
+        var table = document.createElement('table');
+        table.className = 'popup-table';
+
+        data.forEach(function(obj) {
+            var tr = document.createElement('tr');
+            var td = document.createElement('td');
+            td.textContent = obj.name;
+            tr.appendChild(td);
+
+            td = document.createElement('td');
+            td.textContent = obj.label;
+            tr.appendChild(td);
+
+            table.appendChild(tr);
+        });
+
+        popup(table);
+    });
+}

launch.py

@@ -0,0 +1,41 @@
+from modules import launch_utils
+
+args = launch_utils.args
+python = launch_utils.python
+git = launch_utils.git
+index_url = launch_utils.index_url
+dir_repos = launch_utils.dir_repos
+
+commit_hash = launch_utils.commit_hash
+git_tag = launch_utils.git_tag
+
+run = launch_utils.run
+is_installed = launch_utils.is_installed
+repo_dir = launch_utils.repo_dir
+
+run_pip = launch_utils.run_pip
+check_run_python = launch_utils.check_run_python
+git_clone = launch_utils.git_clone
+git_pull_recursive = launch_utils.git_pull_recursive
+list_extensions = launch_utils.list_extensions
+run_extension_installer = launch_utils.run_extension_installer
+prepare_environment = launch_utils.prepare_environment
+configure_for_tests = launch_utils.configure_for_tests
+start = launch_utils.start
+
+
+def main():
+    launch_utils.startup_timer.record("initial startup")
+
+    with launch_utils.startup_timer.subcategory("prepare environment"):
+        if not args.skip_prepare_environment:
+            prepare_environment()
+
+    if args.test_server:
+        configure_for_tests()
+
+    start()
+
+
+if __name__ == "__main__":
+    main()

models/Stable-diffusion/3dredux.safetensors

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:40d4f9d626a992a41c6fd354d987bb74ef3667420d92068f2e75a267322d5766
+size 1965287410