You’ve painstakingly trained and evaluated your machine learning model in Jupyter notebooks. You’ve deployed the model to AWS Sagemaker. Now, your developer friends and higher-ups are anxious to see your model in action.

Do they want to install Python, Jupyter Notebooks, fiddle with virtualenv, and load your notebook file just to try the model? Hell no! In this age of easy access, they want to use a web app that works on their phone while using the bathroom. How do you build a web app for your Sagemaker model? You’re a data scientist, not a web developer!

web app for ml model

We’ll quickly create a responsive web app for your Sagemaker ML Model using Booklet.ai.

If you need to create a web app for your Sagemaker ML model - and you needed it yesterday - you’re in luck. I’ll show how to create a responsive web app for your Sagemaker Model Endpoint in just a couple of minutes (and yes, it will be on-the-toilet mobile-friendly).

Do you really want to learn Flask, React, Docker, etc?

packed truck

The traditional do-it-yourself approach to creating a web app for your Sagemaker ML model involves a combination of Flask, React, Docker, and more. There are online courses for each of these technologies that take months to complete! It’s a lot of tech to throw at a front end for your ML model. In fact, notice how almost all of the comments in this tutorial are folks hitting problems with this approach:

comments

You need a web app for your ML model, but you don’t have to master complex web tech now. Instead, I’ll show you how to quickly create a responsive web app for your ML model with Booklet.ai.

How Booklet.ai works

Booklet creates a web app for your Sagemaker model without any code or extra libraries to install. Here’s an overview of how Booklet works:

  1. Grant Booklet.ai read-only access to a limited number of AWS Sagemaker actions.
  2. Choose the Sagemaker endpoints you’d like to integrate with Booklet in our UI.
  3. Booklet hosts a responsive web app that takes HTML form input, formats the data, invokes your Sagemaker endpoint, and displays the result within the web app.

Read below for full details.

Signup for Booklet.ai

Booklet is free to sign up for, no credit card required. Sign up below:

Sign Up for Booklet.ai  ▶

Create an AWS Sagemaker Endpoint

sagemaker

This tutorial assumes you’ve already deployed an ML model to AWS Sagemaker and created an endpoint for the model. See the AWS docs on hosting services for information on this process.

Grant Booklet.ai access to AWS Sagemaker

You need to grant us read-only access to a limited number of Sagemaker actions via an IAM role that is associated with our AWS account.

Follow these steps to create a read-only IAM Role for Booklet:

  1. Create a new role in the AWS IAM Console.
  2. Select “Another AWS account” for the Role Type.
  3. Enter “256039543343” in the Account ID, field (this is the Booklet.ai AWS account id).
  4. Click the “Next: Permissions” button.
  5. Click the “Create Policy” button (opens a new window).
  6. Select the JSON tab. Copy and paste this JSON into the text area.
  7. Click “Review policy”.
  8. Name the policy “BookletAWSIntegrationPolicy”.
  9. Click “Create policy” and close the window.
  10. Back in the “Create role” window, refresh the list of policies and select the policy you just created.
  11. Click “Next: Review”.
  12. Give the role a name such as “BookletAWSIntegrationRole”. Click “Create Role”.
  13. Copy the Role ARN. It looks like something like “arn:aws:iam::123456789012:role/BookletIntegrationRole”.

With the AWS Role created and the ARN on your clipboard, we’re almost there. In the Booklet.ai settings, paste in the AWS Role ARN and click the “Save” button:

comments

For more information, check out the Booklet.ai docs

Booklet and AWS are now integrated! Let’s create that web app!

Create the web app for your Sagemaker endpoint

Click the “New Model” button within Booklet.ai, choose the Sagemaker endpoint you’d like to wrap in a responsive web app, and click “Create”. You now have a basic web form to enter a comma-separated list of inputs and see the results:

comments

Wait a second - you wanted more than a comma-separated input? Let’s apply some Queer Eye-esqe taste to the form! We can add select boxes for categorical attributes, ensure values are the proper types, provide default values, and more.

Define your input feature schema

Booklet.ai needs to know a bit about the ML model features to create a web app. You provide this via a JSON-formatted features schema. When viewing your model, click “Settings” and scroll to the “Features schema” configuration setting.

Below is an example schema for an Iris prediction model. It’s just an Array with information about each feature:

[
  {
    "name": "Petal Length (cm)",
    "default": 5.4
  },
  {
    "name": "Petal Width (cm)",
    "default": 2.1
  }
]

Booklet will take these settings and create a form:

comments

If you model has categorical text attributes, you can convert those into a select box by providing a list of options. For example:

{
    "name": "lead source",
    "default": "Direct Traffic",
    "options": [
      "Direct Traffic",
      "Google",
      "Olark Chat",
      "Organic Search",
      "Referral Sites"
    ]
}

The code above looks like the following in a form:

comments

Share your web app

It’s time to unveil your work! You can choose to make your model public (anyone can view the model) or secret (share with a hard-to-guess URL):

share

Tada! You have a responsive web app for your Sagemaker model without a truckload-full of moving parts.

Without having to learn Flask, Docker, React, AWS Lambda, and more you now have a responsive web app that makes it easy for others to try your model. You’ve likely set this up in 30 minutes or less. This is just the start of integrating your model into your business (Booket.ai gives you more than a web app). Signup to learn more.

Sign Up for Booklet.ai  ▶

You may also enjoy...