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-v3model 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_inputwidget for the URL
st.sliderfor the floating parameters
st.number_inputfor the integer parameter
As I wanted to have the FGSM parameters widgets on a left-hand sidebar, I created them as
Step 3. Cache processing functions
To make your web app much faster and more responsive, you should decorate your processing functions with
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
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 existing
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 🧡❤️💙
If you want to learn more about real-world Data Science and Machine Learning subscribe to my newsletter, and connect on Twitter and LinkedIn 👇🏽👇🏽👇🏽