はじめに
皆様TensorSpace.jsをご存知でしょうか。
TensorSpace.jsとは、ニューラルネットワークを可視化するNode.jsのライブラリのことです。可視化大好きマンとしてはv0.1の時から触ってはいて、ずっと記事を書きたいと思っていたのですが気づいたら年が明けてました。。。
さて、ニューラルネットワークの可視化と言えばTensorFlow.jsがありますが、TensorSpace.jsはTensorFlow.jsを基にした、3D可視化ライブラリです。公式ページのPlaygroundで様々なデモが見られます(リンクはLeNetのもの)。まず触ってイメージをつけてみてください。ニューラルネットワークをぐりぐり動かして遊べるのって面白いと思いませんか?
この記事では、公式のDocumentationを基に、Kerasでモデルを学習させ、表示するまでの一連の流れを行います。ソースコードは公開されているサンプルを流用しますので、ほとんどコードを書かずに行えます。一回試してしまえば細かく変更することで独自モデルの可視化もできるようになりますので、気軽にやっていきましょう!
前提条件
筆者はWindows 10で行います。OSに依存することはあまりないと思いますが、他OSで行う方は適宜読み替え下さい。また、以下の内容は本記事では扱いません。以下の3つが使えるよう、事前に準備をお願いします。
- Node.jsとnpm
- Mozilla Firefox
- Google Colaboratory
Google Colaboratoryに関しては、以前書きました記事をご参照ください。
やってみる
1. TensorSpace.jsの導入
npm install tensorspace 以上です。
導入が完了したらTensorSpace.jsのgitリポジトリをCloneし、tensorspace/examples/helloworld/helloworld.htmlを開いてみてください。以下のようなページが表示されれば成功です。
ただ、Google Chrome等一部のブラウザだと
browser_http.ts:171 Fetch API cannot load file:///C:/~~~~/tensorspace/examples/helloworld/model/mnist.json. URL scheme must be “http” or “https” for CORS request
といったエラーが出て表示されない場合があります。Chromeのローカルファイル読み込みの制限に引っかかっているだけですので、Firefoxで開けば回避できます。
2. モデルの学習&出力
それでは本題です。モデルを学習し、TensorSpace.js用に出力しましょう!DocumentationのPreProcessingのKerasを参考に、Google Colaboratory上で進めていきます。
keras_model.pyを用いてやっていきましょう!Documentationのページからでも参照できますが、1. TensorSpace.jsの導入 でCloneしたリポジトリの、tensorspace/docs/preprocess/Keras/src_py/keras_model.py にあります。
このコードでは、MNISTをLeNetで行います。ただし、keras_model.pyはそのままでは学習済みのモデルを読み込んで、結果をコンソールに出力するだけのコードになっています。いくつかのメソッドが定義されているので、使うメソッドを選択して、モデルを学習し、TensorSpace.jsのために出力しましょう!
今回使うメソッドは以下の通りです。
メソッド名
|
概要
|
---|---|
train_model | LeNetモデルを構築し、MNISTデータセットを用いて学習する。 |
generate_encapsulate_model_with_output_layer_names | モデルをTensorSpace.js用に変換する。 |
save_model | モデルを出力する。 |
それでは99行目以降を書き換えて(といってもコメントをつけたり外したりしていくだけですが)学習と出力を行いましょう!最終的には以下のようになります。
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
model = train_model() # save_model(model, "../models/keras_model.h5") # 今回そのままの出力は不要のためコメントアウト # model = load_from_model("../models/keras_model.h5") # model = load_from_model("../models/enc_keras_model.h5") # 出力の確認(省略) # input_sample = np.ndarray(shape=(28,28), buffer=np.random.rand(28,28)) # input_sample = np.expand_dims(input_sample, axis=0) # print(model.predict(input_sample)) model.summary() # モデルの確認 for l in model.layers: print(l.name) output_layer_names = ["Conv2D_1", "MaxPooling2D_1", "Conv2D_2", "MaxPooling2D_2", "Dense_1", "Dense_2", "Softmax"] # 出力用にモデルを変換 enc_model = generate_encapsulate_model_with_output_layer_names(model, output_layer_names) # enc_model = generate_encapsulate_model(model) # 出力の確認 #print(enc_model.predict(input_sample)) # モデルの出力 enc_model.compile(optimizer='adam', loss='sparse_categorical_crossentropy', metrics=['accuracy']) save_model(enc_model, "enc_keras_model.h5") # わかりやすいようカレントディレクトリに出力 |
コメントで要所の解説を加筆しています。書き換えたコードをGoogle Colaboratoryにコピペして実行してみましょう。
1 2 3 4 5 6 7 8 9 |
Downloading data from https://storage.googleapis.com/tensorflow/tf-keras-datasets/mnist.npz 8192/11490434 [..............................] - ETA: 0s Using TensorFlow backend. 11493376/11490434 [==============================] - 0s 0us/step Epoch 1/5 60000/60000 [==============================] - 36s 600us/step - loss: 0.1910 - acc: 0.9428 Epoch 2/5 60000/60000 [==============================] - 35s 591us/step - loss: 0.0677 - acc: 0.9792 |
上のような出力が得られ、models/end_keras_model.h5が出力されます。 !lsコマンドで出力を確認します。enc_keras_model.h5が表示されれば成功です。これで学習と出力は完了です。
3. TensorSpace.js用に変換
※2. モデルの学習&出力 で用いたGoogle Colaboratory上で引き続き行ってください。
tensorflowjs converterを用いて、前項で出力したモデルをTensorSpace.jsで読み込めるよう変換を行います。まずはインストールを行いましょう。
!pip install tensorflowjs
次に変換を行います。わかりやすいように同じディレクトリに出力します。
1 2 3 4 |
!tensorflowjs_converter \ --input_format=keras \ enc_keras_model.h5 \ keras |
「Using TensorFlow backend.」とだけ表示され、処理が完了します。kerasディレクトリに出力されているので、zipに圧縮して !zip -r keras.zip keras ダウンロードします。
1 2 3 |
from google.colab import files files.download("keras.zip") |
解凍し、以下のようなファイルがあることを確認してください。
4. TensorSpace.jsでの表示
ここまでくればあと一息です!最初にCloneしたリポジトリの、tensorspace-master/examples/lenetを書き換えて表示しましょう!書き換える内容は以下の2点です!
- 読み込むモデルの変更
- ネットワークの変更
読み込むモデルの変更 で行うことは、今読み込んでいるモデルと、今回生成したモデルの差し替えです。先ほどダウンロードした2つのファイルを、lenet/lenetModelに移動してください。
次に、lenet/lenet.htmlを書き換えて読み込む対象ファイルを変更します。検索で「model.load」が書かれている箇所を探し、読み込みタイプをtfjsからkerasへ、対象ファイルをmnist.jsonからmodel.jsonへ変更します。
変更前
1 2 3 4 5 6 |
model.load( { type: "tfjs", url: './lenetModel/mnist.json' } ); |
変更後
1 2 3 4 5 6 |
model.load( { type: "keras", url: './lenetModel/model.json' } ); |
次に、ネットワークの変更 を行います。lenet.htmlに書かれているネットワークと、今回用いたネットワークを比べると、159行目からの以下のコードが不要なことがわかります。
159 160 161 162 163 164 |
model.add( new TSP.layers.Padding2d( { padding: [ 2, 2 ], name: "padding" } ) ); |
まとめてコメントアウトしてしまいましょう!
5. 表示
これにてすべての準備が完了しました!lenet.htmlをFirefoxで開いてみましょう!
表示されました!ためしに適当に入力してみましょう。
反映されましたね。最終層(白い層)をクリックして開いてみると……?
ちゃんと推定できています!やったーー!
おわりに
いかがでしたでしょうか。書き換えで行ったので殆ど負担なく、自分が学習させたモデルの可視化ができましたね。LeNetだとそこまで面白みはないのですが、より複雑なモデルを出力してみる等色々遊べると思います。GANを出力すると結構面白い結果になるのではないでしょうか。皆さんのよき可視化ライフの一助になれれば幸いです!
執筆者プロフィール

- tdi デジタルイノベーション技術部
-
入社して半年間ロボコン活動に専念。少しのJavaエンジニア期間を経てデータ分析や機械学習、Deep Learningをテーマに勤労しております。
昔取った杵柄を摩耗させつつ新たな支えを求めて試行錯誤中。
この執筆者の最新記事
Pick UP!2020.10.30Python/Kerasで学習させたモデルをJavaで動かすだけじゃ速くならなかった
ITコラム2020.08.04DL4Jを使うためにEclipseでMaven使おうとして困ったら
AI2019.11.29AIの検証・開発を行うときに必要なハードウェア条件とは?
AI2019.08.05Google Colaboratoryの無料GPU環境を使ってみた