Token 计算器

概述

Token 计算器是一个为 LLM 场景设计的精确 Token 计数工具。无论是写 Prompt 时控制上下文长度、对比不同模型的实际 Token 消耗，还是调试 API 调用的 Token 超限问题，它都能帮你快速得到精确数字。

核心场景

你有一个很长的 Prompt 想知道会不会超模型上下文限制？想对比 GPT-4o 和 Claude 对同一段文本的 Token 消耗差异？需要精确估算包含图片在内的多模态输入总 Token 数？这个工具就是为你准备的。

核心功能

• 双模式计算：支持「按模型」和「按分词器」两种计算模式，既能精确匹配你正在使用的模型，也能用特定 Tokenizer 库做基准测试
• 多模态支持：除了纯文本，还支持图片、视频、音频的 Token 估算，覆盖 OpenAI 瓦片法、Gemini 2.0 等多种视觉计算规则
• Token 可视化：实时展示文本被切分成 Token 后的每一个分块，鼠标悬停可查看 Token ID，帮你直观理解分词逻辑
• 离线 Web Worker 计算：核心计算在独立线程中执行，输入大段文本也不会卡住 UI
• 智能回退估算：当未匹配到精确 Tokenizer 时，自动启用基于字符类型（中文 / 英文 / 特殊符号）的经验公式进行估算

快速上手

首次使用 3 步走

第一步：打开工具

在左侧工具列表中找到 Token 计算器，点击进入。主界面分为上方的工具栏和下方的左右双栏——左侧输入区、右侧结果区。

TODO: 截图 - Token 计算器整体界面，标注工具栏、左侧输入区、右侧结果区

第二步：输入或粘贴文本

直接在左侧输入区键入文本，或点击工具栏的 粘贴 按钮从剪贴板导入，也支持拖放文本文件到输入区域。

TODO: 截图 - 输入区域，标注文本输入框和字符数统计标签

第三步：查看结果

输入文本后，右侧结果区会自动显示 Token 总数、文本 / 图片 / 视频 / 音频的分布详情，以及每个 Token 的分块可视化。

TODO: 截图 - 结果区展示 Total Tokens 大数字、分布进度条和 Token 分块

选择计算模型

在工具栏左侧，你可以通过两个控件切换计算目标：

1. 计算模式：点击「按模型」或「按分词器」切换
2. 选择器：下拉选择具体的模型或分词器

选中目标后，右侧结果会立即刷新为对应模型的分词结果。

TODO: 截图 - 工具栏切换计算模式，标注「按模型」/「按分词器」按钮和下拉选择器

功能详解

工具栏（ToolBar）

工具栏位于界面顶部，提供所有全局操作入口。

计算模式切换

• 按模型：根据你选中的 LLM 模型自动匹配对应的 Tokenizer。系统会从已配置的 LLM 渠道中获取模型列表，并按模型 ID 自动匹配合适的 Tokenizer 库（如 GPT-4o 系列匹配 gpt4o 分词器、Claude 系列匹配 claude 分词器）
• 按分词器：直接选择底层 Tokenizer 库，不依赖模型配置。适合做 Tokenizer 之间的横向对比

支持的分词器	对应模型系列
gpt4o	GPT-4o、GPT-5、o1、o3、o4 系列
gpt4	GPT-4、GPT-3.5 系列
claude	Claude 全系列
gemini	Gemini、Gemma 全系列、Veo 系列
llama3_2	Llama 全系列
deepseek_v3	DeepSeek V3、R1 等系列
qwen3	Qwen 全系列

显示上限控制

在工具栏右侧的「显示上限」选择器中，你可以控制 Token 可视化区域最多显示多少个 Token 分块。当输入文本很长时，限制显示数量可以避免浏览器渲染卡顿。

可选值：5,000 / 10,000 / 20,000 / 50,000 / 100,000 / 1,000,000 / 10,000,000

TODO: 截图 - 工具栏右侧显示上限选择器

