1
00:00:00,510 --> 00:00:01,010
All right.

2
00:00:01,020 --> 00:00:02,610
Welcome back.

3
00:00:02,610 --> 00:00:09,480
The goal of this lesson is to run the tensor flow model that we exported on our own Web site and in

4
00:00:09,480 --> 00:00:14,430
the process we're going to introduce javascript and we're going to learn about JavaScript variables

5
00:00:14,430 --> 00:00:19,470
JavaScript functions and how to run a script on our website in the first place and we'll also learn

6
00:00:19,560 --> 00:00:23,730
how to incorporate tensor flow jazz into our project.

7
00:00:23,760 --> 00:00:29,590
First let's check the documentation on how to load the tensor flow J s model.

8
00:00:29,700 --> 00:00:35,760
So if I scroll down here in the guitar page where we've got the tensor flow jazz convert converter then

9
00:00:35,850 --> 00:00:43,230
we can see under step two we've got a nice little code snippet and the key line here is this TMF dot

10
00:00:43,320 --> 00:00:50,580
load graph model piece of code we can actually click on this link right here and pull up the details

11
00:00:50,700 --> 00:00:57,710
about this particular method and what we see here are two javascript code snippets not each time Nazi

12
00:00:57,810 --> 00:01:04,200
SS but javascript and you can already see from the syntax here it looks a lot more like Python.

13
00:01:04,350 --> 00:01:10,380
What this code snippet is telling us is that we need a couple of things in order to make our model do

14
00:01:10,380 --> 00:01:11,490
something.

15
00:01:11,490 --> 00:01:13,940
First off we need this model Don.

16
00:01:14,070 --> 00:01:21,500
Jason and then we have to give this modeled on Jason too this load graph model method.

17
00:01:21,990 --> 00:01:29,430
And then once we've got our model loaded we can use our model to make a prediction based on some tensor

18
00:01:30,710 --> 00:01:35,660
this model dot predict method is what we're going to be using at the end of this lesson.

19
00:01:35,960 --> 00:01:42,410
And if we pull up the documentation for this method we can see that it executes inference for the input

20
00:01:42,410 --> 00:01:48,860
tensor is so right and give it some data and we're going to make a prediction on that data.

21
00:01:48,920 --> 00:01:49,710
That's the goal.

22
00:01:50,570 --> 00:01:56,570
So in summary what are the ingredients that we need to make all this work.

23
00:01:56,570 --> 00:02:01,920
Well first we need that model not just on file and our weights file to go along with it.

24
00:02:02,270 --> 00:02:05,850
Then we need tensor flow J as as part of our project.

25
00:02:06,020 --> 00:02:12,050
We have to add tensor flow J as to our project to get access to all of tensor flows capabilities like

26
00:02:12,260 --> 00:02:20,250
load graph model or making a prediction and then finally we need a tensor with some dummy data to make

27
00:02:20,250 --> 00:02:25,240
a prediction to test our model so let's take this one step at a time.

28
00:02:25,380 --> 00:02:32,730
First let's add our model dot Jason to our project and the way we're going to add our model lot Jason

29
00:02:32,730 --> 00:02:39,600
to our project is simply by dragging and dropping this TAF jazz folder that we created into our project

30
00:02:39,600 --> 00:02:47,720
stub because it was our TFG US folder that contained our model lot Jason File and our weights file.

31
00:02:47,720 --> 00:02:49,400
So that was pretty simple right.

32
00:02:50,240 --> 00:02:55,730
And remember if your converter failed on you and you don't have these two files handy I've got them

33
00:02:55,730 --> 00:02:58,440
for you to download in the lesson resources.

34
00:02:58,610 --> 00:03:06,010
All right now we're on to Step 2 getting our project to be able to use everything that tensor flowchart

35
00:03:06,040 --> 00:03:07,520
has to offer.

36
00:03:07,520 --> 00:03:13,160
So how we're gonna do that well in order to actually be able to use a method like this.

37
00:03:13,160 --> 00:03:20,240
Our project has to know about tensor flow J.S. and the way we can find out how to add tens of logins

38
00:03:20,300 --> 00:03:22,370
to our project is by going to the.

39
00:03:22,400 --> 00:03:29,660
Getting Started tutorial from the tense floor J home page and clicking on getting set up with tensor

40
00:03:29,660 --> 00:03:36,420
flow J.S. and what you see here is that there are two main ways to get set up with tensor flow J is

41
00:03:36,980 --> 00:03:43,430
one of them is using script tags and the other one is using this installation from NPM.

