TensorSpace.jsでニューラルネットワークを3D可視化

皆様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に関しては、以前書きました記事をご参照ください。

Google Colaboratoryの無料GPU環境を使ってみた

https://www.tdi.co.jp/miso/google-colaboratory-gpu

機械学習やDeep Learningを快適に行うためにはそれなりのマシンスペックが必要になります。ある程度のメモリ容量はもちろん、GPUも必須といっていいでしょう。通常使用のPCでは、メモリが足りず処理できなかったり、1試行ごとに数十分～数時間待つことになったりということがあるのではないでしょうか。また、IaaSを用いれば高スペックな環境を手に入れることはできますが、コストもかかりますし、環境設定に翻弄されることも多いですよね。この問題をある程度解決しうる手段としてGoogle Colaboratoryを紹介します。

MISO｜未来を創造するITのミソ

やってみる

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行目以降を書き換えて（といってもコメントをつけたり外したりしていくだけですが）学習と出力を行いましょう！最終的には以下のようになります。

import tensorflow as tf
import numpy as np
from keras.models import Sequential, Model, load_model
from keras.layers import Dense, Input, InputLayer, Conv2D, MaxPooling2D, Reshape, Flatten

mnist = tf.keras.datasets.mnist


def create_sequential_model():
    single_output_model = Sequential([
        InputLayer(input_shape=(28, 28)),
        Reshape((28,28,1),input_shape=(28,28,)),
        Conv2D(filters=6, kernel_size=5, strides=1, input_shape=(28, 28, 1), name="Conv2D_1"),
        MaxPooling2D(pool_size=(2, 2), strides=(2, 2), name="MaxPooling2D_1"),
        Conv2D(filters=16, kernel_size=5, strides=1, name="Conv2D_2"),
        MaxPooling2D(pool_size=(2, 2), strides=(2, 2), name="MaxPooling2D_2"),
        Flatten(),
        Dense(120, activation="relu", name="Dense_1"),
        Dense(84, activation="relu", name="Dense_2"),
        Dense(10, activation="softmax", name="Softmax")
    ])
    return single_output_model


def create_model():
    input_tensor = Input(shape=(28, 28))
    reshape_layer = Reshape((28, 28, 1), input_shape=(28, 28,))(input_tensor)

    conv2D_layer_1 = Conv2D(filters=6, kernel_size=5, strides=1, input_shape=(28, 28, 1))(reshape_layer)
    maxpool2D_layer_1 = MaxPooling2D(pool_size=(2, 2), strides=(2, 2))(conv2D_layer_1)

    conv2D_layer_2 = Conv2D(filters=16, kernel_size=5, strides=1)(maxpool2D_layer_1)
    maxpool2D_layer_2 = MaxPooling2D(pool_size=(2, 2), strides=(2, 2))(conv2D_layer_2)

    flatten_layer = Flatten()(maxpool2D_layer_2)
    dense_layer_1 = Dense(120, activation="relu")(flatten_layer)
    dense_layer_2 = Dense(84, activation="relu")(dense_layer_1)
    dense_layer_3 = Dense(10, activation="softmax")(dense_layer_2)

    classic_model =Model(
        inputs=input_tensor,
        outputs=dense_layer_3
    )
    return classic_model


def train_model():
    (x_train, y_train), (x_test, y_test) = mnist.load_data()
    x_train, x_test = x_train / 255.0, x_test / 255.0

    model = create_sequential_model()
    # model = create_model()

    model.compile(optimizer='adam',
                  loss='sparse_categorical_crossentropy',
                  metrics=['accuracy'])

    model.fit(x_train, y_train, epochs=5, batch_size=256)
    # model.evaluate(x_test, y_test)
    return model


def save_model(model, name_path):
    model.save(name_path)


def load_from_model(name_path):
    model = load_model(name_path)
    # Load model from json+weights
    # from keras.models import model_from_json
    # json_path = "./saved_models/gan/generator.json"
    # weight_path = "./saved_models/gan/generator_weights.hdf5"
    #
    # structure = open(json_path, "r")
    # model = model_from_json(
    #     structure
    # )
    # model.load_weights(weight_path)
    return model


