Implementation:AUTOMATIC1111 Stable diffusion webui Token Counters
| Knowledge Sources | |
|---|---|
| Domains | UI_Frontend, Tokenization, Prompt_Analysis |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Manages token counter display and updates for prompt and negative prompt textareas in both txt2img and img2img tabs.
Description
This JavaScript module sets up and maintains token count displays for all four prompt fields (txt2img prompt, txt2img negative prompt, img2img prompt, img2img negative prompt). The setupTokenCounting function repositions the counter element as a sibling of the prompt element, registers a debounced (800ms) onEdit callback that triggers the server-side token counting button click when the counter is visible, and stores the update function in the promptTokenCountUpdateFunctions dictionary keyed by both prompt ID and button ID. The update_txt2img_tokens and update_img2img_tokens functions are called from Gradio when prompt values change, triggering both positive and negative token counter updates. The recalculate_prompts_* functions provide a way to force recalculation from Gradio callbacks. The toggleTokenCountingVisibility function shows or hides counters based on the opts.disable_token_counters setting. The runCodeForTokenCounters helper applies a given function across all four prompt/counter/button ID triples. Setup runs on UI load, and visibility is toggled whenever options change.
Usage
Token counters appear automatically above the prompt textareas showing the current token count. They update as the user types (with an 800ms debounce). The counters can be disabled in Settings via the "disable_token_counters" option. The system works transparently with both txt2img and img2img prompts.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/token-counters.js
- Lines: 1-87
Signature
let promptTokenCountUpdateFunctions = {}
function update_txt2img_tokens(...args)
function update_img2img_tokens(...args)
function update_token_counter(button_id)
function recalculatePromptTokens(name)
function recalculate_prompts_txt2img()
function recalculate_prompts_img2img()
function setupTokenCounting(id, id_counter, id_button)
function toggleTokenCountingVisibility(id, id_counter, id_button)
function runCodeForTokenCounters(fun)
Import
// Loaded automatically by the web UI as part of the javascript/ directory
// update_txt2img_tokens, update_img2img_tokens, recalculate_prompts_* are called by Gradio
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | Yes | The Gradio element ID of the prompt textarea (e.g., "txt2img_prompt") |
| id_counter | string | Yes | The Gradio element ID of the token counter display element |
| id_button | string | Yes | The Gradio element ID of the hidden button that triggers server-side token counting |
| opts.disable_token_counters | bool | No | Global option to hide/show token counter displays |
Outputs
| Name | Type | Description |
|---|---|---|
| (side effect) | DOM | Repositions counter elements and triggers server-side token count updates |
| args | array | Passthrough of Gradio arguments from update_*_tokens functions |
Usage Examples
// Token counters are set up automatically on UI load.
// Gradio calls these when prompt values change:
update_txt2img_tokens(prompt_value, negative_prompt_value);
update_img2img_tokens(prompt_value, negative_prompt_value);
// Force recalculation (called by Gradio callbacks):
recalculate_prompts_txt2img();
recalculate_prompts_img2img();
// The setup creates a debounced update for each prompt field:
// When user types in txt2img_prompt, after 800ms of inactivity,
// the txt2img_token_button is clicked to trigger server-side counting.
// Token counter IDs follow the pattern:
// txt2img_prompt -> txt2img_token_counter / txt2img_token_button
// txt2img_neg_prompt -> txt2img_negative_token_counter / txt2img_negative_token_button
// img2img_prompt -> img2img_token_counter / img2img_token_button
// img2img_neg_prompt -> img2img_negative_token_counter / img2img_negative_token_button