1
00:00:01,480 --> 00:00:05,110
Welcome back. We have our beautiful web site set up.

2
00:00:05,110 --> 00:00:14,440
It's time to create some functionality, where we enter a url, press 'Detect' and an image appears with

3
00:00:14,920 --> 00:00:16,440
a face detection box,

4
00:00:16,540 --> 00:00:21,980
if a face exists in the picture. So how are we going to do that?

5
00:00:24,100 --> 00:00:28,900
Well, the first thing we want to do, we want to make sure that there is some functionality here where

6
00:00:29,260 --> 00:00:36,730
we can detect, what the user enters. And it's something that we've done before with react, when we had

7
00:00:36,730 --> 00:00:37,710
our robo friends app.

8
00:00:37,720 --> 00:00:41,440
We had our input that filtered through the robots.

9
00:00:41,520 --> 00:00:50,930
So again, using the similar technique, using the 'ImageLinkForm', we can create this functionality.

10
00:00:50,950 --> 00:00:56,620
So the first thing you might realize is that, yeah! we definitely need 'state', we need to create a 'state'

11
00:00:56,650 --> 00:01:05,019
so that, our app knows, what the value is that the user enters, remembers it, and updates at any time it

12
00:01:05,019 --> 00:01:06,340
gets changed.

13
00:01:06,340 --> 00:01:10,360
So as you remember, in order to do that, we will define a 'constructor'

14
00:01:13,770 --> 00:01:19,800
and within this 'constructor', we have to call 'super' to be able to use this.

15
00:01:19,850 --> 00:01:21,500
And here, we can do 'this'

16
00:01:21,500 --> 00:01:25,310
'state' equals and we'll call it,

17
00:01:25,310 --> 00:01:28,890
'input', that's what the user will input.

18
00:01:30,940 --> 00:01:43,630
And this input will have a 'onChange' or 'onInputChange', that we will use with arrow functions,

19
00:01:44,430 --> 00:01:49,230
so that we don't get that error that we saw previously.

20
00:01:49,230 --> 00:01:56,710
And as you know anytime there's some sort of an event listener on a web page, we receive an event and

21
00:01:56,710 --> 00:01:57,760
we want to do something here.

22
00:01:57,760 --> 00:02:07,130
So we'll do a 'console dot log', 'event' to make sure that we can detect it and on 'inputChange' in the

23
00:02:07,130 --> 00:02:11,020
'imageLinkForm' we can pass it as a prop.

24
00:02:15,310 --> 00:02:17,860
And we'll get the error 'onInputChange' is not defined.

25
00:02:17,860 --> 00:02:25,930
Remember that because it's part of this class to access it, you need to save 'this dot onInputChange'

26
00:02:25,960 --> 00:02:32,150
because 'onInputChange' is a property of the 'App'.

27
00:02:32,150 --> 00:02:34,510
Let's save that, right now,

28
00:02:34,520 --> 00:02:37,910
well it's not doing anything because we need to trigger this.

29
00:02:38,090 --> 00:02:42,440
We go back to 'imageLinkForm' that's the css 'imageLinkForm.js'.

30
00:02:42,470 --> 00:02:47,990
We can destructor the 'onInputChange' that we're getting.

31
00:02:48,020 --> 00:02:58,080
So instead of doing 'props' dot 'onInputChange' down here, we just destructur it from the 'props' and we

32
00:02:58,080 --> 00:03:01,500
can say on 'input' here 'onChange',

33
00:03:05,090 --> 00:03:13,220
so 'onChange' is technically a react synthetic event that mimics what the html does with whenever input

34
00:03:13,220 --> 00:03:14,480
changes.

35
00:03:14,480 --> 00:03:22,750
And here the 'onChange', well what's it going to do, if we just do 'onInputChange' here,

36
00:03:22,800 --> 00:03:23,910
let's see what happens?

37
00:03:26,860 --> 00:03:37,640
I'm going to open up the console, click or press something, oop! go to the input and press something.

38
00:03:37,660 --> 00:03:37,940
All right.

39
00:03:37,950 --> 00:03:42,790
And looks like I'm getting something, a proxy event.

40
00:03:42,810 --> 00:03:43,050
All right.

41
00:03:43,050 --> 00:03:45,170
What if I go back into my 

42
00:03:45,190 --> 00:03:51,660
app dot js? and if you remember the way we get our value from the input is dot 'target' dot 'value'.

