Token 复制计数器

制作一个单文件 HTML 工具：粘贴或输入一段文本，实时显示字符数和估算的 Token 数。

制作一个单文件 HTML 的**文本 Token 计数器**，核心使用场景：粘贴一段文本，立刻看到精确的字符统计和多模型 Token 估算 —— 写 prompt 时随手一贴，心中有数。 ```` ### 功能要求 **文本输入区** 1. 提供一个大面积的文本编辑区域，支持粘贴、拖拽文件或直接输入 2. 支持 `Ctrl+V` 快速粘贴，粘贴后自动触发分析 3. 提供"清空"按钮和"粘贴示例文本"按钮（内置一段中英混合的示例文本，约 500 字） 4. 文本区域右下角显示实时光标位置（行:列） 5. 文本输入区左侧显示行号 **字符统计面板** 6. 实时显示以下统计维度： - 总字符数（含空格） - 总字符数（不含空格） - 单词数（按空格分词，中文按字计数） - 行数 - 段落数（以空行分隔） - 句子数（按 `.` `?` `!` `。` `？` `！` 分割） 7. 字符类型分布： - 中文字符数及占比 - 英文字母数及占比 - 数字数及占比 - 标点符号数及占比 - 空白字符数及占比 8. 字符类型分布使用水平条形图可视化展示各类型占比 **Token 估算面板** 9. 提供多模型 Token 估算，使用 `js-tiktoken` CDN（`https://esm.sh/js-tiktoken`）进行 BPE tokenization，并对无公开 Tokenizer 的模型使用经验公式： | 模型系列 | Encoding | 英文(字符/token) | 中文(字符/token) | 说明 | |---------|----------|:-:|:-:|------| | GPT-4o / GPT-5 系列 | `o200k_base` | ~4.0 | ~1.5–2.0 | 词表 200K，中文效率显著优于旧版 | | GPT-4 / GPT-3.5 系列 | `cl100k_base` | ~4.0 | ~1.0–1.4 | 词表 100K，中文近乎一字一 token | | Claude 系列 | 经验公式 | ~3.5 | ~1.5 | 无公开 JS Tokenizer，使用估算 | | Gemini 系列 | 经验公式 | ~4.0 | ~1.8 | 无公开 JS Tokenizer，使用估算 | 10. 对每种编码方式分别显示： - Token 数量 - 平均每 Token 的字符数 - 相比通用估算的偏差百分比 11. 支持展开/折叠查看 Token 分割详情：将原文按 Token 边界用交替背景色标记，鼠标悬停显示单个 Token 的 ID 和字节表示 12. 如果 `js-tiktoken` CDN 加载失败，自动降级为纯经验公式估算，并显示提示 "⚠ CDN 离线，使用经验公式估算" **辅助功能** 13. 一键复制统计摘要：点击按钮复制如下格式的文本： ``` 📊 文本统计 | 1,234 字符 | 328 词 | 42 行 🔤 GPT-4o (o200k): 298 tokens | GPT-4 (cl100k): 312 tokens | 通用估算: 305 tokens ``` 14. 支持从 URL 参数 `?text=...` 预填充文本内容（URL 编码），方便分享 15. 历史记录：自动记录最近 10 次分析的文本摘要（前 50 字符）和统计结果，使用 localStorage 持久化，支持点击回填和清空历史 16. 支持拖拽 `.txt` / `.md` / `.json` 文件到文本区域自动读取内容 ### 设计要求 - 整体采用现代简约风格，深色主题为主，提供浅色主题切换 - 桌面端建议左右分栏布局：左侧为文本输入区（占 60%），右侧为统计面板（占 40%） - 统计数字使用大号等宽字体，关键数值加粗高亮 - 字符分布条形图使用柔和的渐变色系 - 移动端自动切换为上下布局，文本区在上，统计在下 - Token 分割可视化区域使用交替颜色（如浅蓝/浅黄），确保可读性 - 给人"开发者工具 / 效率工具"的专业感 ````

