LLM Attention Visualization Tool Shows How Tokens Influence Generation

すばやく要点をまとめる

LLM Attention Visualizer を使うと、生成された任意のトークンにカーソルを合わせるだけで、その生成に寄与した過去のトークンの重み付きマップを即座に確認できます。これにより、モデルのコピーアンドペースト行動や複数フレーズの合成が明らかになります。


可視化ツールが示す内容

  • 注目度の集約: 各生成トークンについて、ツールは注目度重み(値ベクトルの大きさでスケーリング)を計算し、すべてのヘッドとレイヤーにわたって合計し、各過去のトークンに対して不透明度値にマッピングします。
  • 不透明度の意味: 不透明度が1は最も強い影響を示し、それ以下の値は比例的に補間されます。
  • 簡略化に関する注意: この可視化ツールは高次元の注目度テンソルを過去の各トークンごとに1つのスカラーに簡略化しているため、モデルの内部状態のすべてのニュアンスを捉えているわけではありません。

「影響を受けた」という表現は完全には正確ではないかもしれません。この可視化は非常に簡略化されています。注目度重みを値ベクトルの大きさでスケーリングし、すべての注目ヘッドにわたって集約し、すべてのレイヤーにわたって合計しています。 – 著者による注記

なぜ重要なのか

  • コピペの直感: 完全に同じ文字列(例:住所や日付)にカーソルを合わせると、元のソーストークンが強調表示され、LLMが確率的であるにもかかわらず、ほぼゼロの誤差でテキストを再現できる理由が説明されます。
  • フレーズ間合成: 「オフィス移転要約」の例では、トークン remainwork("Existing employee access cards will work" に含まれる)と stay the same("company phone numbers will stay the same" に含まれる)の両方から注目を集めています。これにより、モデルが別々の節から情報を融合する仕組みが示されます。
  • モデルサイズの関係: 6億パラメータのモデル(Qwen‑3‑0.6B)でも、JavaScript関数を正確に再現できることから、正確なコピーには数十億のパラメータが必要ではないことがわかります。

実装の詳細

  • フロントエンド: Transformers.js で駆動される React アプリが、ブラウザ内で直接推論を実行します。
  • カスタム生成ループ: 標準の生成 API は中間テンソルを公開しないため、著者は各ステップで注目スコアを取得できる独自のループを実装しました。
  • モデルのインストルメンテーション: 元の ONNX ファイルには必要な出力がありませんでした。著者は ONNX ファイルを修正して内部テンソルを公開し、インストルメント化されたモデルをプライベートな Hugging Face リポジトリ(ishamf/Qwen3-0.6B-ONNX-Instrumented)にアップロードしました。
  • 事前に生成されたプロンプト: モデル(数百MB)のダウンロードに時間がかかるため、アプリは即座に読み込めるように事前に計算された生成結果を同梱しています。
  • ソースコード: GitHub リポジトリ https://github.com/ishamf/llm-visualizer で公開されています。

コミュニティの反応

  • 学習者にとっての明確さ"これは注目機構がどのように機能するかを最も明確に示している例です" (fuddle)
  • 教育的価値"このような可視化があると非常に役立ちます。今週金曜日に教えようとしています" (MCP123)
  • 技術的な興味"後段のレイヤーの注目度が、より多くのレイヤーが寄与しているため、初期のレイヤーに飲み込まれてしまうのを心配していませんか?" (wopak)
  • 簡略化への批判"この単純化された考え(ベクトルの大きさが高い = 影響力が高い)を強く疑問視します" (sva_)
  • パフォーマンスに関する質問"つまり、文脈サイズに応じて N² の計算が必要になるということですか? すべてのトークンが他のすべてのトークンと関係を追跡する必要があるからです。" (ex‑aws‑dude)
  • UXの提案 – ユーザーがアニメーションが速すぎて詳細な検査が難しいと指摘し、一時停止やステップ制御の追加を提案しています(mncharity)。

制限と未解決の問い

  • スカラーへの縮約: 複数ヘッド・複数レイヤーの注目度を1つの不透明度に縮約することで、方向性や符号情報が失われます。
  • レイヤーの重み付け: 現在の合計はすべてのレイヤーを同等に扱っています。他の重み付け方式を採用すれば、通常は抑えられてしまう深層のパターンを浮き彫りにできるかもしれません。
  • 大きさバイアス: 値ベクトルの大きさでスケーリングするという仮定は、より大きなベクトルがより大きな影響を持つと想定していますが、これは一部のコメントで議論されています。
  • スケーラビリティ: 非常に長い文脈(例:2,000トークン以上)の注目度を可視化するには依然として O(N²) の計算が必要であり、ブラウザ上で扱いにくくなる可能性があります。

使い方

  1. https://ishamf.dev/p/llm-attention-visualizer/ で可視化ツールを開きます。
  2. 生成されたテキスト内の任意のトークンにカーソルを合わせます。
  3. 過去のトークンの不透明度で並べられたリストを観察します。最も明るいトークンが最も寄与したものです。
  4. 事前に生成されたプロンプトを切り替えて、異なる挙動(コピーや合成、関数の修正など)を探索します。

まとめ

LLM Attention Visualizer は、大規模言語モデルが正確な文字列をコピーしたり、異なるフレーズから情報を融合したりする仕組みを、即座にインタラクティブに可視化する窓を提供します。抽象的なトランスフォーマーの内部構造を、教育者、研究者、好奇心旺盛な開発者にとって具体的なものにしています。

Sources

関連

  • Dispatch
  • Dispatch
  • プロジェクト
  • プロジェクト
  • Dispatch