43
00:03:51,840 --> 00:03:59,710
If I save that, and go back, there you go, we get our input.

44
00:03:59,790 --> 00:04:03,390
Nice and easy, just like we did before with our initial react app.

45
00:04:05,560 --> 00:04:12,730
Right, so we're getting the 'onInputChange' and we also want that when we click on 'Detect' that while we

46
00:04:12,970 --> 00:04:16,100
detect an image, how are we going to do that?

47
00:04:17,029 --> 00:04:23,660
For now, just because I like keeping things simple, building things one step at a time we can just 'console

48
00:04:23,660 --> 00:04:28,320
log' and we'll say 'onSubmit' and it won't have any parameters for now.

49
00:04:29,420 --> 00:04:40,880
We'll just say 'console dot log', click, and now 'onSubmit', we can pass to our 'imageLinkForm' again.

50
00:04:46,250 --> 00:04:51,000
We will title it 'onButtonSubmit' here, just to make it clear.

51
00:04:52,680 --> 00:04:57,520
And again, we'll pass it with 'this' dot 'onButtonSubmit'.

52
00:04:59,660 --> 00:05:02,810
We save that, I'm going to put this on a new line just again so you can see,

53
00:05:08,200 --> 00:05:13,480
now the 'imageLinkForm' will receive 'onButton

54
00:05:13,780 --> 00:05:32,150
Submit' and we can say, here that, other than the 'className', they'll be a 'onClick' event that listens for the 'on

55
00:05:33,700 --> 00:05:34,530
ButtonSubmit'.

56
00:05:35,240 --> 00:05:39,750
Let's save, go back to our example,

57
00:05:39,750 --> 00:05:42,730
click, look at that, that's working.

58
00:05:44,280 --> 00:05:44,620
All right.

59
00:05:44,650 --> 00:05:48,850
So there's a bit of functionality but the hard part is just getting started.

60
00:05:48,880 --> 00:05:54,850
How do we display an image down here and have it detect the face? Well,

61
00:05:54,870 --> 00:06:03,200
luckily for us, we can use an API, and this API I think is one of the coolest out there.

62
00:06:03,200 --> 00:06:11,320
It's called 'clarifai' and as you can see from their tagline 'understand your image and video data'. You can

63
00:06:11,320 --> 00:06:15,400
use this tool actually for free, up to a certain point.

64
00:06:15,490 --> 00:06:24,520
If you look at the pricing over here for developers you have a free 5000 operations per month.

65
00:06:24,720 --> 00:06:28,620
So you can submit 5000 pictures and it'll guess it for you.

66
00:06:28,710 --> 00:06:31,160
Once your app becomes popular then you can start paying for it.

67
00:06:31,170 --> 00:06:39,600
But we're going to be using a free API. And I want you to sign up for this, if you want to use it because

68
00:06:39,900 --> 00:06:43,840
the API key that I'll use in this example, I'll delete it afterwards so that,

69
00:06:43,870 --> 00:06:47,190
well, so that other people don't ah! don't use it

70
00:06:47,190 --> 00:06:50,570
and then I reach my limit and I won't be able to use it anymore.

71
00:06:51,250 --> 00:06:52,830
But it's very simple to sign up.

72
00:06:52,900 --> 00:06:54,190
You just log in.

73
00:06:54,190 --> 00:07:00,400
And once you create your account here, you'll be taken onto your profile.

74
00:07:02,630 --> 00:07:05,860
And they might already have my first application for you.

75
00:07:05,990 --> 00:07:10,880
If there's nothing here you just click on 'CREATE NEW APPLICATION' and here,

76
00:07:13,620 --> 00:07:17,890
and your application, you can title it whatever you want but you don't need to touch anything.

77
00:07:18,150 --> 00:07:28,890
If you go to API Keys, this key is your way of accessing the 'clarifai' API.

78
00:07:30,500 --> 00:07:40,680
So if here I enter a url, I press detect, I can send that url with my API key that they provide for you

79
00:07:42,280 --> 00:07:51,280
to their service and using the API key they'll say, oh! that's Andre, he's under the free plan.

80
00:07:51,490 --> 00:07:54,120
He hasn't hit his 5000 limit yet for the month.

81
00:07:54,340 --> 00:07:54,680
Yes.

82
00:07:54,700 --> 00:07:55,710
Let's respond.

83
00:07:57,260 --> 00:08:04,330
And in case you're wondering what they can actually do, if you go to their models you see over here that

