How to Control the Layout in Streamlit in 20 Minutes! (Streamlit Tutorials 02)

[Music] hello and welcome back to this series on streamlit and python kind of zero to hero in the last video we talked a lot about kind of the introduction to streamlets some of the ways you can make very basic apps with some really robust features really quickly all in streamlit and python i showed you some of the main ways to take in user input and manipulate that in a python script to have an app that can do specific things with buttons checklists radio buttons etc in this video we're going to be talking about two main things and that is how to structure a layout in streamlet and how to add images to your to your app that's going to be our challenge for this video now like in the last video we're going to start with import streamlet as st and if you notice on the right i already have opened up the app and have it running if you don't remember how to do that check out the last video essentially you're going to open up your command prompt in this directory and just execute the command stream streamlet run and then your app name in this case the app name is one underscore o2 underscore layout.pi that's our app name so now that we have an app let's go ahead and give this app a title we're going to call this st.title we're going to say a lesson 01.02 and we're going to call this intro to layouts and images that's going to be our title and once we save that script we see that we now have our title over here on the right hand screen what we're going to be doing in this video is simply talking about how to make an app that is a little bit more robust and dynamic as you can imagine if we look at our last app that we ran in the last video we had a lot of different features that were all kind of cascading down in a single column that's not a very nice looking app that's a little clunky and can be kind of difficult for users to navigate for this reason it's sometimes very useful to have the data and the functions all kind of in different columns or even in a sidebar so what i'm going to show you in this video first is how to essentially get your uh your components of your app into different places there's a few different ways that we can do this in streamlit we're going to be going over all of them today and that's going to be the sidebar function the uh and and the columns that's going to allow us to control the the layout pretty dynamically and then there's a third way that we can actually control the layout and that's going to be with what we call the expander the expander and the columns came out and i believe it was streamlit 0.64 so if you're watching this video you should already have these features ready and handy so let's go ahead and add in a sidebar first our sidebar is going to appear over here on the left-hand column side and it's going to be a different color it's going to allow our users to input the data that they want to see manipulated and the main part of the app we're going to see what that looks like right now by doing st dot sidebar and we're going to call this let's call this uh this is let's call this options i'm going to call it options that way the user can kind of input some options and i have an error the reason why i have this error is because i have not said anything about the sidebar this is important the sidebar functions the exact same way as the main app does so you can't just say st.sidebar you have to specify one what you want to see populated in the sidebar in this case i'm going to have a header on that sidebar and if i save it you'll notice that now i have a sidebar automatically pop up on the left hand side within this sidebar you can keep on calling it and it's going to allow you to have all the same stuff that your main app can have so you can have buttons you can have check boxes you can have forms which we're going to get to and i think the next video and you can even have text written out you can do everything that you can do over here it's just going to populate in the sidebar and every time that you need to write something on the sidebar and keep in mind that it works sequentially so the higher up in the code the higher up it's going to appear each time you write something it needs to it'll appear automatically in the sidebar so long as you have st dot sidebar so let's go ahead and maybe give the user in this sidebar the ability to input some textual data and this app our goal is to create a very simple app that will take in text like this in this case it's alice in wonderland and what it's going to do is it's going to take it in and it's going to clean up the data it's going to remove the line breaks and it's going to get rid of these bad these bad what do you call them quotation marks we're going to try to standardize everything so that all the quotation marks are the exact same so that it can be more easily processed and more consistent so we can do some text analysis on it that's the goal of this app very simple app that's all it's going to do so let's go ahead and give the user the ability to input some textual data so we're going to say st.sidebar dot text area and we're going to say paste text here and we're going to save that and again that's going to now allow the user to input some textual data but we need to create an object so we're going to call this object our text what that's going to allow us to do now when we run it is that when the user has some data here it's going to allow us to use that data as an object in this case a string so that when they input something we can say st.right and you're going to notice that this will appear now in the main part of the app so we can now say hello my name is william fantastic we can hit control enter and now that text appears over here so that's going to be how we can use stuff from the from the sidebar to manipulate and do things in the main part of the app that's not what we want though so what we want to do is we want to have a button that can be executed so that when a button is executed it will do something over here so let's create a button now we're going to call this button one this is going to be st.sidebar because we want this button to be in the sidebar dot button and we're going to have this be [Music] clean text so this button will execute and allow us to do something in the main part of the app and we now have our button here it's just a dummy button because we haven't told it to do anything when it's actually clicked so let's go ahead now and let's try to take that information from there and do something with it in the main body of the text over here so we're going to say if button 1 if that's run then let's do st.right just for right now we're going to change this in a second we're going to do st.right text so now let's rerun that and now when i hit clean text now only upon that condition right there being met will it actually now populate over there and and show us the text however when we start working with data like this we're going to have some problems so let's copy and paste in the first let's copy and paste just the first paragraph from this alice in wonderland here so when i execute this you now see some errors pop up why are these ears popping up not really errors but weird syntax highlighting well what's happening is is if you notice you look really closely you'll notice that in this alice in wonderland text this is a common problem in text analysis we have some odd-looking characters to represent the quotation mark at least at the start of a quotation mark the end quotation mark is the standard single line down quotation mark this one however is at an angle so what we want to do is we want to have this app take in that original data and clean it up a little bit it's going to remove the line breaks and it's going to allow the user to kind of see the output both in its original state and in a cleaned state so in order to do that let's write a little simple function up here and we're going to call this function we're going to call it clean text and it's going to take one argument it's going to take the the text that we want to have cleaned and we're going to simply just me a very simple function it's going to say text is equal to text dot replace replace and we're going to replace that quotation mark which is giving us that problem and we're going to say just replace it with nothing and then we're going to also replace any instance of a dash and a line break with nothing because that will be an instance where the word that ends on that line is going to continue on in the next line and then we're going to have another thing where we end or remove all line breaks we separate them out with just a simple space and then finally we're going to do dot strip so that there's no leading or trailing white spaces and at the end of this we're going to return text now we're going to do when button 1 is triggered is we're going to say new text or sorry clean text is going to be equal let's call this clean is going to be equal to clean text and we're going to pass in text and what we can do is we can now say st.right clean so it's going to now allow us to run this code and it's going to give us oh looks like i have not spelt replace correctly i'm sure some of you already noticed that if you're watching this video and now when we rerun it it should work just fine i now have the the original text up above and i've got the cleaned text down below however from an app point of view from an aesthetics point of view this looks clunky it doesn't look good and the reason why it doesn't look good is because it's it's kind of separated out imagine if i didn't want to just do a single paragraph rather i wanted to do something like three paragraphs it's going to become more and more difficult to read these side by side as you might already be imagining so what can we do well we can do some fun things to clean it up and make it look a little nicer with another feature of streamlit and these are called columns this is another way of controlling the layout of your app you can have as many columns as you like and really you should stick to maybe two or three so let's go ahead and add some columns into our into our main body of the app so what we're going to say if button one is clicked we're gonna have column one and column two and that's gonna be equal to st dot beta columns because this is i think still in beta as of the recording of this video and this is gonna take one argument and this is going to be the number of columns that we wanted to have let's go ahead and just save that right now and hit rerun now when we run this nothing's going to happen and the reason why nothing is happening is because we haven't done anything to those columns those columns appear but they aren't being populated to populate them let's go ahead and do some things let's say column one dot let's call it say header this is going to be the original text and then we're going to say instead of st right we're going to say column 1.write and now let me scroll down just a little bit so you can see this better and now what we can do is we can say column two dot header and i say cleaned text and we can say column two dot write clean let's refresh and let's execute this now what you can see here is a way in which we can kind of control the layout of our main app not only can we have a sidebar where the user can input data but we can manipulate how that data is displayed in the output and if you notice our output now is a little bit in my opinion it looks nicer it's easier to kind of see what's happening these two texts are now side by side if i wanted to copy and paste three paragraphs let's go ahead and do that we can now see all three paragraphs kind of side by side we've uh eliminated the the double uh line breaks so that the paragraphs aren't as easy to distinguish we can do some things up here in our function to make that better we can um do a special character for double line breaks to maintain that in fact let's go ahead and do that just just for fun so we can kind of learn something here if i wanted to preserve in this output of the cleaned text the double line break i can do a few tricks there's a couple different ways to do it here's an easy one though before i remove all line breaks i'm going to have another thing that's going to replace a double line break and i'm going to pick a sequence of characters that i know never appears anywhere in this entire thing and and astrogastric and and now when i do this let's see what happens i've got this occurring why do i have that occurring why is that useful well what i can do is i can use that that weird occurrence of of characters and i can say now uh dot replace let's do this one more time dot replace now i can eliminate instances of that with a double line break it's a it's a quick and easy way to kind of preserve a a component that you want to have eliminated that occurs once but preserve it when it happens twice this is commonly done with line breaks so let me keep those kind of paragraph segmentations you could do this with the more html friendly p tag the open and close of a p tag but this this works just fine so that allows me to actually have that kind of on the page now so what are some other things i can do well you might be looking at this and saying okay this is great but what if i copied and pasted in an entire text wouldn't that get really clunky and the answer is yes it would get very clunky in this app this is where another really cool feature comes in that i think was released in around .65 or 0.64 or so and that's another way of controlling the layout and those of you who looked at my carol engine exegesis manuscripts app may have already seen this feature it's an expander tab so let's take a look at that real fast and see how that works so with the expander tag what i can do is i can say um that i want to have kind of everything that that's populating over here i don't want to see it unless somebody opts to to show it so i don't want column one or column two to really be displayed unless the user specifically wants somebody to be displayed so what i can do is i can wrap these in a uh an expander tab so we can say column one expander is going to be equal to we're going to say st dot beta expander and we can just call this a expand original and yeah so what we can do now is wrap that so we can say with so with the uh column one expander so when when somebody opts to open it it's going to allow us to see that original text let's run this again there we are so now once we actually get the architecture correctly let's kind of break down what happened there because i made a couple mistakes in my code and you saw me kind of quickly correct it so what we have to do is we need to wrap everything inside of an expander so our column one is the main arc the main think of it as the main layout feature now column one is kind of this ephemeral thing that exists in the layout that we don't see column one is going to contain within it a column one underscore expander which is this feature right here that a user can expand uh or contract should uh however they wish the the next thing that we have to do is we have to wrap some information within that expander so let's go ahead and just get rid of that real fast so it's easier to kind of understand what's happening we're going to rerun it so what they're able to do is they're able to see if that is occurring so with that uh clicked it's going to show that in other words when you when you unclick it it's going to go away this is a way to kind of keep things a little cleaner in in your app so that you might want not want to always want to have something actually being displayed we can do the same thing with column two so that they can opt to have that opened or not so let's go ahead and make column two expander we're gonna do this all again we're gonna say column two expander is equal to column two because we need to wrap it within that column 2 in the layout and we're going to say column 2 dot beta expander we're going to call this expand cleaned and let's go ahead and get rid of that header because we really don't need that anymore and we're going to say with column 2 expander column 2 expander dot write cleaned let's rerun this app and now we've got two columns we can see the cleaned version and we can see the expanded version so these are ways that you can kind of control how much information is being displayed at any given time for a user so they can kind of go through and more and intuitively explore the data that that's being populated on the page so that's a fun way to kind of just get your app having a better layout with these three different features the the sidebar the the columns and the expanders let's go ahead and talk about one more feature that is very common for apps and that is you oftentimes want to display your logo or you want to display some other feature maybe an image that needs to be populated onto the page i'm going to have a whole video where i talk about how to take in input data that is images and show those images on the page for right now we're going to assume that the user is not inputting the data like an image that they want to have uploaded rather you want the app just to display something right out of the box so what we can say is let's say we want to have the image appear up here in the top left of our sidebar that's where we want to see it so i'm going to put it before we start calling the header on the sidebar so we're going to say st.sidebar and we're going to say dot image and this is going to take one argument for right now it's going to be the image that we want to see loaded in this case it's under logos backslash page.png actually sorry pi dh that's what i want to use pi dh dot png let's rerun the app and you'll notice that we have an error what did i do wrong pi dh logos oh and it's dot jpg jpg there we are and now it works just fine you see this pi dh logo now populated in the top left we can do a couple cool things we can control the height of it we can control the width of it so i can say width is equal to just let's just make it i think this goes by pixels i could be wrong but let's say we just want to make it a width of just 100 now you see it's a lot smaller we can control a lot of the different features of the image as we want it to actually appear on the page but this gives you a way to kind of just load an image real quickly that might be your your logo or your kind of your brand whatever it might be or it could be your your the lab to which you belong or the university this gives you a way to quickly kind of load in something that is unique to you such as the logo and do it quite quickly this is going to be the standard way that you load images in streamlit you can do this in the sidebar and the expander you can do this however you want to but you're going to use dot image that's going to allow you to place an image onto the page i hope that you've found this video useful as always thank you to my patreon supporters if you get a lot out of these videos please do consider supporting it via patreon if there's something that you want to see let me know in the comments down below and i'll try to make a video on it uh in the next video what we're going to be talking about is or some more advanced features we're going to be talking about how to really kind of structure an app better one of the things you're going to have a problem with is if you have a lot of different parameters that need to be parsed simultaneously meaning not continuously like not continuously reading the re-running the script you need to have all the parameters hit run in and then a script being run you're going to want to use what's called a form i'm going to be talking about a form in the next video which is going to allow you to make much more robust apps much more quickly that's going to be it for this video though thank you for listening

Channel: Python Tutorials for Digital Humanities

Views: 485

Rating: 5 out of 5

Keywords: python, digital humanities, python for DH, dh, python tutorial, tutorial, python and the humanities, python for the digital humanities, digital history, Python and libraries, python tutorials, python tutorials for digital humanities, streamlit tutorial, streamlit apps, streamlit and python, python and streamlit, how to control layoutsd, streamlit and layouts, layout of app, layouts in streamlit, streamlit and layout, columns in streamlit, sidebarr in streamlit, expander

Id: saOv9z6Fk88

Length: 21min 3sec (1263 seconds)

Published: Sat Jul 17 2021