![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/logo.png\"){kind=logo}
\n\n\n
Present Tensor in Space
\n\n\nEnglish | 中文\n
\n\n\n ![\"npm](\"https://img.shields.io/npm/v/tensorspace.svg\")
\n ![\"license](\"https://img.shields.io/badge/license-Apache--2.0-green.svg\"){kind=icon}
\n ![\"dependencies](\"https://img.shields.io/badge/dependencies-tfjs-brightgreen.svg\"){kind=icon}
\n ![\"dependencies](\"https://img.shields.io/badge/dependencies-three.js-brightgreen.svg\"){kind=icon}
\n ![\"dependencies](\"https://img.shields.io/badge/dependencies-tween.js-brightgreen.svg\"){kind=icon}
\n ![\"build\"](\"https://travis-ci.org/tensorspace-team/tensorspace.svg?branch=master\")
\n ![\"gitter\"](\"https://img.shields.io/badge/gitter-join%20chat%20%E2%86%92-brightgreen.svg\"){kind=icon}
\n
\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/tensorspace_lenet.gif\")
\n
\nFig. 1 - Interactive LeNet created by TensorSpace\n
\n\n## Table of Content\n\n* [Motivation](#motivation)\n* [Getting Started](#getting-start)\n* [Awesome TensorSpace](https://github.com/tensorspace-team/tensorspace/blob/master/awesome-tensorspace.md)\n* [Example](#example)\n* [Documentation](#documentation)\n* [Changelog](https://github.com/tensorspace-team/tensorspace/blob/master/CHANGELOG.md)\n* [Contributors](#contributors)\n* [Contact](#contact)\n* [License](#license)\n\n## Motivation\n\nTensorSpace is a neural network 3D visualization framework designed for not only showing the basic model structure, but also presenting the processes of internal feature abstractions, intermediate data manipulations and final inference generations.\n\nBy applying TensorSpace API, it is more intuitive to visualize and understand any pre-trained models built by TensorFlow, Keras, TensorFlow.js, etc. TensorSpace introduces a way for front end developers to be involved in the deep learning ecosystem. As an open source library, TensorSpace team welcomes any further development on visualization applications.\n\n* **Interactive** -- Use Layer API to build interactive model in browsers.\n* **Intuitive** -- Visualize the information from intermediate inferences.\n* **Integrative** -- Support pre-trained models from TensorFlow, Keras, TensorFlow.js.\n\n\n## Getting Started\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/workflow.png\")
\n
\nFig. 2 - TensorSpace Workflow\n
\n\n### 1. Install TensorSpace\n\n#### Install in the Basic Case\n\n- Step 1: Download Dependencies\n\nDownload dependencies build files TensorFlow.js ([tf.min.js](https://cdnjs.com/libraries/tensorflow)), Three.js ([three.min.js](https://cdnjs.com/libraries/three.js)), Tween.js ([tween.min.js](https://cdnjs.com/libraries/tween.js)), TrackballControls ([TrackballControls.js](https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js)).\n\n- Step 2: Download TensorSpace\n\nDownload TensorSpace build file `tensorspace.min.js` from [Github](https://github.com/tensorspace-team/tensorspace/tree/master/dist), [NPM](https://www.npmjs.com/package/tensorspace), [TensorSpace official website](https://tensorspace.org/#download) or CDN:\n\n```html\n\n\n```\n\n- Step 3: Include Build Files\n\nInclude all build files in web page.\n\n```html\n\n\n\n\n\n```\n\n#### Install in the Progressive Framework\n\n- Step 1: Install TensorSpace\n \n - Option 1: NPM\n \n ```bash\n npm install tensorspace\n ```\n\n - Option 2: Yarn\n \n ```bash\n yarn add tensorspace\n ```\n\n- Step 2: Use TensorSpace\n\n```javascript\nimport * as TSP from 'tensorspace';\n```\n\nCheckout this [Angular example](https://github.com/tensorspace-team/tensorspace/tree/master/examples/helloworld-angular) for more information.\n\n### 2. Preprocess the Pre-trained Model\n\nBefore applying TensorSpace to visualize the pre-trained model, there is an important pipeline - TensorSpace model preprocessing ( Checkout [this article](https://tensorspace.org/html/docs/preIntro.html) for more information about TensorSpace preprocessing ). We can use [TensorSpace Converter](https://github.com/tensorspace-team/tensorspace-converter) to quickly complete the TensorSpace Preprocessing.\n\nFor example, if we have a [tf.keras model](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/rawModel) in hand, we can use the following TensorSpace-Converter conversion script to convert a tf.keras model to the TensorSpace compatible format:\n```shell\n$ tensorspacejs_converter \\\n --input_model_from=\"tensorflow\" \\\n --input_model_format=\"tf_keras\" \\\n --output_layer_names=\"padding_1,conv_1,maxpool_1,conv_2,maxpool_2,dense_1,dense_2,softmax\" \\\n ./PATH/TO/MODEL/tf_keras_model.h5 \\\n ./PATH/TO/SAVE/DIR\n```\n\n**Note:**\n\n* Make sure to install `tensorspacejs` pip package, and setup a TensorSpace-Converter runtime environment before using TensorSpace-Converter to preprocess the pre-trained model.\n* Based on different training libraries, we provide different preprocessing tutorials: [TensorFlow Tutorial](https://tensorspace.org/html/docs/preTf.html), [Keras Tutorial](https://tensorspace.org/html/docs/preKeras.html), [TensorFlow.js Tutorial](https://tensorspace.org/html/docs/preTfjs.html).\n* Checkout [TensorSpace-Converter Repo](https://github.com/tensorspace-team/tensorspace-converter) for more information about TensorSpace-Converter.\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/hello_converter.gif\")
\n
\nFig. 3 - TensorSpace-Converter Usage\n
\n\n### 3. Using TensorSpace to Visualize the Model\n\nIf TensorSpace is installed successfully and the pre-trained deep learning model is preprocessed, let's create an interactive 3D TensorSpace model.\n\nFor convenience, we will use the the resources from this repository's [HelloWorld](https://github.com/tensorspace-team/tensorspace/tree/master/examples/helloworld) directory, which includes [preprocessed TensorSpace compatible LeNet model](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/convertedModel) and [sample input data (\"5\")](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/data/5.json) as an example to illustrate this step. All source code can be found in [helloworld.html](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/helloworld.html).\n\nFirst, we need to new a TensorSpace model instance:\n```JavaScript\nlet container = document.getElementById( \"container\" );\nlet model = new TSP.models.Sequential( container );\n```\n\nNext, based on the LeNet structure: Input + Padding2D + 2 X (Conv2D & Maxpooling) + 3 X (Dense), build the Topology of the TensorSpace model:\n```JavaScript\nmodel.add( new TSP.layers.GreyscaleInput() );\nmodel.add( new TSP.layers.Padding2d() );\nmodel.add( new TSP.layers.Conv2d() );\nmodel.add( new TSP.layers.Pooling2d() );\nmodel.add( new TSP.layers.Conv2d() );\nmodel.add( new TSP.layers.Pooling2d() );\nmodel.add( new TSP.layers.Dense() );\nmodel.add( new TSP.layers.Dense() );\nmodel.add( new TSP.layers.Output1d({\n outputs: [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]\n}) );\n```\n\nLast, we should load our [preprocessed TensorSpace compatible model](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/convertedModel) and use `init()` method to create the TensorSpace model:\n```JavaScript\nmodel.load({\n type: \"tensorflow\",\n url: './PATH/TO/MODEL/model.json'\n});\nmodel.init(function(){\n console.log(\"Hello World from TensorSpace!\");\n});\n```\n\nWe can get the following Fig. 3 model in the browser if everything looks good.\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/HelloWorld_empty_lenet.jpg\"){kind=spacer}
\n
\nFig. 4 - LeNet model without any input data\n
\n\n\nWe provide a [extracted file](https://github.com/tensorspace-team/tensorspace/blob/master/examples/helloworld/data/5.json) which is a handwritten \"5\" as the input of our model: ([online demo](https://tensorspace.org/html/helloworld.html))\n\n```\nmodel.init(function() {\n model.predict( image_5 );\n});\n\n```\n\nWe put the `predict( image_5 )` method in the callback function of `init()` to ensure the prediction is after the initialization complete.\n\nClick the CodePen logo to try it in CodePen:![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/codepen.png\")
\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/HelloWorld_5.jpg\")
\n
\nFig. 5 - LeNet model with input data \"5\"\n
\n\n## Example\n\n* **LeNet** [ TensorFlow.js model ]\n\n[➡ Live Demo](https://tensorspace.org/html/playground/lenet.html)\n\n\n\n
\nFig. 6 - Interactive LeNet created by TensorSpace\n
\n\n* **AlexNet** [ TensorFlow model ]\n\n[➡ Live Demo](https://tensorspace.org/html/playground/alexnet.html)\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/tensorspace_alexnet.gif\")
\n
\nFig. 7 - Interactive AlexNet created by TensorSpace\n
\n\n* **Yolov2-tiny** [ TensorFlow model ]\n\n[➡ Live Demo](https://tensorspace.org/html/playground/yolov2-tiny.html)\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/tensorspace_yolov2.gif\")
\n
\nFig. 8 - Interactive Yolov2-tiny created by TensorSpace\n
\n\n* **ResNet-50** [ Keras model ]\n\n[➡ Live Demo](https://tensorspace.org/html/playground/resnet50.html)\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/tensorspace_resnet50.gif\")
\n
\nFig. 9 - Interactive ResNet-50 created by TensorSpace\n
\n\n* **Vgg16** [ Keras model ]\n\n[➡ Live Demo](https://tensorspace.org/html/playground/vgg16.html)\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/tensorspace_vgg.gif\")
\n
\nFig. 10 - Interactive Vgg16 created by TensorSpace\n
\n\n* **ACGAN** [ Keras model ]\n\n[➡ Live Demo](https://tensorspace.org/html/playground/acgan.html)\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/tensorspace_acgan.gif\")
\n
\nFig. 11 - Interactive ACGAN created by TensorSpace\n
\n\n* **MobileNetv1** [ Keras model ]\n\n[➡ Live Demo](https://tensorspace.org/html/playground/mobilenetv1.html)\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/tensorspace_mobilenetv1.gif\")
\n
\nFig. 12 - Interactive MobileNetv1 created by TensorSpace\n
\n\n* **Inceptionv3** [ Keras model ]\n\n[➡ Live Demo](https://tensorspace.org/html/playground/inceptionv3.html)\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/tensorspace_inceptionv3.gif\")
\n
\nFig. 13 - Interactive Inceptionv3 created by TensorSpace\n
\n\n* **LeNet Training Visualization** [ TensorFlow.js dynamic model ]\n\nVisualize the LeNet Training Process with TensorSpace.js and TensorFlow.js.\n\n[➡ Live Demo](https://tensorspace.org/html/playground/trainingLeNet.html)\n\n\n![](\"https://raw.githack.com/tensorspace-team/tensorspace/master/assets/tensorspace_lenet_training.gif\")
\n
\nFig. 14 - LeNet Training 3D Visualization\n
\n\n### View models locally\n\nAs some models above are extremely large, view them locally may be a good choice.\n\n- Step 1: `clone` TensorSpace Repo\n\n```bash\ngit clone https://github.com/tensorspace-team/tensorspace.git\n```\n\n- Step 2: \n\nOpen \"html\" file in examples folder in local web server.\n\n## Documentation\n\n* For a quick start, checkout [Getting Start](https://tensorspace.org/html/docs/startHello.html)\n* To learn more about the [Basic Concepts](https://tensorspace.org/html/docs/basicIntro.html)\n* To process a deep learning model, checkout [Model Preprocessing](https://tensorspace.org/html/docs/preIntro.html), [TensorSpace-Converter](https://github.com/tensorspace-team/tensorspace-converter)\n* To learn core components: [Models](https://tensorspace.org/html/docs/modelIntro.html), [Layers](https://tensorspace.org/html/docs/layerIntro.html) and [Merge Function](https://tensorspace.org/html/docs/mergeIntro.html)\n* Checkout the official website [TensorSpace.org](https://tensorspace.org) for more about TensorSpace.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\n\n| [![](\"https://avatars2.githubusercontent.com/u/7977100?v=4\")
![](\"https://avatars3.githubusercontent.com/u/4524339?v=4\")
![](\"https://avatars0.githubusercontent.com/u/21956621?v=4\")
![](\"https://avatars2.githubusercontent.com/u/19629037?v=4\")
![](\"https://avatars2.githubusercontent.com/u/97291?s=400&v=4\")
![](\"https://avatars3.githubusercontent.com/u/25629006?s=400&v=4\")
![](\"https://avatars0.githubusercontent.com/u/9149028?s=400&v=4\")
![](\"https://avatars3.githubusercontent.com/u/333921?s=400&v=4\")