Diving into Tensorflow.js

Diving into TensorFlow.js
Bill Stavroulakis
@bstavroulakis
https://www.fullstackweekly.com

Prerequisites
No knowledge of Machine Learning expected
Some experience with JavaScript would be helpful.
- Adding dependencies in packages.json
- Map, Reduce, Filter operators
- Working with modules

After this presentation we should be able to answer
these questions
Part 1 - What is AI, how does Tensorflow.js fit in it?
Part 2 - How do I do Linear Regression in JavaScript?
Part 3 - Intro to Tensorflow.js (Tensors, Operations,
Simple Model Creation)
Part 4 - Multivariate Linear Regression
Part 5 - Transfer Learning

Part 1 - What is Machine Learning,
how does Tensorflow.js fit in it?

Artificial
Intelligence
(A.I.)
Make computers “smart”. Visual
perception, speech recognition
and decision-making.
Computers mimic human
intelligence.

Artificial Intelligence
Machine Learning
Create a model through statistical
analysis
Y = W * X
Find the W so we can predict Y
X Y
1 2
2 4
3 6
4 8
5 10
Y = W * X
What is the best W?

Machine Learning
Create a model through statistical
analysis
Y = W * X
Find the W so we can predict Y
X Y
1 bedroom
3 years old
100 feet from subway
$700/month
2 bedroom
4 years old
50 feet from subway
$1000/month
4 bedroom
10 years old
500 feet from subway
$1000/month
Y = W * X
What is the best W?

[ 1,3,100 ]
[
[W1],
[W2],
[W3]
]
X = [$700]
Matrices
Is there a scientific way to figure out the matrix W1, W2, W3?
Methods that we can use to mathematically prove that one set of numbers if
better than others?

Machine Learning
Deep Learning
Y = W * X
Where W is a neural net with
multiple layers
W is a neural net with
multiple layers
X Y
1 2
2 4
3 6
4 8
5 10

Machine Learning
Deep
Learning
Y = W * X
Where W is a neural net
Where does Tensorflow.js fit
in here? What does it do?
1. A library offering functions and APIs for
matrix manipulation
[ 1,3,100 ] * [[W1],[W2],[W3]]
2. Tools for training models with/without
neural nets
(finding the “W” a.k.a. “training”)
3. Tools for assessing the models
(how good is the W)
4. Tools to run and extend existing models,
even ones that have been trained in
Python or other languages.
(reuse a W)
Y = W * X
Find the W so
we can
predict Y
Computers mimic human
intelligence.

Why Tensorflow.js? - Advantages over other
libraries1. Use the browser or node.js to train/evaluate/run/reuse models! JavaScript!
2. Fast - WebGL acceleration out of the box
a. TensorFlow.js automatically supports WebGL, and will accelerate your code behind the
scenes when a GPU is available
3. Model and data run on the client
a. Lower latency
b. Better privacy
4. TensorFlow.js APIs offer consistency and flexibility
a. The Core API or Low-level API for linear algebra.
b. High-level layers API for defining models and neural nets.
c. TensorFlow.js supports importing TensorFlow predefined and Keras models.
d. “The Layers API of TensorFlow.js is modeled after Keras and we strive to make the Layers API as similar to
Keras as reasonable given the differences between JavaScript and Python. This makes it easier for users with
experience developing Keras models in Python to migrate to TensorFlow.js Layers in JavaScript.”

Part 2 - Intro to Linear Regression -
One of the simplest models

Linear Regression
“ Let us say that you work for a mobile app gaming company.
You are going to release an awesome new game named
“Cranes”.
The company has asked for you to make an estimation on
how much profit will they make if a player spends X minutes
of playing the game. “

Fixed Price Prediction
Q: How much revenue when user plays for 5
minutes?
A: The price is fixed at $5 so
Y = 5

Prediction with Ads
Q: How much revenue when user plays for 5
minutes?
A: Hmm, the ad network looks like it is
generating revenue linearly. There should be
a trendline that I can find over here...
Y = W * X

How to find the weights of a line (in general)
Y = W1 * X + W2
X Y
0 2
1 4
2 6
3 8
W2
W1 = Y / X
With the following data:
For X = 0, Y = 2
2 = W1 * 0 + W2
2 = W2
For X = 1, Y = 4
4 = W1 * 1 + 2
2 = W1 * 1
W2 = 2
W1 = 2
Y = 2 * X + 2

