Screenshots
Overview
概要
2次元の分類問題をブラウザ内の小さなニューラルネットが学習していく過程を、決定境界のヒートマップ・各ニューロンの活性化マップ・重みの太さと色でリアルタイムに可視化するプレイグラウンドです。TensorFlow Playgroundへのオマージュでありながら、行列演算・順伝播・逆伝播をすべて自前のTypeScriptで実装し、実行時の依存パッケージはゼロ。日本語UIと用語解説つきで、学習の中身が透けて見える実験台です。
How to use
遊び方・使い方
データセット(同心円・XOR・2ガウシアン・スパイラル)と、隠れ層の構成・学習率・活性化関数・バッチサイズ・ノイズを選んで実行します。中央のネットワーク図で各ニューロンの活性化と重みの変化を、右の決定境界ヒートマップと損失曲線で学習の進み具合を観察。特徴量(x1²・sin x1など)のトグルや1ステップ実行で、モデルがどう境界を引いていくかを手で確かめられます。
Tech stack
技術スタック
TypeScriptNext.js 16React 19Canvas 2D / SVGTailwind CSS v4
TensorFlow.jsやチャートライブラリを使わず、NN本体・可視化(SVG＋Canvas)・データ生成まで自前実装。ミニバッチSGDでseed固定により決定的に再現でき、ネットワーク構成はlocalStorageに保存(重みは非保存)します。
Highlights
工夫した点
- 全結合フィードフォワードの順伝播と逆伝播をFloat64Array行列で解析的に直書き(delta伝播・dW算出・L2正則化つき更新)。重み初期化はXavier/He、乱数はmulberry32で決定的
- 決定境界は60x60点をバッチ推論しImageDataを拡大して描画、活性化マップは中間活性を再利用して追加計算ゼロ。重みエッジはSVGのpathで太さと符号色(正=青/負=橙)を表現
- 学習はrAF1フレームあたり最大10エポック・8ms予算超で打ち切る適応制御で、UIの応答性を維持。ヒートマップは2フレームに1回に間引き
To improve
改善したい点
- 計算はメインスレッドで行うため、大きめのネットワークでは重くなる(Web Worker化は今後)
- 分類2次元・回帰なしの範囲で、扱える問題の種類に伸びしろ
- おまけの手書き数字デモは拡張段階で作り込み余地がある
What's next
今後の展望
- 畳み込み層や、より大きなネットワークのWorker実行
- 回帰問題や多クラス分類への対応
- 学習過程の記録・再生や、設定の共有