制作一个单文件 HTML 的**文本 Token 计数器**，核心使用场景：粘贴一段文本，立刻看到精确的字符统计和多模型 Token 估算 —— 写 prompt 时随手一贴，心中有数。 ```` ### 功能要求 **文本输入区** 1. 提供一个大面积的文本编辑区域，支持粘贴、拖拽文件或直接输入 2. 支持 `Ctrl+V` 快速粘贴，粘贴后自动触发分析 3. 提供"清空"按钮和"粘贴示例文本"按钮（内置一段中英混合的示例文本，约 500 字） 4. 文本区域右下角显示实时光标位置（行:列） 5. 文本输入区左侧显示行号 **字符统计面板** 6. 实时显示以下统计维度： - 总字符数（含空格） - 总字符数（不含空格） - 单词数（按空格分词，中文按字计数） - 行数 - 段落数（以空行分隔） - 句子数（按 `.` `?` `!` `。` `？` `！` 分割） 7. 字符类型分布： - 中文字符数及占比 - 英文字母数及占比 - 数字数及占比 - 标点符号数及占比 - 空白字符数及占比 8. 字符类型分布使用水平条形图可视化展示各类型占比 **Token 估算面板** 9. 提供多模型 Token 估算，使用 `js-tiktoken` CDN（`https://esm.sh/js-tiktoken`）进行 BPE tokenization，并对无公开 Tokenizer 的模型使用经验公式： | 模型系列 | Encoding | 英文(字符/token) | 中文(字符/token) | 说明 | |---------|----------|:-:|:-:|------| | GPT-4o / GPT-5 系列 | `o200k_base` | ~4.0 | ~1.5–2.0 | 词表 200K，中文效率显著优于旧版 | | GPT-4 / GPT-3.5 系列 | `cl100k_base` | ~4.0 | ~1.0–1.4 | 词表 100K，中文近乎一字一 token | | Claude 系列 | 经验公式 | ~3.5 | ~1.5 | 无公开 JS Tokenizer，使用估算 | | Gemini 系列 | 经验公式 | ~4.0 | ~1.8 | 无公开 JS Tokenizer，使用估算 | 10. 对每种编码方式分别显示： - Token 数量 - 平均每 Token 的字符数 - 相比通用估算的偏差百分比 11. 支持展开/折叠查看 Token 分割详情：将原文按 Token 边界用交替背景色标记，鼠标悬停显示单个 Token 的 ID 和字节表示 12. 如果 `js-tiktoken` CDN 加载失败，自动降级为纯经验公式估算，并显示提示 "⚠ CDN 离线，使用经验公式估算" **辅助功能** 13. 一键复制统计摘要：点击按钮复制如下格式的文本： ``` 📊 文本统计 | 1,234 字符 | 328 词 | 42 行 🔤 GPT-4o (o200k): 298 tokens | GPT-4 (cl100k): 312 tokens | 通用估算: 305 tokens ``` 14. 支持从 URL 参数 `?text=...` 预填充文本内容（URL 编码），方便分享 15. 历史记录：自动记录最近 10 次分析的文本摘要（前 50 字符）和统计结果，使用 localStorage 持久化，支持点击回填和清空历史 16. 支持拖拽 `.txt` / `.md` / `.json` 文件到文本区域自动读取内容 ```` 请严格按照下方提供的 Terminal CLI Design System 实现所有 UI 设计。 ```` <design-system> # Design Philosophy The **Terminal CLI** aesthetic pays homage to the raw power of the command line. It strips away the "user interface" layers to reveal the "system" underneath. It is **brutally functional, high-contrast, and authentically retro**. It feels like hacking into a mainframe or configuring a server. The vibe is **Cyber-Industrial, Hacker, and System-Level**. It is not "Matrix" rain (too cliché); it is a clean, usable ZSH/BASH shell environment. **Key visual signatures:** * **Monospace Supremacy**: Every single character, from the largest headline to the smallest footer link, is monospaced. * **The Cursor**: The blinking block or underscore cursor `_` is the heartbeat of the interface. * **Shell Metaphors**: Use prompt characters (`>`, `$`, `~`), command flags (`--help`), and status codes (`[OK]`, `[ERR]`). * **Scanlines (Subtle)**: A very faint CRT scanline effect to give it depth without ruining readability. # Design Token System ## Colors (Dark Mode Only) The palette mimics a phosphor monitor. High contrast is non-negotiable. * **Background**: `#0a0a0a` (Deep black, but not pure OLED black to allow for scanlines) * **Foreground**: `#33ff00` (Classic Terminal Green) or `#ffb000` (Amber) - *Let's go with Green for this implementation as the primary, with Amber as secondary.* * `primary`: `#33ff00` (Bright Neon Green) * `secondary`: `#ffb000` (Amber/Orange for warnings or accents) * `muted`: `#1f521f` (Dimmed green for borders/inactive text) * `accent`: `#33ff00` (Same as primary, used for cursors/active states) * `error`: `#ff3333` (Bright Red) * `border`: `#1f521f` (Dimmed green) ## Typography * **Font**: `JetBrains Mono`, `Fira Code`, or `VT323`. * **Style**: **ALL CAPS** for headers. Lowercase for "code" or body text is acceptable, but consistency is key. * **Scale**: Strict modular scale. Headers shouldn't be "smooth"; they should snap to grid sizes. ## Radius & Borders * **Radius**: `0px`. Absolutely no rounded corners. * **Borders**: `1px` solid or dashed. Borders are crucial for defining "windows" or "panes". ## Shadows & Effects * **Shadows**: No drop shadows. * **Text Shadow**: A subtle "glow" for the primary text to mimic phosphor persistence. * `text-shadow: 0 0 5px rgba(51, 255, 0, 0.5)` * **CRT Overlay**: A pointer-events-none overlay with scanlines. # Component Stylings ## Buttons * **Structure**: Text enclosed in brackets `[ INITIATE ]` or a solid block of color with inverted text. * **Hover**: The background fills with the primary color, text becomes black (inverted video). * **Active**: A "pressed" state might shift the text 1px down or blink rapidly. ## Cards (Windows/Panes) * **Structure**: A black box with a 1px green border. * **Header**: A "title bar" at the top: `+--- SYSTEM STATUS ---+` or a solid inverted bar. * **Content**: Padded monospaced text inside. ## Inputs * **Style**: No box. Just a prompt `user@acme:~$` followed by the input field. * **Cursor**: A blinking block `█` at the caret position. * **Focus**: No ring, just the blinking cursor. # Layout Strategy The layout should feel like a grid of terminal windows (`tmux` or `vim` splits). * **Strict Grid**: Content is aligned to a rigid character grid. * **Separators**: Use ASCII characters for dividers: `----------------` or `================` or `//`. # Non-Genericness (The Bold Factor) * **ASCII Art**: Use ASCII art for the logo or key graphic elements. * **Typewriter Effect**: Headlines should appear character-by-character. * **Raw Data Visualization**: Stats shouldn't be pie charts; they should be progress bars `[||||||||||.....]`. # Effects & Animation * **Blink**: Utilities for `animate-blink` (standard cursor blinking). * **Glitch**: Occasional subtle text offsets on hover. * **Typing**: `typing-demo` animation for the hero text. # Iconography * **Lucide Icons**: Use them, but style them to look pixelated or low-fi if possible, or strict `stroke-width-2`. * **Color**: Icons are always the primary terminal color. # Responsive Strategy * **Mobile**: The "windows" stack vertically. The text size remains legible (monospaced fonts can be wide, so watch for overflow). Wrap long lines with a `\` indicator. # Accessibility * **Contrast**: The bright green on black exceeds AA requirements. * **Focus**: High visibility is inherent to this style (inverted colors). </design-system> ````