LLMの基礎の基礎をなんとなく理解できるアプリを作ってみた

かねてから、LLMの説明って学生になかなか伝わらないなぁ、という課題感があった。

「大規模言語モデルが」「Transformerが」「Attentionが」と用語を並べても、たいていの人の頭には、うまく像が結ばない。かといって、中身を完全に無視して「すごいAI」で済ませるのも、なんだか居心地が悪い。

それなら、何か動きのある教材があると良いのでは。

そう思って、ブラウザだけで動く小さな教材アプリを作った。

https://kuzlab.github.io/llm-how-it-works/

サーバもAPIキーも使わない、完全な静的サイトだ。GitHub Pages で公開してあるので、URLを開けば誰でも触れる。狙いはただ一点、「LLMは、次に来る単語を確率で予測する、をひたすら高速で繰り返しているだけ」という一行を、頭ではなく手で分からせることだ。

中身は4つのタブに分かれている。順に、画面の動きに沿って説明していく。

タブ1：次の単語をあてる

これが本命だ。

あらかじめ用意した見本の文章を題材にする。画面には文の途中までが表示されていて、その続きとして「次に来そうな単語」の候補が、確率のバー付きで並ぶ。たとえば「今日は天気が」の後なら、「いい（55%）」「悪い（20%）」「良くて（12%）」……といった具合だ。

「次の単語へ ▶」を押すと、見本どおりに一語ぶん進む。「自動再生」にすれば、勝手に一語ずつ文が育っていくのを眺められる。「LLMはこれを、人間の代わりに猛烈な速度でやり続けているだけ」——その体感が、まず効く。

そして、ここがこのタブの肝なのだが、候補は自分でクリックして選べる。見本どおりの単語を選べばそのまま進むが、別の候補をクリックすると、文が脇道へ分岐する。あらかじめ用意してある枝に入って、違う文が組み上がっていく。たとえば「今日は天気が」の続きは、見本だと「いい」だが、「良くて」のほうをクリックすれば、「今日は天気が良くて、気持ち……」という別の道へ逸れていく。だから「同じ書き出しでも、どの語を選ぶかで結末が変わる」ことを、手で辿れる。

文が出来上がると、終わり方に応じてメッセージが変わる。見本どおりなら「完成」。別の枝を通って自然に文が閉じれば「違う道で完成 ― LLMはこうやって確率の低い枝もたまに通る。毎回違う出力になるのはこのため」。枝の終端まで来てしまえば「ここで途切れました ― 本物はこの先も自分で続きを考えるが、このデモは用意した道に限る」。

温度（ランダムさ）スライダー

タブ1には「温度」のスライダーがついている。

文の組み立てそのものは変えず、各ステップの確率バーの”形”だけを、温度に応じてリアルタイムに変える。温度を下げるとバーは尖って、いちばんありそうな1語に確率が突出する（自信・無難）。上げるとバーは平らになって、低い確率の単語にも出番が回る（迷い・自由・突飛）。

「ChatGPTやClaudeが、同じことを聞いても毎回ちょっと違う返事をするのはなぜ？」。この問いへの、手触りのある答えがこれだ。さらに「サイコロを振る 🎲」を押すと、いまの温度の分布に従って一語をランダムに抽選して光らせる。低温だと毎回ほぼ同じ語、高温だとたまに意外な語を引く、というのが体で分かる。

タブ2：言葉を分解する

二つ目は、入力した文を、色分けされたブロック（トークン）に割って見せる。

ここで効くのが、日本語と英語の対比だ。同じくらいの長さの文でも、切れ方がまるで違う。「今日はいい天気ですね」と「It is a nice day」を並べると、ほぼ同じ意味なのに、トークンの数も区切り方も食い違う。各トークンには疑似的なIDも振ってある。

伝えたいのは一行、「LLMは、文字でも単語でもなく、”トークン”という単位で世界を見ている」。自分の言語感覚と機械の区切りがずれている、というのが目で見えると、地味に効く。

タブ3：意味の地図

三つ目は、単語を2次元の地図の上に配置するタブだ。

動物・食べもの・感情・色といったカテゴリごとに色分けされた単語が、意味の近さに従って散らばっている。ある単語をタップすると、地図の上で近い順に3語が線でつながる。犬の隣には猫がいる、という具合だ。意味が「距離」を持つ、という感覚が掴める。

面白いのはここからで、「文脈を足す」と地図が動く。文脈に語を一つ加えると、同じカテゴリの語がその文脈のほうへ吸い寄せられ、別カテゴリの語は外へ押しのけられる。たとえば文脈に「犬」を足すと、動物たちが「犬」の周りにぎゅっと集まり、食べものや色は外側へ散っていく。「意味の配置は、文脈によって動く」——言葉にすると当たり前だが体感しにくいことを、点の移動で見せる。