Going Back to the “Cranes” Revenue Prediction
For 5 minutes of play, how much
revenue will be generated by the
ad network?

Trend Line
There are multiple lines we
can guess.
Which line can give us the
best prediction, so we can
predict the revenue for 5
mins?
?
?
?
0 0
1 0.015
2 0.038
3 0.058
4 0.12
5 ?

Trend Line
Line A is obviously worse than
Line B
How can we say that with math?
?
?
X Values Real Y
0 0
1 0.015
2 0.038
3 0.058
4 0.12
5 ?
Line A ( Y = 0.0225 * X + 0.04 )
Line B ( Y = 0.025 * X )

Line A is “worse” than Line B!
The Mean Squared Error of Line A is greater than the Mean Squared Error of Line B
0.0017231 > 0.0001866
?
?
The mean distance between the line and the real values is greater in Line A than Line B

The Best Line is out there
Line A and Line B were 2 random lines we chose.
How can we find the best line?
?
Line B
?

W1 MSE
0.000005 0.00388511015
0.00005 0.003871715
0.0005 0.0037391
0.001 0.0035946
0.015 0.0007666
0.02 0.0003266
0.025 0.0001866
0.05 0.0039866
Y = W1 * X + W2
Minimum Error Here!
0.025
Let us create a graph with every Mean Square Error for different W values
(We will only consider W1 not W2 for now)

So the BEST line Y = 0.025 * X
So for X = 5 then Y = 0.125
We estimate that the player that spends 5
minutes in the game generates $0.125

The famous Gradient Descent algorithm!
Pick random W1 and W2 Step 1
Find Mean Squared Error Slope for W1 and W2 Step 2
Multiply slopes with learning rate and nudge in the right direction Step 3
Step 4Go to Step 2 - Repeat Until Slope W1 and W2 are very small!

Multiply Slopes with Learning Rate & Nudge in the
right direction - Step 3
New_W1 = 0.0225 - 0.132 * 0.1 = 0.0093
New_W2 = 0.04 - 0.0776 * 0.1 = 0.0376
W1 = 0.0225
W2 = 0.04
Learning Rate = 0.1
1 2
3

Go to Step 2 - Repeat until slope W1 (MSE1) and
slope W2 (MSE2) are very small or 0!
Slope MSE1 Slope MSE2 New W1 New W2
-0.05744 0.00928 0.0093 0.03224
Y = 0.0225 * X + 0.04

-0.05744 0.00928 0.0093 0.03224
0.007776 0.0304 0.015044 0.031312
Y = 0.015044 * X + 0.031312

-0.05744 0.00928 0.0093 0.03224
0.007776 0.0304 0.015044 0.031312
-0.0137152 0.0212096 0.0142664 0.028272
Y = 0.0142664 * X + 0.028272

-0.05744 0.00928 0.0093 0.03224
0.007776 0.0304 0.015044 0.031312
-0.0137152 0.0212096 0.0142664 0.028272
-0.0057408 0.02245376 0.01563792 0.02615104
Y = 0.01563792 * X + 0.02615104

-0.05744 0.00928 0.0093 0.03224
0.007776 0.0304 0.015044 0.031312
-0.0137152 0.0212096 0.0142664 0.028272
-0.0057408 0.02245376 0.01563792 0.02615104
... ... ... ...
-
0.000000076758
17921
0.000000218820
7633 0.0282998714 -0.01039963339
Y = 0.0282998714 * X + -0.01039963339

Coding Time
1) List of a X,Y dataset
2) Train with gradient descent to find the W1 and W2
a) Learning Rate
b) Iterations
No Tensorflow.js quite yet, only JavaScript.
Time to implement Linear Regression and Gradient Descent

class LinearRegression {
constructor(params) {
this.iterations = 100; this.learningRate = 0.1;
this.xData = [0, 1, 2, 3, 4]; this.yData = [0, 0.015, 0.038,
0.058, 0.12]; this.weights = [0.0225, 0.04];
}
train() {
for (let i = 0; i < this.iterations; i++) {
const xLen = this.xData.length;
const errorValues = this.xData.map((curr, i) => {
return this.weights[0] * curr + this.weights[1] -
this.yData[i];
});
// Mean Squared Error Slopes
const slopeW1 = ... const slopeW2 = ...
// Optimizer
this.weights[0] = this.weights[0] - slopeW1 *
this.learningRate;
this.weights[1] = this.weights[1] - slopeW2 *
this.learningRate; }}}

