visual-learning
ディープラーニング インタラクティブ可視化
ニューラルネットの中核概念を、ブラウザでパラメータを動かして体感する POC 集。
基礎概念
ニューロン
パーセプトロン
2 クラスを 1 本の直線で分ける境界を「間違えたら直す」で学習。
開く →
学習
活性化関数と勾配消失
sigmoid・tanh・ReLU の形と微分。深い層で勾配が消える理由。
開く →
DL損失関数（MSE と交差エントロピー）
回帰モードでは予測点をドラッグすると残差²の面積バーが伸び縮みしMSEが更新
開く →
学習
勾配降下法
損失曲線を下るボール。学習率の大小と局所最適への落ち込みを体感。
開く →
CNN
CNN
畳み込み演算
カーネルが画像をスライドし特徴マップを作る。エッジ検出など。
開く →
DLプーリング（max / average の動作とダウンサンプリング）
特徴マップ上をプーリング窓がスライドし
開く →
学習の仕組み
DL
誤差逆伝播（計算グラフを勾配が逆流する）
入力値や重みのスライダーを動かすと順伝播の各ノード値が更新
開く →
DL多層パーセプトロン（隠れ層を増やすと表現力が変わる）
データ形状（XOR/円/スパイラル/市松）を選び
開く →
DL重みの初期化（Xavier / He と勾配の伝わり方）
層数と初期化方式（一様小/大・Xavier・He）を選ぶと
開く →
DLドロップアウト（ニューロンをランダムに落として汎化）
小さなネットワーク図で
開く →
DLバッチ正規化（分布を揃えて学習を安定させる）
ヒストグラムで入力分布を表示し
開く →
DL過学習と正則化（訓練／検証の損失曲線）
多項式の次数（モデル複雑さ）・正則化強度λ・訓練データ数・ノイズをスライダー設定
開く →
DLOptimizer 比較（SGD / Momentum / Adam の軌跡）
細長い谷や鞍点を持つ2D損失曲面上で出発点をクリック指定し
開く →
DL学習率スケジューリング（warmup と減衰）
warmupステップ数・減衰方式（step/cosine/指数）・初期学習率をスライ…
開く →
系列モデル
DL
RNN の時系列展開（隠れ状態が時間方向に流れる）
入力系列（文字や数値列）を与えると
開く →
DLLSTM のゲート機構（忘却・入力・出力ゲート）
各ゲートの開度（0〜1）をスライダーで動かすと
開く →
埋め込みと言語
DL
単語埋め込み（king - man + woman ≈ queen を2D投影で）
2D散布図に単語ベクトルを配置し
開く →
DLトークン化（BPE で部分語に分割される過程）
テキストを入力し「マージ」ボタンを押すたびに
開く →
DLSoftmax と温度（次トークン確率分布の鋭さ）
複数候補のロジットをスライダーで設定し
開く →
DL位置エンコーディング（sin/cos の位置埋め込み波形）
位置インデックスのスライダーを動かすと
開く →
Transformer / Attention
Attention
Self-Attention（視線メタファー版）
各単語がどこを「見ている」かで Attention を素人向けに表現。
開く →
Attention
Self-Attention（二部グラフ版）
Query と Key を二部グラフで結び、注目の強さを線の太さで表現。
開く →
Attention
Self-Attention（Matrix 版）
Q・K・V の内積と softmax で重みが決まる過程を行列で表示。
開く →
Attention
Multi-Head Attention
4 つのヘッドがそれぞれ異なる関係を捉える様子。
開く →