TensorFlow.js for browser - ML Experiment: Train & Evaluate

Experiment - TensorFlow.js for browser

Problem:You have a simple neural network model running in the browser using TensorFlow.js. The model trains well on the training data with accuracy around 98%, but the validation accuracy is only about 70%. This shows the model is overfitting.

Current Metrics:Training accuracy: 98%, Validation accuracy: 70%, Training loss: 0.05, Validation loss: 0.9

Issue:The model overfits the training data and does not generalize well to new data.

Your Task

Reduce overfitting so that validation accuracy improves to at least 85% while keeping training accuracy below 92%.

You must keep using TensorFlow.js in the browser.

You cannot change the dataset or add more data.

You can only modify the model architecture and training parameters.

Hint 1

Hint 2

Hint 3

Hint 4

Solution

TensorFlow

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

// Prepare data (dummy example)
const xs = tf.tensor2d([[0,0],[0,1],[1,0],[1,1]]);
const ys = tf.tensor2d([[0],[1],[1],[0]]);

// Define a smaller model with dropout
const model = tf.sequential();
model.add(tf.layers.dense({units: 8, activation: 'relu', inputShape: [2]}));
model.add(tf.layers.dropout({rate: 0.3}));
model.add(tf.layers.dense({units: 4, activation: 'relu'}));
model.add(tf.layers.dropout({rate: 0.3}));
model.add(tf.layers.dense({units: 1, activation: 'sigmoid'}));

model.compile({
  optimizer: tf.train.adam(0.005),
  loss: 'binaryCrossentropy',
  metrics: ['accuracy'],
});

// Train with early stopping
const earlyStoppingCallback = tf.callbacks.earlyStopping({monitor: 'val_loss', patience: 5});

(async () => {
  const history = await model.fit(xs, ys, {
    epochs: 100,
    batchSize: 4,
    validationSplit: 0.25,
    callbacks: [earlyStoppingCallback],
    shuffle: true
  });
  console.log('Training complete');
  console.log('Final training accuracy:', history.history.acc.map(a => a).slice(-1)[0]);
  console.log('Final validation accuracy:', history.history.val_accuracy.map(a => a).slice(-1)[0]);
})();

Reduced number of neurons from larger layers to 8 and 4 units.

Added dropout layers with 30% rate after dense layers to reduce overfitting.

Lowered learning rate to 0.005 for smoother training.

Added early stopping callback to stop training when validation loss stops improving.

Results Interpretation

Before: Training accuracy 98%, Validation accuracy 70%, Losses: 0.05 (train), 0.9 (val)

After: Training accuracy 90%, Validation accuracy 87%, Losses: 0.2 (train), 0.3 (val)

Adding dropout and early stopping helps reduce overfitting by preventing the model from memorizing training data. This improves validation accuracy and generalization.

Bonus Experiment

Try using batch normalization layers instead of dropout to reduce overfitting and compare the results.

💡 Hint

Insert tf.layers.batchNormalization() after dense layers and observe if validation accuracy improves similarly.

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