42
00:03:43,430 --> 00:03:46,400
We're going to go with this method right here.

43
00:03:46,400 --> 00:03:54,260
The usage of the script tag and this is very very simple because all we need to do is copy this line

44
00:03:54,260 --> 00:03:58,610
of code right here and add this to our index Don.

45
00:03:58,620 --> 00:03:59,940
Each time l file.

46
00:04:00,890 --> 00:04:04,720
So make sure you've got the index that each time all file open right here.

47
00:04:04,760 --> 00:04:13,150
And then just underneath where you've added the style sheet and the font paste in the code what you

48
00:04:13,150 --> 00:04:20,200
should see at this point is this your l right here surrounded by these script tags.

49
00:04:20,200 --> 00:04:24,350
So you've got one in the beginning and you've got one at the end.

50
00:04:24,580 --> 00:04:31,420
This tag the script tag marks the fact that we've got javascript here in our header but what is this

51
00:04:31,420 --> 00:04:32,950
javascript actually look like.

52
00:04:33,490 --> 00:04:40,120
Well I can actually follow the link by using command click or control click on windows and opening this

53
00:04:40,120 --> 00:04:46,810
up in my browser and what I see is this entire wall of code right here.

54
00:04:46,810 --> 00:04:51,360
And what we're looking at here is actually all of tensor flow J is code.

55
00:04:51,520 --> 00:04:59,560
It's just compressed or modified and it's not really human readable but it's machine readable but this

56
00:04:59,560 --> 00:05:06,100
is essentially what it is that we've added to our project by adding that simple script tag with that

57
00:05:06,100 --> 00:05:12,700
hyperlink by adding this one line of code when our Web site loads the browser will actually reach out

58
00:05:12,940 --> 00:05:20,800
to this link right here and pull in all of tensor flow J S just as if we had it in our project.

59
00:05:20,800 --> 00:05:22,420
That's pretty amazing actually.

60
00:05:22,480 --> 00:05:30,280
And it's really quick and it allows us to move on to the next step namely actually loading our model

61
00:05:31,670 --> 00:05:37,730
so in order to get comfortable with the javascript syntax that we've seen in the documentation let's

62
00:05:37,730 --> 00:05:43,610
cover a few of the basics of JavaScript and just highlight a few of the differences with the python

63
00:05:43,610 --> 00:05:49,650
syntax javascript is where all the logic of our web application is going to live.

64
00:05:49,710 --> 00:05:54,700
H2 email was about the structure CSX was about the styling but its javascript that's gonna make our

65
00:05:54,700 --> 00:05:56,920
website come alive.

66
00:05:56,920 --> 00:06:05,470
So when it comes to variables the difference that you'll spot with Python at this point are pretty straightforward.

67
00:06:05,470 --> 00:06:11,230
What you'll see is that JavaScript syntax tends to end with a semicolon and you'll also see that the

68
00:06:11,230 --> 00:06:14,880
naming conventions are slightly different in Python.

69
00:06:14,890 --> 00:06:23,800
We preferred this snake case and in JavaScript we prefer camel case also in JavaScript variables can

70
00:06:23,800 --> 00:06:30,580
be marked with some keywords because in JavaScript we make a distinction between variables that can

71
00:06:30,580 --> 00:06:38,980
be assigned a new value like my age and variables that can only be assigned a value once like my number.

72
00:06:38,980 --> 00:06:40,650
In this example.

73
00:06:40,780 --> 00:06:46,390
So const as you would expect is the keyword to make a variable that is not allowed to change namely

74
00:06:46,390 --> 00:06:52,000
a constant and var is used to mark a variable that can change.

75
00:06:52,000 --> 00:06:59,480
So no surprises there in the syntax we actually saw this concert keyword used quite a bit in the documentation

76
00:06:59,570 --> 00:07:01,990
on tensor flows own Web site.

77
00:07:02,030 --> 00:07:04,320
So here the model your l was a concert.

78
00:07:04,370 --> 00:07:09,470
The model itself was a concert and this tensor here was a concert as well.

79
00:07:09,530 --> 00:07:16,680
And the reason they're all constants is because they're being assigned a value once and once only so

80
00:07:16,680 --> 00:07:17,820
that's variables.

81
00:07:17,820 --> 00:07:22,450
But what about functions where they look like in JavaScript versus python.

82
00:07:23,490 --> 00:07:31,230
Well in Python we had that DEF DEF keyword that we used to create a function or declare a function in

83
00:07:31,230 --> 00:07:34,790
javascript on the other hand we use this function keyword.