84
00:08:04,780 --> 00:08:09,370
they use machine learning to train something called 'Models'.

85
00:08:09,610 --> 00:08:19,090
That is they train a computer by giving it many many pictures, tons of pictures, to memorize celebrity

86
00:08:19,090 --> 00:08:30,240
faces, detect 'Apparel' like here, and it knows that these are sunglasses with 100 percent probability because

87
00:08:30,270 --> 00:08:37,470
it's been trained probably millions of pictures of sunglasses to know what sunglasses are like. So you

88
00:08:37,470 --> 00:08:39,960
can play around with a lot of the stuff that they have here.

89
00:08:39,960 --> 00:08:42,780
It's really really nice what they have.

90
00:08:42,780 --> 00:08:48,540
We're going to be using their face detection API. And their face detection API,

91
00:08:48,540 --> 00:08:49,560
we simply,

92
00:08:52,280 --> 00:09:04,350
if we go to the js(javascript), we simply run this function, to the 'clarifai' servers using our own API and it gives

93
00:09:04,350 --> 00:09:07,490
us a response or an error.

94
00:09:07,550 --> 00:09:16,610
Now this is always a lot easier, to demonstrate than to actually talk about, so let's implement it.

95
00:09:16,640 --> 00:09:19,600
I'm using their face recognition.

96
00:09:19,740 --> 00:09:25,770
So I'm just going to copy and paste this. Go back to my app and in app dot

97
00:09:25,910 --> 00:09:30,320
js(app.js), I'll say that 'onButtonSubmit',

98
00:09:30,420 --> 00:09:41,170
I want to run, the function that 'clarifai' just told me to use. But as you can see here, it has 'app

99
00:09:41,460 --> 00:09:45,100
dot models dot predict'.

100
00:09:45,480 --> 00:09:52,330
Well, how is my program going to know what 'app dot models dot predict' is?

101
00:09:52,520 --> 00:09:59,790
Well, if you go to their API guide, they will show you exactly how to get started and how to use their API.

102
00:09:59,960 --> 00:10:05,720
But you can see over here and they're 'Getting started', 'API clients' if we go to javascript, they'll say

103
00:10:05,920 --> 00:10:08,140
install the client from npm.

104
00:10:08,180 --> 00:10:16,640
So let's just follow along and install 'clarifai' and this is a package that they've built so they can

105
00:10:17,000 --> 00:10:25,340
work with javascript, while that's loading, we can see that, we can import 'clarify'.

106
00:10:25,460 --> 00:10:30,010
We can see here that they're using the common JS, 'require' way of importing,

107
00:10:30,020 --> 00:10:36,160
but since we're using 'create react app', we can use 'import' here, and then we simply initialize your API

108
00:10:36,160 --> 00:10:44,630
key with this. So that now we'll be able to have the app object. As you can see here we're using 'app

109
00:10:44,630 --> 00:10:45,220
.models'.

110
00:10:45,230 --> 00:10:53,980
But if I run this, I'll have no idea what 'app' is. Just to demonstrate for you, if I go back to the console

111
00:10:53,980 --> 00:10:54,320
here,

112
00:10:57,940 --> 00:11:05,050
'run npm start', I get the 'app is not defined', all right.

113
00:11:05,050 --> 00:11:15,350
So again copy, what we see here will copy this, put it up in our configuration at the top of the file.

114
00:11:17,910 --> 00:11:20,650
It asks for our API key.

115
00:11:20,730 --> 00:11:24,070
In my case I'll use the one that they've given me.

116
00:11:27,670 --> 00:11:29,670
Let me open that link in a new file.

117
00:11:30,620 --> 00:11:34,220
I go to 'my first application', 'API keys'.

118
00:11:34,560 --> 00:11:38,920
I'll copy and paste my API key. Paste it in here.

119
00:11:40,640 --> 00:11:46,730
Like we talked about in the API section most useful APIs require a set up like this, where you have

120
00:11:46,730 --> 00:11:55,190
to add an API key. So although these documents are specifically for 'clarifai' most APIs that you use are

121
00:11:55,190 --> 00:11:58,560
going to be very very similar to this.

122
00:11:58,570 --> 00:12:01,060
All right, so we have that, we also need to import,

123
00:12:01,090 --> 00:12:07,140
if you remember, so going back here, I can just

124
00:12:10,090 --> 00:12:18,460
import 'clarifai' and because, we can use the new javascript way of importing.

