LAB 6: Serving baby weight predictions

Learning Objectives

Deploy a web application that consumes your model service on Cloud AI Platform.

Introduction

Verify that you have previously Trained your Keras model and Deployed it predicting with Keras model on Cloud AI Platform. If not, go back to 5a_train_keras_ai_platform_babyweight.ipynb and 5b_deploy_keras_ai_platform_babyweight.ipynb create them.

In the previous notebook, we deployed our model to CAIP. In this notebook, we'll make a Flask app to show how our models can interact with a web application which could be deployed to App Engine with the Flexible Environment.

Step 1: Review Flask App code in `application` folder

Let's start with what our users will see. In the application folder, we have prebuilt the components for web application. In the templates folder, the index.html file is the visual GUI our users will make predictions with.

It works by using an HTML form to make a POST request to our server, passing along the values captured by the input tags.

The form will render a little strangely in the notebook since the notebook environment does not run javascript, nor do we have our web server up and running. Let's get to that!

Step 2: Set environment variables



In [34]:

    
%%bash
# Check your project name
export PROJECT=$(gcloud config list project --format "value(core.project)")
echo "Your current GCP Project Name is: "$PROJECT









    



Your current GCP Project Name is: asl-ml-immersion



In [ ]:

    
import os
os.environ["BUCKET"] = "your-bucket-id-here" # Recommended: use your project name

Step 3: Complete application code in `application/main.py`

We can set up our server with python using Flask. Below, we've already built out most of the application for you.

The @app.route() decorator defines a function to handle web reqests. Let's say our website is www.example.com. With how our @app.route("/") function is defined, our sever will render our index.html file when users go to www.example.com/ (which is the default route for a website).

So, when a user pings our server with www.example.com/predict, they would use @app.route("/predict", methods=["POST"]) to make a prediction. The data that gets sent over the internet isn't a dictionary, but a string like below:

name1=value1&name2=value2 where name corresponds to the name on the input tag of our html form, and the value is what the user entered. Thankfully, Flask makes it easy to transform this string into a dictionary with request.form.to_dict(), but we still need to transform the data into a format our model expects. We've done this with the gender2str and the plurality2str utility functions.

Ok! Let's set up a webserver to take in the form inputs, process them into features, and send these features to our model on Cloud AI Platform to generate predictions to serve to back to users.

Fill in the TODO comments in application/main.py. Give it a go first and review the solutions folder if you get stuck.

Note: AppEngine test configurations have already been set for you in the file application/app.yaml. Review app.yaml documentation for additional configuration options.

Step 4: Deploy application

So how do we know that it works? We'll have to deploy our website and find out! Notebooks aren't made for website deployment, so we'll move our operation to the Google Cloud Shell.

By default, the shell doesn't have Flask installed, so copy over the following command to install it.

python3 -m pip install --user Flask==0.12.1

Next, we'll need to copy our web app to the Cloud Shell. We can use Google Cloud Storage as an inbetween.



In [ ]:

    
%%bash
gsutil -m rm -r gs://$BUCKET/baby_app
gsutil -m cp -r application/ gs://$BUCKET/baby_app

Run the below cell, and copy the output into the Google Cloud Shell



In [27]:

    
%%bash
echo rm -r baby_app/
echo mkdir baby_app/
echo gsutil cp -r gs://$BUCKET/baby_app ./
echo python3 baby_app/main.py









    



rm -r baby_app/
mkdir baby_app/
gsutil cp -r gs://asl-ml-immersion/baby_app ./
python3 baby_app/main.py

Step 5: Use your website to generate predictions

Time to play with the website! The cloud shell should now say something like * Running on http://127.0.0.1:8080/ (Press CTRL+C to quit). Click on the http link to go to your shiny new website. Fill out the form and give it a minute or two to process its first prediction. After the first one, the rest of the predictions will be lightning fast.

Did you get a prediction? If not, the Google Cloud Shell will spit out a stack trace of the error to help narrow it down. If yes, congratulations! Great job on bringing all of your work together for the users.

Lab Summary

In this lab, you deployed a simple Flask web form application on App Engine that takes inputs, transforms them into features, and sends them to a model service on Cloud AI Platform to generate and return predictions.

Copyright 2019 Google Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License