Instructor: Hey, so OpenAI released
canvas in October 3rd, 2024.
I believe their goal is to compete against directly
with Claude, which provides an interactive coding editor,
which is a lot more collaborative
than trying to get everything done in the chat window.
canvas is a great way to write code
and also to do article generation or content creation.
The OpenAI team decided
to come up with a different user interface
for how you can write code
or how you can generate these blog posts
and they called it canvas.
And basically, it provides a bunch of shortcuts.
So for writing, it suggests like edits
that you can adjust the length, change the reading level.
You can add a final polish or add emojis.
And this is what an example of it is,
where you've got like this kind of full page
where you can edit a specific artifact,
which is very similar to a Claude artifact, right?
So it's a canvas and you can increase
or decrease the reading level.
And they've also got the ability to do this with canvas.
So we can add specific bits
and these additional methods or add in this type of stuff.
And basically what they're trying to do
is come after the coding editor market
where you've got an interactive canvas
that you could then share with people
and you could do things like code review
or port to a different language or fix bugs,
add logs or add comments.
So canvas is a different way
of writing code directly inside of ChatGPT.
To turn on canvas,
all you need to do is go
into the top left and go to GPT-4o with canvas,
and this is in beta at the moment.
And then you can say, for example,
write a web server in Node.js.
And what it will do is it will actually generate
an artifact and it looks slightly different.
So you can see here, you've got this chat window
on the left-hand side.
And also if we have a look here,
we've got code reviews,
port to a language, fix bugs, add logs, and comments
like we saw earlier.
So for example, I could port this
to TypeScript and then I'm just gonna click
on this button and then it's gonna then know
that I want this web server to be written in TypeScript.
And I can also chat with it here.
So I can say, I want you to create a couple of endpoints.
So it's basically a full-screen editor experience
where we can basically use a canvas
to do a specific task, okay?
And you can still interact
with the chat on the left-hand side,
and you've got these keyboard shortcuts.
So we could say fix bugs or add logs.
So let's go and add logs, for example.
And then it's just basically said,
I want you to add some endpoints.
And now we're adding some logging as well.
So we've got some console.logs
which show what's gonna happen for those specific endpoints.
So that, yeah, so that's canvas.
And obviously, if we close this down,
you'll see that it falls in here.
And then we could also generate a different canvas.
So I could say, now I want you
to create a blog post on the benefits
of using Node.js versus, I don't know,
we'll say PHP.
And now it's generated a different type of canvas, okay?
And in this canvas, you have the ability to,
if we have a look at the keyboard shortcuts
after this is generated,
you'll see that these keyboard shortcuts,
you can tell it to suggest edits
where it's actually commenting specifically on the piece.
So it's very collaborative
that we can apply these edits directly.
And also if we have a look, we can do things like,
we can adjust the length,
so we can make it longer
or we can make it shorter
and we can do things like adjust the reading level,
so you can make it kindergarten versus graduate school.
And so there's lots of different things that we can do.
We can also add a final polish or add emojis.
Just like in the previous coding editor,
we can also say, I want you to continue with the blog post.
And it's able to take chat commands.
But you can see here it's actually
regeneration from the top down.
So this is a potential limitation,
but it should then make more information.
So you can see here we've got a little bit more
of a conclusion.
We can also tell it to rewrite it.
We can apply these changes.
And also, the other things that we can do is in the top,
we can also copy it as well.
And we can also see the changes that have happened.
And we can go back and go through the change history.
So you've got some version control in there.
And you can also click on Copy and copy that.
If we now go back, you can now see we've got two canvases.
We've got Node.js, PHP benefits,
and I can also dive back into this canvas.
So they are creating these kind of like artifacts.
And on the top, we can see we've got
these different canvases that we can go into at any time.
And then if I go back
and away from this, then we can see I've got three canvases,
which are basically very similar to Claude artifacts.
So hopefully this gives you a good understanding
of what a canvas is and how you might decide to use that.
It's more of a collaborative tool.
I see OpenAI trying to come
after the coding editor,
the writing editor experience
directly inside of their platform.
I think that's the play here.
And I can see that they could maybe make this multiplayer
so that you could add all these friends
or these colleagues and you could communicate
and work on a piece of code
or work on a piece of content collaboratively using AI.