快捷操作按钮

按钮	说明
粘贴	从系统剪贴板读取文本并填入输入区
复制	将输入区文本复制到系统剪贴板
清空	清空输入区文本和所有已添加的媒体项

输入区（InputPanel）

左侧输入区是数据入口，支持纯文本和媒体文件两种输入方式。

文本输入

• 直接键入或粘贴文本
• 拖放文本文件（.txt、.md 等）到输入区，系统会自动读取文件内容
• 底部实时显示 字符数，方便你大致了解文本量级

媒体附件

除了文本，你还可以添加图片、视频、音频来计算它们的 Token 消耗：

媒体类型	添加方式	参数
图片	点击「添加图片」或拖放图片文件	宽度（px）、高度（px）
视频	点击「添加视频」或拖放视频文件	时长（秒）
音频	点击「添加音频」或拖放音频文件	时长（秒）

拖放文件时的智能处理：

• 拖入图片文件时，系统会自动读取图片的真实尺寸（宽高）
• 拖入视频 / 音频文件时，会尝试读取媒体文件的元数据获取时长
• 如果元数据读取失败，会使用默认值作为回退

添加成功后，媒体项会以卡片形式展示在输入区底部，显示文件名和 Token 数。

TODO: 截图 - 输入区添加了图片和视频媒体项的示例

结果区（ResultPanel）

右侧结果区展示计算结果，分为统计概览和 Token 可视化两大部分。

统计概览

汇总卡片 以醒目的大数字展示 Total Tokens（总 Token 数），并按类型展示分布：

项目	说明
文本	文本框对应的 Token 数量，带蓝色进度条
图片	所有图片的 Token 合计，带绿色进度条
视频	所有视频的 Token 合计，带紫色进度条
音频	所有音频的 Token 合计，带橙色进度条

如果有某类媒体未添加，对应项目会以半透明灰度显示。

估算标识：如果是通过经验公式估算（而非精确 Tokenizer）的结果，总数旁边会显示「估算值」黄色标签。

TODO: 截图 - 汇总卡片，标注 Total Tokens 大数字、各类型进度条、估算标签

详情网格 在汇总卡片下方提供三个辅助信息：

指标	说明
分词器	实际使用的 Tokenizer 名称（如 gpt4o、claude）
字符数	输入的原始字符数（已过滤 Base64 图片数据）
Token/字符	文本 Token 数与字符数的比值，反映 Token 密度

TODO: 截图 - 详情网格，标注三个指标

Token 可视化

这是工具最直观的特色功能——将文本按 Token 切分后，每个 Token 用彩色块展示，颜色交替方便区分：

• 颜色交替：每个 Token 块按顺序轮流使用 6 种高亮色（蓝、绿、橙、紫、粉、青），视觉上易于区分
• Token ID 显示：每个 Token 块下方小字显示其数字 ID，鼠标悬停还可以在 Tooltip 中查看完整信息
• 虚拟滚动：当 Token 数量很多时，系统使用虚拟滚动技术，只渲染当前可见的 Token 块，保证流畅滚动
• 复制 Token：点击可视化区域上方的「复制」按钮，可以将所有 Token 的 ID 和文本以结构化格式复制到剪贴板

TODO: 截图 - Token 可视化区域，展示多个彩色 Token 块，标注 ID 和颜色

截断提示：如果文本 Token 总数超过了「显示上限」设置，可视化区域顶部会显示提示信息（如「显示 5,000 / 12,345 个文本 Token」）。

面板拖拽调整

输入区和结果区之间的分割线支持拖拽调整宽度。鼠标悬停在分割线上时，它会变成蓝色高亮。在窄屏（小于 768px）时，布局会自动切换为上下排列。

高级用法

多模态场景精确预算

在编写包含图片的 Prompt 时，你可以：

