Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Improve your JavaScript skills with a hands-on experience! Join Dustin as he guides you through building an AI-powered image generator using vanilla JavaScript. This exciting project will reinforce your foundational JavaScript knowledge, including variables, functions, arrays, and more. Learn how to connect to the OpenAI API and showcase the retrieved data. Don't miss this perfect opportunity to enhance your JavaScript basics while following along step by step.
JavaScript Basics full course:
Checkout how to use the forEach method:
Create or access your OpenAI account:
Grab the CSS Code here:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey, what's up?
0:09
I'm Dustin, a developer here at Treehouse.
0:09
I thought today we'd work on our
JavaScript skills with a fun AI-related
0:12
project.
0:15
We'll be creating an AI image generator
using ChatGPT's image generation model.
0:16
I'll show you step-by-step
how to connect to the API,
0:21
generate an image from a supplied prompt,
and append it to the UI.
0:24
We'll even create a recents section
housing all of our past prompts and
0:27
images.
0:31
We'll also be able to click on each of
these images to get a full-size version
0:32
to open up in another tab.
0:36
This project is a perfect project to
follow along with to practice some
0:37
core JavaScript concepts such as working
with variables, functions, arrays,
0:41
APIs, and the DOM.
0:46
So if you need a refresher on JavaScript
or are completely new to it, don't worry,
0:47
just click on the JavaScript Basics
course that I have linked down below.
0:51
To focus on the JavaScript and save time,
I have all the CSS pre-written.
0:54
I'll also link below a GitHub gist for
the CSS so that you can just copy and
0:58
paste it directly into your project.
1:02
So if you're ready to get started,
open up your favorite text editor and
1:04
let's start coding.
1:08
Let's start off with what I
have in my project folder.
1:09
We have an index.html file
as well as an app.css file.
1:11
Let's hop into the HTML file and
go over what's in there.
1:16
The UI for this is pretty basic.
1:19
Since we are going to focus on
the JavaScript for this project,
1:21
feel free to pause the video and
copy over this HTML.
1:24
All we have in here is a header element
with an h1 inside with the text of
1:27
AI Image Generator.
1:31
Then we have a section tag
with the class of recents.
1:33
This holds an h2 element with the text of
RECENT as well as an empty ul element.
1:36
After that we have an empty main element.
1:42
And then underneath that,
we have a form element,
1:44
and inside the form we have an input and
a button.
1:47
The input has a type of text,
an ID of prompt, and a placeholder value
1:49
of Generate an image with AI, and
the button just has the text of generate.
1:54
If you're following along, be sure to
include all the markup as I have here so
1:59
that it can work with the CSS and
the JavaScript.
2:02
Next, let's check out the CSS file.
2:05
Feel free to pause and
copy over yourself, or
2:07
an easier solution is to check out the
GitHub gist that I have linked down below.
2:10
It'll take you directly to the CSS code,
2:14
from there you can copy and
paste that directly into your project or
2:16
you can save the file to include in your
project, whichever method you prefer.
2:20
Now with all of that out of the way,
let's create our JavaScript file and
2:24
get to some actual coding.
2:28
Once created, don't forget to link
it to your HTML file at the bottom.
2:30
Once that's linked up, let's start off
by alerting hello world just to make
2:34
sure everything is working as expected.
2:39
Sweet, hello world pops up and
it looks like everything's working.
2:42
I am going to paste in
a couple of variables.
2:45
One is an apiKey and
the other is the apiUrl.
2:48
If you don't know how to get an API key
from OpenAI, let me walk you through it.
2:52
Just head on over to platform.openai.com
and log in or create a free account.
2:56
Once that's done, click on your avatar in
the top right, and in the drop down menu,
3:02
click on View API keys.
3:07
Here you'll be able to see all of your
active API keys as well as an option to
3:08
create a new one.
3:13
Click on Create new secret key and
3:14
a form should pop up asking you
to give your API key a name.
3:16
This is so that you know which
API key is being used for what.
3:19
So you may wanna call yours AI image
generator or something similar.
3:22
Click on the Copy button and
3:26
now you can paste in your API
key back in the JavaScript file.
3:28
I've already created a key, so
3:31
I'm just gonna delete the test
one that I just made.
3:32
Please make sure to create your own
API key and not try to copy mine.
3:35
It won't work for you because I'll be
deleting it after filming this tutorial.
3:39
So grab your API keys and
let's get back to the code.
3:43
Now that we have our API keys, let's make
sure you're using the right API URL.
3:46
You'll want to write
https://api.openai.com/v1/images/generati-
3:50
ons, and you'll wanna make sure
this is written as a string.
3:58
Now that we have that out the way, let's
set up some variables to target the UI
4:05
elements that we just
went over in the HTML.
4:09
We can target our form by writing const
form = document.querySelector and
4:11
selecting our form element.
4:16
Then we can select the form's input
by writing const InputPrompt =
4:18
form.querySelector('input').
4:23
Now let's grab our recents section and
the unordered list.
4:26
We can write const recents =
document.querySelector, and
4:30
we wanna select the section
element with the class of recents.
4:34
Then for the unordered list,
we can just write const recentsUL =
4:39
recents.querySelector, and
we'll target the ul element.
4:43
Now for our main element,
this is pretty easy.
4:48
We'll just write const main =
document.querySelector('main').
4:50
And also, we'll want to hold an array for
our recent images that we generate.
4:55
So we'll write const recent images and
5:00
we'll set that equal to an empty array for
now.
5:02
Now that our variables are set up,
5:05
let's start chipping away
at our image generator.
5:07
As you can tell, we have a form, and
if you don't already know, the default
5:09
behavior for our form is to send off
information and reload the browser.
5:13
We don't want the browser to reload,
so let's tackle this first.
5:17
It's actually pretty simple.
5:20
We'll just set up an EventListener
on the form and then grab the event.
5:21
We'll just take that event and then run
the preventDefault method, which does
5:26
exactly what it says, it prevents
the default behavior from happening, so
5:29
our form should not reload the browser.
5:33
Great, now that the form
isn't reloading the browser,
5:35
what do we wanna do when
the form is submitted though?
5:38
Well, we'll want to generate an image,
right?
5:40
So let's call a function that we
didn't create yet named generateImage.
5:43
We'll set up this function in a bit, but
one thing that I know we'll need when we
5:47
call this function is
the current value of our input.
5:51
So we can just take our inputPrompt
variable, which is our input element, and
5:53
grab its value and set it as
the parameter in our function call.
5:58
Now let's see if this is even working.
6:01
Let's create our generateImage function
and we'll call the argument prompt.
6:02
And for now, let's just
console.log(prompt) to see if it's logging
6:07
out the input's value to the console,
6:11
and if it does,
then we'll know everything's working.
6:13
So I've typed in hello world in the input.
6:16
Now let's check and
see if it's in our console.
6:18
And sweet, it looks like it is.
6:22
Another thing that we wanna do is disable
our form from working once a prompt
6:25
is sent.
6:29
And this is so that we can't send another
prompt before getting back a response from
6:30
our initial prompt.
6:34
So let's remove our console.log
statement in our function and
6:35
let's add a class of disabled
to our form element.
6:39
Remember, these styles are from
the CSS that I've pre-written, so
6:42
make sure to go grab that if
you're trying to follow along.
6:45
Now when we send a prompt,
our form is disabled.
6:47
Great, we'll need to remember
to remove the disabled class
6:50
once a response comes back
from our API call later.
6:53
Another thing that we'll wanna do in this
function is add a display of block to our
6:56
main element, because by default,
it's hidden with a display of none.
6:59
Let's send off a prompt and
see if that works.
7:03
It's pretty subtle, but
we don't have any content to show yet, but
7:05
I can see that our main
element is now visible.
7:09
So let's add some content now.
7:11
What I initially wanna do is just
add some HTML to our main element.
7:13
We can just write main.innerHTML =,
and we'll want to add a paragraph
7:17
tag saying Generating image for,
and then inside of a span tag,
7:22
we'll interpolate our prompt argument and
then close the span and paragraph tags.
7:26
Remember to use back ticks for
this since we are interpolating a value.
7:31
Let's go ahead and prompt our app with
developers drinking coffee and see if it
7:35
adds the new HTML to our main element,
which it looks like it did, so sweet.
7:39
Now I think it's a good time to work on
the OpenAI API to get our image based
7:44
off of our prompt.
7:49
So let's set up a fetch call, and
we'll want to fetch the API URL, and
7:50
we'll also wanna supply the fetch
call with some options.
7:55
The method will be POST, and
we'll want to add in some headers as well.
7:59
The first header is Content-Type, and
we'll set that to application/json.
8:03
The next header we'll wanna add is our API
key, so we can write Authorization, and
8:08
let's supply a set of back ticks for
the value so
8:13
that we can interpolate our API key.
8:16
But we'll need to write the word
Bearer in front of it for it to work.
8:18
Now for the body of our request.
8:22
We'll need to stringify the JSON, so
make sure to write JSON.stringify for
8:24
the contents of our body.
8:28
We'll wanna supply the model,
8:30
which in this case we'll be using
ChatGPT's image-alpha-001 model.
8:32
We'll supply the prompt by using our
prompt argument for our function, which,
8:37
if you remember,
is the input prompt's value.
8:41
We can also request
a certain amount of images.
8:44
For this tutorial,
we'll just use one image, but
8:47
feel free to make your own app and add
more images generated per your request.
8:49
We'll also want to set the size of our
image, which in this case we'll use 512 by
8:53
512x512, and
this will be the size in pixels.
8:58
Now for the response format,
we'll just want to set that as url so
9:01
that we can grab the URL and
add it to our UI.
9:06
By the way, if you're interested and
wondering about these options that we've
9:09
supplied our request body, be sure to
check out the official documentation.
9:13
You'll wanna click on API reference
in the top navigation, and
9:16
then on the left sidebar, you'll want
to click on Create image under Images.
9:20
Here you'll be able to find a list of
some of the options that we've used.
9:24
But let's get back to the code, and
now that we have our API call set up,
9:28
let's handle what we wanna do with
the response when we get it back.
9:31
Since fetch is promise-based,
we can chain on a .then method.
9:35
So we'll get back our response and we'll
want to convert that response to JSON
9:39
format, and then we'll get back some data.
9:43
What do we wanna do with this data?
9:46
Well, let's handle adding
the image to the UI.
9:48
So we can call a function that
we haven't created yet, but
9:51
we will in just a bit, and
we'll name it handleImage.
9:54
And we'll take the data that we get
back from our API call as a parameter.
9:57
Lastly, we'll want to catch any errors,
so we'll call another function
10:01
named handleError and pass in the error
in our catch method as a parameter.
10:06
These functions won't really do anything
if we don't actually create them, so
10:11
let's go and create them now.
10:15
I'll create a function declaration for
handleImage, and
10:17
I'll also create a function
declaration for handleError.
10:21
Since handleError is super quick and
easy, let's knock that one out first.
10:24
We'll write msg as our argument,
and in this function,
10:28
we'll just want to make sure our
main element gets a display of
10:31
block since we'll want to write
our error message inside of it.
10:35
Then we'll just want to set the innerHTML
to a paragraph tag with a class of error,
10:38
and the text of There was
an error with your request.
10:44
Then after a space and inside some span
tags, we'll interpolate our msg argument,
10:48
and that should be everything that we
need for our handleError function.
10:53
So now let's work on our
handleImage function.
10:57
Since we're using data as a parameter,
let's set our argument as img.
10:59
For now, let's console.log(img) just
to see what data we're getting back.
11:04
Let's open up the console, and
I'll type in developers into our input and
11:08
hit Enter.
11:13
After some time, it looks like we get back
an object that holds an array named data.
11:13
And the first item in our data
array is a property named url,
11:18
which holds the generated image's URL.
11:22
So now that we know how to get our URL,
let's change the parameter in
11:25
our function call from data to
data.data at the first index .url.
11:30
And now if we hit Save, I'll type
in developers again and hit Enter.
11:34
And in the console, sweet,
we just see the URL that was generated.
11:39
And if we click on it,
we see our image that was created.
11:43
Awesome, let's add another parameter
to our handleImage function.
11:46
This will be our prompt.
11:51
Now back in our handleImage function
declaration, let's remove the console.log
11:53
statement and replace it with setting our
main element with a display of block, and
11:57
we'll also wanna add in some innerHTML.
12:02
This HTML will replace
the previously added HTML, so
12:04
we'll want a paragraph
tag with just the prompt.
12:08
And then we'll want an image tag, and
we'll set the alt attribute text of
12:11
Generated Image of, and then we'll
interpolate our prompt argument.
12:16
As for the source attribute,
we'll interpolate our img argument,
12:20
which holds the URL for
our generated image.
12:24
Now, in order for this to work, we also
need to add in our second argument for
12:26
the prompt, which we'll just call prompt.
12:30
Believe it or not,
12:33
that is actually all we'll need to do
to generate our images into the UI.
12:34
So let's hit Save, and I'll type in
developers into the input and hit Send.
12:37
After some time,
we get our new image showing in
12:41
the UI as well as the prompt
that we supplied the API.
12:44
Sweet, there are a couple of other things
that I think we should do before tackling
12:47
our recents section though,
like emptying our inputs value and
12:51
removing the disabled class from our form.
12:54
Because once we get back
that data from the API,
12:57
we would like our users to be
able to add in another prompt.
12:59
So now if I go back and
type in developers and hit Enter,
13:02
after we get back our
newly generated image,
13:04
we see that our input is cleared and the
disabled class was removed from the form.
13:07
Awesome, now to make sure that
it works with a second prompt,
13:11
let's type in something new like cats and
see if everything still works as expected.
13:14
Sweet, now I have an image of cats and
nothing seems broken.
13:19
So it feels like a great time to
start working on our recents feature.
13:22
We'll want to add whatever our current
image is to our recents section, so
13:26
this sounds like a great job for
a function.
13:29
So we'll call a function that we haven't
created yet called handleRecents, and
13:32
we'll want to call this at the end
of our handleImage function.
13:36
This function will take in the image as
well as the prompt as parameters just
13:39
like our handleImage function does.
13:43
So now that we're calling the function,
let's go ahead and
13:45
actually create this function.
13:48
We can do this after our
handleImage function.
13:49
Make sure to put something in for
the image and prompt arguments,
13:52
and let's get started with the logic for
this function.
13:55
The first thing I wanna do
is show the recents section.
13:58
In the CSS, it's being hidden, so we'll
add a display of block to this element.
14:01
Before we get too deep, let's test
to make sure that this works and
14:05
everything is connected.
14:09
I'll type in cats and
hit Enter, and awesome.
14:10
Once the image loads,
we see our recents section appear.
14:13
We'll want a way to keep track of
the image and its prompt, right?
14:16
So let's use our recentImages
array that we set up earlier.
14:20
Each time we get a new image back from the
API, let's push a new object to our array.
14:24
We'll want an image property
that holds the image's URL,
14:29
as well as a prompt property
that holds our supplied prompt.
14:32
Once we have this, we'll want to add every
item that's in our array to the UI, right?
14:36
So let's loop over our recentImages array,
and
14:41
for each image, we'll want to
add some HTML to our recentsUL.
14:43
Each time we add some HTML,
we'll wanna add a new list item.
14:47
So inside of that list item,
we'll want a link, and this is so
14:51
that we can link our image to open up
in a full-size version in another tab.
14:54
So we'll wanna use the href attribute
as well as the target attribute.
14:58
We'll also include a title attribute, and
if you're unfamiliar with this attribute,
15:02
it essentially shows a tool tip-like
popup when hovering the element with
15:06
whatever text you supply as the value.
15:10
Inside our link we'll want our image,
and for the alt attribute,
15:12
we'll just write Generated image for,
and then interpolate the prompt value.
15:15
Now we'll add in our image argument for
the source attribute.
15:20
But remember, since we're using the
forEach() method to loop over our array,
15:23
we set our iterator variable to image, so
15:28
we'll need to prefix
our values with image.
15:30
So image.image and then image.prompt.
15:32
If you're not familiar with how
the forEach() method works,
15:36
I'll link below a video where I dive
deep into how to use this array method.
15:39
But now back to our link,
for the href value,
15:43
we'll want to use our image again,
so we'll write image.image.
15:46
And for the target,
we'll want to write _blank.
15:50
This will allow our link
to open up in a new tab.
15:53
And for the title, we'll just want our
prompt, so we can write image.prompt.
15:56
Honestly, I feel like image is
probably not the best iterator name,
16:00
and since you can name this anything
you'd like, it's best to be descriptive.
16:03
I'm going to change this to recent, so
16:07
let's update all of the other
instances real quick.
16:10
Great, now let's see if this is
all working, fingers crossed.
16:14
I'll type in cats on a fence,
and I'm great.
16:17
Once our image loads, we also see
our image in the recent section.
16:21
Hovering over it shows the title, too.
16:25
Now let's click on it and see if it opens
up a full-size version in another tab, and
16:28
awesome, it does.
16:32
Let's type in something else and
see if it's all still working.
16:33
I'll type in a dog with a red hat,
and after some time, we get our image.
16:37
But we're seeing a bug in our UI.
16:42
It looks like it added our newest image to
the end instead of the beginning, as well
16:44
as doubling our first image, so let's see
if we can't figure out what happened.
16:49
So taking a look at the code, it's
pretty easy to see what we need to do.
16:54
If you notice,
16:57
we are adding to the HTML that's already
in the UI each time we generate an image.
16:58
We're doing this from the array,
so naturally,
17:03
it's going to add items
that are already in the UI.
17:05
So to fix this, we'll just set
the innerHTML of our recentsUL to
17:08
nothing just before we build to the UI.
17:12
But now the trickier part of making
sure our newest image is first in
17:15
our recents section.
17:19
Before we push a new item
to our recentImages array,
17:20
let's reverse the array.
17:24
So what we're doing is
reversing the array,
17:25
then we're pushing our newest item to it.
17:28
And then what we can do is reverse it
again just before we iterate over each
17:31
item to add to the UI.
17:35
So this should be everything we need to
get our recents section working the way
17:36
that we want it to.
17:40
So I'll hit Save and hop back into our
generator and type in coffee beans.
17:41
I'll let that generate an image, and
17:46
then I'll type in something
new like red party hat.
17:49
And once that loads, we see that it's no
longer doubling our recent images and
17:53
it's in the correct order.
17:57
For good measure,
let's try one more prompt.
17:59
I'll write in something like Harry Potter
with tattoos, and after it loads,
18:01
we see everything still
works perfectly fine,
18:06
though that really doesn't look
very much like Harry Potter.
18:08
I guess you never really know
what you get with AI, but
18:12
that's a wrap on this AI image generator.
18:15
I hope you found this tutorial helpful,
and
18:17
you now have the knowledge to build
some pretty awesome AI image apps.
18:19
So hope to see some cool
stuff floating around.
18:23
Until next time, have fun,
and happy coding.
18:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up