（当初は “王様 − 男 + 女 ≒ 女王” のようなベクトルの足し算を見せるつもりだったが、実装しながら、この「文脈で地図が動く」体験のほうが伝わると判断して、差し替えた。）

タブ4：両側から考える

最後のタブは、少し毛色が違う。

タブ1のモデルは、左から右へ、次の単語を予測していく（GPTのような自己回帰型）。一方で、BERTのようなモデルは、文の両側を同時に見て、真ん中に空いた穴に入る語を当てる。

このタブでは、同じ穴あき文に対して、「左だけ見たときの予測」と「両側を見たときの予測」を2列に並べて見せる。たとえば「今日は天気が ○○ から散歩に行こう」という文。左側の「今日は天気が」だけを見ると、「いい」は30%どまりで、「悪い」などと横並びのままだ。ところが右側の「から散歩に行こう」まで見せた瞬間、「いい」が78%に跳ね上がって、迷いが消える。下には「左だと◯◯がN%、両側だと同じ◯◯がM%に突き抜けた」と、自動でコメントも出る。同じ言葉でも、見える文脈が広いほど、予測は鋭くなる。

どの順で触ってもらうか

人に見せるときは、だいたいこの順で触ってもらっている。

まずタブ1で「今日の天気の話」を最後まで進めて、確率バーが切り替わりながら文が一語ずつ育つのを見せる。次に、見本を「温度の違いがよく分かる例」に変えて、温度スライダーを左右に振る。低温では同じ無難な続きに収束し、高温だと候補がばらけて文が暴れる。最後に「意外な選択・雨の日」の見本で、わざと確率の低い候補をクリックして、脇道へ分岐させてみる。「自分の選択で結末が変わる」を一度体験すると、あとの説明が早い。

そこからタブ2へ移って、日本語と英語の切れ方を見比べる。タブ3では語をいくつかタップして意味の近さを確かめ、文脈を足して地図が動くのを見る。締めはタブ4、同じ穴あき文を「左だけ」と「両側」で比べる。ここまで、10分もかからない。

中身は、ニューラルネットではない

ここで、一つ正直に書いておくべきことがある。

タブ1の予測も、タブ4の左右比較も、中身は本物のニューラルネットではない。事前に用意した確率テーブルや分岐の枝を、見せているだけだ。あの巨大な計算は、どこにも入っていない。全部ブラウザの中で完結する、軽い模型である。

とはいえ、原理を見せる模型としては、これで十分だ。「文脈を見て、次の語を確率で選ぶ」という仕組みは、本物と同じだからだ。違うのは精度とスケールであって、原理ではない。ズルになるとすれば、これをニューラルネットそのものだと偽ったときだけ。だから画面の下に「これは仕組みを直感で理解するための簡略化されたデモです。実際のLLMはニューラルネットワークを使い、はるかに大規模です」と常時表示してある。それで、嘘ではなく”誠実な簡略化”になる。

技術的には、transformers.js を使えばブラウザで本物の極小モデルを動かすこともできる。ただ数百MBのダウンロードが走って、非力なPCやスマホでは詰む。教室で配るには向かない。”本物”を見せることが、必ずしも”よく伝わる”ことにはならない、という良い例だ。

ついでに、配る場所を選ばないよう、表示テーマも三つ用意した。既定の暗いネオン調、明るい教室向けの紙っぽい配色、そしてプロジェクター投影向けの高コントラスト。中身は同じでも、映す場所で「見え方」は変えられる。

触れば、たぶん伝わる

用語をいくら積み上げても像が結ばなかったものが、クリック一つで文が伸びるのを見た瞬間に、するっと腑に落ちることがある。

説明するより、触らせる。LLMの説明はなかなか伝わらない、という課題感への、私なりの一つの答えがこれだ。

実際に触れるデモ：https://kuzlab.github.io/llm-how-it-works/

---

参考リンク

• 実際に動くデモ：https://kuzlab.github.io/llm-how-it-works/
• ソースコード（GitHub）：https://github.com/kuzlab/llm-how-it-works
• Transformers.js（ブラウザ上でモデルを動かすライブラリ）：https://huggingface.co/docs/transformers.js
• 単語ベクトル（意味の近い語が近くに集まる）― word2vec / Mikolov et al., 2013：https://arxiv.org/abs/1301.3781
• 両側を見るモデル ― BERT / Devlin et al., 2018：https://arxiv.org/abs/1810.04805

この文章は原案・ディレクション：九頭龍、作文：AIで書いています。