Add a token counter similar to automatic1111

It can now be found in the Default and Notebook tabs

css/main.css

@@ -140,7 +140,11 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
 
 @media screen and (max-width: 711px) {
     .textbox_default textarea {
-        height: calc(100dvh - 295px);
+        height: calc(100dvh - 271px);
+    }
+
+    div .default-token-counter {
+        top: calc( 0.5 * (100dvh - 245px) ) !important;
     }
 }
 
@@ -212,6 +216,27 @@ audio {
   max-width: 100%;
 }
 
+/* Copied from https://github.com/AUTOMATIC1111/stable-diffusion-webui */
+.token-counter {
+  position: absolute !important;
+  top: calc( 0.5 * (100dvh - 215px) ) !important;
+  right: 2px;
+  z-index: 100;
+  background: var(--input-background-fill) !important;
+  min-height: 0 !important;
+}
+
+.default-token-counter {
+  top: calc( 0.5 * (100dvh - 285px) ) !important;
+}
+
+.token-counter span {
+  padding: 1px;
+  box-shadow: 0 0 0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);
+  border: 2px solid rgba(192,192,192,0.4) !important;
+  border-radius: 0.4em;
+}
+
 /*****************************************************/
 /*************** Chat UI declarations ****************/
 /*****************************************************/

modules/prompts.py

@@ -46,6 +46,6 @@ def load_instruction_prompt_simple(fname):
 def count_tokens(text):
     try:
         tokens = get_encoded_length(text)
-        return f'{tokens} tokens in the input.'
+        return str(tokens)
     except:
-        return 'Couldn\'t count the number of tokens. Is a tokenizer loaded?'
+        return '-1'

modules/ui_default.py

@@ -17,12 +17,14 @@ def create_ui():
         shared.gradio['last_input-default'] = gr.State('')
         with gr.Row():
             with gr.Column():
-                shared.gradio['textbox-default'] = gr.Textbox(value='', elem_classes=['textbox_default', 'add_scrollbar'], lines=27, label='Input')
+                with gr.Row():
+                    shared.gradio['textbox-default'] = gr.Textbox(value='', elem_classes=['textbox_default', 'add_scrollbar'], lines=27, label='Input')
+                    shared.gradio['token-counter-default'] = gr.HTML(value="<span>0</span>", elem_classes=["token-counter", "default-token-counter"])
+
                 with gr.Row():
                     shared.gradio['Generate-default'] = gr.Button('Generate', variant='primary')
                     shared.gradio['Stop-default'] = gr.Button('Stop', elem_id='stop')
                     shared.gradio['Continue-default'] = gr.Button('Continue')
-                    shared.gradio['count_tokens-default'] = gr.Button('Count tokens')
 
                 with gr.Row():
                     shared.gradio['prompt_menu-default'] = gr.Dropdown(choices=utils.get_available_prompts(), value='None', label='Prompt', elem_classes='slim-dropdown')
@@ -30,8 +32,6 @@ def create_ui():
                     shared.gradio['save_prompt-default'] = gr.Button('💾', elem_classes='refresh-button')
                     shared.gradio['delete_prompt-default'] = gr.Button('🗑️', elem_classes='refresh-button')
 
-                shared.gradio['status-default'] = gr.Markdown('')
-
             with gr.Column():
                 with gr.Tab('Raw'):
                     shared.gradio['output_textbox'] = gr.Textbox(lines=27, label='Output', elem_classes=['textbox_default_output', 'add_scrollbar'])
@@ -83,5 +83,5 @@ def create_event_handlers():
         lambda x: x + '.txt', gradio('prompt_menu-default'), gradio('delete_filename')).then(
         lambda: gr.update(visible=True), None, gradio('file_deleter'))
 
-    shared.gradio['count_tokens-default'].click(count_tokens, gradio('textbox-default'), gradio('status-default'), show_progress=False)
+    shared.gradio['textbox-default'].change(lambda x : f"<span>{count_tokens(x)}</span>", gradio('textbox-default'), gradio('token-counter-default'), show_progress=False)
-    shared.gradio['get_logits-default'].click(logits.get_next_logits, gradio('textbox-default'), gradio('logits-default'))
+    shared.gradio['get_logits-default'].click(logits.get_next_logits, gradio('textbox-default'), gradio('logits-default'), show_progress=False)

modules/ui_notebook.py

@@ -18,7 +18,9 @@ def create_ui():
         with gr.Row():
             with gr.Column(scale=4):
                 with gr.Tab('Raw'):
-                    shared.gradio['textbox-notebook'] = gr.Textbox(value='', elem_classes=['textbox', 'add_scrollbar'], lines=27)
+                    with gr.Row():
+                        shared.gradio['textbox-notebook'] = gr.Textbox(value='', elem_classes=['textbox', 'add_scrollbar'], lines=27)
+                        shared.gradio['token-counter-notebook'] = gr.HTML(value="<span>0</span>", elem_classes=["token-counter"])
 
                 with gr.Tab('Markdown'):
                     shared.gradio['markdown_render-notebook'] = gr.Button('Render')
@@ -45,9 +47,6 @@ def create_ui():
                     shared.gradio['save_prompt-notebook'] = gr.Button('💾', elem_classes=['refresh-button', 'refresh-button-small'])
                     shared.gradio['delete_prompt-notebook'] = gr.Button('🗑️', elem_classes=['refresh-button', 'refresh-button-small'])
 
-                shared.gradio['count_tokens-notebook'] = gr.Button('Count tokens')
-                shared.gradio['status-notebook'] = gr.Markdown('')
-
 
 def create_event_handlers():
     shared.gradio['Generate-notebook'].click(
@@ -86,5 +85,5 @@ def create_event_handlers():
         lambda x: x + '.txt', gradio('prompt_menu-notebook'), gradio('delete_filename')).then(
         lambda: gr.update(visible=True), None, gradio('file_deleter'))
 
-    shared.gradio['count_tokens-notebook'].click(count_tokens, gradio('textbox-notebook'), gradio('status-notebook'), show_progress=False)
+    shared.gradio['textbox-notebook'].change(lambda x : f"<span>{count_tokens(x)}</span>", gradio('textbox-notebook'), gradio('token-counter-notebook'), show_progress=False)
     shared.gradio['get_logits-notebook'].click(logits.get_next_logits, gradio('textbox-notebook'), gradio('logits-notebook'))