Control the Flow: Streamlit

Can you build a web application without using JavaScript, HTML, and CSS?

If you don’t like to code JS, HTML, or CSS but, you also need to deploy and share your Python scripts, ML models, perfectly designed dashboards with others. You are in the right place. Although there is a bunch of options like Dash, Bokeh, we are going to cover up Streamlit in this post.

I had seen this web app framework, but I didn’t find an opportunity to try it until I started to code my web application with Flask. Since I’m a beginner in CSS and HTML, I’m still struggling with creating my web applications.

Fortunately, there are tools for building simple web applications which don’t require frontend experience. Here I’ll share my experience with Streamlit. We’ll see it in action with a simple simulation example I made in my last post.

Before further do, let’s take a quick look at why Streamlit is such an easy way to prototype your ML models or Python scripts. As they also mentioned on their landing page, Streamlit builds upon these principles,

1) You can write your scripts with Python and add Streamlit widgets to your script in the order you’d like to see. It’s pure Python.

2) You don’t need to write route, HTML, CSS, or Javascript. Simply choose from plenty of Streamlit’s widgets to assign variables, and use them as you wish.

3) I haven’t deployed anything yet but, they provide their cloud deployment option among other options like Heroku.

I don’t want to go into details, as you can check it out from the API reference.

Displaying Text

Displaying text is merely using text functions, as you can see from the below screenshots. To layout widgets side by side, you can use streamlit.column, then put your widgets inside a with loop. Notice that you can use markdown in Streamlit, which is pretty helpful to present your ideas or your documentation. See documentation.

Source: Author

Displaying Data

I think you grasped the idea of creating components. You can show your data by using convenient methods. Here I demonstrated just table and Pandas DataFrame but, you can also show JSON. See documentation.

Source: Author

Displaying Chart

One of the most important and comprehensive part of this tool is displaying charts. There is plenty option you can choose which best suits for you. Ridiculously easy for the presentation of your machine learning models, statistical analysis, data analysis, etc.

According to their landing page, it’s compatible with: Bokeh, Altair, PyTorch, OpenCV, DECK.GL, Pandas, Vega-Lite, Matplotlib, Numpy, Scikit-learn, TensorFlow, Plotly, and Keras.

You can see some of the usages yourself from the application gallery in action.

Source: Author

Displaying Widgets

Another important feature is widgets. With widgets you can customize graphs, take inputs from the users etc. For instance, you can change the parameters of a simulation. Below, I just put some of the widgets Streamlit provides but you can also build your own widgets. See documentation.

Source: Author

Demo

In my previous post, we examined Buffon’s needle with a mathematical approach. In this post, we’ll build the simulation with Python then turn this script into an interactive web application using Streamlit.

Before get started, make sure you’ve installed Streamlit.

pip install streamlit

I share the short version of the original script to keep things simple but, if you’d like to see the whole script, you can check the original version on my Github as well.

After we’ve installed Streamlit we can simply run a python file using,

streamlit run <filename>.py

Here we just run a blank python file. As you can see there is nothing to see yet since we haven’t added anything yet. It’s simply run a local webserver. You can change the color theme from the upper right menu button.

1) Let’s begin with adding a title and a couple of instructions about how things work.

Source: Author

2) Next, we added an expander to show the details about the simulation.

Source: Author

3) To be able to play with the simulation parameters, we added a sidebar with a form to be able to change the parameters. We defined a sidebar inside an st.form because every value we get from a widget inside an st.form will be sent to the script after the form is submitted. That is helpful because if you define a widget outside a form and if you change its value, this will cause rerun the script automatically.

Source: Author

4) While we can play with parameters, below we added graph configuration options to be capable of changing the background color, marker type, marker size, etc.

Source: Author

5) To complete the script we added the simulation metrics and the graph. Here we used st.session_state to store our calculation result in the session. Every time you rerun, your script will start to run top to bottom. To save your variables between each rerun, you can use st.session_state. For instance, we used st.session_state[“pi”] to store our calculation results in the session. See documentation.

  • You can see the full code from my Github.
  • You can see my previous post from here.

Conclusion

In conclusion, if you are working in a data-related field, it’s essential to have the ability to show your machine learning models or, undoubtedly, your data analysis in an impressive way. In addition, you can use the advantage of the web to exhibit your models with people who have various backgrounds.

  • No CSS, no JS, No HTML. You develop your web application without any frontend skills. Sure, it would be better to have these skills, but sometimes you opt to build and test your models faster, which makes you sacrifice flexibility.
  • Control the flow. We stored the simulation result in the session state, which is a dictionary to share your variables between each run. By using the session state, there is no need to rerun the simulation after changing the graph configuration. We merely separated the calculation from the plotting. You can define your session variables and build your logic to control your flow. Another instance might be preparing different kinds of plots for giving a speech or a class. Controlling which chart to show when can help you to capture the attention of your audience.

References

  1. https://streamlit.io
  2. https://docs.streamlit.io/en/stable/

#OR #Simulation #Python