Machine Learning with Structured Data: Deploying a Web Application (Part 3)

In this tutorial, you use the prediction API to drive online predictions for a web application running on App Engine.

This tutorial is the final part of a three-part series. It assumes that you have completed Part 2, Training the Model.


This tutorial uses components within the dotted line in the following diagram:

Series architecture with components used in this tutorial highlighted.

Serving online predictions using a web application involves deploying a web application that runs on App Engine, to predict a baby's weight given basic data about the mother's background. The web application uses the prediction API service deployed in Part 2 as its backend.

The Managed ML Service hosts the prediction API and returns the baby weight prediction given the web application's input data.

Before you begin

You must complete the first two parts in the series before you start this part:


This tutorial uses billable components of Cloud Platform, including:

  • App Engine
  • AI Platform

The estimated price to run this part of the tutorial, assuming you use every resource for an entire day, is approximately $0.16, based on this pricing calculator.

Verifying the prediction API service

  1. Open a new Cloud Shell session.


  2. Verify that the following command returns the model name you have deployed:

    gcloud ml-engine models list

    Check that this returns the babyweight model name with DEFAULT_VERSION_NAME value equal to soln.

    babyweight  soln

Downloading the babyweight application

  1. In Cloud Shell, download the babyweight application files and set your current directory.

    git clone
        cd training-data-analyst/blogs/babyweight/application

The directory contains code written in Python and JavaScript. The following files do most of the work:

  • This is a Python script that runs on App Engine. It provides an API service that returns a prediction for a baby's weight. To get this predicted value, it uses the prediction API service deployed on the Managed ML Service, as shown in the architecture diagram.

  • templates/form.html An HTML file containing JavaScript code that renders the input form shown below. It sends a REST API request to the backend application that runs on App Engine and then displays the result.

Here is the babyweight application input form:

The `babyweight` application input form

Communicating with the prediction API

The following code snippet sends a request to the prediction API service hosted on Cloud ML Engine.

Note that the line numbers are identical to the GitHub code repository:

    32: credentials = GoogleCredentials.get_application_default()
    33: api ='ml', 'v1', credentials=credentials)
    34: project = app_identity.get_application_id()
    35: model_name = os.getenv('MODEL_NAME', 'babyweight')

    41: def get_prediction(features):
    42:   input_data = {'instances': [features]}
    43:   parent = 'projects/%s/models/%s' % (project, model_name)
    44:   prediction = api.projects().predict(body=input_data, name=parent).execute()
    45:   return prediction['predictions'][0]['outputs']

This code uses the same logic as the notebook example you used in Part 2.

  • Line 33 instantiates an API client object and uses its method to send an API request on line 44.

    api ='ml', 'v1', credentials=credentials)

    prediction = api.projects().predict(body=input_data, name=parent).execute()

  • The features option is passed to get_prediction on line 41. It consists of a Python dictionary containing input data set by the user by the input form. The API client is instantiated at application launch and reused for each prediction call.

    def get_prediction(features):

  • It is assumed that this App Engine code is running in the same project that you used to create your AI Platform model. If not, you need to specify the project name explicitly on line 34, and add an authentication mechanism such as API keys or OAuth 2.0. Refer to the Google API Python client Getting Started guide for details.

    34: project = app_identity.get_application_id()

  • In this example, the model version is not specified on line 43, so the default version of the deployed model is used

    43: parent = 'projects/%s/models/%s' % (project, model_name)

Deploying the babyweight application

  1. In Cloud Shell, download the library packages required by the application.

    pip install -r requirements.txt -t lib
  2. Deploy the application code.

    gcloud app create --region=us-central
    gcloud app deploy

When you execute these commands in Cloud Shell, your project id is automatically applied to the application, and the application URL is defined as https://[PROJECT_ID] Now you can enter the URL into your web browser to access the baby weight prediction application.

Cleaning up

After you've finished the tutorial, clean up the resources you created on GCP so you won't be billed for them in the future. The following sections describe how to delete these resources.

Deleting the project

The easiest way to eliminate billing is to delete the project that you created for the tutorial.

To delete the project:

  1. In the Cloud Console, go to the Manage resources page.

    Go to Manage resources

  2. In the project list, select the project that you want to delete, and then click Delete.
  3. In the dialog, type the project ID, and then click Shut down to delete the project.

What's next