13 files changed, 479 insertions, 162 deletions

diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index 5803daea..d680daf5 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -119,7 +119,7 @@ window.addEventListener('paste', e => {
     }
 
     const firstFreeImageField = visibleImageFields
-        .filter(el => el.querySelector('input[type=file]'))?.[0];
+        .filter(el => !el.querySelector('img'))?.[0];
 
     dropReplaceImage(
         firstFreeImageField ?
diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js
index 8906c892..688c2f11 100644
--- a/javascript/edit-attention.js
+++ b/javascript/edit-attention.js
@@ -18,37 +18,43 @@ function keyupEditAttention(event) {
         const before = text.substring(0, selectionStart);
         let beforeParen = before.lastIndexOf(OPEN);
         if (beforeParen == -1) return false;
-        let beforeParenClose = before.lastIndexOf(CLOSE);
-        while (beforeParenClose !== -1 && beforeParenClose > beforeParen) {
-            beforeParen = before.lastIndexOf(OPEN, beforeParen - 1);
-            beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1);
-        }
+
+        let beforeClosingParen = before.lastIndexOf(CLOSE);
+        if (beforeClosingParen != -1 && beforeClosingParen > beforeParen) return false;
 
         // Find closing parenthesis around current cursor
         const after = text.substring(selectionStart);
         let afterParen = after.indexOf(CLOSE);
         if (afterParen == -1) return false;
-        let afterParenOpen = after.indexOf(OPEN);
-        while (afterParenOpen !== -1 && afterParen > afterParenOpen) {
-            afterParen = after.indexOf(CLOSE, afterParen + 1);
-            afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1);
-        }
-        if (beforeParen === -1 || afterParen === -1) return false;
+
+        let afterOpeningParen = after.indexOf(OPEN);
+        if (afterOpeningParen != -1 && afterOpeningParen < afterParen) return false;
 
         // Set the selection to the text between the parenthesis
         const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen);
-        const lastColon = parenContent.lastIndexOf(":");
-        selectionStart = beforeParen + 1;
-        selectionEnd = selectionStart + lastColon;
+        if (/.*:-?[\d.]+/s.test(parenContent)) {
+            const lastColon = parenContent.lastIndexOf(":");
+            selectionStart = beforeParen + 1;
+            selectionEnd = selectionStart + lastColon;
+        } else {
+            selectionStart = beforeParen + 1;
+            selectionEnd = selectionStart + parenContent.length;
+        }
+
         target.setSelectionRange(selectionStart, selectionEnd);
         return true;
     }
 
     function selectCurrentWord() {
         if (selectionStart !== selectionEnd) return false;
-        const delimiters = opts.keyedit_delimiters + " \r\n\t";
+        const whitespace_delimiters = {"Tab": "\t", "Carriage Return": "\r", "Line Feed": "\n"};
+        let delimiters = opts.keyedit_delimiters;
+
+        for (let i of opts.keyedit_delimiters_whitespace) {
+            delimiters += whitespace_delimiters[i];
+        }
 
-        // seek backward until to find beggining
+        // seek backward to find beginning
         while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) {
             selectionStart--;
         }
@@ -63,7 +69,7 @@ function keyupEditAttention(event) {
     }
 
     // If the user hasn't selected anything, let's select their current parenthesis block or word
-    if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) {
+    if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')') && !selectCurrentParenthesisBlock('[', ']')) {
         selectCurrentWord();
     }
 
