Custom API for Keras Model using Cloud Run

Part 2 of Machine Learning + Cloud Run + Thunkable

Overview of this tutorial.

PART 1 — Design and train your Machine Learning Model with Teachable Machine

PART 2 — Custom API for Keras Models using Cloud Run ( you are here!!)

PART 3 — Machine Learning App in Thunkable.

PART 2. Custom API for Keras Models using Cloud Run

A little heads-up…

So to be honest, I couldn’t find any way to upload the Keras model using no-code solutions, but me being a Jr. software engineer and avid fan of python I decided to code a little solution to my problem…. But because I’m talking about Thunkable and overall no-code platforms, I’m guessing most of my readers are new at coding or even are looking for more no-code solutions. I got you. I decided to add a version of this tutorial with the least amount of steps and a coding overview. You do need to use your terminal to deploy the docker image to Google Cloud Platform. But that’s about it.

Nevertheless, I encourage everyone to give it a go or at least read it through to understand how it works from behind the scenes.

Also, another thing, deploying the project will cost you. So proceed if you’re ok with paying some cents for running your API.

Detailed Tutorial:

So I will kick off this tutorial with a basic understanding of python, pip packaging, and virtual environments.

Run your Keras model in your local environment

So get your coding IDE of preference out ( I use vscode) and create a directory for our project using the terminal.

$ mkdir 'Teachable Machine Example'

Start a virtual environment:

$ virtualvenv 'Teachable Machine Example'
$ cd 'Teachable Machine Example'
$ source bin/activate

You’re in! Welcome to your virtual environment :) In here you can add all the pip packages you please without adding them to your whole computer.

If you get a bunch of errors it may be because you haven’t installed it yet. A virtual environment is an isolated environment that contains everything you need to execute your project. You can read more about it here. All you have to do is install it using pip.

$ pip install virtualvenv

Inside of this directory we are going to have our first file that is the script we get from Teachable Machine in a ‘main.py’ file and the keras_model.h5.

So it would look something like this.

Since we are working with Thunkable our best approach is to take an image and save it to an URL using the MediaDB component. Then sending that URL to our ML API were are building to give us the result of the prediction.

So we have to change a bit of code…

Overall the code provided by the teachable machine explains every part of the code making it really easy to understand.

We are going to make some changes, specifically, I modified it so it could talk URLs instead of images uploaded on your computer.

Changes to the Teachable Machine File

Our main changes are as follows:

• Modified the libraries I imported:

import tensorflow.keras
from PIL import Image, ImageOps
import numpy as np # to be able to use numpy
import requests # to get my image URL
import tensorflow as tf #to use tensorflow

• Removed content:

# Disable scientific notation for clarity
np.set_printoptions(suppress=True)
# display the resized image
image.show()

The reason why I remove this was that the first line is a configuration for NumPy I don’t want and the second line shows my image processed by TensorFlow which given the fact I want to make it an API I don’t really need.

• Replaced content:

# Replace this with the path to your image
image = Image.open(‘test_photo.jpg’)
#resize the image to a 224x224 with the same strategy as in TM2:
#resizing the image to be at least 224x224 and then cropping from the center
size = (224, 224)
image = ImageOps.fit(image, size, Image.ANTIALIAS)
#turn the image into a numpy array
image_array = np.asarray(image)

I replaced all that code to be able to process images hosted online. To do that I had to add a few more steps I condensed into a function.

So basically what I got was the following:

It’s similar to the original main.py file we got on Teachable Machine but with minor fixes. To run it we have to install some libraries. Copy and paste this in a requirements.txt file on your working directory.

The main reason I’m putting out all the versions of the required packages is that when I upgraded a version of TensorFlow or Numpy, it didn’t work properly. So I would mess around it if you don’t mind the risk of not working afterward.

(Also please note my Vscode is kind of cursed and therefore there are some unused libraries. I’ve purchased my sage and quartz to cleanse it thoughtfully but haven’t received it since I got no amazon prime. jk)

To run it just install the requirements ( it may take a while) and then do the following. If you run into any errors then just install the packages you need

$ pip install -r requirements.txt
$ python main.py

Ok, so we got it running!! Pat yourself on the back maybe make a victory dance around your living room. Ok, you’re back… is not over yet. We still need to make a dockerized version of our code in Flask.

Flask + Docker Container.

Let’s go by steps…

• Flask → Web framework. Flask provides you with the tools to build a web application, in this case, a serverless one.
• Docker → Is a powerful tool designed to create, deploy, and run applications by using containers. Containers in simple words allow you to package an application with all its requirements so you can run it anywhere.