Summary
Linear Regression
Mean Squared Error
Gradient Descent Algorithm
Learning Rate
Iterations

Part 3 - Intro to Tensorflow.js
https://www.tensorflow.org/js

Tensor
An matrix-like object that wraps a collection of numbers. It has the
following attributes: data, dimension, shape, type, valid transformations
Scalar
1
tf.scalar(1)
{"kept":false,"isDisposedIn
ternal":false,"shape":[],"d
type":"float32","size":1,"s
trides":[],"dataId":{},"id"
:5,"rankType":"0"}
Vector
[1,2]
tf.tensor([1,2])
{"kept":false,"isDisposedIn
ternal":false,"shape":[3],"
dtype":"float32","size":3,"
strides":[],"dataId":{},"id
":4,"rankType":"1"}
Tensor
[
[[1,2],[3,4]],
[[5,6],[7,8]]
]
Matrix
[
[1,2],
[3,4]
]
tf.tensor([[1,2],[3,4]])
Single Object Array 2D Array n-dimensional
array

Tensor - Dimensions (also Rank)
Parenthesis until first number
[
[1,2,3,4],
[5,6,7,8],
[1,3,4,5],
[8,7,5,4]
]
[
[ [1,3] ]
]
[
[
[[1,2,3,4]]
]
]
[1,3,4,2]
2 Dimensions 3 Dimensions 1 Dimension 4 Dimensions

Tensor - Shape
Length for every dimension
[
[1,2,3,4],
[5,6,7,8],
[1,3,4,5],
[8,7,5,4].length
].length
[
[
[1,3].length
].length
].length
[
[
[
[1,2,3,4].length
].length
].∂length
].length
[1,3,4,2].length
[4,4] [1,1,2] [4] [1,1,1,4]

const a = tf.tensor([[1,2],[3,4]]);
console.log('shape:',a.shape);
a.print();
Create a rank-2 tensor
(matrix) matrix tensor
from a multidimensional
array.

const shape = [2, 2];
const b = tf.tensor([1, 2, 3, 4],
shape);
console.log('shape:', b.shape);
b.print();
Or you can create a
tensor from a flat array
and specify a shape.

const a = tf.tensor([[1, 2], [3,
4]], [2, 2], 'int32');
console.log('shape:', a.shape);
console.log('dtype', a.dtype);
a.print();
By default, tf.Tensors will have
a float32 dtype.
tf.Tensors can also be created
with bool, int32, complex64,
and string dtypes:

const a = tf.tensor([[1, 2], [3,
4]]);
console.log('a shape:', a.shape);
// a shape: (2) [2, 2]
a.print();
// Tensor
[[1, 2],
[3, 4]]
const b = a.reshape([4, 1]);
console.log('b shape:', b.shape);
// b shape: (2) [4, 1]
b.print();
// Tensor
[[1],
[2],
[3],
[4]]
It's often useful to be able to
reshape a tf.Tensor to another
shape with the same size.
This can be achieved with the
reshape() method

You can also get the values from a tf.Tensor using the
Tensor.array() or Tensor.data() methods:

We also provide synchronous versions of these methods which are simpler to
use, but will cause performance issues in your application. You should always
prefer the asynchronous methods in production applications.

Operators
Example: computing x^2 of all
elements in a tf.Tensor

Operators
Example: adding elements of
two tf.Tensors element-wise

Importing Tensorflow.js
Browser
<script
src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist
/tf.min.js"></script>

Node.js
const tf = require("@tensorflow/tfjs");
// Optional Load the binding:
// Use '@tensorflow/tfjs-node-gpu' if running with GPU. If your system has a NVIDIA® GPU with CUDA support, use the GPU
package even for higher performance
require("@tensorflow/tfjs-node");
Instead of Loading @tensorflow/tfjs you can load @tensorflow/tfjs-core for no layer functionality
----------------------------------------------------------------------
// You have the Core API: tf.matMul(), tf.softmax(), …
// You also have Layers API: tf.model(), tf.layers.dense(), …
import * as tf from '@tensorflow/tfjs';
//You have the Core API: tfc.matMul(), tfc.softmax(), …
//No Layers API.
import * as tfc from '@tensorflow/tfjs-core';

TensorFlow.js support multiple different backends that implement tensor storage
and mathematical operations. At any given time, only one backend is active.
Most of the time, TensorFlow.js will automatically choose the best backend for
you given the current environment. However, sometimes it's important to know
which backend is being used and how to switch it.
console.log(tf.getBackend());

The WebGL backend, 'webgl', is currently the most powerful backend for the
browser. This backend is up to 100x faster than the vanilla CPU backend.
One caveat when using the WebGL backend is the need for explicit memory management.
WebGLTextures, which is where Tensor data is ultimately stored, are not automatically garbage
collected by the browser.

// Guess Errors
const errorValues = this.xData.map((curr, i) => {
return this.weights[0] * curr + this.weights[1] - this.yData[i];
});
const slopeW1 = (2 / xLen) * errorValues.map((guessError, i) => {
return this.xData[i] * guessError; }).reduce((acc, curr) => {
return acc + curr;
}, 0);
const slopeW2 = (2 / xLen) * errorValues.reduce((acc, guessError) => {
return acc + guessError;
}, 0);
// Optimizer
this.weights[0] = this.weights[0] - slopeW1 * this.learningRate;
this.weights[1] = this.weights[1] - slopeW2 * this.learningRate;
}
Vanilla JS Tensorflow JS
// Guess Errors
let errorValues = this.xData.matMul(this.weights).sub(this.yData);
let slopes = this.xData .transpose() .matMul(errorValues)
.div(this.xData.shape[0]);
// Optimizer
this.weights = this.weights.sub(slopes.mul(this.learningRate));
}

