Get Structured Response From #OpenAI Using Function Calls

open AI released new chat GPT feature function calling what this basically means is that you can send the function to check GPT API and get structured Json response that you can use in your app you could do something similar with just prompting the API but that was error prone and not very reliable with function calling you can still get some hallucinations from the system but at least those are going to be structured hallucinations using function calling we will build an app called movie nerd you just enter the name of the movie and the API will return release date of the movie actors director summary of the movie most memorable lines from the movie and to add a bit of weirdness to the whole process we will ask Chad GPT to generate description of the movie poster that we will send to Dali to generate an image of the poster which almost always gives a weird and kind of creepy result so let's get started for this demo I'm using nexgs 13 with Tailwind installed for a bit of styling you will also need open AI API key if you want to follow along with this tutorial that game needs to be saved to that EnV file at the root of your next.js app we are going to be using open AI npm package to talk to chat GPT and Ali just be sure to use at least version 3.3.0 of the module since that is the one that Sports function calling if you're having troubles with open AI setup you can check out this video for more information about this setup and of course everything we do here will be available on GitHub the link is in the description below only noteworthy thing is index.js in Pages folder that is currently just displaying an input box and a button the code for this file looks like this we have our form our loading State and handle some mid function that is going to trigger get movie data endpoint and send it the name of the movie of course if you try clicking the get me the movie data button right now you will get the 404 error because that route still doesn't exist so let's fix that in the pages API folder create the file called getmoviedata.js Next initialize open AI API like this now we are going to export default Handler function that receives request and response in the Handler function we are going to make our request to the open AI API like this let's go through this code for a second we are using Create chat completion function to talk to chatgpt this is the function that supports function calls next we are defining a model for this to work you need to use either GPT 3.5 turbo 0613 or gpt40613 but since I don't have access to gpt4 I will use 3.5 in the previous AI video on this channel we were sending a prompt to the chat GPT we are not going to do that today instead we are going to send messages array the first one primes jet GPT to be our Movie Database assistant and the next one is our prompt so we say give me information about movie called and then we send in the movie name from the request object next we are defining functions meaning you can send more than one function to the API but for this use case one function is enough we are giving it the name get movie data and then sending in parameters the parameter in this case is going to be a schema that we are going to build out during this video we just do a function call and call our get movie data function this is all the code we need to talk to open Ai and to get our data the only thing we need to worry about now is defining our schema to get the structured response from open Ai and to send that data to our front end we just need to add this one liner and this should send the response from open AI to our app so we can display it now we need to define a schema this is the most important part but luckily it's very easy to do our schema is going to be a type of object and it's going to have some properties first property we are going to add is release date it is going to be of type string we can also provide the description so that chat GPT has context of what we want to get we can just write something like release date of the movie in day.month.year format you can think of it like a mini chat GPT prompt there is one more thing that we need to do to get a response and that is to Define required Fields like this we just add a required array to the end of the schema and fill it with fields that we want to get from the API okay so now let's see if this works go to a browser and enter a name of the movie in the input field for example Inception click get me the movie data button since we didn't set up any data displays on our page we will check our console to see what we are getting from the API and after a few seconds we get back an object with a release date property and movie release date nice so now let's get the actors for the movie we follow the same steps as for release date but this time our property type is going to be an array so we have to set it up a bit differently since this is an array we also need to Define how the objects in that array will look for that we use items property and in it Define that our item is going to be an object that is going to consist of two Fields first name and last name both of those fields are going to be strings and that's it now just add actors to the required array and we can test this out enter Inception again and let's see what we get from the API we are getting an array of first five actors from the movie great now I will add a few more fields to our schema so that now it looks like this I added the director summary of the movie quotes array that is going to provide us with three most memorable lines from the movie character in the movie saying the line and the actor playing it and lastly we defined poster description field that is going to ask shared GPT to provide the description of the movie poster in seven sentences so that we can send that to Dali later on also note that I instructed chat GPT to avoid double quotes for the movie summary because that could screw up our response Let's test this out with movie Big Lebowski says this will get us some nice quotes we are probably going to have to wait a bit longer for this response since we are requesting much more data than before okay it works this code really ties the app together before we Implement those creepy poster images for the movie Let's display the data on our page I'm just going to add this code below loading indicator here we are just checking if we are getting something from the API and if we do we are displaying data inside of an ordered list since sectors and quotes are arrays we are mapping through them nothing complicated Let's test this out with the movie Goodfellas nice we are getting the data on the page now let's Implement those creepy images create getmovieimage.js inside the API folder initialize open AI API and Define Handler function just like we did for get movie data.js in the Handler function we are going to call create image function from openai module we need to Define prompt for this API which is going to be poster description that we got from chatgpt number of images in our case one and the size I'm going to use 512 by 512 and lastly we are just returning response from the API to our front end and that is it for the API we just need to implement image creation on our page in index.js add two states for image loading and image URL after that we will Define get image function that will get the image and set it to the image URL state now we will use use effect that is going to have a data dependency so when the data changes AKA we get the movie data response we will trigger get image function and send it poster description Below movie data I will add another loader for image URL and below that we display our image if we get anything from the Dali API and that should be it save it and let's test it in the browser write Top Gun in the input box for example this response is going to take a bit longer since first we are contacting chat GPT to get movie data and after that we will contact Dali API to get the image that image is weird but at least we are getting something so that is nice it would probably be better to send the description to Mid Journey API I'm sure that would get much better results but for the sake of brevity and simplicity we are using open AI apis all the way in this demo note that if you don't send anything to the API or send movie name that doesn't exist it will make stuff up for you so you can use this as an imaginary movie generator or something like that just one note before I conclude this video it's good to wrap your requests to the API in a try catch block so that you get some useful info if something breaks like this while doing the prep for this video I would sometimes get the message from the API that the description for the poster is using unsafe words and then it wouldn't generate the image I will know what the problem was if I didn't wrap it in a try catch block so keep that in mind as you can see using AI to be your back end of sorts can be very powerful and this is just scratching the surface you can do much more complicated things with this approach but that's topic for another video so anyway this has been it for this video everything we did here will be available for you on GitHub the link will be in the description below thank you guys for watching and I will see you in the next one [Music] one

Channel: Watch and Learn

Views: 4,130

Keywords: ai, openai, tutorial, nextjs, javascript

Id: 8eCZeFhvyGE

Length: 11min 38sec (698 seconds)

Published: Tue Jun 20 2023