[RFC] 092 - Token Usage 展示

[arvinxx]

背景

#6595 做了 Claude 3.7 搜索之后效果真的很好，但是需要 context cache 支持来降低成本。但目前用户无法感知到 context cache 的变化，结合本身希望让用户能逐步理解 token 和积分的概念，因此准备将模型的 token 展示专门展示出来。

设计思路

实现很简单，就是将原本流协议中扩展一下 usage 部分。

扩展的类型定义如下：

export interface ModelTokensUsage {
  acceptedPredictionTokens?: number;
  cachedTokens?: number;
  inputAudioTokens?: number;
  inputCacheMissTokens?: number;
  inputTokens?: number;
  outputAudioTokens?: number;
  outputTokens?: number;
  reasoningTokens?: number;
  rejectedPredictionTokens?: number;
  totalTokens?: number;
}

针对 openai 来说：

usage 在最后一个chunk 中：

{
    id: 'chatcmpl-B7CcnaeK3jqWBMOhxg7SSKFwlk7dC',
    object: 'chat.completion.chunk',
    created: 1741056525,
    model: 'gpt-4o-mini-2024-07-18',
    choices: [],
    service_tier: 'default',
    system_fingerprint: 'fp_06737a9306',
    usage: {
      prompt_tokens: 1646,
      completion_tokens: 11,
      total_tokens: 1657,
      prompt_tokens_details: { audio_tokens: 0, cached_tokens: 0 },
      completion_tokens_details: {
        accepted_prediction_tokens: 0,
        audio_tokens: 0,
        reasoning_tokens: 0,
        rejected_prediction_tokens: 0,
      },
    },
  },

直接取出来做映射即可：

const convertUsage = (usage: OpenAI.Completions.CompletionUsage): ModelTokensUsage => {
  return {
    acceptedPredictionTokens: usage.completion_tokens_details?.accepted_prediction_tokens,
    cachedTokens:
      (usage as any).prompt_cache_hit_tokens || usage.prompt_tokens_details?.cached_tokens,
    inputAudioTokens: usage.prompt_tokens_details?.audio_tokens,
    inputCacheMissTokens: (usage as any).prompt_cache_miss_tokens,
    inputTokens: usage.prompt_tokens,
    outputAudioTokens: usage.completion_tokens_details?.audio_tokens,
    outputTokens: usage.completion_tokens,
    reasoningTokens: usage.completion_tokens_details?.reasoning_tokens,
    rejectedPredictionTokens: usage.completion_tokens_details?.rejected_prediction_tokens,
    totalTokens: usage.total_tokens,
  };
};

针对 Anthropic ，会稍微有点特别，在两个 chunk 中，一个是在 message_start ，另外一个在最后的 message_delta :

{
  type: 'message_start',
  message: {
    id: 'msg_019q32esPvu3TftzZnL6JPys',
    type: 'message',
    role: 'assistant',
    model: 'claude-3-7-sonnet-20250219',
    content: [],
    stop_reason: null,
    stop_sequence: null,
    usage: {
      input_tokens: 92,
      cache_creation_input_tokens: 0,
      cache_read_input_tokens: 0,
      output_tokens: 4,
    },
  },
},

{
  type: 'message_delta',
  delta: { stop_reason: 'end_turn', stop_sequence: null },
  usage: { output_tokens: 259 },
},

不过 Anthropic 没有像 openai 一样直接提供一个 total tokens，因此需要自行累加。由于input和 output 存在于两个不同的 chunks 中，因此需要用流中的 context 做一个暂存。

然后 UI 层考虑同时展示 Token 和积分。对积分的定义是 1$ = 1M 积分，这样就可以用很简单的乘法完成每个 token 的计费统计：

Token	积分

进展

不是一个大需求，放在 patch 版本发

• 💄 style: support to show token usages #6693

[samurai00]

自定义的服务商和模型怎么自定义价格啊？

[arvinxx]

暂不支持。等后面做吧

[cy948]

现在Token usage和生成时间都能显示了，是不是就能显示服务商生成token的速度了? 😋生成完之后，在token usage左边再显示个 8 t/s 这样。

[arvinxx]

可以是可以，不过这个目前看好像没有必要性，等后面看到强需求的情况再做吧，需要 agent runtime 这个模块调整实现的