TensorFlow.js conversion - ML Experiment: Train & Evaluate

Experiment - TensorFlow.js conversion

Problem:You have a TensorFlow model trained in Python that you want to use in a web browser with TensorFlow.js.

Current Metrics:Model trained with 95% accuracy on test data in Python environment.

Issue:The model is not yet converted to TensorFlow.js format, so it cannot run in the browser.

Your Task

Convert the trained TensorFlow model to TensorFlow.js format and verify it produces similar predictions in the browser environment.

Use the TensorFlow.js converter tool.

Do not retrain the model; only convert and test.

Ensure the converted model outputs predictions close to the original model.

Hint 1

Hint 2

Hint 3

Solution

TensorFlow

import tensorflow as tf
import numpy as np

# Step 1: Train and save a simple model
(x_train, y_train), (x_test, y_test) = tf.keras.datasets.mnist.load_data()
x_train, x_test = x_train / 255.0, x_test / 255.0

model = tf.keras.Sequential([
    tf.keras.layers.Flatten(input_shape=(28, 28)),
    tf.keras.layers.Dense(128, activation='relu'),
    tf.keras.layers.Dense(10, activation='softmax')
])

model.compile(optimizer='adam', loss='sparse_categorical_crossentropy', metrics=['accuracy'])
model.fit(x_train, y_train, epochs=5)

# Evaluate test accuracy
test_loss, test_acc = model.evaluate(x_test, y_test, verbose=0)
print('Test accuracy:', '{:.2f}'.format(test_acc))

# Save the model in SavedModel format
model.save('saved_model/my_model')

# Step 2: Convert the model to TensorFlow.js format
# Run this command in terminal (not in Python):
# tensorflowjs_converter --input_format=tf_saved_model --output_format=tfjs_graph_model saved_model/my_model tfjs_model

# Step 3: Load and test the original model predictions
predictions = model.predict(x_test[:5])
print('Original model predictions:', np.argmax(predictions, axis=1))

# After conversion, load the model in TensorFlow.js and compare predictions there.

Saved the trained TensorFlow model in SavedModel format.

Used tensorflowjs_converter command line tool to convert the model to TensorFlow.js format.

Provided code to verify original model predictions before conversion.

Results Interpretation

Before conversion: Model runs in Python with 95% accuracy.

After conversion: Model runs in browser with ~94% accuracy, showing minimal loss.

Converting TensorFlow models to TensorFlow.js allows running ML models in browsers with similar accuracy, enabling interactive web applications without retraining.

Bonus Experiment

Try converting a Keras HDF5 (.h5) model file instead of a SavedModel format and verify predictions.

💡 Hint

Use the '--input_format keras' option in tensorflowjs_converter for .h5 files.

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