PromptTokenizer 组件

PromptTokenizer 组件

概述

PromptTokenizer 是一个 Prompt 分词分析工具，用于统计和分析文本的 token 数量、字符数、词数等指标，并提供成本估算功能。

文件路径

src/components/developers/prompt-tokenizer.tsx

功能特性

  • 三栏布局: 历史记录 | 编辑器 | 统计分析
  • Token 估算: 基于字符和词语的模型无关估算
  • 成本计算: 根据输入/输出价格估算调用成本
  • 上下文窗口: 可视化展示上下文使用率
  • Token 高亮: Monaco 编辑器中可视化 token 边界
  • 文本统计: 字符、词数、行数、句子数
  • 历史记录: 保存分析记录到 localStorage

接口定义

interface TokenStats {
  tokens: number;      // Token 数量
  characters: number;  // 字符数
  words: number;       // 词数
  lines: number;       // 行数
  sentences: number;   // 句子数
}

interface TokenizerSettings {
  contextWindow: number;  // 上下文窗口大小
  inputPrice: number;     // 输入价格（每百万 token）
  outputPrice: number;    // 输出价格（每百万 token）
}

interface SavedAnalysis {
  id: string;
  text: string;        // 文本（截断存储）
  stats: TokenStats;
  createdAt: number;
}

使用示例

import { PromptTokenizer } from "@/components/developers/prompt-tokenizer";

export default function TokenizerPage() {
  return (
    <div className="h-screen">
      <PromptTokenizer />
    </div>
  );
}

Token 估算算法

function estimateTokens(text: string): number {
  const charCount = text.length;
  const wordCount = text.split(/\s+/).filter(Boolean).length;
  // 平均 ~4 字符/token，加上词语边界调整
  return Math.ceil(charCount / 4 + wordCount * 0.1);
}

默认设置

参数默认值说明
contextWindow128,000上下文窗口大小
inputPrice$2.50每百万 token 输入价格
outputPrice$10.00每百万 token 输出价格

统计面板内容

  1. Token 计数: 主要指标，显示估算 token 数
  2. 上下文使用率: 进度条显示，超限时警告
  3. 成本估算: 输入/输出成本计算
  4. 详细统计: 字符、词数、行数、句子数
  5. 设置面板: 可调整上下文窗口和价格

依赖

  • next-intl - 国际化
  • next-themes - 主题管理
  • @monaco-editor/react - 代码编辑器
  • lucide-react - 图标
  • sonner - toast 通知
  • @/components/ui/* - UI 组件
  • @/lib/utils - 工具函数

存储

  • History Key: "promptTokenizerHistory"
  • Settings Key: "promptTokenizerSettings"
  • Max History: 30 条
  • Storage: localStorage

注意事项

  1. Token 估算为近似值，不同模型可能有差异
  2. 估算基于 ~4 字符/token 的平均值
  3. 高亮功能使用 Monaco 装饰器实现
  4. 上下文使用率 >90% 时会显示警告
← 返回目录