[機械学習] ブラウザで動くニューラルネットワークの3D可視化フレームワーク

株式会社プライムストラクチャーの若手エンジニアのSayaです。

今回は何層にも複雑に構成されるニューラルネットワークのモデルを3Dで可視化出来るフレームワークであるTensorSpace.jsを紹介します。

TensorSpace.jsとは

TensorSpace.jsはTensorFlow.js、Three.js、Tween.jsによって構築されたニューラルネットワークの3D視覚化フレームワークです。

視覚化することによってモデル構造やどのように訓練されているかが一目で分かるようになります。

モデルを前処理した後、TensorFlow、Keras、TensorFlow.jsから事前に訓練されたモデルを視覚化することができます。

デモ画面で簡単に見てみる

公式のデモ画面よりニューラルネットワークモデルを視覚化したものがいくつか見られます。

TensorSpace Playground

左のリストから好きなニューラルネットワークモデルを選択することで表示されます。


上の画像では LeNetを表示しました。

容量の大きいものだと表示されるまでに数分かかることがあります。

シンプルなモデルの表示

実際にシンプルなモデルの表示をTensorSpaceのHalloWorldで行います。

TensorSpaceをダウンロードする

TensorSpaceのダウンロードには
* npmを使用したダウンロード

$ npm install tensorspace
  • yarnを使用したダウンロード
$ yarn add tensorspace
  • zipファイルのダウンロード
    v0.1.zip

の3通りがあります。
好きな手段でダウンロードしますが、今回はyarnで行いました。

関連ファイルをダウンロードする

$ svn export https://github.com/tensorspace-team/tensorspace/trunk/examples/helloworld
$ svn export https://github.com/tensorspace-team/tensorspace/trunk/examples/lib

で表示に必要な関連ファイルをダウンロードします。

パスを修正する

helloworld.html内のパスを修正します。

    <script src="../lib/three.min.js"></script>
    <script src="../lib/tween.min.js"></script>
    <script src="../lib/tf.min.js"></script>
    <script src="../lib/TrackballControls.js"></script>
    <script src="../node_modules/tensorspace/build/tensorspace.min.js"></script>
    <script src="../lib/jquery.min.js"></script>

上記のように修正します。

ファイルを開く

helloworld.htmlファイルをブラウザで開きます。
左クリックや右クリックで色々な視点からモデルを見ることが出来ます。

注意
httpもしくはhttpsから始まるURL出ないと開けないので、Docker等でサーバーを起動する方法でやりました。
htmlファイルを直接開くと出てくるfile:から始まるURLでは開けません。

まとめ

このTensorSpace.jsを使うことで複雑なニューラルネットワークを見て確認出来るようになりました。
深層学習モデルがどのように学習を行なっているかが見て分かるので、自分で学習モデルを作るときなどに役立ちそうです。

参考文献

TensorSpace.js
tensorspace-team/tensorspace: Neural network 3D visualization framework, build interactive and intuitive model in browsers, support pre-trained deep learning models from TensorFlow, Keras, TensorFlow.js


今回の内容をGithubにまとめました。
https://github.com/Saya-hack/Visualize-MLmodel