[
[0, 1],
[1, 1],
[2, 1],
[3, 1],
[4, 1],
]
[
[w1],
[w2]
]
=
[
[0],
[0.015],
[0.038],
[0.058],
[0,12],
]
X
[[ 0 * w1 + w2 = 0 ],
[ 1 * w1 + w2 = 0.015 ],
[ 2 * w1 + w2 = 0.038 ],
[ 3 * w1 + w2 = 0.058 ],
[ 4 * w1 + w2 = 0.12 ]]

Part 4 - Multivariate Linear Regression

Multi-feature dataset
X Y
1000 sqrt
2 county score
$200K
400 sqrt
5 county score
$300K
20000 sqrt
5 county score
1M
[
[ 1000, 2, 1 ],
[ 400, 5, 1 ],
[ 20000, 5, 1 ],
]
[
[W1],
[W2],
[W3]
]
X =
[
[200K],
[300K],
[1M]
]

The yValues, xValues are large and as a result the errorValues will be large as well.
console.log(
errorValues.dataSync(),
this.weights.dataSync());

Normalization vs Standardization
100 20000
0 1
-1 10
Normalization
Standardization

How can we improve our predictions?
1. Add/ Remove Features
2. Change Learning Rate
3. Change Iterations
4. Change Optimizer
5. Change Model

Image
Classification
Example
New Use Case
We won’t be training new
models and reinventing
the wheel!
How can we reuse already
trained models and extend
them to our use case?

Transfer Learning
“Sophisticated deep learning models have millions of
parameters (weights) and training them from scratch often
requires large amounts of data of computing resources.
Transfer learning is a technique that shortcuts much of this by
taking a piece of a model that has already been trained on a
related task and reusing it in a new model.”

Step 1 - Load Tensorflow.js & pre-trained model
<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow-models/mobilenet">
</script>
<script src="https://unpkg.com/@tensorflow-models/knn-
classifier">
</script>

Step 2 - Train with new classifier
const epocs = Array.apply(null, { length: 50
}).map(Number.call, Number);
epocs.forEach(async iteration => {
const activation = net.infer(webcamElement, "conv_preds");
classifier.addExample(activation, classId);
await tf.nextFrame();
});

Step 3 - Predict
// Get the activation from mobilenet from the webcam.
const activation = net.infer(webcamElement, "conv_preds");
// Get the most likely class and confidences from the
classifier module.
const result = await classifier.predictClass(activation);
return names[result.classIndex];

Summary
Linear Regression
Mean Squared Error
Gradient Descent
Learning Rate
Iterations
Tensor (Dimensions, Shape, Type)
Training with Tensorflow.js
Multivariate Linear Regression
Transfer Learning

Next Steps
https://www.tensorflow.org/js/
https://github.com/tensorflow/tfjs-examples
https://www.tensorflow.org/js/models
Neural Networks
Logistic Regression
Text/Image/Audio
Time-series Forecasting
….

Bill Stavroulakis
@bstavroulakis
https://www.fullstackweekly.com

Diving into Tensorflow.js

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Diving into Tensorflow.js

Ähnlich wie Diving into Tensorflow.js (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Diving into Tensorflow.js