TensorFlow.js conversion - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of TensorFlow.js model prediction after conversion

Given a TensorFlow model converted to TensorFlow.js format and loaded in the browser, what will be the output shape of the prediction for an input tensor of shape [1, 28, 28, 1]?

TensorFlow

const input = tf.zeros([1, 28, 28, 1]);
const model = await tf.loadLayersModel('model.json');
const prediction = model.predict(input);
prediction.shape;

A [10]

B [28, 28, 1]

C [1, 784]

D [1, 10]

💡 Hint

Think about the output layer size of a typical classification model for 10 classes.

The model outputs predictions for 10 classes, so the output shape for a single input is [1, 10].

❓ Model Choice

intermediate

Choosing the correct TensorFlow.js model format for conversion

Which TensorFlow saved model format is compatible for direct conversion to TensorFlow.js using the tensorflowjs_converter tool?

A TensorFlow Lite flatbuffer file

B TensorFlow SavedModel directory with saved_model.pb and variables/

C TensorFlow checkpoint files only

D Keras HDF5 (.h5) file only

💡 Hint

The converter expects a full SavedModel directory structure.

The tensorflowjs_converter tool accepts the TensorFlow SavedModel directory format for conversion.

❓ Hyperparameter

advanced

Effect of quantization during TensorFlow.js model conversion

What is the main effect of applying 8-bit quantization during TensorFlow.js model conversion?

A Converts the model to use float64 precision for better stability

B Removes dropout layers from the model

C Reduces model size and speeds up inference with slight accuracy loss

D Increases model size but improves accuracy

💡 Hint

Quantization trades precision for smaller size and faster speed.

8-bit quantization reduces model size and speeds up inference but may slightly reduce accuracy.

🔧 Debug

advanced

Identifying error when loading a TensorFlow.js model

You try to load a TensorFlow.js model with tf.loadLayersModel('model.json') but get a 404 error. What is the most likely cause?

A The model.json file path is incorrect or the file is missing on the server

B The model.json file is corrupted and cannot be parsed

C The input tensor shape does not match the model input shape

D The browser does not support WebGL

💡 Hint

A 404 error means the file was not found at the specified URL.

A 404 error indicates the model.json file path is wrong or the file is missing on the server.

🧠 Conceptual

expert

Understanding the difference between TensorFlow.js Layers and Graph models

Which statement correctly describes the difference between TensorFlow.js Layers API models and Graph models?

A Layers API models are high-level and easier to use; Graph models are low-level and support arbitrary TensorFlow graphs

B Graph models are deprecated and replaced by Layers API models

C Layers API models only support CPU execution; Graph models support GPU

D Graph models are only for training; Layers API models are only for inference

💡 Hint

Think about abstraction levels and flexibility.

Layers API provides a user-friendly way to build models; Graph models allow loading any TensorFlow graph for inference.

Practice

1. What is the main purpose of the tensorflowjs_converter tool?

easy

A. To convert TensorFlow models to a format usable in web browsers

B. To train new TensorFlow models directly in JavaScript

C. To visualize TensorFlow model training progress

D. To optimize TensorFlow models for mobile devices

Solution

1. Step 1: Understand the role of tensorflowjs_converter

   This tool changes TensorFlow models into a format that JavaScript can use in browsers.

2. Step 2: Compare options with the tool's purpose

   Only To convert TensorFlow models to a format usable in web browsers correctly describes converting models for browser use, while others describe unrelated tasks.

3. Final Answer:

   To convert TensorFlow models to a format usable in web browsers -> Option A

4. Quick Check:

   tensorflowjs_converter purpose = convert models for browsers [OK]

Hint: Remember: converter means changing format for browser use [OK]

Common Mistakes:

• Confusing conversion with training models
• Thinking it optimizes models for mobile
• Assuming it visualizes training progress

2. Which of the following is the correct command to convert a TensorFlow SavedModel to TensorFlow.js format?

easy

A. tensorflowjs_converter --input_format=keras saved_model_dir web_model_dir

B. tensorflowjs_converter --input_format=tf_saved_model saved_model_dir web_model_dir

C. tensorflowjs_converter --input_format=tfjs_layers_model saved_model_dir web_model_dir

D. tensorflowjs_converter --input_format=tflite saved_model_dir web_model_dir

Solution

1. Step 1: Identify the input format for a SavedModel

   TensorFlow SavedModel format is specified as tf_saved_model in the converter command.

