Latest Update Upstream fixes

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")) {