How to deploy a Tensorflow JS predictive model as a web app using google cloud run?
In this particular post, we will learn to deploy a Tensorflow JS predictive model as a web app using google cloud run. Tensorflow JS executes the ML predictive models in the client browser. It helps to reduce the Server API calls and provides a real-time user experience. Web and mobile apps can leverage this Tensorflow JS for the low resource-intensive model executions.
Pre-requisites
Step 1: Download the TensorflowJS Model
Refer to the below link on how to generate a Tensorflow JS predictive model
Download the generated model as below into a folder
Note: Your generated model folder contains — metadata.json, model.json, weights.bin files
Step 2: Develop a simple HTML page and CSS
A simple HTML page to upload an image and predict using the Tensorflow JS library. The below HTML code is self-explanatory.
Note: We have imported the TensorflowJS and TeachableMachine JS libraries
<html><head><link rel="stylesheet" href="PredictImage-FlowerDataSet.css" /></head><body><h1>Tensorflow JS Web App Example</h1><p><label for="file" class="custom-file-upload"> Upload Image</label></p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none"/><img id="output" width="200" /><div id="label-container" class="prediction-results"></div><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script><script type="text/javascript">let model, webcam, labelContainer, maxPredictions, image;var loadFile = async function (event) {image = document.getElementById("output");image.src = URL.createObjectURL(event.target.files[0]);const ModelPath = "./my_model/";const modelURL = ModelPath + "model.json";const metadataURL = ModelPath + "metadata.json";model = await tmImage.load(modelURL, metadataURL);maxPredictions = model.getTotalClasses();labelContainer = document.getElementById("label-container");for (let i = 0; i < maxPredictions; i++) {// and class labelslabelContainer.appendChild(document.createElement("div"));}await predict();};// run the webcam image through the image modelasync function predict() {// predict can take in an image, video or canvas html elementconst prediction = await model.predict(image);for (let i = 0; i < maxPredictions; i++) {const classPrediction =prediction[i].className +": " +prediction[i].probability.toFixed(2);labelContainer.childNodes[i].innerHTML = classPrediction;}}</script></body></html>
A simple CSS file for styling
body {background-color: lightblue;}h1 {color: black;text-align: center;}.custom-file-upload {border: 1px solid #ccc;display: inline-block;padding: 6px 12px;cursor: pointer;}.prediction-results {border: 1px solid #ccc;font-weight: bold;}
Your folder structure looks as below
Step 3: Initialize the Node Express application
In the same folder, initialize the node application using the below command
npm init -yThe above command will create the package.json file in the folder
Install the node express
npm i expressCreate the index.js file in the folder and copy the following code. It is self-explanatory
// index.js/*** Required External Modules*/const express = require("express");const path = require('path');/*** App Variables*/const app = express();const port = process.env.PORT || "3000";/*** Routes Definitions*/app.get("/", (req, res) => {res.sendFile(path.join(__dirname +'/PredictImage-FlowerDataSet.html'));});/*** Server Activation*/app.use(express.static(__dirname + '/'));app.listen(port, () => {console.log(`Listening to requests on http://localhost:${port}`);});
Step 4: Dockerize the application
- Create the docker file as below
FROM node:14# Create app directoryWORKDIR /usr/src/app# Install app dependencies# A wildcard is used to ensure both package.json and package-lock.json are copiedCOPY package*.json ./RUN npm install# Bundle app sourceCOPY . .EXPOSE 8080CMD ["node", "index.js"]
2. Create the docker ignore file
.gitDockerfile.DS_Store.gitignore.dockerignore# Environmentsnode_modules/
Step 5: Deploy to Google Cloud Run
1. Create the “deploy.sh” file with the following commands
The first command is to create the container image in the Google Container Registry and the next is to deploy the container.
Note: Updated the caps — PROJECT_ID and the REGION with your cloud project details
# build & push container image
gcloud builds submit --tag gcr.io/PROJECT_ID/tensorflowjsexample# build the cloud run from the container image
gcloud run deploy tensorflowjsexample --image gcr.io/PROJECT_ID/tensorflowjsexample --region REGION --platform managed --allow-unauthenticated
After successful execution, you can verify the Google cloud run service as below in the gcloud console
Step 6: Test the deployed app
Click on the cloud run service and see the URL
Click on the URL — You will see the web app below
Upload any flower image and see the prediction results. In the below example, I have uploaded a Tulip flower and see the prediction results.
Congratulations :) — Wohooo. Now you successfully learned to deploy a Tensorflow JS web app using google cloud run.
