Lesson 5 - OpenAI Functions

Create an App's Backend with AI📅 2024-11-29

Watch on YouTube ↗

Transcript

[00:00] now here's the best part not only did we successfully just integrate artificial intelligence into our software but we are also storing the relevant data such as the user prompt and the user output and we're storing it here in the uid AI answers in Array prompts in AR array let's learn how we can use artificial intelligence to code out python based functions that leverages open ai's API welcome back to the series where I'm showing you how to actually build out a back end and in today's episode we are checking out functions open aai actions

[00:30] this little yellow box therefore up to this point we've already set up our fir store database we've learned what a database is we've learned how to leverage databases and we've learned how to connect them in our cursor AI app does that sound good bye-bye I'll make sure I'll link the playlist down below as you already know maybe you don't maybe this is your first video with me my name is Corbin I'll be providing all the code at the end of this playlist in a nice little git repo that you can just copy all the code in addition there's a little playlist dedicated to this this is lesson five I'm showing you from zero lines of code absolute scratch absolute NADA how to actually code out a backend

[01:00] and how to actually code out an app leaning on artificial intelligence because in theory this playlist could have existed 10 years ago but that's boring I don't like that let's actually code with AI and let AI do all the heavy lifting therefore in today's video we're going to be going over functions and specifically setting up a function leveraging open AI API now what you're about to learn in today's video can apply to any type of function for example this isn't just open AI API this could be cla's API this could be you connecting to Gmail's API connecting to outlooks API whatever it may be you're going to learn best practices here when

[01:31] it comes to setting up python functions for an application and if you don't even know what a python function is put it this way when a user signs up for your software this is what's going to provide the value as the front end just makes stuff look pretty but the back end actually provides the thing that's going to make your money okay let's jump in here we go we are in our project here that we set up in the last five lessons here we're going to have to set up a new folder here in our functions this is going to be a purely python based folder handle this kind of workload now before we do that though let's go ahead and set up a couple things first off navigate to your directory or where you been building up this application for me it's actual backend app do mpm start let's go

[02:03] ahead and have the front end load EG this is the front end we're in Local Host 3000 we're going to go there now let's create a new terminal window here where we're going to set up the backend or fir store emulator this is our fake pseudo backend kind of like Local Host 2000 this is like Local Host 4,000 this allows us to do backend functions but not actually have it in the cloud but I shouldn't have to explain this asz we've already learned this but I like repeating stuff as that's how you learn right repetition so we got an our CD here this is the actual application let's do Firebase image ler start with that command in we're going to launch our Local Host 4000 right now it's

[02:34] loading up so we'll get this nice little message here saying nothing exists but it does just wait there we go from here this is where we set up all our backend logic and we can test in a bubble environment we've already set this up we learned how we set this up therefore let's go ahead and set up our function today coming over to our JS functions folder here this is where we created the specific function of on user create to create a new authenticated user to put this more simply let's walk through an example I'm in my local environment here I hit let's get started sign in with Google add new account autogenerate

[03:04] information sign in with Google it is not found now it's found we're good just a little bit of latency there we go to Firebase emulator we come over here we go to fire store you'll notice we got a new Doc users uid and then the information here we get the user profile profile image that we learned how to set up in a previous tutorial which is a random situation here a coin flip you're going to be a dog you're going to be a cat and then we got the users's email uh Al orange and then come over here Al orang orange now if you were wondering what that little eror was where it says like user deck was not found that's because of the initialization of the

[03:35] underlying variables were getting set on that first run EG users collection didn't exist but on that first run we had to create it therefore there was latency so for example if I were to run this again we weren't run into that issue log out let's get started sign in with Google add new account Auto J information sign in with Google and there we go loaded in perfectly so now that we're here and we're caught up to what we've done up to this point let's deal with open ai's API and for people that are binge watching this series right now and they're like Corbin I already saw that that's the previous

