UIController - Tokenizador

Overview

The UIController class handles all user interface operations in Tokenizador. It manages DOM elements, event handlers, and visual updates for statistics, token visualization, and model information.

This controller follows the separation of concerns principle, isolating all DOM manipulation from business logic.

Constructor

Creates a new UIController instance and initializes the interface.

const controller = new UIController();

Initialization steps:

Caches all DOM element references
Binds event listeners to interactive elements
Updates footer year to current year
Sets default model selection to “gpt-4o”

Properties

elements

Cached references to all DOM elements used by the controller.

elements.textInput

HTMLTextAreaElement

Main text input area (#text-input)

elements.modelSelect

HTMLSelectElement

Model selection dropdown (#model-select)

elements.clearBtn

HTMLButtonElement

Clear button (#clear-btn)

elements.tokensContainer

HTMLElement

Container for visual token display (#tokens-container)

elements.tokensArray

HTMLElement

Container for token list with IDs (#tokens-array)

elements.tokenCount

HTMLElement

Token count display (#token-count)

elements.charCount

HTMLElement

Character count display (#char-count)

elements.wordCount

HTMLElement

Word count display (#word-count)

elements.costEstimate

HTMLElement

Cost estimate display (#cost-estimate)

Methods

initializeElements()

Initializes and caches DOM element references.

initializeElements()

returns

Object

Object containing all cached DOM elements

This method is called automatically by the constructor. It uses document.getElementById() to retrieve and cache elements for efficient access.

If any required DOM elements are missing, methods that use them will safely skip operations.

bindEvents()

Binds event listeners to interactive elements.

bindEvents()

Events bound:

input on text area → triggers onTextChange callback
change on model select → triggers onModelChange callback
click on clear button → triggers onClear callback
keydown (Ctrl+K) → focuses text input

const controller = new UIController();

// Set custom event handlers
controller.setEventHandlers({
  onTextChange: () => console.log('Text changed'),
  onModelChange: () => console.log('Model changed'),
  onClear: () => console.log('Clear clicked')
});

setEventHandlers()

Sets callback functions for UI events.

setEventHandlers(handlers)

handlers

Object

required

Object containing event handler functions

handlers.onTextChange

Function

Called when text input changes

handlers.onModelChange

Function

Called when model selection changes

handlers.onClear

Function

Called when clear button is clicked

const controller = new UIController();

controller.setEventHandlers({
  onTextChange: async () => {
    console.log('Analyzing text...');
    // Perform analysis
  },
  onModelChange: async () => {
    console.log('Model changed');
    // Update analysis with new model
  },
  onClear: () => {
    console.log('Clearing input');
    // Reset displays
  }
});

getTextInput()

Retrieves the current text from the input area.

getTextInput()

returns

string

Current text content (empty string if element not found)

const controller = new UIController();
const text = controller.getTextInput();

if (text.trim()) {
  console.log('User entered:', text);
} else {
  console.log('Input is empty');
}

getSelectedModel()

Retrieves the currently selected model ID.

getSelectedModel()

returns

string

Selected model ID (defaults to “gpt-4o” if not found)

const controller = new UIController();
const modelId = controller.getSelectedModel();

console.log('Current model:', modelId);
// Output: "gpt-4o" or "claude-3.5-sonnet" etc.

clearTextInput()

Clears the text input and focuses it.

clearTextInput()

Sets the input value to empty string and focuses the element for immediate typing.

const controller = new UIController();

// Clear and focus input
controller.clearTextInput();
// User can start typing immediately

updateStatistics()

Updates the statistics display with new values.

updateStatistics(stats)

stats

Object

default:"{}"

Statistics object with token, character, word counts and cost

stats.tokenCount

number

Number of tokens

stats.charCount

number

Number of characters

stats.wordCount

number

Number of words

stats.costEstimate

number

Estimated cost in dollars

const controller = new UIController();

controller.updateStatistics({
  tokenCount: 1247,
  charCount: 5832,
  wordCount: 892,
  costEstimate: 0.002494
});

// Display updates to:
// Token Count: 1,247
// Character Count: 5,832
// Word Count: 892
// Cost Estimate: $0.002494

Numbers are automatically formatted with thousand separators (e.g., 1,247) for better readability.

updateModelInfo()

Updates the model information display.

updateModelInfo(modelId, tokenizationService)

modelId

string

required

Model identifier (e.g., “gpt-4o”)

tokenizationService

TokenizationService

required

Tokenization service instance for retrieving algorithm names

Updates displayed:

Model name
Context limit (formatted with thousands separator)
Tokenizer type (e.g., “Tokenizador GPT-4”)
Pricing (input and output costs per 1M tokens)
Active tokenization algorithm
Model details link (if URL available)

const controller = new UIController();
const service = new TokenizationService();

controller.updateModelInfo('gpt-4o', service);

// Displays:
// Model: gpt-4o
// Context Limit: 128,000
// Tokenizer: Tokenizador GPT-4o
// Cost: Entrada: $2.50/1M | Salida: $10.00/1M
// Algorithm: o200k_base (GPT Más Reciente)

updateTokenVisualization()

Updates the visual token display with color-coded tokens.

updateTokenVisualization(tokens)

tokens

Array<Object>

default:"[]"

Array of token objects from tokenization

Creates <span> elements for each token with:

CSS class based on token type (for color coding)
approximate-id class if token ID is approximate
Click handler to highlight token in list

const controller = new UIController();

const tokens = [
  { text: 'Hello', type: 'palabra', id: 'token_0', tokenId: 9906 },
  { text: ' ', type: 'espacio_en_blanco', id: 'token_1', tokenId: 220 },
  { text: 'world', type: 'palabra', id: 'token_2', tokenId: 1917 },
  { text: '!', type: 'punctuation', id: 'token_3', tokenId: 0 }
];

controller.updateTokenVisualization(tokens);
// Creates color-coded display with clickable tokens

Click any token in the visualization to scroll to and highlight it in the detailed token list.

updateTokensList()

Updates the detailed token list with IDs and types.

updateTokensList(tokens)

tokens

Array<Object>

default:"[]"

Array of token objects

Display includes:

Precision indicator (real tiktoken IDs vs approximate)
Token text (escaped for HTML)
Sequential number
Token type
Token ID with precision indicator (= for real, ≈ for approximate)

const controller = new UIController();

const tokens = [
  { 
    text: 'Hello', 
    type: 'palabra', 
    id: 'token_0', 
    tokenId: 9906,
    isApproximate: false 
  },
  { 
    text: 'world', 
    type: 'palabra', 
    id: 'token_1', 
    tokenId: 1917,
    isApproximate: false 
  }
];

controller.updateTokensList(tokens);

// Displays:
// ✓ IDs Reales de tiktoken - Los números son precisos y reproducibles.
//
// "Hello" #1 (palabra) → ID = 9906 (Tiktoken Real)
// "world" #2 (palabra) → ID = 1917 (Tiktoken Real)

highlightTokenInList()

Highlights a specific token in the detailed list.

highlightTokenInList(tokenId)

tokenId

string

required

Token ID to highlight (e.g., “token_0”)

Behavior:

Removes previous highlights
Highlights selected token with primary color
Scrolls token into view (smooth scroll)
Automatically removes highlight after 2 seconds

const controller = new UIController();

// Highlight the third token
controller.highlightTokenInList('token_2');

// Token scrolls into view and is highlighted for 2 seconds

resetVisualizations()

Resets both token visualizations to empty state.

resetVisualizations()

Displays placeholder messages:

Token container: “Escribe algo para ver los tokens…”
Token list: “Los tokens aparecerán aquí…“

const controller = new UIController();

// Clear all visualizations
controller.resetVisualizations();

showLoading()

Displays loading state during analysis.

showLoading()

Shows “Analizando tokens…” message in the token container.

const controller = new UIController();

// Show loading state
controller.showLoading();

// Perform analysis...
await analyzeText();

// Update with results
controller.updateTokenVisualization(tokens);

triggerModelChange()

Manually triggers the model change event.

triggerModelChange()

Calls the onModelChange callback if it has been set. Useful for initialization or programmatic model switching.

const controller = new UIController();

controller.setEventHandlers({
  onModelChange: async () => {
    console.log('Model changed');
    await updateAnalysis();
  }
});

// Trigger manually
controller.triggerModelChange();

bindKeyboardShortcuts()

Binds keyboard shortcuts for improved UX.

bindKeyboardShortcuts()

Shortcuts:

Ctrl+K: Focus text input

// Already bound automatically in constructor
// Press Ctrl+K anywhere to focus the input

Keyboard shortcuts improve accessibility and power user experience.

updateYear()

Updates the copyright year in the footer.

updateYear()

Sets the #current-year element to the current year from Date.

Usage Examples

const controller = new UIController();

// Set event handlers
controller.setEventHandlers({
  onTextChange: async () => {
    const text = controller.getTextInput();
    const model = controller.getSelectedModel();
    
    controller.showLoading();
    const tokens = await tokenizeText(text, model);
    controller.updateTokenVisualization(tokens);
  },
  
  onModelChange: async () => {
    const model = controller.getSelectedModel();
    controller.updateModelInfo(model, tokenizationService);
  },
  
  onClear: () => {
    controller.clearTextInput();
    controller.resetVisualizations();
  }
});

DOM Element IDs

The UIController expects these elements in the HTML:

Input & Controls

text-input - Main textarea for text input
model-select - Model selection dropdown
clear-btn - Clear button

Statistics Display

token-count - Token count display
char-count - Character count display
word-count - Word count display
cost-estimate - Cost estimate display

Model Information

selected-model-name - Model name display
context-limit - Context limit display
tokenization-type - Tokenizer type display
cost-per-1k - Pricing information display
active-algorithm - Algorithm description display
model-details-link - Link to model documentation

Visualizations

tokens-container - Visual token display area
tokens-array - Detailed token list area

Footer

current-year - Copyright year display

CSS Classes

Tokens are assigned these CSS classes for styling:

.token

Base token class

.palabra

Word token

.subword

Subword token

.number

Numeric token

.punctuation

Punctuation token

.special

Special character

.espacio_en_blanco

Whitespace token

.approximate-id

Approximate token ID indicator

TokenAnalyzer

Main application orchestrator

TokenizationService

Tokenization logic

StatisticsCalculator

Statistics calculations

Architecture

System architecture overview

Core Classes

Configuration

​Overview

​Constructor

​Properties

​elements

​Methods

​initializeElements()

​bindEvents()

​setEventHandlers()

​getTextInput()

​getSelectedModel()

​clearTextInput()

​updateStatistics()

​updateModelInfo()

​updateTokenVisualization()

​updateTokensList()

​highlightTokenInList()

​resetVisualizations()

​showLoading()

​triggerModelChange()

​bindKeyboardShortcuts()

​updateYear()

​Usage Examples

​DOM Element IDs

​CSS Classes

.token

.palabra

.subword

.number

.punctuation

.special

.espacio_en_blanco

.approximate-id

​See Also

TokenAnalyzer

TokenizationService

StatisticsCalculator

Architecture

Build docs developers (and LLMs) love

Overview

Constructor

Properties

elements

Methods

initializeElements()

bindEvents()

setEventHandlers()

getTextInput()

getSelectedModel()

clearTextInput()

updateStatistics()

updateModelInfo()

updateTokenVisualization()

updateTokensList()

highlightTokenInList()

resetVisualizations()

showLoading()

triggerModelChange()

bindKeyboardShortcuts()

updateYear()

Usage Examples

DOM Element IDs

CSS Classes

See Also