Streamlit for ML #4 - Adding Bootstrap Components

Key Takeaways

okay in the last few videos we've put together this streamlit app uh for open domain question answering and what it does at the moment is we can we can ask you a question like who are the normans or we can ask something i don't know where are the normans from um i'm not sure if we have i'm not sure what topics we have in there in the in the vector database so i'm just gonna ask like norman questions for now maybe i can ask something like um where is italy that must come up with something surely yeah okay so we see uh different things in there uh okay cool so we have this and we can we can ask it questions and it all works but it's not very nice to look at at the moment we just get these like big uh you know chunks of text back and i mean that's pretty much all we can do with the the current back end uh but we can at least format it a little nicer so what we're going to do is convert these big chunks of text into what are called cards now to create these cards we are going to use bootstrap so if i just type in bootstrap cards you can see it's in my history but i'm going to just put bootstrap cards for now so you can follow and go on here and let's let's make this a little bit bigger zoom in a little bit and scroll down so we have some cool examples here so this is one card uh we can go down a little bit more or this one i think this is probably the one i'll use okay so basically bootstrap is like a framework which is pretty lightweight and you have all these really nice examples of how you can build something that was super nice so what we can do is actually just copy this and we'll go back over to our code and what i'm going to do is i'm going to create the definition for one of these cards i'm going to do that in a function so we'll make our lives a little bit easier made us a lot easier to read anyway okay so i'm going to what we're going to do is return an f string let me clean up a little bit so uninvent that and then that's our card so now um well actually no this won't work yet but if i come down here i'm going to write okay for context instead of taking this um sc right metadata i'm going to just write st dot right card okay actually not i see uh we actually want to include sc.markdown and so markdown is another useful component in instrument let me open it up here so it will be a text element and we have st markdown so let's have a look at that and it displays string formatted as markdown now what it also allows you to do is if we take this put it in here and say it's true we can also use it to display html so let's save that let's go to our app and get okay um always rerun at the top there okay and now we have these cards and they're not very nice looking and we'll figure out why in a moment but before we figure out why uh let's actually make this a little bit nicer so i'll make it relevant because at the moment we don't have anything relevant in here so i'm going to include the title or maybe the i yeah let's go id value title and context okay we'll make this an f formatted string and what i'm going to do is remove these links at the bottom because i don't really have anywhere to link to with these and what i'm going to do is replace this default text with the context so let me minimize that here close up context uh the title will make title and the subtitle i want it to be the id value okay so if i do that okay it's not going to work straight away because we need to actually pass our id value title and context uh so let's do that so the well we know the text is here okay and so we have the the context which is the last parameter we also have in the context or in the metadata we also have the title and then the the id is in a different part of the json response and so that is in if i remove this that is in id okay let's run this see if it works okay cool so now we have like the the title so the wikipedia topic that came from the id unique id for each context we have and then we also have this you know this chunk of text the context now you know there's a few things that are kind of going a little bit weird here first the formatting of the card isn't what we saw in the in the bootstrap example come over here uh it looks really nice okay so something weird going on there and so what we actually need to do is if we let's search css see if it comes up okay so we have this uh compiled css and js and i come down to here what we need to do is actually copy the style sheet for bootstrap so that basically how it's been styled and we need to put that into our into our app um so all we need to do is copy that first line which is a style sheet the second one is for if you have javascript uh components we don't for the cards so we don't need to worry about that and what we're going to do is actually create another markdown um component so st.markdown because as before all we need to do here is add some html to our app so we're just going to paste that in okay but as before with html we also need to use this allow or unsafe allow html okay now if i down here and rerun the app our card should start looking nicer okay so you can see now we have that nice little border and we have um just looks better the only thing is now that it's actually like really tight it's not taking the full width of the the parent container that is within so to change that we don't actually need to really do anything we just need to remove this style component okay so let's remove that and see see what happens okay so now we will see this card sticks the same width as our search component so we're now getting something a little nicer the only issue is that now if we look between our cards they they're like attached and we also don't really want that so what we can do is add a margin to our cards so this is all just like html and css it's nothing like too complicated so you can look this up if you want to i'm going to use one ram which is a more flexible measure rather than using pixels i'm going to save that so look at what we get so now we get a little bit of a gap between one of the edges and you can remove that if you want by using the margin top and origin bottom uh but i think it looks nice so i'm going to keep it and we have an actual gap between each of our cards okay so yeah that's that's pretty cool um if we go back to you know something that we know works so who are the normans run that and we now get this cool response okay so i think that is pretty much like the core of our app that's everything we need and the app is there it's not you know it's definitely not perfect there's a lot we can do to it to make it much more interesting and we will look into those things but for now that's i think pretty cool it's the core of our app and with that we can actually do something useful with it we can actually you know help people find information uh in a quicker more natural way but that's it for for that video i really hope it's been useful and yeah thank you very much for watching i'll see you in the next one bye