0:12
all right so um in this video we are
0:15
going to create an image generation
0:18
using Ai and we will use Nvidia API for
0:24
main um project which Nvidia suggests
0:28
there is a course full course about this
0:31
and this is in Python but what we will
0:33
use is nodejs and we will create a front
0:38
reactjs right so let's actually see what
0:42
we need and then we will quickly create
0:45
project so using nodejs what they are
0:48
suggesting is to use this uh note phage
0:54
be an invoke URL all right there will be
0:58
the header and then there are some
1:01
payload so payload is basically what you
1:03
are uh like whatever you are sending
1:07
inside the not inside the API like
1:09
through the API right so it says underw
1:13
underwater world plants shells creatures
1:17
High detail sharp Focus 4K whatever it
1:20
is so the image is generated here if you
1:22
want to know more about this there is a
1:24
UI for this see try so here what we can
1:28
give it is is a prompt and then there
1:31
are parameters as well negative here
1:34
they have seen if you want uh they have
1:36
said if you want to exclude something
1:39
you can uh use it here and then there
1:42
are sampler and all we will we will see
1:45
these things later on and then there is
1:46
the configuration scale I guess and
1:49
steps Etc all right so these things we
1:53
need to provide to the API that is why
1:55
we have this parameters uh sorry payload
1:58
over here and then we will wait for the
2:02
response and whatever response is there
2:04
we will send it to the to the front end
2:07
and we will show the image there all
2:09
right I don't think there is anything
2:11
else so we will jump into code and see
2:14
how things are working right
2:17
okay so at first we will create the back
2:21
end for that what I will do I will
2:27
quickly uh let me use this so will go to
2:30
developer and then create a folder
2:36
name uh what it should
2:39
be let's say AI image generation or
2:44
generator and then we will go inside AI
2:49
generator and open vs
2:53
code so the vs code is here what we want
2:57
to do is we will create the node project
3:00
right so let's say index.js or you can
3:03
say server.js this is better I think so
3:07
server.js and also we will initiate npm
3:10
here because we have to use packages and
3:12
all so what we will learn uh we will uh
3:19
npm in it and Y so so the package.json
3:24
file is here and we will need some npm
3:30
in this project what we will use is um
3:33
let's say yes do en EnV is a good one
3:37
and then we can we have to use express
3:39
because we will create an API for this
3:42
and uh course will be there because uh
3:45
when you use this there will be some
3:47
course error in your front end so we
3:49
need to use this and then exos for
3:53
handling the API what else do we have
3:56
course. EnV yes this four I guess
4:05
right so we have the dependencies
4:08
here we will go to server.js another
4:11
thing that we can do is we will use
4:14
noemon because what nodemon
4:17
does if you want to run the code if you
4:20
want to run server.js you need to write
4:23
node server.js every single time even if
4:27
you get an error you have to run it
4:29
again right but what nodon does is the
4:33
server will be running constantly and
4:36
you don't have to refresh you don't have
4:37
to rerun again and again so noemon takes
4:40
care of that okay now what we will do is
4:45
we will create the project at first we
4:51
so require Express and then we will need
5:02
uh I think I'll just copy and
5:09
paste all right and then what we need is
5:14
we will create the app as an Express app
5:19
and we will say the app will use
5:23
course all right and then what we do is
5:28
we just where is the uh this one so we
5:34
things like this invoke URL we will need
5:40
this right and then the headers of
5:43
course we will need but uh what we will
5:46
do we will create the API at first and
5:52
so um another thing that we can do is we
5:55
will create a an EnV file and there we
6:00
will create not create like we will
6:03
store the API key where you get the API
6:06
key is from here at first you need to
6:09
log in uh this this link will be in the
6:11
description by the way and then you
6:15
click on get API key and if you are
6:18
logged in you will see the API key there
6:21
right so whatever API key you see from
6:25
here you just paste it there right so
6:32
it it it will look like this and then we
6:39
say const let's call it API key again
6:44
and from where we will get it is process
6:47
EnV and we named it API key so the API
6:52
key will be gotten from
6:55
here and then um the express will use
7:06
say we will create the API endpoint like
7:10
this What's Happening Here is we created
7:15
an API endpoint saying generate our
7:18
image brother and then it has a request
7:22
response you know this test things
7:23
because you already know nodejs right
7:26
now what this is doing is
7:30
using exos you are invoking the URL not
7:33
invoking like we are using the invoke
7:35
URL and then we are posting not posting
7:40
like we are using the post method to
7:43
send data to the API and then we are
7:45
getting it back and then send it to the
7:48
front end so this is the whole
7:50
process now the body will come from
7:54
front end that's why we are uh like um
8:00
the data the data will be coming from
8:02
the front end that is why we we are
8:04
using this here it will be the payload
8:06
actually but as we will send it from
8:08
Front End that's we have yeah so much
8:10
talking now what we will do is we will
8:13
use the API key here how I am getting
8:16
this is simply over here you just see
8:19
this is from the code itself from Nvidia
8:23
itself so we are just copying and
8:25
pasting most of the things are copy
8:26
paste right so and here it says the API
8:30
key will be here we have given this
8:33
already so API key will be gotten from
8:36
the environment variable now we will
8:39
Define the port so Port can be anything
8:44
uh let's say 1312 anything it can be and
8:49
the app will listen to this
8:53
port and we will just console
9:03
brother we can use that so everything is
9:07
done from our end now we go to the front
9:11
end part let's close this at first and
9:18
again what we will do is we will go back
9:22
and then create a react project very
9:26
quickly let's name it uh let's say
9:34
create react app and the name will
9:46
contend so the react app is built what
9:52
we will do is we will go to that uh AI
9:57
image uh not this this one uh let me let
10:01
me just write Emma front end and then we
10:06
will go inside the code and also let's
10:11
the uh it did not close whatever now we
10:15
have the front end code and let's also
10:19
run this npm Run start and here also we
10:24
say there here also we will say node mod
10:29
on server.js what is oh yeah so
10:37
server so it's running it say server is
10:42
brother if we go here the react app is
10:45
here already but I have already written
10:49
the code for this so let's actually
10:52
close this one and we will quickly copy
10:56
and paste because we don't want to waste
10:59
our time right so what we will do let's
11:04
actually just change the name at first I
11:08
don't love this so AI
11:12
image generator will be the name and we
11:17
don't have anything else here we will
11:21
component let's say components and
11:28
have nvdia doj very basic project we are
11:32
not we're not following any protocol
11:36
fun so I'll just copy and paste my old
11:40
project because I have already done that
11:41
and I'm lazy to do this again so what we
11:45
are doing here you understand everything
11:48
what we are doing we we just
11:51
have um a basic things some basic things
11:56
I'll just show you the the UI right away
11:58
let me let me let me show you the UI I
12:00
have an asset folder as well
12:03
because so inside ASC Source I will add
12:12
and I will add this three to here okay
12:17
all right and also inside
12:21
app.js I will add this
12:27
Nvidia um oops this is called PR Nvidia
12:32
right so let's call it
12:42
work okay so as we have used AOS over
12:47
here we need to over where
12:52
over where do we use thisio
13:03
where I think uh yes here so we have
13:07
used xos over here what we will do we
13:19
xio and we have it magic but we don't
13:23
have the design what we will do is
13:29
we will copy everything and inside app.
13:31
CSS just paste everything see voila we
13:36
have the project ready this is not a
13:38
very goodlooking project but we have
13:41
it see this is working now but if it is
13:45
working or not we have to test it right
13:50
out uh what we have done just very
13:53
quickly if I say is we have this input
13:55
field and we have this button nothing
13:59
so and and also this things how I'm
14:02
getting this this is all the payload
14:04
that we have so payload inside payload
14:06
we have text prompts what is the text
14:08
prompts we will get it from this input
14:10
field that is why we have used an US
14:14
state and there we have this text and we
14:18
will send this text actually we can have
14:21
it like this so we will send this text
14:25
whatever we write here we will send this
14:27
using the payload to the API and then it
14:31
work and everything else is there
14:34
whatever we have is same you can see the
14:37
sampler is different here why I have
14:40
done this because the oiler one is the
14:43
best one like it it generates realistic
14:46
realistic photos you can try this out
14:48
later on you can change from here like
14:51
experiment this like all the Samplers
14:54
you can try here that's not a problem
14:57
and I don't think there is anything else
14:59
and also after getting the data from the
15:02
response we are setting the image as per
15:06
the image data if you need further
15:08
explanation I will do that later in in
15:10
another video but let's not make this
15:12
longer so let's try this out and we
15:16
already have this uh API because this
15:18
API is not the Nvidia API But whichever
15:21
we have created using Express and
15:25
nodejs so let's try this out um
15:29
what do you guys want to see beautiful
15:32
girl mhm so let's say a
15:37
girl uh wearing a red press
15:42
maybe let's also Define this
15:47
20 years old wearing a r
15:51
dress um in a Rose Garden let's see this
15:57
let's say oh let's actually try I don't
15:59
think it can generate it
16:03
very Oh See Magic right so this is our
16:08
image generation project and we have
16:10
completely done it congratulations and
16:14
if you have watched the video till now
16:16
you know what to do right you know right
