>> And I’m Austin Khan.
>> And today, we’re gonna be talking about Azure functions.
>> We are indeed, yes.
>> We’re gonna influence some functionality using Azure.
>> Right. [CROSSTALK] All right, no worries. You can try.
>> That was really bad. We’re gonna yeah, implant some. We’re gonna do some generation.
>> Like in a smart way. We’re gonna combine Azure functions which is a new thing in Azure. I think it was announced at.
>> Yeah, it was. Yeah.
>> Yeah. With the cognitive services computer [INAUDIBLE].
>> Okay, yeah.
>> And we’re gonna bring these things together to generate basically smart based on Images.
>> Okay, so what is your functions?
>> It’s pretty simple really. It’s a way of basically running codes in the Cloud.
>> So it’s kind of like the, you’re not thinking about servers at all.
>> When we’re doing this? Or are you, you’re just basically sending some code up.
>> To your function system.
>> And then saying, on this particular event, execute this code.
>> Yeah. Yeah and we don’t care what kind of machine it’s running on. On how it’s running.
>> No we don’t care about any of that stuff.
>> It’s purely a PAS solution platform.
>> It’s part of the app service kind of package. Yeah, and it’s part of that. It can respond HTTP requests as well which is an interesting way. So you can send and API call it and it will respond. So there’s a whole bunch of ways that these functions can these functions can be triggered.
>> Okay, so they are the two options for developing this C# and for the moment.
>> Yeah, node. Yeah, so the they are the two mainstream options that is kind of an experimental set which includes things like F#, Python, PHP, all the other languages as well. So I guess, going forward it might be Derival in the languages.
>> So you could use functions with functional languages.
>> You could probably be correct, yeah.
>> So we cannot just kind get started with this. So I’ll itemize your portal now. I’m just gonna create a new function app that’s got a new section.
>> I’ve just realized that I’ve incidentally not switched the right machine [INAUDIBLE].
>> That’s an interesting expected that.
>> But we can’t see what we’re trying to look at.
>> It’s probably not, what’s might be interesting your head isn’t that way.
>> It disappeared. Look, disappear.
>> Woo, reappear, whoa.
>> Yeah, good gracious me which one is interesting.
>> Probably, the writer view as if you think that was interesting. So we’re into the Web and Mobile section which is kind of odd because you won’t necessarily think that web mobile that’s where it is.
>> And you’re looking for a function app. That’s what we’re going to create here. So this is about creating smart thumbnails. So I think Smart Thumbs is probably a decent name for this. So I’m gonna call it Smart Thumbs. And we just created a resource group. I’m just gonna use operation new resource group for this. Smart phones. I’m gonna create an app service plan, so this is kind of the billing model. [LAUGH] [INAUDIBLE].
>> I don’t know what I was doing. I’m making a mistake, I’m sorry.
>> And the billing model that sits behind this, so I’m gonna create a new app service plan and make it, I’ll just leave it like that, that’s fine.
>> And finally we get to credit a storage account. We have to have this storage account associated with that function because at the very least it uses it for logging information.
>> But in our example [INAUDIBLE].
>> Do you need to use it for other things as well. So you definitely want [INAUDIBLE].
>> So you associate a storage account and it’s a required.
>> It’s a required thing, you have to have a storage account. Yeah, so I’m gonna call that smart but for some reason it has to be lower case with storage accounts. Don’t know why but that’s the way it is. And so we’ve got, that’s the basic details of our function there. So we’re just gonna create, and that’s gonna take a few minutes to create.
>> So these function apps, they’re very similar to something that’s running AWS. AWS, we have this thing called AWS lambda.
>> Is that a problem?
>> Yeah, I thought you said, I didn’t realize it was lambda.
>> Lambda, lambda.
>> I thought it was lamb bhuna. In a production meeting.
>> [LAUGH]. No it’s not lamb either. I’d go if I see lamb either.
>> Yeah, good.
>> No, that’s not what it is, it’s Lambda, yeah.
>> Yes, I’ve actually seen AWs Lambda, AWs Lambda being the way of having sort of functions.
>> Yeah. Which you can execute on demand on certain things. So I do an interview estimate where we had a, say upload it to their storage system, and then it would then the lambda happening, and then it would do some processing. And it’s the idea is that you change all these functions. It keeps [INAUDIBLE] terminology there, but you chain all these lambdas together to create integration systems and all sorts of things.
>> So it sounds like a very similar kind of idea.
>> Yeah, one of the big differences though, they have the support for safer .NET is not fantastic but you can get .NET running on your functions but you have to do this weird thing. I think you have to use some kind of node that executes, it’s really odd to get it on network.
>> The support is kind of odd. We’ll come to that in a second. It uses something called a C# script file which I’d never heard of before.
>> But that’s basically it. It’s a script that is written in C#, not necessarily a full C# project. I don’t really know much more than that about it I’m afraid. Kind of interesting thing. And anyway, so.
>> You can switch from Lambda them back to the studio.
>> Okay, excellent. That’s good because I’m sure the viewers probably didn’t appreciate [INAUDIBLE].
>> Exactly, for some people that’s not gonna work.
>> Exactly. [INAUDIBLE].
>> Okay, so about three minutes later you get given this kind of interface which has got a few things on it. There are kind of wizards that can kind of talk you through the creation of these functions.
>> I love a wizard.
>> Well I’m not sure I do love a wizard.
>> No, not in computer programming.
>> Which is weird, given you’ve never heard of a Muggle.
>> But what we’re gonna do here, so a function app contains many functions, can contain many functions. We’re just going to create one quickly here. We’re just gonna do a very simple one to get the idea across initially. So these all the kind of templates that we’ve got. So the whole other things here like blog triggers, event help triggers, generic web hooks. This specific get hook integration is somewhere as well, timers that can run on the schedule base. This is later ways that this can be kind of initiated. Just to survey quick Hello World example. I’m just gonna use a HTTP Trigger, yeah, in C#. And so letter name is the default there, and what this gives us is some pre-written code which is basically a C# function. This is in, so you can see that. A C# function that basically takes in the query string parameter and writes that back to the responds with that query string parameter. So really simple standard C# code. There’s nothing special about this, in terms of the code itself.
>> It’s just C#. So we save that. One of the things about the HTTP function is it gives us this URL. So I’m gonna take this URL, and I’m gonna use postman which is my favorite kind of API testing tool, and I’m just gonna hit this URL straight away. So let’s come back for 400 bad requests saying I need to pass a name in the query string of the body.
>> [COUGH] Excuse me.
>> If we go back over to the portal we can see everything that’s happening when the function is being logged. So that call we just made is being logged there for us to see.
>> I think I saw that in the function. That bit where it says C# HTTP Trigger.
>> That’s actually in your code isn’t it? Yup, in the top of it, it was.
>> Yeah, in some way.
>> So there we go. [CROSSTALK] So we can see exactly what is going on here. It’s pretty cool. So just to make this work, we’re just gonna put in the required thing here, which is name equals world, and there we go, responds to it Hello world. So that’s just a really simple example of, it’s just one to HTTP request, and it’s posting back hello, whatever the thing is you’ve asked it, really simple silly example, but that’s the idea, it’s just execution of the code, and I don’t have to deploy or compile anything. It’s made packages to just running that.
>> Ordinarily, that’s basically a poor man’s API.
>> But realistically, what this should be doing is, your system would want to fire an event and then you would go and do some more serious processing, probably.
>> Rather than getting a response directly, this would just be like a file and forget usually.
>> Quite possibly, yeah. So okay, the the next, so before we build our thumbnail generator, we need to do some work with our storage account first.
>> Because we want to basically have, well I’ll go to storage account first, so under my storage account there is smart thumbs.
>> Now, as your storage has different types of data that can be contained within that. Queues, tables, files, and blobs are the four main types of data. Now we wanna work with blobs which are basic binary object, and we have this idea of containers. The containers, like the top level of folder, and we wanna contain, we wanna have two containers, one called original. Originals, so plural. And one called thumbs. The idea is, we can assess what the functions so that it triggers whenever you load something to originals, it generates a thumbnail and stores that in the thumbs container. That’s the idea of what we are going to do here. So those are our two containers and that’s the storage bit setup ready to go. So we can now get back into or function which is under Web Apps weirdly. It’s not the reason you can find the thing called functions in that but I guess it might change at some point but you have to go through Web Apps to get to it, and we’re gonna create a new function now.
And this one is going to be a BlobTrigger in C#. Okay, so I’ll leave that as its name. Now-
>> You’re using templates here, can you do it, is there other ways of doing it?
>> You can have just an empty one. So one of the templates is just empty C# or empty nodes. You can simply just write your own code but the templates are quite useful so this will, one thing that it has, the code itself, it has a integration hub as well that is what we are setting up here. So this integration hub is basically integrating your visual storage. I am saying what path I want to look at so I want to look at the originals container. And I’ll import /name which represents the file name that’s been passed in and I also have to set up the connection string effectively with my storage containers by which I can just go in here and browse and select the one that I want to use. So this is my, that’s my sort of incoming integration point. Just let that run for a second. So what I’ve got here is I’ve got a piece of code that’s basically saying it will take in a blob and it will log when the blob arrives and I’ve got my integration point here which is saying.
>> How I’m connecting to the function, basically. So what I can do now is I can start work with this. I can upload the file. I’m just going to go back to develop, so we can see the logs here. Now, this is where we start to look at Visual Studio. So Visual Studio’s got a really great tool called Cloud Explorer. It comes with the Azure SDK, I think. But if you’ve got the SDK installed, you get this cloud in the Explorer tour, which is really good to do in any kind of work for. So I’m going to find my SmartThumbs. There it is. There’s my storage accounts. There’s my blob containers and there’s my originals blob container. There are stand-alone, there are, yeah. Cloud explorer is one that does this. There’s a few others, but this is kind of, I tend to use Visual Studio cuz it’s just [CROSSTALK]. So, I’m gonna take a picture that I’ve got. Let’s just have a look. I’ve got some files here. I’m gonna take a picture of my ridiculous looking brother, with his silly beard, I keep telling him it doesn’t suit him.
And I’ve uploaded that, it’s called dave.jpg and there we go. We can see in the log what’s happened here is.
>> You’ve logged the binary.
>> We’ve logged the whole binary, yeah. So if we just scroll right the way up to the top. So we can see in the C# BlobTrigger, so that is saying that it started and then we’ve got the actual binary data of the image though as well. So obviously in code, I could do something useful with that binary data. So that’s pretty cool and next thing I wanna do is just to move this on a bit and so I wanted to sort of copy that to the thumbs.
>> It’s pretty amazing how quick and stuff would work, isn’t it? It’s look like it’s all very immediate.
>> It is, it’s very cool, yeah. I don’t have to recompile or any of that stuff, yeah. So what I’m gonna do now is I’m gonna set up a second integration to our thumbs container. So what I’m gonna do now is copy this file from original to thumbs as it is to begin with. So I go back into integrate, I’ll go to new output, again, I’m going to choose Azure storage blob, and click select. Now, this is going to be called output blob. And the container here, the path here is going to be thumbs. So remember, we had those two.
>> Containers. Thumbs name. I don’t know. I just did it to set up the connection to this storage account.
>> It could be a different storage account.
>> Exactly, yeah. Click save so you have got an input and an output now set up.
>> Just click saved and I am just going to go to a Snippet Manager here and copy a bit of code over what we have got there. Now, what this code does is it takes the stream of my blob which is the incoming blob on the originals storage container, and then the stream of output blob which is the outgoing blob.
>> So it’s just saving. The same image gets uploaded. Dave will be duplicated.
>> We’ll have two Daves. It’s bad enough with one. Two Daves, two Daves.
>> With that terrible beard.
>> Yes. So there we go, just click save, I’m just going to clear the log just so that we can see stuff happening there.
>> Does it reprocess your storage account?
>> No, it’s an event based thing, so I’m going to have to upload the new, so if I go to originals, it’s uploading a whole new picture. Let’s take care, Bill Gates and Steve Ballmer doing a happy dance, that’s one of my favorite pictures, that’s what made it there.
>> Your favorite pictures?
>> It’s one of my favorite things.
>> You have it on your wall, do you?
>> I have it in many many places, yes. Now in a second, we will see, okay.
>> So I just have this vision of you flipping through like a family photo album. There’s Steve! Steve and Bill.
>> Yeah well, we’re all pals. Doing the happy dance.
>> Less than.
>> It’s fine. So there we go. We can see functions started. Function completed. That’s all good. Now let’s have a look in the thumbs. I’m gonna do refresh. And we don’t see anything. Because I called it thumb, not thumb nail.
>> [COUGH] Excuse me.
>> I’ve set this bit out.
>> Wow. I need to remember to do some-
>> That’ all right. We should leave this in.
>> We should leave this in. Okay.
>> That’s why it’s called Web Hack Wednesday.
>> So I made an error there. I called it thumbs not thumb, so we’re going to have to upload a third picture now to-
>> In your logs, anyway, without error [INAUDIBLE]
>> No, it didn’t actually. I kind of expected it would have done, but no it didn’t. Yeah. There we go. We live and learn. So we’re gonna upload another picture of my son looking really bored in London. Because I’ve taken far to many photos of him by this point. We’re just gonna wait for that to come in so we see start is completed again straight away there in the log. [COUGH] Hopefully, if we refresh this, there we go. Bored James. So, we’ve taken the originals container.
>> The functions when it’s copied, it to the container, we can see it’s the same picture there. And you can see, there he is looking really bored.
>> I think this has been the 50th picture taken. I think that’s the Millennium Bridge in London. So that’s cool. So we’re making progress. So, what we’ve done now is we’ve responded to a file being unloaded.
>> We’ve copied the file from one container to another.
>> And now we’re gonna get really clever and start doing the smart resizings.
>> Always a risk when you get clever.
>> Yeah, well this is what we’re about.
>> Is it?
>> Kind of. We like to portray that image at least. So we have this set of services called cognitive services. We used to call it Project Oxford.
>> But it’s basically a set of machine learning based APIs that do really cool things.
>> Well, it used to be called Project Oxford and Bing [CROSSTALK]. And they’ve cleverly branded it now as-
>> Really hard to both say and type.
>> But it’s a sort of word. Cognitive’s a sort of word that makes you sound cleverer than you are. Cognitive. We’re doing cognitive machine language.
>> I’m going to make my function cognitive.
>> Let’s do this.
>> But before we do this, let’s just have a little look at this API. So the API itself does loads of stuff. It can analyze images, figure out what’s in the image. It can even recognize celebrities. I don’t know when that’ll be useful, but it obviously is. Types stuff. One of the sort of more simple things it does is generate thumbnails.
>> But it’s smart thumbnails. What it does is it identifies the region of interest in the photo and crops the thumbnails around that region of interest. So we just take a little look at, I’ll upload another image here, I’ll upload a picture of my wife Laura there. She quite likes her selfie, Laura does, and this is one of her more recent selfies. So you see, if you look at the kind of how that’s generated, this various thumbnails, it’s focusing on her face as being the region of interest and it’s cropped around that area. I just cropped out other things like the background and the lower part.
>> Seems to take a particular focus on those glasses.
>> It does, yeah, if we turn the smart cropping off and just see the difference it makes. Not a lot of difference at all in this case.
>> But I think it’s quite center focused picture anyway. But the idea is it crops intelligently.
>> Based on what we’re trying to do. So let’s implement some code to crop intelligently. And now I’ll get back to my favorite snippet manager here. Just copy this piece and cut it out. Just gonna paste this in. Now I don’t need to talk through all of the detail here, but this is basically an HTTP client request. Based on the .NET stuff. I’ve got an APIQ, which you can all copy and use in your own applications. Please don’t do that. Please get your own. We’ve got the base for the API. We pass in this OCP subscription key thing.
>> This is very similar to when we showed off the emotions API.
>> It is almost identical. Yeah the only real difference is with this one, you have to pass in a few query string parameters so the height and the width that you want the thumbnail to be and whether you want smart copying to be turned on or not. So I’ve set this up kind of hard coded it to 320. Just cuz it’s a demo, I’m not going to worry about not hard coding things.
>> But basically, all it does is it takes the response of this API will respond, we have a binary file as well, and I take that and I just write that to my output blob there.
>> Do you know is there an option with this particular thing to get responses of different objects in the same request, or do you have to make multiple requests if you run multiple requests?
>> Yeah, multiple requests I think. So either a request per person or thumbnail size. So yeah, you could probably write this to generate a few A few different thumbnails, a few different sizes if you wanted to, but basically we get a binary byte array effectively as a response from the API, and all I’m doing is I’m writing that byte rate to my output. So I’ll upload an image of whatever size it is, it will resize it to 320×320 intelligently as well.
>> Okay, cool.
>> Okay, so let’s go, so I’m just going to save that. Clear my logs out again just so that we can see what’s happening here. So if we take another picture. I’ve got a picture here which I deliberately made to be kind of off center. So if we look at this picture. Now This picture of me from last year at conference was [INAUDIBLE]-
>> And I’m kind of off-center here, so-
>> I took that picture.
>> You did, yes, yeah.
>> I think, you are off-center but that is my composition.
>> Yeah, you’ve deliberately, you’ve used the rule of thirds I think.
>> Yeah, exactly, that’s what alternatives do, they-
>> Yeah, very good. So, what we can do there is Upload that picture to our originals. And there it is. It’s gonna do its thing. We go back into it to see that it’s doing its thing. It takes a little bit longer because obviously it’s going off to the [INAUDIBLE] APR now. That’s the [INAUDIBLE] straight away. Then we go through our thumbs folder and do refresh. There it is. Now, if we open this all, first thing you will notice is it’s 320 by 320.
>> Yeah. DM.
>> And it has cropped. It still kept the subject, sort of me, on the side.
>> But it’s cropped it so that it’s made sure that I’m still in the picture.
>> Had that been just a normal crop, you would have just got the background.
>> Exactly. So if we just compare that to the original picture there.
>> That’s very clever. See how it’s cropped intelligently. But you can also see that it’s actually resized it to 320 x 320. I don’t know how I actually show that in here. File information, maybe. There we go. 320 x 320 pixels. Whereas the original was really big, 1500 x 700 and something. And obviously, I can put in any width and height dimensions. And you could ultimately then have secondary processing on it as well. You’re doing there a small crop but then you could also do things like squish the file size and stuff that depending on if you’ve got APIs to do that stuff for you.
>> Which is quite a common thing you might wanna do with your images, which is run through some kind of process to reduce the size-
>> Absolutely, yeah. You could optimize them maybe, that kind of stuff. It’s those nice things you can do.
>> Convert them from JPEGs to PNGs or whatever.
>> And it’s great because it means in a scenario where you’re using them, if it’s like any common scenario where you want to generate different thumbnails and different you just upload the original high resolution image. And this will just run. Then you can do anything else. And it will port all the images in the right place, it can be named, do whatever you want.
>> We’re basically putting out of work all of these people with Adobe Photoshop.
>> Yeah. What. I used to work on an economist site and there was a guy that did that. Took the pictures and then produced it like a thousand different–
>> I’ve got a little app, a little Windows app, that does it but this is way easier.
>> Yeah [LAUGH] Okay cool.
>> So, cool, that’s it. That’s your functions. So it’s basically coding the clouds, you can initiate them using a whole lot of different things. Timers, triggers, event hooks, you name it. HTTP requests and they just run the code. With C sharp, you can pull in new Git packages into all sorts of stuff as well. It’s quite early days, so I think that that story is a bit kind of had to develop this in ASP.NET and then import it, right? Cuz this is your idea at the moment.
>> Right, I was gonna ask that. Because with other things like the, what’s so interesting into this? Mobile services.
>> Mobile services yeah.
>> When you got, you can write little bits of code in that and originally you only had like a web interface and then they subsequently added a way through Visual Studio. So a bit like the Yeah, I would imagine so because obviously you want to source control as well then.
>> Yeah, well actually, one of the things you can do is it’s already got continuous integration with Azure so you’ve already got source integration with this. I don’t quite know how it picks which files to to pull it into which files it doesn’t.
>> Yeah, okay. The thing is, I think-
>> There’s still some work to be done.
>> It’s early days and there’s a lot of stuff coming for this, but it’s a neat feature.
>> It really is. I think the cool thing about this and AWS Lambda is this ability to create very complicated work flows, but these very individual functions to do one thing and then they get invented. I can imagine orchestrating very complicated applications with this. My worry with both these technologies is slightly like, how complicated, how it would all fit together and how you’d know that it all fit together, like you could imagine this getting a little bit unwieldy.
>> Yeah, you could. I mean, I think the sweet spot for this is almost like this example of generating from mail. It’s an ideal, classic scenario for this because it’s kind of a workflow thing you need to do, lots of websites, lots of apps have this problem of having have to generate an optimizer images. It’s just a really easy way to do it, I just upload an original and let it take care of it. Have it for you,is that okay?
>> Sounds wonderful thank you very much. That’s it for another episode of Web Hack Wednesdays we’ll see you next week for another web topic.
This week Martin and Martin look into Azure functions, an event driven platform as a service that allows you to execute functions of code when specific things happen.
Martin Kearn uses this new capability to build an image cropper that executes when images are uploaded to Azure Storage and then crops them and places them back in another location.