125
00:12:18,750 --> 00:12:22,430
We'll just do that because it looks so much nicer.

126
00:12:23,280 --> 00:12:25,140
All right let's save and see what happens.

127
00:12:26,100 --> 00:12:26,560
All right.

128
00:12:26,760 --> 00:12:29,420
It looks like it's working.

129
00:12:29,440 --> 00:12:35,250
We see that we're just getting a, this is just a sample image that we're getting.

130
00:12:36,940 --> 00:12:45,550
So we're using our API key and then submitting a url image and then having this dot then occur let's

131
00:12:45,550 --> 00:12:50,220
console dot log the response, and see what we get.

132
00:12:53,580 --> 00:12:59,590
I'm going to click submit(Detect), and I get status,

133
00:12:59,590 --> 00:12:59,950
all right.

134
00:12:59,950 --> 00:13:03,420
It looks like it's responding with something, that's good.

135
00:13:04,810 --> 00:13:09,960
Very good.

136
00:13:09,960 --> 00:13:14,520
All right, so for now, it looks like this is working.

137
00:13:14,520 --> 00:13:20,370
We have an image, that we're receiving, when I put this on a new line so you can see.

138
00:13:28,540 --> 00:13:28,920
Right.

139
00:13:28,960 --> 00:13:35,950
So for now, let's have it, so we can display whatever image they just gave us in our example. Let's just copy

140
00:13:35,950 --> 00:13:42,420
and see what this image is of.

141
00:13:42,440 --> 00:13:47,030
So we want this to display at the bottom.

142
00:13:47,100 --> 00:13:48,700
So how can we do that?

143
00:13:49,470 --> 00:14:03,640
Well, we can start creating our last 'FaceRecognition' component. So we can move the brackets or the comments.

144
00:14:03,800 --> 00:14:13,790
And now here, we'll import this new component, that we don't have yet and this would be called The 'Face

145
00:14:13,790 --> 00:14:16,730
Recognition' component.

146
00:14:21,900 --> 00:14:27,540
And again we'll create a new folder, that will say 'FaceRecognition'.

147
00:14:28,560 --> 00:14:33,650
And within this new folder, (there)will be a new file 'FaceRecognition dot

148
00:14:33,860 --> 00:14:40,380
js', using our very good tool,

149
00:14:40,380 --> 00:14:45,240
copy and paste, going to copy and paste the 'Navigation' component

150
00:14:48,160 --> 00:14:53,410
and now change the name of this to 'FaceRecognition'

151
00:14:54,390 --> 00:14:56,870
component and what should this display?

152
00:14:57,090 --> 00:15:00,930
Well for now we just want to display a static image to make sure that it works.

153
00:15:02,230 --> 00:15:03,580
So I'm going to create

154
00:15:07,730 --> 00:15:14,620
a 'div' with the 'className' of well, 'center' that we've already defined before,

155
00:15:14,660 --> 00:15:23,760
if you remember in our app.css. And will have an image, with a source(src) of,

156
00:15:28,930 --> 00:15:32,010
close the tag and we could just save that.

157
00:15:32,380 --> 00:15:33,380
Let's see if that works.

158
00:15:35,500 --> 00:15:36,280
All right.

159
00:15:36,280 --> 00:15:37,620
That looks pretty good actually.

160
00:15:37,630 --> 00:15:40,040
We got our image right at the bottom.

161
00:15:41,430 --> 00:15:44,190
I get an error saying that we need an 'alt' tag.

162
00:15:44,250 --> 00:15:45,920
So we'll just say 'alt'

163
00:15:49,290 --> 00:15:50,770
and we'll just leave it blank for now.

164
00:15:50,880 --> 00:15:53,100
Just so we have something.

165
00:15:53,220 --> 00:15:53,600
All right.

166
00:15:53,640 --> 00:16:03,240
So we have the basic look of the image and that's working but that's not really connected to the API.

167
00:16:03,250 --> 00:16:08,820
When I click detect, well it's just hard coded.

168
00:16:08,970 --> 00:16:16,050
So first let's look at the API and see how we can actually submit, image urls, if you go back to their

169
00:16:16,050 --> 00:16:17,350
documents.

170
00:16:17,650 --> 00:16:20,870
Again they're very very good with this.

171
00:16:20,940 --> 00:16:22,020
If you scroll down,

