diff --git a/.eslintrc.js b/.eslintrc.js
index cf8397695..9c70eff85 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 2ecc7d910..5d53fe471 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 9e66cd245..3d079b3df 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 f1ab5d6e2..e1d11c8e0 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 30cf1b1b8..dc3c3aa38 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="0/75", elem_id=f"{self.id_part}_token_counter", elem_classes=["token-counter"])
+ self.token_counter = gr.HTML(value="0/75", 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="0/75", elem_id=f"{self.id_part}_negative_token_counter", elem_classes=["token-counter"])
+ self.negative_token_counter = gr.HTML(value="0/75", 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 a6b287b95..8ce78ff0c 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);