Function Call with OpenAI using Bubble.io

hi I'm Kamal welcome to xeroport Club opening a recently released the function call functionality as an openers I think that gives us even more superpowers let's take a simple use case let's say you have a YouTube transcript and you want to send that to transgpt and you only get five YouTube titles and response now in the open AIS API you can send that text and then you will get five titles but has one chunk of text now if you wanted to split them into five different titles you can go ahead and do it using a delimiter and so on but what if you had an API that you can hit and always expect an object with five titles so then you can then display those five titles in a retreating group to the user so that they can select one of the title that's when this function call helps us do you can define an object schema and then a class coupon area code respond in the schema so then you get that object always in the response now that didn't make sense to you so far after all I'll show you a simple demonstration or politics and works and how you can implement this using bubble all right now let's look at function calling using bubble so inside my bubble app so I have a sample bubble application here and I have a few things set up so that I can explain things faster and easily so there is an input text box and there are two buttons the first button will show you how uh the normal openai API usually worked and the second button will explain to you how the function calling works so in order to do this there are a couple of endpoints that I've created the first one is the chat endpoint it's essentially we're hitting the completions opening eyes completion point this is something that you should be familiar with and I'm assuming that bubble developers are looking at this know how to make a simple open API call open Ai call right so we're hitting the chat completions endpoint and this is like you'd normally do right so I'm using the 3.5 turbo model and I'm asking what I'm asking is I'm giving a list of blogs text and asking uh you know open AI to give me five packets right when I initialize this call what I'm going to get in response is this right so there's like uh a bunch of chunk of text with five titles problem with this is it's it's a chunk of text right so let's let's see how that works so I'm going to go and copy this so what I have is I have an input text and I'm entering whatever topic that's essentially the blog okay and I'm going to make a simple Quant here so when I click this button what it happens what happens is when the symbol is called I'm making a invoking that open AI uh endpoint and taking the input from the multi input as Y and then I'm setting the state of title with whatever response that I get and then here I am displaying that function calling titles as the balance so what if we do simple call what it's going to do is it's going to call open AI and whatever response we're getting we're going to display it here right as you can see it's a five list of five items now I cannot display this individually right as list of five items right because I'm getting this as a text so that's a problem right so let's say instead if open AI was able to return this as an object right I can then display this uh in a repeating group and let the user choose which title they want that's one use case for it right so that's where the function calling comes at the picture we can instruct openai to respond back in an Json object format and we can specify what's the object schema is going to look like so that's what we're going to see now okay in the function quad so there is a second impact now that I've created which is a function call endpoint we're still going to hit the chat completions endpoint and up until here it's the same right there's no change here but what now we can do is we can also provide the schema for the function so we're going to instruct we're creating a new adding something called functions and in that we're creating a new function called generic titles change titles and we're giving it a description so that openai knows where this function is for this function generates a title for the given text and then we're defining the parameters so it's going to have it's going to be an array and the array is going to have two properties one is ID and the other is title right so when we're giving a list of uh when you're giving a Blog open AI can now no now nodes that it needs to respond in an array with ID and typing so five IDs five titles and then we're gonna say function call so we're going to instruct openai to use this function when it's going to respond so this is an optional parameter so in the sense that if you supply this it's going to definitely respond it using that gen title object if you don't Supply this it's up to open AI it could choose to respond in the Json object it will decide whether it makes sense or not or you can explicitly say don't use any functions so in this case I'm explicitly going to ask open AI to use the Gen titles option I will give you an example of this object schema so that you can play around with it and come up with your own objects for your use case here the input is still going to be the same right now let's go ahead and initialize this call so in this what you're going to see is let me coordinator raw so here you're going to see that it has arguments and then it has a list of ID and title right it's responding in a Json object finite so now what let's go ahead and see how this looks when you are going to do the same thing so so here instead of uh chat let's go ahead and say function calling which is a new endpoint that we just created copy the same input here and then instead of setting let's say the titles and here we're going to say result step one choices first items function curve arguments okay now if you're gonna refresh this because we made a few changes now if we go in here and paste the log and then I'm still going to show simple because we're still going to display it here okay simple yeah so now it's making that call and now instead of a simple text we're getting the response in the schema that we Define right so there's an ID title ID title so there are five titles in each of these things but in order for you to use this as an object inside bubble it's slightly tricky I think there could be other ways of doing this but I'm going to show you an example right so it's still response is in the form of text when it is captured bubble so what I'm doing is I'm going to create a backend workflow and I'm creating a new API workflow content title and it's going to take input as the block okay and then in this workflow I'm calling the function called endpoint that we just created in API connector and then I'm going to return as a plain text the function called arguments and what this does is because we're defining it as a back-end workflow it is going to return the Json object for us all the time because now in the uh you know API connector are doing a gene title defining a gen title uh API call and I am calling this backend workflow that I just created and I'm passing the blog and now if I initialize this it's going to call the backend workflow which is going to call the openai function call and we should get the paragraphs here as an object right it's a list and it has an object so we're going to get that perfectly now what I'm going to do is in the function calling call right the function call button when that is split we're going to call the open AI gen title API call and and then we're gonna insert so we're gonna uh do the same call and then the response that we're gonna get because now we're getting an array I'm storing this as a list and then I'm getting response one paragraphs each item's title so we're getting each item's ID and title so we're stating each items are tightly and then I have a repeating group here and in this repeating group The Source it's a text format and the sources the new list that we created and then inside that I have a simple text element which is going to refer to that current sales text so now if you're going to like follow this function paste this and now if I do a function call here it's going to display each of those titles inside a repeating group because now we got the response as an object now we're able to display that object inside a repeating group and now users will if you wanted to right you can display this five text titles to the user and tell them you know select whichever you want and then you can do this is a very simple example from a use case point of view I think uh there are a number of different use cases right because function call opens up a wide variety of opportunities uh because now you can specifically instruct openai to give response in an object for no coders uh especially bubble developers this allows us to build tiny apis per our needs using open AI so hopefully you know this this was useful to you this is my first time attempting something like this so if there are any questions if you need help feel free to just drop me a note I'll definitely help

Channel: Zero-Code

Views: 893

Keywords:

Id: kJMMJAm7Hro

Length: 11min 57sec (717 seconds)

Published: Tue Jul 25 2023