TensorFlow.js for browser

Introduction

TensorFlow.js lets you run machine learning directly in your web browser. This means you can use AI without installing anything extra.

You want to add AI features to a website without needing a server.

You want users to try AI models instantly on their devices.

You want to build interactive AI demos that run fast in the browser.

You want to protect user data by running AI locally on their computer.

You want to learn machine learning with easy, visual examples on the web.

Syntax

TensorFlow

import * as tf from '@tensorflow/tfjs';

async function loadModel() {
  // Load a pre-trained model
  const model = await tf.loadLayersModel('model_url/model.json');

  // Prepare input data as a tensor
  const input = tf.tensor([[5.1, 3.5, 1.4, 0.2]]);

  // Make prediction
  const prediction = model.predict(input);

  // Get prediction values
  prediction.print();
}

loadModel();

Use tf.loadLayersModel() to load models saved in TensorFlow.js format.

Input data must be converted to tensors before prediction.

Examples

Create a simple 1D tensor and print its values.

TensorFlow

const tensor = tf.tensor([1, 2, 3, 4]);
tensor.print();

Load a model from a URL and predict output for a 2D input tensor.

TensorFlow

async function predict() {
  const model = await tf.loadLayersModel('https://example.com/model.json');
  const input = tf.tensor2d([[0.5, 0.1]]);
  const output = model.predict(input);
  output.print();
}

predict();

Create and train a simple model in the browser, then predict a new value.

TensorFlow

async function trainAndPredict() {
  const model = tf.sequential();
  model.add(tf.layers.dense({units: 1, inputShape: [2]}));
  model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});

  const xs = tf.tensor2d([[1, 2], [3, 4]], [2, 2]);
  const ys = tf.tensor2d([[1], [3]], [2, 1]);

  await model.fit(xs, ys, {epochs: 5});

  const prediction = model.predict(tf.tensor2d([[5, 6]], [1, 2]));
  prediction.print();
}

trainAndPredict();

Sample Model

This code builds a simple model that learns the rule y = 2x - 1. It trains on four points, then predicts y for x=5.

TensorFlow

import * as tf from '@tensorflow/tfjs';

async function run() {
  // Create a simple model
  const model = tf.sequential();
  model.add(tf.layers.dense({units: 1, inputShape: [1]}));
  model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});

  // Training data: y = 2x - 1
  const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
  const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

  // Train the model
  await model.fit(xs, ys, {epochs: 10});

  // Predict for a new value
  const output = model.predict(tf.tensor2d([5], [1, 1]));
  output.print();
}

run();

Important Notes

TensorFlow.js runs all computations on the user's device, so performance depends on their hardware.

Always convert your input data into tensors before using the model.

You can save and load models in the browser using local storage or URLs.

Summary

TensorFlow.js lets you run and train machine learning models directly in the browser.

You prepare data as tensors and use models to make predictions or learn from data.

This approach makes AI accessible without extra software or servers.

Practice

1. What is the main advantage of using TensorFlow.js in a web browser?

easy

A. Needs a separate app to visualize data

B. Requires installing special software on the user's computer

C. Run and train machine learning models directly in the browser without extra software

D. Only works on server-side environments

Solution

1. Step 1: Understand TensorFlow.js purpose

   TensorFlow.js is designed to run and train ML models directly in the browser environment.

2. Step 2: Compare options

   Options A, B, and C mention installing software, server-only use, or separate apps, which are not true for TensorFlow.js.

3. Final Answer:

   Run and train machine learning models directly in the browser without extra software -> Option C

4. Quick Check:

   TensorFlow.js runs ML in browser = D [OK]

Hint: TensorFlow.js runs ML models inside browsers without installs [OK]

Common Mistakes:

• Thinking TensorFlow.js needs server or software install
• Confusing browser use with server-side ML
• Assuming extra apps are required

2. Which of the following is the correct way to create a 1D tensor with values [1, 2, 3] in TensorFlow.js?

