Tutorial | Machine Learning Model Deployment

Let's get practical and deploy a Machine Learning model into a Website to calculate something

Jesús López's photo
Jesús López
·Nov 3, 2021·

7 min read

Featured on Hashnode
Tutorial | Machine Learning Model Deployment

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

We already know that a Machine Learning Model is a mathematical formula to calculate something ↓

Machine Learning Models are deployed to, for example:

  • Predict objects within an image (Tesla) so that the car can take actions
  • Spotify recommends songs to a user so that you'd fall in love with the service
  • Most likely to interact posts in Facebook or Twitter so that you will spend more time on the app

If you just care about getting the code to make this happen, you can forget the storytelling and get right into those lines in GitHub ↗︎

If you want to follow the tutorial and understand the topic in depth, let's get started ↓

Let's say that we are a car sales company and we want to make things easier for clients when they decide which car to buy.

They usually don't want to have a car that consumes lots of fuel mpg.

Nevertheless, they won't know this until they use the car.

Is there a way to predict the consumption based on other characteristics of the car?

  • Yes, with a mathematical formula, for example:
consumption = 2 + 3 * acceleration * 2.1  horsepower

We have historical data from all cars models we have sold over the past few years.

We could use this data to calculate the BEST mathematical formula.

And deploy it to a website with a form to solve the consumption question by themselves.

To make this happen, we will follow the structure:

  1. Create ML Model Object in Python
  2. Create an HTML Form
  3. Create Flask App
  4. Deploy to Heroku
  5. Visit Website and Make a Prediction

Create ML Model Object in Python

Import Data to Python

  • This dataset contains information about car models (rows)
  • For which we have some characteristics (columns)
import seaborn as sns

df = sns.load_dataset(name='mpg', index_col='name')[['acceleration', 'weight', 'mpg']]
df.sample(5)
acceleration weight mpg
name
subaru 17.8 2065 32.3
bmw 2002 12.5 2234 26.0
audi 5000 15.9 2830 20.3
toyota corolla 1200 21.0 1836 32.0
ford gran torino (sw) 16.0 4638 14.0

Linear Regression Model from Historical Data

from sklearn.linear_model import LinearRegression

model = LinearRegression()
model.fit(X=df[['acceleration', 'weight']], y=df['mpg'])
model.__dict__
{'fit_intercept': True,
 'normalize': False,
 'copy_X': True,
 'n_jobs': None,
 'positive': False,
 'n_features_in_': 2,
 'coef_': array([ 0.25081589, -0.00733564]),
 '_residues': 7317.984100916719,
 'rank_': 2,
 'singular_': array([16873.21840634,    49.92970477]),
 'intercept_': 41.39982830200016}

And the BEST mathematical formula is:

consumption = 41.39 + 0.25 * acceleration - 0.0073 * weight

Save LinearRegression() into a File

  • The object LinearRegression() contains the Mathematical Formula
  • That we will use in the website to make the prediction
import pickle

with open('linear_regression_model.pkl', 'wb') as f:
    pickle.dump(model, f)

Now a file called linear_regression_model.pkl should appear in the same folder that your script.

Create HTML form

All websites that you see online are displayed through an HTML file.

Therefore, we need to create an HTML file that contains a form for the user to input the data.

And calculate the prediction for the fuel consumption.

Website example here ↗︎

  • Let's head over a Code Editor (VSCode in my case) and create a new file called index.html

You may download Visual Studio Code (VSCode) here ↗︎

That should contain the following lines:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <label for="acceleration">Acceleration (m/s^2):</label><br />
      <input
        type="number"
        id="acceleration"
        name="acceleration"
        value="34"
      /><br />
      <label for="weight">Weight (kg):</label><br />
      <input type="number" id="weight" name="weight" value="12" /><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
  1. If you open the file index.html in a browser, you will see the form.

  2. And the submit button that is supposed to calculate the prediction.

  3. Nevertheless, if you click, nothing will happen.

  4. Because we need to develop the Flask application to send the user input to a mathematical formula to calculate the prediction and return that into the website.

Create Flask App

As we are going to develop a whole application to a web server (Heroku), we need to create a dedicated environment with just the necessary packages.

  • Let's head over the terminal and type the following commands:
python -m venv car_consumption_prediction
source car_consumption_prediction/bin/activate
  • Now let's install the required packages:
pip install flask
pip install scikit-learn
  • Now you should open the folder car_consumption_prediction in a Code Editor

  • And create a new folder app with two other folders inside:

- app
    - model
    - templates
  • Then move the files we created before to its corresponding folders:
- app
    - model
        - linear_regression_model.pkl
    - templates
        - index.html

Now that we have the project structure, let's continue with the core functionality

We will build a Python script that handles the user input and make the prediction for fuel consumption

  • So, create a new file within app folder called app.py

PS: This is the most important file in a Flask app because it manages everything.

- app
    - model
        - linear_regression_model.pkl
    - templates
        - index.html
    - app.py
  • And add the following lines of code:
import flask
import pickle

with open(f'model/linear_regression_model.pkl', 'rb') as f:
    model = pickle.load(f)

app = flask.Flask(__name__, template_folder='templates')


@app.route('/', methods=['GET', 'POST'])
def main():
    if flask.request.method == 'GET':
        return(flask.render_template('index.html'))

    elif flask.request.method == 'POST':
        acceleration = flask.request.form['acceleration']
        weight = flask.request.form['weight']

        input_variables = [[acceleration, weight]]

        prediction = model.predict(input_variables)[0]

        return flask.render_template('index.html',
                                     original_input={'Acceleration': acceleration,
                                                     'Weight': weight},
                                     result=prediction,
                                     )


if __name__ == '__main__':
    app.run()
  1. We need to pay attention to what's going on in the last return ...:

  2. The function render_template() is passing the objects from parameters original_input and result to index.html

  3. Then, how can we use this variables in the file index.html?

  4. Copy-paste the following lines of code into index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="{{ url_for('main') }}" method="POST">
      <label for="acceleration">Acceleration (m/s^2):</label><br />
      <input type="number" id="acceleration" name="acceleration" required /><br />
      <label for="weight">Weight (kg):</label><br />
      <input type="number" id="weight" name="weight" required /><br /><br />
      <input type="submit" value="Submit" />
    </form>
    <br />
    {% if result %}
    <p>
      The calculated fuel consumption is
      <span style="color: orange">{{result}}</span>
    </p>
    {% endif %}
  </body>
</html>

We made two changes to the file:

  1. Specify the action to take when form is submitted:

     <form action="{{ url_for('main') }}" method="POST">
    
  2. Show the prediction below the form

     {% if result %}
     <p>
       The calculated fuel consumption is
       <span style="color: orange">{{result}}</span>
     </p>
     {% endif %}
    

In this case, we had to use the conditional if to display result if existed, as result won't exist until the form is submitted and the server computes the prediction in app.py.

Add the Procfile

I did some research about an error in which Heroku wasn't working the way I expected

And found that I needed to add a Procfile

  1. Create a file in the folder app called procfile

  2. Write the following line and save the file:

     web: gunicorn app:app
    

    The folder structure will now be:

     - app
         - model
             - linear_regression_model.pkl
         - templates
             - index.html
         - app.py
         - procfile
    
  3. Install the gunicorn package in the virtual environment. In terminal:

     pip install gunicorn
    

Deploy to Heroku

Now it's the time to upload the application to Heroku so that anyone can get its prediction on fuel comsumption given a car's acceleration and weight.

  1. Create an Account in Heroku.
  2. Download Heroku CLI
  3. Create the Heroku App within the Terminal:
heroku create ml-model-deployment-car-mpg

This will be traduced into a website called ml-model-deployment-car-mpg.herokuapp.com

  • PS: You should use a different name instead of ml-model-deployment-car-mpg heroku will turn your repository into an url.

Commit the app files to your heroku hosting.

  1. git init within car_consumption_prediction folder
  2. Create a requirements.txt file with the instruction for required packages. You could automatically create this by:

     pip freeze > requirements.txt
    

    The folder structure will now be:

     - app
         - model
             - linear_regression_model.pkl
         - templates
             - index.html
         - app.py
         - procfile
         - requirements.txt
    
  3. Add the files for commit.

     git add .
    
  4. Commit the files to the remote

     git commit -m 'some random message'
     git push heroku master
    

That's all the technical aspect.

Now if some user would like to use the app...

Visit Website and Make a Prediction

  1. Visit ml-model-deployment-car-mpg.herokuapp.com
  2. Introduce some numbers in the form
  3. Submit and watch the prediction

References

Did you find this article valuable?

Support Jesús López by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this