84
00:07:35,070 --> 00:07:39,810
The only other difference that you're actually going to spot at this point are the fact that JavaScript

85
00:07:39,840 --> 00:07:46,320
uses these curly braces and the syntax and Python relies on these semicolon and the indentation the

86
00:07:46,320 --> 00:07:52,290
whitespace to differentiate between the signature of the function and the body of the function or what's

87
00:07:52,290 --> 00:07:53,550
inside of the function.

88
00:07:54,410 --> 00:08:00,340
So all in all the difference between functions in JavaScript and Python really is just pretty much syntax.

89
00:08:00,440 --> 00:08:03,600
They work exactly like you'd expect them to.

90
00:08:03,620 --> 00:08:11,070
So let's practice creating a function on our own website and get comfortable with this syntax coming

91
00:08:11,070 --> 00:08:14,580
down a little bit further in the index thought each time l file.

92
00:08:14,640 --> 00:08:22,760
Let's add some script tags here to mark that we're gonna be adding some javascript you'll see that closing

93
00:08:22,760 --> 00:08:29,210
tag being inserted automatically by the s code the autocomplete obvious code is actually really really

94
00:08:29,210 --> 00:08:37,520
handy because as soon as I type function and I hit the down arrow on my keyboard I can select this function

95
00:08:37,610 --> 00:08:45,380
right here and hit enter and it should already insert a lot of the syntax for me and it's highlighting

96
00:08:45,560 --> 00:08:49,130
which bits I can overwrite really really easily.

97
00:08:49,160 --> 00:08:57,470
So the first bit that's highlighted is the function name and I'm simply going to write Load model and

98
00:08:57,470 --> 00:09:02,780
then I'm going to hit tab on my keyboard to select this parameter but I'm just gonna hit delete.

99
00:09:02,870 --> 00:09:10,040
We're not going to have any inputs any parameters for this function to really applaud V.S. code here

100
00:09:10,130 --> 00:09:14,870
for inserting all the parentheses and all the curly braces for me and just making this really really

101
00:09:14,870 --> 00:09:19,650
easy and quick to do so really minimizing typos and syntax errors.

102
00:09:19,700 --> 00:09:21,870
Thanks to this text editor.

103
00:09:22,250 --> 00:09:26,630
So let's declare a constant here just to see the syntax in action.

104
00:09:26,900 --> 00:09:32,240
And I'm gonna call this constant my favorite number.

105
00:09:32,660 --> 00:09:40,820
And then I studied equal to 8 8 8 and close it off with a semicolon at the end and then I'm gonna use

106
00:09:40,820 --> 00:09:43,670
this constant in an alert.

107
00:09:43,910 --> 00:09:49,430
So this is a little pop up that's kind of come up on our website and we can create this alert simply

108
00:09:49,430 --> 00:09:55,160
by typing alert open parentheses and then providing a message of some sort.

109
00:09:55,160 --> 00:09:58,690
So we'll say hello exclamation mark.

110
00:09:58,760 --> 00:10:03,150
And then just type a message right here at the end.

111
00:10:03,170 --> 00:10:10,490
And when I concatenate my variable with the string so I'm just going to use my favorite number and just

112
00:10:10,490 --> 00:10:16,210
hit enter on my keyboard and I don't even have to type out the variable name semicolon at the end.

113
00:10:16,370 --> 00:10:21,800
And then we can save our changes and open this website in our browser.

114
00:10:21,800 --> 00:10:27,800
So all we have to do is click on the index that H2 M. I'm going to open it with Google Chrome and what

115
00:10:27,800 --> 00:10:31,370
we see is something like this but no alert.

116
00:10:31,370 --> 00:10:31,940
Where is it.

117
00:10:32,990 --> 00:10:38,000
Well the reason that we can't see the alert is because even though we've created our function we haven't

118
00:10:38,000 --> 00:10:39,500
actually called it yet.

119
00:10:39,500 --> 00:10:40,630
We haven't executed it.

120
00:10:41,150 --> 00:10:45,200
So let's come down here and load the model.

121
00:10:45,200 --> 00:10:49,220
Just remember the parentheses at the end and the semicolon.

122
00:10:49,220 --> 00:10:55,970
If I save this now and head back to Google Chrome and refresh there it is.

123
00:10:55,980 --> 00:10:58,970
There's the alert with the message.

124
00:10:58,970 --> 00:10:59,530
Brilliant.

125
00:10:59,540 --> 00:11:02,750
So that's javascript syntax in a nutshell.

126
00:11:02,750 --> 00:11:09,410
Let's go ahead and trying to load our model let's credit constant here called model and then let's call

