Okay, in the last few videos, we've put together this Streamlit app for open domain question answering. And what it does at the moment is we can ask you a question like, "Who are the Normans?" Or we can ask somewhere, I don't know, "Where are the Normans from?" I'm not sure if we have, I'm not sure what topics we have in there in the vector database.

I'm just going to ask Norman questions for now. Maybe I can ask something like, "Where is Italy?" That must come up with something, surely. Yeah, okay, so we see different things in there. Okay, cool. So, we have this and 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 big chunks of text back, and I mean, that's pretty much all we can do with the current backend, 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 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, 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's super nice.

So, what we can do is actually just copy this. 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.

We made this 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 unindent that. And that's our card. So, now, 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 stwrite metadata, I'm going to just write st.write card.

Okay, actually, not stwrite, we actually want to include st.markdown, and so markdown is another useful component in Streamlet. Let me open it up here. So, it would be a text element, and we have st.markdown. So, let's have a look at that, and display 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.

Let's save that. Let's go to our app, and get, okay, always rerun at the top there. Okay, and now we have these cards. Now, they're not very nice looking, and we'll figure out why in a moment, but before we figure out why, let's actually make this a little bit nicer, or 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, yeah, let's go ID value, title, and context. Okay, we'll make this an F format 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 a context.

Let me minimize that here. There's our context. The title, we'll 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, so let's do that.

So, we know the text is here. Okay, so we have 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 ID is in a different part of the JSON response, 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 the title, so the Wikipedia topic that came from, the ID, unique ID for each context we have, and then we also have this chunk of text, the context. Now, 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 bootstrap example. Come over here, it looks really nice. Okay, so something weird going on there. So, what we actually need to do is if we, let's search CSS, see if it comes up. Okay, so we have this compiled CSS and JS, come down to here.

What we need to do is actually copy the style sheet for bootstrap, so basically how it's been styled, and we need to put that into our app. 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 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 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 add that in 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, it just looks better. The only thing is now that it's actually like really tight, it's not taking the full width of the parent container that it's 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 what happens. Okay, so now we will see this card sticks to 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'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 1rem, which is a more flexible measure rather than using pixels.

I'm going to save that, that's how it looks and what we get. So now we get a little bit of a gap between one of the edges, you can remove that if you want by using the margin top and margin bottom, 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 pretty cool. If we go back to something that we know works, so who are the Normans, run that and we now get this cool response. I think that is pretty much like the core of our app. That's everything we need and the app is there.

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 pretty cool. It's the core of our app and with that, we can actually do something useful with it. We can actually help people find information in a quicker, more natural way.

But that's it 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.