1 files changed, 150 insertions, 21 deletions

diff --git a/javascript/ui.js b/javascript/ui.js
index b7a8268a..6d4119d7 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -1,15 +1,37 @@
 // 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
+    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 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 = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery] .gallery-item')
-    var button = gradioApp().querySelector('[style="display: block;"].tabitem div[id$=_gallery] .gallery-item.\\!ring-2')
+    var buttons = all_gallery_buttons();
+    var button = selected_gallery_button();
 
     var result = -1
     buttons.forEach(function(v, i){ if(v==button) { result = i } })
@@ -18,21 +40,25 @@ function selected_gallery_index(){
 }
 
 function extract_image_from_gallery(gallery){
-    if(gallery.length == 1){
-        return [gallery[0]]
+    if (gallery.length == 0){
+        return [null];
+    }
+    if (gallery.length == 1){
+        return [gallery[0]];
     }
 
-    index = selected_gallery_index()
+    var index = selected_gallery_index()
 
     if (index < 0 || index >= gallery.length){
-        return [null]
+        // Use the first image in the gallery as the default
+        index = 0;
     }
 
     return [gallery[index]];
 }
 
 function args_to_array(args){
-    res = []
+    var res = []
     for(var i=0;i<args.length;i++){
         res.push(args[i])
     }
@@ -86,7 +112,7 @@ function get_tab_index(tabId){
     var res = 0
 
     gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){
-        if(button.className.indexOf('bg-white') != -1)
+        if(button.className.indexOf('selected') != -1)
             res = i
     })
 
@@ -112,7 +138,7 @@ function get_img2img_tab_index() {
 }
 
 function create_submit_args(args){
-    res = []
+    var res = []
     for(var i=0;i<args.length;i++){
         res.push(args[i])
     }
@@ -133,14 +159,24 @@ function showSubmitButtons(tabname, show){
     gradioApp().getElementById(tabname+'_skip').style.display = show ? "none" : "block"
 }
 
+function showRestoreProgressButton(tabname, show){
+    var button = gradioApp().getElementById(tabname + "_restore_progress")
+    if(! button) return
+
+    button.style.display = show ? "flex" : "none"
+}
+
 function submit(){
     rememberGallerySelection('txt2img_gallery')
     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)
@@ -155,8 +191,12 @@ 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)
@@ -167,6 +207,42 @@ function submit_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(){})
@@ -178,7 +254,7 @@ function modelmerger(){
 
 
 function ask_for_style_name(_, prompt_text, negative_prompt_text) {
-    name_ = prompt('Style name:')
+    var name_ = prompt('Style name:')
     return [name_, prompt_text, negative_prompt_text]
 }
 
@@ -213,11 +289,11 @@ function recalculate_prompts_img2img(){
 }
 
 
-opts = {}
+var opts = {}
 onUiUpdate(function(){
 	if(Object.keys(opts).length != 0) return;
 
-	json_elem = gradioApp().getElementById('settings_json')
+	var json_elem = gradioApp().getElementById('settings_json')
 	if(json_elem == null) return;
 
     var textarea = json_elem.querySelector('textarea')
@@ -255,7 +331,6 @@ onUiUpdate(function(){
         }
 
         prompt.parentElement.insertBefore(counter, prompt)
-        counter.classList.add("token-counter")
         prompt.parentElement.style.position = "relative"
 
 		promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); }
@@ -267,12 +342,15 @@ onUiUpdate(function(){
     registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button')
     registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button')
 
-    show_all_pages = gradioApp().getElementById('settings_show_all_pages')
-    settings_tabs = gradioApp().querySelector('#settings div')
+    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){
+                if(elem.id == "settings_tab_licenses")
+                    return;
+
                 elem.style.display = "block";
             })
         }
@@ -280,9 +358,9 @@ onUiUpdate(function(){
 })
 
 onOptionsChanged(function(){
-    elem = gradioApp().getElementById('sd_checkpoint_hash')
-    sd_checkpoint_hash = opts.sd_checkpoint_hash || ""
-    shorthash = sd_checkpoint_hash.substr(0,10)
+    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
@@ -317,7 +395,16 @@ function update_token_counter(button_id) {
 
 function restart_reload(){
     document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
-    setTimeout(function(){location.reload()},2000)
+
+    var requestPing = function(){
+        requestGet("./internal/ping", {}, function(data){
+            location.reload();
+        }, function(){
+            setTimeout(requestPing, 500);
+        })
+    }
+
+    setTimeout(requestPing, 2000);
 
     return []
 }
@@ -336,3 +423,45 @@ 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 []
+
+}
+
+
+
+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 [];
+}