127
00:11:09,470 --> 00:11:18,740
TMF dot load graph model and then we're gonna pointed to our model dot Jason File coming back into this

128
00:11:18,750 --> 00:11:19,600
code.

129
00:11:19,660 --> 00:11:26,120
I'm just quickly going to delete the sample code here and I want to create this constant const model

130
00:11:26,390 --> 00:11:37,340
is equal to T F dot load graph model and that's capital G capital M and then inside the parentheses

131
00:11:37,700 --> 00:11:43,340
I'm going to add the relative path to that model lot Jason File.

132
00:11:43,340 --> 00:11:49,020
So if you remember the relative path would be the folder name right here TFG yes.

133
00:11:49,280 --> 00:11:58,040
And then the name of the file here so we can add that here TFG s slash modeled on it.

134
00:11:58,140 --> 00:11:59,650
Jason All right.

135
00:11:59,800 --> 00:12:06,610
So let's save this and then let's come back to our browser and bring up the developer tools so they're

136
00:12:06,610 --> 00:12:11,850
gonna be under more tools developer tools or perhaps you've already memorized the keyboard shortcut

137
00:12:11,920 --> 00:12:19,770
that's next to this command and then we're going to select console right here and I want to refresh

138
00:12:19,770 --> 00:12:22,610
now and see what happens.

139
00:12:23,000 --> 00:12:31,210
So this point I'm getting some errors the first ever reads fetch API cannot load my model lot Jason.

140
00:12:31,970 --> 00:12:36,900
And the second error reads that there is some sort of error in the promise.

141
00:12:36,980 --> 00:12:41,040
The request for the model failed due to some sort of error.

142
00:12:41,090 --> 00:12:43,460
It failed to fetch my model.

143
00:12:43,490 --> 00:12:45,520
Now what does that mean.

144
00:12:45,520 --> 00:12:48,600
This looks really really cryptic.

145
00:12:48,860 --> 00:12:58,190
And the reason is is that load craft model expects to talk to a server and not our file system and yet

146
00:12:58,430 --> 00:13:02,150
this is exactly what we've been expecting it to do right.

147
00:13:02,270 --> 00:13:03,830
In opening this index.

148
00:13:03,850 --> 00:13:08,260
Each team will file in our browser and we've pointed it right here.

149
00:13:08,390 --> 00:13:12,770
But when you go on the Internet and you go to a Web site what you're actually doing is you're talking

150
00:13:12,800 --> 00:13:15,360
to another computer somewhere right.

151
00:13:15,380 --> 00:13:21,260
Another computer sends you all the files that belongs that at Web site and your browser displays those

152
00:13:21,260 --> 00:13:22,970
files.

153
00:13:22,970 --> 00:13:28,480
And in fact your browser generally doesn't know anything about the files on your computer.

154
00:13:28,640 --> 00:13:35,180
And that's a good thing because it would be really really scary if you go on a Web site and it's somehow

155
00:13:35,210 --> 00:13:38,980
able to access the files on your hard drive.

156
00:13:39,020 --> 00:13:41,440
So how do we actually get around this.

157
00:13:41,440 --> 00:13:48,260
How do we pretend that we've got a server and add more realism to the development work that we're doing

158
00:13:48,260 --> 00:13:48,620
right now.

159
00:13:48,800 --> 00:13:54,170
How do we simulate having a server that our Web site is talking to.

160
00:13:54,170 --> 00:13:58,730
The answer is we simply run a server on our own computer.

161
00:13:58,730 --> 00:14:04,520
We run a server locally and that way we simulate what would happen in the real world later on when we

162
00:14:04,520 --> 00:14:11,280
publish our Web site the really really cool thing about Python is that nobody knows how to set up a

163
00:14:11,280 --> 00:14:15,150
server without us having to do any extra installation.

164
00:14:15,150 --> 00:14:19,620
This is why python is often branded as batteries included.

165
00:14:19,710 --> 00:14:25,620
In fact you can go to this website right here and take a look at all the modules that are included in

166
00:14:25,620 --> 00:14:28,060
a bog standard Python installation.

167
00:14:28,230 --> 00:14:34,920
So if I navigate down towards says H and I expand this little bit that says each GDP then I can see

168
00:14:34,950 --> 00:14:44,760
a module called HDP dot server and it's this module here that will help us create our server for us

169
00:14:45,690 --> 00:14:54,420
and it's quite a detailed bit of documentation but what matters to us is one line that's right here.

170
00:14:55,470 --> 00:14:58,600
So let me quickly go for how this is gonna work.