def generate_encapsulate_model_with_output_layer_names(model, output_layer_names):
    enc_model = Model(
        inputs=model.input,
        outputs=list(map(lambda oln: model.get_layer(oln).output, output_layer_names))
    )
    return enc_model


def generate_encapsulate_model(model):
    enc_model = Model(
        inputs=model.input,
        # ignore 1st layer (input), since some old models do not have 1st layer as Keras layer
        outputs=list(map(lambda layer: layer.output, model.layers[1:]))
    )
    return enc_model


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") # わかりやすいようカレントディレクトリに出力

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にコピペして実行してみましょう。

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

				
					
				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
次に変換を行います。わかりやすいように同じディレクトリに出力します。

!tensorflowjs_converter \
    --input_format=keras \
    enc_keras_model.h5 \
    keras

1

2

3

4

!tensorflowjs_converter \

--input_format=keras \

enc_keras_model.h5 \

keras

「Using TensorFlow backend.」とだけ表示され、処理が完了します。kerasディレクトリに出力されているので、zipに圧縮して !zip -r keras.zip keras ダウンロードします。

from google.colab import files

files.download("keras.zip")

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へ変更します。

変更前

JavaScript
model.load( {

                type: "tfjs",
                url: './lenetModel/mnist.json'

            } );

				1
2
3
4
5
6

						model.load( {
 
                type: "tfjs",
                url: './lenetModel/mnist.json'
 
            } );

変更後

model.load( {

                type: "keras",
                url: './lenetModel/model.json'

            } );

1

2

3

4

5

6

model.load( {

type: "keras",

url: './lenetModel/model.json'

} );

次に、ネットワークの変更を行います。lenet.htmlに書かれているネットワークと、今回用いたネットワークを比べると、159行目からの以下のコードが不要なことがわかります。

model.add( new TSP.layers.Padding2d( {

&nbsp;&nbsp;&nbsp;&nbsp;padding: [&nbsp;2,&nbsp;2&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"padding"

} ) );

				159
160
161
162
163
164

						model.add( new TSP.layers.Padding2d( {
 
&nbsp;&nbsp;&nbsp;&nbsp;padding: [&nbsp;2,&nbsp;2&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"padding"
 
} ) );

まとめてコメントアウトしてしまいましょう！

5. 表示

これにてすべての準備が完了しました！lenet.htmlをFirefoxで開いてみましょう！

表示されました！ためしに適当に入力してみましょう。

反映されましたね。最終層（白い層）をクリックして開いてみると……？

ちゃんと推定できています！やったーー！

おわりに

いかがでしたでしょうか。書き換えで行ったので殆ど負担なく、自分が学習させたモデルの可視化ができましたね。LeNetだとそこまで面白みはないのですが、より複雑なモデルを出力してみる等色々遊べると思います。GANを出力すると結構面白い結果になるのではないでしょうか。皆さんのよき可視化ライフの一助になれれば幸いです！

TensorSpace.jsでニューラルネットワークを3D可視化

はじめに

前提条件

やってみる

1. TensorSpace.jsの導入

2. モデルの学習&出力

3. TensorSpace.js用に変換

4. TensorSpace.jsでの表示

5. 表示

おわりに

執筆者プロフィール

この執筆者の最新記事

関連記事

はじめに

前提条件

やってみる

1. TensorSpace.jsの導入

2. モデルの学習&出力

3. TensorSpace.js用に変換

4. TensorSpace.jsでの表示

5. 表示

おわりに

執筆者プロフィール

この執筆者の最新記事

関連記事

Python3.11のLambdaでもAWS AmplifyのCI/CDが出来るようにカスタムイメージをAmazon ECRに作成する

画面と承認フローを連携してみた～Power Apps編～

コンソール操作からコードを生成する「AWS Console-to-Code」