Add token counters for individual fields. Optimize total counter display

public/css/tags.css

@@ -134,7 +134,6 @@
 .open_alternate_greetings {
     margin: 0;
     aspect-ratio: 1 / 1;
-    height: 2rem;
 }
 
 .tag.selected {
@@ -164,4 +163,4 @@
         -1px 1px 0px black,
         1px -1px 0px black;
     opacity: 1;
-}
+}

public/index.html

@@ -3097,10 +3097,11 @@
                         <div id="avatar-and-name-block">
                             <div id="name_div">
                                 <input id="character_name_pole" name="ch_name" class="text_pole" data-i18n="[placeholder]Name this character" placeholder="Name this character" maxlength="50" value="" autocomplete="off">
+                                <div class="extension_token_counter">
+                                    Tokens: <span data-token-counter="character_name_pole">counting...</span>
+                                </div>
                             </div>
 
-
-
                             <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap flexGap5">
                                 <label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
                                     <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
@@ -3164,21 +3165,28 @@
                                     </div>
                                 </div>
                             </div>
-
                         </div>
                         <hr>
 
-
-
                         <div id="description_div" class="marginBot5">
                             <span data-i18n="Character Description">Description</span>
-                            <div id="result_info" class="flex-container" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">&nbsp;</div>
                             <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
                                 <span class="note-link-span">?</span>
                             </a>
+                            <span class="expander">&nbsp;</span>
+                            <div id="result_info" class="flex-container" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">
+                                <span id="result_info_text"><strong id="result_info_total_tokens">Calculating...</strong> Total Tokens</span>
+                                <i title="Click for stats!" class="fa-solid fa-circle-info rm_stats_button"></i>
+                                <div id="chartokenwarning" class="menu_button margin0 whitespacenowrap">
+                                    <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank">About Token 'Limits'</a>
+                                </div>
+                            </div>
                         </div>
 
                         <textarea id="description_textarea" data-i18n="[placeholder]Describe your character's physical and mental traits here." placeholder="Describe your character's physical and mental traits here." class="marginBot5" name="description" placeholder=""></textarea>
+                        <div class="extension_token_counter">
+                            Tokens: <span data-token-counter="description_textarea">counting...</span>
+                        </div>
 
                         <div id="first_message_div" class="marginBot5 title_restorable">
                             <span>
@@ -3192,6 +3200,10 @@
                             </div>
                         </div>
                         <textarea id="firstmessage_textarea" data-i18n="[placeholder]This will be the first message from the character that starts every chat." placeholder="This will be the first message from the character that starts every chat." class="marginBot5" name="first_mes" placeholder=""></textarea>
+                        <div class="extension_token_counter">
+                            Tokens: <span data-token-counter="firstmessage_textarea">counting...</span>
+                        </div>
+
                         <div id="spoiler_free_desc">
                             <div id="creators_notes_div" class="marginBot5 title_restorable">
                                 <span data-i18n="Creator's Notes">Creator's Notes</span>
@@ -3403,10 +3415,16 @@
                 <div>
                     <h4 data-i18n="Main Prompt">Main Prompt</h4>
                     <textarea id="system_prompt_textarea" name="system_prompt" data-i18n="[placeholder]Any contents here will replace the default Main Prompt used for this character. (v2 spec: system_prompt)" placeholder="Any contents here will replace the default Main Prompt used for this character.&#10;(v2 spec: system_prompt)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
+                    <div class="extension_token_counter">
+                        Tokens: <span data-token-counter="system_prompt_textarea">counting...</span>
+                    </div>
                 </div>
                 <div>
                     <h4 data-i18n="Jailbreak">Jailbreak</h4>
                     <textarea id="post_history_instructions_textarea" name="post_history_instructions" data-i18n="[placeholder]Any contents here will replace the default Jailbreak Prompt used for this character. (v2 spec: post_history_instructions)" placeholder="Any contents here will replace the default Jailbreak Prompt used for this character.&#10;(v2 spec: post_history_instructions)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
+                    <div class="extension_token_counter">
+                        Tokens: <span data-token-counter="post_history_instructions_textarea">counting...</span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -3450,6 +3468,9 @@
                 <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#personality-summary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
             </h4>
             <textarea id="personality_textarea" name="personality" data-i18n="[placeholder](A brief description of the personality)" placeholder="(A brief description of the personality)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="20000"></textarea>
+            <div class="extension_token_counter">
+                Tokens: <span data-token-counter="personality_textarea">counting...</span>
+            </div>
         </div>
 
         <div id="scenario_div">
@@ -3460,6 +3481,9 @@
                 </a>
             </h4>
             <textarea id="scenario_pole" name="scenario" data-i18n="[placeholder](Circumstances and context of the interaction)" placeholder="(Circumstances and context of the interaction)" class="text_pole" maxlength="20000" value="" autocomplete="off" form="form_create" rows="1"></textarea>
