Build a Translation App + ChatBot with Nextjs and React Native using OpenAi API

hi guys welcome back so unless you're living under a rock you've probably heard of chat chipity is a chatbot model designed by open AI that is based on the GPT which is generative pre-trained Transformer language model it is designed to generate human-like responses to text input in a conversational context uses a combination of machine learning a natural language processing techniques to generate appropriate responses to user input in a way that resembles human composition in this video I wanted to see how we can use open AI open ai's API to incorporate charge GPT into a react native application to create a chatbot and the text translation app so enough talk let's get to the code all right so like always the first thing you want to do is to create your folder I like creating my folder in the documents uh and the documents folder let's call it let's Translate all right looks good now you're going to open up your Visual Studio code this is your first time you might want to follow the link in the description to download visual studio so you open the folder go to the folder that you just created which in our case is this one all right so we have our folder open here that's cool then what you want to do now is go to your terminal open up a new terminal okay run the following command npx create um all right friend next up at latest all right so just wait for it to ask you some questions this is uh what is your project named we'll call it let's translate next typescript yes yes uh Source directory um actually you know what let's say no no we're going to create these folders by ourselves later and so now it's going to be installing these dependencies uh one after the other we just have to be a little bit patient okay so I'm just going to pause this part for now all right guys so it looks like uh our next year's app is done creating um yeah so this is cool now we're going to start the saver um so obviously first of all we need to CD into the folder that we just created so like you see it created a new folder inside the folder that we had initially so we're going to CD into that let's uh Translate okay and let's run npm um run div just wait for it to finish creating save all right so looks like our server has started on Port 3000. so if you're using Windows you can just hold your control key click on this URL it's obviously going to pop up your your browser your default browser then you just want to wait for it to uh to load the uh the default next.js page so like you can see we have it loading here this is awesome so let's let's get going now we need to create two API endpoints so we're not uh will not touch anything in the Pages directory and we'll only attach this API folder and that's because uh by default next.js treats any file in the API folder as an API endpoint and that is why we're only going to be dealing with uh with this I mean so if you're going to be working on the the front end and all of that you want to work on uh these other files but uh since we're only dealing we're only creating API endpoints so we're going to be dealing with the with the API folder so the next thing you want to do now is to create the fist file we'll call it ask hey a question dot TS right once that is done we're just going to first of all now install open AI so how are we going to do that let's pull up a new terminal here uh we're gonna have to do two terminals running so don't forget to to CD into uh the folder that just got created and then we'll run and PMI open AI we'll just wait for it to install all right guys so it looks like uh it looks like open AI is done installing that's cool now let's go back to the folder to the file that we just created which is ask a question.ts and we're going to write the following code so let's say import type import type let's say next API request and then next API response okay looks good next slide import configuration and let's say comma open AI API looks good but we could actually um okay we'll get back to that in a moment say const configuration just make sure that it's not a Capital C here you want to keep it as a small let us see new configuration and we'll do that let's say API key here also just make sure you're using a capital K because that might give you a problem later open AI underscore API underscore key okay put a comma there and then close it all right let's say const open AI you go to new open AI API then in Brackets we say config configuration all right export default let's say function all right so here actually let's just fix this here and then we shall have some code in here let's request next API request and just put the comma there response next API response okay cool so now in in between these guys we're gonna say const ant prompt prompt you can call it whatever you want to call it and call it question or whatever you want to call it query note front okay let's do that do an if statement here to check if we if we don't have a prompt then what should happen if we actually don't have a prompt then what we want to do is to return a 400 error which symbolizes that there's been no input so say 400 there upload Json I'll do that and then we'll do that the spin and error okay that in both brackets let's say prompt missing okay let's close it there actually I'm going to get out of the if statement and do an another if statement to check the length of the prompt so that we we try and limit the length of the prompt so that we we actually get to protect our open AI tokens right so let's do return here status and then we'll also use a 400 error here error code here the same as the error code that we used all the error message so here we also say I want to load actually this has to be inside brackets like that now you need to close that now let's uh let's let's let's do a completion here completion await and AI Dot create completion do that let's say model um it actually depends with which model you want to give it but I'm gonna use the the fastest model which is DaVinci but you can go to the open AI documentation and you're going to be able to find the different models that you can use so here we're going to say something like um let's say answer the following um question like adopted something like that right so let's break the line topic is going to be our our prompt right prompts there and we can break the line again there okay yeah and now you're into name your tokens yeah to Max tokens it's going to be 500 you know what let's give it 200. 500 is a little bit too much you get the temperature let's keep the temperature at maybe 0.8 and don't forget your comma presence penalty and give it a zero and then we've got frequency penalty we'll keep it at zero as well okay I'll close it now I'm going to create a const for our answer and it will save completion it should be data but choices let me set dot text looks good let's get a response here status 200 means the response was given so we use 200 if you remember we used um with 400 for the error that's the one called sounds like here okay don't forget to close that now we have we have one thing that we haven't done here we need to create a DOT a DOT EnV file to to be able to retrieve this open AI key so right here in your root folder let's go ahead and create a file called it EMV and then I'm just going to give it this exact same name there you go and then we're going to now go to open AI to collect our our API key so this is platform.openator.com just go to your profile there go to view API keys and then you can create a new secret key just copy that and then get back to your Visual Studio code and paste that there save get back here and with that you should be good you should be good to to go um yeah you should be good with that to go to save just make sure that your server is still running okay so I'll say we're still running you need to you need to download Postman I've left the link in the description for you to download Postman the the setup is pretty straightforward but um yeah you can pretty much Google Google how to set up that quickly all right so once you open up Postman you want to get your local hosts oops okay get your logos you can open that and you can say API backspace let's say ask a and remember anything that is under the API folder is treated as an API endpoint and that is why we're just calling the file directly because that's how next.js treats this first so we say ask a question and then we are going to put the the question symbol and then we'll say prompt is equal to what is the question let's say what is the cell right let me put a question right there we'll send that word for response and there you go there you go you have your answer the cell is a cloud platform for static sites and serverless functions designed to make web development easier and more accessible to everyone it provides a complete workflow for front end uh developers from local development to Global development all right guys there we go we've created our first endpoint congratulations now we're going to create our second endpoint which is going to be the translate endpoint you want to get back to your to your API folder and you create a new file and we'll call it Translate right so we're going to use uh all right looks like all right uh bigger button let's rename that to translate dot TS then to be recognized as an API endpoint now we're going to use pretty much the same chord so I'm just going to copy this code and paste it in the Translate what we're going to play around with is the prompt and then we'll also create a new constant here so we'll save const open your curly bracket there query and this creates new two variables there this one we're going to be translating from English it's done let's go say um quests right looks good I can close it down uh oops so we forgot to put our cue there right uh that looks good and now which is going to be playing around with a prompt so here we're going to say something like Translate uh put your dollar sign just to you know make reference so that it's not um it's not picking it as a string so that we make reference to the const query that we just created say query okay don't mind the answer that's uh just a trick all right uh but let's say language there all right and yeah that's that's pretty much it actually we're going to use a word like bonjour here just to see how this API endpoint is going to work so yeah that's uh pretty much it um let's save this one and get back to postman and we're going to change this API endpoint here we'll call it Translate and then the prompt is going to be something like uh bonjour okay just send that let's wait to see if we're gonna get a response there you go the answer is hello so bonjour translated as hello looks good all right we're making progress now once your API endpoints are done the next thing is we're going to be deploying our API endpoints to versaille and then um we shall we shall be creating our react native app and then connecting our app to to these two and API endpoints then we'll be using that to translate text which is coming from open AI or to actually get to chat with uh judgpt so we are we'll create two variations inside the app the the the other side will be a chatbot and the other side will be a translation app we'll be using open a open AI so all right guys let's get on to the next thing which is deploying our API endpoint to the cell right guys so to deploy your your API endpoints to uh vasel um I like to use uh GitHub desktop mix uh makes it work a lot easier for me so if you don't have that um to get a new Repository and then you want to commit uh so let's say update translate.ts I've got the same put it in the description let's commit that change and then push it all right once that's done um you guys can let me know if you'd like a separate tutorial on how to set up your GitHub desktop so now when you open your um the the repository that you just committed you're gonna notice that um it's been pushed up one more thing um when you're pushing on a public uh when it's open to the public open AI is going to automatically dictate that your API key has been leaked and then as a result I'll send you an email which is then going to say your API key has been rotated and then you know it's going to change so basically this API key is going to stop working almost immediately anyway we are going to we're going to work on that next thing you want to do now is go to vessel search for versa and then you can log in all right so I already just gonna wait for that to to load up yep right looks like we're good now so you can go to your login page I'm just gonna log in with my GitHub Steam obviously it's because uh this is not my first time and that is why I just went straight okay so you can go to add new import repository I'll import my latest repository we'll call it that wrote leave everything the way it is um yeah so this is where we're going to put our our open AI API key um so basically we're just going to copy it from here okay just paste it there for your pardon copy that you can keep that on otherwise yeah actually add that okay and then yeah I guess that looks good let's go ahead and deploy we'll just wait for it to build it's building right now installing dependencies right building building right looks like the build is complete just wait for you to do its its theme it's completing the right looks like we're good so we can go to our dashboard if you click on that uh should be able to see our URL there so once you open up this URL you should see about the same page that we had earlier when we when we had it running on Port 3000 now um if we get this same uh URL just go to postman and we just replace this with that and try to get requests we should be able to get a response there right obviously if it doesn't give you a response uh then the challenge should be with um open ai's API key which just changed so we're gonna attempt to change that so ask a question let's see first of all before we get to that okay so looks like we're not giving it getting any error the challenge here AIS API okay so let's go ahead and create a new one copy this get back to myself and we're just going to attempt to to edit our our settings um okay environment variables and we have our open AI key here let's go ahead and edit that put that there save that and I guess that should be good let's try to send another request there looks like question not getting our response um not exactly sure why that is but let's get back to let's let's try to run this again so as you can see it says it's ready we are just going to restart our our cell project that is planning already uh let's say we deploy we deploy with existing beard cutter yeah okay we're just gonna wait for it to build you can see the status there all right guys so looks like we're able to figure out where the challenge was just make sure that um that you and put the correct and updated open AI key on the cell and not the one which is on your GitHub or in your local environment because um open AI is going to detect that and you will not be able to uh to run any API endpoints so after we we made the change um we go back to to postpon we're going to try to run another prompt here let's say what is Postman okay send that let's see the response say the response that we get supports my software available uh development tool so and all of that so yeah so this works uh this means that we've been stuck we have successfully deployed our API endpoint to the cell now the next thing that we're going to do is to create our react native app which we are going to connect to our API endpoint which we have just deployed and that is going to be the next step now all right guys so to create our react native app what we're going to do is to get back to our folder let's translate here we'll create another folder inside this folder and call it react native okay that's cool and then we're just going to close that uh so now we're just going to open that folder that we just created which is inside here open react native folder all right okay cool and open a new terminal so I'll close that all right cook so we're once you're in that folder you're gonna run npx react uh negative init and then we are going to call it let's say react native Let's uh no I think let's call it react native Translate right yeah it's cool Dash Dash template react native template types types Scripts that looks good oops uh we need to write let's say npx react uh why we seem to be so we actually need to remove this these guys here okay and it should start building a new react up I'm just gonna wait for that process to run yeah so uh proceed yes all right I'm just gonna wait for that oops uh looks like we got an error uh you know what um uh let's just take a look at this oops okay uh we had two s letters here so that was the error we made all right let's run that again all right uh looks like our react native app is done building all right this looks cool so we just need to CD into the folder that we just created right now so that's our aim select well that's good and then we're going to run the following command npx react native Ram Android you want to make sure that you uh emulator is running or in my case uh I'm going to connect an actual device and then I'm going to run this react app on an actual device right I'm just going to project that onto the screen so after [Music] uh after doing a little digging um and a little patience a lot of patience really when you run this command um I was getting an error about ADB and so this is the era okay no not this one but this one yeah so it says ADB not recognized as an internal or external command so after doing a little digging about this I was able to find the solution for this um so basically what you have to do is to okay yeah so chances chances are high you might be getting this error which says failed to start up command field ADB shell stat and all of that so how I was able to get around this was by you go to your C drive go to users go to your user and go to app and then go to local and look for [Music] uh go to Android SDK then platform tools then this is the path that you need to add to your environment variables so just copy that and just type variables you should be able to see it pop up and go to your environment variables under system variables look for path which is right here go to edit click on new and you can add your path there I've already added mine so you just need to add yours there and guys that should be good now after even after doing that I still encountered the same challenge so I thought of uh directly using um the the Powershell so when you run partial okay yeah so when you run Powershell directly from here you just want to CD into documents so for you you might be sitting into the location so this is basically the location that I'm following right now documents let's uh some I'm basically just following the this location so CD react Ive cdrl Translate and uh and then and then we're just going to run uh the the command this command so you just want to copy that came back to your Powershell and run pretty much the same command I'm just wait to see what will happen right so after it's done building when you've used the partial you should see your app up here loaded all right I guess we're good there so yeah now uh before we start to write code we're going to edit the the app.tsx file and then um uh we're going to write some code there obviously this is coming from that from that file so you get back to your 100 baby button to your Visual Studio let's open the app to TX file so we might want to remove a couple of things here uh from here you might want to just get rid of everything we're going to put in some new code here actually foreign you text style sheet stuff image pressable text input right so let's say from react Ive okay um don't worry about that for now we are going to fix it just to ensure you have your camera there in our next slide we are going to say const up react FC which will be equal to that and then we'll open that let's say View create some some style here container to close it up there okay let's have some text and we're going to say hello click react um something like that foreign foreign foreign yeah so with uh with that you should be able to see Hello react up on the screen in the middle yeah so that's that's cool right so we're gonna be um I've already put uh we already put code here but I'm going to run you through uh the different um folders and the files that have been created and the different um code that I've I've put in here this so there's uh there's something I forgot to mention to you guys um so you need to install axios axios is what is going to enable you to be able to to do Post requests so get requests from the API that we just created so if you don't do this you might run through you might run into a few errors all right you you just need to run npm install in your root directory so if you have a terminal open there just make sure you're in the correct directory CD all right in translate this is where you're going to run this command so I've actually already run it so I'm not going to run it again but this is the command unit okay so once that's done uh I created an assets folder where I put my icons and some animated typing stuff and um yeah some some loading don't don't worry about that and then this this index.ts file here and then under the source folder you're going to need to have two folders components and then services so first deal with the components folder and the components we're going to have conversation and remember now we say the app is going to have two sites one side is going to be for the conversation and then the other side for the translation and that's why we are having two folders in the components folder here if you open the conversation um folder you're going to find Styles so this is the design of the conversation that we're going to have and then this is uh just basically where we're going to be linking uh the different components so this get answer method is coming from uh the the API file which I'm in a moment going to be explaining to you and then it displays that uh on on the user interface um and all of that so it's about conversation pretty much uh the same nature of ours now now when we get to the services folder you want to so if you notice we said you need to have components and then services so under Services you create another folder you call it API and the API we're going to have this folder so this is where the magic is going to be happening uh at the very top here we are creating a constant and we're calling it best URL and this URL is the the endpoint that we created and deployed to the cell earlier if you remember and then we're just going to say backslash API uh backslash if you remember what we were doing in Postman and then we have a get answer here which is what we're making reference to our conversation component if you remember which is this one here so this is linking to that to be able to get the answer from the API and then display it on the composition user interface okay um so we are creating a response constant again here as you can see we're using axios to to be able to to send a post request to to our API and then we are pulling the the base URL which is the best URL here uh uh so if you remember let's just open Postman I just want to to give a little context to this so if you remember here we were having a backslash API and we would have asked a question then you have prompt and then what uh the question The Prompt is going to be the question that's exactly what we're doing here so we're basically getting this whole thing backslash API and then backslash ask a question then we have a prompt and then what the question is going to be and then here uh you only pay attention to this so I'm calling answer and if you remember in our in our back end files what we did is we you know what let me just see if so this is uh the back end uh project that we had done earlier so if you remember so we are basically code we are calling this constant here you want to make sure that the name is exactly the same as what you're going to uh oops oh I think I all right yeah so basically what I'm saying is if you notice here you want to make sure that what you're pulling here is the exact same thing as what is in your back end otherwise you're not going to be able to pull any data from the API all right so we're checking if the status is 200 meaning that we are getting a response and then you can print that onto the screen same thing for the translate here we were using answer as well if you notice let's go back to the translator tiers you can see that we're using answer for the response here as well so this is what we're getting and then we are playing around with that so that's what we have here and the prompt we're getting the query and the language there and uh yeah that's pretty much it now to run it um I've been using the partial and that's what we're going to use to you now just open up your partial go into the directory and they run the following command uh npx react native run Android because that's running and I'm gonna open up my my real device here this is type A to run on Android I need to start firing up mainly too patient foreign about to start okay there we go the app is running okay sweat for it to finish the the bad Lane once that's done you should be able to see you up pop-up give it a moment again okay right so let's try to write something here oh here you can send a prompt like that okay it's a little bit weird let's try the Translate right translate works let's try something else Maybe hold up right that works let's check the chat now try something like hi there we go it works yeah so it's funny uh if you notice it's quite straight up and it's only responding like a doctor and that's because uh in our in our back end if you remember we had said answer the following question like a doctor so you might need to you might need to change that otherwise you're going to be getting some some medical help from from the activity all right guys I just thought I should I should mention that uh it was quite intriguing why it was only responding like a doctor and you will remember that that's what we give it all right guys I hope you learned something in this tutorial please like share and subscribe and look out for more videos If you have any challenges just uh just put it in the in the comments section I'll be able to respond all uh reach out to me on on Instagram at Tech Joe or um or Facebook my Facebook page Tech job or actually I think uh what does one of my emails in the in the description but um until next time it's peace from me

Channel: Tech Joe

Views: 6,175

Keywords: Nextjs, ReactNative, OpenAiAPI, TranslationApp, ChatBot, LanguageTranslation, ArtificialIntelligence, Programming, WebDevelopment, MobileDevelopment, SoftwareDevelopment, MachineLearning, NaturalLanguageProcessing, NLP, BackendDevelopment, FrontendDevelopment, JavaScript, Nodejs, MobileAppDevelopment, WebAppDevelopment, UIUX, UserInterface, UserExperience, CodingTutorial, ProgrammingTutorial, Tutorial

Id: jILiL5nBE-U

Length: 63min 18sec (3798 seconds)

Published: Sun Feb 26 2023