aboutsummaryrefslogtreecommitdiff
path: root/javascript
diff options
context:
space:
mode:
Diffstat (limited to 'javascript')
-rw-r--r--javascript/dragdrop.js2
-rw-r--r--javascript/edit-attention.js79
-rw-r--r--javascript/extensions.js2
-rw-r--r--javascript/extraNetworks.js174
-rw-r--r--javascript/hints.js11
-rw-r--r--javascript/imageviewer.js12
-rw-r--r--javascript/inputAccordion.js68
-rw-r--r--javascript/localStorage.js26
-rw-r--r--javascript/localization.js43
-rw-r--r--javascript/notification.js8
-rw-r--r--javascript/progressbar.js67
-rw-r--r--javascript/resizeHandle.js141
-rw-r--r--javascript/settings.js71
-rw-r--r--javascript/token-counters.js26
-rw-r--r--javascript/ui.js112
15 files changed, 675 insertions, 167 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 5582a6e5..f1ad19a6 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -1,20 +1,39 @@
+function toggleCss(key, css, enable) {
+ var style = document.getElementById(key);
+ if (enable && !style) {
+ style = document.createElement('style');
+ style.id = key;
+ style.type = 'text/css';
+ document.head.appendChild(style);
+ }
+ if (style && !enable) {
+ document.head.removeChild(style);
+ }
+ if (style) {
+ style.innerHTML == '';
+ style.appendChild(document.createTextNode(css));
+ }
+}
+
function setupExtraNetworksForTab(tabname) {
gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks');
var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
- var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
+ var searchDiv = gradioApp().getElementById(tabname + '_extra_search');
+ var search = searchDiv.querySelector('textarea');
var sort = gradioApp().getElementById(tabname + '_extra_sort');
var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
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');
- search.classList.add('search');
- sort.classList.add('sort');
- sortOrder.classList.add('sortorder');
- sort.dataset.sortkey = 'sortDefault';
- tabs.appendChild(search);
+ tabs.appendChild(searchDiv);
tabs.appendChild(sort);
tabs.appendChild(sortOrder);
tabs.appendChild(refresh);
+ tabs.appendChild(showDirsDiv);
var applyFilter = function() {
var searchTerm = search.value.toLowerCase();
@@ -31,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;
});
@@ -70,23 +92,70 @@ 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() {
+ var css = '#' + tabname + '_extra_tabs .extra-network-subdirs { display: none; }';
+ toggleCss(tabname + '_extra_show_dirs_style', css, !showDirs.checked);
+ localSet('extra-networks-show-dirs', showDirs.checked ? 1 : 0);
+ };
+ showDirs.checked = localGet('extra-networks-show-dirs', 1) == 1;
+ showDirs.addEventListener("change", showDirsUpdate);
+ 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);
+ }
+
+ if (elem) {
+ elem.classList.toggle('extra-page-prompts-active', showNegativePrompt || showPrompt);
+ }
+}
+
+
+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() {
@@ -113,19 +182,22 @@ 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 re_extranet_neg = /\(([^:^>]+:[\d.]+)\)/;
+var re_extranet_g_neg = /\(([^:^>]+:[\d.]+)\)/g;
+function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg) {
+ var m = text.match(isNeg ? re_extranet_neg : 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;
- newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found, net, pos) {
- m = found.match(re_extranet);
+ newTextareaText = textarea.value.replaceAll(isNeg ? re_extranet_g_neg : re_extranet_g, function(found, net, pos) {
+ m = found.match(isNeg ? re_extranet_neg : re_extranet);
if (m[1] == partToSearch) {
replaced = true;
foundAtPosition = pos;
@@ -134,8 +206,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 (extraTextAfterNet && 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) {
@@ -155,14 +232,23 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
return false;
}
-function cardClicked(tabname, textToAdd, allowNegativePrompt) {
- var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
+function updatePromptArea(text, textArea, isNeg) {
- if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
- textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd;
+ if (!tryToRemoveExtraNetworkFromPrompt(textArea, text, isNeg)) {
+ textArea.value = textArea.value + opts.extra_networks_add_text_separator + text;
}
- updateInput(textarea);
+ updateInput(textArea);
+}
+
+function cardClicked(tabname, textToAdd, textToAddNegative, allowNegativePrompt) {
+ if (textToAddNegative.length > 0) {
+ updatePromptArea(textToAdd, gradioApp().querySelector("#" + tabname + "_prompt > label > textarea"));
+ updatePromptArea(textToAddNegative, gradioApp().querySelector("#" + tabname + "_neg_prompt > label > textarea"), true);
+ } else {
+ var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
+ updatePromptArea(textToAdd, textarea);
+ }
}
function saveCardPreview(event, tabname, filename) {
@@ -179,7 +265,7 @@ function saveCardPreview(event, tabname, filename) {
}
function extraNetworksSearchButton(tabs_id, event) {
- var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea');
+ var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea');
var button = event.target;
var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
@@ -189,27 +275,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);
@@ -222,6 +305,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');
@@ -299,15 +391,21 @@ 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);
}
});
}
+
+window.addEventListener("keydown", function(event) {
+ if (event.key == "Escape") {
+ closePopup();
+ }
+});
diff --git a/javascript/hints.js b/javascript/hints.js
index 4167cb28..6de9372e 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -190,3 +190,14 @@ onUiUpdate(function(mutationRecords) {
tooltipCheckTimer = setTimeout(processTooltipCheckNodes, 1000);
}
});
+
+onUiLoaded(function() {
+ for (var comp of window.gradio_config.components) {
+ if (comp.props.webui_tooltip && comp.props.elem_id) {
+ var elem = gradioApp().getElementById(comp.props.elem_id);
+ if (elem) {
+ elem.title = comp.props.webui_tooltip;
+ }
+ }
+ }
+});
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 677e95c1..625c5d14 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 (opts.js_live_preview_in_modal_lightbox && 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");
@@ -136,6 +139,11 @@ function setupImageForLightbox(e) {
var event = isFirefox ? 'mousedown' : 'click';
e.addEventListener(event, function(evt) {
+ if (evt.button == 1) {
+ open(evt.target.src);
+ evt.preventDefault();
+ return;
+ }
if (!opts.js_modal_lightbox || evt.button != 0) return;
modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
new file mode 100644
index 00000000..7570309a
--- /dev/null
+++ b/javascript/inputAccordion.js
@@ -0,0 +1,68 @@
+function inputAccordionChecked(id, checked) {
+ var accordion = gradioApp().getElementById(id);
+ accordion.visibleCheckbox.checked = checked;
+ accordion.onVisibleCheckboxChange();
+}
+
+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 isOpen = function() {
+ return labelWrap.classList.contains('open');
+ };
+
+ 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']});
+
+ 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')) {
+ setupAccordion(accordion);
+ }
+});
diff --git a/javascript/localStorage.js b/javascript/localStorage.js
new file mode 100644
index 00000000..dc1a36c3
--- /dev/null
+++ b/javascript/localStorage.js
@@ -0,0 +1,26 @@
+
+function localSet(k, v) {
+ try {
+ localStorage.setItem(k, v);
+ } catch (e) {
+ console.warn(`Failed to save ${k} to localStorage: ${e}`);
+ }
+}
+
+function localGet(k, def) {
+ try {
+ return localStorage.getItem(k);
+ } catch (e) {
+ console.warn(`Failed to load ${k} from localStorage: ${e}`);
+ }
+
+ return def;
+}
+
+function localRemove(k) {
+ try {
+ return localStorage.removeItem(k);
+ } catch (e) {
+ console.warn(`Failed to remove ${k} from localStorage: ${e}`);
+ }
+}
diff --git a/javascript/localization.js b/javascript/localization.js
index eb22b8a7..8f00c186 100644
--- a/javascript/localization.js
+++ b/javascript/localization.js
@@ -11,11 +11,11 @@ var ignore_ids_for_localization = {
train_hypernetwork: 'OPTION',
txt2img_styles: 'OPTION',
img2img_styles: 'OPTION',
- setting_random_artist_categories: 'SPAN',
- setting_face_restoration_model: 'SPAN',
- setting_realesrgan_enabled_models: 'SPAN',
- extras_upscaler_1: 'SPAN',
- extras_upscaler_2: 'SPAN',
+ setting_random_artist_categories: 'OPTION',
+ setting_face_restoration_model: 'OPTION',
+ setting_realesrgan_enabled_models: 'OPTION',
+ extras_upscaler_1: 'OPTION',
+ extras_upscaler_2: 'OPTION',
};
var re_num = /^[.\d]+$/;
@@ -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..e6009290
--- /dev/null
+++ b/javascript/settings.js
@@ -0,0 +1,71 @@
+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);
+});
+
+
+onOptionsChanged(function() {
+ if (gradioApp().querySelector('#settings .settings-category')) return;
+
+ var sectionMap = {};
+ gradioApp().querySelectorAll('#settings > div > button').forEach(function(x) {
+ sectionMap[x.textContent.trim()] = x;
+ });
+
+ opts._categories.forEach(function(x) {
+ var section = x[0];
+ var category = x[1];
+
+ var span = document.createElement('SPAN');
+ span.textContent = category;
+ span.className = 'settings-category';
+
+ var sectionElem = sectionMap[section];
+ if (!sectionElem) return;
+
+ sectionElem.parentElement.insertBefore(span, sectionElem);
+ });
+});
+
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 d70a681b..18c9f891 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) {
@@ -152,11 +135,11 @@ function submit() {
showSubmitButtons('txt2img', false);
var id = randomId();
- localStorage.setItem("txt2img_task_id", id);
+ localSet("txt2img_task_id", id);
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
showSubmitButtons('txt2img', true);
- localStorage.removeItem("txt2img_task_id");
+ localRemove("txt2img_task_id");
showRestoreProgressButton('txt2img', false);
});
@@ -171,11 +154,11 @@ function submit_img2img() {
showSubmitButtons('img2img', false);
var id = randomId();
- localStorage.setItem("img2img_task_id", id);
+ localSet("img2img_task_id", id);
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
showSubmitButtons('img2img', true);
- localStorage.removeItem("img2img_task_id");
+ localRemove("img2img_task_id");
showRestoreProgressButton('img2img', false);
});
@@ -187,11 +170,26 @@ function submit_img2img() {
return res;
}
+function submit_extras() {
+ showSubmitButtons('extras', false);
+
+ var id = randomId();
+
+ requestProgress(id, gradioApp().getElementById('extras_gallery_container'), gradioApp().getElementById('extras_gallery'), function() {
+ showSubmitButtons('extras', true);
+ });
+
+ var res = create_submit_args(arguments);
+
+ res[0] = id;
+
+ console.log(res);
+ return res;
+}
+
function restoreProgressTxt2img() {
showRestoreProgressButton("txt2img", false);
- var id = localStorage.getItem("txt2img_task_id");
-
- id = localStorage.getItem("txt2img_task_id");
+ var id = localGet("txt2img_task_id");
if (id) {
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
@@ -205,7 +203,7 @@ function restoreProgressTxt2img() {
function restoreProgressImg2img() {
showRestoreProgressButton("img2img", false);
- var id = localStorage.getItem("img2img_task_id");
+ var id = localGet("img2img_task_id");
if (id) {
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
@@ -217,9 +215,33 @@ function restoreProgressImg2img() {
}
+/**
+ * Configure the width and height elements on `tabname` to accept
+ * pasting of resolutions in the form of "width x height".
+ */
+function setupResolutionPasting(tabname) {
+ var width = gradioApp().querySelector(`#${tabname}_width input[type=number]`);
+ var height = gradioApp().querySelector(`#${tabname}_height input[type=number]`);
+ for (const el of [width, height]) {
+ el.addEventListener('paste', function(event) {
+ var pasteData = event.clipboardData.getData('text/plain');
+ var parsed = pasteData.match(/^\s*(\d+)\D+(\d+)\s*$/);
+ if (parsed) {
+ width.value = parsed[1];
+ height.value = parsed[2];
+ updateInput(width);
+ updateInput(height);
+ event.preventDefault();
+ }
+ });
+ }
+}
+
onUiLoaded(function() {
- showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"));
- showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"));
+ showRestoreProgressButton('txt2img', localGet("txt2img_task_id"));
+ showRestoreProgressButton('img2img', localGet("img2img_task_id"));
+ setupResolutionPasting('txt2img');
+ setupResolutionPasting('img2img');
});
@@ -282,21 +304,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() {
@@ -385,3 +392,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;
+}
generated by cgit v1.2.1 (git 2.18.0) at 2024-09-21 15:40:39 +0000