2. Step 2: Match the command with correct input format

   tensorflowjs_converter --input_format=tf_saved_model saved_model_dir web_model_dir uses --input_format=tf_saved_model, which is correct for SavedModel conversion.

3. Final Answer:

   tensorflowjs_converter --input_format=tf_saved_model saved_model_dir web_model_dir -> Option B

4. Quick Check:

   SavedModel input_format = tf_saved_model [OK]

Hint: Use --input_format=tf_saved_model for SavedModel conversion [OK]

Common Mistakes:

• Using keras input format for SavedModel
• Confusing tfjs_layers_model with SavedModel
• Using tflite format for TensorFlow SavedModel

3. Given this command:
tensorflowjs_converter --input_format=keras model.h5 tfjs_model
What will be the output in the tfjs_model folder?

medium

A. A TensorFlow.js model.json file and binary weight files

B. A single .h5 file with converted weights

C. A Python script to load the model

D. A TensorFlow SavedModel directory structure

Solution

1. Step 1: Understand output format of keras model conversion

   Converting a Keras .h5 model to TensorFlow.js produces a model.json file plus binary weight files.

2. Step 2: Match output files with options

   A TensorFlow.js model.json file and binary weight files correctly describes the JSON and weight files output. Others describe incorrect formats.

3. Final Answer:

   A TensorFlow.js model.json file and binary weight files -> Option A

4. Quick Check:

   Keras to TF.js conversion outputs model.json + weights [OK]

Hint: Converted TF.js models have model.json plus weight files [OK]

Common Mistakes:

• Expecting a single .h5 file after conversion
• Looking for Python scripts in output
• Confusing SavedModel directory with TF.js output

4. You run this command:
tensorflowjs_converter --input_format=tf_saved_model model_dir tfjs_dir
But get an error: "ValueError: SavedModel file does not exist at: model_dir".
What is the likely cause?

medium

A. The output directory tfjs_dir already exists

B. The --input_format flag is misspelled

C. TensorFlow.js converter does not support SavedModel format

D. The model_dir path is incorrect or missing the SavedModel files

Solution

1. Step 1: Analyze the error message

   The error says the SavedModel file is missing at the given model_dir path.

2. Step 2: Identify the cause of missing files

   This usually means the path is wrong or the directory does not contain the SavedModel files.

3. Final Answer:

   The model_dir path is incorrect or missing the SavedModel files -> Option D

4. Quick Check:

   Missing SavedModel files = wrong model_dir path [OK]

Hint: Check model directory path and contents first [OK]

Common Mistakes:

• Assuming flag spelling causes file not found
• Thinking converter lacks SavedModel support
• Believing output directory existence causes this error

5. You have a TensorFlow Keras model saved as model.h5. You want to convert it for use in a web app and then load it in JavaScript. Which steps correctly describe this process?

hard

A. Use tensorflowjs_converter --input_format=tflite model.h5 tfjs_model to convert, then load with tf.loadLayersModel('tfjs_model/model.json')

B. Use tensorflowjs_converter --input_format=tf_saved_model model.h5 tfjs_model to convert, then load with tf.loadGraphModel('tfjs_model/model.json')

C. Use tensorflowjs_converter --input_format=keras model.h5 tfjs_model to convert, then load with tf.loadLayersModel('tfjs_model/model.json')

D. Directly load model.h5 in JavaScript without conversion

Solution

1. Step 1: Choose correct input format for Keras .h5 model

   The input format for a Keras .h5 model is keras, so the converter command must use --input_format=keras.

2. Step 2: Use the right JavaScript loading function

   Converted Keras models are loaded with tf.loadLayersModel pointing to the model.json file.

3. Final Answer:

   Use tensorflowjs_converter --input_format=keras model.h5 tfjs_model to convert, then load with tf.loadLayersModel('tfjs_model/model.json') -> Option C

4. Quick Check:

   Keras model conversion + tf.loadLayersModel = Use tensorflowjs_converter --input_format=keras model.h5 tfjs_model to convert, then load with tf.loadLayersModel('tfjs_model/model.json') [OK]

Hint: Match input_format and JS loader for Keras models [OK]

Common Mistakes:

• Using tf_saved_model input format for .h5 files
• Loading Keras models with tf.loadGraphModel
• Trying to load .h5 files directly in JavaScript