ChatGPT Clone with React - OpenAI API and React Tutorial

foreign article so in this video we will create one react AI app so I got the idea from this open AI API and from chat GPT so we cannot use child GPT currently in some JavaScript or react app but we can use all of these items which is inside the examples so you can use all of the items to create one fully functional aif in JavaScript or in react or angular as well as you want so I will I have only used this for example like q a grammar correction this this that that so let me give you how this works so first you have to choose this or any option like if you choose q a this will give you answer based on your knowledge on this knowledge from the AI so let's type something like who is I mean who is Narendra Modi question mark do your stuff if you click this this will give you the answer like this mother is the current prime minister of India and all of the other things now the next item should be this grammar collection but in this example we have we have to specify what we need to do so let me just open grammar correction tab here so it goes like this we need to type this correct this to Standard English followed by the wrong option so let's say we type something wrong he gone to the market to buy stuff he didn't need let's try something random should not need now if you click this door stuff or do your stuff let's see what we get you will get the correct answer for this correction like he has gone to the market to buy things he does not need so we have always like movie to Emoji explain code and JavaScript to Python and you can also add the other items as well delicious topic so you can create your own app in react to do all of these items like a chatbot type thing which will maybe replace charge Deputy one day maybe it will not but fine so it's a great project for that portfolio so go ahead and build it and like the video as well to make this reach out to other people so in this setup I have a weight react app with nothing so it's all empty but we have a commented console log here so if you uncomment this we will see the opening API API key here so let me show you let me bring it down here okay now see this is the API that we have in the console so let me just comment it out fine so to get this key you have to create a Ana file here and you have to add this string wait open AI key and this API key from openai AI sorry open AI API to get the API key simply go to open ai.com slash API if you don't have any account Here sign up or else just log in so let me log in and show you the API key the source so you have to enter the email and this check so we need all the cars verify continue then let me enter the password and continue so we will see this page now to get the key just go to this uh this this this personal and view API keys here you have these Keys you can create a key and get started to click the or to see the usage you can simply go to manage account here you will see the usage so I have used 0.67 dollars of my account from my account the total amount I have is set in knowledge which is free fine and it expires on March 1 of the next year so that out of the way now let me go to the home page so we need to create a AI app in react similar to what we have in charge of it so let me open chat GPT so we cannot use this in our react app for now or in Javascript app because we don't have the capability to integrate it it's just something exemplating or we can say it is uh what is it what is the word it is per preview usage yes so if we click the examples we will see all of these categories like q a grammar collection so we can use all of these into our react app so let me show how to do that so first let me create a component here or first a folder called components in this folder let's create two files first will be uh option selection Dot jsx and second component will be let's say let's say what can we call it so let's say um what can we call the component let's say translation because here we will translate the component so jsx like this and we have two components here let me close this so now what we have to do in this offset selection we have to create all of these options like this we see so make a functional component here and simply call or render the component inside app.jsx into our main component like this fine now if you see the app we will see this text here so let me remove this uh just let me remove this rib and make a fragment from react inside let's make an S one tag for the heading which says react AI app in bold letters if you want to get some fonts just head over to ponds.google.com and get some fonts from here just paste this inside your CSS so let me just remove all let me select pop-ins because it's my favorite font so we can select regular 400 italic simple font medium 500 and that's all so just copy all this using clicking this icon here this icon silicate families and just just do what just copy this import and paste this inside the app.css at the top so we can remove all of these because we don't need all of these fine sorry move and to get the text from H1 or in this font we can add a class name and say heading inside this we can say heading and font ly Poppins okay and this will be now in Poppins font just like that fine now we need to create all these menus menu items like small tabs so it's better to create one array some mock data so we can say let's create a folder called uh grid or let's say AI options in this we can say index dot j s x sorry not jsx let's say Json or what should we call it let's say jsx fine Javascript file and then say const array items which will contain all of these items in an array object so we can say name this will be Q and a so I will not use all of these items I will just use a few of them like q a grammar collection text to command and all so we can say name then let's say id id will be let's say Q question and a like this fine let's say some description description in here we will see answer questions based on existing exist in knowledge fine so just like that we can create a lot of these as much you can want or you want so I've added a bunch of these into the react app from this list you can add mode if you want but I have already or I have just added one two three four five six seven seven pieces so let's get the other items into our app.jsx but first we have to export this array items now we can simply do import array items from AI options from that file okay now we can simply console.log to check what we are getting in the console so you will see we are getting seven items in the array now we can Traverse through each item so let's just add the array items inside or just pass it as proc into option selection because here we will select the option fine now let me just map all these items so we can say we need to create a grid so we can say div first inside let's map it so error items dot map let's item so we can say return an empty fragment in this we can simply have an H3 which will be the title of that particular item so we can see item Dot let's say what is the key name that I have added the key name is called name so item dot name and second will be will be P tag item dot description we will get all these items according to the array now all we have to do is to make them in a grid so we can say div class name let's say grid Main so we can just copy this and add it here grid main display of grid then we can say grid template columns Auto and auto to make them two in a row but something is wrong here okay let me open that index.css and I have to remove something from here I think so let me remove all of these except this one but why it is failing so I guess we have to add a div here yes now it's working if we removed if it will not be proper but if I add a div it will be properly rendered so we are hitting this fine now in this div give this a diva class name of let's say grid child because it's a child like every item is the child here for the grid so we can say grid child let's say let's say the Border or what we have here is nothing so what can we do let's make this an H4 to make it a little bit smaller fine so we can say great child in this let's say grit child H4 let's add um font family Poppins and font weight 600. fine what if we had 700 we need to make them bold but it's fine now in great child P tag we need to add pop-ins but we need to decrease the font size so we can say font size let's say 15 pixels um let's remove this and make 500 it's not getting refreshed but why let's add 12 yes now it's working so basically let's make this an H3 and revert this back to H3 to make the text bigger fine I think that's fine looking fine now let's add a border so great child border one pixels solid white smoke color like this we can also add a gap between all the items so say Gap 10 pixels or 15 will be fine as well now we need to make these what is it we need to make the Border curved around it so we can say border radius 15 pixels as well now they are curved curved what if you make these two pixels yes now it looks fine so also we can add some padding to sync the items like this now it looks much better we have react AI app title and this also let's add margin top 20 pixels to shift them from the top at 20 but margin top 20 let's add 30 40 now it's fine yes it's working fine now what we need to do is or let's do something like this so if you hover the titles or this card we should see a highlight option so we can say first cursor pointer now if you hover them we will see this pointer cuts are here now in the great child we can say dot Greek child over over in this we can say background color as white smoke and color as 2 1 2 1 2 1. now if you save and if you now hover the items we'll see this kind of thing which is I think great fine but something should be checked here app.css we are having all of these items Max width margin text align Center app index.css okay this is the problem here we have to remove font size from here okay nothing happened okay leave it fine so we are saying this ugly looking items now what needs to happen is in this example so let's say you open the first one called q a so we have a response this we have this like we have this response which has model prompt temperature and all so we have to make them default for each item so to do that we need to create a function or we can do this as well so in this app in this array of objects we can add the model using an object so we can say option let's add option and this will be in object so for this q a we have to copy all of these and paste it here and Save but the problem is it will not work like that so I guess we have to do it from here you have to send it from here directly so we can say let me remove this console log and then we can say con or const select option fine we have our error function which will take option value I mean option param we can pass let me okay I think that's fine we have to pass this function as props to this uh component option selection so let's get it here fine now if you click this child we should trigger this so we can on click the select option but I guess I have to add the items as options here only then it will work so let's add this just remove the prompt because this will be dynamic except the rest so let me add this for now so what will happen is if we click this select option function using one click we should send this item Dot this key option so let's do that item dot option now in here in the app.jsx we can simply console DOT log this option like this now let's see what happens if you click Q and A at the top we are getting all of these but we still need one text area or input field for these items so let me show you what I mean so click this click open in playground we need something like this a text area okay like this we need fine so what can we do so in this other component translation.jsx let's create it so RFC let's save this and let's say import translation from this component and just enter it out here translation and we will see it here if you close the console but we need to see the translation only when we have selected the option so let's create one state here so let's say const let's say option and set option equals to use state use state and it will be an object so we can set it here like this when we click or trigger the function so if we console check in the console this option initially we should get nothing I think so let's see see we are getting this object and it's empty so to check if it is empty we have to convert this into an array so we can say wrap this inside one parenthesis object dot values and it will convert it in an array of values from this and we can say length if you refresh we will see length is 0 it means the error is empty or we have nothing inside this object if you clear it and look again it will be 7 because we will have seven items inside the array to check we can simply do this see we will have seven items so we need to show this translation component only when we have something inside this object so we can say wrap this inside a curly bracket to make it conditional so we can say object dot values dot option I mean object.values option length if it is 0 we need to show this component else we need to show translation wait if it is 0 okay so refresh if you click q a you will see this component now translation so inside this let's add a text area text area from HTML we have this so we can style this so the class name text area we can also specify the row and columns so we can say columns let's say four if too small let's say 40 and now that's fine we can increase it make it 80 fine this looks fine and let's also add some rows to increase the height so let's say 40 as well my effort is too much let's add 30 okay 20 20 is fine we're gonna type it inside it so in the text area we have to change the font size so to make the font bigger so we can say text area font size let's say 20 pixels now we have this and it looks fine so if you are making this font size 20 so we have to decrease the column so let's say 60. or 30 30 small let's say 40. 40 what about 50 50 is fine but what about 60. it stays too much it is going out of the screen 50 is fine also make this as 10. now this looks fine correct um fine also we can add a little bit padding here so we can say padding 10 pixels now we have this cool looking text idea let's add the font size for different memory of Poppins to get the font in Poppins you can also make this 55. yes now it works fine fine so this is done now we need a button to translate so let's add it like to trigger the function so we can say button and say do your tough now save let's style the button to the class name let's say action button action BTM in the CSS style this we can say width 200 pixels height 50 pixels and font size 20 pixels fine let's add margin top 20 pixels and that's all also cursor as pointer now we have this and this now the options are here now if you click or refresh the page you'll see this page click this we will see this if you refresh or let me do one more thing as well so in this translation let's also add one more button to reset all of this so we can say button it is set it is set reset reset add the class name here but I guess we don't need that for now so let's leave it remove the button we'll just refresh the page fine so if you do your stuff this should trigger a function correct so let's say console do tough and in this function let's do something later so just first pass it inside this translation component as props receive it here and make on change sorry on click this function also create one more state for the input so we can say const input and set input so use state and string pass this as well here in translation component receive it or desstructure it then on this input of text area we can see on change we can say it will take a param called e or event and we can say or we can just store event.target dot value inside this input now if type something and check this state call input let's see what we are getting open the console and type something and we're getting it here so let's say we type hello we will get hello here like this now we are passing let me open this we are passing all of the options here in this function called option so this is the object so we can append this option like all of these options with this text area input to make the full set of this to make a full set of this using prompt so we can simply just structure this so we can take we can see options comma let's say prompt and prompt will be this input file so if you're not concerned along the option let's see what we are getting so open the console like this options are here but the prompt is empty see if you type something like nishanth here you'll see from the still empty okay wait so we need to set this in options okay let's do this let's console.log this inside this two stuff now if you click those stuff you will see this and prompt is still empty [Music] um yeah so I made a mistake so what we need to do is we need to set the options from this array object when we click the card now if you console.log this let's see what we are getting so we are consoling the options so click this and we'll get all these but we don't have prompt here so when we need to we need to use the prompt or set it in this do stuff function if we can do it like this no if you type something in the this text box you will see this prompt here now click the button do stuff and we will see the prompt this so let me start again so initially this will be empty object see if you click this card q a we will get all of the items but not the prompt now click Nishant or admission here you'll see nothing but if you click the do stuff button we will see the prompt here as Nisha so we are now having the full set of the items now all we need to do is translate this here so let me copy all of these items so copy this configuration and open I okay I need to install this as well because I didn't install it so we can say go to this tutorial how to install this introduction [Music] quick start tutorial no let's say examples playground API reference overview let me figure out how to install this because I'm forgotten so to install this simply open Terminal and add this so npm I open AI enter and it will install the open air into our project that's all check the package I sent to see if it is have been installed or not see fine version 3.1.0 so close the terminal now we need to go back to this quick start tutorial okay not this try examples yes try q a and now we need all of these items from open AI so we can import this so we can say let's import them at the top so we can say import something from open AI and inside we can add configuration and open AI API then we need to create the instance for this configuration just like it says here so let's create it here and this will take the API key so we can simply cut the Apex from here and paste it the next step is to create instance of this open AI using the API key and this configuration so add it here that's done and now we need to do is this so in this function we need to do all of the items so we don't need to set options here we can simply create one object so let's select object equals to these items so cut this and paste remove the state and if you now console this options or option let's see the result no not option for the object now let's check this click this nothing will happen add some text like hello now enter or press this button we will see these items so prompt is hello and all the items that we are getting perfect fine so in this function we have to add the response and we have to make the function as async like this for asynchronous JavaScript now we need to pass the object here not these items so we can remove this object parenthesis and simply say object now if you console.log this is response let's see what we get so just say CLG response and I think it will work now so let's start from the beginning let's copy some question let's say this let's paste it and see what we will get like this paste this question and say do your stuff so it will take some time so now we are getting it yeah so now we're getting it if you open data we will see the choices in the choice it says we will have the text so let me just to respond dot data dot choices zeroth index dot text now we will get the entire text only not some other thing so try again and you will get this now let's create one state called result so we can say const result and set result equals to U state empty string now we have to store this response inside this state and pass this as props now you have to get the props in the translation.j6 and add the text after this text area this so let's do that so I have added this result dot length if it is less than 0 sorry more than 0 we will see result else will see nothing or empty string I have also added the model temperature and all all the options in other objects as well like grammar correction like this now all we need to do is just try this so refresh the page let's try grammar correction which is after q a which converts the wrong English to Standard English so let's try this do your stuff and we will get this correct answer so let's try something else my name a Nissan Note is we have typed a now click do your stuff we will see the both texts here she did not go to the market my name is Nishan if we add one space or enter let's see what we get we will get same thing it will not be separated by spaces so I think we have to do this one space I think that's how we get Space here no it's backslash not forward slash do your stuff okay it's not working fine doesn't matter so that's how it works if you add one only it will give you one now let's try other ones like uh what is this JavaScript to python code translator so open this JavaScript to python let's copy this code and add it here now click do your stuff let's see the output here so we will get the python code but without indentation so that's fine because I have not added Internet indentation here so we have an array called Docs and we're pushing all the docks porridge into this car array dogs into car ready so in the python we can simply do append.orgn this is how it works fine so I think this is done so we can say translation of English to other languages so let's try this one at last all right where is it let's see let me search for this English to other languages okay this is here so let's see this translate this into French Spanish and Japanese so this text will be translated into three items so do your stuff hmm we will see this one is I think French this one is Spanish and third one is Japanese so it is working so that's how we create uh now you can also create one react AI app this that does all of these things dynamically it can explain code or convert the code to python from JavaScript or summarize for second grader and give it some answers so you can go ahead and create this and I think that's all like the video and subscribe to my channel thank you so much for watching the video

Channel: Cybernatico

Views: 25,699

Keywords: react, react js tutorial, react js, react tutorial, thapa technical, react native, traversy media, react js full course, web dev simplified, javascript mastery, next js, #react, lama dev, artificial intelligence, ai art, sophia robot, deepfake, artificial intelligence course, ai generated art, openai, openai playground, how to use openai, next js tutorial, next.js, next js project, next js conf, next js vs react, next js code with harry, chatgpt, chatbot, freecodecamp, react app

Id: XtnYX1m2Ha8

Length: 39min 21sec (2361 seconds)

Published: Sat Dec 17 2022