
Data (Analytics/ML) to App – with zero pain
We all want to showcase our data analytics skills. We all want to wrap around that cool machine learning model in a shiny package and present it to the wide world – as an App.
How to free yourself from that two-dimensional world of Jupyter notebook and offer your Data Science model/pipeline to the outside world?
Streamlit makes it happen. Painlessly.
It makes the transition from data (analytics or Machine Learning) to a shiny app with minimal code and almost no requirement of learning and deploying web service frameworks (like Flask or Django).
Data scientists can test and showcase their model or statistical analyses on a live web-server as they fiddle with the data and algorithms.
To know more about the history and origin of this great Python package, see these series of videos from their CEO and founder. I am posting just the first video link, you should watch all four videos in this series.
We all want to wrap around that cool machine learning model in a shiny package and present it to the wide world – as an App.
In this article, I want to cover some essential basics of the framework to get you started on your journey to create data-driven apps, in no time!
The core workflow
Install
You install Streamlit, of course. It is being updated at a rapid pace. Hence, the — U
is recommended.
pip install -U streamlit
Creating the first app
They have a Hello World kind of app for you to try. But why bother with that when you can code? Why not create your first app with your own data/math skills?
We will create a simple web-app to check if a given number is prime or not.
Open up your favorite IDE/text editor and type in…

We can save the script as is_prime.py
. Then, just go the terminal (command prompt) and run this app with,
streamlit run is_prime.py
You will see a web-server started automatically serving your app! In the terminal, you will see something like this,

The port number may be different depending on what other local servers are running and how they are using specific ports.
Data scientists can test and showcase their model or statistical analyses on a live web-server as they fiddle with the data and algorithms.
Seeing and interacting with your first app
You can open your browser and head to localhost:8502
. You will see something cool, like this,

A simple little math app complete with header and HTML formatted text and all – not bad!
How did we generate this app?
So, where did they come from? From your Python script, of course. Let us revisit the code piece by piece,

So that st.title()
function created the header (basically an H1 HTML tag).
After that, we wrote a piece of simple Markdown within those """..."""
tags. You can put any markdown inside those triple quotes and they will render beautifully. They follow, of course, the same markdown syntax that you use in your Jupyter notebook markdown cells or in the Readme.md
file for your Github repo.
The next function st.header()
is also another markdown. We put a *...*
syntax to stylize it (italic).
The next portion is what creates the textbox which accepts the user input (number).

The function st.number_input()
essentially creates an HTML form/input box with an expectation of a numerical input type. By default, it accepts a floating-point number, and therefore, in the next line, we convert it to a int
type (just because we are checking primality of the input and they should be integers).
The next function st.write()
is a very powerful and general-purpose method to render a wide variety of objects – starting from simple text to Pandas DataFrame and Matplotlib visualizations. Here, we are just writing a simple text value by passing in an argument similar to what we would pass on to a Python print()
function.
So far, this much code will render like this (without any actual math),

So, a user can just type in a number and hit ENTER. Your code will process that input.
Next, in your code, you have a simple Python function which checks whether the input number is prime or not. We will not talk about that function but let us see what is happening after that.

So, we are calling that function and storing the returned values in two variables – decision
and divisor
. Then, we are writing two st.write()
functions with a if-else
clause – the first one simply indicating that the number is prime and the second one telling that the number is a non-prime along with showing the smallest divisor. Again, note how we simply pass a Python print-
like string to the second st.write()
function.
Test your web-app with various inputs and see the results. For example, if I put 35, then it shows,

If I put 251, then it shows,

I hope you got a sense of the code-flow that we have to write to build simple mathematical analysis apps with Streamlit.
But we are data scientists, we strive for more than a mathematical problem-solving. Let’s get on to that!
Components to build Machine Learning app
Components
Before we can build a meaningful machine learning app, we need to know how to put data objects/components onto our app with Streamlit. We show how easy it is to render some of the most data components on a Streamlit-powered app.
The Python script is located here. You can download it and run it. I won’t make the article monotonous by repeating the code but will just show the results on the app.
Basic markdown to create a nicely-formatted description
Simple markdown syntax produced this description with multiple levels of headers, hyperlinks, and bulleted lists.

Also, this,

Displaying images
The default markdown image tag is not suitable for controlling the image size. So, we should use st.image()
method to display images.
Here is a screenshot from the Streamlit website. The image is hosted on my Github repo and we just pass on the URL.

LaTeX rendering
The default markdown already handles LaTeX. We can separately use st.latex()
to render LaTeX content.

Code
We can use st.code()
to render code blocks nicely with optional syntax highlighting.


Native Python objects
Python objects like lists and dictionaries are rendered in a pretty and visually appealing manner. We use the versatile st.write()
method for all such rendering.




