PRINTEMPS LAB

ニューラルネット可視化プレイグラウンド

依存ライブラリゼロの自前ニューラルネットワークが、ブラウザの中で2次元分類問題を学習していきます。 決定境界のヒートマップ、各ニューロンの活性化マップ、重みの太さと色がリアルタイムに変化する様子を観察してください。 データセット・隠れ層の構成・学習率などは自由に変更できます。

プレイグラウンドを読み込み中...

このデモの仕組み

画面の中で動いているのは、全結合フィードフォワード型のニューラルネットワークです。 入力は2次元座標から作った特徴(x₁, x₂, x₁², x₂², x₁x₂, sin x₁, sin x₂)、 出力はクラスを表す1つの値(+1が青、-1がオレンジ)です。

順伝播では各層で z = W a + b, a = f(z) を計算します。学習はミニバッチSGDで、逆伝播により出力層の誤差 delta_L = (a_L - y) f'(z_L) delta_l = W_{l+1}ᵀ delta_{l+1} ⊙ f'(z_l) と入力側へ伝え、勾配 dW = delta aᵀ / batch で重みを更新します。損失は平均二乗誤差(MSE/2)です。

決定境界ヒートマップは60x60のグリッド点をまとめて順伝播し、 その中間層の活性値をネットワーク図の各ノード内のミニマップにも再利用しています。 「層が深くなるほど単純な特徴が組み合わさって複雑な境界になる」流れを1画面で追えます。

自前実装の範囲

行列演算(Float64Arrayベースの行列積・転置積)、順伝播、逆伝播、ミニバッチSGD、 Xavier/He初期化、seed付き乱数(mulberry32)、データセット生成、 ヒートマップ・損失曲線の描画まで、機械学習ライブラリもチャートライブラリも使わず TypeScriptで実装しています(runtime追加依存パッケージ0個)。 ソースコードを読めばニューラルネットの数式がそのまま追える構成です。 リポジトリ: git.printemps.tokyo/lab-neural

遊び方のヒント

  • XORデータを選び、隠れ層を1層1ニューロンにしてみてください。どれだけ学習しても 解けません。ニューロンを増やすか、x₁x₂特徴をオンにすると一気に解けます。
  • スパイラルは最難関です。隠れ層3層・各8ニューロン・tanh・学習率0.03あたりから 調整してみてください。
  • 学習率を1にすると損失が発散する様子、ReLUとtanhで決定境界の質感 (カクカクと滑らか)が変わる様子も観察できます。

用語ミニ辞典

エポック
学習データ全体を1回走査すること。本デモでは1秒に数百エポック進むこともある。
学習率
勾配に沿って重みを動かす1回あたりの幅。大きすぎると損失が発散し、小さすぎると学習が進まない。
活性化関数
各ニューロンの出力にかける非線形変換。tanh/ReLU/sigmoidで決定境界の質感が変わる。
バッチサイズ
1回の勾配計算に使うサンプル数。小さいほど更新がノイジーになり、大きいほど滑らかになる。
損失(MSE)
予測と正解ラベル(±1)の二乗誤差の平均。本デモは mean((y_hat - y)^2) / 2 を最小化する。
決定境界
ネットワークの出力が0になる線。青(+1)とオレンジ(-1)の領域の境目として描画される。
L2正則化
重みの大きさに罰則をかけて過学習を抑える手法。更新式に lambda * W の項が加わる。
重み初期化
学習前の重みの決め方。tanh/sigmoidはXavier一様、ReLUはHe正規を使用。seed付きで再現可能。