To use TensorFlow in a web application, we need a TensorFlow model that’s properly formatted. Then, we create a web page that loads the model.
We can use an existing model, apply transfer learning to a model, or train a custom model for our web application. After creating or finding a model, we need to ensure it is in the proper format. If it is not in the proper format, we can use a command line utility to convert the model.
For example, look at how we can convert a Keras model.
$ tensorflowjs_converter --input_format=keras /tmp/model.h5 /tmp/tfjs_model
We can use the TensorFlow model on the client side or the server side. When using the TensorFlow model client side, the model is executed on a device such as a smartphone or personal computer. The benefits of running the model on the client side include privacy, cost, and ease of distribution. Also, a client-side model requires no installation. However, the model must be optimized so that it consumes the least amount of system resources. When using a server-side approach, the model is executed on a server located in the cloud or on-premise. Some benefits of running the model on a server include the ability to use a large dataset and provide better control over the model's architecture. It is also possible to support IOT devices. The decision on which approach to use depends on the specific project requirements, including latency, scalability, privacy, reach, and ease of installation.
First, we will look at using an existing client-side model by including tensorflow.js on our web page. We can obtain a hosted version from a content delivery network (CDN). Most pretrained models have been created using large and reliable data sets. We can save time and money when using a trained client-side model. We do not need to pay for or spend time creating our own model. We only need to pay for hosting the web application to save on server costs.
We load tensorFlow.js and then include the model.
To get started, visit the link to explore some premade models and code samples.
For example, let's look at Image classification.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My web app</title>
<!-- Load TensorFlow.js. This is required to use MobileNet.-->
<script src="https://unpkg.com/@tensorflow/tfjs@0.10.3"> </script>
<!-- Load the MobileNet model. -->
<script src="https://unpkg.com/@tensorflow-models/mobilenet@0.0.1"> </script>
</head>
<body>
<h1>Image Classify</h1>
<p id="img_predictions"></p>
<!-- Image to be classified can be replaced with your image. -->
<img id="img" src="cat.png" width= 400px></img>
<!-- Can also use an external .js file -->
<script>
const img = document.getElementById('img');
// Load the model.
mobilenet.load().then(model => {
// Classify the image.
model.classify(img).then(predictions => {
displayPredictions(predictions);
});
});
// Display the predictions on the page.
function displayPredictions(predictions) {
document.getElementById("img_predictions").innerHTML = JSON.stringify(predictions, null, 4);
}
</script>
</body>
</html>Now, let's look at deploying a TensorFlow model server side.
To begin, we need a model. This can be a pre-trained model, we can create our own model or apply transfer learning to an existing model.
Next, we export our trained model to a format that TensorFlow Serving can use.
Finally, we deploy the model on the server. One way we can accomplish this is by creating a back-end API to load our model.
Then, we create a REST endpoint that takes the input data, processes it, and passes it to the TensorFlow model for prediction.
The endpoint returns the predicted output from the model. Finally, display the predicted output in the web application.
Deploying a TensorFlow model to a web application involves using a model that can be run in the client's browser or on a server. There are benefits to both, and the decision is based on the project.
Free Resources