WEBVTT 00:00.000 --> 00:01.770 Instructor: Hey, so OpenAI released 00:01.770 --> 00:04.650 canvas in October 3rd, 2024. 00:04.650 --> 00:07.170 I believe their goal is to compete against directly 00:07.170 --> 00:10.710 with Claude, which provides an interactive coding editor, 00:10.710 --> 00:12.450 which is a lot more collaborative 00:12.450 --> 00:15.270 than trying to get everything done in the chat window. 00:15.270 --> 00:18.120 canvas is a great way to write code 00:18.120 --> 00:22.230 and also to do article generation or content creation. 00:22.230 --> 00:23.730 The OpenAI team decided 00:23.730 --> 00:25.680 to come up with a different user interface 00:25.680 --> 00:27.090 for how you can write code 00:27.090 --> 00:29.430 or how you can generate these blog posts 00:29.430 --> 00:30.840 and they called it canvas. 00:30.840 --> 00:33.030 And basically, it provides a bunch of shortcuts. 00:33.030 --> 00:35.730 So for writing, it suggests like edits 00:35.730 --> 00:38.220 that you can adjust the length, change the reading level. 00:38.220 --> 00:40.830 You can add a final polish or add emojis. 00:40.830 --> 00:42.300 And this is what an example of it is, 00:42.300 --> 00:44.610 where you've got like this kind of full page 00:44.610 --> 00:47.520 where you can edit a specific artifact, 00:47.520 --> 00:49.620 which is very similar to a Claude artifact, right? 00:49.620 --> 00:51.990 So it's a canvas and you can increase 00:51.990 --> 00:53.400 or decrease the reading level. 00:53.400 --> 00:56.070 And they've also got the ability to do this with canvas. 00:56.070 --> 00:57.930 So we can add specific bits 00:57.930 --> 01:01.650 and these additional methods or add in this type of stuff. 01:01.650 --> 01:03.060 And basically what they're trying to do 01:03.060 --> 01:05.460 is come after the coding editor market 01:05.460 --> 01:07.020 where you've got an interactive canvas 01:07.020 --> 01:08.610 that you could then share with people 01:08.610 --> 01:10.050 and you could do things like code review 01:10.050 --> 01:11.940 or port to a different language or fix bugs, 01:11.940 --> 01:13.650 add logs or add comments. 01:13.650 --> 01:15.390 So canvas is a different way 01:15.390 --> 01:18.570 of writing code directly inside of ChatGPT. 01:18.570 --> 01:19.650 To turn on canvas, 01:19.650 --> 01:20.640 all you need to do is go 01:20.640 --> 01:24.930 into the top left and go to GPT-4o with canvas, 01:24.930 --> 01:26.490 and this is in beta at the moment. 01:26.490 --> 01:27.840 And then you can say, for example, 01:27.840 --> 01:32.760 write a web server in Node.js. 01:32.760 --> 01:35.280 And what it will do is it will actually generate 01:35.280 --> 01:37.050 an artifact and it looks slightly different. 01:37.050 --> 01:39.660 So you can see here, you've got this chat window 01:39.660 --> 01:41.010 on the left-hand side. 01:41.010 --> 01:42.450 And also if we have a look here, 01:42.450 --> 01:43.590 we've got code reviews, 01:43.590 --> 01:45.990 port to a language, fix bugs, add logs, and comments 01:45.990 --> 01:47.070 like we saw earlier. 01:47.070 --> 01:48.480 So for example, I could port this 01:48.480 --> 01:51.240 to TypeScript and then I'm just gonna click 01:51.240 --> 01:53.760 on this button and then it's gonna then know 01:53.760 --> 01:56.400 that I want this web server to be written in TypeScript. 01:56.400 --> 01:57.720 And I can also chat with it here. 01:57.720 --> 02:01.680 So I can say, I want you to create a couple of endpoints. 02:01.680 --> 02:05.520 So it's basically a full-screen editor experience 02:05.520 --> 02:07.710 where we can basically use a canvas 02:07.710 --> 02:09.540 to do a specific task, okay? 02:09.540 --> 02:10.710 And you can still interact 02:10.710 --> 02:12.480 with the chat on the left-hand side, 02:12.480 --> 02:14.040 and you've got these keyboard shortcuts. 02:14.040 --> 02:16.260 So we could say fix bugs or add logs. 02:16.260 --> 02:18.030 So let's go and add logs, for example. 02:18.030 --> 02:19.650 And then it's just basically said, 02:19.650 --> 02:21.660 I want you to add some endpoints. 02:21.660 --> 02:23.250 And now we're adding some logging as well. 02:23.250 --> 02:24.930 So we've got some console.logs 02:24.930 --> 02:28.890 which show what's gonna happen for those specific endpoints. 02:28.890 --> 02:30.240 So that, yeah, so that's canvas. 02:30.240 --> 02:32.070 And obviously, if we close this down, 02:32.070 --> 02:34.350 you'll see that it falls in here. 02:34.350 --> 02:36.510 And then we could also generate a different canvas. 02:36.510 --> 02:40.380 So I could say, now I want you 02:40.380 --> 02:44.670 to create a blog post on the benefits 02:44.670 --> 02:47.760 of using Node.js versus, I don't know, 02:47.760 --> 02:48.593 we'll say PHP. 02:51.539 --> 02:54.750 And now it's generated a different type of canvas, okay? 02:54.750 --> 02:57.990 And in this canvas, you have the ability to, 02:57.990 --> 02:59.460 if we have a look at the keyboard shortcuts 02:59.460 --> 03:01.260 after this is generated, 03:01.260 --> 03:03.300 you'll see that these keyboard shortcuts, 03:03.300 --> 03:04.890 you can tell it to suggest edits 03:04.890 --> 03:07.890 where it's actually commenting specifically on the piece. 03:07.890 --> 03:09.090 So it's very collaborative 03:09.090 --> 03:11.550 that we can apply these edits directly. 03:11.550 --> 03:13.560 And also if we have a look, we can do things like, 03:13.560 --> 03:14.393 we can adjust the length, 03:14.393 --> 03:16.380 so we can make it longer 03:16.380 --> 03:18.060 or we can make it shorter 03:18.060 --> 03:20.130 and we can do things like adjust the reading level, 03:20.130 --> 03:23.430 so you can make it kindergarten versus graduate school. 03:23.430 --> 03:25.830 And so there's lots of different things that we can do. 03:25.830 --> 03:28.140 We can also add a final polish or add emojis. 03:28.140 --> 03:29.520 Just like in the previous coding editor, 03:29.520 --> 03:34.520 we can also say, I want you to continue with the blog post. 03:35.340 --> 03:37.590 And it's able to take chat commands. 03:37.590 --> 03:39.390 But you can see here it's actually 03:39.390 --> 03:40.740 regeneration from the top down. 03:40.740 --> 03:42.930 So this is a potential limitation, 03:42.930 --> 03:45.120 but it should then make more information. 03:45.120 --> 03:46.740 So you can see here we've got a little bit more 03:46.740 --> 03:48.090 of a conclusion. 03:48.090 --> 03:49.530 We can also tell it to rewrite it. 03:49.530 --> 03:50.790 We can apply these changes. 03:50.790 --> 03:54.120 And also, the other things that we can do is in the top, 03:54.120 --> 03:56.100 we can also copy it as well. 03:56.100 --> 03:59.220 And we can also see the changes that have happened. 03:59.220 --> 04:02.700 And we can go back and go through the change history. 04:02.700 --> 04:05.100 So you've got some version control in there. 04:05.100 --> 04:08.100 And you can also click on Copy and copy that. 04:08.100 --> 04:11.400 If we now go back, you can now see we've got two canvases. 04:11.400 --> 04:13.920 We've got Node.js, PHP benefits, 04:13.920 --> 04:16.140 and I can also dive back into this canvas. 04:16.140 --> 04:18.600 So they are creating these kind of like artifacts. 04:18.600 --> 04:20.400 And on the top, we can see we've got 04:20.400 --> 04:23.220 these different canvases that we can go into at any time. 04:23.220 --> 04:24.480 And then if I go back 04:24.480 --> 04:27.360 and away from this, then we can see I've got three canvases, 04:27.360 --> 04:30.270 which are basically very similar to Claude artifacts. 04:30.270 --> 04:32.160 So hopefully this gives you a good understanding 04:32.160 --> 04:35.070 of what a canvas is and how you might decide to use that. 04:35.070 --> 04:36.630 It's more of a collaborative tool. 04:36.630 --> 04:39.090 I see OpenAI trying to come 04:39.090 --> 04:40.980 after the coding editor, 04:40.980 --> 04:42.600 the writing editor experience 04:42.600 --> 04:44.400 directly inside of their platform. 04:44.400 --> 04:45.930 I think that's the play here. 04:45.930 --> 04:49.050 And I can see that they could maybe make this multiplayer 04:49.050 --> 04:51.060 so that you could add all these friends 04:51.060 --> 04:53.550 or these colleagues and you could communicate 04:53.550 --> 04:55.410 and work on a piece of code 04:55.410 --> 04:59.013 or work on a piece of content collaboratively using AI.