The last tutorial we have seen that how we can integrate your V9 with flask.
So now we will just go ahead and complete this complete web app.
So before we go ahead, uh, in towards the HTML and CSS code, we need to, uh, complete this flask
app.py file as well.
So we will just, uh, import a few other libraries and we will, uh, create a flask form so that user
can upload a file, whether it's image or a video file.
So let's get started with it.
And we need to install some packages as well.
So I will just write from last the WDF.
Or knobs on.
Okay.
So next I will just write WP forms.
All.
Doublet.
The.
And I will just report this as well.
And we will just try to port from the forms.
Dot validators.
So, uh, to just make sure that the user uploads a video file and the user, uh, the file that the
video file or image file that the user has uploaded is in the correct format.
So this is the need for the validators.
Okay.
So now we'll just install this pip install uh wp forms loss wp f for I, uh, I desktop and I will just
open uh, the requirements.txt file as well.
Let me add all these packages over here.
And.
Okay.
So.
That looks lost.
WTF?
Well, I think these are quite packages.
You have all this?
So now we will use the task form to get the input file.
But all the agents that.
Oversight got lost.
Upload.
Rainfall.
This type file.
Okay.
We have imported this library.
I can see over here.
And here we have the file that the user will upload.
So the validators make sure that the user upload a file and the file is in the correct format, whether
it's an image file or a video file.
Input required, like validation validators.
Make sure that before the processing begins that the user has uploaded an image or video file.
Then we will have a subnet.
So the user can upload up, uh, submit the input video or image file.
Okay.
And now you can see that in the detection.py file we are just getting the frame rate, the size of the
current frame and total number of detections.
Okay.
So let's complete this up all over here as well.
Paul will keep account of, uh, frame rate or frame per second as well.
So for this we will just write over here is count.
So we are just declaring it with lower bound so that the value can be accessed outside the function
as well.
So this is equal to string.
And this would give us the frame rate will give us the count.
And.
Then we'll also have the frame size.
And to assess this outside the desired frame size zero.
And here we will dictate frame size.
Here I will just take the first index here.
Here we have paint shape.
And now we will also, uh, keep the count of the total number of detected objects.
So just detected objects, and we will just initialize detected objects.
So here.
Okay.
And.
Yeah, we would have protection.
Okay.
That's completely fine now.
So blast!
I'll change this URL reflections over here as well.
And we will just create another thing.
Airport road it.
And over here.
Why is it still the front page?
All this will be the front page of our application.
But first we will create an instance for this upload file form.
So I'm just creating an instance of instance of this upload file form over here.
But, uh, when the user uploads an image file or a video file, we'll try to get the file name from
there.
So first we'll just write your name.
Well, I was awarded this library as well, so that's good.
And it will try to get the file path.
And after getting the file path will save that input file into this static files folder.
So over here the input file will be saved.
So we will just create a session storage over here as well.
I will save the file path.
Okay.
He.
So if the user uploads an input file and we have made sure that the user uploaded the file and it's
in the correct format, then we will save the file into the static file folder.
And in the session storage we will have the video path of the file.
And then we will just render the template.
I will just add a flash HTML file.
I've already done the HTML css code.
We have a great instance of the upload file form over here, so that's no worries.
So if we are here that means that uploaded store the user has uploaded a file.
And for file name we have.
House band with the standard template.
Swong.
Uploaded.
All rounds and the final.
Okay, so that's completely great.
Uh, we are just, uh, on our land from here.
Okay, so.
Well, okay.
So now I will just add up all my HTML, CSS code.
I will just go over here and create a new directory over here by the name templates.
And inside this I will add my HTML file.
But let me add that HTML file over here.
Well, I went and restored each HTML file over here.
Like, you can see all the HTML code over here and here in the static I have this CSS file Python file.
Okay.
And here is the logo which will be appearing in the web app.
And this is the tablet image.
Inside this I will just display my output image or video with the different objects being detected inside,
uh, over them.
Okay.
So that's all, um, you can just keep this as HTML code.
There is nothing, uh, very special about this HTML code.
Uh, this is very simple HTML code.
Okay.
So let's run this up and see how this works.
Yes, or.
Uh, instead of this, uh, how we would have created this HTML, uh, file.
So let me just show you an overview of this.
And also there's not a very correct.
I just make my songs last like let's first execute it and then I will explain you the SQL code as well.
But before we run this, we need to complete our.
We need to make few changes.
We just forgot this.
We need to add video path over here as well.
And yeah, we'll try to get, uh, the video back from the session.
Storage.
Okay, so inside this session storage I have just saved my video path.
Okay.
So I will try to get it over here.
So you are able to get the video part.
And I would just say radio Bob and Alex.
They're gone.
Okay, so that's completely fine now.
Okay.
So let's see how does it works.
Whether we are applet upload or able to upload an image file or video file.
Well, instead of video path or record if it is right file path because we can upload an image or video.
O-kin.
Well, now it's it looks more.
Okay, so so let's see how does it goes.
Okay.
And expression is not defined.
Import this driver over here.
And.
Well.
God's.
Refresh the support here.
And hopefully this issue will be fixed now.
If so, let me upload an image file and if I just click on the play okay.
We have an error.
Edwards there in such joint spelling mistake.
So let's see.
Or does it.
Cause now.
Okay, so let me upload an image file over here.
Um, I'm just, uh, trying to see the terminal with all the press.
We.
I hope we will be able to see some results now.
Okay, so now you can say it's working.
We are able to take this person's traffic lights over here.
Okay.
So that's good.
Okay.
So let's upload this video.
Let's see.
So all these icons are different world like all these icons.
Uh, we can use these icons later on for different, uh, for different functions.
But currently the first two icons are working well.
This is the upload button icon.
And this is the play button icon so that you can do object detection on image or video.
From here you will upload an image file.
So now you can see over here we are able to track different person handbag over here.
In the same way you can uh do object detection on some other image or video as well.
So previously you have tested on a video.
Now.
Okay.
In the same way you can, uh, like you can see over here we have detected four different persons and
one football in the same way.
You can upload some other video over here as well.
Like you can see over here.
We are able to detect different cars over here.
I'm testing on CPU, so the processing is very slow currently.
Okay.
So like you can see that there.
The cars are moving over here.
Okay.
So.
Less of one thing we can do is like, you can see that, uh, we are just getting the FPS count, frame
size, total detected object.
We cannot go right over here.
App dot route.
First.
Methodist.
We are just creating a URL by the name so that we can get the frame rate.
Or know that we have created a global yes count.
And inside this variable we have the our frame rate stored.
Or.
We need to import the library.
And just go hard for this, I think as well.
And now we have a plot for.
Well, in the deacon we have the total number of detections out.
And then we can also get the.
Frame size as well.
Okay, so we are done with all this up now.
Lesson.i, you can say.
We have made some changes in the code and debugging for the new changes.
But now you can see that, um, the object detection is being downloaded this video and let's see if
we are able to get the frame rate.
So now you can see that the frame rate is 0.172.
And let's see what is the total number detection score.
So in this current frame we have six total detections count like six different jets are detected.
And let's see what is the frame size.
So the frame size is 1020 okay.
So we can upload an image file.
And let's see how does it work.
So.
So let's say in this case total number of detections.
Now 22.
Let's count this.
So 123456789
1011 1213 1415 1617 1821 1920 2122.
So yes, there are 22.
And what is the frame size?
Okay.
664 and that's correct okay.
So that's all from this tutorial.
In this tutorial we have learned how we can create a complete web app using flask.
And you can see that we have test.
We have done object detection on images videos.
And we have also tested on the live webcam feed as well.
So that's all from this tutorial.
Thank you for watching.