172
00:16:25,960 --> 00:16:29,660
under the 'Predict', you see that they have images and videos.

173
00:16:29,830 --> 00:16:37,720
So we can use the 'Images', 'via URL' and we see that we have the javascript and it looks like the 'Predict'

174
00:16:38,500 --> 00:16:43,690
function takes the 'clarifai' a model that they have.

175
00:16:43,690 --> 00:16:50,830
So in this case they're sending the general model and the url. Right so it's very similar to what

176
00:16:50,830 --> 00:16:51,740
we saw before.

177
00:16:52,640 --> 00:16:59,070
So by the looks of it because we've already defined our API key we don't need this anymore.

178
00:16:59,450 --> 00:17:05,020
All we need is to tell it, what model do we want to use.

179
00:17:05,040 --> 00:17:11,040
But if you remember they have a ton of models. And actually want to show you a smart way of looking at

180
00:17:11,040 --> 00:17:11,310
this.

181
00:17:11,310 --> 00:17:17,910
They have this information in the docs but another good way of doing it is if you remember there was

182
00:17:17,910 --> 00:17:30,740
a 'clarifai' npm package and this npm package has a github link and all npm packages usually do. In here,

183
00:17:31,020 --> 00:17:40,620
if you go to visit their codebase, if you go into source, as you might remember, and index.js, this

184
00:17:40,620 --> 00:17:50,360
is what they're giving us access to, and you see over here they have 'exports global dot clarifai' and here

185
00:17:50,380 --> 00:17:55,360
all their models that we can use. So they're giving us the 'GENERAL_MODEL'.

186
00:17:55,690 --> 00:17:58,910
But you can see, if we can get the 'FOOD_MODEL', the 'COLOR_MODEL'.

187
00:17:59,050 --> 00:18:04,570
So let's use the 'COLOR_MODEL' for now, and in here, we will say

188
00:18:08,850 --> 00:18:13,050
'COLOR_MODEL'.

189
00:18:13,240 --> 00:18:21,270
And in order to have access to that, we have to do 'clarifai' dot 'COLOR_MODEL'.

190
00:18:21,580 --> 00:18:30,490
So let's save that, and we (are) going to test this by opening up the console clicking detect,

191
00:18:30,730 --> 00:18:44,570
I get a response and within their response, if I go to 'outputs', 'zero(0)', 'data', I get 'colors' and these

192
00:18:44,570 --> 00:18:51,090
are all the hex colors predictions and you see the one with the highest probability, let's see what

193
00:18:51,090 --> 00:18:52,090
color that is.

194
00:18:55,660 --> 00:19:02,480
It's were pretty much black and if you look at this image yeah it's pretty much black.

195
00:19:02,480 --> 00:19:05,680
All right so that is working.

196
00:19:05,740 --> 00:19:11,150
And the reason I was able to find this is again in their API documentation it tells you if it's an it's

197
00:19:11,200 --> 00:19:15,190
an outputs and an output returns an array with data inside it.

198
00:19:15,220 --> 00:19:23,130
And because we selected the colors model we get colors. All right, so for now using the colors model,

199
00:19:23,280 --> 00:19:26,760
let's build it up.

200
00:19:27,130 --> 00:19:39,660
We want to have an 'imageUrl' state and it will be empty for now and this 'imageUrl' should

201
00:19:39,810 --> 00:19:51,500
get displayed when we click on submit, so we can say that 'onButtonSubmit', we wanna 'this' dot 'setState' to

202
00:19:51,530 --> 00:19:58,920
equal, to have image url updated with whatever the 'input' is.

203
00:19:58,920 --> 00:20:06,100
So this way, we can pass the 'imageUrl' down to the 'FaceRecognition'.

204
00:20:06,120 --> 00:20:15,960
So if I do 'imageUrl' equal to 'this' dot 'state' dot 'imageUrl', I can now use 'imageUrl' in

205
00:20:15,960 --> 00:20:25,670
my 'FaceRecognition' component as the source(src).

206
00:20:25,670 --> 00:20:32,180
Now we obviously need to receive this, so I'm gonna destructure it and use it as parameters.

207
00:20:32,180 --> 00:20:33,800
And I get 'input is not defined',

208
00:20:33,800 --> 00:20:47,850
That's because in here, I used input and well, it needs to be 'this' dot 'state' dot 'input'. Go back let's ah!, let's

209
00:20:47,870 --> 00:20:49,500
find a new face actually. Let's do,

