The last video tutorial we have seen that how we can integrate YOLO v9 with flask and create a complete
web app.
But I have skipped how you can create a web app layout using HTML and CSS.
As in the back end we will be using flask, but to create the complete web app layout, I will be using
HTML and CSS.
And in the last video tutorial I did not explain how we have created this web app layout.
So in this tutorial I will be creating this complete web app layout that we have created for our object
detection application.
So this is uh, let me explain you how we create this complete web app layout.
And then we will start writing the code.
So this is how our complete web app layout looks like.
So in the blue color over here, this is the sideline.
Uh, this is the sidebar where you can see we have different icons.
And here is our right panel.
And in the right panel we will have our application name over here.
So currently it's Photoshop application written.
But as you know that we are doing object detection using YOLO v9.
So we will have object detection as our application name.
And here I have added the logo.
So you can add your own company logo as well.
So it's all depending on your choice.
Or you can skip it as well.
And here you can see this is the tablet area.
In the tablet area you can see this black color.
So this is a tablet image.
And inside this I will be displaying my output image or uh, in uh live webcam feed or output video.
So the user will upload an image or video.
And over here in this tablet area we will be showing you the, uh, showing you the output image or
video with detections like using YOLO v9 we will be detecting different objects like over here you can
see person bus a handbag, backpacks all this.
So we're detecting different things.
So we can divide this complete layout into, uh, three different containers.
Okay.
So the first one will be the sidebar, the second one will be the, uh, the first one will be the sideline.
Uh, the second one will be the sidebar, and the third one will be the right panel.
So this complete layout can be divided into three different containers, uh, sideline sidebar and the
right panel.
Okay.
I think I've just.
So now you can see that we can have three different containers.
Or this complete layout can be divided into three different containers sideline sidebar and the right
panel.
Okay.
So what is container?
Container is basically a division or and in HTML code to create this division we can use div tag okay.
So container is nothing but a division.
Uh and to create this division uh we will be using div tag in HTML code.
So we'll be creating a main page.
And inside this main page like this complete is our main page.
And inside this main page we will have three different divisions.
Uh one for the sideline, one for the sidebar and one for the right panel.
Okay.
So after uh, containing the creating three different containers or using our, uh, like three different
visions using div tag in HTML, uh, then we will go into the sidebar and here we will create different
icons okay.
So we will create multiple different icons.
So after creating different icons uh.
In the sidebar.
Uh, then we will go towards the header and in the header, uh, then we will go towards the right panel.
So this is the complete right panel.
In the right panel we will create two different containers okay.
So uh in right panel we will then have two different containers.
One is for the header like you can see over here.
And the second one is for the tablet area in the header we will have the name of our application plus
uh the logo over here.
And in the tablet area we will have our output image or output video being displayed.
So this is how our complete web app layout looks like.
So.
So let's start writing the code and let's design this complete webapp layout.
So I have just given you an overview of how we will create this web app layout.
So now you can see over here we have our boilerplate code.
So first we will change the title of the web application and just write it over here object detection
using object detection.
That's fine.
So after we change the title of the web app, now we will link our CSS file.
Okay, so I will write a link to the CSS file.
Okay.
So now you can see that CSS file is empty over here style dot CSS.
And we are writing this HTML CSS code from scratch.
So.
Will link to the CSS file and for this.
I will just write over here links CSS and you can see that it automatically, uh, links to the CSS
file.
But you can see over here we have added the CSS file static folder.
And you can find it over here.
It's not in the templates inside this HTML.
So for this, what I will do is.
I would like to go out for.
And we are looking.
What the CSS file.
And the file name is.
Style dot CSS.
So this is how it works.
So we have linked the CSS file.
So now we will go ahead inside the body and we'll create three different containers.
Of.
So we'll create three different containers within one container.
So or we will create three different divisions within one container.
So I will just write main page.
Okay.
And over here I will just write.
Okay.
I think it's not working over here.
I try to add a shortcut in PyCharm, but it's not working.
Although it works in, uh, very well in Visual Studio.
Okay, so I will just toss.
The main page.
Let's try it again.
Or it's not working over here.
It works on Visual Studio.
I don't know why it's not working over here.
So we have created the main page.
We have created a sideline.
Uh, next we need to create a sidebar.
And then we also create a right panel over here.
So we have our sideline sidebar, and the third container will be the.
Uh, will be the right banner.
So I will just write over here.
So we have created three different containers.
So let's see how it looks like.
So now you can see.
We can't see any effect over here.
Okay.
So like we don't see any impact over here correctly.
Well.
So let's run this.
Python flask app.py file first.
So this might take a few seconds.
Okay.
So there is an issue over here.
Let's fix this up first.
So.
I think it will be a sort of.
Okay.
So now you can see over here it's currently empty.
So I will just go over here and inside this style dot CSS file.
And we will write some CSS code so we can see some results.
Or we can see three different containers on our HTML page.
So whatever we write over here will affect the complete page.
So margin is zero and box sizing will be.
For the.
Through the body color will be.
Okay, so let's see if it impacts anything.
How can also you can see that we can see the red color in the background.
Uh, but this is not what I am looking for.
Okay.
So we can change it to white.
But you can see that by writing some CSS code we can see the effect on our.
Application.
So now you can see over here.
We can create a main page.
Here you can see that we have written dot main page.
For the height of this main page will be.
100% of the complete viewport height.
Okay.
And we'll set.
Display as Plex.
So.
So we have set the property of our parent element as flex.
Okay.
So when the parent complex uh, flex, then the, uh, boxes or containers inside them can be easily
managed.
So we have set up.
So now you can see this main page is our parent box.
Or so we have set up parent box property as well.
So we can easily manage the boxes inside it or contained containers inside it.
Like we have three different containers inside the main page sideline sidebar right panel.
So now next we will write for the sideline.
Obvious.i dot side dash line.
Over here.
And we will just set the height as.
100%.
Over here.
That will be.
On 25 weeks.
So we are just setting, uh, the width, uh, size of the width as fixed as 20 px.
So if we just change the size of the application, the width will remain the same because we have set
it 25 x.
Uh, but if you, if we change the weight to 2,015%.
So when we change the size of the application, like, uh, zoom down or zoom up.
So the weight will also change.
And now we'll add the background color over here.
Background color.
Something light.
I have written a few names of the colors, I will just add it manually.
Similarly will do for the sidebar over here as well.
We will make the background color as.
So I will just add the hex value for the color.
The height will be 100%.
Uh, weight will be, uh, 15% of the complete application.
And then we have for the right panel.
We write write dash panel.
Well, we will keep the bright panel color as, uh, okay, we can just set the color as.
Uh.
Between or now.
For.
Let's set this as royal.
The height will be 100% of the remaining height.
Robert will be.
Uh, the 100% of the remaining bit.
Not for the height.
This all?
Let's see how it does.
Let's.
Okay.
So now you can see here we have our sidebar.
This is the side.
This is a sideline.
This is a sidebar.
And this is the uh right panel which we have over here.
So now you can see over here, but let me just change it to orange.
And so people just refresh this up now.
Okay.
So now you can see this is our sideline sidebar.
And this is our right panel.
Okay.
So we are good to go for now.
And let's make it to again light slate you.
Now I will add different icons into my sidebar.
So let's go ahead with this.
Now we will be adding different icons in the sidebar.
To add different icons, you can simply go to Fonts.google.com icons and you can.
Here you can find different icons like home menu, close setting, done favorite add.
So if you want to add different these icons into your HTML page, then you can go to Developers.google.com
Dafont docs, material icons.
And here you can see the setup method, how you can use this Google uh fonts uh, in in your HTML page.
So here you can see all the details over here.
So we'll just copy this link from here.
And you can find all the details as well like how you can use these icons as well.
So let's get started with this up.
So I will just go over here.
For light add material icons.
Okay.
Provided all this link over here.
Now we will go into the sidebar and we will be adding different icons.
Okay so I will just write span.
Okay.
Then I will be writing over here I dot material.
I think this will not also work over here.
Loss is equal to tr dash icons.
And we can go over here and we can pick any of the icon.
Uh, let me just write some code icon.
So I will be using this icon palette over here.
Okay.
And.
Okay, so let's see if we are able to add this icon over here or not.
Okay.
So now you can see that we can you can find this icon over here.
So that's good.
Uh, let's add the other icons as well.
National icons.
So in this way you can also search for different icons and add them.
So I'm adding adding all these icons.
Uh, plus, we can also need to add an upload button or an play button as well.
So let's add those icons as well.
So just copy all these links from here.
So here we have the file upload.
Then we have the play arrow.
And.
So then we have the.
LA own icon.
Then we have the great.
Video game.
So I've added all these icons over here.
Now you can find if I just refresh this up, you can find all these icons, but you can see that they
are a bit horizontal and this is not what we want.
Okay.
So let's make a few changes.
So we'll just go to our sidebar.
And we will just right over here.
Display.
Flex.
Dash.
Direction.
Thankfully column.
Okay.
And let's see.
Okay.
So now you can see it looks pretty fine now.
Okay.
But, uh, let's, uh, make improve some things.
So if I just write.
So now you can see there looks pretty good now.
But now they are, um, yeah.
Just uh, towards the edges.
So we need to stop this.
So for this I will just write.
Adding dash.
Of HTTP and padding.
Dash bottom.
Empty space.
Okay.
So now you can see it looks fine.
But now for the bottom.
I don't know what is the issue.
Uh, okay.
So the spellings are not correct for the spelling.
Uh, hopefully now this will fix up this issue.
Okay.
So now you can see over here.
Now it looks pretty fine.
Okay, so we are very good over here.
Uh, we can just change the color of the right white over here.
Okay.
Uh, plus, uh, we need to have add some styles, like I want to increase the size of these icons like
they are very small for now.
So to do this, what I will do over here.
I will dial.
Born that size.
36, pp.
Uh, color will be white.
Okay.
So let's see if there is any effect over here.
So now you can see the font has been increased for this icon okay.
We will do the same for the others as well.
Uh.
So we can simply copy this up from here.
And we can.
So now you can see the size of all the icons are increased, but you can see they have disappeared.
So let's create a circle around them.
So we will just write over here.
Span class is equal to circle.
So let's add this up over all over here.
And I will go to the CSS file over here.
And we are making all these changes in the sidebar.
So let's add down the code over here.
The background color will be gray.
A height will be.
There will be five x.
The weight will be 75 x.
Hello.
Next.
Refresh this up.
So now you can see that, uh, they look good now, but, uh, let's make them a bit circle.
So we write border dash radius.
Three person.
Okay, so now you can see they are not in center.
So let's solve this issue.
Display.
Flex.
Justify dash content.
Center.
The lighting.
This will fix the issue.
Um, but they are not saying that currently as well.
So we just need to write for the.
The.
Welcome.
So now there looks pretty good and they are now in the center.
That's fine.
Uh, one thing I want to do is I want to change this play button and video button to blue as well.
The background should be blue over here.
So what we can do over here is I will just.
Right.
Two dash.
Circle.
And let's make the back ground.
Uh.
Okay.
And we were using this blue circle over here.
Okay, so that's pretty fine.
Uh, I think we have these changes now.
Okay.
So that's good.
So now, plus when I hover over it I want to change the color as well.
So now you can see we have this class circle.
So when I hover over it.
And a background color should be yellow.
And when I click over it.
Background color should be.
I mean, so that's pretty funny.
Because now you can see when I hover it's yellow.
And when I click on it's green.
So that's look pretty amazing.
So what we have done for now is, uh, we have created our initial layout, like you can see over here.
Okay.
We'll just change the color of the slide line to light slate gray.
And now we'll add a box shadow in the sidebar.
Now to add the box shadow I will just write box shadow.
Okay.
And here I will pass the values.
You can check the documentation for more.
And here I will just pass the RGB color of the shadow.
So let's see if the box shadow can be seen.
Okay.
No, there is no box.
Box shadow over here.
Uh, let's see if we have made any mistake.
Things look pretty fine for now.
I think, uh, I know.
Okay, so if I just remove this from here.
Okay, so now you can see.
We can see the box shadow for now.
Okay, so that's visible.
I've just removed the background color.
Okay.
We are done with the box shadow okay.
And then now we just need to go towards the right panel.
So in the right panel we will have the header and the tablet area.
So over here, I will just write.
So over here I will be writing.
So I will give.
At the.
Okay.
And next we will have as well.
Dave.
And class is equal to.
Tabular dash container.
Okay, so, uh, in the header, we need to add few things.
Uh, let me first go to the style dot CSS over here.
So the background color of the header will be.
Royal blue.
The height will be of the header will be 75 x.
Okay.
And later on, I will just add a tablet container over here.
Uh, you can skip for the tablet container, but let's see how our header.
So now you can see here is our header.
And it's pretty fine.
Okay.
Oh, no.
Let's add the required things into the header first.
So here we have the empty container.
This is the class name.
You can write any offer here.
Okay.
And then we will add, uh.
Okay.
So this is the title we are writing the header.
On in the no go.
I will be adding this.
And the file name will be and your logo.png.
So let's refresh.
So now you can see here we have title but we are not in the correct position.
Plus the size is also very different over here.
So let's correct this up.
So we want the width to be.
90.
And the height will be 30.
So now you can see it, but they are not in the correct position.
So let's fix this up in the style.css file.
So we'll just write over here.
Display.
Flex.
Okay.
Well, we don't want into the column, so let's write like that.
Action.
Oh, no.
Justify Dash content.
Space between.
So let's see the impact of the.
We want these items in the center.
Let us add this stuff over here then.
You don't need to write this.
Oh, no, this is wrong.
Many years.
Okay.
Let's see.
Um, where I'm meeting.
Mistake.
Um, there is a mistake, but let's see where we are.
A.
Okay.
Oh.
Okay.
I think we don't require this.
Okay, so now it's pretty good now.
So we can also add a box shadow here.
Uh, we can keep the same values which we have written above.
Okay.
And now you can see that we can change the font for this as well.
So we can also add fonts.
So if I just go over here and go to fonts from here, if I just open this font from here.
Mhm.
So we can select any of the font from here.
Okay.
So let's use this font up from here okay.
And get font.
Get embed code from here.
And just copy this code from here.
And.
Go back towards this PyCharm notebook from here and just write over here and wants.
Okay.
And just right over here.
And.
And just so now we.
Okay, so we have added.
The link of the font over here, and it's, uh, really working fine.
Okay, so now I will just go over here.
And just right over here.
So we have the font family as Roboto.
And if there's not appearing, then it will use the default font.
The color of the text should be white.
And the font size should be.
1.5.
Okay, so now you can see the color is white.
Okay.
There is a shoe somewhere in the corner.
Thank.
Yeah.
Just remove this up from here.
Now the spacing issue will be definitely fixed.
Now you can see that it's going very edge to the corner.
So let's pick this up as well.
So there we have Dot.
Okay, so that's pretty good.
Plus.
We can fix this up as well.
The.
So now this will fix up the issue.
Now you can see that quite good position now.
So now below we need to add the tablet image.
And inside this image we will uh display our input videos or output images.
Output videos.
So first I will just write down the code over here.
Occurred.
And here I will pass down the URL.
So I will just write.
You are in for.
File name is equal to.
Yeah.
Okay, so that looks pretty good.
And let's see whether we have this.
Okay.
No, but it's not in the correct order like you can see.
So let's fix this issue up over here.
So we have this tablet container.
So the height of the tablet container will be.
Hundred percent.
Okay.
Display will be flex.
It will.
Okay, so let's fix this up as well.
So.
Um, let's make this position absolute.
Sorry, I forgot to add the tablet image.
I'll pretend the height over here.
And the wait will be 800.
And the height will be.
600.
So now you can see now.
Okay, a few things still left.
And.
I made one mistake.
There should be a semicolon and hopefully this will fix it.
Okay, so that's fixed.
So now you can see we have designed this complete web app layout.
I just need to add one thing over here.
Okay.
So.
Uh, the other thing which we need to add over here is, uh, we need to display.
Our.
Output.
Image.
Video.
It is equal to.
He.
So we have worked 740 and high as 540.
Okay.
So here we have the directions and it will be shown side over here.
Okay.
Yeah.
That's correct.
I made a mistake.
There should be detections.
Okay, so now it's fine.
Okay, so in this way we have designed this complete web app layout.
Okay, so that's all from this tutorial.
I just want to explain you how you can create your own web app layout, like I've seen in this video
that that's all from this video.
Thanks for watching.