Deploying your ML model using Streamlit and Ngrok

A complete guide on how to create a model and deploy it using Streamlit

Aayush Mishra
Towards Data Science

--

Photo by Florian Olivo on Unsplash

If you are someone who has been working with data, chances are you have made a machine learning model at least once. We have all come across various machine learning models every day. Every model is different and is used for different purposes. We have various problems for which we are required to use different algorithms in order to make a good model. But what to do after we have our model? Most people make models, but they ignore the fact that without deploying the model it’s not of much use. In this blog, we will walk through the complete process of creating a model and deploying it on to the web.

Let’s start off by importing our data set. We will be using a data set taken from Kaggle which contains the different columns such as student’s GRE scores, TOEFL scores, their CGPA and so on. We will use this data to predict whether a student would be able to get into a graduate program or not. Let me break the whole process down:

  • We will start by creating a model, our data has continuous values which means Linear regression would be good enough to help us out.
  • Once we have our model, we will be storing it in a ‘.pkl’ or pickle file.
  • We will use this pickle file in our new jupyter notebook in which we will be using streamlit and ngrok to deploy our model on to the web.

Let’s first start off by importing our data and creating our model.

In the above code, we are just importing the libraries that we will be using to read and visualize our data set and then we are checking the top 5 rows to see what exactly our data looks like.

This is what our data looks like, we have GRE and TOEFL scores as well as the CGPA of the student and other columns like LOR and whether or not a student has written a research paper. We will now do some data pre-processing and visualize our data.

As you can see we have no null values in our data. Let’s just assume we got lucky because getting data with no null values is just a miracle. Let’s see what the describe method did.

So now that we know these important details. We will be taking the look at some of the plots and try and to gain insights from these plots.

This plot shows us the distribution of the number of entries for each university rating in the University Ratings column. As we can see most of the universities in this column have a rating of 3. The least are the Universities with rating 1 and moderate amount of universities with rating 5 which is the highest rating a university has in our data.

The above plot shows us how many people in our data have written a research paper. Research papers play a key role in determining whether a person would be able to get into a graduate program or not and as we can see there are many people in our data who have written research papers. Let’s see what we can find by visualizing the scores of students along with the output column i.e. the chance of getting admitted to a program.

This plot shows us the distribution of GRE scores versus the chances of getting admitted into a particular program. Something that we can observe is that these points are somewhat linearly distributed. The Hexagons that are darker, they have more values associated to that value and vice versa. Let’s compare TOEFL scores too.

And we can see a similar trend in this as well. In the above plot, we have a good amount of people with TOEFL scores above 100. We will compare the CGPA column as well before we go on to the modeling part.

As we can see, the CGPA column too has a similar distribution as the other columns. The purpose of visualizing these columns was to select the best column for making our model. We first processed our data then visualized it and after all this, we have the columns that we will use to make our model. Let’s get started with the modeling.

In the above code snippet, we are importing the libraries that would help us in making our model. We then select our columns and we know our output column as well. We will then do a split that would make two sets- a training set and a testing set. The next step is to make our model using Linear Regression.

That’s how we create our model. We are using Linear Regression from Sci-Kit learn which helps to make our model. We fit our training data to this model and then call predict method to make our predictions by giving the model the testing data. The main reason why we split our data is simple and can be linked to a simple real world scenario. Let’s say you have a test, if we give you all the test questions and you just practice those questions, you can just mug everything up and score well on the actual test. But there is no actual learning happening here and you are just mugging up things. The same goes for the model. We train it on our training data and then test how good or bad it performs using the testing data.

The metric that we are using is MSE or Mean squared error. You can use this link in order to know the math behind how it works. After evaluating, we know that model is pretty decent with MSE of 0.005. Let’s test this model with some inputs and then we will put this model in a ‘.pkl’ file so that we can use it later for deployment.

So we checked the model with some user given input and the deviation from the actual value was very less which means we are on the right track. We then imported pickle that helps us in storing our model to use for deploying. We just made our own Machine Learning Model! Now it’s time to deploy it.

In order to deploy our model, we will be using Streamlit and Ngrok. Streamlit is a python library that helps us create awesome web apps which are easy to build. It’s also open source! I suggest you go through the streamlit documents in order to get a better understanding of the working of the whole framework. Let’s get started by loading our model and importing our libraries.

Now that we have our libraries to work with and our model loaded, we can start working on what our web page would look like.

So we have many features provided by Streamlit that we can use to design our web page. In the above code snippet, we use the streamlit features to create our different features like sidebars, creating the header, and many more things. Once we are done with designing our page, we can use our loaded model in order to make predictions using the user input which they give with help of a text box or maybe some slider. All of this is provided to us by Streamlit so we need not have any knowledge of web development in general but it’s always a plus to have some knowledge in web development.

Here we are creating sliders, that would help a user in giving the input to the user. We create sliders for all our input values and we will be using these values as the inputs that we give to our model. We are then creating a button, which upon being clicked, gives us our result. Finally, we print our results for the user to view.

We now have our whole web page setup and it’s also able to give us outputs based on the inputs that we are giving to our model. Now the final step in our deployment is using Ngrok. But what does it do? In the simplest terms, it takes our local development server and puts it on the internet for us. You can learn more about Ngrok here. Let’s use Ngrok to deploy our model on the internet.

With this piece of code, we are creating the server and running our model on the internet. It will be hosted on one of the domains that are subparts of Ngrok and hence we do not need any public domain or IP. Once we do this, we can go to the generated URL and we will be able to view our web app.

With this, we come to an end to the whole process of creating a machine learning model and deploying it on the web. The complete code will be linked down for you to view. This was it for this one. So go ahead build some models and deploy them and don’t forget to have some fun while you do that!

Link to the model- https://github.com/AM1CODES/PythonWeek-GraduateAdmission

Connect with me here- https://www.linkedin.com/in/aayushmishra1512/

--

--