1 00:00:03,000 --> 00:00:07,000 Till now we have seen that how we can integrate Yolo V8 with flask. 2 00:00:07,000 --> 00:00:10,000 So now we will create a complete web app. 3 00:00:10,000 --> 00:00:17,000 So for the front end design, I will use HTML and CSS and for the back end I will be using flask. 4 00:00:19,000 --> 00:00:20,000 Let's get started. 5 00:00:20,000 --> 00:00:25,000 Have already done the complete code, so I will explain you step by step the complete code. 6 00:00:25,000 --> 00:00:30,000 But before we go towards the code, let me show you how our web app will look like. 7 00:00:30,000 --> 00:00:32,000 So if I just go to templates. 8 00:00:32,000 --> 00:00:35,000 So our web app will consist of three different pages. 9 00:00:35,000 --> 00:00:39,000 One is the home page and the other two pages let me show you. 10 00:00:39,000 --> 00:00:44,000 So if I just click on index project, so this is our root page or home page. 11 00:00:44,000 --> 00:00:45,000 So let me just open this. 12 00:00:47,000 --> 00:00:52,000 So now you can see over here, this is our our app web app, our homepage will look like. 13 00:00:52,000 --> 00:00:55,000 So this is the home page of our web app. 14 00:00:55,000 --> 00:00:59,000 So you can see over here we have this is our header. 15 00:00:59,000 --> 00:01:04,000 And here you can see that I have added some sample results from my different projects. 16 00:01:04,000 --> 00:01:04,000 Okay? 17 00:01:04,000 --> 00:01:07,000 And here we have the content page and here we have the footer. 18 00:01:07,000 --> 00:01:11,000 So if you just click over here, it will redirect towards my YouTube channel. 19 00:01:11,000 --> 00:01:16,000 Okay, so this is how it all looks like. 20 00:01:16,000 --> 00:01:21,000 So in the home page you can see that we have our video and live webcam. 21 00:01:21,000 --> 00:01:23,000 So this is my home page. 22 00:01:23,000 --> 00:01:25,000 This is the root page or home page. 23 00:01:25,000 --> 00:01:31,000 If I just click on video, it will redirect me to the video page where I can just upload the video and 24 00:01:32,000 --> 00:01:35,000 run YOLO detections on that video. 25 00:01:35,000 --> 00:01:42,000 And if I just click on live Webcam, it will redirect me to the live webcam page where my webcam will 26 00:01:42,000 --> 00:01:48,000 automatically turn on and I can do the detection using like webcam or it will do the detections on the 27 00:01:48,000 --> 00:01:49,000 live webcam feed. 28 00:01:49,000 --> 00:01:54,000 Okay, so this is the home page and let me show you the other two pages as well. 29 00:01:54,000 --> 00:02:00,000 So when the users click on the video tab in the home page, like the user, click on this video tab, 30 00:02:00,000 --> 00:02:03,000 it will redirect it to this page, which is over here. 31 00:02:03,000 --> 00:02:07,000 So here the user will upload the video and then click on Submit. 32 00:02:07,000 --> 00:02:14,000 And in here in this screen, you will see the live detections or detections on that input video. 33 00:02:14,000 --> 00:02:14,000 Okay? 34 00:02:14,000 --> 00:02:16,000 Oh, okay. 35 00:02:16,000 --> 00:02:21,000 And if the users go to the here and just click on live webcam. 36 00:02:21,000 --> 00:02:21,000 Okay. 37 00:02:21,000 --> 00:02:24,000 So it will redirect him to the live webcam feed page. 38 00:02:24,000 --> 00:02:29,000 So it will be the user will be redirected to this achievement page. 39 00:02:29,000 --> 00:02:29,000 So here. 40 00:02:30,000 --> 00:02:33,000 Our webcam will be automatically turned on. 41 00:02:33,000 --> 00:02:35,000 And you can see the live detections over here. 42 00:02:35,000 --> 00:02:38,000 Okay, so this is how it all works. 43 00:02:39,000 --> 00:02:42,000 So we have created three web pages. 44 00:02:42,000 --> 00:02:43,000 One is this home page. 45 00:02:43,000 --> 00:02:49,000 And if the user clicks, if your user wants to test his model or any custom model. 46 00:02:50,000 --> 00:02:57,000 On any video, the user will click over here and you will be redirected to this HTML page. 47 00:02:57,000 --> 00:03:03,000 And here the user will upload a video and then click on Submit and he can see the detections on that 48 00:03:03,000 --> 00:03:06,000 input video over in this screen over here. 49 00:03:06,000 --> 00:03:14,000 And if the users want to do detections on the live webcam feed, you will click over here and the user 50 00:03:14,000 --> 00:03:17,000 will be redirected towards this live webcam feed page. 51 00:03:17,000 --> 00:03:23,000 And the users, if you are just testing on the live webcam, if you're using laptop, your laptop live 52 00:03:23,000 --> 00:03:28,000 webcam webcam will be turned on and you can do the detections on the live webcam feed. 53 00:03:28,000 --> 00:03:29,000 Okay. 54 00:03:30,000 --> 00:03:32,000 So these are number three pages. 55 00:03:32,000 --> 00:03:35,000 And this is our home page. 56 00:03:35,000 --> 00:03:37,000 This is our live webcam feed page. 57 00:03:37,000 --> 00:03:40,000 And this is our user wants to test on some video. 58 00:03:40,000 --> 00:03:46,000 This in this video at this page, HTML page, you will upload a video and do the detections on that 59 00:03:46,000 --> 00:03:48,000 on that input video. 60 00:03:48,000 --> 00:03:48,000 Okay. 61 00:03:48,000 --> 00:03:52,000 So this is the flask app.py file over here. 62 00:03:52,000 --> 00:03:56,000 You can just you can see over here and these are our three HTML pages. 63 00:03:56,000 --> 00:04:03,000 So let's just focus on flask app.py and then we will discuss these HTML pages later on. 64 00:04:03,000 --> 00:04:03,000 Okay. 65 00:04:03,000 --> 00:04:09,000 So now you can see over here from here you can see that I'm just importing floss. 66 00:04:09,000 --> 00:04:14,000 So just remember, if you have installed flask previously, you need to install flask by just writing 67 00:04:14,000 --> 00:04:16,000 pip install flask over here. 68 00:04:16,000 --> 00:04:21,000 So you just need to write pip install floss if you haven't installed flask already. 69 00:04:21,000 --> 00:04:22,000 Okay. 70 00:04:24,000 --> 00:04:28,000 So I have ordered installed the flag so you can see that the requirements are already satisfied. 71 00:04:28,000 --> 00:04:30,000 But if you haven't installed it, it will take some time. 72 00:04:30,000 --> 00:04:33,000 Then you can see that we are importing class pom. 73 00:04:34,000 --> 00:04:38,000 POM POM is basically required to receive the input from the user. 74 00:04:38,000 --> 00:04:39,000 Okay, so. 75 00:04:41,000 --> 00:04:44,000 When uploading a video file to our object detection model. 76 00:04:44,000 --> 00:04:45,000 So where we are using class. 77 00:04:46,000 --> 00:04:48,000 So if you just go over here. 78 00:04:50,000 --> 00:04:52,000 If you just go to our YouTube page. 79 00:04:52,000 --> 00:04:53,000 Okay. 80 00:04:53,000 --> 00:04:57,000 So now you can see here, here, here, the user will upload a video, okay? 81 00:04:57,000 --> 00:04:59,000 And then we'll click submit. 82 00:04:59,000 --> 00:05:03,000 So to allow the user to upload a video, we are using flask form. 83 00:05:03,000 --> 00:05:07,000 Okay, So flat form is the it is a flask form. 84 00:05:07,000 --> 00:05:12,000 It is required to receive input from the user to receive the input from the user in the form of video 85 00:05:12,000 --> 00:05:14,000 file or MP4 file. 86 00:05:14,000 --> 00:05:16,000 We required the fourth class form. 87 00:05:16,000 --> 00:05:18,000 Okay, so that user can upload a video. 88 00:05:19,000 --> 00:05:19,000 Okay. 89 00:05:19,000 --> 00:05:24,000 So then we are just using submit field strong field integer range field. 90 00:05:24,000 --> 00:05:30,000 So why we are I'm just using integer range field so that we use the integer range field. 91 00:05:30,000 --> 00:05:31,000 Okay. 92 00:05:32,000 --> 00:05:36,000 Let me discuss this integer range later on because later we'll be using it. 93 00:05:36,000 --> 00:05:41,000 Plus you can see here from W forms dot validators import input required. 94 00:05:41,000 --> 00:05:43,000 So here we are just using validators. 95 00:05:43,000 --> 00:05:47,000 So to validate that the user upload the video file and it is in the correct format. 96 00:05:47,000 --> 00:05:53,000 So for example, like you can see over here, here the user when the user uploads a file video file 97 00:05:53,000 --> 00:05:58,000 over here, we want to make sure that this is an mp4 avi file. 98 00:05:58,000 --> 00:05:59,000 Okay? 99 00:05:59,000 --> 00:06:04,000 It should be a video file, it should not be an image or some PDF document to make sure that a user 100 00:06:04,000 --> 00:06:08,000 uploads a video file in MP4 format. 101 00:06:08,000 --> 00:06:14,000 We require validators to make sure that the user upload the video file and it is in the correct format. 102 00:06:14,000 --> 00:06:18,000 So make sure that the user uploads the video file and it is in the correct format. 103 00:06:18,000 --> 00:06:24,000 We require the validator so that user upload that MP4 or dot file it should the user should not upload 104 00:06:24,000 --> 00:06:29,000 that JPEG or PNG file image file or a PDF document or some other Excel sheet. 105 00:06:29,000 --> 00:06:37,000 It The user should upload a video file or it should be in the mp4 dot file to make sure we require the 106 00:06:37,000 --> 00:06:39,000 validators and to run the YOLO V8 model. 107 00:06:39,000 --> 00:06:41,000 We are just importing cv2. 108 00:06:42,000 --> 00:06:47,000 And if I just go over here YOLO Dash video dot pi and here we have the video detection function. 109 00:06:47,000 --> 00:06:52,000 So we are just importing this video detection function from the YOLO dash video dot pi. 110 00:06:52,000 --> 00:06:54,000 And here we are just initializing. 111 00:06:54,000 --> 00:06:56,000 Plus this is the requirement of class. 112 00:06:56,000 --> 00:06:59,000 And here I'm just defining a secret key. 113 00:06:59,000 --> 00:07:01,000 Moin You can define the secret key by any name. 114 00:07:03,000 --> 00:07:04,000 And they're here. 115 00:07:04,000 --> 00:07:05,000 I'm just defining the static files. 116 00:07:06,000 --> 00:07:12,000 So basically, when the users upload a video file over here, when the user upload an input video file 117 00:07:12,000 --> 00:07:18,000 over here and then click on submit so that that the detection can happen on this video. 118 00:07:18,000 --> 00:07:24,000 So when the user upload a input video file over here, that input file will be saved in the static files 119 00:07:25,000 --> 00:07:25,000 folder. 120 00:07:25,000 --> 00:07:26,000 Okay. 121 00:07:26,000 --> 00:07:32,000 So whenever the user upload any file video file, that video file will be saved in the static files 122 00:07:32,000 --> 00:07:32,000 folder. 123 00:07:32,000 --> 00:07:38,000 So any input file will be any input video file will be saved in the static files folder. 124 00:07:39,000 --> 00:07:46,000 So now, as I told you that we use the flask form to receive the input video input from the user. 125 00:07:46,000 --> 00:07:49,000 So use flask form to get input video file. 126 00:07:49,000 --> 00:07:50,000 Okay. 127 00:07:50,000 --> 00:07:53,000 We don't need the to get the input video file from user. 128 00:07:53,000 --> 00:07:53,000 Okay. 129 00:07:53,000 --> 00:07:59,000 So we are using flask form to get input video file from the user and we have created the class upload 130 00:07:59,000 --> 00:08:00,000 file file form. 131 00:08:00,000 --> 00:08:01,000 So. 132 00:08:03,000 --> 00:08:07,000 We are stored the uploaded video file path in the file field in the variable file. 133 00:08:07,000 --> 00:08:11,000 So there you can see over here in the file field. 134 00:08:11,000 --> 00:08:13,000 In this variable file, we store the. 135 00:08:13,000 --> 00:08:19,000 So if the user upload any input video file, the file path of the input video file will be stored in 136 00:08:19,000 --> 00:08:21,000 this file variable. 137 00:08:21,000 --> 00:08:27,000 So the file path of that input video file will be stored in this file variable. 138 00:08:27,000 --> 00:08:33,000 And here you can see that we are just calling the validators to make sure that the user upload a input 139 00:08:33,000 --> 00:08:35,000 video file and it is in the correct format. 140 00:08:35,000 --> 00:08:36,000 Okay. 141 00:08:36,000 --> 00:08:42,000 So we have added validators to make sure that the user inputs the video in the valid format and user 142 00:08:42,000 --> 00:08:46,000 does not upload the video when end user does upload the video. 143 00:08:46,000 --> 00:08:47,000 When prompted to do so. 144 00:08:47,000 --> 00:08:48,000 Okay. 145 00:08:50,000 --> 00:08:51,000 For just remove this. 146 00:08:51,000 --> 00:08:52,000 We don't need it. 147 00:08:52,000 --> 00:08:57,000 And then we have the submit button so that user can just submit the video file and we can do the detections 148 00:08:57,000 --> 00:08:59,000 on that input video file. 149 00:08:59,000 --> 00:09:00,000 Okay. 150 00:09:00,000 --> 00:09:05,000 So now here again we have the generate frames function. 151 00:09:05,000 --> 00:09:05,000 Okay. 152 00:09:05,000 --> 00:09:07,000 So generate frame function is same. 153 00:09:07,000 --> 00:09:11,000 Like you can see that we are just pausing the video detection function which we have in the YOLO dash 154 00:09:11,000 --> 00:09:12,000 video file. 155 00:09:12,000 --> 00:09:16,000 So the video detection function will give us the detection. 156 00:09:16,000 --> 00:09:20,000 On the detection Will the detection we have the. 157 00:09:21,000 --> 00:09:22,000 Output. 158 00:09:22,000 --> 00:09:23,000 Bounding boxes. 159 00:09:23,000 --> 00:09:25,000 We have the bounding boxes around detected object. 160 00:09:25,000 --> 00:09:27,000 So in detection. 161 00:09:27,000 --> 00:09:33,000 So again, to show you the video detection function will give us the output image which contains the 162 00:09:33,000 --> 00:09:37,000 bounding boxes around the detected objects with label and confidence score. 163 00:09:37,000 --> 00:09:44,000 So in this detection dash, we have the we have the bounding boxes around detected objects with label 164 00:09:44,000 --> 00:09:45,000 and the confidence. 165 00:09:45,000 --> 00:09:49,000 So now we are just convert encoding the current frame. 166 00:09:49,000 --> 00:09:54,000 And so as basically task requires the input image to be converted in the form of bytes. 167 00:09:54,000 --> 00:10:00,000 So we are just converting the image or the current frames to be converted into bytes using dot two bytes. 168 00:10:00,000 --> 00:10:06,000 We are just converting the image for the current frame to two bytes because it is a requirement of class 169 00:10:06,000 --> 00:10:09,000 that the input, image or frame should be converted into bytes. 170 00:10:09,000 --> 00:10:09,000 Okay. 171 00:10:11,000 --> 00:10:16,000 And so here you are, student content type to convert the individual frames into a subsequent frame 172 00:10:16,000 --> 00:10:17,000 so that it looks like a video. 173 00:10:18,000 --> 00:10:18,000 Okay. 174 00:10:18,000 --> 00:10:20,000 And then we have the generate frame web. 175 00:10:20,000 --> 00:10:22,000 So we just call this function. 176 00:10:22,000 --> 00:10:29,000 We just want to access the web cam or we just want to run the detections on the webcam. 177 00:10:29,000 --> 00:10:30,000 We just call this function. 178 00:10:32,000 --> 00:10:33,000 Generate frames, web. 179 00:10:33,000 --> 00:10:34,000 Okay. 180 00:10:34,000 --> 00:10:36,000 And then you can see over here. 181 00:10:37,000 --> 00:10:39,000 We are using approved method. 182 00:10:39,000 --> 00:10:41,000 I am just creating a dash. 183 00:10:41,000 --> 00:10:44,000 So what does it reflects that? 184 00:10:45,000 --> 00:10:49,000 So whenever this is called, we will redirect it towards the home page. 185 00:10:49,000 --> 00:10:56,000 Okay, so if, for example, app dot go dash or dash home will be called, we will be redirected towards 186 00:10:56,000 --> 00:10:58,000 the home page of our web app. 187 00:10:58,000 --> 00:10:59,000 Okay. 188 00:10:59,000 --> 00:11:02,000 And now you can see here we are just doing the session dot clear. 189 00:11:02,000 --> 00:11:10,000 So what does session dot clear does is that we are just, uh, uh, so if we have some if you have tested 190 00:11:10,000 --> 00:11:14,000 on some input video, we have done sessions on a video input video. 191 00:11:14,000 --> 00:11:16,000 So we are just clearing the session. 192 00:11:16,000 --> 00:11:16,000 Okay. 193 00:11:16,000 --> 00:11:23,000 So that whenever we want to test on some other video, the previous input video which we have passed, 194 00:11:23,000 --> 00:11:25,000 that detection should not happen on the previous input video. 195 00:11:25,000 --> 00:11:30,000 So we are just clearing the session storage and removing the input video file paths from the session 196 00:11:30,000 --> 00:11:36,000 storage because we when we upload a new video or read on the web app, a web app, the detection should 197 00:11:36,000 --> 00:11:40,000 happen on the new video which we have uploaded, not on the previous video. 198 00:11:40,000 --> 00:11:41,000 Okay. 199 00:11:42,000 --> 00:11:45,000 But now we are user users. 200 00:11:45,000 --> 00:11:48,000 Now here we are using Aptroot method. 201 00:11:48,000 --> 00:11:51,000 We are creating another webcam. 202 00:11:51,000 --> 00:12:00,000 Okay, so whenever this user just go on this dash webcam URL, the live webcam feed will will be on 203 00:12:00,000 --> 00:12:03,000 and user can do the actions on the live webcam feed. 204 00:12:03,000 --> 00:12:03,000 Okay. 205 00:12:04,000 --> 00:12:08,000 So use app dot method to render the webcam at dash webcam. 206 00:12:09,000 --> 00:12:09,000 Okay. 207 00:12:09,000 --> 00:12:12,000 And here we are just doing the session dot clear as well. 208 00:12:12,000 --> 00:12:15,000 So if we have done detections on the live webcam feed. 209 00:12:16,000 --> 00:12:23,000 And I just refresh the page so I can do detections on the new live live webcam feed as well. 210 00:12:23,000 --> 00:12:23,000 Okay. 211 00:12:23,000 --> 00:12:28,000 So now using app dot route method, I am just creating a front page where you can see that. 212 00:12:30,000 --> 00:12:33,000 The page on which can can do detections on the input video. 213 00:12:33,000 --> 00:12:34,000 Okay. 214 00:12:34,000 --> 00:12:37,000 So basically the front page which I'm referring is this. 215 00:12:37,000 --> 00:12:39,000 This is basically my front page. 216 00:12:39,000 --> 00:12:39,000 Okay. 217 00:12:39,000 --> 00:12:46,000 So the page, the HTML page on which we can do detections on the video feed on input video. 218 00:12:46,000 --> 00:12:46,000 Okay. 219 00:12:46,000 --> 00:12:51,000 So, okay, so now you can see here, I'm just calling the upload file form, which we have created 220 00:12:51,000 --> 00:12:52,000 over here. 221 00:12:52,000 --> 00:12:53,000 Upload file form. 222 00:12:53,000 --> 00:12:55,000 So I'm just calling this over here. 223 00:12:55,000 --> 00:12:57,000 So create an instance for the upload file form. 224 00:12:57,000 --> 00:12:58,000 Okay. 225 00:12:58,000 --> 00:13:00,000 So our uploaded video file. 226 00:13:00,000 --> 00:13:05,000 So whenever we upload using flask form, when we upload a video file. 227 00:13:05,000 --> 00:13:10,000 So as I told you, we use flask form to receive get input video file from the user. 228 00:13:10,000 --> 00:13:11,000 Okay. 229 00:13:11,000 --> 00:13:17,000 So our video file path will be saved into this file variable. 230 00:13:17,000 --> 00:13:17,000 Okay. 231 00:13:17,000 --> 00:13:22,000 So our input video file path will be saved in this file variable. 232 00:13:22,000 --> 00:13:26,000 And here you can see that we are using session story to save your video file path. 233 00:13:26,000 --> 00:13:30,000 So in the session storage we basically save the video file path. 234 00:13:30,000 --> 00:13:30,000 Okay. 235 00:13:30,000 --> 00:13:34,000 So now you can see here we are just cleaning the session dot clear. 236 00:13:34,000 --> 00:13:39,000 So we are just cleaning the session storage using session dot clear so that our previous input video 237 00:13:39,000 --> 00:13:41,000 file path is not saved. 238 00:13:41,000 --> 00:13:47,000 And when we upload a new video, the detection should happen on the new video or if we rerun the application 239 00:13:47,000 --> 00:13:49,000 or open the application again. 240 00:13:49,000 --> 00:13:52,000 So the detection should not be happening on the previous video. 241 00:13:52,000 --> 00:13:58,000 So okay, so this is the reason we are just joining the session storage because we haven't uploaded 242 00:13:58,000 --> 00:14:01,000 or we have saved the video file path in the session storage. 243 00:14:02,000 --> 00:14:02,000 Okay. 244 00:14:03,000 --> 00:14:06,000 So now here we are just creating a dash video. 245 00:14:06,000 --> 00:14:15,000 So in that whenever the user call this dash video URL, okay, so the detections will be happening on 246 00:14:15,000 --> 00:14:17,000 the video. 247 00:14:17,000 --> 00:14:17,000 Okay. 248 00:14:19,000 --> 00:14:23,000 So as you can see that we have saved the video part in the session storage. 249 00:14:23,000 --> 00:14:28,000 So I'm just calling that video part and doing the detections on that video. 250 00:14:28,000 --> 00:14:28,000 Okay. 251 00:14:28,000 --> 00:14:31,000 And here we have the Web app. 252 00:14:31,000 --> 00:14:35,000 So basically I'm just calling the Web app. 253 00:14:35,000 --> 00:14:37,000 So to do the detection on the live webcam feed. 254 00:14:38,000 --> 00:14:39,000 Okay. 255 00:14:39,000 --> 00:14:42,000 So that's all what we are doing over here. 256 00:14:44,000 --> 00:14:47,000 Okay, so this is the web app and everything. 257 00:14:47,000 --> 00:14:51,000 So this is our flask app.py file for this project. 258 00:14:53,000 --> 00:14:54,000 For this part of the tutorial. 259 00:14:55,000 --> 00:14:58,000 Okay, So I hope you have understood a code over here. 260 00:14:59,000 --> 00:15:04,000 So if I just go over here and explain you the dot HTML files as well. 261 00:15:04,000 --> 00:15:06,000 So this is our basic index project. 262 00:15:06,000 --> 00:15:10,000 Dot html is our home page html file. 263 00:15:10,000 --> 00:15:10,000 Okay. 264 00:15:10,000 --> 00:15:15,000 So now you can see over here we are doctype HTML. 265 00:15:15,000 --> 00:15:16,000 So it means that we are using HTML. 266 00:15:16,000 --> 00:15:20,000 And here I've just define a language English over here. 267 00:15:20,000 --> 00:15:20,000 Okay? 268 00:15:20,000 --> 00:15:24,000 And here I've just set the title of my page so you can just show you. 269 00:15:25,000 --> 00:15:30,000 Okay, so you can see that this is our home page and you can see the title Object detection Dash V8, 270 00:15:31,000 --> 00:15:32,000 which we have passed over here. 271 00:15:34,000 --> 00:15:34,000 Okay. 272 00:15:34,000 --> 00:15:41,000 And now you can see over here, I'm just setting the body like the what would be the font family of 273 00:15:41,000 --> 00:15:44,000 the body, the margin and the padding here. 274 00:15:44,000 --> 00:15:47,000 I'm just setting the margin padding and font family of the body. 275 00:15:47,000 --> 00:15:51,000 And here I'm just defining the header background color of the header is black. 276 00:15:51,000 --> 00:15:52,000 So let me show you. 277 00:15:52,000 --> 00:15:56,000 So now you can see that this is my header and you can see that the background color of the header is 278 00:15:56,000 --> 00:15:57,000 black. 279 00:15:57,000 --> 00:15:58,000 Okay, so this is the header. 280 00:15:58,000 --> 00:16:03,000 So here, just like the background color of the header is black and the color of the text is being set 281 00:16:03,000 --> 00:16:03,000 as white. 282 00:16:03,000 --> 00:16:09,000 So if I just show you so you can see that the color of the text is white over here, the color of the 283 00:16:09,000 --> 00:16:10,000 text color is white, okay? 284 00:16:10,000 --> 00:16:17,000 And the height of the header is 120 and text dash alignment like the text will be aligned towards the 285 00:16:17,000 --> 00:16:17,000 right side. 286 00:16:17,000 --> 00:16:21,000 So now you can see here, uh, our text is on the right side. 287 00:16:21,000 --> 00:16:21,000 Okay. 288 00:16:21,000 --> 00:16:25,000 So, uh, and the height of the header is 120. 289 00:16:25,000 --> 00:16:32,000 We have just set it and if I just show you, we have set the padding or the margins among these things 290 00:16:32,000 --> 00:16:37,000 like the margins over here or the padding is we have set is five over here. 291 00:16:38,000 --> 00:16:40,000 Okay, so now we are just creating the second header. 292 00:16:40,000 --> 00:16:43,000 So what is so basically you can see the image over here. 293 00:16:43,000 --> 00:16:46,000 This is basically our first header and this is our second header. 294 00:16:46,000 --> 00:16:48,000 All this is our second header. 295 00:16:48,000 --> 00:16:48,000 Okay. 296 00:16:48,000 --> 00:16:51,000 So the background color of the second header is blue. 297 00:16:51,000 --> 00:16:55,000 So now currently you can see a background image of the football player over here. 298 00:16:55,000 --> 00:16:59,000 So beside this background image we have the header color as blue. 299 00:16:59,000 --> 00:17:01,000 Okay, so we have this behind this image. 300 00:17:01,000 --> 00:17:06,000 We have the hydro color as blue, which we have set over here and here I've just set the margin top 301 00:17:06,000 --> 00:17:07,000 as -30. 302 00:17:07,000 --> 00:17:12,000 And you can see over here, I have just set the background image as a set. 303 00:17:12,000 --> 00:17:16,000 The background image or the path of the background image pass is one dot PNG. 304 00:17:16,000 --> 00:17:20,000 So let me just show you this background image over here. 305 00:17:21,000 --> 00:17:22,000 Well, if. 306 00:17:22,000 --> 00:17:23,000 Just for the images. 307 00:17:23,000 --> 00:17:30,000 So now you can see that this is the image one dot PNG image which I am using for the background. 308 00:17:30,000 --> 00:17:30,000 Okay. 309 00:17:30,000 --> 00:17:32,000 So if I just show you over here. 310 00:17:34,000 --> 00:17:40,000 So now you can see that have just passed the path of the one dot PNG file and this is the one dot PNG 311 00:17:40,000 --> 00:17:40,000 file. 312 00:17:40,000 --> 00:17:46,000 And you can see here, you can see that this is appearing as the background image because have set this 313 00:17:46,000 --> 00:17:46,000 over here. 314 00:17:47,000 --> 00:17:48,000 Okay. 315 00:17:48,000 --> 00:17:50,000 And I'm just setting the bedroom size. 316 00:17:51,000 --> 00:17:52,000 And other things. 317 00:17:53,000 --> 00:17:57,000 And here I'm just setting the list index. 318 00:17:57,000 --> 00:17:59,000 So L stands for list index. 319 00:17:59,000 --> 00:18:01,000 Okay, so display inline dash block. 320 00:18:03,000 --> 00:18:06,000 So here I've just defining the display as inline block. 321 00:18:06,000 --> 00:18:11,000 So as you can see that whenever we define this, they appear in the form of like first element we have 322 00:18:11,000 --> 00:18:12,000 here. 323 00:18:12,000 --> 00:18:14,000 The second element of the list we have here. 324 00:18:14,000 --> 00:18:16,000 And the third element of the list will be here. 325 00:18:16,000 --> 00:18:21,000 But if we set display inline dash block, they appear in this in a single line, the block format, 326 00:18:21,000 --> 00:18:22,000 which you can see over here. 327 00:18:22,000 --> 00:18:30,000 So here I'm using the list index and inline dash block means that home video live webcam will be appearing 328 00:18:30,000 --> 00:18:34,000 in the line like they will not be appearing after one, two, three. 329 00:18:34,000 --> 00:18:36,000 Like they will be appearing in a complete line over here. 330 00:18:38,000 --> 00:18:39,000 Okay. 331 00:18:39,000 --> 00:18:41,000 And here are just set the border radius as ten. 332 00:18:41,000 --> 00:18:46,000 So if I just don't set the border radius, so I'm using border radius, we are just creating a rounded 333 00:18:46,000 --> 00:18:47,000 rectangle. 334 00:18:47,000 --> 00:18:50,000 You can see now we don't have the rounded rectangle over here. 335 00:18:51,000 --> 00:18:56,000 Okay, So if I just set this again, so now you can see that we will have the rounded rectangle over 336 00:18:56,000 --> 00:18:56,000 here. 337 00:18:56,000 --> 00:19:01,000 So using border radius, we are just creating this rounded rectangle over here. 338 00:19:01,000 --> 00:19:01,000 Okay. 339 00:19:01,000 --> 00:19:04,000 And here, just define the padding, padding and margin. 340 00:19:04,000 --> 00:19:07,000 The difference between each of the blocks. 341 00:19:07,000 --> 00:19:12,000 And now you can see that whenever we hover it, we get the background color as red. 342 00:19:12,000 --> 00:19:17,000 Now you can see here, whenever I hover any of the border so we get the background color as red. 343 00:19:17,000 --> 00:19:22,000 So have just set here the background color as red, which you can see over here. 344 00:19:22,000 --> 00:19:23,000 Okay, so. 345 00:19:26,000 --> 00:19:26,000 Okay. 346 00:19:27,000 --> 00:19:28,000 So. 347 00:19:28,000 --> 00:19:29,000 Okay, that's fine. 348 00:19:29,000 --> 00:19:35,000 So now here we set the header color y text decoration is none and width at 100%. 349 00:19:35,000 --> 00:19:38,000 Okay, so these are just styling. 350 00:19:38,000 --> 00:19:40,000 So here we are just joining the styling using CSS. 351 00:19:40,000 --> 00:19:44,000 So here you can see the style tag and here this is all the CSS. 352 00:19:44,000 --> 00:19:46,000 This is not HTML, this is all CSS. 353 00:19:46,000 --> 00:19:49,000 So I'm just doing styling using CSS. 354 00:19:49,000 --> 00:19:49,000 Okay. 355 00:19:51,000 --> 00:19:53,000 Well, he is. 356 00:19:56,000 --> 00:19:57,000 Right. 357 00:19:57,000 --> 00:20:02,000 So understanding is done here using CSS, you can just check it out. 358 00:20:02,000 --> 00:20:04,000 Okay, So now you can see over here. 359 00:20:04,000 --> 00:20:09,000 Here I'm just defining my three home video and live webcam. 360 00:20:09,000 --> 00:20:16,000 So whenever the video user will click on the video button, it will be directed towards the front page, 361 00:20:16,000 --> 00:20:17,000 which is the video feed page. 362 00:20:17,000 --> 00:20:18,000 Okay. 363 00:20:18,000 --> 00:20:20,000 So if I just go to Flask app dot Pi. 364 00:20:20,000 --> 00:20:26,000 So now you can see that dash front page will be called and in this dash front page URL in the dash front 365 00:20:26,000 --> 00:20:30,000 page URL, we are rendering the video project new dot html page. 366 00:20:30,000 --> 00:20:32,000 So video project new dot html is my. 367 00:20:34,000 --> 00:20:37,000 Uh, page HTML page on which we test on our video. 368 00:20:37,000 --> 00:20:42,000 Okay, so here the user uploads the video and click on submit and the detections happens on the video. 369 00:20:42,000 --> 00:20:42,000 So. 370 00:20:44,000 --> 00:20:50,000 So now you can see that when we call the front page URL, the user will be our video project, not a 371 00:20:50,000 --> 00:20:52,000 new page will be rendered. 372 00:20:52,000 --> 00:20:52,000 Okay. 373 00:20:52,000 --> 00:20:56,000 So if I just go to over here index project new. 374 00:20:56,000 --> 00:21:01,000 So now you can see here, whenever the user clicks on the video button, the front page will be called 375 00:21:01,000 --> 00:21:07,000 and the front page will be called and the user will be rendered towards the video project, new HTML 376 00:21:07,000 --> 00:21:12,000 page, which is the page where the user uploads a video and the detections happen on the video. 377 00:21:12,000 --> 00:21:20,000 And when the webcam URL will be called the user like you can see here that the webcam URL will be called, 378 00:21:20,000 --> 00:21:26,000 the user will be directed to the UI dot HTML page, which is our which is our page on which we do the 379 00:21:26,000 --> 00:21:28,000 detections on the live webcam feed. 380 00:21:28,000 --> 00:21:32,000 So if I just show you, okay, let me just show from here. 381 00:21:32,000 --> 00:21:39,000 So now if I just click over here, so this is the dot HTML on which we do detections on the live webcam 382 00:21:39,000 --> 00:21:39,000 feed. 383 00:21:39,000 --> 00:21:40,000 Okay. 384 00:21:43,000 --> 00:21:44,000 Basically for this school here. 385 00:21:45,000 --> 00:21:46,000 Okay. 386 00:21:46,000 --> 00:21:48,000 And here we just write a sample results. 387 00:21:48,000 --> 00:21:50,000 We just don't need it currently. 388 00:21:50,000 --> 00:21:51,000 Like, so here. 389 00:21:54,000 --> 00:21:54,000 Okay. 390 00:21:55,000 --> 00:21:56,000 So. 391 00:21:57,000 --> 00:22:02,000 Now, you can see here, if I just go further down here, you can see that we are just defining sample 392 00:22:02,000 --> 00:22:03,000 results. 393 00:22:03,000 --> 00:22:07,000 So if I just go to our home page now now you can see here we have the sample results. 394 00:22:07,000 --> 00:22:10,000 So here I'm just defining sample results. 395 00:22:10,000 --> 00:22:13,000 And now here you can see that I'm just displaying three images. 396 00:22:13,000 --> 00:22:17,000 Sample image, sample results, images one, two, three, PNG. 397 00:22:17,000 --> 00:22:22,000 So you can see that here we have the three images one PA, two PA three PNG. 398 00:22:22,000 --> 00:22:23,000 So. 399 00:22:24,000 --> 00:22:28,000 These are the images which I am just displaying in the sample results. 400 00:22:28,000 --> 00:22:31,000 Now you can see over here, this is my one PNG. 401 00:22:33,000 --> 00:22:34,000 This is they both being. 402 00:22:36,000 --> 00:22:38,000 This is the three PNG. 403 00:22:39,000 --> 00:22:41,000 Just showing the simple results. 404 00:22:41,000 --> 00:22:42,000 Okay. 405 00:22:42,000 --> 00:22:47,000 So now you can see that you have passed the one PNG to PNG and three PNG over here. 406 00:22:47,000 --> 00:22:48,000 Okay. 407 00:22:48,000 --> 00:22:54,000 So now here you can see that here I'm just defining a class and just writing some text over here. 408 00:22:54,000 --> 00:22:56,000 So now you can see over here. 409 00:22:56,000 --> 00:23:02,000 Here I've just written some text, so I've written all this text over here in this okay part. 410 00:23:02,000 --> 00:23:07,000 And you can see that here I'm just passing the one dot PNG image to display this image over here, which 411 00:23:07,000 --> 00:23:09,000 you can see over here to display this image. 412 00:23:10,000 --> 00:23:11,000 Okay. 413 00:23:12,000 --> 00:23:15,000 And here you can see that I'm just creating a pool deck page over here. 414 00:23:15,000 --> 00:23:17,000 So this is the contact page which I'm creating. 415 00:23:17,000 --> 00:23:19,000 You can see over here. 416 00:23:19,000 --> 00:23:25,000 So this is the contact page which I'm creating over here in HTML and here just defining the footer. 417 00:23:25,000 --> 00:23:28,000 So then the user click on this URL. 418 00:23:28,000 --> 00:23:30,000 He will be redirected towards my YouTube channel. 419 00:23:30,000 --> 00:23:37,000 So you can see that when the users click on this URL, he will be redirected towards my YouTube channel, 420 00:23:37,000 --> 00:23:38,000 which you can see over here. 421 00:23:41,000 --> 00:23:46,000 So this is all from the home page, which is our index project new page. 422 00:23:46,000 --> 00:23:49,000 In the similar way, I have just created a video project. 423 00:23:49,000 --> 00:23:55,000 New dot html contains the page html page on which you do detections on the video. 424 00:23:55,000 --> 00:24:00,000 So this is the same CSS which we have used and the same thing we have done all over here as well. 425 00:24:00,000 --> 00:24:06,000 In the same way we have the dot HTML page on which we do detections on the live webcam feed and the 426 00:24:06,000 --> 00:24:09,000 same style we have used in the style tag. 427 00:24:09,000 --> 00:24:11,000 We have just one CSS over here. 428 00:24:11,000 --> 00:24:14,000 So for styling we use CSS. 429 00:24:14,000 --> 00:24:15,000 Okay. 430 00:24:15,000 --> 00:24:23,000 So in the style tag, I have just defined all the CSS you can see over here and you can see we are doing 431 00:24:23,000 --> 00:24:25,000 detections on the live webcam feed. 432 00:24:25,000 --> 00:24:27,000 Okay, So. 433 00:24:28,000 --> 00:24:32,000 Now let's run this video and see. 434 00:24:33,000 --> 00:24:34,000 Just over. 435 00:24:34,000 --> 00:24:39,000 Now let's run this flask app.py and do the selection on the video and live webcam feed. 436 00:24:39,000 --> 00:24:42,000 So I'm just running this flask app.py file. 437 00:24:42,000 --> 00:24:49,000 Okay, so just click over here, copy path and just over here and run directory and set. 438 00:24:49,000 --> 00:24:52,000 Just click over here, copy path and just click this. 439 00:24:53,000 --> 00:24:58,000 And CD means we need to set the current directory and just enter this path. 440 00:24:58,000 --> 00:25:05,000 And now we will run the python flask app.py file and we will do detections on the on the video and as 441 00:25:05,000 --> 00:25:07,000 well on the live webcam feed as well. 442 00:25:08,000 --> 00:25:11,000 We'll just run this flask app.py file and let's do the detections. 443 00:25:12,000 --> 00:25:15,000 On the video as well as on the live webcam feed. 444 00:25:22,000 --> 00:25:24,000 So just click over this URL. 445 00:25:24,000 --> 00:25:29,000 So now we will be redirected towards our home page, thus remove this previous open this. 446 00:25:31,000 --> 00:25:35,000 So now you can see that we are just redirected to our home page. 447 00:25:35,000 --> 00:25:36,000 Okay. 448 00:25:39,000 --> 00:25:40,000 So this is our home page. 449 00:25:40,000 --> 00:25:42,000 If just click on this home page. 450 00:25:42,000 --> 00:25:42,000 Uh. 451 00:25:48,000 --> 00:25:50,000 They just click on this cone. 452 00:25:50,000 --> 00:25:52,000 Okay, So it's giving me error. 453 00:25:52,000 --> 00:25:53,000 Let me just check it. 454 00:25:54,000 --> 00:25:56,000 Okay so index project dot html. 455 00:25:56,000 --> 00:25:57,000 So this is wrong. 456 00:25:57,000 --> 00:25:59,000 We need to redirect it towards our home page. 457 00:25:59,000 --> 00:26:04,000 So in order to redirect towards our home page, we'll just go over here. 458 00:26:04,000 --> 00:26:04,000 Okay. 459 00:26:05,000 --> 00:26:07,000 So test add dash home. 460 00:26:07,000 --> 00:26:07,000 Okay. 461 00:26:07,000 --> 00:26:11,000 So just add dash home over here and click on Save. 462 00:26:11,000 --> 00:26:17,000 Now just stop this control C and invites not stopping y. 463 00:26:17,000 --> 00:26:20,000 Okay, stop now run again the flask app dot. 464 00:26:21,000 --> 00:26:23,000 So I think it will work fine now. 465 00:26:24,000 --> 00:26:26,000 But this might take a few seconds. 466 00:26:26,000 --> 00:26:28,000 Let's wait and see. 467 00:26:29,000 --> 00:26:33,000 Okay, so just click on this URL, just close the previous two. 468 00:26:35,000 --> 00:26:41,000 And now let's check it if it's working fine or it gives some errors so we can correct it if there is 469 00:26:41,000 --> 00:26:41,000 an error. 470 00:26:41,000 --> 00:26:42,000 No worries. 471 00:26:42,000 --> 00:26:45,000 So let's just click on home. 472 00:26:46,000 --> 00:26:46,000 Okay. 473 00:26:46,000 --> 00:26:49,000 So we will direct it towards this home page, which is Dash Home. 474 00:26:49,000 --> 00:26:50,000 Now click on video. 475 00:26:51,000 --> 00:26:58,000 Okay, so now here, now you can see that I told you we used class form to get the input from the user. 476 00:26:58,000 --> 00:27:05,000 So just click on Choose File and just pass this bike dot mp4 video and click on. 477 00:27:06,000 --> 00:27:07,000 Submit. 478 00:27:08,000 --> 00:27:08,000 Okay. 479 00:27:09,000 --> 00:27:10,000 So now you can see that. 480 00:27:10,000 --> 00:27:10,000 That's wonderful. 481 00:27:10,000 --> 00:27:14,000 So now you can see that we are able to do the actions on the video. 482 00:27:16,000 --> 00:27:17,000 And here you can see the results. 483 00:27:19,000 --> 00:27:26,000 We have done the directions on the video and here we have the bounding box around the person bicycle. 484 00:27:26,000 --> 00:27:30,000 We have the label person, we have the confidence score as well. 485 00:27:30,000 --> 00:27:37,000 So here we are detecting the traffic light and you can see that we have that labeled traffic light as 486 00:27:37,000 --> 00:27:39,000 well as the confidence code as well. 487 00:27:39,000 --> 00:27:40,000 So that's impressive. 488 00:27:40,000 --> 00:27:43,000 Like you can see the detections on the video are very impressive. 489 00:27:43,000 --> 00:27:52,000 Like, uh, the model is able to detect the bicycle and assign a label and create a bounding box and 490 00:27:52,000 --> 00:27:53,000 the confidence score. 491 00:27:53,000 --> 00:27:57,000 So now you can see that we have created a bounding box around the detected object. 492 00:27:57,000 --> 00:28:00,000 We have signed the label and the confidence score as well. 493 00:28:00,000 --> 00:28:03,000 So now let's test on a video feed. 494 00:28:03,000 --> 00:28:04,000 Okay. 495 00:28:04,000 --> 00:28:06,000 On the live webcam feed. 496 00:28:06,000 --> 00:28:11,000 Okay, so just click on live webcam and see if we are able to detections on the live webcam feed or 497 00:28:11,000 --> 00:28:12,000 not. 498 00:28:13,000 --> 00:28:15,000 Let's get started. 499 00:28:20,000 --> 00:28:25,000 But you can see over here we able to track sections on the night webcam feed as well. 500 00:28:25,000 --> 00:28:28,000 So the actions on the live webcam feed is being done. 501 00:28:30,000 --> 00:28:30,000 Okay. 502 00:28:37,000 --> 00:28:37,000 Oh yeah. 503 00:28:37,000 --> 00:28:38,000 It was good. 504 00:28:38,000 --> 00:28:40,000 Reflections on the live webcam feed as well. 505 00:28:41,000 --> 00:28:43,000 So expecting the cell phone as well. 506 00:28:43,000 --> 00:28:46,000 So the results are quite good and. 507 00:28:51,000 --> 00:28:51,000 So the tablet. 508 00:28:51,000 --> 00:28:53,000 This is not a cell phone. 509 00:28:53,000 --> 00:28:54,000 It's our own action. 510 00:28:58,000 --> 00:28:58,000 Okay. 511 00:29:02,000 --> 00:29:10,000 So you can see over here we have created a complete Flask web app and have done predictions on the video 512 00:29:10,000 --> 00:29:12,000 as well as on the live webcam feed. 513 00:29:12,000 --> 00:29:15,000 And the results are quite impressive. 514 00:29:15,000 --> 00:29:21,000 Okay, so now you can see that we have created a complete flask app or complete web app. 515 00:29:21,000 --> 00:29:21,000 Sorry. 516 00:29:21,000 --> 00:29:22,000 Okay. 517 00:29:22,000 --> 00:29:24,000 And let me just go further. 518 00:29:28,000 --> 00:29:33,000 So now you can see over here, uh, this is our complete web app. 519 00:29:33,000 --> 00:29:34,000 We have the home page. 520 00:29:34,000 --> 00:29:38,000 We have the video page on which we can do redirections on any input video. 521 00:29:38,000 --> 00:29:45,000 Last we have the live webcam feed page as well on which we can do detections on the live webcam feed 522 00:29:45,000 --> 00:29:45,000 as well. 523 00:29:46,000 --> 00:29:48,000 So that's all from this part. 524 00:29:48,000 --> 00:29:55,000 In the next part we will see how we can train your model on any custom data and how we can get actions 525 00:29:55,000 --> 00:29:57,000 on any custom data set. 526 00:29:57,000 --> 00:30:02,000 And we will be creating a complete web app for that custom train model as well. 527 00:30:02,000 --> 00:30:04,000 So let's see in the next part.