Creating a Multi-Page Web Application with Streamlit: A Step-by-Step Guide

In this tutorial, we will explore how to create a multi-page web application using the Streamlit Python library. Streamlit is a popular open-source library that allows developers to build data-driven applications quickly and easily.

To get started, fire up your terminal and change to the working directory by typing `cd desktop` followed by `cd streamlet`. This will take you to the root of the Streamlit project. Next, type `cd multi-page` to enter the folder where we will be building our application.

Upon entering the `multi-page` folder, you will see a list of files and folders that make up our application. Take note of the structure and organization of these files, as it will help us navigate through the process of creating our multi-page web application.

The first step is to change into the Conda environment by typing `conda activate`. This will ensure that we are using the correct Python version for our project. Next, type `streamlit run app.py` to start the Streamlit server. This will launch our web application in your default web browser.

In this tutorial, we will be creating four pages: home, data, model, and an additional page that we can use as a placeholder or add more functionality to later. The home page will serve as the main entry point for our application, while the data and model pages will provide users with interactive visualizations of their data.

The `multi-app.py` file serves as the main framework for our application. This file contains the code that defines the structure and behavior of our web application. By importing the `multi_app()` function from the `streamlit` module, we can create multiple pages within a single application.

We will also be creating four separate Python files: `home.py`, `data.py`, and `model.py`. These files will contain the code that defines the behavior and functionality of each page in our application. The `home.py` file will contain the main entry point for our application, while the `data.py` and `model.py` files will provide users with interactive visualizations of their data.

To create an additional page within our application, we can simply add more code to one of the existing Python files or create a new file entirely. This allows us to customize our application further and add more functionality as needed.

Upon loading up our web application, you will see a simple printing out of the title `home` which is right here home. Below this, there will be an sc.rights section that serves as a placeholder for additional content or widgets. Next, we have the app argument that accepts a list of page names and their corresponding functions.

For example, in our case, we can define the home page by creating a function within the `home.py` file that prints out a simple message to the user. We can also add more functionality to this page by importing additional libraries or widgets.

In addition to defining pages, Streamlit also provides an interactive interface for users to select which page they want to view next. This is achieved through the use of dropdown menus and buttons within our application.

For instance, on our home page, we have a navigation bar with dropdown menus that allow users to select which page they want to visit next. By using this feature, we can create a seamless user experience that allows users to easily navigate between pages without having to manually enter URLs or click on links.

To add more functionality to our application, we can use Streamlit's built-in widgets and libraries, such as `st.write()` for printing output to the screen and `st.image()` for displaying images. We can also import additional libraries, such as pandas for data manipulation and analysis.

In this tutorial, we will be using pandas to load and analyze a sample dataset within our application. By creating an interactive visualization of this data, users can gain insights into their data without having to manually manipulate or analyze it.

Overall, Streamlit provides a powerful toolset for building data-driven applications quickly and easily. With its ease-of-use interface and extensive library of widgets and functions, developers can create complex web applications in a fraction of the time it would take using other libraries.

In conclusion, this tutorial has provided an introduction to creating multi-page web applications with Streamlit. By following these steps and examples, you should now have a solid understanding of how to build data-driven applications using Streamlit.

