React项目中能否用@dqbd/tiktoken统计Token？导入报错求助

@dqbd/tiktoken本身没有直接提供countTokens这个导出方法，你遇到的报错就是因为库中不存在这个API。要实现token统计，得用库提供的编码工具手动计算，以下是可行的实现方案：

1. 确保库已正确安装 #

如果还没安装，先执行安装命令：

npm install @dqbd/tiktoken
# 或者用yarn
yarn add @dqbd/tiktoken

2. 修改React组件代码 #

通过get_encoding（指定编码名称）或encoding_for_model（根据模型自动匹配编码）获取编码实例，再通过encode方法将文本转为token数组，数组长度就是token数量。同时注意组件卸载时释放编码实例，避免内存泄漏：

import React, { useState, useEffect, useRef } from 'react';
import { get_encoding, encoding_for_model } from '@dqbd/tiktoken';

const TokenCounter = () => {
  const [inputText, setInputText] = useState("Your input text goes here.");
  const [tokenCount, setTokenCount] = useState(0);
  // 用ref存储编码实例，方便卸载时清理
  const encodingRef = useRef(null);

  useEffect(() => {
    // 方式1：根据模型选择编码（比如gpt-3.5-turbo）
    encodingRef.current = encoding_for_model("gpt-3.5-turbo");
    // 方式2：直接指定编码名称（比如cl100k_base，对应GPT-3.5/4）
    // encodingRef.current = get_encoding("cl100k_base");

    // 计算初始token数量
    updateTokenCount(inputText);

    // 组件卸载时释放编码实例
    return () => {
      if (encodingRef.current) {
        encodingRef.current.free();
      }
    };
  }, []);

  const updateTokenCount = (text) => {
    if (!encodingRef.current) return;
    const tokens = encodingRef.current.encode(text);
    setTokenCount(tokens.length);
  };

  const handleTextChange = (e) => {
    const newText = e.target.value;
    setInputText(newText);
    updateTokenCount(newText);
  };

  return (
    <div>
      <textarea
        value={inputText}
        onChange={handleTextChange}
        rows={4}
        cols={50}
      />
      <p>Input Text: {inputText}</p>
      <p>Token Count: {tokenCount}</p>
    </div>
  );
};

export default TokenCounter;

关键说明 #

• encoding_for_model会根据OpenAI模型自动匹配对应的编码规则，更省心；
• get_encoding需要你明确指定编码名称，比如cl100k_base对应GPT-3.5/4，p50k_base对应GPT-3，r50k_base对应早期模型；
• 必须调用free()方法释放编码实例，否则会造成浏览器内存泄漏。

内容的提问来源于stack exchange，提问作者Sudharsanam apr