1
<div class="wide100p">
2
    <h3 data-i18n="Token Counter">Token Counter</h3>
3
    <div class="justifyLeft flex-container flexFlowColumn">
4
        <h4 data-i18n="Type / paste in the box below to see the number of tokens in the text.">Type / paste in the box below to see the number of tokens in the text.</h4>
5
        <p><span data-i18n="Selected tokenizer:">Selected tokenizer:</span> {{tokenizerName}}</p>
6
        <div data-i18n="Input:">Input:</div>
7
        <textarea id="token_counter_textarea" class="wide100p textarea_compact" rows="1"></textarea>
8
        <div><span data-i18n="Tokens:">Tokens:</span> <span id="token_counter_result">0</span></div>
9
        <hr>
10
        <div data-i18n="Tokenized text:">Tokenized text:</div>
11
        <div id="tokenized_chunks_display" class="wide100p">—</div>
12
        <hr>
13
        <div data-i18n="Token IDs:">Token IDs:</div>
14
        <textarea id="token_counter_ids" class="wide100p textarea_compact" readonly rows="1">—</textarea>
15
    </div>
16
</div>