UIController

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.

HTMLTextAreaElement

Main text input area (#text-input)

HTMLSelectElement

Model selection dropdown (#model-select)

HTMLButtonElement

Clear button (#clear-btn)

HTMLElement

Container for visual token display (#tokens-container)

HTMLElement

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

HTMLElement

Token count display (#token-count)

HTMLElement

Character count display (#char-count)

HTMLElement

Word count display (#word-count)

HTMLElement

Cost estimate display (#cost-estimate)

Methods

initializeElements()

Initializes and caches DOM element references.

initializeElements()

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)

Object

required

Object containing event handler functions

Function

Called when text input changes

Function

Called when model selection changes

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()

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()

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)

Object

default:"{}"

Statistics object with token, character, word counts and cost

number

Number of tokens

number

Number of characters

number

Number of words

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

const controller = new UIController();

// Reset all stats to zero
controller.updateStatistics({
  tokenCount: 0,
  charCount: 0,
  wordCount: 0,
  costEstimate: 0
});

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

updateModelInfo()

Updates the model information display.

updateModelInfo(modelId, tokenizationService)

string

required

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

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)

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

const controller = new UIController();

// Show empty state
controller.updateTokenVisualization([]);
// Displays: "Escribe algo para ver los 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)

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)

const tokens = [
  { 
    text: 'Hello', 
    type: 'palabra', 
    tokenId: 45123,
    isApproximate: true 
  }
];

controller.updateTokensList(tokens);

// Displays:
// ⚠ IDs Aproximados - tiktoken no disponible. Los números mostrados son estimaciones.
//
// "Hello" #1 (palabra) → ID ≈ 45123 (Aproximado)

highlightTokenInList()

Highlights a specific token in the detailed list.

highlightTokenInList(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();
  }
});

const controller = new UIController();
const tokenizer = new TokenizationService();
const calculator = new StatisticsCalculator();

await tokenizer.waitForInitialization();

controller.setEventHandlers({
  onTextChange: async () => {
    const text = controller.getTextInput();
    const modelId = controller.getSelectedModel();
    
    if (!text.trim()) {
      controller.resetVisualizations();
      return;
    }
    
    controller.showLoading();
    
    const tokenResult = await tokenizer.tokenizeText(text, modelId);
    const stats = calculator.calculateStatistics(text, tokenResult, modelId);
    
    controller.updateStatistics(stats);
    controller.updateTokenVisualization(tokenResult.tokens);
    controller.updateTokensList(tokenResult.tokens);
  }
});

// Trigger initial update
controller.triggerModelChange();

const controller = new UIController();

// Get current values
const text = controller.getTextInput();
const model = controller.getSelectedModel();

console.log('Text:', text);
console.log('Model:', model);

// Update statistics manually
controller.updateStatistics({
  tokenCount: 42,
  charCount: 156,
  wordCount: 28,
  costEstimate: 0.000105
});

// Update tokens
controller.updateTokenVisualization([
  { text: 'Hello', type: 'palabra', id: 'token_0', tokenId: 9906 }
]);

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

​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

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