Disable prompt token counters option actually disables token counting rather than just hiding results.

Disable prompt token counters option does not require reload UI.
token counters do not become visible until they are positioned correctly.

6 files changed, 30 insertions, 18 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
index cf839769..9c70eff8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -86,8 +86,6 @@ module.exports = {
         // imageviewer.js
         modalPrevImage: "readonly",
         modalNextImage: "readonly",
-        // token-counters.js
-        setupTokenCounters: "readonly",
         // localStorage.js
         localSet: "readonly",
         localGet: "readonly",
diff --git a/javascript/token-counters.js b/javascript/token-counters.js
index 2ecc7d91..5d53fe47 100644
--- a/javascript/token-counters.js
+++ b/javascript/token-counters.js
@@ -48,11 +48,6 @@ function setupTokenCounting(id, id_counter, id_button) {
     var counter = gradioApp().getElementById(id_counter);
     var textarea = gradioApp().querySelector(`#${id} > label > textarea`);
 
-    if (opts.disable_token_counters) {
-        counter.style.display = "none";
-        return;
-    }
-
     if (counter.parentElement == prompt.parentElement) {
         return;
     }
@@ -61,15 +56,32 @@ function setupTokenCounting(id, id_counter, id_button) {
     prompt.parentElement.style.position = "relative";
 
     var func = onEdit(id, textarea, 800, function() {
-        gradioApp().getElementById(id_button)?.click();
+        if(counter.classList.contains("token-counter-visible")){
+            gradioApp().getElementById(id_button)?.click();
+        }
     });
     promptTokenCountUpdateFunctions[id] = func;
     promptTokenCountUpdateFunctions[id_button] = func;
 }
 
-function setupTokenCounters() {
-    setupTokenCounting('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
-    setupTokenCounting('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
-    setupTokenCounting('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
-    setupTokenCounting('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
+function toggleTokenCountingVisibility(id, id_counter, id_button) {
+    var counter = gradioApp().getElementById(id_counter);
+
+    counter.style.display = opts.disable_token_counters ? "none" : "block";
+    counter.classList.toggle("token-counter-visible", ! opts.disable_token_counters);
 }
+
+function runCodeForTokenCounters(fun){
+    fun('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
+    fun('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
+    fun('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
+    fun('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
+}
+
+onUiLoaded(function(){
+    runCodeForTokenCounters(setupTokenCounting);
+});
+
+onOptionsChanged(function(){
+    runCodeForTokenCounters(toggleTokenCountingVisibility);
+});
diff --git a/javascript/ui.js b/javascript/ui.js
index 9e66cd24..3d079b3d 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -319,8 +319,6 @@ onAfterUiUpdate(function() {
     });
 
     json_elem.parentElement.style.display = "none";
-
-    setupTokenCounters();
 });
 
 onOptionsChanged(function() {
diff --git a/modules/shared_options.py b/modules/shared_options.py
index f1ab5d6e..e1d11c8e 100644
--- a/modules/shared_options.py
+++ b/modules/shared_options.py
@@ -270,7 +270,7 @@ options_templates.update(options_section(('ui_prompt_editing', "Prompt editing",
     "keyedit_delimiters": OptionInfo(r".,\/!?%^*;:{}=`~() ", "Word delimiters when editing the prompt with Ctrl+up/down"),

     "keyedit_delimiters_whitespace": OptionInfo(["Tab", "Carriage Return", "Line Feed"], "Ctrl+up/down whitespace delimiters", gr.CheckboxGroup, lambda: {"choices": ["Tab", "Carriage Return", "Line Feed"]}),

     "keyedit_move": OptionInfo(True, "Alt+left/right moves prompt elements"),

-    "disable_token_counters": OptionInfo(False, "Disable prompt token counters").needs_reload_ui(),

+    "disable_token_counters": OptionInfo(False, "Disable prompt token counters"),

     "include_styles_into_token_counters": OptionInfo(True, "Count tokens of enabled styles").info("When calculating how many tokens the prompt has, also consider tokens added by enabled styles."),

 }))

 

diff --git a/modules/ui_toprow.py b/modules/ui_toprow.py
index 30cf1b1b..dc3c3aa3 100644
--- a/modules/ui_toprow.py
+++ b/modules/ui_toprow.py
@@ -127,9 +127,9 @@ class Toprow:
 

             self.restore_progress_button = ToolButton(value=restore_progress_symbol, elem_id=f"{self.id_part}_restore_progress", visible=False, tooltip="Restore progress")

 

-            self.token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{self.id_part}_token_counter", elem_classes=["token-counter"])

+            self.token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{self.id_part}_token_counter", elem_classes=["token-counter"], visible=False)

             self.token_button = gr.Button(visible=False, elem_id=f"{self.id_part}_token_button")

-            self.negative_token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{self.id_part}_negative_token_counter", elem_classes=["token-counter"])

+            self.negative_token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{self.id_part}_negative_token_counter", elem_classes=["token-counter"], visible=False)

             self.negative_token_button = gr.Button(visible=False, elem_id=f"{self.id_part}_negative_token_button")

 

             self.clear_prompt_button.click(

diff --git a/style.css b/style.css
index a6b287b9..8ce78ff0 100644
--- a/style.css
+++ b/style.css
@@ -222,6 +222,10 @@ input[type="checkbox"].input-accordion-checkbox{
     top: -0.75em;

 }

 

+.block.token-counter-visible{

+    display: block !important;

+}

+

 .block.token-counter span{

     background: var(--input-background-fill) !important;

     box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);