Create a basic app

- [Instructor] Before we build our fully featured movie recommendation app, let's start with something smaller. Here, we're going to build a simpler app using just placeholder data. That way we can separate the task of building a web app from the task of getting it to work with a vector database. The placeholder app that we build will also work as a guide when we connect our vector database to it as well. Now, given that we don't expect you to learn a lot of Streamlit in a short amount of time, we'll go through this example step by step. This code is provided for you so you don't have to build this yourself, although you can, of course. Streamlit code generally runs top to bottom rendering elements on our browser in that order. So first we can import the library and provide a title like so. I've called it ReelRecommender. It's pretty catchy, right? And actually, we can run this app already by just going to shell and typing streamlit run, followed by the file name like this. And that should show you an app with a title just like I'm showing here. Now, since I know that Streamlit supports tabs, I've outlined the app with multiple tabs with a tabs function, and now we can add components to each tab by using a context manager with the returned objects, like I'm doing here with a search tab. Let's add a header and capture a text input using this text input function. This is an input component that'll capture whatever the user enters, so we can later use this query string variable for our searches. We'll also create two columns. On the first column, we'll add elements for the context manager again, and what we'll add is a radio input for the user to select a search type. On the other column, we'll add a slider input so that we can filter by ratings. This list comprehension builds a few placeholder search results with some summary data objects similar to what we might expect to see in the real data from our vector database. So we'll display these objects as well. Now since these are search results, we'll create some collapsible expander sections so that just the title is shown to begin with, and the user can expand it if they really want to see more details about each movie. We'll display our placeholder data here as though they're real. Of course, they'll be replaced with a real data from our vector database. Now, as you know, the synopsis tends to be a little bit long, so we'll truncate that so it doesn't take up too much space on our screen. Now, if you save the file and refresh the app, you should see that the app now has these three tabs and that you can interact with these elements that you've just created. Next is the movie tab. This tab is for users who want to get more details about each movie. Here we'll have an input field so that if a user enters a movie ID, they'll be shown its data. Well, at least place all the data for now anyway. Here are the place all the data that I've created, including a full synopsis, again, hidden away on an expander. The third tab will have our AI-powered recommendations. This will take two text inputs, one for the kind of movie and the other for the context or the occasion of the viewing. And once the user enters both pieces of information, it'll perform a RAG query to provide recommendations. And of course, we'll to show the recommendations to the user. We'll also display a few details for each movie that's been analyzed by the language model. Now with those edits made and the file saved, when we refresh the app one more time, you should see each tab running and the features populated. So all we need to do now is to connect our vector database to it. And up next we'll do just that.