So we will need to modify our project to a flask project. We will make it really simple so you can access a route with a password or an API key to ask for the prediction. I don’t want to make this tutorial impossible for no-coders so I opted to add a manual API key. This by no means is secure. But it will allow you to test your custom-made API with thunkable.

So basically what I ended up adding a simple route to /predictions where I could POST some values and get data in return.

So basically in our flask API, we are getting two arguments, our photo and the API key (which you will have to modify or change to whatever you want). We check the API key and then proceed to do the requested prediction.

If you were making a complex model using different h5 files then you would take different routes. :)

Create a Docker File and Docker Compose, use the following files. Basically, it sets up our container.

To run it, first install Docker Dashboard on your machine. Then pip install docker-compose and docker in your virtual environment.

$ pip install docker
$ pip install docker-compose 

Then after you’re done, first we will build our container.

$ docker-compose build
$ docker-compose run

It will take a while, to test it we open postman or a simple browser and type our testing route with all the parameters

http://0.0.0.0:9090/prediction?url={yourimage url}&apikey=f69c02cc-5423-4285-9993-b42ecdec1c74

Or you can even test to send a request without an API key:

Ok so now we need to use Cloud Run. We just need to upload it. Congrats you made it through the detailed version of the tutorial, now we move forward to all the cloud run steps. In the end, you will have the code in the following GitHub repository.

Express Tutorial:

So if you scrolled throughout this tutorial, basically I have a repo made just for you. You can access it here and clone it.

The only thing you will need to do are the following steps:

• Add your .h5 model
• Change the line with the API key in the server.py to your own API key.

if apikey == ‘f69c02cc-5423–4285–9993-b42ecdec1c74’:

Obviously is not very secure but to not overcomplicate things we will use this very scrappy solution.

Let’s go over Google Cloud Platform. I recommend looking at this video → WATCH ME.

Click the upper button ‘Console’ to start using Google Cloud Platform and create a new project with a unique name (this cannot be changed later)

You will be able to access a dashboard of your project.

Ok, so we will need to deploy our image first before we deploy it on Cloud Run… We will need to use our terminal to do so. So open the command terminal on your computer and navigate to your project, if you’re developing your API on vscode it opens a terminal for you.

But first, do these two steps.

• First, enable billing in your project
• Install gcloud SDK according to your machine :)

For more help, you can look at the official documentation

It’s pretty straightforward as you can see. I could put all the steps but Google explains it much better.

Go into the cloud run library in your terminal to log in and find the project you created through the terminal. It is pretty straight forward you just need to select a thing from the menu.

$ gcloud init

Ok so once you got these two down, you can deploy your image using the terminal. Copy the project ID in your dashboard and run the following command on a terminal.

$ gcloud builds submit --tag gcr.io/PROJECT-ID/helloworld

So mine would be as follows:

$ gcloud builds submit --tag gcr.io/teachable-machine-1/mltest

It will prompt you to enable services like mine. Just put ‘y’ to accept this.

And you will need to enable services in the console if you’re presented with errors.

To solve this, you can go to the IAM menu in your GCP console

And add all the necessary permissions according to the errors you get in the terminal :)

It will take a couple of seconds to deploy your image but it should eventually finish. If you get a couple of errors, read through them and try to find solutions on the documentation. If you get stuck, let me know in the comments.

Ok so now, in your console navigate to Cloud Run. We will proceed to create a new service. Click on the ‘CREATE SERVICE’ button in the top menu.

You will proceed to create a new project. It will prompt you to enable the service, select a region, and choose an image to deploy. Choose a region for your Cloud Run and give your service a name.

Select the image you created in the previous steps and continue.

Allow unauthorized invocations to make it public:

It will create your Cloud Run Service; give it a couple of minutes to set everything. Now you can test your URL :)

You might need to modify the cloud run service a bit before you test it. Since we are serving an ML Keras model is pretty space and time-consuming.

So we will need to go to the edit & deploy new revision to change the following:

After that, it will update the service again and you will be all set to test it out. Test it with your browser or postman and tada! you have a custom API for Thunkable that processes samples with a Keras model in Teachable Machine :)

Be aware that it takes a long time sometimes to get the prediction, especially if you haven’t used it for a while. But still works.

Any examples and links will not work after the release of this project. This project is a volunteer effort from Mexico City’s Technovation Chapter. I don’t make anything from this and everything is open source.