All right.
Welcome back.
The goal of this lesson is to run the tensor flow model that we exported on our own Web site and in
the process we're going to introduce javascript and we're going to learn about JavaScript variables
JavaScript functions and how to run a script on our website in the first place and we'll also learn
how to incorporate tensor flow jazz into our project.
First let's check the documentation on how to load the tensor flow J s model.
So if I scroll down here in the guitar page where we've got the tensor flow jazz convert converter then
we can see under step two we've got a nice little code snippet and the key line here is this TMF dot
load graph model piece of code we can actually click on this link right here and pull up the details
about this particular method and what we see here are two javascript code snippets not each time Nazi
SS but javascript and you can already see from the syntax here it looks a lot more like Python.
What this code snippet is telling us is that we need a couple of things in order to make our model do
something.
First off we need this model Don.
Jason and then we have to give this modeled on Jason too this load graph model method.
And then once we've got our model loaded we can use our model to make a prediction based on some tensor
this model dot predict method is what we're going to be using at the end of this lesson.
And if we pull up the documentation for this method we can see that it executes inference for the input
tensor is so right and give it some data and we're going to make a prediction on that data.
That's the goal.
So in summary what are the ingredients that we need to make all this work.
Well first we need that model not just on file and our weights file to go along with it.
Then we need tensor flow J as as part of our project.
We have to add tensor flow J as to our project to get access to all of tensor flows capabilities like
load graph model or making a prediction and then finally we need a tensor with some dummy data to make
a prediction to test our model so let's take this one step at a time.
First let's add our model dot Jason to our project and the way we're going to add our model lot Jason
to our project is simply by dragging and dropping this TAF jazz folder that we created into our project
stub because it was our TFG US folder that contained our model lot Jason File and our weights file.
So that was pretty simple right.
And remember if your converter failed on you and you don't have these two files handy I've got them
for you to download in the lesson resources.
All right now we're on to Step 2 getting our project to be able to use everything that tensor flowchart
has to offer.
So how we're gonna do that well in order to actually be able to use a method like this.
Our project has to know about tensor flow J.S. and the way we can find out how to add tens of logins
to our project is by going to the.
Getting Started tutorial from the tense floor J home page and clicking on getting set up with tensor
flow J.S. and what you see here is that there are two main ways to get set up with tensor flow J is
one of them is using script tags and the other one is using this installation from NPM.
We're going to go with this method right here.
The usage of the script tag and this is very very simple because all we need to do is copy this line
of code right here and add this to our index Don.
Each time l file.
So make sure you've got the index that each time all file open right here.
And then just underneath where you've added the style sheet and the font paste in the code what you
should see at this point is this your l right here surrounded by these script tags.
So you've got one in the beginning and you've got one at the end.
This tag the script tag marks the fact that we've got javascript here in our header but what is this
javascript actually look like.
Well I can actually follow the link by using command click or control click on windows and opening this
up in my browser and what I see is this entire wall of code right here.
And what we're looking at here is actually all of tensor flow J is code.
It's just compressed or modified and it's not really human readable but it's machine readable but this
is essentially what it is that we've added to our project by adding that simple script tag with that
hyperlink by adding this one line of code when our Web site loads the browser will actually reach out
to this link right here and pull in all of tensor flow J S just as if we had it in our project.
That's pretty amazing actually.
And it's really quick and it allows us to move on to the next step namely actually loading our model
so in order to get comfortable with the javascript syntax that we've seen in the documentation let's
cover a few of the basics of JavaScript and just highlight a few of the differences with the python
syntax javascript is where all the logic of our web application is going to live.
H2 email was about the structure CSX was about the styling but its javascript that's gonna make our
website come alive.
So when it comes to variables the difference that you'll spot with Python at this point are pretty straightforward.
What you'll see is that JavaScript syntax tends to end with a semicolon and you'll also see that the
naming conventions are slightly different in Python.
We preferred this snake case and in JavaScript we prefer camel case also in JavaScript variables can
be marked with some keywords because in JavaScript we make a distinction between variables that can
be assigned a new value like my age and variables that can only be assigned a value once like my number.
In this example.
So const as you would expect is the keyword to make a variable that is not allowed to change namely
a constant and var is used to mark a variable that can change.
So no surprises there in the syntax we actually saw this concert keyword used quite a bit in the documentation
on tensor flows own Web site.
So here the model your l was a concert.
The model itself was a concert and this tensor here was a concert as well.
And the reason they're all constants is because they're being assigned a value once and once only so
that's variables.
But what about functions where they look like in JavaScript versus python.
Well in Python we had that DEF DEF keyword that we used to create a function or declare a function in
javascript on the other hand we use this function keyword.
The only other difference that you're actually going to spot at this point are the fact that JavaScript
uses these curly braces and the syntax and Python relies on these semicolon and the indentation the
whitespace to differentiate between the signature of the function and the body of the function or what's
inside of the function.
So all in all the difference between functions in JavaScript and Python really is just pretty much syntax.
They work exactly like you'd expect them to.
So let's practice creating a function on our own website and get comfortable with this syntax coming
down a little bit further in the index thought each time l file.
Let's add some script tags here to mark that we're gonna be adding some javascript you'll see that closing
tag being inserted automatically by the s code the autocomplete obvious code is actually really really
handy because as soon as I type function and I hit the down arrow on my keyboard I can select this function
right here and hit enter and it should already insert a lot of the syntax for me and it's highlighting
which bits I can overwrite really really easily.
So the first bit that's highlighted is the function name and I'm simply going to write Load model and
then I'm going to hit tab on my keyboard to select this parameter but I'm just gonna hit delete.
We're not going to have any inputs any parameters for this function to really applaud V.S. code here
for inserting all the parentheses and all the curly braces for me and just making this really really
easy and quick to do so really minimizing typos and syntax errors.
Thanks to this text editor.
So let's declare a constant here just to see the syntax in action.
And I'm gonna call this constant my favorite number.
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
this constant in an alert.
So this is a little pop up that's kind of come up on our website and we can create this alert simply
by typing alert open parentheses and then providing a message of some sort.
So we'll say hello exclamation mark.
And then just type a message right here at the end.
And when I concatenate my variable with the string so I'm just going to use my favorite number and just
hit enter on my keyboard and I don't even have to type out the variable name semicolon at the end.
And then we can save our changes and open this website in our browser.
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
we see is something like this but no alert.
Where is it.
Well the reason that we can't see the alert is because even though we've created our function we haven't
actually called it yet.
We haven't executed it.
So let's come down here and load the model.
Just remember the parentheses at the end and the semicolon.
If I save this now and head back to Google Chrome and refresh there it is.
There's the alert with the message.
Brilliant.
So that's javascript syntax in a nutshell.
Let's go ahead and trying to load our model let's credit constant here called model and then let's call
TMF dot load graph model and then we're gonna pointed to our model dot Jason File coming back into this
code.
I'm just quickly going to delete the sample code here and I want to create this constant const model
is equal to T F dot load graph model and that's capital G capital M and then inside the parentheses
I'm going to add the relative path to that model lot Jason File.
So if you remember the relative path would be the folder name right here TFG yes.
And then the name of the file here so we can add that here TFG s slash modeled on it.
Jason All right.
So let's save this and then let's come back to our browser and bring up the developer tools so they're
gonna be under more tools developer tools or perhaps you've already memorized the keyboard shortcut
that's next to this command and then we're going to select console right here and I want to refresh
now and see what happens.
So this point I'm getting some errors the first ever reads fetch API cannot load my model lot Jason.
And the second error reads that there is some sort of error in the promise.
The request for the model failed due to some sort of error.
It failed to fetch my model.
Now what does that mean.
This looks really really cryptic.
And the reason is is that load craft model expects to talk to a server and not our file system and yet
this is exactly what we've been expecting it to do right.
In opening this index.
Each team will file in our browser and we've pointed it right here.
But when you go on the Internet and you go to a Web site what you're actually doing is you're talking
to another computer somewhere right.
Another computer sends you all the files that belongs that at Web site and your browser displays those
files.
And in fact your browser generally doesn't know anything about the files on your computer.
And that's a good thing because it would be really really scary if you go on a Web site and it's somehow
able to access the files on your hard drive.
So how do we actually get around this.
How do we pretend that we've got a server and add more realism to the development work that we're doing
right now.
How do we simulate having a server that our Web site is talking to.
The answer is we simply run a server on our own computer.
We run a server locally and that way we simulate what would happen in the real world later on when we
publish our Web site the really really cool thing about Python is that nobody knows how to set up a
server without us having to do any extra installation.
This is why python is often branded as batteries included.
In fact you can go to this website right here and take a look at all the modules that are included in
a bog standard Python installation.
So if I navigate down towards says H and I expand this little bit that says each GDP then I can see
a module called HDP dot server and it's this module here that will help us create our server for us
and it's quite a detailed bit of documentation but what matters to us is one line that's right here.
So let me quickly go for how this is gonna work.
All we need to do to create our little server is to open a terminal window if you're in Mac or the anaconda
prompt if you're on Windows and then we need to change directories to the folder where our Web site
files are.
Now I'm talking about that index dot.
Each time I'll file that we were editing in the terminal we're gonna change the directory with this
C.D. command C.D. for changed directory and then comes that Python comment.
Python hyphen m h DP dot server eight thousand and what this command does is it says Python should use
the H DP don't serve a module that's what that hyphen M identifies for us and it should create this
server on port eight thousand that number at the end.
The port number will just be part of the IP address for us server and it's arbitrary.
And the reason I say it's arbitrary is because you could write 6000 or 7000 and this will still work.
The point of specifying it is it allows to have more than one server running at the same time save your
running more than one project at the same time one on port eight thousand and one in port six thousand
and after you hit enter on this command you'll actually get a Windows prompt.
Um most likely a security warning from the windows defender and you're just gonna click okay on that.
The windows defender is being overly cautious at this point.
So just click Okay.
And after that you should see your server running on this Web address right here and that's where you
see that port number coming into play.
And that really is all there is to it.
So let's fire up our own server somewhere to open terminal.
I forgot Jupiter notebook open so there's something happening in this window already so I'm just gonna
open a new window right here and now when to change directories to where that index that each time l
file is meaning I'm gonna just drag and drop the folder name where I've got my project over into my
terminal hit enter and now I'm in this directory right here.
Math on a square garden underscores stub.
And here I'm going to type that command Python hyphen M HDP dot server space eight thousand.
And this would take no time at all.
And what it allows me to do is take this address right here.
Copy it head over into my chrome browser and pasted into the address bar to navigate to it.
And now I should have my Web site served to me by my local server.
And if I take a look at the developer tools my error messages disappear.
If you're seeing this error message right here it's because we're missing a little icon.
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
live web site.
Read him Chrome is telling us that it's looking for this 5 icon icon.
We can have that later.
To make this error go away.
But the good uses is that we seem to have loaded our graph model successfully right.
Let's test this out.
Let's see if we can log our model and make it print to this console right here.
And the way we're gonna do this is simply by going into this code.
Typing log hitting enter on the suggestion and then insert console dot log and then we're gonna put
the model between the two parentheses save the changes head back into Google Chrome and refresh the
site.
Now at this point if we take a look at the console here then we see this thing called a promise pending
promise.
We don't actually see our model per say.
Why is that.
Let's take a look at the documentation for load graph model.
If we scroll down then we see here at the very bottom it says it returns a promise of a graph model
so it seems like we've made progress but we're not quite there.
We don't have our model to handle yet.
All we have to hand is this promise not a model.
So what is a promise and why are we getting a promise.
And how do we get our model instead of this promise.
Well the reason this is that loading from a server can take some time maybe we've got a large model
or maybe the server is busy and can't get back to us right away.
The point being we don't actually know when load graph model finishes.
Exactly.
And this means we could be sitting there for a while especially if the connection drops are for downloading
a couple of megabytes in model files and that's the reason why the smart people behind tens of flapjacks
have made load graph model into something called an asynchronous function.
And what this means is that load graph model will run in the background and it allows our Web site to
do other things in the meantime.
Now this might sound like a very advanced and difficult concept to wrap your head around but in the
real world you encountered this problem all the time.
You want to order something from Amazon.
So you go to Amazon dot com or Amazon not code UK.
In my case and you search for say the most awesome book that I've read in the past two years the three
body problem.
So you click on this thing and you really want the paperback edition for this and then you place your
order but you don't get your book right away right.
Instead in your email you get a receipt you get your order confirmation and your order number.
And that's pretty much the equivalent of a javascript promise after you get that email.
You have to play the waiting game at this point.
Amazon is working to fulfill your order and you can do other things like play football or study data
science.
In other words Amazon is working your order in the background.
It's working on your order asynchronously and after a three to five business days it's done your parcel
arrives and your book gets delivered.
Your order is complete and boy will you be in for a treat but just don't read the back cover it'll spoil
the story for you.
The less you know about this book the better you'll enjoy it.
Trust me.
But back to this code because in our case we're actually not so interested in having our website do
other things.
While this model is loading we actually want to do the opposite.
We want to wait for this model to finish loading and then do something with our model.
We want this model to finish loading so we can make a prediction.
The way we can accomplish this and get our model instead of this promise is by making two small modifications
to our code.
First we have this keyword a wait in front of TAF don't load graph model and what this will do is it
will actually wait to receive back a result other than a promise from load graph model.
In this case we're going to get our model back because we're waiting for it.
And the second modification we have to make is we have to add this async keyword in front of this load
model function.
And the reason we have to do that is because we're not waiting for load graph model to finish by waiting
for this to finish.
We have to make load model into an asynchronous function itself.
And with these two small changes we should have our model.
So let's save our file head back into Google Chrome and refresh our page and what you should see at
this point in the console is the actual model.
So at this point we've successfully incorporated tensor flow J as into our project.
We've also successfully loaded our model lot Jason File the last ingredient that we need is need to
have a tensor that holds some data that we can use to test our model with this tensor that holds onto
some dummy data we'll be able to make a prediction with our model.
So how we're gonna get this data.
Well the easiest way is to get some out of our Jupiter notebook in the notebook where we've loaded our
saved model.
We've got our y test and our x test.
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
here and I can take a look at what X test square brackets zero the first value in x test actually looks
like.
And if I run all my cells here with shift into
and I run the cell below.
Then I can see what X test actually looks like.
So look something like this.
And if I want to know what label this data actually corresponds to I can look at the first entry under
a white test and what we see is that this data corresponds to a number seven.
So this is the output that we're gonna be checking for in our math Guardian Web site.
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
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
are finally as the true value there and I want to export it as a t t file and I'm just gonna export
the very first entry and exit test and that means I'm going to set the data parameter of this capital
X him to X on the score test.
Square brackets zero and then I'm going to specify what the delimiter is and our case.
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
just a few decimal numbers maybe two decimal numbers so I can specify that with percent one point two
F meaning I've got a floating point number to two decimal points.
All right.
So I want to bring my folder up side by side here with my notebook and I'm going to hit shift enter
on the cell and watch it create this file this is our data and I'm gonna do at this point is select
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
to and then I'm gonna have to square brackets and then when I paste in the data that I've copied from
this file and just remember to put that semicolon at the end.
Now you might ask Why am I using two square brackets here.
And the answer is that our model if you recall needs a two dimensional tensor.
And it expects to receive that data as a single row but with seven hundred and eighty four columns.
So it's one by seven hundred and eighty four.
That's why I've got these two square brackets here.
So now that I've got my data all I need to do is put them into a tensor.
And I want to create a tensor.
Gonna call it my tensor.
And I want to set that equal to TAF dot tensor.
So this is how we created tenser and tenser flow.
J Yes and I expect to receive some data points so I can just provide data.
X 0 and just like that I've created my tensor that I can then feed into my model.
So how do I make this prediction.
How do I actually use my model to do something useful looking at the documentation.
All I need to do is use model not predict and then provide the tensor as an input and we can even see
that in the documentation right here predict takes an input which is a tensor and everything else is
pretty much optional to the predict method.
The thing to note though is that I predict method has an output it will actually return to us a tensor.
So this is going to be the actual prediction right.
Coming back into the US code instead of logging our model here I'm just gonna delete this and I'm going
to see model not predict.
So when I use that predict method and I'm going to provide the tensor as an input but because we have
that output because we have that prediction we should store it somewhere somewhere critic constant call
it result and set that equal to model don't predict that way.
I'm storing the prediction in this constant write him and to show this result but I'm going to do is
I'm just going to print it out so that way shows up in the developer console so result.
Print is going to do exactly that.
So let's save our changes and take a look if our code worked coming back into chrome your server should
still be running at this point.
If you refresh the page now if you see this tensor square brackets seven then congratulations your model
is doing exactly what it needs to do and you've got everything working.
Now I know this lesson was very challenging and introduced a lot of new concepts but I hope it got you
more interested in JavaScript and web development.
And if so check out my colleague Angela use complete web development bootcamp.
This is the highest rated Web development course out there and it's incredibly comprehensive.
It'll take you from the basics right through to all the relevant advanced topics in the next lesson.
We're gonna get our canvas working and we're going to start drawing on our Web site.
So for all of that and more I'll see you in the next lesson.
Take care.