Sign in

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

  1. Set-up google cloud account
  2. Install node

Step 1: Download the TensorflowJS Model

Refer to the below link on how to generate a Tensorflow JS predictive model

https://clincher.medium.com/how-to-create-an-image-classifier-predictive-model-without-a-single-line-of-code-8ed6b1402f6b

Download the generated model as below into a folder

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.

<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 -y

The above command will create the package.json file in the folder

Install the node express

npm i express

Create 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

  1. 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 “” 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.

# 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.

Pega Architect | Cloud Practitioner | Data Science Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store