That's it.
We're getting to the end of this class.
This is going to be the last big portion where we're going to put everything we did and upload it to
the web so that we can then enjoy it in full style right.
Then share it with your friends.
Everybody can see it.
We're gonna be using a cloud provider called Python anywhere.
It's Python anywhere.
Dot com.
If you go to the pricing you'll see they have some tiers with pricing but there's a fear there's a free
one beginner free.
And this is all we need for this class.
It's a very lightweight tier.
Obviously if you have you know 1000 friends trying to access the site simultaneously it may not work.
There's one might thing we have to do is we have to reduce the dataset.
So Python anywhere has a limit of 100 megabytes that you can upload the original data set from the United
Nations is over that.
So we have to chop it up a bit.
And we're simply going to just keep the features the columns we care about and remove the others.
That's that's why I'm saving it.
And this is the one we're actually going to mount to the Internet or run this piece of code and you'll
see that CSB NSW we're going to have to mount to the cloud.
So of course I hope you went through the primer video and flasks.
I'm not going to talk much about flask I'm assuming you went through the primer and it's kind of this
this is a primer sort of video.
It's a video that I got from classic class whenever I use flasks I don't want to go through the basics
all the time and people people say hey you know a little confused with the basics I don't know what's
going on.
Go to the primer and it'll cover the basics of flask plastics a phenomenal phenomenal tool allows us
Python programmers to quickly get our Python ideas into the cloud or even make even have models or you
know like deep neural network models running in the cloud.
So it's very powerful and flask allows you to do that all within the same Python ecosystem so you can
pass fireballs between your code and the web server seamlessly.
I love it.
So we will basically we're going to we're going to open an account on Python anywhere if you haven't
already got on one.
The free tier is fine and we're going to reproduce this flask tier which should be familiar to you.
There is a flask and a score at people up w y which is the brains of the operation and the templates
which has the template which has the HMO file which is a mixture of H.M. static H.M. and dynamic functions
dynamic variables that the flask app is going to you know injected the dynamic dynamic stuff into it
and build this this Asian male this have dynamic half static HMO.
Page four put it for the world to get customized Web web pages rights which were pretty powerful concept.
We will also have to move up the CSP that we have here the reduced one and there is no static there's
no images in this one I'm keeping this very simple.
The site is responsive meaning it'll look good on a web browser.
It's going to look good on a phone it can look it on the phone even when you flip it.
And that's what we want.
We want something that's really versatile that way.
So we will use as a template from a A.T.M. five responsive template there free from the W3 schools.
I love those three schools I go there all the time for many things just even knowing how to do a Tamil.
But I also love their temples.
They're free.
And you basically scroll through the list and you make this a little smaller you scroll through it's
fine when you like let's say Oh I read like this one go demo and that's going to show you what it looks
like.
And what it looks like on the phone what's it gonna tablet or on a bigger screen or even a big TV right.
So you want everything to look really good.
So you know it looks good on all formats and that's gonna to give you the the the skeleton the correct
CSF the correct javascript for all sorts of functionality from some forms to submit your information
so you can.
So people can cost can can communicate with you menus pop up boxes all sorts of cool stuff.
So that's why that's what I started with so the code I'm using is based on one of the W3 C templates
so I'm so you know big thanks to W3 CSF school I love it.
I love them.
And so we have a tier so I'm assuming you opened up your account you've got a tier and your account
should look like this though it should be less but if you click on the web button where button appear
you should look like this right there should be nothing.
So we're gonna create a very basic through the wizard just click on Add a new web app we're gonna go
with you can't go domain on the free accounts a trick go with flask and go with a you know whatever
latest version is fine and just go with all the basics all the defaults and that's basically going to
create your instance in the cloud ready to run flask ready with all the versions of python everything
you need all the basics to quickly get up and running and here's your link.
So yours will be whatever your account is dark Python anyway dot com I'm going to click on it open it
and go.
Hello from flowers there is my account right.
So I'm not going to have much time here because hopefully you know you are now familiar with flowers
because you went to the primer but click on files and click on my site so you may have less names here
I just have a lot I use as I use this this this particular account a lot and we have a flask at a P
Y so click on that file and this is the basic file you can have the entire thing and throw it in a trash
and replace it with the one right here
we don't need this part and pace it and save it.
So that's why.
So very briefly what we're doing we're importing a bunch of flask libraries.
We have mapped plot lib.
We have none piping as everything we did before.
We are going to instantiate a flask instance just like we did in the primer.
We are also declaring to global variables.
Normally you should not use global variables but one place you can is in flask because you want some
some variables you want everybody who comes from around the world to use the same ones you only want
to upload create a dataset once and a location lists ones where they can all share it.
We use the Create based directory.
I'm using the OIS path because you never know on these clouds where your base directory is.
This will get it for you automatically.
We're going to use the decorator at app dot before first request.
I mean the first time you reset your reboot you restart your web server.
It's gonna go out and get our data set.
This is something that we'll have to load right.
This is our data set.
That's a smaller one right.
So that we're gonna upload it in a second in our location.
This is basically all the country names sorted and by location so that's kind of what that's what's
going to populate our dropdown.
Then we have one function to plot the population pyramid.
Basically this simply all it does it takes the country and a year I to name it plot does.
That's the strongest really just you know get the data but it basically goes and it does a subset right
with it by country and year may know the operation what happens here is the add decorated dot route
that means everybody who goes to the U.R.L. your base your RL will go to this function and it's called
built pyramid.
You instantiate all the variables that we're going to pass these are dynamic variables that will pass
to our Web page the first time around right.
It's just loaded they'll be nothing.
So these are all be blank if you have a request.
If somebody is posting something like the hit the form to hit Submit button on a web page it's going
to say oh yeah we have some post we basically assume that they gonna have a country and a year selected.
I'm not doing any error checking so just be careful here.
But then we're going to call that plot population pyramid to get the you know to get the and I'll change
that name.
That bothers me but to get the country the subset the data subsets for the country and the in the year
and everything else is what we did before right.
The only difference with changes here and this is really cool I love this part is this part here.
So instead of doing the plot that show when you show it and you do put a notebook here you're gonna
translate that into bytes basically you going to create that memory you're gonna create the image instead
of saving it to file or showing it you going save it into a point to a memory space on the computer
and you get a call plot that say you figure you're gonna save it in the memory and not saving on file
this you're saving it in memory right you're saying particularly the image is a space in your memory
and you're saving it to this image in your memory.
You go image see that zero means you're rewriting that memory so you're back at the first cell of the
memory and you basically encode this or encoding an image in a string.
This is a special string that if you tell the web browser the client that this is a string that used
to be translated into a real image you'll know what to do.
That's exactly what it does.
And here we're saying you know this is we're giving it the image tag directly from the code saying it's
an image tag but it's made up of this special encoded right data with passing of this data and it's
you know and you'll know what to do.
We're saying 100 percent so it sits nicely when it's done and we return the template basically everything
else is passed back to the template.
This is the file we're calling and these are all dynamic variables we're passing back.
If there is nothing the first time around is will all be blank.
Okay.
Good.
So my save this and we're gonna go back to my site now create a templates folder number from the last
primer and we're going to copy the code here uh build a pyramid
with an L at the end and go new file that's gonna create a blank file with the correct name that we
want go here and then here we're going to get all the A.T.M. code.
Very simple there's not much going on which is the way I like it keep you keep your UI keep your code
very simple things work a long time I work well so this is the basis from the W3 C W three school templates
as you can see there is the W three dot c SS file we bring something up about a bunch of basic stuff
like J J query that you're going to want and this is just an eight normal e-mail page I'm going with
a black background.
These are some of the classes that come with W3 so they're gonna make things look good it can make them
responsive I got my title which I use different font colors and here's my form.
So as you can see the double curly bracket right that means it's a dynamic variable and here we're calling
the URL for build pyramid.
That means this this is basically going to be replaced with the correct path to the folder where we
want to go so the folder is going to be here is going to say whenever somebody hits the middle one go
to build pyramid right oh that makes sense.
And we have to select forms of selectors of drop downs right.
One is gonna get our country list and one is gonna get our year list so that's going to allow us to
have them in a dropdown.
And again right there are created if you go.
Let me just go back to that code here.
They are created right here.
It it's hard to see but they're created here location list and your list right.
So here it is location list and it actually your list is dynamic.
But the location list is created here.
Whenever we go right here.
Right.
Is created right there.
And that's the location list.
It's going to return these sorted list of what we did in the Jupiter notebook.
The year list is that we're doing it directly on site is basically a loop I'm going for year in range
nineteen fifty two thousand one hundred every ten years.
Add it to this selection so we're dynamically filling a shemale control using these these curly bracket
pound sign and you will know well to fill them.
It's also got to get the correct name so if they've selected the year next time around right.
It's going to come back we're going to populate them here.
This year comes from the dynamic ones from that from our Luke.
Right.
So hopefully you know you do.
This is all flash and I want to go into too much detail about Flash because otherwise we'll be here
all night.
And here is where you passed a plot that show remember plot that show is past here.
Once we've created our image we right here plot that show and plot that show is in passed right here.
Right.
That's the image you will know.
Oh yeah.
Plot that shows right here.
And that's where I'm going to populate the image.
So I mean save this the one thing I need to add before this works is you guessed it the CSI CSB our
common file.
There.
It is loaded.
We can see it right here.
So now actually be able to go to my Web page every time you do any changes you have to recycle your
web service an instance in the cloud anytime you change you know code there.
You have to tell you to change it because otherwise it's going to use cash to counter you know surf
data efficiently.
You need to say clean the cache as new code read you know rebuild everything.
So you hit the green button and then once it's reset you can't just simply hit the link here and you
will see the Web page and there it is.
Farrell AML population pyramids.
She was a true cyclist ultras Africa the continent Africa will choose this current year 9 2020 and we
go build and there it is right.
We could make this smaller.
So you'll have to scroll so much that's fairly easy to do as well.
I mean leave it this way you can play around with it.
But if you wanted to change it right.
It would be.
It's actually happening directly in the code.
It would be.
You'd be the figure size where we sit where we sit right here where you could make that smaller and
it would make this smaller.
And of course now you could see it on your phone as well.