1. 简介
TensorSpace 是一套用于构建神经网络3D可视化应用的框架。开发者可以使用类 Keras 风格的 TensorSpace API, 轻松创建可视化网络、加载神经网络模型并在浏览器中基于已加载的模型进行3D可交互呈现。通过使用 TensorSpace,可以更直观的观察并理解基于 TensorFlow、Keras 或者 TensorFlow.js 等开发的神经网络模型。
2. 项目环境要求
TensorSpace官网给出的适配TensorSpace.js 浏览器有:
浏览器 | 版本号 |
---|
Chrome | 64+ |
Firefox | 58+ |
Safari | 12+ |
TensorSpace.js 需要以下依赖库:
名称 | 版本号 |
---|
TensorFlow.js | 1.0.0+ |
Three.js | r101+ |
Tween.js | 17.2.0+ |
3. 安装
- 第一步:下载依赖库
依赖库文件 | 备注 |
---|
TensorFlow.js | tf.min.js |
Three.js | three.min.js |
Tween.js | tween.min.js |
TrackballControls | TrackballControls.js |
- 第二步:下载 TensorSpace
下载链接: Github.
<!-- 将”VERSION”替换成需要的版本 -->
<script src="tensorspace.min.js"></script>
- 第三步:在页面中引入库文件
<script src="tf.min.js"></script>
<script src="three.min.js"></script>
<script src="Tween.min.js"></script>
<script src="TrackballControls.js"></script>
<script src="tensorspace.min.js"></script>
4. 使用
- 第一步:模型预处理
- 这里我们使用到的是一个名为
TensorSpace-Converter
的模型转换工具,它可以帮助我们快速完成 TensorSpace 预处理过程。由于我之前的实验使用的是Keras,并用它训练得到了一个Keras模型,并且其模型结构和权重保存在一个HDF5文件里,所以我们编写一个bash
脚本来进行模型转化。
#!/usr/bin/env bash
tensorspacejs_converter \
--input_model_from="keras" \
--input_model_format="topology_weights_combined" \
--output_layer_names="conv2d_1,max_pooling2d_1,conv2d_2,max_pooling2d_2,conv2d_3,max_pooling2d_3,conv2d_4,max_pooling2d_4,flatten_1,dense_1,dense_2" \
./model/model_demo.h5 \
./convertedModel\
- 以上
TensorSpace-Converter
预处理脚本将会在 convertedModel
文件夹中生成经过预处理的模型:
(1)一份 model.json 文件:包含所得到的模型结构信息(包括中间层输出)。
(2)一些权重文件:包含模型训练所得到的权重信息。权重文件的数量取决于模型的结构。
图4 将模型 Layer 名取出并设置 output_layer_names |
---|
Model: "sequential_1"
_________________________________________________________________
Layer (type) Output Shape Param #
=================================================================
conv2d_1 (Conv2D) (None, 64, 64, 16) 448
_________________________________________________________________
max_pooling2d_1 (MaxPooling2 (None, 32, 32, 16) 0
_________________________________________________________________
conv2d_2 (Conv2D) (None, 32, 32, 32) 4640
_________________________________________________________________
max_pooling2d_2 (MaxPooling2 (None, 16, 16, 32) 0
_________________________________________________________________
conv2d_3 (Conv2D) (None, 16, 16, 32) 9248
_________________________________________________________________
max_pooling2d_3 (MaxPooling2 (None, 8, 8, 32) 0
_________________________________________________________________
conv2d_4 (Conv2D) (None, 8, 8, 64) 18496
_________________________________________________________________
max_pooling2d_4 (MaxPooling2 (None, 4, 4, 64) 0
_________________________________________________________________
flatten_1 (Flatten) (None, 1024) 0
_________________________________________________________________
dense_1 (Dense) (None, 256) 262400
_________________________________________________________________
dense_2 (Dense) (None, 131) 33667
=================================================================
Total params: 328,899
Trainable params: 328,899
Non-trainable params: 0
_________________________________________________________________
- 第二步:使用 TensorSpace 可视化模型
- 载入并可视化
通过 TensorSpace API
构建 TensorSpace
可视化模型。
let modelContainer = document.getElementById("container");
let model = new TSP.models.Sequential( modelContainer );
model.add( new TSP.layers.RGBInput({ shape: [64, 64, 3] }) );
model.add( new TSP.layers.Conv2d({ kernelSize: 3, filters: 16, strides: 1 }));
model.add( new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }) );
model.add( new TSP.layers.Conv2d({ kernelSize: 3, filters: 32, strides: 1 }) );
model.add( new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }) );
model.add( new TSP.layers.Conv2d({ kernelSize: 3, filters: 32, strides: 1 }) );
model.add( new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }) );
model.add( new TSP.layers.Conv2d({ kernelSize: 3, filters: 64, strides: 1 }) );
model.add( new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }) );
model.add( new TSP.layers.Dense({ units: 256 }) );
model.add( new TSP.layers.Dense({ units: 131 }) );
model.add( new TSP.layers.Output1d({
units : 131 ,
outputs: ['Apple Braeburn', 'Apple Crimson Snow', 'Apple Golden 1', 'Apple Golden 2', 'Apple Golden 3',
'Apple Granny Smith', 'Apple Pink Lady', 'Apple Red 1', 'Apple Red 2', 'Apple Red 3',
'Apple Red Delicious', 'Apple Red Yellow 1', 'Apple Red Yellow 2', 'Apricot', 'Avocado',
'Avocado ripe', 'Banana', 'Banana Lady Finger', 'Banana Red', 'Beetroot',
'Blueberry', 'Cactus fruit', 'Cantaloupe 1', 'Cantaloupe 2', 'Carambula',
'Cauliflower', 'Cherry 1', 'Cherry 2', 'Cherry Rainier', 'Cherry Wax Black',
'Cherry Wax Red', 'Cherry Wax Yellow', 'Chestnut', 'Clementine', 'Cocos',
'Corn', 'Corn Husk', 'Cucumber Ripe', 'Cucumber Ripe 2', 'Dates',
'Eggplant', 'Fig', 'Ginger Root', 'Granadilla', 'Grape Blue',
'Grape Pink', 'Grape White', 'Grape White 2', 'Grape White 3', 'Grape White 4',
'Grapefruit Pink', 'Grapefruit White', 'Guava', 'Hazelnut', 'Huckleberry',
'Kaki', 'Kiwi', 'Kohlrabi', 'Kumquats', 'Lemon',
'Lemon Meyer', 'Limes', 'Lychee', 'Mandarine',
'Mango', 'Mango Red', 'Mangostan', 'Maracuja', 'Melon Piel de Sapo',
'Mulberry', 'Nectarine', 'Nectarine Flat', 'Nut Forest', 'Nut Pecan',
'Onion Red', 'Onion Red Peeled', 'Onion White', 'Orange', 'Papaya',
'Passion Fruit', 'Peach', 'Peach 2', 'Peach Flat', 'Pear',
'Pear 2', 'Pear Abate', 'Pear Forelle', 'Pear Kaiser', 'Pear Monster',
'Pear Red', 'Pear Stone', 'Pear Williams', 'Pepino', 'Pepper Green',
'Pepper Orange', 'Pepper Red', 'Pepper Yellow', 'Physalis', 'Physalis with Husk',
'Pineapple', 'Pineapple Mini', 'Pitahaya Red', 'Plum', 'Plum 2',
'Plum 3', 'Pomegranate', 'Pomelo Sweetie', 'Potato Red', 'Potato Red Washed',
'Potato Sweet', 'Potato White', 'Quince', 'Rambutan', 'Raspberry',
'Redcurrant', 'Salak', 'Strawberry', 'Strawberry Wedge', 'Tamarillo',
'Tangelo', 'Tomato 1', 'Tomato 2', 'Tomato 3', 'Tomato 4',
'Tomato Cherry Red', 'Tomato Heart', 'Tomato Maroon', 'Tomato not Ripened', 'Tomato Yellow',
'Walnut', 'Watermelon']
}) );
- 载入经过
TensorSpace-Converter
预处理的模型,然后将模型进行初始化:
model.load({
type: "tfjs",
url: "convertedModel/model.json",
onComplete: function() {
console.log( "\"Hello World!\" from TensorSpace Loader." );
}
});
model.init( function() {
$.ajax({
url: "json/banana_107_100.json",
type: 'GET',
async: true,
dataType: 'json',
success: function (d) {
model.predict( d);
console.log( d);
}
});
} );
- 可视化结果展示
展示结果(以banana
图像为例)可进行拖拽、展开、旋转,可以详细地了解到神经网络的每一层。
最后一张图(图9)展示的即为我们的TensorSpace
可视化最终的预测结果,我们的输入为banana
的一张图片(已转化为banana_107_100.json
),可以看到最终的Output
层将其输出为banana
这一分类。
5. 结语
通过基于 TensorSpace
所开发的3D可视化神经网络模型实例,我们可以体验不同的可交互模型,包括但不限于:物体分类、物体探测、图片生成等。通过展示这些模型实例,我们能更好、更直观地体现 TensorSpace
的应用场景、操作方法以及展示效果。