[04:05] lesson I get it but the end of this is going to be like four hours long so some people are going to come in and out and maybe want a real quick reminder of what we did previously regardless here we go so we're going to our Firebase app here we're going to go to functions we need to set up a new function here and the purpose of this function will be the API so right now we have the on user create looking nice if I come over here we're going to have to initialize a new folder this going be python based actually before we do that since we're in this branch called new user data and we're finished with this workflow we should do the big commands here so we're going to

[04:36] do get ad just to clean up this Branch get commit dasm uh cleaned go good to go get push origin and it's going to be the branch name again here we go new user data we go and then what we can do here is we're going to do check out main we're going to get Branch again so then get Branch if you're like why are you going so fast watch the other lessons we already did this DD and this is going to delete the local branch we don't need anymore there we go if we come over to main here we are

[05:07] going to go to our GitHub in our GitHub we're going to do compare and pull request create pull request and this is everything we already did in the previous lesson so we're going to do merge pull request confirm merge delete Branch okay we're merged with main main as you know is the branch we want to keep safe and don't want it to blow up therefore we're going to do G pull origin main to grab the merged branch that we just did there there we go looking good now go and create a new Branch we do get checkout DB and then the new Branch name since we are creating an open AI API oriented function we'll just say AI function

[05:39] there we go good Branch all right sweet now before we actually initialize our underlying folder here let's create some UI in the front end that's going to basically allow us to manipulate and do actions so coming over here we're going to do something very simple is my purpose is just to connect the dots and then you'll do the creative stuff okay so I'm going to do in today's video is I'm going to create a little input box here that hits submit we're going to put in a prompt that's going to feed back to our API then we're going to get a response and view it here as well therefore connecting the dots between a

[06:09] front end and a backend and a full stack application so let me go ahead and listen to some Swedish House Mafia I'm going create this little front end change we'll keep going and as a side note if you're like wait I want to see you create this front end change that's not the purpose of this series or this playlist that is an entirely different playlist I have on this channel of let's build out a front end we're trying to build out back end back end is all that matters right now I'll see you soon so we are back I'll go and give you a real quick update on all the user interface and what I basically established so far the idea that I'm doing here is I'll put in a prompt like hello how are you I'll

[06:40] hit submit and up to this point it's going to store the data of the user's prompts as you can see here specifically this is going to store this within fire store here to the specific user's uid here and then an array of prompts hello hello how are you EG every single time I log in as otter Olive I will always see this for example log out coming back in as Olive here there we go they show up again so this isn't stored in the users browser rather actually stored in our backend in our fir store database so now that we have this and we have our nice little UI let's walk a little bit

[07:10] through the code this box right here I'm importing into dashboard so I can just kind of edit the code in a separate file specifically user prompts and if we scroll down here you will see that it's imported here therefore the CSS oriented and the j6 oriented with this prompt box is found in user prompt. JS and user promps docss the was simply notice how this placeholder is what do you want to know add a bunch of s's right there if I come back over you will see them right here Sometimes When developing front ends that work with backends you want to

[07:41] compartmentalize and refractor your code or refractor your code so that you can easily adjust changes to it so for this example I refractor the code so that it's basically the submission box and all the logic that will be associated with the submission box will be its own file what I want you to take away from that is that when you are especially in the beginning very much so in the beginning opt towards refracturing your code into very specific segments that you import into a bigger parent file and

[08:12] the reason why is that one this helps with air mitigation as now you are associating every sector of your software to a specific component for example the user prompts box here is its own separate component therefore if I ever have an error in dashboard. Js I know it's not going to be associated with that specific component but something else in the code this keeps it clean and especially if you plan on doing more Advance logic this is just the goar around and how you should proceed this is all set up though we have our front end looking good let's

[08:43] set up our back end real quick you might be like wait wait wait how' you store that into fire store we did a previous episode on this but in this context we're simply referencing the path again of users uid unique identifier and then we're referencing prompts which is going to be our array that we go ahead and use to reflect previous prompts that the user has inputed with all that done though let's begin first off I'm going to make a real quick commit to this current Branch so if we mess up we can always roll back get add get commit DM front and ready get push origin and then