210
00:20:49,520 --> 00:20:50,150
let's do a color.

211
00:20:50,160 --> 00:20:58,110
Let's do a landscape, let's do one with a defining color.

212
00:20:58,110 --> 00:21:08,070
That's a good one, let's do view image, copy this, if we do this and we don't get anything because well, if

213
00:21:08,070 --> 00:21:13,080
you remember 'onInputChange', we've never actually updated the 'input' component.

214
00:21:13,080 --> 00:21:15,510
We just console logged everything.

215
00:21:15,530 --> 00:21:19,950
So now that we know that we can just say, 'this' dot 'set

216
00:21:19,960 --> 00:21:20,510
State'

217
00:21:23,440 --> 00:21:23,950
'input'

218
00:21:26,740 --> 00:21:30,060
is the 'event' 'target' dot 'value'.

219
00:21:30,200 --> 00:21:31,460
Let's see if that works.

220
00:21:32,340 --> 00:21:36,370
And I go back, try it out and,

221
00:21:36,430 --> 00:21:39,420
Oh boy!, that's a big picture we'll need to fix that,

222
00:21:39,430 --> 00:21:45,620
but we got our image displaying. Now using this information,

223
00:21:45,620 --> 00:21:51,390
it means that, we can give our url as the input over here.

224
00:21:51,620 --> 00:21:54,960
We can just put 'this' dot 'state' dot 'input'

225
00:22:03,150 --> 00:22:08,530
and open up the console.

226
00:22:08,550 --> 00:22:08,760
All right,

227
00:22:08,760 --> 00:22:10,730
looks like we're getting a response.

228
00:22:10,770 --> 00:22:13,540
We're getting 'data' 'colors'.

229
00:22:13,790 --> 00:22:17,930
We have this with 40 percent chance of this being the color.

230
00:22:17,930 --> 00:22:19,400
Let's see what color that is.

231
00:22:22,040 --> 00:22:23,150
All right that's green.

232
00:22:23,210 --> 00:22:24,650
That's pretty cool.

233
00:22:24,650 --> 00:22:26,870
So it's clearly working.

234
00:22:26,870 --> 00:22:28,970
We're getting, I'm gonna close some of these.

235
00:22:36,160 --> 00:22:40,210
All right, things are clearly working now, which is great.

236
00:22:40,210 --> 00:22:45,950
Now the one trick I want to show you, because of the way react works,

237
00:22:46,240 --> 00:22:55,320
if I would have done here, 'imageUrl', I would actually get an error,

238
00:22:55,540 --> 00:22:59,980
So if I copy and paste, let's do an image 'Apple'

239
00:23:12,590 --> 00:23:32,790
I get a 'Bad request' and that is because of the way 'set state' works.

240
00:23:32,870 --> 00:23:33,170
All right.

241
00:23:33,200 --> 00:23:44,700
So, while we actually want to use is the 'FACE_DETECT_MODEL' so using what we have now,

242
00:23:46,050 --> 00:23:52,960
Let's see if we can get a response for, and if we go to our API we can look at the models,

243
00:23:58,830 --> 00:24:06,100
and actually if we go to the top, you go to 'Models', and we go to 'Face Detection',

244
00:24:09,320 --> 00:24:15,280
we see that we'll have a response that looks something like this.

245
00:24:15,310 --> 00:24:22,600
What we're interested in is from the outputs, to get data and then regions that give us the regions or

246
00:24:22,600 --> 00:24:28,200
the bounding box of the face. We'll see if we can get that working.

247
00:24:28,670 --> 00:24:33,470
I've put the 'FACE_DETECTION_MODEL' and we don't know what the response is going to be yet so I'm just

248
00:24:33,470 --> 00:24:34,820
going to leave it at that.

249
00:24:35,800 --> 00:24:39,390
I'm going to find a face image,

250
00:24:44,050 --> 00:24:47,060
let's do this picture,

251
00:24:47,060 --> 00:24:47,980
copy and paste, detect,

252
00:24:53,400 --> 00:24:55,450
oh boy! we need to fix that face.

253
00:24:55,550 --> 00:25:00,510
But, we see that we're gtting output.

254
00:25:02,700 --> 00:25:06,240
In the first array, we get 'data', 'regions'

255
00:25:10,500 --> 00:25:12,340
and we have a 'bounding_box'.

256
00:25:12,340 --> 00:25:14,290
So it's a little bit nested here.

