Streamlit Elements You Should Know About in 2023

i think we can all agree that streamlit is an amazing framework it is so flexible and you can build many different types of web apps with it so in this video i want to share with you my nine most favorite streamlet components number one for me is the columns component the reason that i like that one is i like using space a bit more efficiently and with columns you can put things side by side rather than one after another on the screen yes one nice thing about the columns component is that you can decide their relative sizes so if you just want to have two columns you can type two when you're calling to when you're calling the columns component and then it will create two columns of the same size but if you need them to be a little bit different than each other you can say the first one will have the size ratio of one the second one two and the last one one so what it will do is to create first column uh half the size as the middle column and the last column also half the size as a middle column and we will see how that looks in a second also so and it's very easy to assign it to some variables so this is the first thing that i really enjoy when i'm using streamlit of course we will not see anything if we run this application right now it's just three columns so let me populate this with some of my other favorite components so that we can see how it looks the second one that i really enjoy is markdown and the reason i like using markdown is because i'm kind of used to writing a text in markdown format for example when i'm preparing some documentation on github uh that's why i kind of like creating headlines or lists etc when i in my application so it's very easy again you can call streamlightmarkdown and if you want to have a heading you can just type it with one hashtag or i don't really know what else it's called let's say you know we can say welcome to my to my app and i can change that later if i want to have more in there i can also say here is some info on the app all right so let me put this actually in the column first column so that we can see what that looks like yeah so as you can see this is my first column here will be my second column and the last column will also be as big as the first column next one i really like is a file uploader and the reason that i like this one is because sometimes you really need to communicate with the user and it is not enough to only have um you know some text input or some other types of input but you need something a bit more sophisticated and when you have people upload a file it can be anything for example if you're doing a data science project they can even upload a whole new data set so that's why i really like the file uploader component of streamlit let me put this in the second column in this one i will ask people to um do a photo upload upload a photo and you can easily also save it into a variable when a photo or a file is uploaded so i will just say uploaded photo for this one and let's see how that looks yeah as you can see you know we need a bit more space for this one that's why i made the column a little bit bigger but if you want to upload something you just say browse files and then automatically upload it next thing that i really like again i will put it in the second column is the camera input so instead of writing a text or uploading a photo you can also automatically grab photos from the webcam that you have which is in my opinion really useful sometimes especially if you are making a project a web app that has something to do with computer vision that could be a very fun application it could be a very fun way of making your web app a bit more interactive and again we need to tell people what to do you can say take a photo and again you can save the photo that is taken into a variable so i'll just call this camera photo let's see what that looks like of course you need to then give permission for the streaming application to access your camera and hey that's me hello and you can take a photo and then it will just show your photo here and then the photo will be saved into this variable that you defined next thing that i really like is when you have someone do something on your app if it's an interactive application then it is very nice to show them some feedback if something failed or not and stream it already has built-in components or boxes for to do this so for example if you want people to take a photo and then you want something to happen you know if that thing happens and you show a result people might not really understand that something happened in the background so it's always a good idea to give them a little bit of a feedback so one thing you can do again let's say it's about uploading a photo or taking a photo you can say you can use the success box and give them a message for example photo uploaded successfully and here now we can see that for shows me the photo uploaded successfully of course you can uh have a little condition here that says show this only if the photo is uploaded or a new photo is being taken but we'll do that in a second but for now as you can see it's nice to show something with a little green background that tells the user that everything went well and sometimes you might need to show people that something is working in the background or maybe like a little progress bar to show them hey we're working on this and we will get back to you in a second so maybe it's after uploading a photo or uploading a file maybe if it's too big it's taking a little bit of time so what you can do is to show this progress bar and that is also built in and streamless and i i really really like it one really easy way to do it let's say i put it in the second column again i'll call progress component from streamlet and at first it's going to be zero and then inside a for loop completed i can increase it a little bit so for example of course i give this a name um progress bar and then i will include increase this incrementally if you don't want it to happen really fast of course you can also add some sleeping time in here just need to call the time module and yeah this will work so it will basically look like it's slowly being uploaded so let's see how that looks oh i forgot to give sleep some um let's say 0.5 let's not wait too long oh turns out that this is taking a long 0.05 maybe i'll rerun this and yeah as you can see now we have a nice little smooth uh progress bar and once it's done it will give me a success message the next thing that i really like is how you can show some of the metrics on stream with applications they have a really nice little neat way of showing them for example if i want to add this to column three we'll just call metric i need to give it a label let's say i want to show the temperature and the value of it is 60 degrees celsius and let's say there's also a delta to it a change to it and that is three degrees celsius so let's see how nice that looks if we rerun this yeah as you can see it is very nice then we can show the delta in a neat way and if it's positive it shows as green if it's negative it shows us uh red so that's a nice way of showing things without you having to um format everything from scratch having this a little bit bigger having this a bit smaller have a different color or add a little icon here so that's quite neat another thing that i really enjoy is expanders in streamlight because it really saves from time a lot you don't if you have a lot of text you don't have to show the text in one place you can just divide it into expanders and people can click them if they want to read more about a certain topic so i'll just add that separately i will say width streamlit expender and the nice thing is it's very neatly organized that's what i like so you put the title of the expander here inside the expander component so you can say click to read more for example and then you can add whatever you want in there that's the nice thing uh what should i say hello here are more details on this topic that you were interested in you can add other things you can add lists or you can even add some of the images so we can put the image that we've just taken for example camera photo oops but that might give me an error but maybe we can say if uploaded photo is none then we show the camera photo so we'll see the user will do one thing else will show the other photo the uploaded photo this is assuming i haven't written that in but this is assuming that you know we have uh one photo or the other photo uploaded already so let's see how that looks all right click to read more and then it opens up and then we can read more and then we also have our nice little image here and the last thing that i really enjoy with streamlet is the session states and the callback function so that's why i wasn't sure if it was nine or ten if you call if you think of them as one thing it's nine but if it goes about separate things and it's ten basically session states and callback functions makes streamline applications much much much better much easier to use and opens up so many possibilities for us so for example if i want to keep track of if a photo has been uploaded or not what i can do is to have a photo session state basically so i'll say the photo not in streamlet session stage streamlight session state photo and at first this is how it's going to be initialized of course it's going to be let's say not done and what i can do is to have a callback function and inside this function i'm going to change the session state when a photo is either uploaded or a photo has been taken so i will say change photo state and then in here i'm going to change the state to done and to have this any effect have this have any effect i need to call on change so if something happens here i will call change for the state callback function here and here and then i can also say you know we've been showing the progress and the percentage completed everything everything so maybe i can say if not this streamlination state is done then do all of these things if not then don't do anything so let's see how that's going to look all right i'll rerun my application all right so right now nothing is happening it just says welcome to my app here's some info on the app whatever we can add whatever we want there if i upload something um let's say one of my photos it will break because i accidentally called strings here and not the function name sorry let's start this again as i said nothing is happening now i will just upload a photo here and then we see the progress bar and then it will show me a success message and we will also be able to see the temperature then we see this here and then we see the uploaded image so yeah that's how session states and callback functions help us and yeah this has been 9 or 10 depends on how you look at it of my favorite stream with components i hope this helped to give you some of the inspiration that i've got with streamless they have so many different types of components so many things you can do with them and it would really depend on the kind of project that you're working on but i've also found that the components themselves sometimes give me inspiration for a whole new project that you can make a interactive web application on so i hope you liked it if you have any questions about any of the components let me know or if you want to learn more about the components that i talked about here again let me know i can make a video separately on them in the future have a great day for now and i will see you in the next video [Music] [Music] you

Channel: Mısra Turp

Views: 74,925

Keywords: machine learning, data science, deep learning, artificial intelligence

Id: _Um12_OlGgw

Length: 14min 31sec (871 seconds)

Published: Mon Aug 22 2022