Welcome to this video where we're going to take a look at the Streamlit library in Python and see how you can use that to rapidly build a data-driven application. In this video, we'll take a look at how to install Streamlit and then also take a look at some of the basic features to help you get started quickly. We'll then take a look at how to create a simple mortgage calculator app so then you can see how all of the pieces will fit together. This is the app we're going to create. It's going to be a fully functional web app with a UI that looks really modern and clean. And you can also have input elements for your users to interact with. For example, things like text fields and buttons. We'll also take a quick look at how to deploy this to Streamlit Cloud for free. This will make your app accessible to the rest of the world via a URL. But first, what is Streamlit exactly? Streamlit describes itself as an open-source Python library that makes it easy to create and share beautiful custom web apps for machine learning and data science. You can install it with pip using this command. Once you have it installed, just go into a new folder and create a Python file. Add this line of code to it. Now to run the file, just use this command except with the name of your file. Let's go to our code editor and try that out. So here I have my hello world message and my file is called hello.py. So I'm going to run that. After you run that, your browser window should pop open with your Streamlit app. It's going to be a very plain app for now, but you should see your hello world message being printed to the app. How Streamlit works is that it will evaluate your file from top to bottom and render each thing in the order that they appear. If you put something underneath this line, for example, let's put a text input element. Then when we go back to our app and run it again, there's a button here to rerun it or always rerun it. You'll see that this element appears below that hello world message because we have put this first. And this new element I just added is actually a text input field for my app. So users can type anything they want into this. Streamlit actually provides you a lot of different input elements you can use and this is one of them. And if you have an input element like this, it will actually return the value that the user puts in. That means you can also capture that return value into a variable like this x here and then use that in your app. Once you've stored that value, you can use it just like any other variable. And if the user changes something in the input, the app will rerun the entire script to generate the page if it detects that something has changed. So let's go back to our code editor and give that a try. Okay, so I've added my variable here and I'm printing out whatever the user types into the text field here. So whatever value I decide to put in here, I can just type it in and press Enter. And you'll see that it stores the variable and it can use it in a later part of the app. You can create things like buttons, sliders and dropdowns as well. Pretty much anything you can expect to find in an interactive app. Now, something I personally really like about Streamlit is that it also supports Markdown formatting by default. So you can do things like titles and code blocks really, really easily. Just use normal Markdown formatting in your string and Streamlit will render it for you. This includes things like italics, bold settings, even headers, bullet points and code blocks. If you want to see a full list of all the different components available on Streamlit, then head over to the official documentation and go to the API references tab. And if you scroll down, you'll see a bunch of text elements, data elements, charting elements and input elements and so on. So there's actually quite a lot of stuff and you can go here to check it all out. At this point, you might have noticed that Streamlit is geared quite heavily towards working with data. So let's go ahead and see what that experience looks like. If you have a CSV file that you want to use as part of your app, that this is how you can do it. All you have to do is import the file with pandas and then you can simply use the Streamlit write method to display that data inside your app. Let's go back to our app and try that out. Here I have a CSV file called movies.csv, which I downloaded from Kaggle. And it's basically just a file of different movies available on Netflix. Here we're just going to load the file as a pandas data frame and we're just going to draw that data with Streamlit. If we go back to our app and refresh it, you'll see that we get this really nice table here and you can explore the data. You can even edit certain fields of the data and you can even sort the columns. So natively, it's got really good view and really good UI for working with CSV data or most other common types of data as well. You can also show your data in a graph. So in this example, I'm going to generate a bunch of random data and I can display it in a bar chart or a line chart. Let's go back to our app and try that out. And here if I refresh the page, I get the charts that I created with a bunch of random values being plotted. And these charts are really interactive as well. You can zoom in, you can zoom out and you can also mouse over these elements to see what their values are. Once again, if you want to see all the available options, then check out the API references page on the official Streamlit documentation. If your app starts to get a little bit too big to fit on a single page, Streamlit also gives you a really easy way to create multi-page applications. All you have to do is just structure the project so that you have a directory named pages and then with each page as a file inside that directory. Now Streamlit uses the naming convention and the structure of your directory to figure out how to organize its pages. So that means you do have to name the folder exactly like this. And then you can tell it which order to display the pages in by prefixing it with a number. The page itself won't have the number prefix when it appears in your app. Let's go back to our code editor and try that as well. Here I still have my main file, but I've created this pages directory and I've put two new files in there. So one is going to be a profile page and one is going to be a dashboard page. And once I rerun the app, this is what it's going to look like. So I'm going to have the sidebar here that I can expand and it's going to have a list of all my pages. And I can click on them to go to that page. So here's my profile page and then here's my dashboard page. So that's how you can build multi-page apps using Streamlit. Now I think this is pretty cool, but it's still quite limited. You can build something too complex with this. For example, if you wanted nested pages or dynamic pages, it's not really easy to do that right now. But it's good enough for when you just have a handful of different pages you want to use in your app. What if you wanted to link to an external site or even to a different page on your own site? Well Streamlit has this input widget called a link button. It's just like any of the other input components we saw earlier. And here's how you can use it. It just takes a label, which is what the button will say, and a URL. And if you really wanted to do a dynamic page or a page that loads in some arbitrary data, you could potentially use something like query parameters with your URL as well. It's a little bit hacky, but it works for now. But again, as I said earlier, it's not a great navigation experience. This link here will always open in a new window. So if you need better support for app navigation, you might want to look into something like a proper web framework, like Flask or Django instead. Where Streamlit really does shine is building simpler apps that are interactive and heavily focused on working with data or machine learning. So let's put all of that together and see how to build a functioning loan repayments calculator using all of this. Now, I'm going to be stepping through this code quite quickly. But if you want to slow down and take a closer look, then check the link in the comments for the GitHub repository with all of the source code. Let's go back to our code editor now and walk through this step by step. So first, I'm going to have a bunch of imports, and then I'm going to create the title for the app, which is going to be a mortgage repayments calculator. Next, I'm going to create a couple of input fields for things like home value, deposit, and interest rate. So these are the inputs from the user that I'll need to calculate the repayments. And you can use things like this to set a default value or minimum/maximum values. And here, if I want my elements to not display in a single column, I can also use this column component to split it up into two different columns. So I'll have each of these elements render in two different columns side by side. In the next step, it's just a bit of math. There's nothing unique to Streamlit here. This is just mortgage repayment calculator formula. So just go ahead and copy that to get the right value for the monthly repayment. Next, we're going to want to display the repayments. So I want to use this metric element because it will make the numbers kind of pop out and a little bit bigger than if I just wrote it as plain text. So I'm going to use three different metric elements. I'm going to put them all on the same row by creating these columns, and I'm going to show the monthly repayments, total repayments, and total interest. So this is where I'm displaying output to the user. Finally, I'm going to do a bit of math to calculate the payment schedule over the loan term. So here I really want a graph of how much remaining balance is left on my principal. And once I have that information, I can put it into a pandas data frame, and then I can plot a line chart to show that remaining balance declining. Now I'll pop open my terminal and run this mortgage calculator app here. Cool, and you see that it loads and it's got all my default values, and here is my payment schedule calculated for me over 30 years. And if I change the home value, you should see all of these things change too. For example, if I go from a $500,000 home to a $700,000 home, you see that this is how much the monthly repayments will be. I can also play with the interest rates to see how that affects the repayment schedule. So kind of just to recap on what we've built, when we write an app with Streamlit, Streamlit will evaluate it from top to bottom. So you can see that everything we write will be rendered in the order they appear in. And things like input elements will return the value that the user puts into that element. So anytime I update one of these, this value can change. And because it renders from top to bottom, anywhere I decide to use one of these variables will get changed or affected by that as well. So if you could see here, I can change this number to 4, for example. And then if I press Enter, that whole app gets re-rendered from this point onwards, and it's using this as a calculation instead. Finally, I have all the data I've calculated and I want to display them in the right way. So you can see these metric elements being displayed in the columns here, and the numbers are nice and big because that's what I want my user to pay attention to. And I also have a graph showing the payment schedule. And if a line graph is not the right type of graph for you, then again, in the Streamlit documentation, there's a bunch of other different graphing widgets you can use for your data. Now let's take a look at how you can deploy this. Streamlit apps are really easy to deploy. You can use Streamlit Cloud to deploy for free if you're happy with your app to be publicly visible. First, you need to make sure that your app is published to GitHub because that's where Streamlit is going to read the source code and then deploy it from. And if you have any Python dependencies, then make sure to put them all into your requirements text file as well. When Streamlit tries to deploy your app, it's going to run pip install on this requirements text file. So if you needed to install anything, make sure it's there. Once all of those things are in place, go back to your local version of the app, and then click this deploy button in the top corner. And here you can choose to deploy to Streamlit Community Cloud for free. Fill up all of the stuff. Here you can paste your GitHub URL, select your branch, and then select the file that you want to deploy as your app. Once you're done with that, hit deploy. Now this could take quite a while the first time, but if you want to check on the status, then you can expand the tab to the bottom right, and you'll see the status of your app being installed and deploying. And after it's done, you'll have this app fully deployed and you can interact with it. And you also have a URL that you can share with your users, and they'll be able to use this hosted version of the app right away. Alternatively, if you don't want to do it this way, you can deploy it as a Docker image as well. You can deploy this to any traditional cloud provider, for example, like AWS. But that's out of scope for this video, so if you're interested to see how to do that, then please let me know. So now we've covered the basics of Streamlit, built a simple app with it, and deployed it to the cloud. This library is great for building data-driven applications where you want your users to be able to see or have simple interactions with your data. It's also really good for building things like a simple AI chatbot or an AI assistant. By the way, if you want to learn how to use AI to chat with your own files and documents, then also check out my previous tutorial where you'll learn how to do exactly that using Langchain and Python. Otherwise, I hope you enjoyed this video, and thank you for watching.
