In this course Nishant Singh will teach
you how to integrate GPT. Three from open AI with the React application, you'll
basically be creating a website with similar functionality to check GPT Nishan has created
many popular video and text based tutorials. Hey, guys, welcome to Free Code Camp. I
am Nishan. And I am your host for today. And in this video, we will basically learn how
to integrate open API with React, we will create two applications. And this one is the first
one. In this application, we will use Open 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 the editor using AI. This one was the first application. Now the second one is
called Jeopardy clone. So you have matched heard of Chad deputy and what it does. So it's a tool, a
very powerful tool that can explain us some code, or gave us some code if we type it the prompt. Or
you can give some question answers if we read the question. But we don't have option to integrate
chargeability into our JavaScript or reactor. But I have used some model from Open API to create
this application, which can give us some question answers based on the knowledge or the clinical
piece of code, or all of this stuff. So let's create this as well. So here I have a React app
with beat that I created just now. So let me clear the code a little bit. In Abdo JSX, I went from
this, remove all this junk, removed class name, let me remove this state of count. And this
literally, we used it because we knew 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 API
service. We have documentation overview examples that you can explore. Let's first login or depend
sign up if you want. So it will ask for the email address to create an account and all. So you can
sign up. So let me just go back to open a website. Let me Okay, this one in my 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 AI beta. We have text completion, code generation completion,
whatever image generation finding, so I don't know the rest of things will use image generation
service here. All right. So let me explore this, how to call this. So we can click this clip
documentation. Then let's click libraries. Here we can install this in Norges. So basically,
we have to install it using this command npm. Install OpenAI. Let's install. Wait a second.
We don't need this dollar. Okay. Let me move. Now it will install and will be listed in package
dot JSON file. See 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 say this is a module like es six module.
So we have to use import. So we can say import. This just do from open AI. Inside we can have
configuration, comma, open AI, open a OPA like this. So we have 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 say click this personal
icon, View API keys. Then, just copy and API key from here, let me delete this revoke key or
just okay, we can recover. So just revoke the key, create a new secret key, we can just
copy it and let him paste it in env file. So in the source, we can create just this dot e
NV in the env file, we have to use VT, and the key name. And this en, we should be outside the
source folder. Before this, we had it inside the src folder, move it outside, and then simply
start the server, you will get the key here of the week. And I think we don't need this
backticks or template literals. 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 will not here we went there. So let's see
libraries. Okay, so we have imported this in React 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 a configured a open AI that we imported from open AI. And it takes a configuration that
we created here with the API key. Basically, we're initializing our API, open API, open
API API. It's hard to pronounce open API API. Fine. Now we have this response. So let's add
this response here. So for this to work, we need to create a sync function. So let's create it
so const, let's say Get Image or let's say, gin, rate image. I think the spelling of generate is
correct. Let him better look 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 a met image
function, make it a sync function, and just paste this thing, await open AI, dot create completion.
But it's wrong. This is for something else, it's for. Like, 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 that 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
that we have this, if we call this function, it will return something. So let's say so in
this response, okay, in this note response, okay, we need to just get the data and the
response. So we can say const, Ras or response, then we can simply console dot log, this RAs,
and all of these items will just let me copy this and paste it here are es dot data dot data,
the root index dot 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 an image. On this button. Let's assign this function to against 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. It's pending. 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 scrambled. So instead of this Okay, one more
thing when regenerate the image, and then open managed account in your daily
API. It's number and you will see that my usage is this. So we get a $10 credit to use
the API for free, then we have some charges. So if you see this daily API usage 7pm, okay.
So we have basically some usage here that we can track. If it is, like it is, if it has
expired, you have to use or have to pay using our account. So fine. 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 prompt from
the input. For that let's create a state called const. Oh, prom and that from B, O MBT. I must be
here, prompt and set prompt. So use state. Let's say this is a string, because yes, 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 app. Main. Now go over to let me close
the env file. Come over to advert CSS, we will write the stylings here, we can remove
all of these, click add this, okay, some thing is here that we need to leave I think this
class name, yes, fine little classmate. Now let's say we have admin here, copy
the class, come here over here and say, Lex, our display of flex, then flex direction
column. Now we'll have this input and button. Now let's tile input. So we can say class name.
Let's say app input cookie. Now in this let's say app input, let's say height 40 px, but it's too
much let's try 30 or 30 is fine. If we type 2020 is also fine. We can type anything in here.
Fine. Now let's give it some margin around them or around it the country 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 it an h1 here. Or Yes h1 Here. Jen
rate image using have been a I APA I think I'm pronouncing this correct now. Yes sir.
It's too big but bit to make it an h3 not h1 to decrease in size. We can now design is
broken or we can say the server content okay this will not work because you know
my previous video was all about this. Now it will look p p o okay. Okay, okay. Okay.
Now, what we got to do is let me zoom this Okay, we have this text. So, let me set the prom from
this input. So we can see on change wanna change we can generate an event and then call this
function that prompt and store this event dot target value inside this state using this function
not validation message value. Now this state which is from should have this so we can replace this
or we can add this as well and this as well as the input field or you can do that fine and
generate your image. Now if you type something and click Generate image,
this will throw us a link here. The terminal, our console. Yes console. So
okay, let me also add a placeholder, that placeholder that says, in turn, or type
something to generate 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 to assess prompt state in order 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 a mage, a man on a beach like this. 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. 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 an
image tag here. IMG tag, images, source something. Let's add something, save this. But since we don't
have the worth of this, we will not see it here. So what we can do is create one more state.
So let's say const. It is right and set it is because to use date, employees train because image
will be a link in text. So we can set it here, not in so in the console dot log. So if you open
that URL or just mark the 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 knowledge, what is it
called Inside the curly bracket? It is called Knowledge coalescing, I think it's interesting. 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. Let's give
it a try. So let's add something else. A man in a hole cannot this time not a
mountain or a beach wall cannot click Generate image. Let's wait for it to
generate. Okay, we don't need the console. And we'll get this messy image that we can make
smaller. We can say class name, result image. Just cover this class and add it here. And we can
say with 400 pixels. That will be fine or 300. Okay, 300 is fine. Some top margin the 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. Fine. If you click it again, this will generate a
new image. So let's wait for it some time. And you will see now oh 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 technique, this thing or whatever it is. Look Sorry. So now let's type something really
different. I think let's say, Let me think. Let's say a bird riding. Okay, not this,
let's say a horse riding a Dyna dyno. Thor. Now let's see what we get this in
this respect. So basically, this service open 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. 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 that's fine.
All right. So that's how we create a service, or app and react that can generate image using
this new dolly API from open AI API service to generate image. For the second application, we
will use chargeability. In our React application, we will use open a model to do that, because
we don't have any current integrations from chat API to in our React core Javascript app. 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 you 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 can stop. So we can create different types of conversation.
For example, when this is ends, when this ends, we will have this named as quantum computing,
like this symbol coordinating, we can create a new chat. And here we can say, what are 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 an HTTP 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 we're
gonna delete this chat. Yes. And then we can get a question answered as well, like, got
any creative ideas for 10 year olds 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.
Yes, very good tool. I don't have to say more. In this setup, I have a React app with nothing. So
it's all empty. But we have a commented console log here. So if we understand this, we will see
the open 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 env file here. And we have to add this string, wait open API key and this API key
from open AI. Sorry, open API. To get the API key, simply go to open api.com/api. If you don't have
any account here, sign up, or else just login, select me login and show you the API key
the source so you have to enter the email and this check. So we need all the cards. So
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. This
this this personal and View API keys. Here you have these keys. When 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.6 $7 of mine account from a account, the total amount, I have
a certain knowledge, which is free, fine. And it expires on March word of the next year. So that
out of the way, now, let me go to the homepage. So, we need to create an AI app in React, similar
to what we have in charge of eight. So let me open chargeability. So, we cannot use this in our
reactor 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 for?
Review usage? Yes. So, if we click the examples, we will see all of these categories like q&a,
grammar collections, 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 are first a folder called components. In this folder,
let's create two files. First will be option. Election, dot j s x. 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, I know we have two components here. Let me close this. So now what we have to
do in this oxygen election, we have to create all of these options like this, we see. So make
a functional component here. And simply call or render component inside app dot JSX
into our main component, like this. Now if you see the app, we will see
this text here. So let me remove this. Just let me remove this div and make a fragment
from react. inside. Let's make a word tag for the heading, which says react AI app. in bold letters.
If you want to get some fonts, just head over to bonds.google.com and get some fonts from here.
Just paste this inside your CSS. So let me just remove all let me select Poppins because it's
my favorite font. So we can select regular 400, italic, in bold font, medium 500. And
that's all so just copy all this using clicking this icon here. This I can celebrate
families. And just just do what just copy this input and paste this inside the app dot css
at the top. So we can remove all of these because we don't need all of these points. So remove.
And to get the text from h1 are in this font, we can add a class name and say heading.
Inside this we can say heading and font family Poppins. If 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 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 say answer.
Questions based on existing, exist in knowledge point. So just like that, we can create
a lot of these as much as you can want, or do you want. So I read 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
12345677 pieces. So let's get the items into our app projects expert. First, we have to export
this array items. Now we can simply do import array items from a 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 items inside. Or just
pass it as props into option selection. Because here, we will select the option. Right.
Now, let me just map all these items. So we can say we need to create a grid so we can set Dave
first. Inside, let's map it. So our items dot map, let's see 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 say item, dot
let's see what is the key name they have added. The key name is called name, item dot name. And
second will be will be p tag item dot description we will get all these items. According
to the array. No, 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 off grid. Then we can say grid template columns auto and auto to make
them two in a row. But something is wrong here. Let me open that index dot 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 I removed him,
it will not be proper. But if I add a div, it will be properly rendered.
So we are editing this file. Now in this wave, give us a demo class name of
let's say grid child because it's a child like every item is the child air pods grid of the can
sixth grade child, let's say let's add a 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 font family
Poppins and font weight 600 Fine. What if we add 700 We need to make them bold but it's fine. Now
in great child b tag we need to add Poppins but we need to decrease the font size so we can
say font size. Let's say you've been pixels let's remove this and make 500 What's not getting
refreshed? What 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 smooth color like this. We can also add a
gap between all the items to say gap 10 pixels, or 15 will be fine as well.
Now we need to make these what is the we need to make the border curved
around it? So we can say border radius 15 pixels as well. Now they're curved current. What if we
make this two pixels? Yes, now it looks fine. So also, we can add some padding to sing the
items like this. Now it looks much better. We have reacted if title. And this also
late set margin top 20 pixels to shift them in the top at 20, but margin top 20 Let's set
3040. 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 options. So we
can say first cursor pointer. Now if you hover them will see this pointer cursor here. Now in
the grid child, we can say dot grid child hover over in this we can say background
color as white smoke and color s 212121. You save and if you Now hover the items will
see this kind of thing. Which is I think great. By but something should be checked here. So in
ebook CSS, we are having all of these items, max width margin text align center index dot css,
okay, this is the problem and 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 lists, 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 area 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 look like
that. So I guess we have to do it from here. We have to send it from
here directly. So we can say let me remove this console log. And then
we can say can or const select option we have our arrow function which will take
option value. I mean option Behram we can pass let me Okay, nothing there, it's fine. We have
to pass this function as props to this Component Options election. 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 is the one click should send this item dot this
key option. So let's do that item dot option. Now, in here in the amber JSX, we can
simply console dot log this option like this. Now let's see what
happened. If you click q&a at the top, we are reading 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 playground. We need something like this a text area. Okay,
like this, we need my, so what can we do so in this other component, translation, or JSX,
let's create it, the RFC. Let's save this. And let's import translation from this
component and just render 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 to a free console, 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
when parentheses is the object dot values. And it will convert it in an array of values from
this. And we can say Slynt. If you refresh, it will select the zero it means the error is
empty, or we have nothing inside this object. If you clear it, and look again, it will be
seven. 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 objective values option length.
If it is zero, we need to show this component. Else we need to show translation. Wait, if it
is zero, go to refresh. If a click Quick q&a, we will see this component now translation.
So inside this let's add a text area text area of HTML, we have this. So we can style
this subject class name, text area. We can also specify the row and columns. So we
can say columns, let's say pour into was small, let's say 40. Now that's fine, we can increase
it make it a T by this looks fine. And let's also add some lows to increase the height. So let's
say 40 as well. If it is too much, let's set a t okay 2020 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're making this font size 30 So we
have to decrease the column so let's say 60 or 30. That is small, let's say 40 What the What
about 5050 is fine motherboard 60 extends too much is going out of the screen. 50 is fine also
make this as 10. Now this looks fine, correct? Fine. Also, we can add a little padding here. We
can say padding 10 pixels. Now we have this cool looking text idea. Let's add the font size for
the font family as Poppins. To get the font in Poppins. We can also make this 55. Yes, no, looks
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 save button and say, do your tough now save, let's style our buttons knows the
class name, let's say action button. Action BTN. In the CSS style, this we can say with 200
pixels, height 50 pixels and font size 20 pixels. Fine, left side 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 will see this page, click this we will see
this thing 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, reset, reset, reset, reset add
the class name here. But I guess we don't need that for now. So let's leave it removed about 10
minutes refresh the page by if you do your stuff, this should trigger a function correct.
So let's say console party const 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 onchange so the unclick this function also create one more
state for the input. So we can say const input and set input. So you will state and string
pass this will hear in translation component receive it or destructor it then on
this input of text area we can on change you can say it will take
up param called E or event and we can say or we can just store event
dot target dot value inside this input. If I type something and check this state
called 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 the options here in this function called
option. So this is an object. So we can append this option like all of these options with this
text ad I input to make the full set of this to make a full set of this using prompt.
So you can simply destructure 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 console log 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 Nishan here, you will see from the still empty Okay
wait. So we need to set this in options. Okay, let's do this. Let's console
dot log this inside this to stuff. Now if you click those stuff, it will
say this and prompt is still empty. So I made a mistake. So what we need to do is we
need to set the options from this error object when we click the card. Now, if you console
dot log this, let's see what we're getting. There considering 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 stuff function. So we can do it like this. Now, 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. 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 will see nothing. But if
you click the Do stuff button, we will see the prompt here as Nishan. 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
it. Okay, I need to install it as well. Because I did install it. So we can say go to
this tutorial. How to install this in production. Quick Start tutorial. No, let's say
examples playground API reference overview. Let me figure out how to install this
because I have forgotten. So to install list, simply open terminal and
add this. So NPM, I open AI, enter, and it will install the open AI into our
project. That's all check the package JSON to see if it has had been installed or not see, fine, was
in 3.1 Point zero. So close the terminal. Now we need to go back to this quickstart tutorial.
We 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.
Or we can say import something from open AI. And inside we can add configuration and open 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 page from here and paste it. The next step is to create instance
of this open API using the API key and this configuration so added 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 the move
the state and if you know console, this options are option let's see the
result. No not options are the object. Now let's check this click this nothing
will happen. Add some text like hello. No enter or press this button. It 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 this
items. So we can remove this object parenthesis and simply say object. Now if you console
dot log, this response let's see what we get. So just say Theologie. Response, 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 are getting it, if you open
data, we will see the choices. In the choices, we will have the text. So let me just do response
dot data dot choices zeroeth index dot txt. Now we will get the entire text only, not some
other thing. So try again, and we will get this. Now let's create one state called result.
So we can say const. result and set result equals to US state empty string. Now we have to
store this response inside the state and pass this as props. Now we have to get the props in the
toggle General J six 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 or more than zero, we will see result LLC nothing
or empty string. I have also added the model temperature and all all 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 nation note is we have
typed a no click Do your stuff. They will see the both texts here. She didn't go
to the market. My name is Nishan. If we add one, space or enter, let's see what we get. Really good. Same thing. It will not be separated
by spaces. But I think we have to do this one space. I think that's how we get space
here. No, it's backslash dot 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 what is this? Java school 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, that's fine. Because I have not added internet indentation
here. So we have an array called docks. And we're pushing all the docks for each into this
car array docs into car ready. So in the Python, we can simply do append Auto, and 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 does it? Let's see. Let me
search for this. English to other languages. Okay, this is there. So let's see this.
translate this into French, Spanish and Japanese. So this text will be translated
into three items to your stuff. There we'll 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. Now you can also
create one react, AI f 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 her some answers.
So again, go ahead and create this. And I think that's all you liked the video and subscribe to my
channel thank you so much for watching the video