171
00:14:58,680 --> 00:15:05,040
All we need to do to create our little server is to open a terminal window if you're in Mac or the anaconda

172
00:15:05,040 --> 00:15:11,340
prompt if you're on Windows and then we need to change directories to the folder where our Web site

173
00:15:11,340 --> 00:15:12,530
files are.

174
00:15:12,630 --> 00:15:14,470
Now I'm talking about that index dot.

175
00:15:14,490 --> 00:15:20,640
Each time I'll file that we were editing in the terminal we're gonna change the directory with this

176
00:15:20,760 --> 00:15:27,560
C.D. command C.D. for changed directory and then comes that Python comment.

177
00:15:27,690 --> 00:15:38,850
Python hyphen m h DP dot server eight thousand and what this command does is it says Python should use

178
00:15:39,150 --> 00:15:47,760
the H DP don't serve a module that's what that hyphen M identifies for us and it should create this

179
00:15:47,760 --> 00:15:52,050
server on port eight thousand that number at the end.

180
00:15:52,170 --> 00:15:58,760
The port number will just be part of the IP address for us server and it's arbitrary.

181
00:15:58,770 --> 00:16:04,840
And the reason I say it's arbitrary is because you could write 6000 or 7000 and this will still work.

182
00:16:04,890 --> 00:16:10,350
The point of specifying it is it allows to have more than one server running at the same time save your

183
00:16:10,650 --> 00:16:15,390
running more than one project at the same time one on port eight thousand and one in port six thousand

184
00:16:16,560 --> 00:16:21,800
and after you hit enter on this command you'll actually get a Windows prompt.

185
00:16:22,210 --> 00:16:28,800
Um most likely a security warning from the windows defender and you're just gonna click okay on that.

186
00:16:28,800 --> 00:16:31,780
The windows defender is being overly cautious at this point.

187
00:16:31,780 --> 00:16:33,180
So just click Okay.

188
00:16:33,360 --> 00:16:40,020
And after that you should see your server running on this Web address right here and that's where you

189
00:16:40,020 --> 00:16:42,490
see that port number coming into play.

190
00:16:42,870 --> 00:16:45,050
And that really is all there is to it.

191
00:16:45,060 --> 00:16:49,880
So let's fire up our own server somewhere to open terminal.

192
00:16:49,890 --> 00:16:55,680
I forgot Jupiter notebook open so there's something happening in this window already so I'm just gonna

193
00:16:55,800 --> 00:17:03,450
open a new window right here and now when to change directories to where that index that each time l

194
00:17:03,450 --> 00:17:11,010
file is meaning I'm gonna just drag and drop the folder name where I've got my project over into my

195
00:17:11,010 --> 00:17:16,780
terminal hit enter and now I'm in this directory right here.

196
00:17:16,860 --> 00:17:19,040
Math on a square garden underscores stub.

197
00:17:19,860 --> 00:17:29,190
And here I'm going to type that command Python hyphen M HDP dot server space eight thousand.

198
00:17:29,790 --> 00:17:32,370
And this would take no time at all.

199
00:17:32,640 --> 00:17:37,050
And what it allows me to do is take this address right here.

200
00:17:37,050 --> 00:17:44,200
Copy it head over into my chrome browser and pasted into the address bar to navigate to it.

201
00:17:44,310 --> 00:17:49,710
And now I should have my Web site served to me by my local server.

202
00:17:50,100 --> 00:17:55,650
And if I take a look at the developer tools my error messages disappear.

203
00:17:55,650 --> 00:18:01,050
If you're seeing this error message right here it's because we're missing a little icon.

204
00:18:01,050 --> 00:18:05,400
You see how we don't have an icon here but there's an icon on this Web site and there's an icon on this

205
00:18:05,400 --> 00:18:05,970
live web site.

206
00:18:05,970 --> 00:18:11,350
Read him Chrome is telling us that it's looking for this 5 icon icon.

207
00:18:11,350 --> 00:18:12,410
We can have that later.

208
00:18:12,430 --> 00:18:13,600
To make this error go away.

209
00:18:14,080 --> 00:18:19,030
But the good uses is that we seem to have loaded our graph model successfully right.

210
00:18:19,810 --> 00:18:20,680
Let's test this out.

211
00:18:21,190 --> 00:18:28,460
Let's see if we can log our model and make it print to this console right here.

212
00:18:28,690 --> 00:18:32,560
And the way we're gonna do this is simply by going into this code.

213
00:18:32,560 --> 00:18:40,810
Typing log hitting enter on the suggestion and then insert console dot log and then we're gonna put