[09:16] we will do the branch name which in this context is AI function and there we go now that we've done that we have a clean Branch ready to go I'm going to go ahead and open up new terminal window so we can start initializing the functions for Python and before I do that as a good rule a thumb here remember Firebase log out Firebase log in because we're about to do some backend logic here therefore we got to make sure we're logged in Firebase log in hit Y perfect once you're logged in you'll see that message this is the email that is associated with your Firebase project which we set up earlier now let's go ahead and initialize our functions Firebase init

[09:47] function init functions plural so because of the fact that this is actually going to be creating a new function folder here that's python base we're going to do initialize for the code base just so there's Clarity between the function folder and this new folder I'm going to do python uncore functions hit enter subdirectory we'll do the same thing hit enter for type of language we're going to do python obviously here we go do you want to install the dependencies yes let it download once that is complete you'll come over here and guess what y'all we have successfully initialized our

[10:17] Python's functions folder in today's video all the logic that we'll do today will be in the main.py in theory though when creating applications each file should be associated with a very specific task for example maybe there is a task that is analyzing PDFs therefore you call it analyze pdf. py in addition big tip here big tip coming if you are creating a very complex application that will run a ton of python functions you're typically going to have a folder that's going to be a light python function folder and then a regular python function folder and what I mean by this is that each function when

[10:49] you're running it into a Cloud Server will have its own amount of memory associated with it whether it's 2 gigs 4 gigs 8 gigs and what this means in your context is that the higher amount of memory associated with a function the more expensive it will be at scale to put simply if the function you're running only requires around 1 gig of memory you don't want to run that towards an 8 gig function this is stuff we set up in our Google Cloud this isn't necessarily absolutely needed when you're just starting application building but put it this way if you're 2

[11:21] months down the road or just save this segment of the video or just write this down in your notes keep in mind that associating memory with functions does have implications at scale EG some functions will actually take a gigs of memory some will only take one and then depending on how you want to set up your functions that is very pertinent so you don't spend extra money you don't need to to run a 1 gigabyte memory type of function on an 8 gab server don't worry if that didn't make that much sense as all you need to know for now is how do we connect to open A's API so go to open.com go to their dashboard just

[11:54] simply hit start building once you're logged in simply go to API Keys make sure you have a credit card card that is placed onto your account for billing I believe they get free credits I don't remember entirely I made this account a year and 6 months ago all I can say for certainity is that the longer you have an account and the more you spend towards an API endpoint the more advantages you get within open ai's ecosystem hit API key from here simply hit create new secret key and then give it a name that is relevant and that you'll be able to recognize I'm going to create a burner key today and the reason why is just to show you how to do this so permissions all and then we're going

[12:25] to say create new secret key once I click this go and copy it save it get ready to use it elsewhere in your project perfect we have a key this allows us to access artificial intelligence in our software application here now let's actually do it coming over to opena pricing page let me just walk you through why you would choose a specific model in your context I've done videos on this like probably too many videos on this so you can obviously search up my name type in like prompting with API this video I'm not going to go too heavily into the actual prompting of how to structure a prompt more the sense of connecting it if you want to see a video on that I'll probably leave in the description down below SL up there that

[12:57] shows you how to prompt with API here's the name of the game when leveraging these endpoints here are the models you're actually going to care about the first one is gbt 40 mini this is a very attractive model because of the fact that what this model could do is be very cost effective at handling large amounts of data we're talking about multiple pages in a PDF like blocks of text use gbt 4 mini very cost effective gbt 40 is honestly in the same realm of being just as cost effective what I suggest you to do is first opt for the mini see if that

