Show your ML Project to the Internet in Minutes

Streamlit & Heroku Tutorial. Show off your ML model to the Internet, for free and without the whole web-dev hassle.

Patryk Oleniuk

Published in

Towards Data Science

4 min readDec 8, 2020

Most of ML projects don't make it out of localhost
— Albert Einstein*

And a lot of them should! So many hours are spent on ML projects at schools, bootcamps, and at home.

Like most of us, when creating ML projects, I usually experiment a lot. I create different visualisations and have a lot of python snippets in my notebooks. Let's leverage that code (aka copy, paste, adjust) and get something running fast & smoothly.

Here's a quick tutorial that should take less than an hour to get your app running publicly.

0. Create a GitHub repo from template

I assume you have a GitHub account. If not, here is a tutorial.

To speed things up, I created a dummy app as a template on my GitHub. It is based on this article [1]. There is a skeleton and a sample app provided there. Go to repo: streamlit-heroku-template , click Use this template and follow the steps.

You will fork my repo, and choose your own project name.

1. Save your ML model to a file

I created an ML model for a topic that interests me, as a toy example for this article, MNIST. I'm going to skip the whole ML magic here. I used this notebook [2] as a baseline. When I'm done, I saved the model to a file:

model.save("mlmodels/mnist_model1")

and add it to the repo.

git commit mlmodels/* -m "added ml model" 
git push

You could add any files to your app in the same way, e.g. images or some test data.

2. Create a Streamlit App

This step requires some creativity. Think how to keep it simple, yet let the users interact with your model. Take a look at Streamlit tutorial [3] and component library. Here are some components I found useful :

st.text_input (e.g. for NLP applications)
drawable-canvas (custom component for letting users draw and get a result as a numpy array)
st.image for showing images
st.file_uploader for letting the users upload file

Also, if you haven’t done so already, pip install streamlit
Write your code, and the run in locally using

streamlit run app/streamlit_app.py

My tips: Use the code snippets from your ML experimentation phase. For the first deployment, be as simple as possible. If it works, build on the top of that. For the purpose of the template, I created this simple MNIST data explorer and model validator.

Template Streamlit app. My MNIST model isn't perfect, ha?

Here's the code. This took less than 20 lines, ❤ Streamlit!

Code for the sample Streamlit app.

When you're happy with the result, commit/push your changes, and show it to the World!

3. Deploy the app to the Internet

If you don’t have a Heroku account, create one here for free.

In this project template, apart from the mlmodels and app folders, there are four additional files, specifically for the purpose of Heroku deployment:

setup.sh
Some initial setup, like TCP/IP port, or CORS. You can just keep it as is.
Procfile
Launches setup.sh and then the Streamlit app. You can just keep it as is.
runtime.txt
This is here solely to specify python version. You can just keep it as is unless you need a different python version (current is set to 3.8.6).
requirements.txt
A list of python imports needed to run the code. You should add yours, or use automated tools like pipreqs to generate one for you.

Within the console, click Create New App, and name your app.
Beware! This is also gonna be included in the host name
https://your-app-name.herokuapp.com

Choosing your application name on Heroku.

This step requires you to allow Heroku to access your GitHub Account.
Open your Heroku app, and under Deployment method, connect your GitHub account. Then, select your desired repo to deploy.

Heroku <-> GitHub integration. Unlike above, you should see your own GitHub repo, and own projects.

Et Voilla! The app should be building momentarily. You can observe the build, and see what's happening under Activity tab. If all goes well, it will be up and running in a few minutes under
https://your-app-name.herokuapp.com

Moreover, all this is for free, thanks to Heroku's free tier! Obviously, with limited resources, and limited up-time. This is why it takes a while to run, and if it is unused for a while, the app will go to sleep mode, and it'll take few more seconds to wake up.