214
00:18:40,810 --> 00:18:48,100
the model between the two parentheses save the changes head back into Google Chrome and refresh the

215
00:18:48,100 --> 00:18:49,300
site.

216
00:18:49,300 --> 00:18:56,230
Now at this point if we take a look at the console here then we see this thing called a promise pending

217
00:18:56,580 --> 00:18:57,780
promise.

218
00:18:57,850 --> 00:19:01,440
We don't actually see our model per say.

219
00:19:01,720 --> 00:19:02,390
Why is that.

220
00:19:03,100 --> 00:19:07,740
Let's take a look at the documentation for load graph model.

221
00:19:07,810 --> 00:19:15,520
If we scroll down then we see here at the very bottom it says it returns a promise of a graph model

222
00:19:16,650 --> 00:19:20,660
so it seems like we've made progress but we're not quite there.

223
00:19:20,670 --> 00:19:22,920
We don't have our model to handle yet.

224
00:19:22,920 --> 00:19:27,630
All we have to hand is this promise not a model.

225
00:19:27,630 --> 00:19:30,960
So what is a promise and why are we getting a promise.

226
00:19:30,990 --> 00:19:34,110
And how do we get our model instead of this promise.

227
00:19:34,110 --> 00:19:41,910
Well the reason this is that loading from a server can take some time maybe we've got a large model

228
00:19:42,330 --> 00:19:45,870
or maybe the server is busy and can't get back to us right away.

229
00:19:45,870 --> 00:19:50,020
The point being we don't actually know when load graph model finishes.

230
00:19:50,070 --> 00:19:51,400
Exactly.

231
00:19:51,750 --> 00:19:57,360
And this means we could be sitting there for a while especially if the connection drops are for downloading

232
00:19:57,420 --> 00:20:03,930
a couple of megabytes in model files and that's the reason why the smart people behind tens of flapjacks

233
00:20:04,170 --> 00:20:10,530
have made load graph model into something called an asynchronous function.

234
00:20:11,040 --> 00:20:18,090
And what this means is that load graph model will run in the background and it allows our Web site to

235
00:20:18,180 --> 00:20:21,080
do other things in the meantime.

236
00:20:21,090 --> 00:20:28,050
Now this might sound like a very advanced and difficult concept to wrap your head around but in the

237
00:20:28,050 --> 00:20:31,910
real world you encountered this problem all the time.

238
00:20:32,040 --> 00:20:34,120
You want to order something from Amazon.

239
00:20:34,500 --> 00:20:37,640
So you go to Amazon dot com or Amazon not code UK.

240
00:20:37,650 --> 00:20:45,960
In my case and you search for say the most awesome book that I've read in the past two years the three

241
00:20:45,960 --> 00:20:47,590
body problem.

242
00:20:47,820 --> 00:20:54,030
So you click on this thing and you really want the paperback edition for this and then you place your

243
00:20:54,030 --> 00:20:57,930
order but you don't get your book right away right.

244
00:20:57,960 --> 00:21:05,100
Instead in your email you get a receipt you get your order confirmation and your order number.

245
00:21:05,100 --> 00:21:11,950
And that's pretty much the equivalent of a javascript promise after you get that email.

246
00:21:11,970 --> 00:21:14,670
You have to play the waiting game at this point.

247
00:21:14,730 --> 00:21:21,060
Amazon is working to fulfill your order and you can do other things like play football or study data

248
00:21:21,060 --> 00:21:22,440
science.

249
00:21:22,440 --> 00:21:26,060
In other words Amazon is working your order in the background.

250
00:21:26,100 --> 00:21:34,020
It's working on your order asynchronously and after a three to five business days it's done your parcel

251
00:21:34,020 --> 00:21:37,500
arrives and your book gets delivered.

252
00:21:37,560 --> 00:21:44,790
Your order is complete and boy will you be in for a treat but just don't read the back cover it'll spoil

253
00:21:44,790 --> 00:21:45,660
the story for you.

254
00:21:45,660 --> 00:21:48,810
The less you know about this book the better you'll enjoy it.

255
00:21:48,810 --> 00:21:49,680
Trust me.

256
00:21:49,740 --> 00:21:57,120
But back to this code because in our case we're actually not so interested in having our website do

257
00:21:57,150 --> 00:21:58,230
other things.

258
00:21:58,260 --> 00:22:01,560
While this model is loading we actually want to do the opposite.

259
00:22:01,560 --> 00:22:07,230
We want to wait for this model to finish loading and then do something with our model.