[13:27] provides the value you want if it works then congratulations you just got a very cost effective solution now if you're having issues and you're running into situations opt for gbt 40 see if it works in this realm yes this is more expensive but this is nowhere near the pricing that we saw a year and six months ago for the amount of value you can provide an end user this is still a great option I mean in the past this used to be like $10 $15 for a million tokens so then the next question is okay if those don't work for you what's past that that's going to come down to the 01 mini and the 01 preview now only certain

[13:58] accounts have access to the yet so if you have been using open ai's API for a while you probably have access to it but if you don't have access to it don't worry they roll this out pretty slowly but everyone will get access to it and who knows by the time you're watching this video they might have a new model called like o10 preview and I'm just like what regardless the same type of logic applies there's going to be a lower base model that's very cost effective very cheap for larger amounts of data then there's going to be these high Lev models that are more for complex outputs they require more input and more thought around it when it comes to choosing between o1 preview 01 mini

[14:30] if you decide to use these models opt for 01 mini it's more cost effective in reality 01 preview is just Overkill unless you really think that's going to apply to your application so no Overkill here no road kill out for 01 mini if you actually need to use it these are very very very high level models here I mean this is extremely impressive stuff here but I assume if you're watching this a year or two years from now they probably come out with a lot better but regardless very very cool stuff from open AI here in today's video though we're going to be showcasing gbt 4L mini in the the way you reference it in code

[15:00] is going to be right here so gbt 40 mini nice if you wanted to reference the other ones just simply come up here gbt 40 never really reference the ones with dates as those are going to be deprecated models for example like two years from now you'll never be able to access that endpoint but probably this one Etc let's do it we're back at it I'm back you're like what just happened Corbin I got a bump up slack message it needed my attention and I needed to address it that's all done now different day let's do it wait Corbin I thought you were just a YouTuber no no no no I an entire software company okay let's

[15:31] get going here so basically the first thing I want to do to make sure that everything works good and we've installed this correctly is we're going to uncomment the code that we have here let's just prove that we can even deploy to our Firebase project with no hiccups to do so I'm going to Simply select all this command slash and this is going to bring the code live here now there's two ways we can test this first way is we can deploy all the way to our project or alternatively let's just fire up the emulator and see if it's there to fire up the emulator we're going to make sure we're in a directory say Firebase emulator start we're going to hit enter here let's get running looking good so

[16:02] far so we have initialized it as you see right here on request example here when it's green that means it's good so we have both functions the first one we created in the previous tutorial for authentication and this one which is a HTTP coll it looks like in respect to hello world which is a very classic it's a very nerdy thing nerds wear those on the shirt I don't wear that also if you can't tell I'm sarcastic a lot of the times that's just how I roll once we have that there there let's just go and deploy it to our Firebase app as well so you can kind of see what it looks like in that context

[16:33] to do that we're going to just simply deploy our functions here we're going to do Firebase deploy only functions hit enter here and then we should see an initialization of that new function here and then just the redundance of the older function of a new user there we go as you'll notice here it will skip it like I referenced in the earlier tutorial it give you that little purple Hue and then you will see since this is the first time we're creating this function it's going to be updating here and also notice it is a second gen function this is number two Numa Z post for reference it may stay there for a while this typically happens when you initialize a function for the first time

[17:04] so don't worry it's not broken just let There we go let us do its thing so once we get that successful deployment here we can come to a Firebase project if I go over here to functions we should see it boom we have on request example here and we have it as a V2 the reason we're doing this is I want to set a baseline I want to basically prove to you that you can deploy a python based Firebase function so that everything past this in this tutorial you won't be like whoa whoa whoa can I even deploy a function like what's going on well at least we confirm that you can deploy the example one therefore now let's actually confirm

[17:35] the real one which in this context is going to be an open AI API endpoint which from what I remember of the purpose of this tutorial was we were going to put a prompt here and then get an answer here we also are storing it in our Firebase database everything looks good let's proceed so we don't really care about this example one we can comment this out I'm going to keep it there so when you guys can grab the code from me you can just be like I want to test this as well as I will be putting this on a get repo for free at the end of this series not yet it's not it's not over yet maybe it is by the time you're watching it is November it's almost