Numpy arrays
Numpy arrays (one- and two-dimensional) are also rendered nicely by the st.write()
method, although for long arrays the vertical rendering can become unwieldy.



Pandas DataFrame
We can render a Pandas DataFrame either by using st.write()
or st.dataframe()
methods.

Every time the page refreshes, the code generates new random data, and the table below regenerates as well.

Applying a filter on the DataFrame
We filter the DataFrame by selecting only those rows where A1
> 0 and A3
> 3. Note that due to the random nature of the DataFrame generation, there is no guarantee that we will get a non-empty DataFrame every time we re-run the code.

Write the DataFrame to a file
We can easily ask the user a filename and write the filtered data to that file. Of course, we have to write a bit of code (e.g. user input validity, filename checking logic, etc.) behind the scene, but the resulting app interface is clean and refreshing.

Reading a data file from the web
Reading data from a remotely hosted file, formatting the file a bit, and rendering in a DataFrame is as easy as the brief code below,

A simple bar chart using Pandas built-in ‘plot’ module
We can work on the dataset that we just imported from the web, and call built-in plotting methods.

This results in a Matplotlib-powered plot as expected (similar to a Jupyter notebook).

Line chart with Altair library
Streamlit supports many advanced and highly interactive plotting libraries other than Matplotlib. One of them is Altair, which is built atop Vega (which, in turn, is built atop the ubiquitous and all-powerful D3.js).
We take some of the columns from the DataFrame and create a line chart. You can zoom and pan the chart and even see the HTML code behind it. See the video below.
Streamlit supports many advanced and highly interactive plotting libraries other than Matplotlib.
Widget magic
We can create interactivity with Streamlit very easily. This is one of its primary attractions!
Let’s say we have a function defined as follows,

We can create a slider with just one line of code,

We can move the slider left and right and the function is evaluated dynamically and the value can be displayed live. Just like a web-app is expected to behave.
A Matplotlib graph of the function
The code below graphs the function above using plain vanilla Matplotlib
and a single Streamlit
call st.pyplot()
for rendering.
This chart, unlike the Altair chart above, is not a dynamic chart. However, note that the Matplotlib
code contains a fair bit of sophistication (even a LaTeX formatted string in the title). All of that is flawlessly handled by the st.pyplot()
function.


An interactive linear regression problem
Finally, we show, how to generate a linear regression dataset with a tunable level of noise using simple widgets from Streamlit.
Interactive data generation
In the previous two sections, we introduced the slider widget and the pyplot. In this section, we combine them in a dynamic fashion.

Below, the sliders can be adjusted to tune the level of the noise. Every time you move the sliders, you essentially generate a new linear regression problem (with the same features but with slightly different observed data).
The data vs. feature plot, which is dynamically updated, is shown below to illustrate this point.
Move the "Noise std. dev" slider all the way from the left end to right end to observe the impact on the observed data. Do you see the observed data becoming noisier as you move the slider towards right?
Fitting the model – interactively!
Next, we fit a LinearRegression()
model from the famous scikit-learn
package with our data, and show the model coefficients and the _R_² metric.
Note, how they change slightly with each iteration of a new problem generation. Note that we chose a1 = 2.5 and b1= 5 and the estimates should come close to these numbers.
The noise mean value primarily impacts the bias term whereas noise std. dev primarily impacts the linear coefficient. You will also notice that the _R_² score generally becomes lower as the noise std. dev increases i.e. the linear model has a hard time explaining the variance in the observed data (if the spread of the noise is high).
All these linear regression stuff is nothing new. But note how easy the modeling exercise seems with a live web-app to fit numerous models (corresponding to dynamically generated datasets) just by operating a couple of sliders!
Summary
That’s it for now. However, I am sure you got the idea that the possibilities are endless with this library.
Here is their official API reference guide and here are more tutorials.
You can create really complex data analytics and machine learning pipeline in the backend (using Jupyter Notebook or a complex web of Python modules, whatever you fancy) and render all the output results and visualizations in a simple, live web-app with minimal coding overhead.
Next, I plan to build Streamlit-powered apps with more intricate data processing and visualization at the backend and share with you here on my Medium page.
Stay tuned.
…how easy the modeling exercise seems with a live web-app to fit numerous models (corresponding to dynamically generated datasets) just by operating a couple of sliders!
Also, you can check the author’s GitHub repositories for code, ideas, and resources in machine learning and data science. If you are, like me, passionate about AI/machine learning/data science, please feel free to add me on LinkedIn or follow me on Twitter.
Tirthajyoti Sarkar – Sr. Principal Engineer – Semiconductor, AI, Machine Learning – ON…