TensorFlow.js for browser - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TensorFlow.js code snippet?

Consider the following code that creates a tensor and performs a simple operation. What will be logged to the console?

TensorFlow

const tf = require('@tensorflow/tfjs');
const a = tf.tensor([1, 2, 3, 4]);
const b = a.square();
b.print();

A [1, 2, 3, 4]

B [2, 4, 6, 8]

C [1, 4, 9, 16]

D Error: square is not a function

💡 Hint

Think about what the square() function does to each element of the tensor.

The square() function returns a new tensor where each element is the square of the original tensor's elements. So 1²=1, 2²=4, 3²=9, 4²=16.

❓ Model Choice

intermediate

Which TensorFlow.js model is best suited for image classification in the browser?

You want to classify images directly in the browser using TensorFlow.js. Which pre-trained model is most appropriate?

A MobileNet

B BERT

C LSTM

D GAN

💡 Hint

Think about models designed for images versus text or generative tasks.

MobileNet is a lightweight convolutional neural network designed for image classification and works well in browsers.

❓ Hyperparameter

advanced

Which learning rate value is most likely to cause training instability in TensorFlow.js?

You are training a neural network in TensorFlow.js. Which learning rate below is most likely to cause the training loss to diverge?

A 0.0001

B 0.01

C 0.001

D 1.0

💡 Hint

Higher learning rates can cause the model to overshoot minima.

A learning rate of 1.0 is very high and will likely cause the training to diverge or oscillate.

❓ Metrics

advanced

What does the 'accuracy' metric represent during TensorFlow.js model training?

During training, the model reports an accuracy of 0.85. What does this number mean?

A The model's loss value is 0.85

B 85% of predictions matched the true labels

C The model predicted 85 samples correctly

D The model's learning rate is 0.85

💡 Hint

Accuracy measures how often the model's predictions are correct.

Accuracy is the fraction of correct predictions over total predictions, so 0.85 means 85% correct.

🔧 Debug

expert

Why does this TensorFlow.js code throw an error?

Examine the code below. Why does it throw an error when run in the browser?

TensorFlow

const model = tf.sequential();
model.add(tf.layers.dense({units: 10, inputShape: [5]}));
model.compile({optimizer: 'adam', loss: 'categoricalCrossentropy'});
const xs = tf.tensor2d([[1, 2, 3, 4, 5]]);
const ys = tf.tensor2d([[0, 1, 0]]);
await model.fit(xs, ys);

A The output tensor ys shape does not match the model output units

B The input tensor xs has wrong shape

C The optimizer 'adam' is not supported in TensorFlow.js

D The loss function name is misspelled

💡 Hint

Check the shape of ys compared to the model's output layer units.

The model output layer has 10 units, but ys has shape [1,3], causing a shape mismatch error during training.

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