Deploying Machine Learning Model on Heroku using Flask

Every Data science enthusiast have a question in mind with the development of first machine learning project and solving any problem statement that how to make my approach useful for an end-user. How should I make my project available for public to use. So the answer is deployment. Yes! you need to deploy your application on online cloud platform like AWS, Azure, IBM Watson, or on public cloud which is free like Heroku.

In this tutorial we are going to understand the complete process, how to create a simple yet interactive user interface using flask and deploy it on Heroku which is available for end-user to use. We have already developed one machine learning project as Doctor Consultant fees prediction in machine learning deployment lifecycle article series part one. And this part-2 of series.

Table of Contents

  1. Introduction to Flask
  2. Create web Interface(HTML and CSS)
  3. Create Flask app
  4. requirements.txt file
  5. Procfile
  6. Push all code to GitHub
  7. Deployment at Heroku

What is Flask?

Flask is a micro web application framework written in Python. micro does not mean that flask is lacking behind in functionality rather it means to keep the core simple and extensible.

It consists of many modules and functions that make it easier for a data science aspirant or practitioner to create an easy UI without much frontend knowledge and worrying about the details like protocol management, thread management, etc.

Introduction to Flask

Install Flask on your machine

Installing a flask is simple and straightforward. you can just use a pip command in a terminal and install it.

        >pip install flask 

Setting up a Flask Environment

Before creating a file, let's understand the file arrangement. Basically, the flask works on the jinja template, where all the HTML files are kept under a templates folder and all the CSS, images, javascript, or graphics pics are kept in the folder of the static name.

we can create a flask app file with any name and specify it in the profile which is a command to the web to find the app file. let's get started by creating one by one file.

Creating a Web Interface

Create a new folder named templates and in this create an HTML file to create a home page of the interface. you can name it as you want with an HTML extension. 
If you do not have much or any knowledge of frontend development, then don't worry you can still create it using bootstrap. Just visit the bootstrap official website and copy and paste the code which you want on the interface.

Visualization is very important guys in any kind of project. First, you have to think that after completing a project how it should look like, just visualize it and start implementing it.

On our home page, we have to ask users to enter some data in order to predict the consultation fees. so we will create a form and provide a choice for him as per our dataset we used for modeling this problem.

You can refer to the source code on GitHub where each code file is uploaded.

This is a single file named 'home.html' which is the main page of our web app. we have created a simple form where users can enter the data. we have used a bootstrap class to arrange the text to look attractive. we will also use a custom CSS which internal linking we have provided using <link> take and url_for is a jinja templating attribute which can be used to call any function or add a link for a file.

Static Folder
Under this folder save a CSS file. If you have any extra images or javascript files then also they will be saved in this folder itself.

Creating a Flask Web App

Now, let's start coding in Flask and create our backend. If you remember in Part-1 we have used one-hot encoding on some of the variables so to provide the new data in 0 and 1 format from flask we can do it manually as well as with the python function.
As there are fewer categories and this was my first flask project so I tried to do it manually.
Create a file name you can create with any name.

we have first imported and Flask from a flask and initiate our app. After that to route the app on the front page that we created as home.html we used the render_template method which directly calls the file and opens it. The default routing to the home page is a simple slash("/").

Create a Predict Function

If a user has entered all the information in the form and as he will trigger the submit button the post request will be created. So under this predict function, we will fetch all the data that the user entered.
And after that to encode the categories, the value which the user has chosen will be given a value as 1 and all the rest of the columns as 0.

After encoding, we will pass all these columns to predict function to the loaded model and it will give us a predicted value. And we will again route the predictions to the frontend and here we are displaying the results on the same page, you can also create another HTML page. here I have passed a predicted value.
And the page will refresh and display the results.

Get Ready for Deployment

Create Requirements file

While deploying our model, we have to provide the required libraries to the cloud so that it could set up space and download all that libraries with a required version for us and run our model successfully.
Requirements file is a text file with a name requirement only, and you do not need to create it manually(You can) but there is a terminal command that you can execute in a project directory and it will create a requirements file will all the libraries and versions.
        $pip freeze > requirements.txt 

Declare Procfile

Heroku apps include a profile that specifies a command that is executed by the app on startup. you can use a procfile to declare a variety of processes type including,
  • Your Web app's server
  • Multiple types of worker processes
  • A singleton process, such as clock

Deployment to Heroku

This is the final step to make our app available for the end-user to use. The steps can seem a little bit tedious if you are deploying it the first time so follow these steps carefully.

Step-1) Go to Heroku and create an account.
If you do not have an account on Heroku then create one. it's pretty simple and straightforward.

Step-2) Create a new app and Give it a name
Click on the new option at the upper right corner and create a new app and give it an appropriate name related to your project. This will be your web app URL so give it based on your project. And Let the region and the United States only.

Create new Web App

Step-3) Push complete code to GitHub and Connect Repository to Heroku

Now in the deploy section as deployment method, you can see the GitHub option. We will connect our GitHub repository there so that Heroku can fetch the complete code easily.
Connect GitHub to Heroku

It is the simplest method to host your code. so go to your GitHub and create a new repository and add all code files as it is. for reference, you can see my GitHub how all the code should look like. Pushing all the code files using a git bash is an easy method so open git bash in a project folder and run the following command one by one.

Step-4) Enter your GitHub Repository and connect it.
After making a repository add that repository to Heroku and you will see the connected green option on GitHub as you can see in the above image.

Step-5) Click on Deploy Branch

Deployment on Heroku

hurray! Your web app is now available to use. As all the process runs, you can see in debug option and after some time you will get a notification as compiled successfully and your model is successfully deployed. And if you get any error then please check a debug application error and try to solve it or you can post it here in the comment section. I will try to resolve your error.

๐Ÿ‘‰ You can visit my deployed version of my first project at this Web App URL


Congratulations! Your first Machine learning project gets deployed successfully. Now you can share your model using Web App URL to your friends and mentors so they can use and suggest you. If you have any query deploying your model then you can post it in the comment section below, we will try to solve it.

Be safe, Keep Learning, Happy Learning
Thank You!.๐Ÿ˜Š


If you have any doubt or suggestions then, please let me know.

  1. Thanks for giving the all cmds to push code to GitHub๐Ÿ˜Š

Previous Post Next Post