mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
Move prompt itemization to HTML templates
This commit is contained in:
Cohee
269
public/script.js
269
public/script.js
@ -3567,238 +3567,49 @@ function promptItemize(itemizedPrompts, requestedMesId) {
|
|||||||
var selectedTokenizer = $("#tokenizer").find(':selected').text();
|
var selectedTokenizer = $("#tokenizer").find(':selected').text();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this_main_api == 'openai') {
|
const params = {
|
||||||
//console.log('-- calling popup for OAI tokens');
|
selectedTokenizer,
|
||||||
callPopup(
|
this_main_api,
|
||||||
`
|
storyStringTokensPercentage,
|
||||||
<h3 class="flex-container justifyCenter alignitemscenter">
|
worldInfoStringTokensPercentage,
|
||||||
Prompt Itemization
|
ActualChatHistoryTokensPercentage,
|
||||||
<div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div>
|
allAnchorsTokensPercentage,
|
||||||
</h3>
|
promptBiasTokensPercentage,
|
||||||
Tokenizer: ${selectedTokenizer}<br>
|
storyStringTokens,
|
||||||
API Used: ${this_main_api}<br>
|
charDescriptionTokens,
|
||||||
<span class="tokenItemizingSubclass">
|
charPersonalityTokens,
|
||||||
Only the white numbers really matter. All numbers are estimates.
|
scenarioTextTokens,
|
||||||
Grey color items may not have been included in the context due to certain prompt format settings.
|
examplesStringTokens,
|
||||||
</span>
|
userPersonaStringTokens,
|
||||||
<hr>
|
instructionTokens,
|
||||||
<div class="justifyLeft">
|
worldInfoStringTokens,
|
||||||
<div class="flex-container">
|
ActualChatHistoryTokens,
|
||||||
<div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph">
|
allAnchorsTokens,
|
||||||
<div class="wide100p" style="background-color: grey; height: ${oaiSystemTokensPercentage}%;"></div>
|
summarizeStringTokens,
|
||||||
<div class="wide100p" style="background-color: salmon; height: ${oaiStartTokensPercentage}%;"></div>
|
authorsNoteStringTokens,
|
||||||
<div class="wide100p" style="background-color: indianred; height: ${storyStringTokensPercentage}%;"></div>
|
smartContextStringTokens,
|
||||||
<div class="wide100p" style="background-color: gold; height: ${worldInfoStringTokensPercentage}%;"></div>
|
promptBiasTokens,
|
||||||
<div class="wide100p" style="background-color: palegreen; height: ${ActualChatHistoryTokensPercentage}%;"></div>
|
totalTokensInPrompt,
|
||||||
<div class="wide100p" style="background-color: cornflowerblue; height: ${allAnchorsTokensPercentage}%;"></div>
|
finalPromptTokens,
|
||||||
<div class="wide100p" style="background-color: mediumpurple; height: ${promptBiasTokensPercentage}%;"></div>
|
thisPrompt_max_context,
|
||||||
</div>
|
thisPrompt_padding,
|
||||||
<div class="flex-container wide50p">
|
thisPrompt_actual: thisPrompt_max_context - thisPrompt_padding,
|
||||||
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
oaiSystemTokensPercentage,
|
||||||
<div class="flex-container wide100p">
|
oaiStartTokensPercentage,
|
||||||
<div class="flex1" style="color: grey;">System Info:</div>
|
oaiSystemTokens,
|
||||||
<div class=""> ${oaiSystemTokens}</div>
|
oaiStartTokens,
|
||||||
</div>
|
oaiJailbreakTokens,
|
||||||
<div class="flex-container ">
|
oaiNudgeTokens,
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Chat Start: </div>
|
oaiImpersonateTokens,
|
||||||
<div class="tokenItemizingSubclass"> ${oaiStartTokens}</div>
|
oaiPromptTokens,
|
||||||
</div>
|
oaiBiasTokens,
|
||||||
<div class="flex-container ">
|
};
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Jailbreak: </div>
|
|
||||||
<div class="tokenItemizingSubclass">${oaiJailbreakTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- NSFW: </div>
|
|
||||||
<div class="tokenItemizingSubclass">??</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Nudge: </div>
|
|
||||||
<div class="tokenItemizingSubclass">${oaiNudgeTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Impersonate: </div>
|
|
||||||
<div class="tokenItemizingSubclass">${oaiImpersonateTokens}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
|
||||||
<div class="flex-container wide100p">
|
|
||||||
<div class="flex1" style="color: indianred;">Prompt Tokens:</div>
|
|
||||||
<div class=""> ${oaiPromptTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Description: </div>
|
|
||||||
<div class="tokenItemizingSubclass">${charDescriptionTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Personality:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${charPersonalityTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Scenario: </div>
|
|
||||||
<div class="tokenItemizingSubclass">${scenarioTextTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Examples:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${examplesStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- User Persona:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${userPersonaStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wide100p flex-container">
|
|
||||||
<div class="flex1" style="color: gold;">World Info:</div>
|
|
||||||
<div class="">${worldInfoStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="wide100p flex-container">
|
|
||||||
<div class="flex1" style="color: palegreen;">Chat History:</div>
|
|
||||||
<div class=""> ${ActualChatHistoryTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
|
||||||
<div class="wide100p flex-container">
|
|
||||||
<div class="flex1" style="color: cornflowerblue;">Extensions:</div>
|
|
||||||
<div class="">${allAnchorsTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Summarize: </div>
|
|
||||||
<div class="tokenItemizingSubclass">${summarizeStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Author's Note:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${authorsNoteStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Smart Context:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${smartContextStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wide100p flex-container">
|
|
||||||
<div class="flex1" style="color: mediumpurple;">{{}} Bias:</div><div class="">${oaiBiasTokens}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
if (this_main_api == 'openai') {
|
||||||
<hr>
|
callPopup(renderTemplate('itemizationChat', params), 'text');
|
||||||
<div class="wide100p flex-container flexFlowColumns">
|
|
||||||
<div class="flex-container wide100p">
|
|
||||||
<div class="flex1">Total Tokens in Prompt:</div><div class=""> ${finalPromptTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container wide100p">
|
|
||||||
<div class="flex1">Max Context (Context Size - Response Length):</div><div class="">${thisPrompt_max_context}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
`, 'text'
|
|
||||||
);
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
//console.log('-- calling popup for non-OAI tokens');
|
callPopup(renderTemplate('itemizationText', params), 'text');
|
||||||
callPopup(
|
|
||||||
`
|
|
||||||
<h3 class="flex-container justifyCenter alignitemscenter">
|
|
||||||
Prompt Itemization
|
|
||||||
<div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div>
|
|
||||||
</h3>
|
|
||||||
Tokenizer: ${selectedTokenizer}<br>
|
|
||||||
API Used: ${this_main_api}<br>
|
|
||||||
<span class="tokenItemizingSubclass">
|
|
||||||
Only the white numbers really matter. All numbers are estimates.
|
|
||||||
Grey color items may not have been included in the context due to certain prompt format settings.
|
|
||||||
</span>
|
|
||||||
<hr>
|
|
||||||
<div class="justifyLeft">
|
|
||||||
<div class="flex-container">
|
|
||||||
<div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph">
|
|
||||||
<div class="wide100p" style="background-color: indianred; height: ${storyStringTokensPercentage}%;"></div>
|
|
||||||
<div class="wide100p" style="background-color: gold; height: ${worldInfoStringTokensPercentage}%;"></div>
|
|
||||||
<div class="wide100p" style="background-color: palegreen; height: ${ActualChatHistoryTokensPercentage}%;"></div>
|
|
||||||
<div class="wide100p" style="background-color: cornflowerblue; height: ${allAnchorsTokensPercentage}%;"></div>
|
|
||||||
<div class="wide100p" style="background-color: mediumpurple; height: ${promptBiasTokensPercentage}%;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container wide50p">
|
|
||||||
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
|
||||||
<div class="flex-container wide100p">
|
|
||||||
<div class="flex1" style="color: indianred;"> Character Definitions:</div>
|
|
||||||
<div class=""> ${storyStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Description: </div>
|
|
||||||
<div class="tokenItemizingSubclass">${charDescriptionTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Personality:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${charPersonalityTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Scenario: </div>
|
|
||||||
<div class="tokenItemizingSubclass">${scenarioTextTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Examples:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${examplesStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- User Persona:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${userPersonaStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- System Prompt (Instruct):</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${instructionTokens}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wide100p flex-container">
|
|
||||||
<div class="flex1" style="color: gold;">World Info:</div>
|
|
||||||
<div class="">${worldInfoStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="wide100p flex-container">
|
|
||||||
<div class="flex1" style="color: palegreen;">Chat History:</div>
|
|
||||||
<div class=""> ${ActualChatHistoryTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
|
||||||
<div class="wide100p flex-container">
|
|
||||||
<div class="flex1" style="color: cornflowerblue;">Extensions:</div>
|
|
||||||
<div class="">${allAnchorsTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Summarize: </div>
|
|
||||||
<div class="tokenItemizingSubclass">${summarizeStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Author's Note:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${authorsNoteStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container ">
|
|
||||||
<div class=" flex1 tokenItemizingSubclass">-- Smart Context:</div>
|
|
||||||
<div class="tokenItemizingSubclass"> ${smartContextStringTokens}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wide100p flex-container">
|
|
||||||
<div class="flex1" style="color: mediumpurple;">{{}} Bias:</div><div class="">${promptBiasTokens}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<div class="wide100p flex-container flexFlowColumns">
|
|
||||||
<div class="flex-container wide100p">
|
|
||||||
<div class="flex1">Total Tokens in Prompt:</div><div class=""> ${totalTokensInPrompt}</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="flex1">finalPromt:</div><div class=""> ${finalPromptTokens}</div> -->
|
|
||||||
<div class="flex-container wide100p">
|
|
||||||
<div class="flex1">Max Context (Context Size - Response Length):</div><div class="">${thisPrompt_max_context}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container wide100p">
|
|
||||||
<div class="flex1">- Padding:</div><div class=""> ${thisPrompt_padding}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-container wide100p">
|
|
||||||
<div class="flex1">Actual Max Context Allowed:</div><div class="">${thisPrompt_max_context - thisPrompt_padding}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
`, 'text'
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
124
public/scripts/templates/itemizationChat.html
Normal file
124
public/scripts/templates/itemizationChat.html
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<h3 class="flex-container justifyCenter alignitemscenter">
|
||||||
|
Prompt Itemization
|
||||||
|
<div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div>
|
||||||
|
</h3>
|
||||||
|
Tokenizer: {{selectedTokenizer}}<br>
|
||||||
|
API Used: {{this_main_api}}<br>
|
||||||
|
<span class="tokenItemizingSubclass">
|
||||||
|
Only the white numbers really matter. All numbers are estimates.
|
||||||
|
Grey color items may not have been included in the context due to certain prompt format settings.
|
||||||
|
</span>
|
||||||
|
<hr>
|
||||||
|
<div class="justifyLeft">
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph">
|
||||||
|
<div class="wide100p" style="background-color: grey; height: {{oaiSystemTokensPercentage}}%;"></div>
|
||||||
|
<div class="wide100p" style="background-color: salmon; height: {{oaiStartTokensPercentage}}%;"></div>
|
||||||
|
<div class="wide100p" style="background-color: indianred; height: {{storyStringTokensPercentage}}%;"></div>
|
||||||
|
<div class="wide100p" style="background-color: gold; height: {{worldInfoStringTokensPercentage}}%;"></div>
|
||||||
|
<div class="wide100p" style="background-color: palegreen; height: {{ActualChatHistoryTokensPercentage}}%;">
|
||||||
|
</div>
|
||||||
|
<div class="wide100p" style="background-color: cornflowerblue; height: {{allAnchorsTokensPercentage}}%;">
|
||||||
|
</div>
|
||||||
|
<div class="wide100p" style="background-color: mediumpurple; height: {{promptBiasTokensPercentage}}%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container wide50p">
|
||||||
|
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
||||||
|
<div class="flex-container wide100p">
|
||||||
|
<div class="flex1" style="color: grey;">System Info:</div>
|
||||||
|
<div class=""> {{oaiSystemTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Chat Start: </div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{oaiStartTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Jailbreak: </div>
|
||||||
|
<div class="tokenItemizingSubclass">{{oaiJailbreakTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- NSFW: </div>
|
||||||
|
<div class="tokenItemizingSubclass">??</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Nudge: </div>
|
||||||
|
<div class="tokenItemizingSubclass">{{oaiNudgeTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Impersonate: </div>
|
||||||
|
<div class="tokenItemizingSubclass">{{oaiImpersonateTokens}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
||||||
|
<div class="flex-container wide100p">
|
||||||
|
<div class="flex1" style="color: indianred;">Prompt Tokens:</div>
|
||||||
|
<div class=""> {{oaiPromptTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Description: </div>
|
||||||
|
<div class="tokenItemizingSubclass">{{charDescriptionTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Personality:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{charPersonalityTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Scenario: </div>
|
||||||
|
<div class="tokenItemizingSubclass">{{scenarioTextTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Examples:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{examplesStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- User Persona:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{userPersonaStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wide100p flex-container">
|
||||||
|
<div class="flex1" style="color: gold;">World Info:</div>
|
||||||
|
<div class="">{{worldInfoStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="wide100p flex-container">
|
||||||
|
<div class="flex1" style="color: palegreen;">Chat History:</div>
|
||||||
|
<div class=""> {{ActualChatHistoryTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
||||||
|
<div class="wide100p flex-container">
|
||||||
|
<div class="flex1" style="color: cornflowerblue;">Extensions:</div>
|
||||||
|
<div class="">{{allAnchorsTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Summarize: </div>
|
||||||
|
<div class="tokenItemizingSubclass">{{summarizeStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Author's Note:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{authorsNoteStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container ">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Smart Context:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{smartContextStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wide100p flex-container">
|
||||||
|
<div class="flex1" style="color: mediumpurple;">{{}} Bias:</div>
|
||||||
|
<div class="">{{oaiBiasTokens}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="wide100p flex-container flexFlowColumns">
|
||||||
|
<div class="flex-container wide100p">
|
||||||
|
<div class="flex1">Total Tokens in Prompt:</div>
|
||||||
|
<div class=""> {{finalPromptTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container wide100p">
|
||||||
|
<div class="flex1">Max Context (Context Size - Response Length):</div>
|
||||||
|
<div class="">{{thisPrompt_max_context}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
108
public/scripts/templates/itemizationText.html
Normal file
108
public/scripts/templates/itemizationText.html
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
<h3 class="flex-container justifyCenter alignitemscenter">
|
||||||
|
Prompt Itemization
|
||||||
|
<div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div>
|
||||||
|
</h3>
|
||||||
|
Tokenizer: {{selectedTokenizer}}<br>
|
||||||
|
API Used: {{this_main_api}}<br>
|
||||||
|
<span class="tokenItemizingSubclass">
|
||||||
|
Only the white numbers really matter. All numbers are estimates.
|
||||||
|
Grey color items may not have been included in the context due to certain prompt format settings.
|
||||||
|
</span>
|
||||||
|
<hr>
|
||||||
|
<div class="justifyLeft">
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph">
|
||||||
|
<div class="wide100p" style="background-color: indianred; height: {{storyStringTokensPercentage}}%;"></div>
|
||||||
|
<div class="wide100p" style="background-color: gold; height: {{worldInfoStringTokensPercentage}}%;"></div>
|
||||||
|
<div class="wide100p" style="background-color: palegreen; height: {{ActualChatHistoryTokensPercentage}}%;">
|
||||||
|
</div>
|
||||||
|
<div class="wide100p" style="background-color: cornflowerblue; height: {{allAnchorsTokensPercentage}}%;">
|
||||||
|
</div>
|
||||||
|
<div class="wide100p" style="background-color: mediumpurple; height: {{promptBiasTokensPercentage}}%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container wide50p">
|
||||||
|
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
||||||
|
<div class="flex-container wide100p">
|
||||||
|
<div class="flex1" style="color: indianred;"> Character Definitions:</div>
|
||||||
|
<div class=""> {{storyStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Description: </div>
|
||||||
|
<div class="tokenItemizingSubclass">{{charDescriptionTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Personality:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{charPersonalityTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Scenario: </div>
|
||||||
|
<div class="tokenItemizingSubclass">{{scenarioTextTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Examples:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{examplesStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- User Persona:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{userPersonaStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- System Prompt (Instruct):</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{instructionTokens}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wide100p flex-container">
|
||||||
|
<div class="flex1" style="color: gold;">World Info:</div>
|
||||||
|
<div class="">{{worldInfoStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="wide100p flex-container">
|
||||||
|
<div class="flex1" style="color: palegreen;">Chat History:</div>
|
||||||
|
<div class=""> {{ActualChatHistoryTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="wide100p flex-container flexNoGap flexFlowColumn">
|
||||||
|
<div class="wide100p flex-container">
|
||||||
|
<div class="flex1" style="color: cornflowerblue;">Extensions:</div>
|
||||||
|
<div class="">{{allAnchorsTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Summarize: </div>
|
||||||
|
<div class="tokenItemizingSubclass">{{summarizeStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Author's Note:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{authorsNoteStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class=" flex1 tokenItemizingSubclass">-- Smart Context:</div>
|
||||||
|
<div class="tokenItemizingSubclass"> {{smartContextStringTokens}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wide100p flex-container">
|
||||||
|
<div class="flex1" style="color: mediumpurple;">{{}} Bias:</div>
|
||||||
|
<div class="">{{promptBiasTokens}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="wide100p flex-container flexFlowColumns">
|
||||||
|
<div class="flex-container wide100p">
|
||||||
|
<div class="flex1">Total Tokens in Prompt:</div>
|
||||||
|
<div class=""> {{totalTokensInPrompt}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container wide100p">
|
||||||
|
<div class="flex1">Max Context (Context Size - Response Length):</div>
|
||||||
|
<div class="">{{thisPrompt_max_context}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container wide100p">
|
||||||
|
<div class="flex1">- Padding:</div>
|
||||||
|
<div class=""> {{thisPrompt_padding}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container wide100p">
|
||||||
|
<div class="flex1">Actual Max Context Allowed:</div>
|
||||||
|
<div class="">{{thisPrompt_actual}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
Reference in New Issue
Block a user