"WEBVTTKind: captionsLanguage: enin this video i'm going to be showing you how you could create a multi-page web application using the streamlet python library and without further ado we're starting right now okay so the first thing that you want to do is fire up the terminal so let me change to the working directory cd desktop cd streamlet this is right here streamlets and then cd multi-page folder let's take a look at the contents all right and then we're going to change into the condy environment and then let's fire up the web application okay so this is the web app and let me open up the atom so the multi-app.py is the simple framework that allows you to have multi-page using the streamlet python library so in prior videos i've shown you how to create streamlid web application and that was predominantly based on a single web page and so in this tutorial i'm going to be showing you how you could create this multi-page web app using this simple framework and so we're going to be calling the multi-app.py as a function from directly app.py and so the app.py is going to be the main file where we're going to be importing streamlets we're going to be importing the multi-app function from the multi-app python file and then from the apps folder here we're going to be importing the data.py home.py and also model.py and so these are the pages of the web app and so there will be a total of four python files that we're going to be using here that will constitute the web application that we're going to be building today so you could think of the app.py as kind of like a placeholder that will link to the home page to the data page and also to the model page and you could feel free to add more than three pages here you could add 10 if you like and so you would also add 10 here as well and you're going to be putting it all in the apps folder or any folder that you like but you just need to call the name of the folder followed by the name of the python files here home corresponds to home.py data corresponds to data dot p y model corresponds to model dot p y and so we're going to be referring it here as well home data and model home dot app data dot app model dot app let's take a look at each of the individual files here upon loading up the web application you're going to be loading up this file so this file will contain a simple printing out of the title here home which is right here home and then sc.rights and then we're going to be printing out something here this is the home page of this multi-page app it's right here and then the next one sc.right and then the input argument is the text here in this app we will be building a simple classification model right here using the iris data sets and so this is the navigation bar and if you click on it it's going to be a drop down so you will be able to select whatever page that you want to go to so let's say that i clicked on data i will be going to the data page it will be triggering the data.py right here and so this will essentially print out the name of the page the description of what the page is doing it will be loading up the iris data sets and then it will be using that to create a data frame and then displaying the data frame using the st.write function and if i click on model it will go to the model page right here and so the model page will do the same thing print out the name of the page right here it will print out the description of the page what it is doing and then it will be loading up the iris data set again and then it will be building a model performing data splitting and building a classification model using the random forest and finally we will be printing out the accuracy score right here so this is a very simple application that will allow you to have several web pages and so this is brought to you by pranio nihar who developed this streamlit multi-apps framework and i'm providing the links to his github repo and also the medium article for which he has written and so please make sure to check that out and give him a like or two and i would like to hear from you how you're intending to use this multi-page functionality so please comment down below if you're finding value in this video please give it a like subscribe if you haven't already hit on the notification bell in order to be notified of the next video and as always the best way to learn data science is to do data science and please enjoy the journeyin this video i'm going to be showing you how you could create a multi-page web application using the streamlet python library and without further ado we're starting right now okay so the first thing that you want to do is fire up the terminal so let me change to the working directory cd desktop cd streamlet this is right here streamlets and then cd multi-page folder let's take a look at the contents all right and then we're going to change into the condy environment and then let's fire up the web application okay so this is the web app and let me open up the atom so the multi-app.py is the simple framework that allows you to have multi-page using the streamlet python library so in prior videos i've shown you how to create streamlid web application and that was predominantly based on a single web page and so in this tutorial i'm going to be showing you how you could create this multi-page web app using this simple framework and so we're going to be calling the multi-app.py as a function from directly app.py and so the app.py is going to be the main file where we're going to be importing streamlets we're going to be importing the multi-app function from the multi-app python file and then from the apps folder here we're going to be importing the data.py home.py and also model.py and so these are the pages of the web app and so there will be a total of four python files that we're going to be using here that will constitute the web application that we're going to be building today so you could think of the app.py as kind of like a placeholder that will link to the home page to the data page and also to the model page and you could feel free to add more than three pages here you could add 10 if you like and so you would also add 10 here as well and you're going to be putting it all in the apps folder or any folder that you like but you just need to call the name of the folder followed by the name of the python files here home corresponds to home.py data corresponds to data dot p y model corresponds to model dot p y and so we're going to be referring it here as well home data and model home dot app data dot app model dot app let's take a look at each of the individual files here upon loading up the web application you're going to be loading up this file so this file will contain a simple printing out of the title here home which is right here home and then sc.rights and then we're going to be printing out something here this is the home page of this multi-page app it's right here and then the next one sc.right and then the input argument is the text here in this app we will be building a simple classification model right here using the iris data sets and so this is the navigation bar and if you click on it it's going to be a drop down so you will be able to select whatever page that you want to go to so let's say that i clicked on data i will be going to the data page it will be triggering the data.py right here and so this will essentially print out the name of the page the description of what the page is doing it will be loading up the iris data sets and then it will be using that to create a data frame and then displaying the data frame using the st.write function and if i click on model it will go to the model page right here and so the model page will do the same thing print out the name of the page right here it will print out the description of the page what it is doing and then it will be loading up the iris data set again and then it will be building a model performing data splitting and building a classification model using the random forest and finally we will be printing out the accuracy score right here so this is a very simple application that will allow you to have several web pages and so this is brought to you by pranio nihar who developed this streamlit multi-apps framework and i'm providing the links to his github repo and also the medium article for which he has written and so please make sure to check that out and give him a like or two and i would like to hear from you how you're intending to use this multi-page functionality so please comment down below if you're finding value in this video please give it a like subscribe if you haven't already hit on the notification bell in order to be notified of the next video and as always the best way to learn data science is to do data science and please enjoy the journey\n"