1. 在输入区写入你的文本 Prompt
2. 点击 添加图片，输入图片的宽高尺寸
3. 选择对应的模型（如 gpt-4o）
4. 右侧结果会展示文本 Token + 图片 Token 的总和

这样在发送给 API 之前，你就能精确知道这次请求会消耗多少 Token，避免超限报错。

不同 Tokenizer 对比

切换到「按分词器」模式，分别选择 gpt4o 和 claude 计算同一段文本，观察它们的 Token 数量差异。这在不同平台间迁移 Prompt 时尤其有用——有时候即使文本相同，不同模型消耗的 Token 数也可能相差 20% 以上。

拖放文件批量计算

直接拖放多个文件（文本 + 图片 + 视频）到输入区，系统会自动识别文件类型并分别处理——文本文件自动读取内容填入输入框，图片视频自动提取尺寸或时长加入媒体列表。

常见问题

Q：为什么显示「估算值」？

当工具无法为当前选中的模型找到精确的 Tokenizer 时，会自动启用回退估算。这通常发生在：

1. 你选择的模型比较新，还未被收录到 Tokenizer 库中
2. 你选择的是自定义模型或未命名模型

估算基于经验公式（中文约 1.5 字符/Token、英文约 4 字符/Token），结果可能有 10-20% 的误差。它虽然不是最精确的，但足以让你对 Token 消耗有个大概概念。

Q：为什么我的模型在列表里找不到？

工具从你配置的 LLM 渠道中读取模型列表。如果你的模型没有出现在下拉列表中：

1. 检查是否在 设置 > LLM 服务 中正确配置了渠道并启用了它
2. 确保模型在渠道中被标记为「已启用」
3. 如果你的模型 ID 无法匹配任何已知 Tokenizer（如使用自定义代理），工具会显示为可用模型，但计算结果可能显示「估算值」

Q：图片的 Token 是怎么计算的？

不同模型的计算规则不同：

• OpenAI 瓦片法（GPT-4o、o1 等）：先将图片缩放到不超过 2048px，短边再缩放到 768px，然后切成 512px 的瓦片，每片 170 Token + 基础费 85 Token
• Gemini 2.0 方法：小图（≤384px）固定 258 Token；大图按 768px 瓦片切分，每片 258 Token
• 固定成本法（部分模型）：每张图片固定消耗一定 Token 数

系统会根据你选中的模型自动匹配对应的计算规则。如果未找到匹配规则，默认使用 Gemini 2.0 方法。

Q：为什么我的 Token 可视化显示「暂无文本数据」？

只有输入区有文本内容时，可视化区域才会展示 Token 分块。如果你只在输入区添加了媒体文件（图片/视频/音频）而未输入文本，可视化区域会保持为空——但结果区的总数仍会正确计算媒体 Token。

Q：计算结果和 API 返回的 Token 数不一样怎么办？

这是正常现象，有几个可能的原因：

1. 特殊 Token 差异：API 调用时还会额外消耗系统 Prompt、Chat 模板格式、特殊 Token（如 <|im_start|>）等，这些工具默认未计入
2. Tokenizer 版本差异：如果模型的 Tokenizer 有版本更新，而你使用的本地 Tokenizer 库尚未同步更新，结果可能会有微小差异
3. 编码方式：实际 API 调用时可能会包含一些特殊的编码选项（如 allowed_special），导致差异

工具的计算结果可以作为精确的参考值，但最终实际消耗以 API 返回的 usage 字段为准。

Q：输入中有很多 Markdown 图片链接会不会影响计数？

会的。如果你在文本中粘贴了包含 Base64 图片数据的 Markdown 图片链接（如 ![img](data:image/png;base64,...)），工具会自动识别并忽略这些 Base64 数据部分，只计入 [IMAGE] 占位符的长度。这样可以确保字符统计不会因为大量 Base64 数据而失真。

提示

对于确实需要计算图片 Token 的场景，建议使用输入区下方的「添加图片」功能手动添加图片尺寸参数，这样能获得更精确的估算结果。