260
00:22:07,260 --> 00:22:10,620
We want this model to finish loading so we can make a prediction.

261
00:22:10,920 --> 00:22:16,800
The way we can accomplish this and get our model instead of this promise is by making two small modifications

262
00:22:16,800 --> 00:22:18,040
to our code.

263
00:22:18,090 --> 00:22:27,490
First we have this keyword a wait in front of TAF don't load graph model and what this will do is it

264
00:22:27,510 --> 00:22:34,190
will actually wait to receive back a result other than a promise from load graph model.

265
00:22:34,200 --> 00:22:38,060
In this case we're going to get our model back because we're waiting for it.

266
00:22:38,490 --> 00:22:45,120
And the second modification we have to make is we have to add this async keyword in front of this load

267
00:22:45,120 --> 00:22:46,520
model function.

268
00:22:46,680 --> 00:22:53,690
And the reason we have to do that is because we're not waiting for load graph model to finish by waiting

269
00:22:53,690 --> 00:22:54,860
for this to finish.

270
00:22:54,920 --> 00:23:00,310
We have to make load model into an asynchronous function itself.

271
00:23:00,650 --> 00:23:03,910
And with these two small changes we should have our model.

272
00:23:03,950 --> 00:23:12,800
So let's save our file head back into Google Chrome and refresh our page and what you should see at

273
00:23:12,800 --> 00:23:16,820
this point in the console is the actual model.

274
00:23:16,820 --> 00:23:22,280
So at this point we've successfully incorporated tensor flow J as into our project.

275
00:23:22,310 --> 00:23:29,660
We've also successfully loaded our model lot Jason File the last ingredient that we need is need to

276
00:23:29,660 --> 00:23:36,880
have a tensor that holds some data that we can use to test our model with this tensor that holds onto

277
00:23:36,890 --> 00:23:41,240
some dummy data we'll be able to make a prediction with our model.

278
00:23:41,240 --> 00:23:42,390
So how we're gonna get this data.

279
00:23:42,740 --> 00:23:48,650
Well the easiest way is to get some out of our Jupiter notebook in the notebook where we've loaded our

280
00:23:48,650 --> 00:23:49,880
saved model.

281
00:23:49,880 --> 00:23:53,350
We've got our y test and our x test.

282
00:23:53,450 --> 00:24:00,830
What I wouldn't do is I want to export the first value inside x test and then I can add a new cell right

283
00:24:00,830 --> 00:24:09,350
here and I can take a look at what X test square brackets zero the first value in x test actually looks

284
00:24:09,350 --> 00:24:09,810
like.

285
00:24:09,980 --> 00:24:13,840
And if I run all my cells here with shift into

286
00:24:16,660 --> 00:24:19,270
and I run the cell below.

287
00:24:19,360 --> 00:24:22,250
Then I can see what X test actually looks like.

288
00:24:22,310 --> 00:24:24,440
So look something like this.

289
00:24:24,700 --> 00:24:32,430
And if I want to know what label this data actually corresponds to I can look at the first entry under

290
00:24:32,430 --> 00:24:38,050
a white test and what we see is that this data corresponds to a number seven.

291
00:24:38,740 --> 00:24:45,300
So this is the output that we're gonna be checking for in our math Guardian Web site.

292
00:24:45,370 --> 00:24:55,210
So let's export the data in the first row for X test and where to use num PI for this NPD ont save t

293
00:24:55,210 --> 00:25:08,920
x t and we're gonna give it a file name of maybe x underscore test 0 on a score y label 7 so that we

294
00:25:08,920 --> 00:25:16,720
are finally as the true value there and I want to export it as a t t file and I'm just gonna export

295
00:25:16,780 --> 00:25:23,920
the very first entry and exit test and that means I'm going to set the data parameter of this capital

296
00:25:23,920 --> 00:25:27,580
X him to X on the score test.

297
00:25:27,580 --> 00:25:35,340
Square brackets zero and then I'm going to specify what the delimiter is and our case.

298
00:25:35,380 --> 00:25:45,920
I want the data to be separated by a comma and a space and in terms of the format I'm going to go for

299
00:25:46,220 --> 00:25:54,860
just a few decimal numbers maybe two decimal numbers so I can specify that with percent one point two

300
00:25:55,220 --> 00:26:01,130
F meaning I've got a floating point number to two decimal points.

301
00:26:01,130 --> 00:26:01,430
All right.

302
00:26:02,060 --> 00:26:08,300
So I want to bring my folder up side by side here with my notebook and I'm going to hit shift enter

303
00:26:08,360 --> 00:26:17,180
on the cell and watch it create this file this is our data and I'm gonna do at this point is select

