LAB MANUAL
DEEP LEARNING
B.Tech CSE 7th Semester
Practical 1: Create a Neural Network
<!DOCTYPE html>
<html>
<script src="//unpkg.com/brain.js"></script>
<body>
<h1>Deep Learning with brain.js</h1>
<div id="demo"></div>
<script>
// Create a Neural Network
const network = new brain.NeuralNetwork();
// Train the Network with 4 input objects
network.train([
{input:[0,0], output:{zero:1}},
{input:[0,1], output:{one:1}},
{input:[1,0], output:{one:1}},
{input:[1,1], output:{zero:1}},
]);
// What is the expected output of [1,0]?
let result = network.run([1,0]);
// Display the probability for "zero" and "one"
document.getElementById("demo").innerHTML =
"one: " + result["one"] + "<br>" + "zero: " + result["zero"];
</script>
</body>
</html>
OUTPUT:
A Neural Network is created with: new brain.NeuralNetwork()
The network is trained with network.train([examples])
The examples represent 4 input values with a corresponding output value.
With network.run([1,0]), you ask "What is the likely output of [1,0]?"
The answer from the network is:
one: 93% (close to 1)
zero: 6% (close to 0)
Practical 2: How to predict a contrast
<!DOCTYPE html>
<html>
<style>
div {padding:10px;font-size:20px;border:1px solid black}
</style>
<body>
<h2>Colors can be set by RGB</h2>
<div style="background-color:RGB(0,0,0)">
<p style="color:white">RGB(0,0,0)</p>
</div>
<div style="background-color:RGB(255,255,0)">
<p style="color:black">RGB(255,255,0)</p>
</div>
<div style="background-color:RGB(255,0,0)">
<p style="color:white">RGB(255,0,0)</p>
</div>
<div style="background-color:RGB(255,255,255)">
<p style="color:black">RGB(255,255,255)</p>
</div>
<div style="background-color:RGB(192,192,192)">
<p style="color:black">RGB(192,192,192)</p>
</div>
<div style="background-color:RGB(65,65,65)">
<p style="color:white">RGB(65,65,65)</p>
</div>
</body>
</html>
OUTPUT:
<!DOCTYPE html>
<html>
<script src="//unpkg.com/brain.js"></script>
<body>
<h1>Deep Learning with brain.js</h1>
<div id="demo"></div>
<script>
// Create a Neural Network
const net = new brain.NeuralNetwork();
// Train the Network with 4 input objects
net.train([
// White RGB(255, 255, 255)
{input:[255/255, 255/255, 255/255], output:{light:1}},
// Lightgrey (192,192,192)
{input:[192/255, 192/255, 192/255], output:{light:1}},
// Darkgrey (64, 64, 64)
{ input:[65/255, 65/255, 65/255], output:{dark:1}},
// Black (0, 0, 0)
{ input:[0, 0, 0], output:{dark:1}},
]);
// What is the expected output of Dark Blue (0, 0, 128)?
let result = net.run([0, 0, 128/255]);
// Display the probability of "dark" and "light"
document.getElementById("demo").innerHTML =
"Dark: " + result["dark"] + "<br>" + "Light: " + result["light"];
</script>
</body>
</html>
OUTPUT:
A Neural Network is created with: new brain.NeuralNetwork()
The network is trained with network.train([examples])
The examples represent 4 input values a corresponding output value.
With network.run([0,0,128/255]), you ask "What is the likely output of dark blue?"
The answer from the network is:
Dark: 95%
Light: 4%
Practical 3. Introduction to TENSOR
Tensors
TensorFlow.js is a JavaScript library to define and operate on Tensors.
The main data type in TensorFlow.js is the Tensor.
A Tensor is much the same as a multidimensional array.
A Tensor contains values in one or more dimensions:
A Tensor has the following main properties:
Property Description
dtype The data type
rank The number of dimensions
shape The size of each dimension
Sometimes in machine learning, the term "dimension" is used
interchangeably with "rank.
[10, 5] is a 2-dimensional tensor or a 2-rank tensor.
In addition the term "dimensionality" can refer to the size of a one
dimension.
Practical 4: Creating a tensor
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<body>
<h1>TensorFlow JavaScript</h1>
<h3>Creating a tensor:</h3>
<div id="demo"></div>
<script>
const myArr = [[1, 2, 3, 4]];
const tensorA = tf.tensor(myArr);
document.getElementById("demo").innerHTML = tensorA;
</script>
</body>
</html>
OUTPUT:
Tensor Shape
A Tensor can also be created from an array and a shape parameter:
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<body>
<h1>TensorFlow JavaScript</h1>
<h3>Creating a tensor with a shape:</h3>
<div id="demo"></div>
<script>
const myArr = [1, 2, 3, 4];
const shape = [2, 2];
const tensorA = tf.tensor(myArr, shape);
document.getElementById("demo").innerHTML = tensorA;
</script>
</body>
</html>
OUTPUT:
Practical 5:Retrieve Tensor Values
You can get the data behind a tensor using tensor.data():
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<body>
<h1>TensorFlow JavaScript</h1>
<h3>Get the data behind a tensor:</h3>
<div id="demo"></div>
<script>
const myArr = [[1, 2], [3, 4]];
const tensorA = tf.tensor(myArr);
tensorA.data().then(data => display(data));
// Result: 1,2,3,4
function display(data) {
document.getElementById("demo").innerHTML = data;
</script>
</body>
</html>
OUTPUT:
Practical 6: Tensor Data Types
A Tensor can have the following data types:
bool
int32
float32 (default)
complex64
string
When you create a tensor, you can specify the data type as the third parameter:
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<body>
<h1>TensorFlow JavaScript</h1>
<h3>Create a tensor with a datatype:</h3>
<div id="demo"></div>
<script>
const myArr = [1, 2, 3, 4];
const shape = [2, 2];
const tensorA = tf.tensor(myArr, shape, "int32");
document.getElementById("demo").innerHTML = tensorA.dtype;
</script>
</body>
</html>
OUTPUT:
Practical 7:TensorFlow Operations
Addition
You can add two tensors using tensorA.add(tensorB):
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<body>
<h2>JavaScript</h2>
<p>Adding tensors with tensorflow.js</p>
<div id="demo"></div>
<script>
const tensorA = tf.tensor([[1, 2], [3, 4], [5, 6]]);
const tensorB = tf.tensor([[1,-1], [2,-2], [3,-3]]);
// Tensor Addition
const tensorNew = tensorA.add(tensorB);
// Result: [ [2, 1], [5, 2], [8, 3] ]
document.getElementById("demo").innerHTML = tensorNew;
</script>
</body>
</html>
OUTPUT:
Tensor Subtraction
You can subtract two tensors using tensorA.sub(tensorB):
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<body>
<h2>JavaScript</h2>
<p>Subtracting tensors with tensorflow.js</p>
<div id="demo"></div>
<script>
const tensorA = tf.tensor([[1, 2], [3, 4], [5, 6]]);
const tensorB = tf.tensor([[1,-1], [2,-2], [3,-3]]);
// Tensor Subtraction
const tensorNew = tensorA.sub(tensorB);
// Result: [ [0, 3], [1, 6], [2, 9] ]
document.getElementById("demo").innerHTML = tensorNew;
</script>
</body>
</html>
OUTPUT:
Tensor Division
You can divide two tensors using tensorA.div(tensorB):
const tensorA = tf.tensor([2, 4, 6, 8]);
const tensorB = tf.tensor([1, 2, 2, 2]);
// Tensor Division
const tensorNew = tensorA.div(tensorB);
// Result: [ 2, 2, 3, 4 ]
OUTPUT:
Practical 8:Tensorflow Models
Models and Layers are important building blocks in Machine Learning.
For different Machine Learning tasks you must combine different types of Layers into a
Model that can be trained with data to predict future values.
TensorFlow.js is supporting different types of Models and different types of Layers.
A TensorFlow Model is a Neural Network with one or more Layers.
A Tensorflow Project
A Tensorflow project has this typical workflow:
Collecting Data
Creating a Model
Adding Layers to the Model
Compiling the Model
Training the Model
Using the Model
<html>
<script
src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.8.4/dist/tf.min.js
"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<h2>TensorFlow.js</h2>
<p id="message">Model is training!</p>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
// Create Training Data
const xs = tf.tensor([0, 1, 2, 3, 4]);
const ys = xs.mul(1.2).add(5);
// Define a Linear Regression Model
const model = tf.sequential();
model.add(tf.layers.dense({units:1, inputShape:[1]}));
// Specify Loss and Optimizer
model.compile({loss: 'meanSquaredError', optimizer:'sgd'});
// Train the Model
model.fit(xs, ys, {epochs:500}).then(() => {myFunction()});
// Use the Model
function myFunction() {
const xMax = 10;
const xArr = [];
const yArr = [];
for (let x = 0; x <= xMax; x++) {
let result = model.predict(tf.tensor([Number(x)]));
result.data().then(y => {
xArr.push(x);
yArr.push(Number(y));
if (x == xMax) {plot(xArr, yArr)};
});
document.getElementById('message').style.display="none";
function plot(xArr, yArr) {
// Define Data
const data = [{x:xArr,y:yArr,mode:"markers",type:"scatter"}];
// Define Layout
const layout = {
xaxis: {range: [0, 10]},
yaxis: {range: [0, 20]},
};
// Display Plot
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
OUTPUT:
Practical 9 :Predicts 10 y values, given 10 x values, and calls a
function to plot the predictions in a graph
Scatter Plots
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.5.1/dist/tfjs-
vis.umd.min.js"></script>
<body>
<h2>TensorFlow Visor</h2>
<div id="demo"></div>
<script>
const surface = document.getElementById('demo');
const series = ['First', 'Second'];
const serie1 = [];
const serie2 = [];
for (let i = 0; i < 100; i++) {
serie1[i] = {x:i, y:Math.random() * 100};
serie2[i] = {x:i, y:Math.random() * 100};
const data = {values: [serie1, serie2], series}
tfvis.render.scatterplot(surface, data);
</script>
</body>
</html>
OUTPUT:
Bar Graphs
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.5.1/dist/tfjs-
vis.umd.min.js"></script>
<body>
<h2>Tensorflow Visor</h2>
<div id="demo"></div>
<script>
const surface = document.getElementById('demo');
const data = [
{index: 0, value: 100},
{index: 1, value: 200},
{index: 2, value: 150},
{index: 3, value: 250},
];
tfvis.render.barchart(surface, data);
</script>
</body>
</html>
OUTPUT:
Line Graphs
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.5.1/dist/tfjs-
vis.umd.min.js"></script>
<body>
<h2>Tensorflow Visor</h2>
<div id="demo"></div>
<script>
const surface = document.getElementById('demo');
let values = [
{x: 1, y: 20},
{x: 2, y: 30},
{x: 3, y: 15},
{x: 4, y: 12}
];
tfvis.render.linechart(surface, {values});
</script>
</body>
</html>
OUTPUT:
