TensorSpace.js
Getting Start
Basic Concepts
Model Preprocessing
Models
Layers
Merge Function
TensorSpace.js Hello World
After installing TensorSpace in appropriate environment successfully, let's create our first interactive 3D TensorSpace model!
For the convenience, feel free to use the resources from our HelloWorld directory.
We will use the preprocessed TensorSpace compatible LeNet model and sample input data ("5") . All source code can be found from helloworld.html .
First, we need to new a TensorSpace model instance:
let container = document.getElementById( "container" );
let model = new TSP.models.Sequential( container );
Next, based on the LeNet structure: Input + 2 * (Conv2D & Maxpooling) + 3 * (Dense), we build the structure of the model:
model.add( new TSP.layers.GreyscaleInput({ shape: [28, 28, 1] }) );
model.add( new TSP.layers.Padding2d({ padding: [2, 2] }) );
model.add( new TSP.layers.Conv2d({ kernelSize: 5, filters: 6, strides: 1 }) );
model.add( new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }) );
model.add( new TSP.layers.Conv2d({ kernelSize: 5, filters: 16, strides: 1 }) );
model.add( new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }) );
model.add( new TSP.layers.Dense({ units: 120 }) );
model.add( new TSP.layers.Dense({ units: 84 }) );
model.add( new TSP.layers.Output1d({
    units: 10,
    outputs: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
}) );
Last, we can load our preprocessed TensorSpace compatible model and use init() method to create the model:
model.load({
    type: "tfjs",
    url: './lenetModel/mnist.json',
    onComplete: function() {
        console.log( "\"Hello World!\" from TensorSpace Loader." );
    }
});
model.init();
We can get the following model in the browser:
Fig. 1 - LeNet model without any input data
We provide a extracted file which is a handwritten "5" as the input of our model:
model.init(function() {
    model.predict( image_5 );
});
We put the predict( image_5 ) method in the callback function of init() to ensure the prediction is after the initialization complete.
If everything goes well, the model will display in your browser like this online demo.
Fig. 2 - LeNet model with input data "5"
Say Hello World to TensorSpace in CodePen!

See the Pen 667a7943b0f23727790ca38c93389689 by syt123450 (@syt123450) on CodePen.