ChatGPT Clone – OpenAI API and React Tutorial

Key Takeaways

in this course nishat Singh will teach you how to integrate gpt3 from openai with the react application you'll basically be creating a website with similar functionality to chat GPT Nishant has created many popular video and text-based tutorials hey guys welcome to Free code camp I am Nishant and I am your host for today and in this video we will basically learn how to integrate opinion API with react we will create two applications and this one is the first one in this application we will use openai API and react to generate images using AI for example if we type something like this and click generate an image it will give us this image using AI so let's wait for it we can see this loader and we have this image which is loading it's generated using AI this one was the first application now the second one is called charge Deputy clone so you have much heard of charge Zippity and what it does so it's a tool a very powerful tool that can explain us some code or give us some code if we type in the prompt or you can give some question answers if you give it a question but we don't have options to integrate charge apt into a JavaScript or react app but I have used some models from open a API to create this application which can give us some question answers based on that knowledge or explain a piece of code or all of this stuff so let's create this as well so here I have a react app with wheat that I created just now so let me clear the code a little bit in app.jsx I went from this and remove all this junk remove class name let me remove this state of count and this let's leave usted because we need it later also from the CSS let me remove the black color okay leave the black color we will work on this so let me explore this Service First open AI API service we have documentation overview examples that you can explore let's first login or you can sign up if you want so it will ask you the email address to create an account and all so you can sign up so let me just go back to open AI website let me okay this one image generation let me go to login and let me log in with my email account click continue so in the process of logging in or registering it will ask you why do you want to use this API service so you can choose that I want to create my own app only then you will get access and that's how I got access to this open AIA beta we have text completion code generation completion whatever imagination fine dining so I don't know the rest of things values imagination service here all right so let me explore this how to call this so we can click this click documentation then let's click libraries here we can install this in node.js so basically we have to install it using this command npm install open AI let's install wait a second okay we don't need this dollar okay let me remove now it will install and will be listed in package.json file C this open a fine let's also okay do nothing close it now we have to import these things here configuration and open AI so let's so this is a module like es6 module so we have to use import so we can say import this I'll just do from open AI inside we can have configuration comma open AI so open a API like this so we have this two things imported here now we need to initialize a configuration variable called this configuration where it will take our API key so you can add your API key so let me add my API key create an API key from here API reference not from here let's see click this person icon view API keys then just copy any API key from here let me delete this report key or just okay we cannot copy so just rebook the key create a new secret key we can just copy it and let me paste it in EnV file so in the source we can create just this dot a e n v in the inv file we have to use wheat and the key name and this EnV should be outside the source folder before this we had it inside in SRC folder so move it outside and then simply decide the server you will get the key here of the wheat and I think we don't need this backticks or tablets little so we can also remove this okay now it's fine we don't need to restart okay so it is here so let me just copy and replace this with this key now let's see what we have here next in the okay so let me go back to this image generation okay we have this configuration we would note here we went there here so let's see libraries okay so we have imported this in ready Act this configuration with the API key now we have to use this so we have to initialize one more variable called open Ai and this will contain this open AI configured open AI that we imported from open AI and it takes a configuration that we created here with the API key basically we are initializing our API open API open AI API it's hard to pronounce open AI API fine now we have this response so let's add this response here so for this to work we need to create a async function so let's create it so const let's say get image or let's say gen rate image I think the spelling of generate is correct let me better Loop this on Google I think it's correct yes it's correct generate okay so you have to use your own API key don't use my API key so in the generate emit image function make it a sync function and just paste this thing a weight open AI dot create completion but it's wrong this is for something else it's for like uh I think it's for completing some text that we showed you in the beginning so instead we will use open AI dot create image create image this and it will take not the model but the prompt and this things like n which is number of images that we need to generate and the size of the image like the resolution so we have this if we call this function it will return us something so let's say so in this response okay in this note response okay we need to just get the data in the response so we can say const res or response then we can simply console.log this Ras and all of these items the list let me copy this and paste it here URL I'm in the first URL for this because we're generating only one image so now let's call the function but before that okay let me just create a button here button and say generate and image on this button let's assign this function so we can say on click generate image we have this button that will be helpful to or help us to generate image so let's also do one thing okay let's not do that okay so create or generate an image something is wrong open network tab spending it will take some time like 10 seconds now if you open the console we will have this link here in the console so if you open this link it will open up in a new tab and you will see the image that related to this prompt say this is a test and this so it's scrambled so instead of this okay one more thing when you generate the image and then open manual account in your daily API its number and you will see that my usage is this so we get 18 credit to use the API for free then we have some charges so if you see this Dali API usage 7 pm okay so we have basically some usage here that we can track if it is like it is if it is expired you have to use or have to pay using our account so find so we have done this so now let's create a state here and what the state will do is we have to get the prom from the input for that let's create a state called const uh prompt and set prompt p r o m p t I must be here prompt and set prompt so use state let's say this is a string because it's it's string now let me create one input so we can say input here we will have input but we need to arrange them to div class name let's say um app mean now come over to let me close Envy file come over to app.css we will write the stylings here so we can remove all of these click at this okay something is here that we need to leave I think this class name yes fine the root last name now let's say we have admin here copy the class come here over here and say Flex or display of flex then Flex Direction column now we'll have this input and button now let's style the input so we can say class name let's say app input okay now in this let's say app input let's say height for TPX but is too much let's try 30. okay 30 is fine if we try 20 is also fine we can type anything in here fine now let's give it some margin around them or around it so 20 pixels now we have this also let's add width of 200 pixels to make it big like this we can type in here let me Zoom this and yes this is perfect perfect let's give an H1 here or yesh one here generate and image using open a i API I think I am pronouncing this correct now yes sir it's too big but better to make it an H3 not H1 to decrease the size okay now the design is broken so we can say justify content okay this will not work okay because you know my previous video was all about this now it will look see okay okay okay okay now what we gotta do is so let me Zoom this okay we have this text so let me set the prompt from this input so we can say on change on change we can generate an event and then call this function hit prompt and store this event dot targeted value inside the state using this function not validation message value now this state which is prompt should have this so we can replace this so we can add this as well and this as well as a input field or you can do that find and generate your image now if you type something and click generate image this will throw us a link here in the terminal or console list console so okay let me also write a placeholder here that Place folder that says enter or type something to generate an image okay two dots I think we have to make the size a little bit bigger some big 400 too much 300 let's see 300 is fine okay now we have a place this as prompt State now it will work so let's think of something let's say a man on a beach now click generate an image it will take some time so let's wait for this don't worry I will add a loader or a text so we have this image now click this link and we will have image a man on a beach like this so it's wonderful isn't it I think it is it is wonderful and so I think the usage of per API call or per request is 0.0 dollars so we have 18 dollars that's I think sufficient for testing this otherwise if you can pay then you can pay so now what we have to do is let's create a image tag here IMG tag images Source something let's add Alt something save this but since we don't have the source of this we will not see it here so what we can do is create one more state so let's say const result and set result equals to use date empty string because image will be a link in text so we can set it here not in so in the console.log so if you open the result srcs link as a result it will be here when we type and generate the image so it will you will see that the result is this so we can just use null is what is it called inside the curly bracket it is called knowledge Coalition I think let's add empty string or what we can do is we can say if result dot length is more than zero only then show this else show an empty fragment we can add it here so then we don't need this now save now let's give it a try so let's add something else a man in a volcano this time not a mountain or a beach volcano click generate image let's wait for it to generate okay we don't need the console and we will get this massive image that we can make smaller we can say class name result image just copy this class and add it here and we can say width 400 pixels that will be fine for 300 okay 300 is fine some top margin so margin top 20 pixels fine so we have this image to spin that's all I think I can make it 350. that's fine fine if you click it again this will generate a new image so let's wait for it sometime and you will see now let's spend things or just say Mona Lisa let's try this it will take some time and it looks ugly I mean this thicken this thing or whatever it is looks ugly so now let's type something really different uh I think let's say let me think uh let's say a bird riding okay not this let's say a horse riding a Diner Dino car now let's see what we get this in this result so basically this Service open AI API generates image using AI so whatever we type okay this is not a horse it's a man let's say a camel riding a diameter yes so basically it uses AI to mix images according to the prompt so that's what it is and I think it's a camel riding a dinosaur but it's not a camel it's still a human being but it's fine all right so that's how we create a service or a app and react that can generate image using this new Dali API from open AI API service to generate image for the second application we will use child Liberty in our react application we will use open AI models to do that because we don't have any current Integrations from chat jpt in our react to Java step tab so let's do that but first let's see a glimpse of what it can do so we can give it a prompt like this explain Quantum Computing in simple terms if we click this send button or enter this will trigger and it will start this answer which is this we can stop I don't think we're going to stop so we can create different type of conversation for example when this is ends when this ends we will have this named as Quantum the beauty like this simple Quantum Computing we can create a new chat and here we can say what or how do I make a JavaScript request using HTTP or even fetch API now click this button it will give you this answer like this we can have several methods to do all of these you can read this it will also give you the code here which is this fine so if it ends again this will be named as the prompt how do I make and a stupid request in JavaScript so it will give you all the answers that you need so it's a powerful app see if it is now getting renamed so you can delete this chat yes and then we can get a question answer as well like got any creative ideas for 10 year old's birthday if we click enter this will give us the answer it can solve any problems or make a list for gifts and do all the stuff that you want it to do fine so it's a yes a very good tool I don't have to say more 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 you will see the open AI API API key here so let me show you let me bring it down here okay now see this is the API key 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 open ai ai API to get the API key simply go to openai.com 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 certain 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 exemplary or we can say it is what is it what is the word it is per preview usage yes so if you 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 what can we call the component let's say translation because here we will translate the component so jsx like this and so we have two components here let me close this so now what we have to do in this object selection we have to create all of these options like this we see so make a functional component here and simply call or random component inside app.jsx into the 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 div 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 funds 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 save 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 see 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 point 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 more 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 props 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 you removed it 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 great 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 hmm 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 or 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 so at 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 the thing 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 an 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 plug like that so I guess we have to do it from here I have to send it from here directly so we can say let me move this console log and then we can say con or const 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 on 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 you 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 as the 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 click again it will be 7 because we will have 7 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 value dot option I mean objected 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 q1 a you will see this component now translation so inside this let's add a text idea 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 to 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 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 Point 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 hmm fine also we can add a little bit padding here 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 uh 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 destructure 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 you 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 control DOT log this inside this two stuff now if you click those stuff you will see this and prompt is still empty hmm 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 this but we don't have prompt here so when we need to we need to use the prompt or set it in this do stop function so 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 it will say 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 am 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 we're 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 apic 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 you 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 park 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 click 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 choices 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.jsx 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 zero 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 collection 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 for each into this car array dogs into car ready so in the python we can simply do append.orgen 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 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 so now you can also create one react AI app there's 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