Till now we have seen that how we can integrate Yolo V8 with flask.
So now we will create a complete web app.
So for the front end design, I will use HTML and CSS and for the back end I will be using flask.
Let's get started.
Have already done the complete code, so I will explain you step by step the complete code.
But before we go towards the code, let me show you how our web app will look like.
So if I just go to templates.
So our web app will consist of three different pages.
One is the home page and the other two pages let me show you.
So if I just click on index project, so this is our root page or home page.
So let me just open this.
So now you can see over here, this is our our app web app, our homepage will look like.
So this is the home page of our web app.
So you can see over here we have this is our header.
And here you can see that I have added some sample results from my different projects.
Okay?
And here we have the content page and here we have the footer.
So if you just click over here, it will redirect towards my YouTube channel.
Okay, so this is how it all looks like.
So in the home page you can see that we have our video and live webcam.
So this is my home page.
This is the root page or home page.
If I just click on video, it will redirect me to the video page where I can just upload the video and
run YOLO detections on that video.
And if I just click on live Webcam, it will redirect me to the live webcam page where my webcam will
automatically turn on and I can do the detection using like webcam or it will do the detections on the
live webcam feed.
Okay, so this is the home page and let me show you the other two pages as well.
So when the users click on the video tab in the home page, like the user, click on this video tab,
it will redirect it to this page, which is over here.
So here the user will upload the video and then click on Submit.
And in here in this screen, you will see the live detections or detections on that input video.
Okay?
Oh, okay.
And if the users go to the here and just click on live webcam.
Okay.
So it will redirect him to the live webcam feed page.
So it will be the user will be redirected to this achievement page.
So here.
Our webcam will be automatically turned on.
And you can see the live detections over here.
Okay, so this is how it all works.
So we have created three web pages.
One is this home page.
And if the user clicks, if your user wants to test his model or any custom model.
On any video, the user will click over here and you will be redirected to this HTML page.
And here the user will upload a video and then click on Submit and he can see the detections on that
input video over in this screen over here.
And if the users want to do detections on the live webcam feed, you will click over here and the user
will be redirected towards this live webcam feed page.
And the users, if you are just testing on the live webcam, if you're using laptop, your laptop live
webcam webcam will be turned on and you can do the detections on the live webcam feed.
Okay.
So these are number three pages.
And this is our home page.
This is our live webcam feed page.
And this is our user wants to test on some video.
This in this video at this page, HTML page, you will upload a video and do the detections on that
on that input video.
Okay.
So this is the flask app.py file over here.
You can just you can see over here and these are our three HTML pages.
So let's just focus on flask app.py and then we will discuss these HTML pages later on.
Okay.
So now you can see over here from here you can see that I'm just importing floss.
So just remember, if you have installed flask previously, you need to install flask by just writing
pip install flask over here.
So you just need to write pip install floss if you haven't installed flask already.
Okay.
So I have ordered installed the flag so you can see that the requirements are already satisfied.
But if you haven't installed it, it will take some time.
Then you can see that we are importing class pom.
POM POM is basically required to receive the input from the user.
Okay, so.
When uploading a video file to our object detection model.
So where we are using class.
So if you just go over here.
If you just go to our YouTube page.
Okay.
So now you can see here, here, here, the user will upload a video, okay?
And then we'll click submit.
So to allow the user to upload a video, we are using flask form.
Okay, So flat form is the it is a flask form.
It is required to receive input from the user to receive the input from the user in the form of video
file or MP4 file.
We required the fourth class form.
Okay, so that user can upload a video.
Okay.
So then we are just using submit field strong field integer range field.
So why we are I'm just using integer range field so that we use the integer range field.
Okay.
Let me discuss this integer range later on because later we'll be using it.
Plus you can see here from W forms dot validators import input required.
So here we are just using validators.
So to validate that the user upload the video file and it is in the correct format.
So for example, like you can see over here, here the user when the user uploads a file video file
over here, we want to make sure that this is an mp4 avi file.
Okay?
It should be a video file, it should not be an image or some PDF document to make sure that a user
uploads a video file in MP4 format.
We require validators to make sure that the user upload the video file and it is in the correct format.
So make sure that the user uploads the video file and it is in the correct format.
We require the validator so that user upload that MP4 or dot file it should the user should not upload
that JPEG or PNG file image file or a PDF document or some other Excel sheet.
It The user should upload a video file or it should be in the mp4 dot file to make sure we require the
validators and to run the YOLO V8 model.
We are just importing cv2.
And if I just go over here YOLO Dash video dot pi and here we have the video detection function.
So we are just importing this video detection function from the YOLO dash video dot pi.
And here we are just initializing.
Plus this is the requirement of class.
And here I'm just defining a secret key.
Moin You can define the secret key by any name.
And they're here.
I'm just defining the static files.
So basically, when the users upload a video file over here, when the user upload an input video file
over here and then click on submit so that that the detection can happen on this video.
So when the user upload a input video file over here, that input file will be saved in the static files
folder.
Okay.
So whenever the user upload any file video file, that video file will be saved in the static files
folder.
So any input file will be any input video file will be saved in the static files folder.
So now, as I told you that we use the flask form to receive the input video input from the user.
So use flask form to get input video file.
Okay.
We don't need the to get the input video file from user.
Okay.
So we are using flask form to get input video file from the user and we have created the class upload
file file form.
So.
We are stored the uploaded video file path in the file field in the variable file.
So there you can see over here in the file field.
In this variable file, we store the.
So if the user upload any input video file, the file path of the input video file will be stored in
this file variable.
So the file path of that input video file will be stored in this file variable.
And here you can see that we are just calling the validators to make sure that the user upload a input
video file and it is in the correct format.
Okay.
So we have added validators to make sure that the user inputs the video in the valid format and user
does not upload the video when end user does upload the video.
When prompted to do so.
Okay.
For just remove this.
We don't need it.
And then we have the submit button so that user can just submit the video file and we can do the detections
on that input video file.
Okay.
So now here again we have the generate frames function.
Okay.
So generate frame function is same.
Like you can see that we are just pausing the video detection function which we have in the YOLO dash
video file.
So the video detection function will give us the detection.
On the detection Will the detection we have the.
Output.
Bounding boxes.
We have the bounding boxes around detected object.
So in detection.
So again, to show you the video detection function will give us the output image which contains the
bounding boxes around the detected objects with label and confidence score.
So in this detection dash, we have the we have the bounding boxes around detected objects with label
and the confidence.
So now we are just convert encoding the current frame.
And so as basically task requires the input image to be converted in the form of bytes.
So we are just converting the image or the current frames to be converted into bytes using dot two bytes.
We are just converting the image for the current frame to two bytes because it is a requirement of class
that the input, image or frame should be converted into bytes.
Okay.
And so here you are, student content type to convert the individual frames into a subsequent frame
so that it looks like a video.
Okay.
And then we have the generate frame web.
So we just call this function.
We just want to access the web cam or we just want to run the detections on the webcam.
We just call this function.
Generate frames, web.
Okay.
And then you can see over here.
We are using approved method.
I am just creating a dash.
So what does it reflects that?
So whenever this is called, we will redirect it towards the home page.
Okay, so if, for example, app dot go dash or dash home will be called, we will be redirected towards
the home page of our web app.
Okay.
And now you can see here we are just doing the session dot clear.
So what does session dot clear does is that we are just, uh, uh, so if we have some if you have tested
on some input video, we have done sessions on a video input video.
So we are just clearing the session.
Okay.
So that whenever we want to test on some other video, the previous input video which we have passed,
that detection should not happen on the previous input video.
So we are just clearing the session storage and removing the input video file paths from the session
storage because we when we upload a new video or read on the web app, a web app, the detection should
happen on the new video which we have uploaded, not on the previous video.
Okay.
But now we are user users.
Now here we are using Aptroot method.
We are creating another webcam.
Okay, so whenever this user just go on this dash webcam URL, the live webcam feed will will be on
and user can do the actions on the live webcam feed.
Okay.
So use app dot method to render the webcam at dash webcam.
Okay.
And here we are just doing the session dot clear as well.
So if we have done detections on the live webcam feed.
And I just refresh the page so I can do detections on the new live live webcam feed as well.
Okay.
So now using app dot route method, I am just creating a front page where you can see that.
The page on which can can do detections on the input video.
Okay.
So basically the front page which I'm referring is this.
This is basically my front page.
Okay.
So the page, the HTML page on which we can do detections on the video feed on input video.
Okay.
So, okay, so now you can see here, I'm just calling the upload file form, which we have created
over here.
Upload file form.
So I'm just calling this over here.
So create an instance for the upload file form.
Okay.
So our uploaded video file.
So whenever we upload using flask form, when we upload a video file.
So as I told you, we use flask form to receive get input video file from the user.
Okay.
So our video file path will be saved into this file variable.
Okay.
So our input video file path will be saved in this file variable.
And here you can see that we are using session story to save your video file path.
So in the session storage we basically save the video file path.
Okay.
So now you can see here we are just cleaning the session dot clear.
So we are just cleaning the session storage using session dot clear so that our previous input video
file path is not saved.
And when we upload a new video, the detection should happen on the new video or if we rerun the application
or open the application again.
So the detection should not be happening on the previous video.
So okay, so this is the reason we are just joining the session storage because we haven't uploaded
or we have saved the video file path in the session storage.
Okay.
So now here we are just creating a dash video.
So in that whenever the user call this dash video URL, okay, so the detections will be happening on
the video.
Okay.
So as you can see that we have saved the video part in the session storage.
So I'm just calling that video part and doing the detections on that video.
Okay.
And here we have the Web app.
So basically I'm just calling the Web app.
So to do the detection on the live webcam feed.
Okay.
So that's all what we are doing over here.
Okay, so this is the web app and everything.
So this is our flask app.py file for this project.
For this part of the tutorial.
Okay, So I hope you have understood a code over here.
So if I just go over here and explain you the dot HTML files as well.
So this is our basic index project.
Dot html is our home page html file.
Okay.
So now you can see over here we are doctype HTML.
So it means that we are using HTML.
And here I've just define a language English over here.
Okay?
And here I've just set the title of my page so you can just show you.
Okay, so you can see that this is our home page and you can see the title Object detection Dash V8,
which we have passed over here.
Okay.
And now you can see over here, I'm just setting the body like the what would be the font family of
the body, the margin and the padding here.
I'm just setting the margin padding and font family of the body.
And here I'm just defining the header background color of the header is black.
So let me show you.
So now you can see that this is my header and you can see that the background color of the header is
black.
Okay, so this is the header.
So here, just like the background color of the header is black and the color of the text is being set
as white.
So if I just show you so you can see that the color of the text is white over here, the color of the
text color is white, okay?
And the height of the header is 120 and text dash alignment like the text will be aligned towards the
right side.
So now you can see here, uh, our text is on the right side.
Okay.
So, uh, and the height of the header is 120.
We have just set it and if I just show you, we have set the padding or the margins among these things
like the margins over here or the padding is we have set is five over here.
Okay, so now we are just creating the second header.
So what is so basically you can see the image over here.
This is basically our first header and this is our second header.
All this is our second header.
Okay.
So the background color of the second header is blue.
So now currently you can see a background image of the football player over here.
So beside this background image we have the header color as blue.
Okay, so we have this behind this image.
We have the hydro color as blue, which we have set over here and here I've just set the margin top
as -30.
And you can see over here, I have just set the background image as a set.
The background image or the path of the background image pass is one dot PNG.
So let me just show you this background image over here.
Well, if.
Just for the images.
So now you can see that this is the image one dot PNG image which I am using for the background.
Okay.
So if I just show you over here.
So now you can see that have just passed the path of the one dot PNG file and this is the one dot PNG
file.
And you can see here, you can see that this is appearing as the background image because have set this
over here.
Okay.
And I'm just setting the bedroom size.
And other things.
And here I'm just setting the list index.
So L stands for list index.
Okay, so display inline dash block.
So here I've just defining the display as inline block.
So as you can see that whenever we define this, they appear in the form of like first element we have
here.
The second element of the list we have here.
And the third element of the list will be here.
But if we set display inline dash block, they appear in this in a single line, the block format,
which you can see over here.
So here I'm using the list index and inline dash block means that home video live webcam will be appearing
in the line like they will not be appearing after one, two, three.
Like they will be appearing in a complete line over here.
Okay.
And here are just set the border radius as ten.
So if I just don't set the border radius, so I'm using border radius, we are just creating a rounded
rectangle.
You can see now we don't have the rounded rectangle over here.
Okay, So if I just set this again, so now you can see that we will have the rounded rectangle over
here.
So using border radius, we are just creating this rounded rectangle over here.
Okay.
And here, just define the padding, padding and margin.
The difference between each of the blocks.
And now you can see that whenever we hover it, we get the background color as red.
Now you can see here, whenever I hover any of the border so we get the background color as red.
So have just set here the background color as red, which you can see over here.
Okay, so.
Okay.
So.
Okay, that's fine.
So now here we set the header color y text decoration is none and width at 100%.
Okay, so these are just styling.
So here we are just joining the styling using CSS.
So here you can see the style tag and here this is all the CSS.
This is not HTML, this is all CSS.
So I'm just doing styling using CSS.
Okay.
Well, he is.
Right.
So understanding is done here using CSS, you can just check it out.
Okay, So now you can see over here.
Here I'm just defining my three home video and live webcam.
So whenever the video user will click on the video button, it will be directed towards the front page,
which is the video feed page.
Okay.
So if I just go to Flask app dot Pi.
So now you can see that dash front page will be called and in this dash front page URL in the dash front
page URL, we are rendering the video project new dot html page.
So video project new dot html is my.
Uh, page HTML page on which we test on our video.
Okay, so here the user uploads the video and click on submit and the detections happens on the video.
So.
So now you can see that when we call the front page URL, the user will be our video project, not a
new page will be rendered.
Okay.
So if I just go to over here index project new.
So now you can see here, whenever the user clicks on the video button, the front page will be called
and the front page will be called and the user will be rendered towards the video project, new HTML
page, which is the page where the user uploads a video and the detections happen on the video.
And when the webcam URL will be called the user like you can see here that the webcam URL will be called,
the user will be directed to the UI dot HTML page, which is our which is our page on which we do the
detections on the live webcam feed.
So if I just show you, okay, let me just show from here.
So now if I just click over here, so this is the dot HTML on which we do detections on the live webcam
feed.
Okay.
Basically for this school here.
Okay.
And here we just write a sample results.
We just don't need it currently.
Like, so here.
Okay.
So.
Now, you can see here, if I just go further down here, you can see that we are just defining sample
results.
So if I just go to our home page now now you can see here we have the sample results.
So here I'm just defining sample results.
And now here you can see that I'm just displaying three images.
Sample image, sample results, images one, two, three, PNG.
So you can see that here we have the three images one PA, two PA three PNG.
So.
These are the images which I am just displaying in the sample results.
Now you can see over here, this is my one PNG.
This is they both being.
This is the three PNG.
Just showing the simple results.
Okay.
So now you can see that you have passed the one PNG to PNG and three PNG over here.
Okay.
So now here you can see that here I'm just defining a class and just writing some text over here.
So now you can see over here.
Here I've just written some text, so I've written all this text over here in this okay part.
And you can see that here I'm just passing the one dot PNG image to display this image over here, which
you can see over here to display this image.
Okay.
And here you can see that I'm just creating a pool deck page over here.
So this is the contact page which I'm creating.
You can see over here.
So this is the contact page which I'm creating over here in HTML and here just defining the footer.
So then the user click on this URL.
He will be redirected towards my YouTube channel.
So you can see that when the users click on this URL, he will be redirected towards my YouTube channel,
which you can see over here.
So this is all from the home page, which is our index project new page.
In the similar way, I have just created a video project.
New dot html contains the page html page on which you do detections on the video.
So this is the same CSS which we have used and the same thing we have done all over here as well.
In the same way we have the dot HTML page on which we do detections on the live webcam feed and the
same style we have used in the style tag.
We have just one CSS over here.
So for styling we use CSS.
Okay.
So in the style tag, I have just defined all the CSS you can see over here and you can see we are doing
detections on the live webcam feed.
Okay, So.
Now let's run this video and see.
Just over.
Now let's run this flask app.py and do the selection on the video and live webcam feed.
So I'm just running this flask app.py file.
Okay, so just click over here, copy path and just over here and run directory and set.
Just click over here, copy path and just click this.
And CD means we need to set the current directory and just enter this path.
And now we will run the python flask app.py file and we will do detections on the on the video and as
well on the live webcam feed as well.
We'll just run this flask app.py file and let's do the detections.
On the video as well as on the live webcam feed.
So just click over this URL.
So now we will be redirected towards our home page, thus remove this previous open this.
So now you can see that we are just redirected to our home page.
Okay.
So this is our home page.
If just click on this home page.
Uh.
They just click on this cone.
Okay, So it's giving me error.
Let me just check it.
Okay so index project dot html.
So this is wrong.
We need to redirect it towards our home page.
So in order to redirect towards our home page, we'll just go over here.
Okay.
So test add dash home.
Okay.
So just add dash home over here and click on Save.
Now just stop this control C and invites not stopping y.
Okay, stop now run again the flask app dot.
So I think it will work fine now.
But this might take a few seconds.
Let's wait and see.
Okay, so just click on this URL, just close the previous two.
And now let's check it if it's working fine or it gives some errors so we can correct it if there is
an error.
No worries.
So let's just click on home.
Okay.
So we will direct it towards this home page, which is Dash Home.
Now click on video.
Okay, so now here, now you can see that I told you we used class form to get the input from the user.
So just click on Choose File and just pass this bike dot mp4 video and click on.
Submit.
Okay.
So now you can see that.
That's wonderful.
So now you can see that we are able to do the actions on the video.
And here you can see the results.
We have done the directions on the video and here we have the bounding box around the person bicycle.
We have the label person, we have the confidence score as well.
So here we are detecting the traffic light and you can see that we have that labeled traffic light as
well as the confidence code as well.
So that's impressive.
Like you can see the detections on the video are very impressive.
Like, uh, the model is able to detect the bicycle and assign a label and create a bounding box and
the confidence score.
So now you can see that we have created a bounding box around the detected object.
We have signed the label and the confidence score as well.
So now let's test on a video feed.
Okay.
On the live webcam feed.
Okay, so just click on live webcam and see if we are able to detections on the live webcam feed or
not.
Let's get started.
But you can see over here we able to track sections on the night webcam feed as well.
So the actions on the live webcam feed is being done.
Okay.
Oh yeah.
It was good.
Reflections on the live webcam feed as well.
So expecting the cell phone as well.
So the results are quite good and.
So the tablet.
This is not a cell phone.
It's our own action.
Okay.
So you can see over here we have created a complete Flask web app and have done predictions on the video
as well as on the live webcam feed.
And the results are quite impressive.
Okay, so now you can see that we have created a complete flask app or complete web app.
Sorry.
Okay.
And let me just go further.
So now you can see over here, uh, this is our complete web app.
We have the home page.
We have the video page on which we can do redirections on any input video.
Last we have the live webcam feed page as well on which we can do detections on the live webcam feed
as well.
So that's all from this part.
In the next part we will see how we can train your model on any custom data and how we can get actions
on any custom data set.
And we will be creating a complete web app for that custom train model as well.
So let's see in the next part.