Streamlit Tutorial | What is Streamlit | Basic Streamlit Functions | Intellipaat

[Music] hello everyone and welcome to today's session on streamlit streamlit is an open source framework which is used to create web apps for machine learning and data science with ease the best thing about streamlit is that even though you don't have the basic idea about web development still you can use streamlit to create your very first web application along with that it is compatible with the most of the Python libraries now before we go on the today's agenda do not forget to hit the Subscribe button and click the Bell icon for regular updates so now let's discuss about today's agenda first we will be knowing about what is streamlit once we got the idea about streamlit then we will see the uses of streamlit after understanding what is streamnet and its uses we will see how to install streamlit once we know how to do the installation of streamlit then will see the basic functions and input widgets in the streamlit and at last we will see the Practical implementation of it alright guys so now let's see what is streamlit so now talking about streamlit it is an open source framework which is used to create web apps for machine learning and data science with ease right so now let's see the objectives of streamlit so streamlit can be used to deploy machine learning models moving next let me give you some idea about the popular Frameworks in Python such as xango and flask which are also used to deploy the model but using this framework you should have some basic idea about HTML CSS and JavaScript now when you are using streamlit you can create a remarkable application in just a few lines of code right and you can also deploy your machine learning model and any python project with ease and without worrying about the front end so this is a basic idea about the streamlit so after understanding what is streamlit now let's see the uses of streamlit so now if I'm talking about the uses of streamlit let's take a scenario in which how it can be beneficial for data scientists so let's suppose if there is a data scientist and if they want to create their own web apps for machine learning and data science so if they are using other popular Frameworks such as zangon plus then they have to get some idea about the web development right but here with using streamlit there is no prior knowledge of web development is required right moving next ml model can be deployed easily and quickly and the last point that we are having that we can create an outstanding applications with the just a few lines of code along with that it is also compatible with most of the Python libraries so these are the advantages or you can say uses of streamlit alright guys so now after seeing what is streamlined and its uses now let's see the installation so for the installation I will be using here Anaconda prompt right so this is my anaconda prompt I will just go here and I will write here install streamlit it will take some time to install let's wait right so here you can see that my package of streamlit has been already installed now if you want to check it whether it's installed or not then I will just write here streamlit let me write here hello so once the execution is done you can see that there will be opening of a new window right so here you can see that there is a new window right where it's written welcome to streamlit now we have already installed the streamlit all right guys so moving next what I will do here I will go on the Anaconda Navigator so just let me write here Anaconda Navigator let me open it just wait for some more time so the ID that I will be using for it is Visual Studio so here you can see that my anaconda Navigator has been opened so as I told you that I will be using the ID as vs code let me launch it so here you can see that my visual studio has been opened now I'll go to the file I'll just click here new file and let me give you the file name as stream lit and I'll just write Here app Dot py right and let me just click on the desktop I'll just create a file all right so here you can see that my streamlit app file has been created now what I'll do here let me just import here is streamlit so how to import stream net I will just write here import streamlit and I will use Ali as you so I'll just write here s and let me write here St okay now what I will do here so in stream read we are having some Basics function right let me give you idea about some basic functions so let me give you some idea about streamlit basic functions so here we are having some of the functions that are present in streamlit are titled header caption code latex markdown right so using these functions we can create a very good web app right now I'll give you the introduction about each of the function once we are into the coding part next we are having input widgets now what are input widgets so talking about the input widgets widgets are the most important user interface components right so streamlit has various widgets that allow you to bake interactivity directly into your apps with buttons slidos text inputs and more so there are a lot of input widgets although some of them are here check box button select box slido radio time input right and there are many more such as date input and Etc we will discuss all these things while doing the Practical implementation so now let's jump into the coding part all right so we have already seen that how to import streamlit so now let's see some functions so the first function that I will be using is title right so title is used to give the title so if I want to give the title so what I will do here I'll just write here St dot title and I'll just write here simply welcome to intellipat let me save it so I'll just write here control s so now what I will do here I'll just go to Anaconda prompt I'll just write here Anaconda prompt and now what I will do here since my file has been saved on desktop right so we have to go first on desktop so how to go to the desktop I'll just write here CD desktop right so here you can see that I'm on the desktop so in the desktop I am having my streamlit file name right streamlit app Dot py right but if you want to run it then you have to write here first what you have to write you you have to write here streamlit then you will write here run and whatever the file name is there you have to write it and now let me execute this and you can see that congratulations guys so this is your first web application that you've made using streamlit so now moving ahead let's see some more functions so after giving the title to the app now what I will do here I'll just create the header so let me write here header let me Zoom it for you all right guys so I have zoomed it so let me give you the comment also title is nothing but it is used to add the title of the app so let me write here it is used to add the title of an app next talking about the header so if you want to set a header of any section then we'll be using header so here what I will do here I'll just write here St dot header and in header let me write you um machine learning and I will just press here Ctrl s right so once you have pressed Ctrl s go here and refresh it because I have to write here St dot header right now let me save it by pressing Ctrl s and I will execute it here and on execution you can see that I am getting header as machine learning right now if you want to write your sub header so how to create subheader I'll just write here simply St Dot subheader and I will write here in machine learning let me write here linear regression let me save it I'll just refresh it and you can see that as a server I'm getting linear regression right now after giving header and serve header to the section if I want to display any information message so I can use you sd.info and let me write here information details [Music] permission details of a user save it and I'll just execute it you can see that we are not getting anything here because we have already commented it right so I will not comment it I'll just write you information right [Music] to give information I'll just write you to give information now let me execute this and on execution you can see that it's giving an error let me check it out because we don't have to give here space that is nothing but indentation right so on execution you can see that I am getting my information detail right in this color now after giving it let's suppose if you want to give a warning message right so for warning message warning message I will simply write here St dot warning and I will right here um come on time or else marked absent let me save it and if I'm executing it you can see that I'm getting a warning right come on time or else you will Mark absent okay guys let's see some more functions so after giving warning we are having the right function so right function can be used to display text along with the code also in the coding format let me show you so let me write you write function so I'll just write here St dot right let's suppose if I want to write any text so I'll just write I'll just try it here simply the employee name let me save it and on execution you can see that I am getting the text here now as I told you that this function that is write function is also used for the code okay in coding format so if I'm writing here St dot write let's suppose if I am writing here range 50. okay let me execute this so on execution you can see that I am getting here range 50 right so let me remove you double inverted comma U if you see here that we can see here the range in the coding format right from the 0 to 50. all right so after write function if you want to show the error message all right so I'll just write here error message so for error message you can write here St dot error and in error I will write here wrong password let me save it and execute it on execution you can see that you are getting error is wrong password right now next if you want to display a success message so I'll just write you st dot success and here I'll just write simply congrats you have got a great let me execute this and you can see that I am getting a success message right that is in the form of the green color so now after understanding this so now let me use the markdown function so here I will just write you double quotes inside that double quotes if I'm writing a hashtag and if I'm writing here in Delhi pet now let me show you the execution I'll just once again repeat this markdown one okay guys now let's see the markdown function which is used to set a markdown of a section so let me commented down markdown and now I will simply write here as D dot markdown and let me write you I'll just write here intellibet let me save it and execute this so on execution you can see that intellipet has been showing here right now what I will do here I'll just simply write here hashtag now you will see the difference here now once again if I'm executing it you can see that I am getting here and deliberate which font size is large right now instead of writing here single hash if I am writing here sd.markdown function and if I'm writing a double hash and let me once again write here in telepath let me save it so on execution you can see that there is a difference right but I don't want this so let me give you a space let me execute this now here you can see that I am using double hash right so the font size has been small this time now if I'm writing your three times hash then you will see the difference the font size will be more smaller right so this is the way to set a markdown of any section so let's move ahead so now let's move to the next function okay so before moving to the next function if I want to print the Emoji then how you can do using the markdown function so let me write here SD dot markdown and here I will use the Moon so I'll just write here simple Moon and you can see that you will be getting the Emoji of moon let me save it and on execution you can see that you are getting the Emoji of moon right okay now after this I am having text function so for the text function I will simply write here St dot text and here I'll just write once again and telepath learners and you can see that it will give you the print off the text that is it will display the text right cool so after knowing the basic idea about all these functions now learn some more function so if you want to write a caption to write a caption I'll just write here St dot caption and inside this caption I'll just write your caption is you you let me execute this and on execution you can see that I have already set a caption here right so this is a way to write a caption right so you can see that guys it's a very easy right if you are using streamlit you can create here the front end very easily let me give you some more idea so now if you want to display a mathematical expression let's suppose then how you can use so for that I will be using a latex function so let me write here to display uh mathematical equation so I'll just simply write here St dot latex and inside this what I will do here first I will write here r and then I will give you a three single quotes and inside that let me write a equation I will just write here a Plus B I'll just write here x to the power 1 so I will be using this symbol or let me give here A plus b x square so I'll just write here 2 okay and I'll just write here plus and c and let me close this okay guys let me save it and on execution and on execution you can see that I am getting the equation a plus b x square plus C so this is a way to display a mathematical expression right next if you want to see how to create an image right so for the image what I will do here let me create image here in front of this before title so to create an image I will just simply write here St dot image but I need an image for this right so I'll just go on file and I will write here first I will select so on desktop I am having an image of intellipet so let me write here in telepad and it's in PNG format let me open it right so what I want so once I have uploaded my intellipet file that is in the PNG format that is nothing but image file so I'll just write here in St dot image intelibate Dot PNG let me save it and when I'm going this website you can see that on execution I am getting here intellibet right before welcome to the intelibate so this is the logo alright guys going next let's see some more functions so I think I have covered most of the functions now it's time to understand about the widgets so let me comment in town your widget now so the first widget that we are having is the check box so let me write here St dot check box so in this checkbox what I will write here let me write here login [Music] let me save it I have to refresh it and here you can see that I am getting a login checkbox right so this is a way to create a checkbox now let me comment it down check box so now let's see some other widgets so after check box the next widget that we are having is nothing but the button so as United button is used to create a button right so let's see how we can create a button I'll just write here simply St dot button and inside this I'll just write you click let me save it and on execution you can see that click button we are getting now next we are having radio widget so what is Radio widget basically it will display a radio button right so how to create a radio button I'll just simply write you let me first write your radio widget [Music] so I'll write here St dot radio and inside this what I will do here I'll just write here foreign so in general now what I will do here I'll just create a simply list and in list I will write here mail and I will write your female and let me create another element that will I will create your other right so on execution you can see that I am getting a radio button in which is showing the option pick your gender male female other so now after this we are having next is Select box so if you want to select a single option then you can use the select box so let me show you let me write your first select box and then I will write here St dot select box and inside this let me write your pick your course [Music] and once again what I will do I will create a list and here let me write ml let's take some more courses I write here cloud and then I will write you cyber security you can take cool let me save it and execute it so on execution you can see that it's showing me error why because I have to write here select box now you can see that it's showing pick your course so here you can see that I am getting a option of ml Cloud cyber security so I am just selecting here cyber security so you can see that it has been selected right now after understanding select box then we are having multi selective so in multi select you can select multiple options let me just write you multi select so here let me write St Dot multi select [Music] I'll write you let's suppose um I want to choose the department so let me write here choose the department and let me create some departments so I'll just create here content now let me create another one with sales and then marketing and now I'll execute it so on execution it's asking choose your department I want to choose content if I want to choose sales also I can choose it if I want to choose marketing then also I can choose it and if you want to remove it then you can remove it by clicking on this cross right so this is a way in which you can create a multi select option right now after that we are having select slider now what we'll select slider will do let me show you [Music] so I'll just write here s t dot select underscore slider and let me give the rating here so if I am reading anything then I can give the rating right so now let me take your categorical variables I will give the rating as bad I can give you good I can give you excellent let me give you one more I can also give you outstanding let me save it execute it so here you can see that you are getting the rating if I am clicking on this and dragging it so you can see that now from bad to good and then go to excellent and excellent to outstanding we can go so this is a way you can create a slider using select underscore slider method next we are also having the slido function so what is the difference between slider View and the select slider I will show you so let's suppose if you want to pick a number so let me write here St dot slider let me write here enter your number and simply I will give you 0 to Let's suppose 30. let me save it and it's asking enter your number so if I'm dragging it you can see that it's going from 0 to 30. if you want to increase the size then you can write here 100 also and let me correct it here now it's looking better all right so you can see that I can drag it from 0 to 100 so this is a slider next we are having number input so if you want to display a number then I can use the number input so let me show you I'll just write here number input number underscore input now what I will do here once again I will just write here simple St DOT number underscore input and I will just write you once again pick a number [Music] let me give you using let me save it and on execution you can see that it will give you pick your number so if you are clicking on this plus button you can see that from 1 to 100 you can choose your number so basically this function is used to display a numeric input widget right so after understanding number input now let's see the text input so let's suppose if you want to ask a email address of any user so you can use text input so let me just write you text input so I'll just write here SD dot text underscore input and inside this I'll just write here enter your email address let me exclude this [Music] it is asking your email address so I'll just write you random x y z add the read in telepath dot com all right guys now let's see some other widget so basically text function is used to display a text input widget right so now we'll see the date input so let me write your date input so if you want to display a date input widget you can choose this date input so I'll just write here s t dot date underscore input and inside this I will write here opening ceremony right right let me execute this and on execution you can see that it's already showing by default but if you want to change it you can just write here let's suppose 1997 I'll write let me remove this I just want to change it 1997. uh let's take uh August month and let's take a date and if I'm executing you can see that I'm already getting the August chart of 1997 right cool so after date input we are also having the time input right so time input will give you the timing so I'll just writing here time input and I will just write here SD dot time underscore input and I will just write hey What's the timing [Music] and on execution we can see that we are getting the time so let's suppose if I want to select the time at 2 o'clock so 2 o'clock will be you 14 right so this is the way on which you can create a time so after understanding time input we are having a another widget that we can use let me give you an idea we are having you text area so why we are using here text area let me first write your text area so let's suppose if you want to print a text more than one line then you can use this text area so if I'm writing here St dot text area and inside this I will write you Welcome to the intellipad website hello learners okay and on execution you can see that we are getting the text area where I will tell you welcome to intellipad website hello Learners so here you'll get the basically the text area where you can write a description okay you can write a huge description here so now let's see a other widget so if you want to upload any file so which function we can use so for uploading file I'll just simply write here SD dot file under score upload and I'll just write here upload your file or I'll just write here folder let me save it and on execution you can see that it's giving an error why let me check it out because here I have to write here file uploader right this is the correct function so now if I'm executing it so you can see that we are getting the option upload your file and folder so you can just go browse files and here I'm having a lot of file let me go on the desktop I was having one image of intellipad right so just click View and open it you can see that it has been uploaded right so up to 200 MB is the limit you can upload any file in folder all right guys so moving next we are having a option of choosing color also so for that I can write here St dot color underscore and I will write here picker and inside this I'll just write your color so let me execute this giving color now if you want to select color so how you can select it you can just click here here and then select any color all right let's move ahead now if you want to see the progress right if you are creating any web app and whatever the Learners have learned and how much the course they have completed so there will be a track record right so for that you can use the progress so for progress I can write here SD dot progress and here let me give the progress as 90 so you can see that on execution the 90 percent of the progress will be why it's giving an error because I have to write here St dot progress let me just execute this and on execution you can see that ninety percent of the progress has been done all right so the next function we're gonna discuss about is the spinner function right so what is the use of this spinner so whenever you're using this function so it will display a temporary waiting message during execution right so whenever you are executing anything so let's suppose if I am executing this and it will taking a time right so basically it will display a temporary waiting message so let me just show you how it works if I'm writing here St Dot spinner and I write here just wait cool but now this function will not work here you have to use you in order to work I'll just write you with and let me import the time also so how to import the time here I'll just write you import time as t so I'm creating Alias right for time so I'll use your D so if I'm writing you let me write here colon right here T dot sleep and now if I'm giving here 2 so it will take 2 second to display let me execute this showing an error because I have to write you import p right so on execution you can see just wait so it has waited for two second right if I'm writing here 5 Second you can check it out just wait it will wait for 5 seconds so what is the use of this function as I already told you that it is used to display a temporary weighting message during any execution right now guys we will see an interesting function here so there is a function called balloons right so this function is used to display balloons for celebration so let me show this function so let me write here St dot balloons so it's already displaying let me execute this and on execution okay it is showing an error because I have to write here balloons let me give the Sleep Time View for the two second so that shouldn't take much time now on execution you can see that we are having the balance here for celebration right let me execute once more to show you yeah okay guys all right guys so now let's see the sidebar so let's suppose if you are making any web app and if you want to put anything on the sidebar so how to do it so there is a function that is called St dot side power that you can use so that your element is pinned to the left side right so let me show you I'll just write here sidebar now what I will do here I'll just write here St dot sidebar [Music] I will just write here let's suppose welcome to intellipad [Music] so what I have told you about the sidebar so let's suppose if you are using St dot sidebar so whatever the element is there it will pin to the left so let's suppose if I'm giving you st dot sidebar dot title right so let me execute this let me save this and if I am executing it so on execution you can see that the element has been pinned To the Left Right welcome to the indelibate so let me just write here in deliberate only now what I will do here I will just write once again St dot sidebar and dot now instead of title this time I will just write you text underscore input I can write you enter your mail address or I will just write your mail address let me execute this so you can see that yeah after the celebration of balloons that mail address is asking right so what I will do here I will take one more text input so let me just copy this and I will paste it to you and this time I will just write here password so I'm doing nothing but using the same code text underscore input after using the sidebar so here I'm getting mail address and password now I can create the button also so for button or also if I want to create then once again I have to write here SD dot sidebar because I want to create everything on the left side right so I'll just write your dot button and let me give you the submit option you can see that I can write here my mail address x y z at the rate in telepath .com password you can also write DFG or something and you can put on the submit button also right so this is the front end part that we can create using streamlit next if you want to create the radio button then you can also create it okay let me show you SD dot I'll just write your sidebar dot radio and let me write here professional expert I'll just write here student in the list and let me create your working professional so I'll just write here working let me save it so here you can see that I've created a radio button so when I'm writing a professional expert if you want to add more option then I can write here others also so this is very simple guys right you can create a front end in a easy way using this all right and select any one now after understanding the widgets and the basic functions about streamlit now we can see the data visualization thing so I'll just comment it down the data visualization so for the data visualization the library that I will be using here Panda so I will be writing here import pandas as PD right now let me give you the title let's suppose if I want to create a bar chart so I'll just write here SD dot title and I'll just write here simple bar chart okay guys now what I will do here let me create a data frame so how you can create a data frame I will just write here simply PD dot data frame and let me use numpy also so how to import numpy I'll just write here simply import numpy as NP so what I will do here I'll create here NP dot I'll be using here random dot random function so I'll just write here random and I want to create here let's suppose 50 records and four columns or let me create you two columns first let me write you okay 50 records is fine so I'll just simply write here columns and I will just write you X and Y so these are the columns name that I'm assigning all right and let me store into this data right now how to show a bar chart right in our stream lit so there is a function that is St dot bar underscore chart right so I am using a function here bar underscore chart and inside this I will just write my variable data and let me execute this so on execution you can see that so here is showing error because I have to write here title that's why it's showing there is no tight liability just wait for it and clearly here you can see that we are getting a very beautiful bar chart right so now if you want to zoom it or zoom out you can do it right cool guys so after understanding bar chart let's suppose if you want to create a line chart so for creating line chart let me just replace the bar chart with lines at you and now here I'll just write here St dot line underscore chart and I will write you once again Theta right inside this and let me execute this so on execution you can see that I am getting bar chart line chart now if you want to draw the area chart then also you can do it let me just copy this title and I will replace it with the area chart and the same thing instead of line I have to just simply write here area so you can see that we are having easy functions here right so these are some easy functions you can implement it to see the data visualization you can see that I'm getting the bar chart line chart area chart right all right guys that's it for the session if you like the session please do subscribe share and like thank you if you want to make a career in data science then intellipat has IIT Madras Advanced Data science and AI certification program this course is of very high quality and cost effective as it is taught by IIT professors and Industry experts

Channel: Intellipaat

Views: 26,688

Keywords: streamlit tutorial, streamlit, streamlit python, python streamlit, how to streamlit, how to use streamlit, streamlit python tutorial, tutorial, python tutorial, streamlit tutorials, python streamlit tutorial, streamlit app, streamlit tips, python tutorials, streamlit dashboard, tutorial streamlit, machine learning streamlit, learn streamlit, streamlit quick tutorial, streamlit short tutorial, streamlit tutrial, streamlit tutorial youtube, intellipaat

Id: YzvMpvXyUfs

Length: 41min 50sec (2510 seconds)

Published: Tue Oct 18 2022