add onEdit function for js and rework token-counter.js to use it

2 files changed, 26 insertions, 17 deletions

diff --git a/javascript/token-counters.js b/javascript/token-counters.js
index 9d81a723..710345eb 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]);
+    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 bedcbf3e..aee0d1da 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -366,3 +366,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;
+}