Democratizing Building ML Web App with Streamlit and Heroku

August 09, 2020 | 2 Minute Read

R ecently I integrated a TensorFlow-enabled ML model into the Streamlit web app in less than 40 lines of codes. Then I deploy the app on Heroku, a low-code platform for deploying, managing and scaling modern apps. In this post, I will show briefly how to do it. Streamlit is the easiest app framework that I have ever seen, best suited for data scientists and machine learning engineers. If you haven’t heard about it, I strongly recommend you to give a try. Streamlit, togehter with Heroku, help people like me who don’t have extensive DevOps experience, quickly share and productionize experimentation results.

Pre-train your model

First of all, you need to train your ML model and save it. Here I created a conditional variational autoencoder model in TensorFlow to generate synthetic MNIST style handwriting digits.

Create the Streamlit app

To create a web app using Streamlit is super easy. Here is the example where I created a simple app, allowing the users to pick a digit from 0 to 9 and the number of generated images to be shown.

Up to this point, you should be able to launch the app locally by running:

$ streamlit run app.py

It’s highly recommended that you make your application name as app.py.

Host the app on Heroku

Now it’s time to deploy the app so the public can access it. Let’s break down the process into a few steps as below.

• Sign up on Heroku
• Make a file named Procfile and paste these:

  web: sh setup.sh && streamlit run app.py
  

• Make a file named setup.sh and paste these:

  mkdir -p ~/.streamlit/
  echo "\
  [server]\n\
  headless = true\n\
  enableCORS=false\n\
  port = $PORT\n\
  " > ~/.streamlit/config.toml
  

• Make a file named requirements.txt where you put all the required python modules there.
• Git push the changes you just made.
• Download and install Heroku CLI .
• Now return to your terminal, type heroku login, which will open a browser for you to log in.
• Once you log in, you can create an app by heroku create <your-app-name>
• Almost there! One last thing is to push all files into heroku master repo by running commands:

git push heroku master

Patiently wait for a while to install all dependencies and package all of the artifacts. :boom:! You should be able to access the web by https://<your-app-name>.herokuapp.com!