rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add token counters for individual fields. Optimize total counter display

This commit is contained in:
Cohee 2023-08-21 15:32:27 +03:00
parent f9573eb45d
commit c735bf546a
6 changed files with 77 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/tags.css
View File

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

39
public/index.html
View File

@ -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.">&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>

3
public/script.js
View File

@ -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.');
},

117
public/scripts/RossAscends-mods.js
View File

@ -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>&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.

8
public/scripts/stats.js
View File

@ -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 };

10
public/style.css
View File

@ -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 {