@@ -71,33 +77,54 @@ function keyupEditAttention(event) {
 
     var closeCharacter = ')';
     var delta = opts.keyedit_precision_attention;
+    var start = selectionStart > 0 ? text[selectionStart - 1] : "";
+    var end = text[selectionEnd];
 
-    if (selectionStart > 0 && text[selectionStart - 1] == '<') {
+    if (start == '<') {
         closeCharacter = '>';
         delta = opts.keyedit_precision_extra;
-    } else if (selectionStart == 0 || text[selectionStart - 1] != "(") {
+    } else if (start == '(' && end == ')' || start == '[' && end == ']') { // convert old-style (((emphasis)))
+        let numParen = 0;
+
+        while (text[selectionStart - numParen - 1] == start && text[selectionEnd + numParen] == end) {
+            numParen++;
+        }
 
+        if (start == "[") {
+            weight = (1 / 1.1) ** numParen;
+        } else {
+            weight = 1.1 ** numParen;
+        }
+
+        weight = Math.round(weight / opts.keyedit_precision_attention) * opts.keyedit_precision_attention;
+
+        text = text.slice(0, selectionStart - numParen) + "(" + text.slice(selectionStart, selectionEnd) + ":" + weight + ")" + text.slice(selectionEnd + numParen);
+        selectionStart -= numParen - 1;
+        selectionEnd -= numParen - 1;
+    } else if (start != '(') {
         // do not include spaces at the end
         while (selectionEnd > selectionStart && text[selectionEnd - 1] == ' ') {
-            selectionEnd -= 1;
+            selectionEnd--;
         }
+
         if (selectionStart == selectionEnd) {
             return;
         }
 
         text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd);
 
-        selectionStart += 1;
-        selectionEnd += 1;
+        selectionStart++;
+        selectionEnd++;
     }
 
-    var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
-    var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));
+    if (text[selectionEnd] != ':') return;
+    var weightLength = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
+    var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + weightLength));
     if (isNaN(weight)) return;
 
     weight += isPlus ? delta : -delta;
     weight = parseFloat(weight.toPrecision(12));
-    if (String(weight).length == 1) weight += ".0";
+    if (Number.isInteger(weight)) weight += ".0";
 
     if (closeCharacter == ')' && weight == 1) {
         var endParenPos = text.substring(selectionEnd).indexOf(')');
@@ -105,7 +132,7 @@ function keyupEditAttention(event) {
         selectionStart--;
         selectionEnd--;
     } else {
-        text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + end);
+        text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + weightLength);
     }
 
     target.focus();
diff --git a/javascript/extensions.js b/javascript/extensions.js
index 1f7254c5..312131b7 100644
--- a/javascript/extensions.js
+++ b/javascript/extensions.js
@@ -33,7 +33,7 @@ function extensions_check() {
 
 
     var id = randomId();
-    requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
+    requestProgress(id, gradioApp().getElementById('extensions_installed_html'), null, function() {
 
     });
 
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 897ebeba..a1bf29a8 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -26,8 +26,9 @@ function setupExtraNetworksForTab(tabname) {
     var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
     var showDirsDiv = gradioApp().getElementById(tabname + '_extra_show_dirs');
     var showDirs = gradioApp().querySelector('#' + tabname + '_extra_show_dirs input');
+    var promptContainer = gradioApp().querySelector('.prompt-container-compact#' + tabname + '_prompt_container');
+    var negativePrompt = gradioApp().querySelector('#' + tabname + '_neg_prompt');
 
-    sort.dataset.sortkey = 'sortDefault';
     tabs.appendChild(searchDiv);
     tabs.appendChild(sort);
     tabs.appendChild(sortOrder);
@@ -49,20 +50,23 @@ function setupExtraNetworksForTab(tabname) {
 
             elem.style.display = visible ? "" : "none";
         });
+
+        applySort();
     };
 
     var applySort = function() {
+        var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
+
         var reverse = sortOrder.classList.contains("sortReverse");
-        var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim();
-        sortKey = sortKey ? "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1) : "";
-        var sortKeyStore = sortKey ? sortKey + (reverse ? "Reverse" : "") : "";
-        if (!sortKey || sortKeyStore == sort.dataset.sortkey) {
+        var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim() || "name";
+        sortKey = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1);
+        var sortKeyStore = sortKey + "-" + (reverse ? "Descending" : "Ascending") + "-" + cards.length;
+
+        if (sortKeyStore == sort.dataset.sortkey) {
             return;
         }
-
         sort.dataset.sortkey = sortKeyStore;
 
-        var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
         cards.forEach(function(card) {
             card.originalParentElement = card.parentElement;
         });
@@ -88,15 +92,13 @@ function setupExtraNetworksForTab(tabname) {
     };
 
     search.addEventListener("input", applyFilter);
-    applyFilter();
-    ["change", "blur", "click"].forEach(function(evt) {
-        sort.querySelector("input").addEventListener(evt, applySort);
-    });
     sortOrder.addEventListener("click", function() {
         sortOrder.classList.toggle("sortReverse");
         applySort();
     });
+    applyFilter();
 
+    extraNetworksApplySort[tabname] = applySort;
     extraNetworksApplyFilter[tabname] = applyFilter;
 
     var showDirsUpdate = function() {
@@ -109,11 +111,47 @@ function setupExtraNetworksForTab(tabname) {
     showDirsUpdate();
 }
 
+function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt) {
+    if (!gradioApp().querySelector('.toprow-compact-tools')) return; // only applicable for compact prompt layout
+
+    var promptContainer = gradioApp().getElementById(tabname + '_prompt_container');
+    var prompt = gradioApp().getElementById(tabname + '_prompt_row');
+    var negPrompt = gradioApp().getElementById(tabname + '_neg_prompt_row');
+    var elem = id ? gradioApp().getElementById(id) : null;
+
+    if (showNegativePrompt && elem) {
+        elem.insertBefore(negPrompt, elem.firstChild);
+    } else {
+        promptContainer.insertBefore(negPrompt, promptContainer.firstChild);
+    }
+
+    if (showPrompt && elem) {
+        elem.insertBefore(prompt, elem.firstChild);
+    } else {
+        promptContainer.insertBefore(prompt, promptContainer.firstChild);
+    }
+}
+
+
+function extraNetworksUrelatedTabSelected(tabname) { // called from python when user selects an unrelated tab (generate)
+    extraNetworksMovePromptToTab(tabname, '', false, false);
+}
+
+function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt) { // called from python when user selects an extra networks tab
+    extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt);
+
+}
+
 function applyExtraNetworkFilter(tabname) {
     setTimeout(extraNetworksApplyFilter[tabname], 1);
 }
 
+function applyExtraNetworkSort(tabname) {
+    setTimeout(extraNetworksApplySort[tabname], 1);
+}
+
 var extraNetworksApplyFilter = {};
+var extraNetworksApplySort = {};
 var activePromptTextarea = {};
 
 function setupExtraNetworks() {
@@ -140,14 +178,15 @@ function setupExtraNetworks() {
 
 onUiLoaded(setupExtraNetworks);
 
-var re_extranet = /<([^:]+:[^:]+):[\d.]+>(.*)/;
-var re_extranet_g = /\s+<([^:]+:[^:]+):[\d.]+>/g;
+var re_extranet = /<([^:^>]+:[^:]+):[\d.]+>(.*)/;
+var re_extranet_g = /<([^:^>]+:[^:]+):[\d.]+>/g;
 
 function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
     var m = text.match(re_extranet);
     var replaced = false;
     var newTextareaText;
     if (m) {
+        var extraTextBeforeNet = opts.extra_networks_add_text_separator;
         var extraTextAfterNet = m[2];
         var partToSearch = m[1];
         var foundAtPosition = -1;
@@ -161,8 +200,13 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
             return found;
         });
 
-        if (foundAtPosition >= 0 && newTextareaText.substr(foundAtPosition, extraTextAfterNet.length) == extraTextAfterNet) {
-            newTextareaText = newTextareaText.substr(0, foundAtPosition) + newTextareaText.substr(foundAtPosition + extraTextAfterNet.length);
+        if (foundAtPosition >= 0) {
+            if (newTextareaText.substr(foundAtPosition, extraTextAfterNet.length) == extraTextAfterNet) {
+                newTextareaText = newTextareaText.substr(0, foundAtPosition) + newTextareaText.substr(foundAtPosition + extraTextAfterNet.length);
+            }
+            if (newTextareaText.substr(foundAtPosition - extraTextBeforeNet.length, extraTextBeforeNet.length) == extraTextBeforeNet) {
+                newTextareaText = newTextareaText.substr(0, foundAtPosition - extraTextBeforeNet.length) + newTextareaText.substr(foundAtPosition);
+            }
         }
     } else {
         newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
@@ -216,27 +260,24 @@ function extraNetworksSearchButton(tabs_id, event) {
 
 var globalPopup = null;
 var globalPopupInner = null;
+
 function closePopup() {
     if (!globalPopup) return;
-
     globalPopup.style.display = "none";
 }
+
 function popup(contents) {
     if (!globalPopup) {
         globalPopup = document.createElement('div');
-        globalPopup.onclick = closePopup;
         globalPopup.classList.add('global-popup');
 
         var close = document.createElement('div');
         close.classList.add('global-popup-close');
-        close.onclick = closePopup;
+        close.addEventListener("click", closePopup);
         close.title = "Close";
         globalPopup.appendChild(close);
 
         globalPopupInner = document.createElement('div');
-        globalPopupInner.onclick = function(event) {
-            event.stopPropagation(); return false;
-        };
         globalPopupInner.classList.add('global-popup-inner');
         globalPopup.appendChild(globalPopupInner);
 
@@ -249,6 +290,15 @@ function popup(contents) {
     globalPopup.style.display = "flex";
 }
 
+var storedPopupIds = {};
+function popupId(id) {
+    if (!storedPopupIds[id]) {
+        storedPopupIds[id] = gradioApp().getElementById(id);
+    }
+
+    popup(storedPopupIds[id]);
+}
+
 function extraNetworksShowMetadata(text) {
     var elem = document.createElement('pre');
     elem.classList.add('popup-metadata');
@@ -326,13 +376,13 @@ function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) {
 function extraNetworksRefreshSingleCard(page, tabname, name) {
     requestGet("./sd_extra_networks/get-single-card", {page: page, tabname: tabname, name: name}, function(data) {
         if (data && data.html) {
-            var card = gradioApp().querySelector('.card[data-name=' + JSON.stringify(name) + ']'); // likely using the wrong stringify function
+            var card = gradioApp().querySelector(`#${tabname}_${page.replace(" ", "_")}_cards > .card[data-name="${name}"]`);
 
             var newDiv = document.createElement('DIV');
             newDiv.innerHTML = data.html;
             var newCard = newDiv.firstElementChild;
 
-            newCard.style = '';
+            newCard.style.display = '';
             card.parentElement.insertBefore(newCard, card);
             card.parentElement.removeChild(card);
         }
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index c21d396e..e4dae91b 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -33,8 +33,11 @@ function updateOnBackgroundChange() {
     const modalImage = gradioApp().getElementById("modalImage");
     if (modalImage && modalImage.offsetParent) {
         let currentButton = selected_gallery_button();
-
-        if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
+        let preview = gradioApp().querySelectorAll('.livePreview > img');
+        if (preview.length > 0) {
+            // show preview image if available
+            modalImage.src = preview[preview.length - 1].src;
+        } else if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
             modalImage.src = currentButton.children[0].src;
             if (modalImage.style.display === 'none') {
                 const modal = gradioApp().getElementById("lightboxModal");
diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
index f2839852..7570309a 100644
--- a/javascript/inputAccordion.js
+++ b/javascript/inputAccordion.js
@@ -1,37 +1,68 @@
-var observerAccordionOpen = new MutationObserver(function(mutations) {
-    mutations.forEach(function(mutationRecord) {
-        var elem = mutationRecord.target;
-        var open = elem.classList.contains('open');
+function inputAccordionChecked(id, checked) {
+    var accordion = gradioApp().getElementById(id);
+    accordion.visibleCheckbox.checked = checked;
+    accordion.onVisibleCheckboxChange();
+}
 
-        var accordion = elem.parentNode;
-        accordion.classList.toggle('input-accordion-open', open);
+function setupAccordion(accordion) {
+    var labelWrap = accordion.querySelector('.label-wrap');
+    var gradioCheckbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input");
+    var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
+    var span = labelWrap.querySelector('span');
+    var linked = true;
 
-        var checkbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input");
-        checkbox.checked = open;
-        updateInput(checkbox);
+    var isOpen = function() {
+        return labelWrap.classList.contains('open');
+    };
 
-        var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
-        if (extra) {
-            extra.style.display = open ? "" : "none";
-        }
+    var observerAccordionOpen = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutationRecord) {
+            accordion.classList.toggle('input-accordion-open', isOpen());
+
+            if (linked) {
+                accordion.visibleCheckbox.checked = isOpen();
+                accordion.onVisibleCheckboxChange();
+            }
+        });
     });
-});
+    observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']});
 
-function inputAccordionChecked(id, checked) {
-    var label = gradioApp().querySelector('#' + id + " .label-wrap");
-    if (label.classList.contains('open') != checked) {
-        label.click();
+    if (extra) {
+        labelWrap.insertBefore(extra, labelWrap.lastElementChild);
     }
+
+    accordion.onChecked = function(checked) {
+        if (isOpen() != checked) {
+            labelWrap.click();
+        }
+    };
+
+    var visibleCheckbox = document.createElement('INPUT');
+    visibleCheckbox.type = 'checkbox';
+    visibleCheckbox.checked = isOpen();
+    visibleCheckbox.id = accordion.id + "-visible-checkbox";
+    visibleCheckbox.className = gradioCheckbox.className + " input-accordion-checkbox";
+    span.insertBefore(visibleCheckbox, span.firstChild);
+
+    accordion.visibleCheckbox = visibleCheckbox;
+    accordion.onVisibleCheckboxChange = function() {
+        if (linked && isOpen() != visibleCheckbox.checked) {
+            labelWrap.click();
+        }
+
+        gradioCheckbox.checked = visibleCheckbox.checked;
+        updateInput(gradioCheckbox);
+    };
+
+    visibleCheckbox.addEventListener('click', function(event) {
+        linked = false;
+        event.stopPropagation();
+    });
+    visibleCheckbox.addEventListener('input', accordion.onVisibleCheckboxChange);
 }
 
 onUiLoaded(function() {
     for (var accordion of gradioApp().querySelectorAll('.input-accordion')) {
-        var labelWrap = accordion.querySelector('.label-wrap');
-        observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']});
-
-        var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
-        if (extra) {
-            labelWrap.insertBefore(extra, labelWrap.lastElementChild);
-        }
+        setupAccordion(accordion);
     }
 });
diff --git a/javascript/localization.js b/javascript/localization.js
index 0c9032f9..8f00c186 100644
--- a/javascript/localization.js
+++ b/javascript/localization.js
@@ -107,12 +107,41 @@ function processNode(node) {
     });
 }
 
+function localizeWholePage() {
+    processNode(gradioApp());
+
+    function elem(comp) {
+        var elem_id = comp.props.elem_id ? comp.props.elem_id : "component-" + comp.id;
+        return gradioApp().getElementById(elem_id);
+    }
+
+    for (var comp of window.gradio_config.components) {
+        if (comp.props.webui_tooltip) {
+            let e = elem(comp);
+
+            let tl = e ? getTranslation(e.title) : undefined;
+            if (tl !== undefined) {
+                e.title = tl;
+            }
+        }
+        if (comp.props.placeholder) {
+            let e = elem(comp);
+            let textbox = e ? e.querySelector('[placeholder]') : null;
+
+            let tl = textbox ? getTranslation(textbox.placeholder) : undefined;
+            if (tl !== undefined) {
+                textbox.placeholder = tl;
+            }
+        }
+    }
+}
+
 function dumpTranslations() {
     if (!hasLocalization()) {
         // If we don't have any localization,
         // we will not have traversed the app to find
         // original_lines, so do that now.
-        processNode(gradioApp());
+        localizeWholePage();
     }
     var dumped = {};
     if (localization.rtl) {
@@ -154,7 +183,7 @@ document.addEventListener("DOMContentLoaded", function() {
         });
     });
 
-    processNode(gradioApp());
+    localizeWholePage();
 
     if (localization.rtl) { // if the language is from right to left,
         (new MutationObserver((mutations, observer) => { // wait for the style to load
diff --git a/javascript/notification.js b/javascript/notification.js
index 76c5715d..3ee972ae 100644
--- a/javascript/notification.js
+++ b/javascript/notification.js
@@ -15,7 +15,7 @@ onAfterUiUpdate(function() {
         }
     }
 
-    const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img');
+    const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"] div[id$="_results"] .thumbnail-item > img');
 
     if (galleryPreviews == null) return;
 
@@ -26,7 +26,11 @@ onAfterUiUpdate(function() {
     lastHeadImg = headImg;
 
     // play notification sound if available
-    gradioApp().querySelector('#audio_notification audio')?.play();
+    const notificationAudio = gradioApp().querySelector('#audio_notification audio');
+    if (notificationAudio) {
+        notificationAudio.volume = opts.notification_volume / 100.0 || 1.0;
+        notificationAudio.play();
+    }
 
     if (document.hasFocus()) return;
 
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 29299787..77761495 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -69,7 +69,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
     var dateStart = new Date();
     var wasEverActive = false;
     var parentProgressbar = progressbarContainer.parentNode;
-    var parentGallery = gallery ? gallery.parentNode : null;
 
     var divProgress = document.createElement('div');
     divProgress.className = 'progressDiv';
@@ -80,32 +79,26 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
     divProgress.appendChild(divInner);
     parentProgressbar.insertBefore(divProgress, progressbarContainer);
 
-    if (parentGallery) {
-        var livePreview = document.createElement('div');
-        livePreview.className = 'livePreview';
-        parentGallery.insertBefore(livePreview, gallery);
-    }
+    var livePreview = null;
 
     var removeProgressBar = function() {
+        if (!divProgress) return;
+
         setTitle("");
         parentProgressbar.removeChild(divProgress);
-        if (parentGallery) parentGallery.removeChild(livePreview);
+        if (gallery && livePreview) gallery.removeChild(livePreview);
         atEnd();
+
+        divProgress = null;
     };
 
-    var fun = function(id_task, id_live_preview) {
-        request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
+    var funProgress = function(id_task) {
+        request("./internal/progress", {id_task: id_task, live_preview: false}, function(res) {
             if (res.completed) {
                 removeProgressBar();
                 return;
             }
 
-            var rect = progressbarContainer.getBoundingClientRect();
-
-            if (rect.width) {
-                divProgress.style.width = rect.width + "px";
-            }
-
             let progressText = "";
 
             divInner.style.width = ((res.progress || 0) * 100.0) + '%';
@@ -119,7 +112,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
                 progressText += " ETA: " + formatTime(res.eta);
             }
 
-
             setTitle(progressText);
 
             if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
@@ -142,16 +134,33 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
                 return;
             }
 
+            if (onProgress) {
+                onProgress(res);
+            }
 
-            if (res.live_preview && gallery) {
-                rect = gallery.getBoundingClientRect();
-                if (rect.width) {
-                    livePreview.style.width = rect.width + "px";
-                    livePreview.style.height = rect.height + "px";
-                }
+            setTimeout(() => {
+                funProgress(id_task, res.id_live_preview);
+            }, opts.live_preview_refresh_period || 500);
+        }, function() {
+            removeProgressBar();
+        });
+    };
 
+    var funLivePreview = function(id_task, id_live_preview) {
+        request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
+            if (!divProgress) {
+                return;
+            }
+
+            if (res.live_preview && gallery) {
                 var img = new Image();
                 img.onload = function() {
+                    if (!livePreview) {
+                        livePreview = document.createElement('div');
+                        livePreview.className = 'livePreview';
+                        gallery.insertBefore(livePreview, gallery.firstElementChild);
+                    }
+
                     livePreview.appendChild(img);
                     if (livePreview.childElementCount > 2) {
                         livePreview.removeChild(livePreview.firstElementChild);
@@ -160,18 +169,18 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
                 img.src = res.live_preview;
             }
 
-
-            if (onProgress) {
-                onProgress(res);
-            }
-
             setTimeout(() => {
-                fun(id_task, res.id_live_preview);
+                funLivePreview(id_task, res.id_live_preview);
             }, opts.live_preview_refresh_period || 500);
         }, function() {
             removeProgressBar();
         });
     };
 
-    fun(id_task, 0);
+    funProgress(id_task, 0);
+
+    if (gallery) {
+        funLivePreview(id_task, 0);
+    }
+
 }
diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js
new file mode 100644
index 00000000..8c5c5169
--- /dev/null
+++ b/javascript/resizeHandle.js
@@ -0,0 +1,141 @@
+(function() {
+    const GRADIO_MIN_WIDTH = 320;
+    const GRID_TEMPLATE_COLUMNS = '1fr 16px 1fr';
+    const PAD = 16;
+    const DEBOUNCE_TIME = 100;
+
+    const R = {
+        tracking: false,
+        parent: null,
+        parentWidth: null,
+        leftCol: null,
+        leftColStartWidth: null,
+        screenX: null,
+    };
+
+    let resizeTimer;
+    let parents = [];
+
+    function setLeftColGridTemplate(el, width) {
+        el.style.gridTemplateColumns = `${width}px 16px 1fr`;
+    }
+
+    function displayResizeHandle(parent) {
+        if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) {
+            parent.style.display = 'flex';
+            if (R.handle != null) {
+                R.handle.style.opacity = '0';
+            }
+            return false;
+        } else {
+            parent.style.display = 'grid';
+            if (R.handle != null) {
+                R.handle.style.opacity = '100';
+            }
+            return true;
+        }
+    }
+
+    function afterResize(parent) {
+        if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != GRID_TEMPLATE_COLUMNS) {
+            const oldParentWidth = R.parentWidth;
+            const newParentWidth = parent.offsetWidth;
+            const widthL = parseInt(parent.style.gridTemplateColumns.split(' ')[0]);
+
+            const ratio = newParentWidth / oldParentWidth;
+
+            const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH);
+            setLeftColGridTemplate(parent, newWidthL);
+
+            R.parentWidth = newParentWidth;
+        }
+    }
+
+    function setup(parent) {
+        const leftCol = parent.firstElementChild;
+        const rightCol = parent.lastElementChild;
+
+        parents.push(parent);
+
+        parent.style.display = 'grid';
+        parent.style.gap = '0';
+        parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
+
+        const resizeHandle = document.createElement('div');
+        resizeHandle.classList.add('resize-handle');
+        parent.insertBefore(resizeHandle, rightCol);
+
+        resizeHandle.addEventListener('mousedown', (evt) => {
+            if (evt.button !== 0) return;
+
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            document.body.classList.add('resizing');
+
+            R.tracking = true;
+            R.parent = parent;
+            R.parentWidth = parent.offsetWidth;
+            R.handle = resizeHandle;
+            R.leftCol = leftCol;
+            R.leftColStartWidth = leftCol.offsetWidth;
+            R.screenX = evt.screenX;
+        });
+
+        resizeHandle.addEventListener('dblclick', (evt) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
+        });
+
+        afterResize(parent);
+    }
+
+    window.addEventListener('mousemove', (evt) => {
+        if (evt.button !== 0) return;
+
+        if (R.tracking) {
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            const delta = R.screenX - evt.screenX;
+            const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
+            setLeftColGridTemplate(R.parent, leftColWidth);
+        }
+    });
+
+    window.addEventListener('mouseup', (evt) => {
+        if (evt.button !== 0) return;
+
+        if (R.tracking) {
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            R.tracking = false;
+
+            document.body.classList.remove('resizing');
+        }
+    });
+
+
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimer);
+
+        resizeTimer = setTimeout(function() {
+            for (const parent of parents) {
+                afterResize(parent);
+            }
+        }, DEBOUNCE_TIME);
+    });
+
+    setupResizeHandle = setup;
+})();
+
+onUiLoaded(function() {
+    for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) {
+        if (!elem.querySelector('.resize-handle')) {
+            setupResizeHandle(elem);
+        }
+    }
+});
diff --git a/javascript/settings.js b/javascript/settings.js
new file mode 100644
index 00000000..4e79ec00
--- /dev/null
+++ b/javascript/settings.js
@@ -0,0 +1,46 @@
+let settingsExcludeTabsFromShowAll = {
+    settings_tab_defaults: 1,
+    settings_tab_sysinfo: 1,
+    settings_tab_actions: 1,
+    settings_tab_licenses: 1,
+};
+
+function settingsShowAllTabs() {
+    gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
+        if (settingsExcludeTabsFromShowAll[elem.id]) return;
+
+        elem.style.display = "block";
+    });
+}
+
+function settingsShowOneTab() {
+    gradioApp().querySelector('#settings_show_one_page').click();
+}
+
+onUiLoaded(function() {
+    var edit = gradioApp().querySelector('#settings_search');
+    var editTextarea = gradioApp().querySelector('#settings_search > label > input');
+    var buttonShowAllPages = gradioApp().getElementById('settings_show_all_pages');
+    var settings_tabs = gradioApp().querySelector('#settings div');
+
+    onEdit('settingsSearch', editTextarea, 250, function() {
+        var searchText = (editTextarea.value || "").trim().toLowerCase();
+
+        gradioApp().querySelectorAll('#settings > div[id^=settings_] div[id^=column_settings_] > *').forEach(function(elem) {
+            var visible = elem.textContent.trim().toLowerCase().indexOf(searchText) != -1;
+            elem.style.display = visible ? "" : "none";
+        });
+
+        if (searchText != "") {
+            settingsShowAllTabs();
+        } else {
+            settingsShowOneTab();
+        }
+    });
+
+    settings_tabs.insertBefore(edit, settings_tabs.firstChild);
+    settings_tabs.appendChild(buttonShowAllPages);
+
+
+    buttonShowAllPages.addEventListener("click", settingsShowAllTabs);
+});
diff --git a/javascript/token-counters.js b/javascript/token-counters.js
index 9d81a723..2ecc7d91 100644
--- a/javascript/token-counters.js
+++ b/javascript/token-counters.js
@@ -1,10 +1,9 @@
-let promptTokenCountDebounceTime = 800;
-let promptTokenCountTimeouts = {};
-var promptTokenCountUpdateFunctions = {};
+let promptTokenCountUpdateFunctions = {};
 
 function update_txt2img_tokens(...args) {
     // Called from Gradio
     update_token_counter("txt2img_token_button");
+    update_token_counter("txt2img_negative_token_button");
     if (args.length == 2) {
         return args[0];
     }
@@ -14,6 +13,7 @@ function update_txt2img_tokens(...args) {
 function update_img2img_tokens(...args) {
     // Called from Gradio
     update_token_counter("img2img_token_button");
+    update_token_counter("img2img_negative_token_button");
     if (args.length == 2) {
         return args[0];
     }
@@ -21,16 +21,7 @@ function update_img2img_tokens(...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,
-    );
+    promptTokenCountUpdateFunctions[button_id]?.();
 }
 
 
@@ -69,10 +60,11 @@ function setupTokenCounting(id, id_counter, id_button) {
     prompt.parentElement.insertBefore(counter, prompt);
     prompt.parentElement.style.position = "relative";
 
-    promptTokenCountUpdateFunctions[id] = function() {
-        update_token_counter(id_button);
-    };
-    textarea.addEventListener("input", promptTokenCountUpdateFunctions[id]);
+    var func = onEdit(id, textarea, 800, function() {
+        gradioApp().getElementById(id_button)?.click();
+    });
+    promptTokenCountUpdateFunctions[id] = func;
+    promptTokenCountUpdateFunctions[id_button] = func;
 }
 
 function setupTokenCounters() {
diff --git a/javascript/ui.js b/javascript/ui.js
index bade3089..2e262602 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -19,28 +19,11 @@ function all_gallery_buttons() {
 }
 
 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;
+    return all_gallery_buttons().find(elem => elem.classList.contains('selected')) ?? null;
 }
 
 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;
+    return all_gallery_buttons().findIndex(elem => elem.classList.contains('selected'));
 }
 
 function extract_image_from_gallery(gallery) {
@@ -280,21 +263,6 @@ onAfterUiUpdate(function() {
     json_elem.parentElement.style.display = "none";
 
     setupTokenCounters();
-
-    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";
-            });
-        };
-    }
 });
 
 onOptionsChanged(function() {
@@ -383,3 +351,20 @@ function switchWidthHeight(tabname) {
     updateInput(height);
     return [];
 }
+
+
+var onEditTimers = {};
+
+// calls func after afterMs milliseconds has passed since the input elem has beed enited by user
+function onEdit(editId, elem, afterMs, func) {
+    var edited = function() {
+        var existingTimer = onEditTimers[editId];
+        if (existingTimer) clearTimeout(existingTimer);
+
+        onEditTimers[editId] = setTimeout(func, afterMs);
+    };
+
+    elem.addEventListener("input", edited);
+
+    return edited;
+}