Building Machine Learning Apps Rapidly

A Quick Survey

Before we start, could you please fill in this 15-second survey? https://bit.ly/mlappsurvey

Objective

This workshop aims to teach you how:

Overview

In this workshop, we’ll predict whether or not a student will get admitted into a college in the US. Specifically, we’re going to

Explore the data

The dataset admission.csv looks like this:

Screenshot

Each row is a student. We have data for 500 students. For every student, we know their

Build a model to predict who’ll get admitted

We’ll use the Gramex IDE at https://gramex.gramener.com for this.

Sign into Gramex with a Microsoft or Google account. Create a Google account if required.

IDE Tutorial

  1. Visit https://gramex.gramener.com/. Click on the “Create new project” button

    Screenshot

  2. Set the project name to “admission”. Then click “Create Project”. The “admission” project is created. Click on it to open the IDE.

    Screenshot

  3. Add an MLHandler component

    Screenshot

  4. Enter “predict” under the Pattern: as the MLHandler end point URL. Download the dataset admission.csv and upload it using the Upload icon. Click on Preview to see the dataset.

Screenshot

Next,

  1. In Columns to Exclude, select “Name”
  2. In Categorical Columns, select “Research”
  3. In Numerical Columns, select everything except “Name”, “Research” and “Admitted”
  4. In Pick a Target Column, select “Admitted”
  5. In Pick a Model, select “Logistic Regression” (default)

  6. Press Submit

    Screenshot

  7. After a few seconds, click on the “/predict” link. This opens the trained model page

    Screenshot

The URL will look something like this: https://1234.gramex.gramener.co/predict. From now on, we’ll refer to it as /predict. You need to type out the https://1234.gramex.gramener.co/ before the URLs.

You can train the model with other models using the “Pick a Model” dropdown and clicking on “Train”.

Screenshot

Choose “DecisionTreeClassifier” as the final model and click on “Train”.

NOTE: You can do the same steps via configuration. Open the “Editor”, edit gramex.yaml and add this configuration:

building-ml-apps-predict:
  pattern: /$YAMLURL/predict
  handler: MLHandler
  kwargs:
    data:
      url: $YAMLPATH/admission.csv
    config_dir: $YAMLPATH
    model:
      class: LogisticRegression
      target_col: Admitted
      exclude: [Name]
      cats: [Research]
      nums: [GREScore, TOEFLScore, UniversityRating, SOP, LOR, CGPA]

Let’s predict the admissions of a few people. Add these query parameters to your URL and see if the “Admitted” field is correct.

Now let’s explore a student — Darius Michael. He has an excellent GRE score — 340. In fact, that’s the highest score. But Darius did not get admitted. What could he have done differently? Let’s explore.

/predict?GREScore=340&TOEFLScore=114&UniversityRating=5&SOP=4&LOR=4&CGPA=9.6&Research=1

Which of these worked? Which of these didn’t?

Build an app that predicts admission

Let’s now build a web app that uses this data like an API.

  1. Click on the code editor on the left — the second icon. This shows a list of all files created for the app. Select index.html

    Screenshot

  2. Delete all lines from index.html

  3. Copy paste the following file into index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>admission</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="ui/theme/default.scss" />
    <style>
      #result {
        font-weight: normal;
      }
    </style>
  </head>
  <body>
    <div class="container py-4">
      <div class="row">
        <div class="col-sm-6">
          <form class="admission">
            <div class="form-group row">
              <label for="GREScore" class="col-md-4">GRE Score</label>
              <input
                type="number"
                class="form-control col-md-8"
                name="GREScore"
                min="280"
                max="340"
              />
            </div>
            <div class="form-group row">
              <label for="TOEFLScore" class="col-md-4">TOEFL Score</label>
              <input
                type="number"
                class="form-control col-md-8"
                name="TOEFLScore"
                min="90"
                max="120"
              />
            </div>
            <div class="form-group row">
              <label for="UniversityRating" class="col-md-4"
                >University Rating</label
              >
              <input
                type="number"
                class="form-control col-md-8"
                name="UniversityRating"
                min="1"
                max="5"
              />
            </div>
            <div class="form-group row">
              <label for="SOP" class="col-md-4">SOP</label>
              <input
                type="number"
                class="form-control col-md-8"
                name="SOP"
                step="0.5"
                min="1"
                max="5"
              />
            </div>
            <div class="form-group row">
              <label for="LOR" class="col-md-4">LOR</label>
              <input
                type="number"
                class="form-control col-md-8"
                name="LOR"
                step="0.5"
                min="1"
                max="5"
              />
            </div>
            <div class="form-group row">
              <label for="CGPA" class="col-md-4">CGPA</label>
              <input
                type="number"
                class="form-control col-md-8"
                name="CGPA"
                step="0.01"
                min="6"
                max="10"
              />
            </div>
            <div class="form-group row">
              <label for="Research" class="col-md-4">Research</label>
              <select class="form-control col-md-8" name="Research">
                <option value="0">0: No</option>
                <option value="1">1: Yes</option>
              </select>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        <div class="col-sm-6 text-center text-middle">
          <h1 id="result"></h1>
        </div>
      </div>
    </div>
    <!-- .container-fluid -->
    <script src="ui/jquery/dist/jquery.min.js"></script>
    <script src="ui/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="ui/lodash/lodash.min.js"></script>
    <script src="ui/g1/dist/g1.min.js"></script>
    <script>
      $(".admission").on("submit", function (e) {
        e.preventDefault();
        $.getJSON("predict?" + $(this).serialize())
          .then(function (results) {
            console.log("Results", results);
            $("#result").html(
              results[0].Admitted
                ? 'You will <strong class="text-success">be admitted</strong>'
                : 'You will <strong class="text-danger">not be admitted</strong>',
            );
          })
          .fail(function (xhr) {
            console.error(xhr);
            $("#result").html(
              '<strong class="text-danger">Error</strong>. Please enter values correctly',
            );
          });
      });
      $(".admission :input").on("change", function () {
        $("#result").html("");
      });
    </script>
  </body>
</html>

Visit your app by going to the home page and clicking on “Launch app” against the “admissions” app

Screenshot

Now, try out different combinations of marks and see the result.

Summarize Learnings

Learning more

Try next steps

What if you need help?

First, let’s set up your StackOverflow accounts.

With your Github account, you can report a Gramex bug at https://github.com/gramener/gramex/issues/new

You can browse the Gramex Guide and learn more at https://gramener.com/gramex/guide/

Finally, you can e-mail cto@gramener.com (e.g. on this project, pushing to git, etc.) for help

Share feedback

We’d love to get your feedback, and help you with your learning & career. Could you please fill this 1-minute survey: https://bit.ly/mlworkshopresponse

If you like Gramex, visit https://github.com/gramener/gramex/ and click on ☆ Star to stay updated with Gramex.