ML app with Streamlit in 9 super short steps

Ready to share your ML work with a fast and elegant ML app?

If you are a data science/machine learning engineer developing projects inside a Jupyter notebook and uploading them to Github, you’ve probably noticed the world rarely finds them. And you’ve put too much into them to let them go unnoticed, haven’t you?

What if I told you there was a better way to:

👉🏽 Showcase your projects to larger audiences,

👉🏽 Put your work in front of more people’s eyes,

and all that with minimal changes to our existing python scripts and Jupyter notebooks?

I know you love Jupyter notebooks, but let’s face it: if you want your work to have a positive impact on people, both tech-savvy and not so savvy, notebooks are not the best way to do it. Streamlit is ❤️.

What is Streamlit?

Streamlit is an open-source Python library that lets you transform any python script into an interactive web app, with a few lines of code.

On top of that, Streamlit offers a free hosting service, called Streamlit Cloud, where you can deploy your apps from Github with just a few clicks.

In the next section, I will show you how I transformed this Jupyter notebook

into this live webapp.

Create and deploy a web app in 9 super-short steps

A few months ago I published a hands-on tutorial on adversarial examples. I even had the honor to share this work at the Developer Week conference, in front of a mixed audience of ML specialists and non-specialists.

Adversarial examples are malicious images, designed by an attacker, with the intention to confuse an image recognition ML model. Their existence represents a security threat and hampers the applicability of machine learning models in mission-critical jobs, like self-driving cars.

If you want to know more I recommend you read my article here.

To showcase my work I created this Jupyter notebook.

As most Jupyter notebooks, it consists of 3 steps:

1. Read input parameters

These are usually defined at the beginning of your notebook.

2. Processing steps

These are function calls that, given the inputs, compute intermediate outputs, as well as the final outputs. For example, in my case, there are 3 functions to:

• load the image from the URL into memory.
• load the inception-v3 model from PyTorch hub. This is the model I am trying to fool with my adversarial examples.
• implement the FGSM method.

3. Print out results.

In my case, I plot the potential adversarial examples generated by the FGSM method above.

All in all, this is what the entire python code, including all imports, looks like:

I believe that 99.9% of Jupyter notebooks can be structured like this, so the refactorings I will go through are applicable to your case.

These are the 9 steps I followed:

Step 1. Import Streamlit

Add the Streamlit package to your Python environment

and import it to your python script.

Step 2. Create a widget for each input parameter

These are the widgets I used:

• st.text_input widget for the URL
• st.slider for the floating parameters epsilon and alpha
• st.number_input for the integer parameter n_steps

As I wanted to have the FGSM parameters widgets on a left-hand sidebar, I created them as st.sidebar.sliders and st.sidebar.number_input. 

Step 3. Cache processing functions

To make your web app much faster and more responsive, you should decorate your processing functions with @st.cache

This way, when the user updates a parameter through a widget, Streamlit will only re-execute the functions whose inputs have changed, and leave the rest untouched.

Step 4. Plot results

Plotting images is as easy as calling st.image:

Step 5. Final touches

You can easily add text elements like

• main title

• markdown formated text to the frontend, to help the user navigate your app

• or a sidebar title where the parameter widgets are

You can check all available text elements, including LaTeX and code blocks, in the Streamlit documentation.

To see the web app on your local machine you run:

Now it is time to deploy your app, so the whole world can use it.

Step 6. Generate a requirements.txt file

You need to have a file in your GitHub repo with the list of Python dependencies in your code. These are the packages that Streamlit Cloud will need to deploy your web app.

You can either generate the good-old requirements.txt file, as follows:

Or, if you use a tool like Poetry to package your Python code (like I do), you can use the existingpyproject.toml file.

Step 7. Push to Github

You need to have the code committed in a public GitHub repository, like this.

Hence, add all relevant files to git and push the code to the remote branch:

Step 8. Sign up for Streamlit Cloud

This is a one-time thing.

Sign up to Streamlit Cloud here and choose the FREE plan.

With this plan, you can deploy an unlimited number of public apps. Amazing, isn’t it?

Step 9. Deploy your app

Go to your Streamlit Cloud space, and click on the New app button

Then, you paste the GitHub URL of the python file with the Streamlit app and click Deploy!.

You wait a couple of minutes, and voila!

Now it is your turn!

Sharing your work with more people is beneficial to everyone, especially you. And with Streamlit you can accomplish this with minimum effort.

I am looking forward to seeing what you can build!

Have a great day 🧡❤️💙

Let’s connect

If you want to learn more about real-world Data Science and Machine Learning subscribe to my newsletter, and connect on Twitter and LinkedIn 👇🏽👇🏽👇🏽