はじめに
OpenAIはトークン数カウントできるページが公開されていますがAnthropicやGoogleはAPIは公開されているもののページとしては公開されていません(GeminiはPythonだとノートブックがあるっぽい)。
ちょうどおおよその概算値を知りたかったこともあってClineで作ってみました。
OpenAI Tokenizer
画面イメージ
概ねいい感じですがどうしても詰まってて余白がないな、ってなるところあります。
やはりまだUIの景観的なところはAI苦手ですね。
※ テキストと画像同時にもできます。
技術スタック
- TypeScript
- Svelte
- Material UI
- Cline(LLM:Claude 4.0 Sonnet)
仕様
- テキストと画像をカウントの対象とする
- OpenAIはtiktokenパッケージを使用してカウント
- AnthropicとGeminiは公式のAPIを呼び出し
Anthropic
Gemini
プロンプト
最初は下記のようにClaudeのみをターゲットとして作ってもらいました。
あとは少しずつ対象を追加したり修正してもらったりしていった感じです。
# 役割
あなたはTypeScriptとSvelteに精通したフロントエンドエンジニアです。
# 命令
Claudeのトークン数をカウントするWebアプリケーションを作成してください。
# 技術スタック
- TypeScript
- Svelte
- Material UI
# 仕様
- 拡張性を考えてプロバイダ(例: Anthropic, OpenAI)をドロップダウンリストで選択できるようにしてください。
- プロバイダを選択するとモデルの一覧をドロップダウンリストで選択できるようにしてください。
- トークン数カウントをしたいテキストを入力するテキストエリアを配置してください。
- カウントボタンをクリックするとAnthropicのトークンカウントAPIを実行してトークン数を取得してください。
- トークン数を取得したら画面にトークン数を表示してください。
振り返り
上述した通り、UI周りはまだまだです。
美的感覚的なところもそうですが、今回だと最初はドロップダウンリストをうまく表示できてなかったり、その他にもいくつか不備がありました。
実際に生成されたHTMLを与えて修正依頼することで動作するよう修正はしてくれましたがやはり余白もうちょっとほしいな、みたいな感覚は伝えるのが難しいです。
しかしながら全部人の手でやるのではなくそういった部分のみを人の手でやってほかはAIに任せることでやはり工数はめちゃめちゃ抑えられるなと感じました。
GitHub
READMEとかも全部Clineで作ってそのままです。
なので別にライセンスとかMITのつもりでもないw(特に指示しなかったのでいい感じに?してくれたのかなと)