Getting Started With Streamlit in Python

have you been looking to deploy a data science dashboard or a machine learning model to your organization or to your clients but you don't have the time to invest in learning about the web frameworks of flask and django if so then the streamlet library may be for you hey guys i'm andy and if you already knew that then welcome back to the channel streamlight was developed as an open source framework for developing and deploying data science dashboards and machine learning models all without needing to rely on a team of front-end developers or learning languages such as html css and javascript it was founded in 2018 by a team of ex google engineers who had extensive experience of developing and deploying machine learning models streamlight is built on top of python and it allows you to access many of the popular data science libraries such as pandas matplotlib seaborn portly and many others so over the next three videos we're going to see how we can develop a streamlit app to take in some data and then create some data visualizations as well as making the streamline app multi-page and interactive and we're going to do that with some geoscience data that focuses on earthquakes now this data is very simple compared to what i've previously discussed on this channel which focuses on well log data however the techniques and the ideas behind creating this app can be applied to any data set so i've kept it generic for this purpose so in today's video we're going to focus on how we can install streamlit and how we can get up and running by creating a single web page where we can load the data in from a file and then create a simple visualization and view some statistics from a data frame so let's get started so here i am in visual studio code and the first step that we're going to do is install streamlit so we do that just simply by calling pip or pip install streamlit and that will go out to pi pi and fetch the library so in this situation i already have it installed but you will see some progress as as the dependencies are being installed as well as a streamlit library so now that streamlet's been imported we can check that by going up here and typing import streamlet as st and this is just a way to abbreviate streamlight down to something that's more memorable and easier to call during the code so also saves typing a lot more characters so once we've got that we can then save this file and just to check everything's working we can then call upon streamlit run app dot pi so we'll run that and then streamlet kicks in in the background and then it opens up in your browser so i've opened up my chrome browser here and you can see that you're given a local url and a network url so if you're using safari for example there are some known issues with streamlet not quite working there so i've opened this in chrome and i can just type localhost and then 8501 and then we just get a blank window so if your streamlet is running you will know by one that you've got this black area you've got this text on the bottom saying made with streamlight and then over on the right you have this hamburger menu where you can access many of the different settings including re-run settings recording screencasts and some of the developer options down the bottom so we don't need to worry about this at the moment but we can return back to our visual studio code and i will just resize this window to make it easier to work with both at the same time and so now that we've got streamlight installed and running we can start adding some information to our streamlet app and the first thing we generally do is put in a title for our page and we can just do this by simply calling st dot title and then passing in some text so i will go with the traditional way of checking something is working by typing hello world and i can do command save or control command s or control s to save that file so we'll see over on the right that our source file has changed so we can either always rerun so when we save this file changes will be made in real time and it will be updated here in streamlit or we can just click on the rerun button and the changes will then appear on here so the data that we're going to be working with in this tutorial is going to be an earthquake data set and this is just a general geoscience data set just to explain the principles of streamlight and how to use it so we'll give this project a title we'll call it earthquake data explorer and if i do command s to save the file i can then just switch on this always rerun option so if i go in here and type in one two three four five and then save the file and we can see that the text and the streamlet app updates automatically when it is saved so let's remove that so now that i've got a title i want to explain what this app is about and we can do this through one of two ways we can use just plain text or we can use the markdown language if we're using text we can call upon st dot text and then we pass in some text so this is a web app to explore f earthquake data and then save that and we can see the text updates behind on the streamlet app so the alternative way is to use markdown and we can call st.markdown and then we can pass in some markdown language if you're not familiar with markdown language it's just a different way of writing so you can use symbols to create headings use it to make text bold and you can use it for a different variety of things and that's generally what's used within the readme files of a github repository for example so for this one if i type in uh this is double star markdown double star and save that we can then see that we've got text in the background which is different to st.text and we can see that the markdown is in bold it's not very obvious so let's make this a heading and we can do that by using the pound sign or the hashtag sign and i will set this as as a level two header so save that and then we can see that the text changes dramatically so let's just remove this text as we don't really want it within our app so the next step is to allow users to upload data and we're going to be uploading a csv file which contains the earthquake data and we can do that by providing a file uploader so let's call upon uploaded file as equal to st.file uploader and then we can pass in some text so upload uh your file here and if i save that we then get a simple drag and drop box here or we can browse for a file so once a user uploads a file it will be assigned to this variable and once we assign that file to that variable we can then start doing things to that file so for example if the user uploads a csv file we can then use pandas to read it so first off we need to import pandas as pd and then down here we can call upon pd.read csv and then we'll call upon uploaded file and we'll call this date df for our data frame so once that data has been assigned to a data frame we can then call upon st.right and then pass in df dot describe so we'll view the statistics of this file if i save this we then get a value error on our on our streamlight app saying that there's an invalid file path or buffer object so what we can do is we can then wrap this uh in an if statement so f uploaded file and then indent these so what it's going to do is going to check if this file has been uploaded and if it has then display this extra information if it hasn't then carry on as normal so if i save that that message goes away if you're following along you can find the data source in the github repository that is linked down below in the description so if i take over my data set and then drag it on to this uh dropbox here we can see that the data has been read and then we have our description of the data so we have our latitude longitude depths seismic stations magnitudes etc we have all of that information here so there we have a very basic app where we've created a title created some text and then uploaded some file to the server and then we've generated the statistics of that data so let's take this a little bit further and start exploring it a little bit more so now we've got the statistics we can just format this app a little bit better by calling upon st dot header data statistics and then what we're going to do is create a new header sd.header and we'll call upon a data header so we're going to display the first five rows of our data frame and again we can call upon st dot right and then pass in df dot head and then save that so even though i've not uploaded a file it still has this in memory and when we've got auto rerun enabled we can then see the new um new section of code that we've put in so data header we can now scroll along our data and check what each of the columns contains so that's all great looking at numbers but the whole idea behind streamlet is that we can create interactive dashboards or dashboards containing graphs and text and also these tables and this allows the users or our customers or anyone who's wanting to look at this data the ability to understand it without needing to worry about code so let's just create a simple graph using matplotlib to display some data and we can do that by calling input import matplotlib dot pi plot as plt and then down here what we need to do is create a figure and an axis and we will set that equal to plt.subplots and we'll set that to one by one so we're just creating a single subplot in this figure then we call upon x dot scatter and then we pass in our x axis which is going to be df and we'll set that to def and then we set our y axis which is going to be equal to df and we'll set that to the magnitude of the earthquake and then we can then set and then we can set the labels so this just helps understand what data is plotted on what access it's just basic data visualization 101 that we need to include some sort of label to understand what we are actually looking at so if i do ax dot set x label and we'll set this to depth and then ax dot set y label and we'll set that to magnitude and then to get the figure to show or normally in a code we would do plt dot show and then we would get a matplotlib plot back but here we need to call upon st dot pi plot and then pass in our figure object and then once we do that we can then save this file okay small typo if i go back to subplot and type in an s here so we're using plt.subplots instead of plt.subplot and then again we just need to change the these to depth and also this one to lowercase depth so there we go a little bit of live debugging and as always these messages can be helpful to identify where the issues are so once once we save this file we can then go back to our streamlet app and then we can see our graph here that we've created in matplot web so we've got our magnitude on the y-axis and our depth on the x-axis so right away we can see that the majority of earthquakes either are shallow so sub 300 so i believe this is meters in this specific data set uh so we've got a majority of earthquakes in this upper zone here so we have an increasing amount of earthquakes much deeper down around about the 500 to 700 meter mark and so we can tell a story right away that that most earthquakes in this data set are either shallow or quite deep and we can see that the more shallow they are they've got a much greater magnitude compared to those ones that are deeper down so with this figure it's a static figure so we can't change the x and the y axis unless we go back to the code and start to change it here or by adding in special drop downs and we'll see in part three where we will look at plotley to enhance this plot by allowing the user to choose what is displayed on the axis as well as choosing the colors and making it much more interactive so if you want to find a copy of this code then you can go to the github repository link down in the description and you can examine it in your own time and the code that is found in the repository will contain a few comments about what each of the lines are doing just to help you on your way so in the next episode we're going to see how we can turn this app from a single page app which where we don't have to scroll up and down to view all this data and we'll check and we will convert it into a multi-page app where we just have a menu and once we click on it we can go to each of these different sections in our app so there we have it we've seen how to create a simple app using streamlit making some simple calls to the streamlight library to display a panda's data frame and our matplotlib figure so in the next video we're going to see how we can take the single page app to our multi-page app so if you've enjoyed today's video then be sure to give it a thumbs up and if you want to see more content from this channel be sure to click that subscribe button and dig that notification bell so thanks for watching and until next time bye for now

Channel: Andy McDonald

Views: 22,713

Keywords: andy mcdonald, geoscience, streamlit python, how to use streamlit, streamlit tutorial, data science, machine learning, streamlit, build web app with python, build data apps, build data app with python, model deployment machine learning, simple web app using python, build a data science web app with streamlit and python, machine learning streamlit, machine learning web app, deploy machine learning, deploy data science, python web app, web app python, how to streamlit

Id: sogNluduBQQ

Length: 14min 48sec (888 seconds)

Published: Wed May 11 2022