Hello guys.
So we are going to continue the discussion with respect to Python.
And in this video we are going to discuss about a Streamlit app.
Uh, if you don't know about Streamlit, it's a, it's an open source app framework for machine learning
and data science projects.
It allows you to create a beautiful web applications for your machine learning projects altogether.
And the best thing over here is that you even don't need to know HTML, CSS, uh, just by using the
components of Streamlit, you'll be able to create beautiful web pages, right?
And right now, uh, since generative AI is becoming very much famous, Streamlit has been extensively
used over here to create chatbots.
Okay, so we'll be discussing all about this.
Uh, as I said in this video, we will try to understand from basic.
We'll see what are the important components with respect to Streamlit and how you can get started with
Streamlit.
Okay.
So let's quickly go over here.
Uh, so here it is.
I've, uh, given this particular definition.
So it is nothing, but Streamlit is an open source, uh, app framework for machine learning and data
science projects.
It allow you to create beautiful web applications for your machine learning and data science projects
with, uh, Python scripts.
Okay.
So first of all, we will go ahead and, uh, you know, import this library.
And for that I really need to install in the requirement dot txt.
So I'll go ahead and update it over here.
So let's quickly go ahead and do the installation.
So pip install minus r requirements.txt.
Over here you can see that the installation will be taking place.
So here uh once the installation takes place you'll be able to see I will be able to start using this
particular library.
So here let me quickly go ahead and open one of the.py file.
So here, uh, I will just go ahead and write streamlit.py or let me just go ahead and write app.py
file.
Okay.
And this is where I'm going to write my code.
So here you can see the installation has taken place.
Now to start with Streamlit.
Uh, what I'm actually going to do over here is that I'll go ahead and import Streamlit as st.
Okay.
So we are going to import this as SC.
St is the alias and this is the library that we are using.
Along with this, let's go ahead and import pandas as PD.
I'll be importing pandas.
I will also import numpy so that I'll be using some of the basic applications.
And in order to start with the Streamlit web application or here, I will first of all show you some
of the important components.
One of the component is nothing but title, right?
So let me just go ahead and write this title over here, and I will just use this s t dot title, okay.
S t dot title.
And let me just go ahead and write something like hello Streamlit.
Okay.
Now we will go ahead and execute this.
So in order to execute it, you know that this app Dot Pi is inside your 14th Streamlit folder and it
is, which is inside this entire Python folder.
Right now I'm in my Python, so I'll go ahead and write CD 14 Streamlit.
And in order to run this app dot pi file.
Right I will just go ahead and write streamlit run app dot pi.
So once I execute it here, you will be able to see that I will be getting this option, which is called
as Allow access.
So I'll click on this and my web browser will get loaded which will look something like this.
So here is the default message that is nothing but the title.
And the best thing over here is that I just used.
I did not write any H1 tag or anything as such.
I just use this h2.sd dot title component.
Okay, and if I go ahead and inspect this, you'll be able to see that this will automatically get converted
into an H1 tag.
Right.
And these are some of the Div containers which will be created by that same code that we have seen.
Right.
That is SD dot title okay.
Now this is very much easy.
Let me just close this.
And here you can see by default it will be running in this localhost.
And the port is 8501.
So this is how you run the Streamlit app by just writing Streamlit run app.py.
Okay.
Now, uh, let's go to the next step and, uh, let's display a simple text.
So here I want to display a simple text.
Okay.
Now this simple text I can go ahead and write it in my page.
So I'll go ahead and write SD dot write.
And I'll say, hey this is a this is a simple text.
Okay.
Uh, this is how we write in the page, uh, of the web app that we are specifically creating with the
help of Streamlit.
Okay, now let's go ahead and create a simple data frame, and we will try to, uh, print this data
frame.
Okay.
So here I will just go ahead and write df pd dot data frame.
So I have my first column, I have my second column.
And these are all my information okay.
Now let's go ahead and display this data frame.
Display the data frame okay.
Now displaying the data frame again I can go ahead and write SD dot write.
And I'll say hey here is the data frame okay.
Let's see how the data frame will get displayed.
So I'll go ahead and write SD dot write again.
So write is a function which will be able to display this particular data frame okay.
So once I display this uh, the next thing what I can do is that I can also create my line chart.
Okay.
I want to probably go ahead and create a line chart.
So I'll go ahead and create a line chart okay.
Now in order to create a line chart again we have to use St.
And then we have something called as st dot.
Here you can see line chart link button.
Everything is there.
So we will go ahead and use my line chart and let's create a chart data okay.
So this will basically be my chart underscore data I will create some data over here some basic data
I'll go ahead and write hey this is nothing but PD dot data frame.
And let's go ahead and create it okay.
So PD dot data frame here I will say hey go ahead and uh use NP dot random dot rand n random numbers
use 20 comma three.
That basically means how much, how many rows and how many columns.
That is three columns and 20 rows.
Okay.
And then I will just go ahead and create my columns also.
So columns will be nothing.
But since I have only three columns so I will go ahead and write a comma b comma c okay.
So once I execute this uh I will be able to see this line chart.
And inside this line chart, this will be nothing but my chart data.
So let's go ahead and execute it.
So I will just go ahead and delete this and let's save this.
And here I'm just going to run Streamlit run App.py.
So once I execute it uh, this is my web browser that has got opened.
And uh, here you can see how beautiful chart it is being able to display.
This is my data frame altogether, right?
I can also expand it.
I can also download it.
Right?
If I download it, I can download it in the form of CSV file.
So here is also on my chart which looks really awesome.
I can save this as a SMS or svg png file right?
You can also open in Mega editor, compiled view source anything that you want.
Okay, so this also looks, uh really good.
And here you'll be able to see all this particular information.
I can also zoom in.
Zoom out okay.
Now this is a very easy way of creating this quick application.
And here I do not even have to use much HTML.
Right.
So this really becomes very much easy for a back end developer who really wants to develop a quick POC
or interactive POC and probably show it in front of anyone.
Right?
So, uh, this was one example.
Uh, let me just go ahead and play with some more examples.
Okay.
So I will close over here and, uh, this time I will I will just go ahead and create one more file.
And this time we are going to work with widgets.
widgets.py file.
Okay.
Now with respect to this widgets, uh we'll create uh some more widgets.
We'll use some more widgets.
Uh, so here uh, widgets basically means uh we will try to create some more interactive application.
And for that Streamlit also provides some amazing basic widgets.
Okay, so first of all I will go ahead and import Streamlit Streamlit as st.
Okay.
So once we define this uh okay then I will just go ahead and write my St dot title.
So HD street dot title.
Let's say Streamlit.
Text input okay.
Like we have an option of putting text input.
So let's say I will create a variable name.
And I will go ahead and write street dot text underscore input okay.
So this basically means I can give an input in my text box.
Let's say here I'm going to say end.
Enter your name okay.
Now, if I execute this over here, you'll be able to see that, uh, I will just go ahead and say if
name colon.
Okay.
That basically what does this basically mean.
Right.
If name colon that uh, see when I run this particular uh widget.py file, right when it opens the Streamlit
app, it will initially show me a text box.
And if I'm putting some information and if I'm pressing enter, that entire information will get saved
in this particular name variable.
So if I go ahead and write if name then here you can see s t dot write.
And here I'm going to just go ahead and call this okay.
So let's say I'll go ahead and write hello.
And this should be my whatever name that I'm actually giving.
And it should display this right now.
Let's run this okay.
Here.
This time I'll go ahead and write Python widgets.py file.
Okay.
So if I go ahead and execute it.
Uh oh.
Sorry.
It should not write Python but instead I should write Streamlit.
Run widgets.py.
This is the command that we usually use in order to run this particular file.
Okay, so let me repeat it.
Streamlit run widgets.py.
So once I execute this here, you'll be able to see that I'm getting this particular information.
Now here when I as soon as I write my name Kirshnik I press enter.
So here you can see that, uh, Streamlit has no attribute, right.
So that is the problem because I wrote double two doubles, two doubles.
Right.
So I will quickly go ahead and fix this issue.
Now, let me run this again.
And here you have my browser.
Now let me go ahead and write my name Krish Nayak okay.
And let's press enter.
So here you can see this is the message that is getting displayed.
Perfect.
Now let me do one thing over here.
Uh, here.
I'm not going to stop over here.
Okay?
I will also try to use some kind of slider.
Now, in order to use the slider, uh, let me do one thing over here.
Uh, I will just go ahead and say, hey, uh, let's create a slider.
So for creating a slider, I will say, hey, let's create a variable called as age.
I'll say TX dot slider.
And with respect to this particular slider, this is again another component that we can use over here,
which will be an interactive component.
And here I'll say, hey, select your age and the age value will be between 0 to 100.
And here you can see the third parameter that I have uh uh that I'm actually giving is 25.
Okay.
We'll run this and then you'll be able to understand it okay.
As soon as I probably select this, uh, what I will do is that I will just go ahead and write SD dot
write.
Your age is something like this.
Okay, now let's go ahead and reload this okay.
So here you can see select your age.
So once I go ahead and update this.
So minimum is 25 that I can select over here.
And uh initially if I reload this you will be able to see that it is pointing to 25.
Right.
I can also reduce it.
But minimum first of all it shows 25.
Then I can select any age and automatically this updation will basically happen.
Now this is one of the amazing component that is probably present over there.
There is also a component which is called as select box okay.
Now in order to select box is just like using a drop down box okay.
So here you will be able to see that to in order to use the select box, let's say I will go ahead and
create this something like this okay.
So I'll say hey this is my options.
I want to go with Python Java C, C plus plus JavaScript.
So this will be a list of options I'll say S3 dot select box.
Choose your favorite programming language and I'll give the options over here.
So this will basically be my choice.
And here you can go ahead and write that particular choice.
So I'll save it.
Let's go ahead and execute it again.
So I will reload it.
So here you can see hey I can go ahead and select any of this particular language like JavaScript and
automatically are able to write it.
So this looks like a very good form because I'm, I'm not writing much, uh, much information over
here.
Right.
It's it's very much simple.
It's very much easy that I'm able to get this entire information right.
Uh, let's try one more thing.
Okay?
Let's try, uh, uh, data frame, uh, in short, and, uh, let's see how it gets displayed.
So here I've already shown you the data frame anyhow.
So let me just take this particular data.
I will go ahead and import pandas as PD import pandas as PD.
Okay.
So the main thing over here is that they are lot of interactive components that are available.
So here I'm creating my data, I'm converting that into a data frame.
And I'm writing S3 dot write okay.
So again if I go ahead and reload it.
So this is my entire data frame.
And you can actually see this particular data frame right.
So like this I can quickly go ahead and create my uh entire form itself.
Okay.
Um, I also have an option to probably create an upload button.
Okay, for for the file upload.
So here what I will do in order to create an upload button, I will go ahead and write uploaded underscore
file.
So this will be my another component.
And I'll just go ahead and write s t dot file uploader.
And I will say hey choose a CSV file okay.
Choose a CSV file and I can basically go ahead and choose this.
And I'll say, hey, let's keep that, uh, type as CSV.
If I want different other files, I can probably keep this in the form of list.
It is up to you.
Okay.
Um, and you will be able to do this right.
So finally, if you go ahead and see if uploaded file is not none.
Okay, I can go ahead and write.
DF is equal to PD, dot read underscore csv and I will give my uploaded file over here.
And I will just display that particular uploaded uploaded file in the same page.
That is nothing but DF.
Okay, let me do one thing quickly.
Mhm.
I will save this entire CSV.
Okay.
So I'll say hey DF dot two underscore CSV.
And let me just save it as uh sample data dot csv.
The reason is that I just wanted one sample data.
That is the reason okay.
So I will go ahead and execute it.
So this may have got created.
Uh let's go ahead and use this particular CSV file.
So I will go to this particular website and I'll go back to over here.
I'll click on browse.
I will go inside this and let's go ahead and upload this.
So once I open it here you can see that I'm able to display it right.
Which is again good.
Uh altogether.
Right.
So these are some of the important components.
Again, I would suggest go to streamlit.io.
I think this is the most easiest framework that I've seen.
There are a lot of components which you can go ahead and check it out.
And uh, as you'll be seeing that if I create any videos, right, let's say over here, I want to play
with text, I can go ahead and play with text images, videos.
So charts, widgets.
So I've just discussed about widgets.
They are also charts.
You can use different different charts.
You can use different different graphs.
You can even use page navigation.
So in short just by using this you'll be able to create your entire, you know, the web application
that you actually require.
So, uh, this was it.
Uh, now in my next video, what I'm actually going to do is that I'll just try to develop a machine
learning application and interactive machine learning application and show it to you.
Okay.
I know, uh, if you have not learned about machine learning, don't worry.
But just to give you an example, how does the Streamlit app looks like with the help of a end to end
machine learning project?
I really wanted to show you that.
Okay.
Um, but again, uh, if you don't know any machine learning algorithms.
So I would suggest please go ahead and check some of the algorithms and automatically you'll be able
to understand it.
Okay.
So yes, this was it for my side.
I will see you all in the next video.
Thank you.