A visual tool to simulate and evaluate LLM token output speeds with realistic fluctuations.
一个用于模拟和评估 LLM token 输出速度并带有真实波动的可视化工具。
- Adjustable Target Speed — Set token output speed from 1 to 1000 tok/s via input field and slider
- Realistic Fluctuation — Simulates real LLM output variance: random noise (±20%), occasional pauses (2% chance), and burst acceleration (5% chance at 1.4×)
- Three Content Modes — Switch between Chinese Markdown, English Markdown, and React/TypeScript code
- Smart Tokenizer — Chinese characters split individually, English words split by word, symbols and whitespace preserved
- Real-time Stats — Live actual speed, token count, elapsed time, and reading experience indicators
- Terminal-style Output — Streamed output in a simulated terminal window with blinking cursor
- Dark Theme — Clean dark UI with emerald accent colors and smooth entry animations
- 可调目标速度 — 通过输入框和滑动条设置 1-1000 tok/s 的 token 输出速度
- 真实波动模拟 — 模拟真实 LLM 输出的随机性：噪声波动（±20%）、偶发暂停（2% 概率）、突发加速（5% 概率，1.4 倍速）
- 三种内容模式 — 支持中文 Markdown、英文 Markdown 和 React/TypeScript 代码
- 智能分词 — 中文字符逐字切分，英文按单词切分，符号和空白单独保留
- 实时统计 — 实时显示实际速度、token 数量、已用时间和阅读体验描述
- 终端风格输出 — 仿真终端窗口中逐 token 流式输出，带闪烁光标
- 暗色主题 — 翠绿色强调色的暗色 UI，带平滑入场动画
| Technology | Purpose |
|---|---|
| React 19 | UI Framework / UI 框架 |
| TypeScript | Type Safety / 类型安全 |
| Vite 6 | Build Tool / 构建工具 |
| Tailwind CSS 4 | Styling / 样式 |
| Motion | Animations / 动画 |
| react-markdown + remark-gfm | Markdown Rendering / Markdown 渲染 |
| Lucide React | Icons / 图标 |
- Node.js (v18+ recommended)
# Clone the repository / 克隆仓库
git clone https://github.com/yaki1210/Token-Speed-Simulator.git
cd Token-Speed-Simulator
# Install dependencies / 安装依赖
npm installnpm run devThe app will be available at http://localhost:3000.
应用将在 http://localhost:3000 启动。
npm run build
npm run preview| Command | Description |
|---|---|
npm run dev |
Start dev server (port 3000) / 启动开发服务器（端口 3000） |
npm run build |
Production build / 生产构建 |
npm run preview |
Preview production build / 预览生产构建 |
npm run clean |
Clean dist directory / 清理 dist 目录 |
npm run lint |
TypeScript type check / TypeScript 类型检查 |
src/
├── main.tsx # App entry / 应用入口
├── App.tsx # Root component / 根组件
├── index.css # Global styles / 全局样式
└── components/
└── TokenSimulator.tsx # Core simulator component / 核心模拟器组件
The simulator uses requestAnimationFrame to drive a frame-rate-independent animation loop. On each frame, it calculates how many tokens should be generated based on the elapsed time and target speed, then renders them character by character with realistic variance injected:
Simulator 使用 requestAnimationFrame 驱动帧率无关的动画循环。每一帧根据已用时间和目标速度计算应生成的 token 数量，并注入真实波动后逐字符渲染：
- Base Speed / 基础速度 — Target tok/s set by the user / 用户设置的目标 tok/s
- Noise / 噪声 — ±20% random offset per interval / 每个间隔 ±20% 随机偏移
- Pause / 暂停 — 2% chance of full stop / 2% 概率完全暂停
- Burst / 突发 — 5% chance at 1.4× speed / 5% 概率以 1.4 倍速加速
- Measurement / 测量 — Actual speed sampled every 250ms / 每 250ms 采样实际速度
MIT
Built with Google AI Studio · Made by yaki1210
使用 Google AI Studio 构建 · 由 yaki1210 制作