Skip to content

feat(ui): add frontend-only live prompt token counter - #9477

Open
AkhileshDasari wants to merge 5 commits into
invoke-ai:mainfrom
AkhileshDasari:main
Open

feat(ui): add frontend-only live prompt token counter#9477
AkhileshDasari wants to merge 5 commits into
invoke-ai:mainfrom
AkhileshDasari:main

Conversation

@AkhileshDasari

Copy link
Copy Markdown

Summary

Adds a live, frontend-only prompt token counter for the positive and negative prompt inputs in the linear UI.

  • Why: Eliminates backend API queries for tokenization to avoid server contention while giving users real-time visual feedback on token limits.
  • How:
    • Implemented pure-JS CLIP BPE tokenization for CLIP-based models (SD 1.5, SD 2.0, SDXL, FLUX) and fallback estimation for T5/Qwen3/unknown models.
    • Tokenizers are cached in a module-level Map and executed asynchronously with 300ms debouncing.
    • Added a Redux system slice preference setting (shouldShowTokenCounter) with state migration, accessible via a user toggle in Settings -> Prompt.
    • Added <PromptTokenCounter /> overlay component in ParamPositivePrompt.tsx and ParamNegativePrompt.tsx displaying Tokens: X / Y with visual warning states (yellow when approaching limit, red when exceeding).
    • Skips all execution when the setting is toggled off.

Related Issues / Discussions

Closes #9247

QA Instructions

  1. Open Settings (gear icon) -> navigate to the Prompt tab -> enable Show token counter.
  2. Type into the positive or negative prompt text boxes.
  3. Observe the Tokens: X / Y display in the top right of the prompt box updating live with a ~300ms debounce.
  4. Verify tokenizer limits shift appropriately when selecting different base models (e.g., 77 for SD 1.5 / SDXL vs 512 for Qwen3 / Z-Image).
  5. Type past ~85% of the limit (e.g., >65 tokens for SD 1.5) to confirm yellow warning highlight, and past 77 tokens to confirm red error highlight.
  6. Disable Show token counter in Settings to confirm the counter turns off completely and performs zero token calculations.

Merge Plan

Standard merge. All 1,718 unit tests passed cleanly with 0 TypeScript compiler errors and 0 ESLint warnings.

Checklist

  • The PR has a short but descriptive title, suitable for a changelog (feat(frontend): add live frontend-only prompt token counter)
  • Tests added / updated (features/prompt/tokenCounter/tokenizers.test.ts)
  • ❗Changes to a redux slice have a corresponding migration (systemSlice.ts state migration check for shouldShowTokenCounter)
  • Documentation added / updated
  • Updated What's New copy (if doing a release after this PR)

@github-actions github-actions Bot added the frontend PRs that change frontend files label Aug 7, 2026
@lstein lstein added the 6.14.1 label Aug 8, 2026
@lstein lstein moved this to 6.14.1: Bug fixes to 6.14.0 in Invoke - Community Roadmap Aug 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

6.14.1 frontend PRs that change frontend files

Projects

Status: 6.14.1: Bug fixes to 6.14.0

Development

Successfully merging this pull request may close these issues.

[enhancement]: Add a "token counter" to the prompt section to show how many tokens are about to be used

3 participants