Customizing Hygraph data with external services

[Music] all right hello everybody we are live once again and I am joined by my buddy Nikki who just put himself on mute oh he's off mute dude how are you I'm messing with when you do it on purpose okay of course they did Pur come on no so we were literally just like up until like a minute ago working on the code for this stream because we want to do the best thing and we also live on the edge and we want to be a bit prepared and so that's why we just say it we just minut come on right so Nikki why do you want to maybe try to explain what we're going to do today and then see if I think the same thing because we both for this so you go first true true true all right perfect first of all hi people if you don't know me my name is Nikolai or Nikki or feel free to improvise with any other variation of the name it's fine don't worry about it um basically the idea for today was to kind of go over a scenario that we keep hearing in uh with our customers right and this is basically how do we go about a system where we have a gazillion images and we constantly reupload them because we just can't find the right one to reference or how do we structure our images and assets uh at the front end so we can get some kind of a categorization right and there are many different ways you can go about it but since we are like the whole world actually is on a type of an AI Vibe why don't just use AI to do that right we can we are on the ai5 train today exact exactly so let's use AI to classify our Imes actually AI or is it busz word AI I think it's proper or could it be machine learning or something it's it's funny because the first time I saw the system that we're actually going to use today was in 2015 if I'm not mistaken yeah back then AI wasn't that big so I'm gonna say it's probably machine learning but again don't who cares if it can detect something in a picture like so let me just quickly share my screen to show you a tiny demo so in a few streams before this one we actually worked on the stock Library starter because we did all these things with assets and so I've expanded on that project to actually add these tags here right so when I go to a page that shows you this lovely kitten you can also see that it has these tags I didn't add these tags at all the AI system did and then when you then click on one now there's like a a tag page where you can see all the cats that have that specific tag right and so this one is cat but we also have a picture by by Nico Nikolai that has to run a little bit and this one actually has Canyon on it but there's only one with Canyon so the way we've done it now is we really want everybody to be like hands off you you shouldn't have to add these decks yourself unless you of course want to right and so in our modern time we figured out or Nikki actually figured out we can use something like imaga so so Nikki you know these guys right well let's say I do like they they are actually a Bulgarian company where I live so awesome they're pretty close to home yeah and again like they were like I don't know exactly when they were founded but I heard about them first time in 2015 yeah so they're pretty much established on the market I know that a lot of companies are actually using them so they are pretty stable and again AI tagging is just one of the things they do they have a lot of different things yeah it's pretty wild you can see visual search facial recognition not safe for work so they would blur out like faces and things like that that's pretty cool so of course we're using the tagging and I made an account and it's free and it just worked like that it's pretty crazy that sometimes these things are like there's not much you have to learn about this system it kind of just works so the way we figured out how this should work work is I want to upload an image and when I see that image after the upload it has the tags because this imaga system gave us these TXS and up and it got updated into hgraph but how do you do that without having to like manually type these tags yeah and so what what do you think Nikki what is the what are a few ways you could do this it's well I mean the the most the most use used use case you're going to see out there is pretty much a blackbox type of an approach right you give it an input basically the image and then you get an output as the tags that you're going to be using right yeah and this is exactly what we're doing with Thea now they pretty much have the API that accepts a URL of an image you don't even have to upload it there yeah you just give it URL it reads it and then adds exactly back a list of of tags and before we go on I'll show you the schema of our asset it's literally an ALT tag which is used as the title and then there's this tags thing and it's literally just a single text line where you can have multiple values so it becomes an array of text things which is this pretty much right and so we've now build it when you upload an image this is automatically filled and so um let's talk about how we do that right yeah how do we actually tag it like what's the workf there there um I wish I could show you this in our in our new studio but of course it's still in beta so it doesn't have this but let's open it in in our classic interface so we are using web hooks to make this work and so we have a specific web hook that calls this imaga endpoint and if we hit edit on that you can see um we're we're basically firing wait before I dive in Nikki what is a web hook because a lot of people have different ideas about that I think yeah I mean a lot of companies have different ideas about that too exactly so let's talk about it in terms of what what a web Hook is in hgraph right yeah and the the most I kind of want to say wholesome but basically wholesome way to describe it is web Hook is is a wholesome way to describe it this is a weird adjective for web doesn't matter it's fine it's fine web hgraph is basically a way to integrate the system with something external as an outgoing stream of data right think of it as notifying some system out there that something happened in hgraph you can use that for many different things like building sorry starting a build um logging a ticket somewhere because somebody published something yeah or in this case when you upload an asset you notify an AI system that it needs to actually tag that asset right it's basically a way to notify something external of hgraph that something happens in the data in HRA yeah so in this case when the content model asset is involved and it's set to a draft and you create or update that asset and it comes from a project member or the public API yeah hgraph as a server will call a URL with a bunch of information that's in in a post and then that URL accepts that and does something whatever with that information it's basically just like almost like sending an email with a payload and the the person who receives that does something with that could we say it like email pretty much yeah maybe a bit it's basically just two systems talking to each other and the only way to do that is well in this case is is a web hook I I mean technically speaking it's more like a UDP type of a thing because hcra sense the way Hook and the idea is that we don't really care what you're going to do afterwards I could to you yeah exactly it just sends something to an endpoint and so interestingly when we upload an image it's sending a bunch of data to this URL and this is actually you can see it's on forell this is a forell serverless function that listens to a post and gets information from its body and then does something and that's something we're going to build today well we have build it so let me let me just show you in a demo how it works and then we'll build it again to show you what that would mean so we're going to go into the nerd zone for a second this is going to be fun you can see me writing backend code while Nikki the actual backend developer just sits there and laughs at me when I struggle it's the fun part of streaming right dude it has been a while since I've been an actual backend developer ah don't say these things okay I'm going to okay the steps are I'm going to upload an image then we're going to look at the logging of our system in forell so I can you can we can really see what's happening and once the logging is done we're going to go and see the assets and then we can also see it on the website actually all right so let's upload and of course I have a folder with cats which one do we want this one so this is my cat he's called Titan and here he was very small but now he is Titan size by the way if you get Titan as a smart tag I'll really be impressed oh that would be so fun okay so now this upload is done it's in draft mode so let's have a look this always takes a second to update itself because the the versel logs have a have a delay because we're using the free tier um I might have to refresh this could be it yes it is that's probably it this my time this is fresh so we updated the Tex we found the image we gave it to imaga and then it gave us back a whole bunch of things with from fluffy to Pats to adorable to Cur curious furry all the things and then it was applied so well let's have a look when we actually open this here are our tags so it's it's filled it out so that's super cool by the way are we now we what happens if you want to add a manual manual so I'm going to add Titan to the list because it is Titan the thing is we now did an update so when I hit save it's going to be actually firing again to imaga so let's see if that actually is coming in will that kind of overwrite your tag as well it shouldn't because that's how we coded it oh I'm just going to refresh through the magic of being prepared you mean six okay so this is again found the same things let's refresh this one and it didn't over there go so that's cool let's go actually back to Studio because that looks a little bit more lovely um where is Titan here there you go so there it is so um and we we like we'll check in a second because we actually posted to like it gives back a lot of that and some are closer than others and it gives you an approximation in a percentage like a 0 to 100 and so I think in this code I'm only grabbing everything above 70 so and then of course let's refresh the page here okay this is not showing because I'm querying published content rather than draft content so when I actually hit publish on this image now and I've well I didn't add a title now so maybe now of course in the future this can also be done with AI just a lovely description now when I refresh there's Titan the cat by Tim menx this is the resolution and then it found all these tags and so now it kind of just works in the system and so this is pretty cool right we didn't do much we just like it felt like it takes long because these logs just have a 30 second timeout like only now I can see them but essentially it just happens the moment the image is on there it just works so um I think it's time to code something I see we have a whole bunch of viewers if anybody has a question on other ways of doing this or some opinion please share it with us and then we can actually talk about it or code something differently however you want so how about we go into some code let's do that but first let's actually disable the web hoop that we now have so we don't have a cushion to fall into uh yeah that's smart okay so we have to go back to Classic for that but that's all good so how do I disable this hey that's nice yeah there you go okay so we are now not active so let's just have a look in our code and well I'm just going to you know kill the whole thing what before I kill the whole thing let's have a look there's a few things we need that I'm not going to retype like especially those two um let's let's keep those two and the rest we remove yeah makes sense there's a few things we're going to need well there's there's some functions here and oh let's I'm going to keep that type and I'm going to keep this just for the people so we don't have to retype that stuff and if we keep stuff let's just talk about what that actually means so um we use a graphql client called Gra rql requests which is just a super nice way to query stuff in graphql it has a bunch of helpers so you can make a new client and that client can send requests and then we have a high graph endpoint and a high graph token and let me show you where you get those wait wait wait why do you need a token though in this case ah you're so prepared good questions my friend so because we are actually mutating something in our code we're getting the tag from imaga then we have to update something in hgraph that means we're writing to the system so we need to make sure that we're allowed to actually do that and that's why we have that that actually makes sense a lot of sense that's it now how about that um let's go back to our studio so in the project settings you can see we have an out token that we're using here and the there's a public content API that's just open and we have an endpoint that we query to which is our high performance performance and so we're using the high performance endpoint and that token so we now know that high graph um High graph knows if we post to this with this graphql client that it's allowed to do that and we do get stuff and we do post stuff with it and so there's a bunch of stuff that you need from nextjs in its server setup and so um you can actually do responses and so this one is all about post right because um what we get from the web hook has a lot of data to it like there's a whole body and a lot of Json stuff and so that's much easier to do that by a post because you have a post body so we're doing it all in post and if you get to this API we just say go away let's see if that works it says go away we're not doing a get everything has to work with post all right so of course right now it's returning something like hey it worked but like we haven't done that code at all yet right so there's a few things we need to do first we need to accept the data from that web hook then we need to query from that web hook information our image in high graph and then from that image and hgraph we get a few things that we need to be able then later to mutate it with the things we get from imaga right and so um I'm just let me just open this one in a new folder how do I do that I don't want to drop it in the editor I just want to have it as as can we do this you were able to just like a sidebar you were able to do a separate editor now right didn't they make an update you should be able to that's interesting if you give it a a right click can you open it in a new window open to the site open with refilling finder interesting I'm just going to do it like this of course it's going to be smart and open the same thing if anybody in the chat knows more please help us um what I can do though yeah you can go there with the terminal and just do code whatever then it opens the same thing again it's really no you you you need to go with code and the name of the file and then it should open it and then you or that oh yeah let's try that holy moly I thought we were prepped okay so what are we opening not that prepared um the file what is the file app app slash there you go and now it open the same again it's really clever very very clever here we go there you go okay we lost like way too much time on that silly stuff all right so what we need to do I'm I'm just going to look at my my my homework a little bit so what we first need to do is we kind of have to you know get the information from that post and we just need the image ID and so uh let's see how I've done it in the other one so we it's we have a function called update tags which makes sense and update tags are going to do all the things and we're just going to need an ID and from this we should do all the stuff right so what we want to do is first let me just just write it down we're going to have to get the asset by ID and then from that we have a bunch of information well we're going to be able to like get the URL and the file name of the asset right and then we have to actually ask imaga for the TX one thing though like the web hook actually gives you the asset right because this is a part of the payload can't we just use that that's true because I remember in our previous code bit I actually do a query to high graph again to get this stuff but we might already have it the thing is I did the same thing in my in my initial PC of this like I requery the asset you want to just try and use the the payload that we get yeah let's see what we get from the payload so get the image by ID ask imaga for the Tex and apply the TX in HRA that's what we're doing so um I have this get asset by ID function in my other file so let's see so that actually does a query to high graph and then what it returns is just the asset but what I'm thinking is that this data this is actually the whole asset it should be the whole asset yeah right so we might actually why don't you just do a console loog here and let's see what it actually put puts out whoa oh almost so what would be the best way to do that because we just disabled the the thing right um do do you have something that can expose a local hosts publicly um not really what I could let me think what would be what is if there a way we can see that payload well what we can do is just I'm just going to push this up and do a console log yeah gra the console and then we can use this as a as um yeah as but then you need to reenable the the workb hook yeah so I'm we're just pushing it to for sale now to actually get all that information back what is this low what are you saying we need to use the r recursive argument which which command do you mean low let's let's wait for to reply um one thing that's kind of worth explaining here is why can't we use Local Host for web hooks oh yeah that's a good one because you can use Local Host for other extensions to the system right if you're using an app or something like that you can easily run it locally and test it in hgraph for web hooks though it's a bit different because web hooks are not called from the interface they're actually called from the server once an action is committed to the database exactly so it's it's important to be a publicly available URL so what I'm doing now is going to be very cheeky I'm going to run forell Dev locally but the funny thing is when you run this locally like that it will actually run the serverless function through forell are you you're just gonna get the the log I'm gonna probably get the log in here oh that's nice let's see if this magic is working I almost lost my trail of thought because it's so it's kind of jumping through a hoop backwards strangeness improvisation winging it oh yeah I love that all right so this was just updated let's see let's see the log well that that's not a lot of log is it but we can wait wait wait wait wait wait did you enable the the web hook again yes but the one thing that might be an issue is that we didn't promote this to you need to promote it yeah yeah so the URL is actually correct oh here let's while we wait for that let's see what LO has to say so there was a comment um when you were trying to open the file oh yeah exactly yeah we were just just losing time on that silly stuff there well oh and people in the comments can you please explain why if you want to build the smallest next 14 project it literally takes like minutes there's not much going on here oh it's generating static pages though maybe that's why it takes a second static Pages for a serverless function well there's a few pages in there right deploying outputs it's not that long 25 seconds it's all right okay now we can go to our thing VI the logs I'm going to try again let's just delete this one and that again technically you could just have updated oh I could have just changed something you're right yeah did this now show us something no not at all that's very interesting how about the online console though come on could it be that ver there it is all right cool uh do we have the tags there what we are getting is an ALT ID um tags are empty for now we have done that's fine and we have the file name there's a bunch of stuff here that we can actually use right you can absolutely use this this because this is basically the whole asset like this is the same thing you're going to get when you query the the system by theend yeah because when I query the system I'll show you that here this is my backup file that I'm using as my homework we're quering URL file name ID and tags that's what things and I think we actually get um ID file name uh the URL is not there though isn't it oh yeah you're right oh no it doesn't there's no way to concatenate that together I think right so that's the reason we so we're gonna have to do the call okay okay that makes sense that is all right okay so with that in mind what we need to do is get the SD by ID right yep and so we're going to do our first query here I'm just going to quickly copy this so we're going to get the asset buy ID and we're just going to make a function called uh let me see how does all this work so in here what we need to do is actually get a query like this so the client is here so graphql client we're going to request something which is of the type asset and what we need is URL file name ID and tags and we're giving it the variable ID so it's literally just querying where the asset ID is ID and we just received re that ID of course from our web hook so we're going to get an asset from this and I'm we just going to return that and so let's see what else do we need after that I'm just looking at my homework again so we have the asset then we need to actually get the tax from imaga our external service so what we need there is the URL of the asset and the file name of the asset because we're we're asking for the file name to check hey is this a jpack or is this a PNG because it's if it's like a PDF or something else it probably doesn't work so we need to do a little bit of filtering here I mean technically you probably can still pass the whole thing toaga yeah and then just ignore it or something yeah but then you're gonna burn burn through your API requests yeah exactly there's a limit so all right so what we need and I'm just going to copy this lovely line of code here and we'll just go through it otherwise the the the writing of this code is going to take the whole stream so I just copy pasted this so essentially what we're doing here is if the file name ends with jpeg PNG jpeg or webp we will then actually do the response we actually go for the fetch so we go to API ima.com get the tags um so um Nikki can you explain the threshold here right so the threshold here I believe is we want everything that has sorry we want every single tag that is more than 25% certain that it actually describes whatever is on the image because when you when you get those AI tagging stuff or image recognition Services they give you a level of certainty about something that describes the image right 100% 100 is basically yep 100% this is a cat for example and then it might give you 1% that this is a dog you don't want that and so we might so we just cut it off at like everything below byebye pretty much and this URL actually comes from high graph and so this URL was not in the post from the web hook so we've had to query it by doing this function here so yeah let's make this slightly cleaner and put this up here all right and so we're using um an imaga token so if you make an account you just get this token out for free from them there you go use it so that's what this is right so we're adding an authorization up and we get back some Json and we don't need this logging here now and so essentially if there's a result and the result actually has tags then we say we're good to go and if there's no another result and not text it just returns an empty thing here and if the file name it doesn't have JPEG and PNG and JPEG and webp it will also just return empty so that means it will kind of just go through this function and that's kind of it and so once we have those tags I wonder do we just continue with the code Nikki or do we actually start you know debugging a bit now and see what's coming out in the the console logs I would argue that we need to check the console first because this is where things normally would break this is very true so yeah this essentially returns a bunch of tag right so this is the tags here so how about we just console well you know what we can do like this okay this we can remove so it's essentially just grabbing whatever comes back from that update TX function right so we can just return this and what we return here will be that message and that's what the API is going to give us that works right so we have to upload this now oops it would have been so much nicer if I could just run this locally man I thought that was working I can uh I can tell you how you can do that yeah we can use and Gro right something like that pretty much the forell CLI was built for this so I might have missing be missing something though I mean you're just kind of adding a couple more minutes on the on the whole thing otherwise it would just have been but we're only 31 minutes in we're fine is that what you saying Famous Last Words Tim Famous Last Words famous last words exactly so let's have a look at how this build is going okay so we're building the problem is I have to promote it to uh deployment to production also and that is I have to do that because some sort of strange thing that's going on where my forell account can talk to my GitHub account right but this thing is on the hgraph GitHub and it has to be approved to go to my forell account to then go live so I cannot just do a git commit and it automatically does it because I don't have the approval because we you know do security well and so we're kind of just working around it this way yeah and that's just the way it is for now and that's of course not great but it is what it is you should not have done that why not because you just clicked redeploy not promote oh no no no cancel all right we're going to production so let's go over the code while we wait a little bit just so we can all follow if it's a post we grab the ID we get the update text function with that ID so in that function we first have to get the asset so we query the asset by ID which is this function this just a query to high graph for that ID give us these things once we get that back we're going to get the TX from imaga with the assd URL and file name which is this function so we're checking for the file name if it's one of those then we query and if it actually works it res returns some TXS to us if not it Just returns nothing I'm going to be very controversial thing please and uh what happens if I upload the webp it will work oh thought of you just thought of everything you didn't re expect that did you I did not even though I probably roll that all right so what we're doing now is actually console logging oh are we console logging I'm just returning this but that's well you have the response yeah but I'm not sure that shows in the oh no do we have to do the whole upload again are you kidding me it's G to be oh it's fine though if you commit that oh wait wait I think I can do this yeah there we go you just skipped one of the 30 second steps that we have thank you Andreas you can see a struggle and hopefully succeed soon maybe maybe let's see if this thing that we're doing now actually gives us a production deploy directly I don't know we shall see all right see so while we wait for that maybe we can just have a look at what else needs to happen right even though we return this here here that's going live we're going to check that in the SEC but once we actually have these tags we need to apply them right and so we're going to have to do this of course right now that's not working but let's let's do that like this oh wait can I okay this is ready but is it the prodiction well we have to say oh yep nice okay we just step that's good let's refresh and we're just going to edit this one right yeah just give it an old text or something actually her name is Coco so there we go I would expect scar but sure let's go and see if there's some logging going on few logs here we go all right so yeah what we just returned back is confidence of 100 it's a Katt a kitten and a cat I said katten there that's weird k and a kitten and so with 94% certainty this is a feline or a kitty or a young animal all right this is pretty cool and you can see it get it gets off the rails there once the confidence kind of gets slower and more it's it's kind of it's curious that's kind of fun sure fluffy I can get I can get with that so yeah that that's why we cap it off at 25 because you can imagine what happens beneath that below this it's not GNA be great no exactly all right so this is pretty cool so we just received that information so we need to apply some of this information to our tags in high graph of course and right now that doesn't happen because we're literally just logging this stuff nice progress I call this so let's not return those but actually apply the tags in high graph so let me just so this is the final return so what we get is the original image aset Tex that we already had imagine some TX are there right we need those we need the asset ID to be able to know what to mutate in high graph and we need to have the tags from imaga to actually do all this and so with this I'm just just going to copy the whole function again because it's pretty long to type uh we just go here right so we get the imaga Tex the asset taex that already exist and the IDS and the ID of the thing itself we don't need the log here um so there's a few things going on in this stuff here so we have this shoot mutate flag here because sometimes if there are no tags or they don't match our threshold or there's whatever we don't actually send the mutation to high graph because it's yet another call if we don't have anything to tag we don't actually do that at all and you can see here we've set a threshold for 70 and what that means is when we go here everything above 70 is what we're going to add because we could do more but do we need cute that's kind of it it might be cute and it might be a pet and it might be domestic but I feel like above 70 is the best and we don't need too many tags but that's just my opinion we we could make this 60 and see what happens and so We're looping sorry I would go with 50 to be honest let's go 50 it is so we Loop over the tags and if the confidence is the same or higher than the threshold and the taxs don't already exist in the original image then we're going to in the original image tags push that new one and then we say yes you are allowed to mutate and then here we say well if we're allowed to mutate well not that's only here but let's set up the mutation for if that will happen so what we're doing is we're adding asset tags for the ID of the image with the following tags that are an array of strings right so we update an asset and the data is the tags and these tags are actually these asset tags here and then for ID as it ID that we got from the payload and then we just fire it off if we're allowed to mutate and then with this one we can move and then it just says success because why not we have to return something or we might not even have to but I I'm doing it anyways so the what we're doing here is we're looking at the tags that exist and if the imaga tags are actually above the threshold and not in the currently existing ones then we just push it into the existing one so the existing TX licks get bigger and which means we always overwrite all the tags essentially just for it's the easiest way to do it essentially so if the original one like and that's why this works right when we go here and we say the original tag is Coco so we can actually see oh this one is not turned on right now here's Coco so this is the original tag that I just typed in myself so when we go to the code that thing that I typed in is in here so this is an array of one thing this might be 10 of them of course if it's the same we're not going to do it if it's new it's not in there we're going to just push it in there and then upload all of them again so this query or this mutation is actually sending Coco again and just overwrites it that's what this is right Nikki pretty much and honestly it's the only way you can do that right you can it's a little crude but it's at least the data will always be good this way yes absolutely and so once this push happens which means something is different we can mutate so if we can mutate go if not we just return whatever it is and so we're sending a mutation and the variables are actually by the way this this doesn't look great right it's just text now what we can actually do is this can actually do some fun stuff what we can do is this and this just type it so now this now actually makes a lot more it looks a little bit better let's do that a lot better actually yeah so this is just a little trick so now it's it's actually readable all right so this stuff should let me just look at my homework because I think this is basically it that should be it okay how about we just push this to production and see if it works kids don't do it this way but for live streaming it's perfect yeah there there's only one thing that I would change in the whole call base if you go back Cod yeah okay and this is exactly what we need the post function here so basically what you're currently doing is you're getting the whole request you're getting the ID from the from the thing yeah you're pretty much doing the update TXS and then you're returning the response right exactly now in this case that's cool because the whole thing doesn't take that long right but in some cases you might use a web hook for something that will take a long time yes say trigger trigger a build or do something like that in those cases specifically it's always better for you to First respond that you've gotten the web hook then do whatever you want with that okay so so but if I do a return first then it doesn't work anymore true like if I did this this wouldn't work this is the point where I need to check my homework yeah so essentially this is a problem when you use a serverless function if this thing yeah takes longer than 10 seconds this serverless function is just going to say nope that's too long yeah not gonna happen and so if you need to do specific stuff steps step step and then send something back or do something else maybe a serverless function is not the way but essentially the thing we're doing now they're all kind of async things like well not s like these things do depend on each other but we don't really care about this result because the result is literally going to be success so we kind of could fire this off and not do this to be fair true right in this one by the way are we deployed we should be yes there you go look in this deploy and we're going to go for our logs all right so let's go back to Coco because we only have Coco in there now right let's save so we did an update now so now this web hook should have fired again so we should soon see some logs here but it it takes a second for these logs to refresh because I have a free account there we go and now it just says success because that's what's returned right yeah well let's refresh this page and see where we are and now we have Coco kitten cat feline Kitty young mammal all right animal cute fat domestic that's kind of like this is why I put it to 70 I think this is kind of a lot you know what I mean but let's just go back to the oh this guy is dead again of course because I just did a deploy let's just go and Local Host run this thing and have a look there is Coco there you go and somehow oh you need to publish ah yes so just for people to know why this is happening um I'm quering published content and this is not published yet because that's one of those things you want to consider if you have other systems changing the data on your project or on your own data you don't want that to just be published like you need to have a bit of control there unless you're fully sure of course yeah there we go right so that is kind of a lot but what we can do now is actually go to these cats and then up because they they don't have that much yeah so I'm just going to upd update a bunch of them and see what all these TXS will be they're going to get a bunch more now for sure oh yeah I we're kind of sending a lot of web hooks to this system so well load testing and production come on what could go wrong nothing can go wrong oh I'm saying I should not be saying these things but look there's a bunch of there's already four that work pretty well that's nice I I seen no errors there I see no errors whatsoever all right so let's go back to Titan you see that's all a lot more here now and then the one there you go this is the 20 megabyte one yeah did the waterfall look at that there we go we finally have waterfall there ah finally waterfall exactly and then the last one this one okay so can we just hit publish all those yeah up there we go and I'll go back here we have a ton of those now and so we have Titan we have Coco do we have Coco No apparently Coco with I don't know I don't see I see Coco though where is goo the first one oh interesting this is a bug in my cat let's not worry about this young mamal oh there's my no why I'm not considering spaces and stuff oh maybe it's a capital and that must that must okay this is my demo code we made this like in a really short time but the concept is there right and well let's see how many times this was hit only 62 out of a thousand that's not too bad that's with the beforehand keep that in mind I think we've done it and if we can do it in a stream of one hour with homework of one hour you can do it too I would say this is not the craziest stuff so um are there any questions other than well this one I can try to answer can you show us how to connect your doorbell with hgraph um my doorbell has the internet so if my doorbell could send a web hook I could actually upload a picture of me to the internet to hgraph I think but I don't think you'll want that wait can you automate the doorbell deil to kind of upload videos automatically with hgraph well if my doorbell was part of a botn net definitely but I don't think it is so I don't think I can hook into that well the topic for the next live stream exactly um so we have a bunch of people watching so if there's any questions please feel free to ask us um if not Nikki do you have any last comments on this are there any like real use cases that you might want to put this on or anything oh you specified I was about to say live long and prosper come on oh no yeah that was bad too bad no I mean this is an extremely powerful way to to to to operate with your data in hgraph right yeah and the use case that we just show was showed was images but it can be much more than that one of the use cases I've actually discussed recently with a customer was in the realm of video right they wanted to create autoc captions for their video clips when they oh wow paragraph and again it's the exact same thing you pretty much give the URL to the video to a service that actually does that for you and it gives you the captions in the format that you can then save in the system you can do the same thing with documents you can do the same thing with content models themselves right the sky is the limit it's an extremely powerful tool to enhance the way you experience your data and it's both for the front end as Tim showed the way you classify the images um in in different tags but it can also really facilitate the use the usage of the CMS on the backand for the editorial team because then they'll be able to to look for images much easier than they were before right exactly so it's a very very powerful uh tool that you can have in your quiver and I would strongly suggest you use it yeah this is kind of the the way we connect things in a modern architecture right Prett much because let's say I want to do a spell check on my website what I can do is when I hit publish or hit save on a draft I can fire web hook to some system that then queries that look for all my spelling mistakes and makes a report and emails it to it or puts it in slack and then and then you get fired perfect and then you get fired or it could block a a publish action when like a bad word is in there or you can fire off things like a lighthouse speed test like there's so much stuff you can do with this like we even have like a netlify iner forell integration where this essentially just sends a web hook to for sell and says now publish this thing yeah and we did it by hand now because I we're nerds but you can also set up all those things with web hooks like all the systems that need to be notified for a new publish like you can actually send to a Microsoft teams message based on a web hook that you just updated the thing like there's so many anyways if you want to learn more about all this stuff you can go to hyra.com doogs and a lot of stuff here is describ described on how these web hooks work but also how these queries work and mutations and of course if that's not enough it can come on slack and ask us because um this was some specific stuff we were dealing with here and like the concepts I'm assuming most people get them but once you start working the nitty-gritty when it happens and you're like hey why does this mutation not work then you probably want to ask Nikki or me and then you can come and slack and ask and um there's one last thing you see I'm going over our ctas because we're almost at the end um all the stuff you saw today is on a free account you can just do all this stuff for free so you can just go to app. hyra.com and sign up to actually make that account and just try it out um I guess that's it for today Nikki thank you for helping me with this because I'm a nightmare at calling life and it felt like it kind of worked today it's theonest didn't do anything come on it was all you buddy ah it's all about the support man moral support exactly all right cheers everyone happy coding and see you next time bye