Easy way to create web applications for your ML models

 

Whether to share your machine learning model with your friends, to show it to your client, or to showcase it in a presentation, you may want to consider doing that via a web application that is more user friendly than a Jupyter notebook. You might think that doing this would require you to learn new coding languages, but it's not actually the case!

Until 2020, there used to be no "easy" way to creating a fairly complex web app for a machine learning model without needing to write a backend, define routes, handle HTTP requests, connect a frontend, write HTML, CSS, JavaScript, etc.

However, now we can create a web application and deploy it using only Python and with minimal line of coding, and that is made possible by Streamlit, which is considered the fastest way to build and share data apps for free.

In this post, I'm going to present to you the principal steps that you can follow to create your first web app for machine learning, which are applied into this Kaggle kernel and Github repository.

Model Creation

It is obviously the first step in the process of building a web application for machine learning. We can build our machine learning model using any method we prefer, train it, tune it and save it in a format that makes it ready to use for predicting new data.

In the example presented in the notebook, I used a Multi-Layered Perceptron model on the King Country House Sales data from Kaggle. The model is saved in the TensorFlow format and it is about 1 Mb of size.

It is recommended to use a model of smaller size to make the web app faster and borderline deployable via the methods that I will present.

Once we have a machine learning model, we can then advance to building a web application.

Building a Web Application

Overview

There are many ways to create a web application and one of the most common ways to do so using python is with the library Flask which is is a Python web framework for building websites and apps – not necessarily with a data science focus. And it is the recommended method to use in case you want to build a highly customized solution from the ground up.

However, as I mentioned in the first paragraph, the solution presented in this post is recommended for showcasing purposes specially for non-technical target audience.

The simplest way of creating a web app using Streamlit is to create a Python file for each page in the app and a main Python file that imports from all the other pages and which is used to run the web app.

The Streamlit library can be installed on an environment that runs Python 2.6-2.8 (This might be subject to change in the future) via the following commands:

pip install streamlit, or for conda users:
conda install streamlit

In the example presented in the git repository, there are 3 files that are used to construct the web app using Streamlit:

• App_Data_EDA.py
• App_Predict_page.py 
• App_KCP.py

The App_Data_EDA.py file is used to construct the EDA page, which contains a brief introduction on the data used to train the machine learning model and graphics that helps better understanding the variables distribution and the relationship between them.

The App_predict_page.py file is used to construct the model prediction page, it contains a user-friendly form that can be filled using new data which will be then fed to the model to calculate a prediction. In this case the prediction is the price of a house in King County.

The App_KCP.py file is the main file which connects the different pages of the application and it is used to run the application via the cmd command streamlit run App_KCP.py 

The KCP web application can be used via this link.

Creating a single page

To build a page using Streamlit, we need to create a Python file which contains 3 main sections:

1. Import
2. Process
3. Display

In the first section, we need to import all the libraries and frameworks that we're going to use in this page. We can skip this step if we're not going to use any library.

The second section contains all the different processes that needs to be done, e.g. loading the data, pre-processing it, and loading the machine learning model. Then, the final section is dedicated to the configuration of the different parts to be displayed on the page, (Text, Lists, Buttons, Checkboxes, Sliders, etc.) and this is usually done by creating a function that will be then called in the main application file to construct and display the page.

In the KCP web app the Predict page is constructed as follows:

Import

Process

Display

As we can see in the image above, the Streamlit functions and methods do all the heavy work for us and we can create a checkbox, a slider, or print a markdown formatted text by calling simple methods such as; st.write, st.selectbox, and st.slider

The documentation on how to use these methods ais available on the Streamlit website.

Creating the main application file

Usually, the main application file contains relatively minimal lines of codes, because we only need to import the Streamlit library and the display function from all the other app pages, and then add elements to the sidebar and set the displaying conditions.

The main Python file for the KCP web app contains the following:

After completing the all the required pages of the application, we can run it locally using the streamlit run App_KCP.py command and test it.There is one cool feature in Streamlit that makes debugging the app much easier while testing it, and that is when we run a Streamlit app, it can show us a detailed error message that can be easily used to rectify the error in the code.

In this post, I talked about creating and running a Streamlit web app on a local machine, however there are easy ways to deploy the created apps online and for FREE. And that will be a topic of a future post.