Add token counters for individual fields. Optimize total counter display
This commit is contained in:
Cohee
parent
f9573eb45d
commit
c735bf546a
|
|
@ -134,7 +134,6 @@
|
|||
.open_alternate_greetings {
|
||||
margin: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.tag.selected {
|
||||
|
|
|
|||
|
|
@ -3097,9 +3097,10 @@
|
|||
<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">
|
||||
|
|
@ -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."> </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"> </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. (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. (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 <START> 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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.');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
if (menu_type === "create") { //if new char
|
||||
function saveFormVariables() {
|
||||
create_save_name = $("#character_name_pole").val();
|
||||
create_save_description = $("#description_textarea").val();
|
||||
create_save_first_message = $("#firstmessage_textarea").val();
|
||||
let total_tokens = 0;
|
||||
|
||||
$('[data-token-counter]').each(function () {
|
||||
const counter = $(this);
|
||||
const input = $(document.getElementById(counter.data('token-counter')));
|
||||
const value = input.val();
|
||||
|
||||
if (input.length === 0) {
|
||||
counter.text('Invalid input reference');
|
||||
return;
|
||||
}
|
||||
|
||||
function savePopupVariables() {
|
||||
create_save_personality = $("#personality_textarea").val();
|
||||
create_save_scenario = $("#scenario_pole").val();
|
||||
create_save_mes_example = $("#mes_example_textarea").val();
|
||||
if (!value) {
|
||||
counter.text(0);
|
||||
return;
|
||||
}
|
||||
|
||||
saveFormVariables();
|
||||
savePopupVariables();
|
||||
|
||||
//count total tokens, including those that will be removed from context once chat history is long
|
||||
let count_string = [
|
||||
create_save_name,
|
||||
create_save_description,
|
||||
create_save_personality,
|
||||
create_save_scenario,
|
||||
create_save_first_message,
|
||||
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);
|
||||
const valueHash = getStringHash(value);
|
||||
|
||||
if (input.data('last-value-hash') === valueHash) {
|
||||
total_tokens += Number(counter.text());
|
||||
} 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."); }
|
||||
const tokens = getTokenCount(value);
|
||||
counter.text(tokens);
|
||||
total_tokens += tokens;
|
||||
input.data('last-value-hash', valueHash);
|
||||
}
|
||||
//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> Tokens (<div class="neutral_warning">${perm_tokens}</div><div> 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.
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
font-size: calc(var(--mainFontSize) * 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.rm_stats_button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue