1
<h3 class="flex-container justifyCenter alignitemscenter">
2
    <span data-i18n="Prompt Itemization">Prompt Itemization</span>
3
    <div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button" title="Show Raw Prompt" data-i18n="[title]Show Raw Prompt"></div>
4
    <div id="copyPromptToClipboard" class="fa-solid fa-copy menu_button" title="Copy Prompt" data-i18n="[title]Copy Prompt"></div>
5
    <div id="diffPrevPrompt" class="fa-solid fa-code-compare menu_button" title="Show Prompt Differences" data-i18n="[title]Show Prompt Differences"></div>
6
</h3>
7
<div>
8
    <div>
9
        <span data-i18n="API/Model:">API/Model:</span> {{mainApiFriendlyName}} {{#if apiUsed}}({{apiUsed}}){{/if}} {{#if modelUsed}}&ndash; {{modelUsed}}{{/if}}
10
    </div>
11
    <div>
12
        <small><span data-i18n="Preset:">Preset:</span> {{presetName}}</small>
13
        <span>|</span>
14
        <small><span data-i18n="Tokenizer:">Tokenizer:</span> {{selectedTokenizer}}</small>
15
    </div>
16
</div>
17

18
<span class="tokenItemizingSubclass" data-i18n="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.">
19
    Only the white numbers really matter. All numbers are estimates.
20
    Grey color items may not have been included in the context due to certain prompt format settings.
21
</span>
22
<hr>
23
<div class="justifyLeft">
24
    <div class="flex-container">
25
        <div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph">
26
            <div class="wide100p" style="background-color: indianred; height: {{storyStringTokensPercentage}}%;"></div>
27
            <div class="wide100p" style="background-color: gold; height: {{worldInfoStringTokensPercentage}}%;"></div>
28
            <div class="wide100p" style="background-color: palegreen; height: {{ActualChatHistoryTokensPercentage}}%;">
29
            </div>
30
            <div class="wide100p" style="background-color: cornflowerblue; height: {{allAnchorsTokensPercentage}}%;">
31
            </div>
32
            <div class="wide100p" style="background-color: mediumpurple; height: {{promptBiasTokensPercentage}}%;">
33
            </div>
34
        </div>
35
        <div class="flex-container wide50p">
36
            <div class="wide100p flex-container flexNoGap flexFlowColumn">
37
                <div class="wide100p flex-container">
38
                    <div class="flex1" style="color: indianred;"> Character Definitions:</div>
39
                    <div class=""> {{storyStringTokens}}</div>
40
                </div>
41
                <div class="flex-container">
42
                    <div class=" flex1 tokenItemizingSubclass">-- Description: </div>
43
                    <div class="tokenItemizingSubclass">{{charDescriptionTokens}}</div>
44
                </div>
45
                <div class="flex-container">
46
                    <div class=" flex1 tokenItemizingSubclass">-- Personality:</div>
47
                    <div class="tokenItemizingSubclass"> {{charPersonalityTokens}}</div>
48
                </div>
49
                <div class="flex-container">
50
                    <div class=" flex1 tokenItemizingSubclass">-- Scenario: </div>
51
                    <div class="tokenItemizingSubclass">{{scenarioTextTokens}}</div>
52
                </div>
53
                <div class="flex-container">
54
                    <div class=" flex1 tokenItemizingSubclass">
55
                        <span>-- Examples:</span>
56
                        {{#if examplesCount}}<small>({{examplesCount}})</small>{{/if}}
57
                    </div>
58
                    <div class="tokenItemizingSubclass"> {{examplesStringTokens}}</div>
59
                </div>
60
                <div class="flex-container">
61
                    <div class=" flex1 tokenItemizingSubclass">-- User Persona:</div>
62
                    <div class="tokenItemizingSubclass"> {{userPersonaStringTokens}}</div>
63
                </div>
64
                <div class="flex-container">
65
                    <div class=" flex1 tokenItemizingSubclass">-- System Prompt (Instruct):</div>
66
                    <div class="tokenItemizingSubclass"> {{instructionTokens}}</div>
67
                </div>
68
            </div>
69
            <div class="wide100p flex-container">
70
                <div class="flex1" style="color: gold;"><span data-i18n="World Info:">World Info:</span></div>
71
                <div class="">{{worldInfoStringTokens}}</div>
72
            </div>
73
            <div class="wide100p flex-container">
74
                <div class="flex1" style="color: palegreen;">
75
                    <span data-i18n="Chat History:">Chat History:</span>
76
                    {{#if messagesCount}}<small>({{messagesCount}})</small>{{/if}}
77
                </div>
78
                <div class=""> {{ActualChatHistoryTokens}}</div>
79
            </div>
80
            <div class="wide100p flex-container flexNoGap flexFlowColumn">
81
                <div class="wide100p flex-container">
82
                    <div class="flex1" style="color: cornflowerblue;"><span data-i18n="Extensions:">Extensions:</span></div>
83
                    <div class="">{{allAnchorsTokens}}</div>
84
                </div>
85
                <div class="flex-container">
86
                    <div class=" flex1 tokenItemizingSubclass">-- Summarize: </div>
87
                    <div class="tokenItemizingSubclass">{{summarizeStringTokens}}</div>
88
                </div>
89
                <div class="flex-container">
90
                    <div class=" flex1 tokenItemizingSubclass">-- Author's Note:</div>
91
                    <div class="tokenItemizingSubclass"> {{authorsNoteStringTokens}}</div>
92
                </div>
93
                <div class="flex-container">
94
                    <div class=" flex1 tokenItemizingSubclass">-- Smart Context:</div>
95
                    <div class="tokenItemizingSubclass"> {{smartContextStringTokens}}</div>
96
                </div>
97
                <div class="flex-container ">
98
                    <div class=" flex1 tokenItemizingSubclass">-- Vector Storage (Chats):</div>
99
                    <div class="tokenItemizingSubclass"> {{chatVectorsStringTokens}}</div>
100
                </div>
101
                <div class="flex-container ">
102
                    <div class=" flex1 tokenItemizingSubclass">-- Vector Storage (Data Bank):</div>
103
                    <div class="tokenItemizingSubclass"> {{dataBankVectorsStringTokens}}</div>
104
                </div>
105
            </div>
106
            <div class="wide100p flex-container">
107
                <div class="flex1" style="color: mediumpurple;"><span>&lcub;&lcub;&rcub;&rcub;</span> <span data-i18n="Bias:">Bias:</span></div>
108
                <div class="">{{promptBiasTokens}}</div>
109
            </div>
110
        </div>
111

112
    </div>
113
    <hr>
114
    <div class="wide100p flex-container flexFlowColumns">
115
        <div class="flex-container wide100p">
116
            <div class="flex1"><span data-i18n="Total Tokens in Prompt:">Total Tokens in Prompt:</span></div>
117
            <div class=""> {{totalTokensInPrompt}}</div>
118
        </div>
119
        <div class="flex-container wide100p">
120
            <div class="flex1"><span data-i18n="Max Context">Max Context</span> <span data-i18n="(Context Size - Response Length)">(Context Size - Response Length)</span>:</div>
121
            <div class="">{{thisPrompt_max_context}}</div>
122
        </div>
123
        <div class="flex-container wide100p">
124
            <div class="flex1">- Padding:</div>
125
            <div class=""> {{thisPrompt_padding}}</div>
126
        </div>
127
        <div class="flex-container wide100p">
128
            <div class="flex1">Actual Max Context Allowed:</div>
129
            <div class="">{{thisPrompt_actual}}</div>
130
        </div>
131
    </div>
132
</div>
133
<hr>
134
<div id="rawPromptPopup" class="list-group">
135
    <div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
136
</div>