[18:06] Thanksgiving let's eat some good turkey therefore let's open up a chat with cursor AI here we're going to hit command L control L and let's talk to our file here which is going be main. Pi in theory you can set up different files associated with different functions which you'll probably do but for now let's create a good prompt here that we can use to get us on the right foot this will be the prompt we start off with make sure in the main.py here we're going to say okay great let's create a new function make it an HTT callable identifying the type of function here I will send the payload of user prompt from here I want to do an open AI API completion and then I provide example

[18:37] code from open a documentation here's the situation I'm going to leave this in the description down below so you can reference it as when you are calling certain API endpoints within open AI they change it sometimes so sometimes you'll get bad old code from AI because the fact that it isn't up to date with the current documentation so what I encourage you to do is go to the actual documentation so in this context is create chat completion if you are connecting other external API same idea just go to their documentation find the most upto-date codee and then just copy it and paste it into the chats so at

[19:09] least it knows it's working on the right foot and you aren't getting a bunch of dead code and when I say dead code I'm referring to code that's old and deprecated and just to clarify a little bit more what I mean by old and deprecated basically as softwares keep improving and API endpoints keep going on EG we get the 01 mini 01 preview the way open AI provides this as a API endpoint for software developers sometimes they just change their documentation why do they do it I don't know I'm not part of open AI they just do it and so do other external API providers such as YouTube I mean they're

[19:39] on V3 right now used to be V1 so on regardless we're going to keep going here we're going to say also here's my API key just hardcode it for now obviously in production don't push a hardcoded API key in the file when I say hardcoded I mean like actually putting the entire string of text right here I'm going to show you how to put this in a secure way using aemv which we've used earlier in this series for now though what I like to do is in the early days when you're brand new to coding or maybe you are good at coding and this is like a new idea for you just hardcode it gets

[20:11] one little air out of the way that you could possibly run into so you can understand at least your key works and then obviously move it to a EMV and then for testing reasons I went ahead and have it print out the console log which you'll see pretty soon here therefore let me show you the finished product here but then there is like three or four steps you have to do or you're going to run into errors so I'm here to help you so we got to loaded up in emulator here I'm actually going to go ahead and move this side by side so you can see this a lot better here and you will understand what I'm doing here so basically obviously your emulator is going to be a little bubble for the backend functions we run if you're like what is all these messages this looks

[20:42] like it's broken don't worry that's just part of the game so here's the situation basically all I have it right now set up as is I put in a prompt here and I get an API response specifically as you see above me all we're doing is identifying that you are a helpful assistant this is like the default messaging for open API and then in addition to this the actual prompt itself the message that's going to be processed is just going to be what I put in now in theory this user prompt and how we can prompt API when it comes to creating software and creating value check out this video right here I'll

[21:12] make sure leave in the description down below I go full-blown in depth my five-step guide in how to create a good prompt for API that sounded a little salesy that sounded a little bit like top five things but trust me there's five steps to it you can check out that video if you want to learn how to do prompting I'm just here to show you how to connect the dots so for example here if I say hello what is the best way to eat a steak and I hit submit and with that question we'll get a response right here and sometimes you'll notice a function will be like beginning finished like really fast don't worry sometimes it'll fall start like this this just

[21:43] happens in the emulator you won't be double charged but from that question of how to make a perfect stake here we got our five-step guide from open AI talking about the quality of steak cooking method seasoning temperature and everything you like which we then can store into our database everything by the board here but let me show you how to get to this point first things first we need to make sure that our Firebase Json is set effectively so this should have already happened naturally when we did the Firebase in it and initialized our directory of the Python functions folder but if you don't see this that's

[22:15] your first issue you should see the python functions python functions referencing our folder up here so far so good next come to your fire base.js remember this is where we're initializing everything for this application authentication storage fire storage for functions therefore we need to identify that we are using a local function here EG the call is coming from Local Host 3000 Local Host 4,000 the way we do this is obviously we're going to import our git functions connect functions emulator and then come down here is we need this very specific line here we created this in the past

