(upbeat music)
>> We're gonna be doing something really cool today
because we have a special Azure sponsored stream
which means we're gonna build a virtual experience,
a virtual aquarium using Microsoft's Computer Vision,
which recognizes all these different objects
and everything in an image.
And then we're gonna hook it up to the Pexels API
where you can get all the different open images.
We're to make that into an overlay.
To get started with computer vision we're gonna create
a repository Fishion Show.
Bam, and we're gonna make this a node project
and we're gonna add an MIT license like that, bam
and into the repository.
What I wanna do is I wanna build it as an overlay
'cause then we can actually put it on screen.
Like if anyone could use it,
as long as they have just an Azure key,
an Azure subscription key or something to make this work.
So I'm gonna open this anatomy.
I need a command prompt window, an editor window
and a web browser
Npm init and there again.
Okay, package name yes Fishion Show version 1.0.
Description, this is the fashion show for fish
using Microsoft Azure Computer Vision, bam.
Index js, yes that's good.
And git repository and the keywords Instafluff,
Microsoft, Azure, Fish, Aquarium, Virtual
and Computer, Vision, Show, Overlay, Browser, source.
Yeah, and now the MIT license and there we go,.
Fashion.
This is the module that we're gonna need.
We need npm install web, web, web.
We do const web equals web, web, web, web.
I'm gonna run this on, what's today's date, 28 to one.
We'll name it index.js because that's what we call it
and packaged at json.
And now with that we'll just do nodemon and any time we edit
the files now it's gonna automatically detect.
So we'll create a webpage from scratch today.
I'm gonna do...
All right, HTML we need...
Open the ad tag and then we're gonna create a title
and this'll be "Welcome to the Fishion Show",
that's what little call it.
"Welcome to the Fishion Show", close this title
(inaudible) head and then create a body and close the body.
And then we need the script.
And let's save this as index.html.
If we put in Fishion Show h1 like that,
then it should be working.
That means we do a local host and then 20821,
Fishion Show.
So what we need is the quick starts and then we want
the rest API for this.
It should be pretty easy to do.
Utilize our remote image using JavaScript.
Ah, so we need the end point URL and the subscription key
and then we can analyze it.
After we get this set up then we're gonna hook it up
to the Pexels API.
So then we'll be able to get Hexose images based on
keywords and search them and then we'll be able
to get a bunch of different images and random images.
That'll be really neat.
So these are the fish features that we would want.
Like description and tags,
and then you have the subscription key.
Let's just log in.
And then we need computer vision.
There we go.
Discoverability, pay as you go.
This is great.
Instafluff, West US.
Again, and this will be Fishion Show,
It's gonna be the name and we're gonna do F0.
That should be fine.
Let's create, initializing, go to resource.
And so I can just copy it like this.
(cheers)
But this is how it works, so you just go to the portal
and then you can find whatever service you need
and you just create it and just like that.
So let's see, I have the key.
This is the association key equals but we need a better way
to just be able to put subscription keys or something into
a page without worrying about...
Oh, I know what I can do.
Script, source, ploofword.js.
This is the password, this is...
Wait, wait the password is gonna be psoofword
and so we need to create a psoofword.js
and so window that psoof key is going to be equal to
kabam, like this.
We need to create it into a web folder.
Web psoofword.js, web/ and then in the psoofword.
I gotta make sure if window.psoofkey does not cut this
then console log, yes we haz key.
And with that let's try this.
This should say, "Yes, we haz key".
It worked.
Next, we've got the Quickstart and all we have to do
is call with the endpoint URL words, the end point URL
is this.
We got let, I guess we can do const endpoint equals this.
And then when we call an API we can do a fetch
and we give it the endpoint and then we have to cut with
vision analyze like this.
And so we do vision analyze/,
subscription key equals...
Visualize (inaudible)
and then with the subscription key equals
and then window psoof key.
Yeah.
And we do that, we call it, we need some headers in here.
Headers.
And this is the header that we need to set the key to.
So we gonna put the psoofkey in here.
Visual and tags.
So method will be post,
so the body jSON.stringify.
URL equals and then we'll test out one of these URLs
like this one.
We'll say, "Copy image address", and we'll put that in here.
We'll do then r r.jason on because it returns
a jason object and I'm going to put all of these inside
an async block like this so that we don't have to worry.
Now we basically have a top level async await, right?
So then that means I can do await fetch.
Wow.
Async await folks and so now we get the results
and we need to print out the results.
So we do console.log result and we're bam.
Oh, whoops.
Oh, now it needs to be stringified 'cause we're stringing,
we're turning adjacent object into a string.
It worked.
So the thing that we need is the object.
So this is what we need to use.
We need to use the detect and the point not the analyze.
Maybe we can get the description 'cause that could be neat.
We're gonna try with the object detection
and we're gonna see if this works.
Check this out.
Check it out.
It detected the object, it said object dolphin.
It doesn't show anything here yet but it will.
So let's create this into an async function
and call it detect object.
And then we're gonna have a URL here.
We'll get the results like this from here.
I guess we can print it out anyway.
Return the result.objects0.object.
But this is only if there is a result that objects.
So results.objects.length is grading 0.
Then we return this.
Otherwise, we return empty stream.
And so there we go, we've got detect object
and then we need to use this URL, so.
(music)
You are on there.
And then image source equals and then this will be
a nothing image.
I'll make this an ID.
This will be the image, img.
Document.getElementByID image set attribute source equal
to wait.
URL equals this.
We set this to the URL and then we do detect object
on the URL.
No, and then we get detected equals,
yeah, id equals obj, obj image and obj.
And so now document.getElementByid obj.innnerText
will equal detected.
Now we gotta a dolphin and it's like dolphin.
We're gonna be using the Pexels API.
This is going to be...
If window.pexelspsoof equal that then console.log,
Yes we haz Pexels key.
This should work and so there we go.
Okay, are we ready?
We got pexels (inaudible) and then with this
the next thing we need is to know how to call the API.
Async function, getFishionShowimages.
So we need the images equals await the fetch
and then we're gonna have...
This is the end point, pexels and then we're at search query
(inaudible) fish.
I think this will work.
Then r, rjSON just like this, windows, pexels, psoof.
And this is going to be authorization.
Wait, like this.
Console log images.
We don't need this yet.
Let images equal await this headers.
What?
1320.
So we can do 80, pretty good.
Per page 80 under water fish.
It's gonna be the entire window.
So we got this, right?
And so can we do like with equals 100%.
We need to return images.photos, we'll pick a random one.
So we'll just do our first one for now.
Set this as the attribute.
We'll say that URL equals images.source.
Original and then this should theoretically work
'cause now.
So thumbnail equals images 0.source.large.
We need to select a random image,
get randomint and then we'll have a number.
And then will return Math.floor of number times Math.random.
And that'll give us a good index.
Index equals get randomint between the images.length
and then we take the index and index and then we do this
whole part, then this whole thing.
So I'm gonna put this into a function.
We'll do update image.
Inside here.
Next Fishion queue.
And then as soon as we load this...
Let's to do a style here.
And then /style and we'll say html.body,
padding equals zero.
I think this is right.
I have an idea.
Let objects equal this but we are going to objects
or an (inaudible).
And then objects equals objects that filter.
Next.
The object does not equal equal person.
I guess we just return this.
Next zero.
I need to get rid of the margin as well.
Padding and margin equals 0%.
Height equals 100%.
And then look at this.
This is the background.
This will work.
Full image and we're gonna do width equals 1VH
and wait that was 1VH and 1VW.
I think this makes more sense so that there's no scroll in.
Crop the image, center crop.
So if we do that, we'll do an image and id is going to be
Fishion Show and we'll go to full page.
Yeah, this is fine.
Yeah.
We don't need to get the context.
Reset the source to the image, to the URL
but then we're going to offset position.
What did I break here?
So I set the URL and then detect the object
and then I do this other thing and that's fine.
This is what we do.
Okay, URL because the images (inaudible)
and then (inaudible) URL and then we do this
and then can I just do, why can't I do LMA body like that?
Or you just be like that.
As there'll be the Fishion Show.
Sure, sure.
And so now we don't need this thing anymore
and never be afraid to delete code, I guess.
(laughs)
I say and yes because sometimes I'm very afraid
of deleting the leading code.
But today, no fear and then we don't care about
all this other stuff.
And the comment is up for now.
Background size and what will it be?
Worth a try.
Wow.
I think we might've done it.
Do we need attachment fixed?
I'm gonna put that in there too just in case.
I think we do need it.
There we go.
Oh, wait.
I have a different plan.
We can use the analysis API.
So we just need this stuff and then analyze.
This is perfect.
I'm gonna get the result.
Wait, not the dolphin.
This is (inaudible) URL.
Look up info on the image, whatever image we're looking at.
And so we need to do a look up info on the same image
that we pass into the other thing.
Description is going to be await of the thumbnail.
We take the result, take the description and then
if this will end result.description.captions.length
is greater than zero then we're gonna return
the result.description.captions0.text.
We're gonna just return nothing.
Async function, speak text another text and sample code.
Ah, this language is probably unloaded.
Wait for it.
All right, we don't need this thing.
This thing loaded again.
There we go.
And then we do this text to speech thing
but we don't need this stuff here.
So we take whatever's inside text to speech on here
and then we put that in here and we're like,
(mumbles)
and then, hello world.
Hello world is going to be the text
and so we just request this.
And we don't need that anymore either.
All right, we're gonna test the speak text.
Testing this speech.
>> Man 2: Testing this speech.
We have to set it to a timer so that every so often
it updates.
So we're gonna set this to an interval
and we're gonna do this every, let's say 10 seconds.
Oops 10 seconds 'cause I can't count and then we'll have
the next fish.
What if we do this.
(inaudible) random 0.5 to 1.5.
That's probably good.
So now we have it on a timer.
Every 10 seconds it's gonna read out from here.
I forgot.
We need to have run it the first time.
>> Man 2: It looks like clown fish.
>> Woman: A fish swimming under water.
>> Fish swimming under water. (laughs)
It looks like clown fish.
Holy smokes, I can't believe it.
We didn't look at that.