TensorFlow.js conversion - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to load a TensorFlow.js model from a URL.

TensorFlow

const model = await tf.loadLayersModel('[1]');

Drag options to blanks, or click blank then click option'

Amodel.h5

Bhttps://example.com/model.json

C./model.pb

Dmodel.pkl

Attempts:

3 left

💡 Hint

Common Mistakes

Using a Keras H5 file instead of a TensorFlow.js JSON model file.

Using a local file path without proper URL format.

The tf.loadLayersModel function loads a TensorFlow.js model from a URL or local path to a JSON file. The URL must point to a model.json file.

2fill in blank

medium

Complete the code to convert a Keras model to TensorFlow.js format using the CLI.

TensorFlow

tensorflowjs_converter --input_format=keras [1] [2]

Drag options to blanks, or click blank then click option'

Amodel.h5

Bmodel.json

Ctfjs_model

Dsaved_model

Attempts:

3 left

💡 Hint

Common Mistakes

Using model.json as input instead of output.

Using saved_model as output folder for Keras input.

The tensorflowjs_converter command converts a Keras H5 model file (model.h5) to a TensorFlow.js format saved in a directory (tfjs_model).

3fill in blank

hard

Fix the error in the code to correctly save a TensorFlow SavedModel for conversion.

TensorFlow

model.save('[1]');

Drag options to blanks, or click blank then click option'

A./saved_model

Bmodel.h5

Cmodel.json

Dtfjs_model

Attempts:

3 left

💡 Hint

Common Mistakes

Saving with a filename ending in .h5 instead of a folder path.

Using a JSON filename which is for TensorFlow.js, not TensorFlow SavedModel.

To save a TensorFlow SavedModel format, you must provide a directory path (e.g., './saved_model'). Saving as .h5 saves a Keras H5 file, not a SavedModel.

4fill in blank

hard

Fill both blanks to create a TensorFlow.js LayersModel from a Keras model and save it.

TensorFlow

const model = await tf.[1]('https://example.com/model.json');
await model.[2]('localstorage://my-model');

Drag options to blanks, or click blank then click option'

AloadLayersModel

Bsave

Cfit

Dcompile

Attempts:

3 left

💡 Hint

Common Mistakes

Using fit or compile instead of loading or saving methods.

Confusing method names for loading and saving.

Use tf.loadLayersModel() to load a Keras converted model, then model.save() to save it to local storage in TensorFlow.js.

5fill in blank

hard

Fill all three blanks to convert a TensorFlow SavedModel to TensorFlow.js format specifying input format and output directory.

TensorFlow

tensorflowjs_converter --input_format=[1] [2] [3]

Drag options to blanks, or click blank then click option'

Akeras

B./saved_model

C./tfjs_model

Dtf_saved_model

Attempts:

3 left

💡 Hint

Common Mistakes

Using keras as input format for SavedModel.

Not specifying output directory path.

To convert a TensorFlow SavedModel to TensorFlow.js format, specify --input_format=tf_saved_model, the SavedModel directory ./saved_model, and the output directory ./tfjs_model.

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