[22:46] tutorials for our off our fire store but now we also need it for a function emulator this makes it so when you send a message to your backend in this little bubble we have here we're not going to get a Coors error where it's like we don't recognize this this must be false no no no no there's no security issue here we need to identify that it's okay if it comes from Local Host 51 as we are connecting this to specifically the context of a fir store emulator now for you you might be like Corbin how the heck do I even do this I don't want to type it out well one you can either get the G in the description down below when

[23:17] it's available or just curse your AI simply be like we need the following and then you would simply just put in like you could even go lay in and be like get functions HTTP callables but in theory just simply screenshot this video or talk to Chad gbt you want connect firestore emulator and then we want the git functions as well with both of these set up and when we've already set this up in previous tutorials this is going to get you through that second area you might run into which is cores fire base.js connect functions emulator make

[23:47] sure you're importing the G functions connect functions emulator and make sure you're exporting the get functions which in this context is the functions get functions app therefore we're just going to export functions here round round two done let me help you with what else you could run into the next area you'll probably run into has to do with open Ai and importing it there is going to be a high probability here it's going to say something along the lines of module not found there's an issue etc etc this can be very frustrating as you've installed it it should be installed but why the heck is this going on your air should look something similar to this where we

[24:18] see no module named open AI the issue here is that we need to install this within the vinve of our python functions folder if that doesn't make that much sense don't worry just follow these commands what's nice about this is that once it's installed once it's done you can move past this these errors typically don't show up again once you get them done so the first major thing you need to do is you need to go to specifically installing this to your python functions folder or whatever you called it for me I call it python functions for me we're an actual backend app which is our overall directory but then we want to go one folder deeper

[24:50] which is this folder right here by simply doing SL python functions I would save this to your cheat sheet your little cheat sticky note have this ready to go once once you're in this then we do Source vinve bin activate and that's specifically this vinve right here to know whether you're in you're going to see vinve right here you're going to see python functions right here and then the next one you want to do is PIP install open AI this is going to put it in our requirements. text think of your requirements. text as the dependencies we'll use in our function what is a dependency we'll be putting stripe here

[25:22] you could be putting YouTube here you could be putting Google here like this is just stuff of the our ability to access external software softwares you know when we're building software and open AI is obviously an external software once we do that then we're going to do Pit freeze requirements. text this is going to collect open and actually install it as you see here you should see all this and then you'll be good to go now let me go ahead and show you the next thing that you're probably going to have to do because of the fact that AI has not been updated as of recent when it comes to open ai's documentation and how to code in it and what I'm referencing is that your AI may

[25:52] have gave you old code here of open ai. chat completion this is no good lucky for us they gave us ways of going about solving this but personally the way I solved it was I simply just did pip install D- upgrade open aai and this should bring you to the most up-to-date version of open a and then obviously what you'll see in the code here is that there's a way we reference this now for chat completion chat completion basically is just our ability to put in a prompt get an output that you saw earlier so since we're already here and we're already in this Vin V the python functions we might as well just do our

[26:22] last command here this is going to allow us to access EnV files which is our security measure which will make more sense I'll show you what I mean but just do this line pip install python d.v perfect that's all done this is a lot I know this is a lot maybe for some of y'all this is this is like light work and this is a walk in the park but for some of y'all especially if you're brand new to this don't worry this is a lot that's the point that's why we're learning and that's why we use AI to learn more and more every single day this is why there is an entire Market segment that currently exists for no

[26:53] code SL hybrid ways of building out applications but for some reason you found yourself on this series and you're like no no no no I'm coding it out raw okay let me help you do it therefore that's why a lot of these series and a lot of these videos at least in this series I plan on doing a whole another playlist where I actually build out a software with a value proposition and sell it there's going to be a whole separate playlist for this but this series specifically is just connecting the dots because once the dots are connected you can really fill in the gaps of what you want to do for your specific software with all that done let's do a EnV here let's explain this

