AI 記事用ビジュアル部品のサンプル — 数式・学習曲線・ネットワーク図

このページについて

AI 系の記事で使う 3 つの視覚コンポーネントの表示サンプルです。すべて記事 JSON のブロック (math_view / training_chart / network_diagram) として書け、静的な画像ではなくブラウザ上で動きます。見た目の調整は app/commons/shared/ai-visuals/ の各 *.module.css で行います。

1. 数式ビュー (math_view)

1 つのニューロンの計算を式で表します。凡例にカーソルを乗せるか、式の該当部分をクリックすると、記号と意味が対応して光ります。

損失関数のように式を展開して見せたいときは steps を使います。行をクリックすると補足が開きます。上付き・下付き・分数・log・ハットなどの記法もそのまま書けます。

2. 学習曲線 (training_chart)

学習 (train) と検証 (val) の損失を epoch ごとに描いたグラフです。グラフ上にカーソルを乗せると各系列の値が出ます。凡例をクリックすると系列を隠せます。検証損失が最小になった epoch に「early stop」の印を付けています。

折れ線以外も同じ軸に混ぜられます。下は精度を折れ線、学習率を棒、クロスバリデーションのばらつきを帯で重ねた例です。

3. ネットワーク図 (network_diagram)

ノードには文字を書かず、各層の「?」またはノードをクリックすると下に中身が出ます。▶ を押すとデータが入力から出力へ流れ、到着した層のノード脇に値が出ます。

逆伝播だけを見せたいときは flow.mode: "backward" にします。切替 UI は出ず、最初から赤い粒子が出力側から戻ります。

CNN は畳み込み層とプーリング層を特徴マップの積み重ねで描き、Flatten を挟んで全結合につなぎます。

RNN は同じ層を時刻ごとに使い回すので、自己ループの矢印で表します。残差接続 (ResNet) は層を飛び越えて足し合わせる経路なので、上を迂回する破線で表します。

記事で使うときの書き方

3 ブロックの JSON 仕様は app/commons/shared/ai-visuals/README.md と types.ts にまとめてあります。この記事のソース (ml-foundations/ai-visuals-demo.json) をコピーして書き始めると早いです。