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.

.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",

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);
+});

javascript/ui.js

@@ -319,8 +319,6 @@ onAfterUiUpdate(function() {
     });
 
     json_elem.parentElement.style.display = "none";
-
-    setupTokenCounters();
 });
 
 onOptionsChanged(function() {

modules/shared_options.py

@@ -270,7 +270,7 @@
     "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."),
 }))
 

modules/ui_toprow.py

@@ -127,9 +127,9 @@ def create_tools_row(self):
 
             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(

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);