nn-anatomy

NN Anatomy — ニューラルネットの中身を 1 ノード単位で見る GUI シミュレータ

ニューラルネットワークの forward / backward / update を、ノード 1 つ・エッジ 1 本の粒度で追える ブラウザ用シミュレータ。大学情報系学部の初学者向けに「ニューラルネットの中で実際に何が計算されているか」を、図と式の両方で観察できるように作った教材です。

配布物は 単一 HTML (約 200 KB、外部依存・CDN なし)。ダウンロードしてブラウザで開くだけで動きます。

できること

使ってみる

一番手軽 (推奨)

  1. build/nn_sim.html を git clone 後にブラウザでダブルクリックで開くだけ。file:// で全機能動作します (オフライン可)。
  2. 上部 Lesson セレクタから Lesson1 を選び、Forward ボタンを押すところから始めてみてください。

ソースから単一 HTML を生成する

make bundle   # → build/nn_sim.html (約 174 KB)

tools/bundle.py (Python 標準ライブラリのみ) が src/index.html の <link> <script> を、src/style.css と src/js/*.js のインライン展開に差し替えます。

ローカルで開発する

make serve    # → http://localhost:8000/ (src/index.html を直接開く)
make test     # JS + Python の全テストを一括実行
make test-js  # node:test で JS 単体テスト
make test-py  # uv run pytest で Python 参照実装テスト

レッスン一覧

Lesson 内容 構成 学習対象
Lesson1 1 ノードの線形変換 1→1 linear z = wx + b の構造、勾配 dL/dw, dL/db の意味
Lesson2 活性化関数 (sigmoid) 1→1 sigmoid σ の S 字形、φ’(z) の場所依存、勾配消失の入口
Lesson3 小さな MLP の Forward 2→2→1 sigmoid Σ の流れ、層を跨いだ伝播
Lesson4 損失と勾配 (MSE) 2→2→1 sigmoid L の定義、dL/dw の符号と意味 (+ 勾配消失問題の最小例)
Lesson5 Backward の連鎖律 2→2→1 sigmoid δ_j = (Σ_k w·δ_next) · φ’(z) の数値展開
Lesson6 1 step Update 2→2→1 sigmoid Δw = −η · dL/dw の方向と大きさ、LR 比較
Lesson7 XOR を解く 2→3→1 sigmoid 平坦域 → 急降下の 2 相 Loss、非線形決定境界、中間表現
Lesson8 活性化の比較 2→3→1 (relu/sigmoid/tanh) dying ReLU、飽和、初期化方式 (Xavier / He) の使い分け

授業向けの 90 分進行プランは docs/lesson-plans.md、画面に出る数式の定義・導出は docs/math-notes.md を参照。

技術構成

ディレクトリ構成

src/
  index.html          UI エントリ
  style.css           スタイル
  js/
    rng.js            mulberry32 / サブシード派生
    datasets.js       AND / OR / XOR / CIRCLE / DRAW_2D / 1D 系
    lessons.js        Lesson1〜Lesson8 定義 (推奨 seed と詳しい hint・check)
    model.js          createNet / forward / backward / update / trainEpoch
    view.js           SVG 描画 + 粒アニメーション + 編集 UI
    explain.js        「式の展開」パネルの HTML テンプレート
    controller.js     UI とモデルの接続、イベント配線
tests/
  js/                 node:test 単体テスト
  py/                 NumPy 参照実装 + バンドル検証
  fixtures/           参照実装が生成する数値フィクスチャ
tools/
  bundle.py           単一 HTML 生成スクリプト
docs/
  design.md           設計書 (全機能仕様)
  math-notes.md       画面の式と数学的記号の対応
  lesson-plans.md     Lesson1〜8 の授業進行プラン
  implementation-notes.md  v1 までの開発ログ (UI/UX 調整経緯)
build/
  nn_sim.html         配布用の単一 HTML (make bundle で生成)
Makefile              開発タスク (make help)
pyproject.toml        Python 依存 (numpy, pytest)

開発環境

初回:

uv sync               # Python 依存 (numpy, pytest) を .venv に揃える
node --version        # v20 以上であることを確認

ステータス

v1 完成 (2026-04)。Lesson1〜8 すべて稼働、JS / Python のテスト全 71 件パス、単一 HTML 約 192 KB。次バージョンの候補:

関連ドキュメント