[27:25] code explain the front end code how it all connects and proceed open a API key os. gmv openai API key this is where we store highrisk variables in other words we are grabbing the API key found in ourv here so if I click this open API key it's named the exact same this is where you're going to paste your API key you get from the open AI dashboard once you paste it there and you made sure you installed that previous dependency this will work and notice how we reference this key in our chat completion over

[27:55] here all right I'm going to actually paste my key here so it keeps working so far so good and obviously what I'm going to do is I'm going to always leave these little console logs here such as open AI key is not set an EMV file I'm going to leave this in the code so when you grab the code you run into errors you'll get clear ideas of where the errors are incurring scrolling down here here is our current way of doing chat completions as of 2024 November client. chat. completion. corate the reason I say that and why I give a time stamp of the specific date is they may change

[28:25] this in the future but you already know how to deal with that go to the documentation see what the most recent one is and then simply you know grab this L command L and then simply give the updated code right there to curs your AI and it'll give you the better way of doing this if they Chang it in the future regardless I'm not going to go too much in depth on how to actually prompt for this here are some pointers system this is where you're going to give context of like who are you what do you do how do you want structuring outputs how do you want the AI to interact with the content coming in and then the actual content itself typically

[28:55] this should just be data coming from the front end with very limited fixed text associated with it when I say fix text I'm referring to stuff like you are a helpful assistant no matter when we call this API end point that will always show there's no way this changes therefore fixed text should rarely show up in the content it should always be a variable that is found in the front end for a specific value you're looking for any type of directions or ways or structuring outputs inputs everything should really be outlined in the content section here as I referenced in that video earlier so watch that if you want more depth of how to prompt which I

[29:27] think is like I say five steps we're good here though this is solid right now we have a fully functional backend let's look at our front end so coming over to our front end here is what you need to understand first thing typically when we are doing function calls to the back end you will make this as its own separate component which we kind of already did here sometimes you take this one step further where you have Js files that are just completely dedicated to that specific backend function because you're passing a ton of data in and out in this example this is kind of like a melding because of the fact that we do have a

[29:58] return here of some visual element which for us is this right here this is our visual element sometimes you have the JS file just purely be the function from the back end that we're calling and sending data to in other times it's okay to put the function directly within the front end code as well basically there can be a front-end element here with some type of calling of the backend sometimes there is just no return statement here and it's purely just a backend code that we import and use within another component or JS file all that will make more sense as you keep going here but all you need to know from

[30:28] here is that when we call a function in our backend we're always going to be importing get functions HTTP callable obviously if it's a callable uh callable in the sense of sending data receiving data then we're going to always initialize with get functions here and then we're going to get the specific name of our function that is found in the back end so for us is generate completion how do we know what the name is simply come back to your main.py here def generate completion that's the name of it if I said like generate apples and I came over here I would reference it as generate app so far so good and then what we do is

[31:00] that we're going to send data to this function user prompt input the inputs coming from the front end notice how we're passing the data as user prompt and we're receiving the data here as user prompt finally I have some dead code here when it comes to setting fir store and everything about the board there but so far you have a pretty good idea of how to send data towards the backend and receive data back so the last little step here that I want to do is I want to store the users's initial prompt EG what I ask and then I want want to also store the output from open AI as right now I just have the output

[31:32] coming out as a console log like it shows up here and that's what you should do as well don't over jump the gun here have it work in the sense of a console log that doesn't really show up anywhere other than the console and then once you have it worked there proceed to this next step last two things on this topic before we do the last step of today's tutorial which will be storing these values in our fir store database first thing if you run into errors you run into issues and you spend hours on this video today trying to get this to work completely understandable completely

