LLMの仕組みは論文や図解だけでは、トークンがどう変換されるかイメージしにくいものです。

この記事では、Brendan Bycroft氏が公開した LLM Visualization を紹介します。ブラウザ上でGPT系Transformerの推論過程を3D表示し、EmbeddingからSoftmaxまでトークンの流れをステップごとに追えます。

この記事でわかること

  • LLM Visualizationが解決する学習上の課題
  • トークンが通る主要ステップと3D表示の見方
  • デモモデルの内容とGPT-2対応の範囲
  • Transformer Explainerなど類似ツールとの違い

https://bbycroft.net/llm

ブラックボックス化したLLM理解の壁

Transformerは「自己注意機構（Self-Attention）」と「多層のニューラルネット」で文脈を処理します。用語だけ覚えても、行列演算や残差接続がどう積み重なるかは腹落ちしにくい状態が続きます。

教科書の式や静止画では、Embedding → Layer Norm → Self-Attention → MLP → Softmax という一連の流れを、時間軸で追うのが難しいのが実情です。実務でプロンプト設計やモデル選定をする人ほど、内部処理のイメージが欠けると判断の根拠が薄くなります。

LLM Visualizationが示す解決策

LLM Visualizationは、GPT-2やGPT-3と同系統のネットワーク構造を3D空間に描き、推論中のデータの流れをアニメーションで示すオープンソースプロジェクトです。ソースコードはGitHubの bbycroft/llm-viz で公開され、TypeScriptで実装されています。

作者の説明では、ChatGPTの基盤となるLLMアルゴリズムを「PyTorchの minGPT 実装に沿って可視化し、加算と乗算の単位まで追える設計になっています。Tech with Mak氏の紹介でも、Embedding、Layer Norm、Self-Attention、MLP、Transformer層、Softmax、Outputまで、実トークンが層を通過する様子をライブで追える点が強調されています。

主な機能と操作の流れ

https://github.com/bbycroft/llm-viz

デフォルトで動くのは、Andrej Karpathy氏の minGPT に含まれる極小モデルです。文字A・B・Cの並べ替えを学習したモデルで、入力トークンから出力まで全体をブラウザ内で完走できます。パラメータ規模が小さいため、大規模モデルなら数百MBに及ぶ重みを読み込まずに、構造理解に集中できます。

3Dビューではレイヤーごとにズームし、各Attention Headや行列積のハイライトを確認できます。解説テキストと同期したウォークスルー形式のため、Self-Attention内のQuery・Key・Valueの関係や、Feed Forward（MLP）での変換も段階的に追えます。

レンダラーは任意サイズのネットワーク表示にも対応し、GPT-2規模の構造も描画可能です。ただし公式READMEによると、GPT-2の重みは同梱されておらず、ダウンロードすると数百MBに達します。まずはデモモデルで全体像を掴み、必要に応じて大規模構造の表示に進む使い方が現実的です。

料金と利用条件

LLM VisualizationはWebブラウザから無料で利用できます。アカウント登録やAPIキーは不要です。ローカルで改修する場合は、リポジトリREADMEの手順どおり yarn で依存関係を入れ、yarn dev で開発サーバーを起動します。

類似ツールとの違い

LLM解説系ツールは複数あり、目的で選び分けるのが有効です。

Transformer Explainer（Georgia Tech Polo Club）は、ブラウザ内でGPT-2（small）を実際に動かし、Sankey図風のフローでトークン処理を見せます。温度やtop-kサンプリングを触りながら次トークン予測を試せる点が強みです。一方、LLM Visualizationは3D空間での層構造の俯瞰と、行列演算単位の追跡に重心を置いています。

LLM Inference Viz（ai-hpc/llm-inference-viz）は、Qwen 2.5やLlama 3.3など現行のdense decoder-onlyモデルを題材に、H200向けルーフラインやテンソル並列の性能面を3Dで説明します。推論コストやメモリ帯域の理解には向きますが、Transformerの基礎構造を初めて学ぶ用途では、LLM Visualizationのステップ追跡の方が入口として分かりやすいです。

WebGPUコミュニティの紹介記事では、Andrej Karpathy氏も動画内でこの可視化を評価していると触れられています（参考）。教育用途として第三者からも注目されている点は、選定の参考になります。

使うときの注意点

このツールは推論のフォワードパス可視化が中心で、学習時の勾配更新や最適化の動きは扱いません。デモモデルはABC並べ替えという単純タスクのため、ChatGPT規模の言語能力そのものを再現するものではありません。

3D描画はWebGL系の処理負荷を伴うため、マシンやGPU環境によっては描画が重く感じる場合があります。GPT-2構造表示では重み取得のデータ量も大きい点に留意してください。

学習の次の一歩

LLM Visualizationは、Transformerの内部を「トークンの旅」として体感できる珍しい教材です。数式を読む前に一度ブラウザで層を辿ると、Self-Attentionや残差接続の役割が具体化しやすくなります。

ABC並べ替えデモで全体像を掴んだら、GitHubのソースを読みながら表示ロジックを追うと、可視化と実装の対応関係まで学べます。LLMを道具として使う段階から、仕組みを説明できる段階へ進みたい人に向いた入口です。