304
00:26:17,240 --> 00:26:29,190
all of it copy it and in V.S. code I'm gonna save this to a constant so I'll be const data x 0 is equal

305
00:26:29,190 --> 00:26:37,950
to and then I'm gonna have to square brackets and then when I paste in the data that I've copied from

306
00:26:37,950 --> 00:26:43,550
this file and just remember to put that semicolon at the end.

307
00:26:43,550 --> 00:26:46,850
Now you might ask Why am I using two square brackets here.

308
00:26:48,050 --> 00:26:53,500
And the answer is that our model if you recall needs a two dimensional tensor.

309
00:26:53,970 --> 00:27:03,140
And it expects to receive that data as a single row but with seven hundred and eighty four columns.

310
00:27:03,240 --> 00:27:07,000
So it's one by seven hundred and eighty four.

311
00:27:07,020 --> 00:27:10,340
That's why I've got these two square brackets here.

312
00:27:10,450 --> 00:27:16,950
So now that I've got my data all I need to do is put them into a tensor.

313
00:27:16,950 --> 00:27:18,790
And I want to create a tensor.

314
00:27:18,900 --> 00:27:20,660
Gonna call it my tensor.

315
00:27:21,600 --> 00:27:26,450
And I want to set that equal to TAF dot tensor.

316
00:27:26,460 --> 00:27:29,000
So this is how we created tenser and tenser flow.

317
00:27:29,010 --> 00:27:36,350
J Yes and I expect to receive some data points so I can just provide data.

318
00:27:36,480 --> 00:27:44,920
X 0 and just like that I've created my tensor that I can then feed into my model.

319
00:27:45,150 --> 00:27:46,860
So how do I make this prediction.

320
00:27:46,860 --> 00:27:52,880
How do I actually use my model to do something useful looking at the documentation.

321
00:27:53,000 --> 00:28:01,340
All I need to do is use model not predict and then provide the tensor as an input and we can even see

322
00:28:01,340 --> 00:28:10,790
that in the documentation right here predict takes an input which is a tensor and everything else is

323
00:28:10,790 --> 00:28:14,080
pretty much optional to the predict method.

324
00:28:14,150 --> 00:28:21,710
The thing to note though is that I predict method has an output it will actually return to us a tensor.

325
00:28:21,800 --> 00:28:24,320
So this is going to be the actual prediction right.

326
00:28:25,510 --> 00:28:32,290
Coming back into the US code instead of logging our model here I'm just gonna delete this and I'm going

327
00:28:32,290 --> 00:28:35,040
to see model not predict.

328
00:28:35,080 --> 00:28:42,640
So when I use that predict method and I'm going to provide the tensor as an input but because we have

329
00:28:42,640 --> 00:28:48,640
that output because we have that prediction we should store it somewhere somewhere critic constant call

330
00:28:48,640 --> 00:28:55,290
it result and set that equal to model don't predict that way.

331
00:28:55,330 --> 00:29:04,900
I'm storing the prediction in this constant write him and to show this result but I'm going to do is

332
00:29:04,900 --> 00:29:09,960
I'm just going to print it out so that way shows up in the developer console so result.

333
00:29:10,000 --> 00:29:12,870
Print is going to do exactly that.

334
00:29:13,030 --> 00:29:20,650
So let's save our changes and take a look if our code worked coming back into chrome your server should

335
00:29:20,650 --> 00:29:22,240
still be running at this point.

336
00:29:22,480 --> 00:29:31,480
If you refresh the page now if you see this tensor square brackets seven then congratulations your model

337
00:29:31,480 --> 00:29:36,220
is doing exactly what it needs to do and you've got everything working.

338
00:29:36,220 --> 00:29:41,560
Now I know this lesson was very challenging and introduced a lot of new concepts but I hope it got you

339
00:29:41,560 --> 00:29:45,070
more interested in JavaScript and web development.

340
00:29:45,070 --> 00:29:51,660
And if so check out my colleague Angela use complete web development bootcamp.

341
00:29:51,670 --> 00:29:57,070
This is the highest rated Web development course out there and it's incredibly comprehensive.

342
00:29:57,070 --> 00:30:03,620
It'll take you from the basics right through to all the relevant advanced topics in the next lesson.

343
00:30:03,640 --> 00:30:08,710
We're gonna get our canvas working and we're going to start drawing on our Web site.

344
00:30:08,770 --> 00:30:12,190
So for all of that and more I'll see you in the next lesson.

345
00:30:12,220 --> 00:30:12,690
Take care.