0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

OpenAIはトークン数カウントできるページが公開されていますがAnthropicやGoogleはAPIは公開されているもののページとしては公開されていません(GeminiはPythonだとノートブックがあるっぽい)。
ちょうどおおよその概算値を知りたかったこともあってClineで作ってみました。

OpenAI Tokenizer

画面イメージ

概ねいい感じですがどうしても詰まってて余白がないな、ってなるところあります。
やはりまだUIの景観的なところはAI苦手ですね。

テキストのトークン数をカウントしてみた例
image.png

画像のトークン数をカウントしてみた例
image.png

※ テキストと画像同時にもできます。

技術スタック

  • 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(特に指示しなかったのでいい感じに?してくれたのかなと)

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?