+            <div class="extension_token_counter">
+                Tokens: <span data-token-counter="scenario_pole">counting...</span>
+            </div>
         </div>
 
         <div id="talkativeness_div">
@@ -3480,6 +3504,9 @@
                 <h5 data-i18n="Important to set the character's writing style.">Important to set the character's writing style. <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#examples-of-dialogue" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
             </div>
             <textarea id="mes_example_textarea" class="flexGrow" name="mes_example" data-i18n="[placeholder](Examples of chat dialog. Begin each example with START on a new line.)" placeholder="(Examples of chat dialog. Begin each example with &lt;START&gt; on a new line.)" form="form_create" maxlength="20000" rows="6"></textarea>
+            <div class="extension_token_counter">
+                Tokens: <span data-token-counter="mes_example_textarea">counting...</span>
+            </div>
         </div>
         <div id="character_popup_ok" class="menu_button" data-i18n="Save">Save</div>
 

public/script.js

@@ -6696,7 +6696,7 @@ async function createOrEditCharacter(e) {
                 },
             });
         } else {
-            $("#result_info").html("Name not entered");
+            toastr.error('Name is required');
         }
     } else {
         let url = '/editcharacter';
@@ -6789,7 +6789,6 @@ async function createOrEditCharacter(e) {
             },
             error: function (jqXHR, exception) {
                 $("#create_button").removeAttr("disabled");
-                $("#result_info").html("<font color=red>Error: no connection</font>");
                 console.log('Error! Either a file with the same name already existed, or the image file provided was in an invalid format. Double check that the image is not a webp.');
                 toastr.error('Something went wrong while saving the character, or the image file provided was in an invalid format. Double check that the image is not a webp.');
             },

public/scripts/RossAscends-mods.js

@@ -22,11 +22,6 @@ import {
     selectCharacterById,
 } from "../script.js";
 
-import {
-    characterStatsHandler,
-} from "./stats.js";
-
-
 import {
     power_user,
     send_on_enter_options,
@@ -38,7 +33,7 @@ import {
     SECRET_KEYS,
     secret_state,
 } from "./secrets.js";
-import { debounce, delay } from "./utils.js";
+import { debounce, delay, getStringHash } from "./utils.js";
 import { chat_completion_sources, oai_settings } from "./openai.js";
 
 var NavToggle = document.getElementById("nav-toggle");
@@ -238,7 +233,6 @@ $("#rm_button_create").on("click", function () {                 //when "+New Ch
     create_save_first_message = "";
     create_save_scenario = "";
     create_save_mes_example = "";
-    $("#result_info").html('Type to start counting tokens!');
 });
 //when any input is made to the create/edit character form textareas
 $("#rm_ch_create_block").on("input", function () { countTokensDebounced(); });
@@ -246,96 +240,41 @@ $("#rm_ch_create_block").on("input", function () { countTokensDebounced(); });
 $("#character_popup").on("input", function () { countTokensDebounced(); });
 //function:
 export function RA_CountCharTokens() {
-    //console.log('RA_TC -- starting with this_chid = ' + this_chid);
+    let total_tokens = 0;
-    if (menu_type === "create") {            //if new char
+
-        function saveFormVariables() {
+    $('[data-token-counter]').each(function () {
-            create_save_name = $("#character_name_pole").val();
+        const counter = $(this);
-            create_save_description = $("#description_textarea").val();
+        const input = $(document.getElementById(counter.data('token-counter')));
-            create_save_first_message = $("#firstmessage_textarea").val();
+        const value = input.val();
+
+        if (input.length === 0) {
+            counter.text('Invalid input reference');
+            return;
         }
 
-        function savePopupVariables() {
+        if (!value) {
-            create_save_personality = $("#personality_textarea").val();
+            counter.text(0);
-            create_save_scenario = $("#scenario_pole").val();
+            return;
-            create_save_mes_example = $("#mes_example_textarea").val();
         }
 
-        saveFormVariables();
+        const valueHash = getStringHash(value);
-        savePopupVariables();
 
-        //count total tokens, including those that will be removed from context once chat history is long
+        if (input.data('last-value-hash') === valueHash) {
-        let count_string = [
+            total_tokens += Number(counter.text());
-            create_save_name,
+        } else {
-            create_save_description,
+            const tokens = getTokenCount(value);
-            create_save_personality,
+            counter.text(tokens);
-            create_save_scenario,
+            total_tokens += tokens;
-            create_save_first_message,
+            input.data('last-value-hash', valueHash);
-            create_save_mes_example,
+        }
-        ].join('\n').replace(/\r/gm, '').trim();
-        count_tokens = getTokenCount(count_string);
-
-        //count permanent tokens that will never get flushed out of context
-        let perm_string = [
-            create_save_name,
-            create_save_description,
-            create_save_personality,
-            create_save_scenario,
-            // add examples to permanent if they are pinned
-            (power_user.pin_examples ? create_save_mes_example : ''),
-        ].join('\n').replace(/\r/gm, '').trim();
-        perm_tokens = getTokenCount(perm_string);
-
-    } else {
-        if (this_chid !== undefined && this_chid !== "invalid-safety-id") {    // if we are counting a valid pre-saved char
-
-            //same as above, all tokens including temporary ones
-            let count_string = [
-                characters[this_chid].description,
-                characters[this_chid].personality,
-                characters[this_chid].scenario,
-                characters[this_chid].first_mes,
-                characters[this_chid].mes_example,
-            ].join('\n').replace(/\r/gm, '').trim();
-            count_tokens = getTokenCount(count_string);
-
-            //permanent tokens count
-            let perm_string = [
-                characters[this_chid].name,
-                characters[this_chid].description,
-                characters[this_chid].personality,
-                characters[this_chid].scenario,
-                // add examples to permanent if they are pinned
-                (power_user.pin_examples ? characters[this_chid].mes_example : ''),
-            ].join('\n').replace(/\r/gm, '').trim();
-            perm_tokens = getTokenCount(perm_string);
-            // if neither, probably safety char or some error in loading
-        } else { console.debug("RA_TC -- no valid char found, closing."); }
-    }
-    //label rm_stats_button with a tooltip indicating stats
-    $("#result_info").html(`<small>${count_tokens} Tokens (${perm_tokens} Permanent)</small>
-
-    <i title='Click for stats!' class="fa-solid fa-circle-info rm_stats_button"></i>`);
-    // display the counted tokens
-    const tokenLimit = Math.max(((main_api !== 'openai' ? max_context : oai_settings.openai_max_context) / 2), 1024);
-    if (count_tokens < tokenLimit && perm_tokens < tokenLimit) {
-
-    } else {
-        $("#result_info").html(`
-        <div class="flex-container alignitemscenter">
-            <div class="flex-container flexnowrap flexNoGap">
-                <small class="flex-container flexnowrap flexNoGap">
-                    <div class="neutral_warning">${count_tokens}</div>&nbsp;Tokens (<div class="neutral_warning">${perm_tokens}</div><div>&nbsp;Permanent)</div>
-                </small>
-                <i title='Click for stats!' class="fa-solid fa-circle-info rm_stats_button"></i>
-            </div>
-            <div id="chartokenwarning" class="menu_button margin0 whitespacenowrap"><a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank">About Token 'Limits'</a></div>
-        </div>`);
-
-
-    } //warn if either are over 1024
-    $(".rm_stats_button").on('click', function () {
-        characterStatsHandler(characters, this_chid);
     });
+
+    // Warn if total tokens exceeds the limit of half the max context
+    const tokenLimit = Math.max(((main_api !== 'openai' ? max_context : oai_settings.openai_max_context) / 2), 1024);
+    const showWarning = (total_tokens > tokenLimit);
+    $('#result_info_total_tokens').text(total_tokens);
+    $('#result_info_text').toggleClass('neutral_warning', showWarning);
+    $('#chartokenwarning').toggle(showWarning);
 }
 /**
  * Auto load chat with the last active character or group.

public/scripts/stats.js

@@ -1,5 +1,5 @@
 // statsHelper.js
-import { getRequestHeaders, callPopup, token, chat } from "../script.js";
+import { getRequestHeaders, callPopup, characters, this_chid } from "../script.js";
 import { humanizeGenTime } from "./RossAscends-mods.js";
 
 let charStats = {};
@@ -304,4 +304,10 @@ async function statMesProcess(line, type, characters, this_chid, oldMesssage) {
     updateStats();
 }
 
+jQuery(() => {
+    $(".rm_stats_button").on('click', function () {
+        characterStatsHandler(characters, this_chid);
+    });
+})
+
 export { userStatsHandler, characterStatsHandler, getStats, statMesProcess, charStats };

public/style.css

@@ -1178,6 +1178,7 @@ input[type="file"] {
     font-size: calc(var(--mainFontSize) * 0.9);
     width: 100%;
     text-align: right;
+    margin-bottom: 5px;
 }
 
 .floating_prompt_settings textarea {
@@ -1586,7 +1587,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 #description_div {
-    position: relative;
+    display: flex;
+    align-items: center;
 }
 
 #name_div {
@@ -1711,11 +1713,9 @@ grammarly-extension {
 }
 
 #result_info {
-    font-size: calc(var(--mainFontSize) - 0.1rem);
+    font-size: calc(var(--mainFontSize) * 0.9);
-    font-weight: bold;
-    margin-bottom: 5px;
     display: flex;
-    align-items: center;
+    align-items: baseline;
 }
 
 .rm_stats_button {