easy

A. tf.tensor([1; 2; 3])

B. tf.tensor1d(1, 2, 3)

C. tf.tensor([1 2 3])

D. tf.tensor([1, 2, 3])

Solution

1. Step 1: Recall TensorFlow.js tensor creation syntax

   The correct method to create a 1D tensor with values is tf.tensor([1, 2, 3]).

2. Step 2: Check other options for syntax errors

   tf.tensor1d(1, 2, 3) uses wrong function and arguments, A and D have invalid array syntax.

3. Final Answer:

   tf.tensor([1, 2, 3]) -> Option D

4. Quick Check:

   Correct tensor syntax = C [OK]

Hint: Use tf.tensor with array brackets and commas [OK]

Common Mistakes:

• Using semicolons or spaces instead of commas in arrays
• Wrong function name or arguments
• Missing array brackets

3. What will be the output of this TensorFlow.js code snippet?

const t = tf.tensor([1, 2, 3, 4]);
const result = t.square().arraySync();
console.log(result);

medium

A. [1, 4, 9, 16]

B. [1, 2, 3, 4]

C. [2, 4, 6, 8]

D. Error: square() is not a function

Solution

1. Step 1: Understand the code operations

   The tensor t contains [1, 2, 3, 4]. The square() method squares each element.

2. Step 2: Calculate squared values and output

   Squaring each element: 1²=1, 2²=4, 3²=9, 4²=16. The arraySync() converts tensor to JS array.

3. Final Answer:

   [1, 4, 9, 16] -> Option A

4. Quick Check:

   Tensor square() output = A [OK]

Hint: square() applies element-wise power of 2 [OK]

Common Mistakes:

• Confusing square() with identity (no change)
• Expecting sum instead of element-wise operation
• Thinking square() is not a valid method

4. Identify the error in this TensorFlow.js code snippet:

const t = tf.tensor([1, 2, 3]);
const reshaped = t.reshape([2, 2]);
console.log(reshaped.arraySync());

medium

A. tf.tensor() cannot create 1D tensors

B. The reshape size [2, 2] does not match the number of elements in tensor

C. arraySync() is not a valid method

D. reshape() requires a 1D array argument

Solution

1. Step 1: Check tensor size and reshape target shape

   The tensor has 3 elements, but reshape tries to make shape [2, 2] which needs 4 elements.

2. Step 2: Understand reshape requirements

   Reshape must keep total elements same. Here 3 != 4, so it causes an error.

3. Final Answer:

   The reshape size [2, 2] does not match the number of elements in tensor -> Option B

4. Quick Check:

   Reshape size must match elements = A [OK]

Hint: Reshape shape must multiply to original tensor size [OK]

Common Mistakes:

• Ignoring total element count mismatch
• Thinking arraySync() is invalid
• Believing reshape needs 1D array argument

5. You want to build a simple linear regression model in TensorFlow.js that predicts y from x. Which sequence of steps is correct to train the model in the browser?

hard

A. Define model layers, compile with optimizer and loss, prepare tensors for x and y, then call model.fit() with data

B. Directly call model.predict() on raw arrays without compiling or training

C. Use tf.tensor() to create model weights manually and skip model.fit() entirely

D. Train the model only on the server and send predictions to browser

Solution

1. Step 1: Understand model training workflow in TensorFlow.js

   First, define the model architecture with layers, then compile it specifying optimizer and loss function.

2. Step 2: Prepare input and output data as tensors and call model.fit()

   Training requires data tensors for inputs (x) and outputs (y), then call model.fit() to train the model in the browser.

3. Final Answer:

   Define model layers, compile with optimizer and loss, prepare tensors for x and y, then call model.fit() with data -> Option A

4. Quick Check:

   Model training steps = B [OK]

Hint: Define, compile, prepare tensors, then fit model [OK]

Common Mistakes:

• Skipping compile before training
• Trying to predict without training
• Manually setting weights without training
• Assuming training must happen on server