[32:04] makes sense that's just kind of how it is especially if you're new to this that's how you learn to code the beginning is very much like you are hitting walls on walls on walls on walls I can't tell you when I first started coding there would be times where I would have to solve one issue and it took me two and a half days to do it that's the point but once you get through it the next time is a lot easier as you know how to connect the dots better all right let's go and wrap this up if you feel like you learned something so far leave a like is completely free let's check it out let me go ahead and show you the finished product here and then I'll walk you step by step how I did what I did so

[32:34] obviously we are in the authentication phase here where we've created the firestore database of a relevant user with their unique uid and then their profile stuff over here in addition to this we have successfully made it so we can contact an open AI API endpoint for AI value so for example if I ask what is the capital of texes and I hit submit we're hitting the open AI API endpoint and then we get a response right there now here's the best part not only that we successfully just integrate artificial intelligence into our software but we are also storing the relevant data such as the user prompt

[33:05] and the user output or the AI output and we're storing it here in the uid AI answers in Array prompts in Array now to be absolutely transparent if you want to do this at scale don't store it like this store them as docks docs are going to allow it so that if the user has a ton of different questions a ton of different outputs it's a more scalable database I'm just here to show you how connect the dots regardless let me show you how I did this right off the bat if you're dealing with a lot of data and a lot of testing I encourage you just to restart your emulator once you restart it you're good to go from here let me

[33:37] show you what I did first off I went ahead and took out the functions logic out of the user prompt. JS I kept this just as a return element in the sense of just a front end UI which then I took the real logic and just put it in my dashboard. Js just makes a little bit more sense due to the fact that you come down here when we do handle user prompt submit this is where we're storing the underlined data of the user's prompt here with the user do ref so we might as well just call the function as well which is the generate completion function that we talked about earlier one little side note I went ahead and commented out the little randomized quote section I'm going to leave this in

[34:08] the code though so when you grab this code from the git you can go ahead and enable it if you want to see it but for now it's commented out and to uncomment you simply just command slash and you'll get it back and if you don't know what I'm talking about I'm referencing this little box therefore we just went ahead and combine the logic of saving the user's prompt in that specific dock path of array Union on prompts and on top of that sent that user prompts data to our backend using this logic right here therefore when we store the AI output though we're going to store that within our python function quick side note the reason I'm describing the code how I am

[34:38] right now is for you to talk to cursor AI if you need to with the command L and simply put in the words I'm using into those chats to really get the best kind of outputs for example the code right here when referencing the kind of path and how we want to store it or earlier when I was talking about a scalable database making sure that this data is stored as a doc rather than an array coming over to our main.py here everything will stay the same except for the fact that we will now add the ability to store this in our database therefore from the import we're going to also import fir store as well fir store is the database in the paths and then

[35:10] notice with the code I'm going to provide you with I give you these a little comment so you really understand what's incurring obviously same situation here we're going to reference the data path users unique uid and then we are going to take the assistant message which comes from that chat completion request and we're going to store it in AI answers therefore as you can see this emulator AI answers the answer we got from open ai's API request here's the deal when we access AI like I showed you in today's tutorial it's a little bit more nuanced in the sense of prompt structuring prompt outputs like this is new stuff to software a lot of

[35:40] the times when you connect external apis let's just say YouTube for example it's very much like input output for example if we're referencing YouTube and maybe we want to download or upload a thumbnail from YouTube's API it's very much so provide the video ID get the video thumbnail I say this to make clear that when accessing other external apis it's a lot simpler the logic is a lot easier to understand artificial intelligence API and points though are a lot more nuanced and that's partly probably the reason that you're watching this entire series to begin with as this

[36:11] is a completely new market in software entirely our ability to prompt and get value through text is a big deal and obviously we can connect this API to other stuff open AI provides with whether that is going to be higher level models or alternatively their whisper API d 3 API everything like that what I can say with confidence though is now you understand some troubleshoots and workarounds of issues you may run into and how to solve them so if you feel like you learned something me today make sure you leave a like the next video in this series will be storage so I'll see you in that video external API open AI

[36:44] to random videos that's my face I'll see you in the next video