257
00:25:14,320 --> 00:25:21,190
So using this information, let's clean it up a little bit and then actually get what we need from here.

258
00:25:25,030 --> 00:25:29,670
In our case, it looks like we'll need to get the 'response'

259
00:25:29,930 --> 00:25:33,150
dot 'outputs'.

260
00:25:36,110 --> 00:25:46,190
And then the 'zero(0)' the first array, then it was 'data', 'regions', 'zero(0)', 'region info', then 'bounding box'.

261
00:25:46,400 --> 00:25:47,700
All right, let's do that.

262
00:25:47,720 --> 00:25:56,550
So 'data regions' access the first array,

263
00:25:57,530 --> 00:26:01,020
'region_info' and I think the last one was 'bounding box'.

264
00:26:01,100 --> 00:26:01,860
Let's try that.

265
00:26:05,370 --> 00:26:05,630
All right.

266
00:26:05,640 --> 00:26:07,050
Let's give that a go.

267
00:26:07,930 --> 00:26:09,260
And see if that works.

268
00:26:11,190 --> 00:26:11,760
Detect

269
00:26:14,710 --> 00:26:20,230
Look at that. We have our 'bottom row', 'left column', 'right column', 'top row'.

270
00:26:20,500 --> 00:26:22,760
We still don't really know what these numbers mean.

271
00:26:22,810 --> 00:26:27,370
We'll have to actually figure it out because as you can see it doesn't add anything to the face.

272
00:26:27,370 --> 00:26:29,030
That's something that we'll have to do.

273
00:26:29,830 --> 00:26:33,270
But it's working and we got our API connection.

274
00:26:33,370 --> 00:26:36,050
We're actually doing something we're displaying the image.

275
00:26:36,070 --> 00:26:41,860
So before we get into the next video let's fix this image issue to make sure that everything looks, well,

276
00:26:42,340 --> 00:26:44,470
looks better than this.

277
00:26:44,470 --> 00:26:50,310
So if we go to the 'FaceRecognition' here, there's a couple of things that we will need to fix.

278
00:26:50,350 --> 00:26:52,740
I'm going to remove this 'console'.

279
00:26:52,880 --> 00:27:02,650
We will do 'ma', which is a 'tachion' class and then we'll also wrap this in a 'div' and there's many ways

280
00:27:02,650 --> 00:27:03,220
to do this.

281
00:27:03,220 --> 00:27:07,990
Like I said before with styling, I'll show you the main way of doing it.

282
00:27:08,140 --> 00:27:17,640
I going say 'absolute margin top two' just so there's a bit of a space in between the input and the image.

283
00:27:17,770 --> 00:27:25,330
And now within the image, we want to make sure that the 'width' is always the same no matter the size of

284
00:27:25,330 --> 00:27:27,770
the picture.

285
00:27:27,960 --> 00:27:34,890
We'll do '500 pixels' but we also don't want it to get squished or have weird proportions.

286
00:27:34,890 --> 00:27:42,490
So the way to fix that is to do 'auto'. So hight is automatically going to be adjusted based on the width.

287
00:27:42,530 --> 00:27:44,060
So let's save and see what happens

288
00:27:44,070 --> 00:27:44,470
now.

289
00:27:47,570 --> 00:27:48,140
All right.

290
00:27:48,140 --> 00:27:50,740
That's a, that's a lot better.

291
00:27:50,760 --> 00:27:51,840
So that was pretty quick.

292
00:27:51,840 --> 00:27:55,300
This was the main thing that really fixed it.

293
00:27:56,630 --> 00:27:57,320
All right.

294
00:27:57,350 --> 00:27:57,850
Awesome.

295
00:27:57,860 --> 00:28:03,830
So we got ourselves a working app that returns real results.

296
00:28:04,040 --> 00:28:12,400
And now we can work on having a box displayed around the face, if something gets detected. Just out of

297
00:28:12,400 --> 00:28:13,200
curiosity.

298
00:28:13,210 --> 00:28:25,230
If I do landscape again.

299
00:28:25,280 --> 00:28:25,760
All right.

300
00:28:25,760 --> 00:28:26,450
Everything's working fine.

301
00:28:26,460 --> 00:28:30,980
Huh! that was a long one but things are starting to work.

302
00:28:30,980 --> 00:28:32,370
I'll see you in the next video.

303
00:28:32,830 --> 00:28:33,130
Buh-bye