WEBVTT 00:00.440 --> 00:01.720 Welcome to this tutorial. 00:01.920 --> 00:07.920 Today I will show you exactly how you can create your very own AI powered image generation app like 00:07.920 --> 00:13.160 this one to generate beautiful images using N810 which includes just three nodes. 00:13.680 --> 00:20.480 It's very simple to set up, and the newest OpenAI's image generator model called GPT image one, which 00:20.480 --> 00:24.120 is currently the best model for generating detailed images with text. 00:24.480 --> 00:28.680 So behind the scenes we are using this model, which is also part of ChatGPT. 00:29.040 --> 00:31.880 So basically you can use it inside ChatGPT and people love it. 00:32.360 --> 00:39.120 It's incredibly good at creating sharp, detailed images even when you prompt includes a text. 00:39.680 --> 00:45.320 So text is something most text to image models and tools powered by Llms struggle with. 00:45.720 --> 00:52.120 We will build our user interface so the front end for our app with loveable, which is an AI powered 00:52.120 --> 00:52.920 appbuilder. 00:52.920 --> 00:55.240 So you don't need to write a single line of code. 00:55.800 --> 01:01.160 And we know about a year ago you would need to know how to code to create this kind of applications. 01:01.160 --> 01:01.230 Cases. 01:01.390 --> 01:04.710 Nowadays, you can build apps without writing a single line of code. 01:04.750 --> 01:08.910 You will help problems and tools like Copilot and tools like lovable. 01:09.070 --> 01:09.750 So these are. 01:09.750 --> 01:15.590 Building platform lets anyone create fully functional web or mobile applications just by describing 01:15.590 --> 01:17.070 what they want in natural language. 01:17.070 --> 01:19.910 So these are examples of images I created using this app. 01:20.150 --> 01:22.110 You have ultra realistic samurai. 01:23.270 --> 01:24.030 Another one. 01:26.670 --> 01:30.990 And as I said this model is really good in creating images with text. 01:31.030 --> 01:32.390 So let me show you how it works. 01:32.830 --> 01:39.590 I'm going to enter a prompt like this a frog wearing sunglasses and floating on a pizza slice in the 01:39.590 --> 01:40.270 swimming pool. 01:40.870 --> 01:42.270 And now he generate image. 01:43.190 --> 01:47.310 Now let's go to our workflow and check executions. 01:49.790 --> 01:51.550 As you can see, execution is running. 01:51.550 --> 01:55.150 Now let's go back to our app and see the result. 01:57.550 --> 01:59.390 As you can see, it's really, really nice. 02:00.110 --> 02:05.710 So yeah, you can easily publish this app just by clicking one button and share the link with your friends 02:05.710 --> 02:07.390 so they can use your app. 02:07.630 --> 02:08.750 So it's just amazing. 02:09.110 --> 02:14.870 This app even has a bunch of cool features built in, so you can see the image shows up after you click 02:14.870 --> 02:16.230 the Generate Image button. 02:16.830 --> 02:22.710 It also saves you recent generations down here so you can look back at what you made. 02:23.590 --> 02:29.470 Here you can see the prompt and if you are not sure what to type, it gives you some fun prompt ideas 02:29.750 --> 02:31.670 so you can just click on it and try it out. 02:33.030 --> 02:35.950 And it's super, super easy to use and the results are pretty awesome. 02:36.230 --> 02:43.750 So yes, now actually let me show you how you can build your own AI image generation app using the best 02:44.110 --> 02:46.950 text to image model available on the market right now. 02:46.950 --> 02:49.430 So OpenAI's GPT image one. 02:49.470 --> 02:51.230 Let's jump into N810 and start building. 02:51.270 --> 02:53.190 All right so let's create a brand new workflow. 02:53.190 --> 02:54.270 So create workflow. 02:55.470 --> 02:57.030 Now let's add a trigger node. 02:57.750 --> 03:02.270 So we'll be using trigger node just for testing. 03:02.270 --> 03:04.660 Later I will be using webhook. 03:06.140 --> 03:07.700 Now let's add OpenAI node. 03:08.740 --> 03:09.820 So search OpenAI. 03:13.420 --> 03:15.380 And we want to generate an image. 03:17.540 --> 03:18.300 Alright great. 03:18.740 --> 03:21.580 Now make sure you are connected to your OpenAI account. 03:22.820 --> 03:30.100 Now if for any reason you don't have an OpenAI account and you don't know how to create API keys, just 03:30.100 --> 03:36.900 go to the How to Setup credentials section and you will find the dedicated tutorial on how to on how 03:36.900 --> 03:38.500 to connect to OpenAI models. 03:38.980 --> 03:43.460 You just simply need to create credentials and then provide API key and then save. 03:43.700 --> 03:51.060 Now as a resource with image, we want to generate an image and we want to use GPT image one. 03:51.100 --> 03:56.420 Now if you don't see this model just make sure your version is up to date. 03:56.980 --> 03:58.500 So currently I'm on. 04:02.660 --> 04:03.450 One second. 04:07.290 --> 04:10.970 I'm on version 1.91.3. 04:11.170 --> 04:16.450 So this is the latest version and the newest GPT image. 04:16.450 --> 04:22.050 One model comes with the last update, so make sure you are on the latest version. 04:22.090 --> 04:22.530 Alright great. 04:22.570 --> 04:23.890 Now let's go back to our workflow. 04:33.570 --> 04:38.010 Now let's enter some very simple prompt such as Penguin with a backpack. 04:39.090 --> 04:40.410 And now let's test the step. 04:44.490 --> 04:47.090 Now the first time you run this you might get an error. 04:48.010 --> 04:48.410 No worries. 04:48.450 --> 04:50.890 It just means you need to verify your OpenAI account. 04:51.370 --> 04:55.050 So to fix it, you need to go to your OpenAI dashboard. 04:56.250 --> 04:59.850 So I'm going to show you go to OpenAI platform. 05:11.570 --> 05:16.610 So this is the same place from you get your API keys to use the models. 05:17.730 --> 05:27.330 As you can see API reference and here you profile API keys section to generate API keys. 05:28.570 --> 05:30.330 So you should be already familiar with this page. 05:31.250 --> 05:32.370 Now go to settings. 05:34.170 --> 05:42.010 And here you need to verify your identity just by simply scanning a QR code and by providing some type 05:42.010 --> 05:42.650 of ID. 05:43.010 --> 05:44.010 It's super simple. 05:44.250 --> 05:47.970 You don't need to have a company and there is no any cost involved. 05:47.970 --> 05:49.250 It takes about two minutes. 05:50.050 --> 05:52.210 Now let's go back to our workflow. 05:54.970 --> 05:56.010 And let's see the result. 05:57.330 --> 06:00.050 So remember the prompt is Penguin with a backpack. 06:03.690 --> 06:03.890 Yeah. 06:03.890 --> 06:04.400 It's amazing. 06:04.400 --> 06:04.680 You just. 06:04.720 --> 06:07.120 It's just incredibly good. 06:07.160 --> 06:07.480 Alright. 06:07.480 --> 06:08.040 Perfect. 06:08.080 --> 06:14.480 Not that we tested the connection to OpenAI's models, and we are able to use the GPT one model. 06:14.520 --> 06:15.920 Let's tweak two more options. 06:16.520 --> 06:17.680 So let's add option. 06:18.520 --> 06:19.760 And here we have a quality. 06:19.760 --> 06:22.200 So it affects image clarity and cost. 06:22.720 --> 06:24.840 So you can change it to. 06:27.160 --> 06:27.880 Low and high. 06:31.360 --> 06:32.920 And you also have a resolution. 06:33.560 --> 06:35.480 So at option resolution. 06:37.000 --> 06:40.920 And you can change it for the thumbnails or some portraits. 06:42.400 --> 06:43.240 Alright great. 06:45.080 --> 06:46.920 Now let's actually make it more production ready. 06:47.400 --> 06:54.360 So the next thing we need to do we need to remove the test workflow trigger. 06:56.080 --> 06:57.160 So right. 07:00.360 --> 07:01.520 Now let's add a webhook. 07:06.470 --> 07:07.270 I like it. 07:08.910 --> 07:13.150 So we are going to use production ready URL to connect to the web app. 07:14.070 --> 07:17.030 We need to switch HTTP method to post. 07:19.310 --> 07:20.510 As path let's say. 07:20.670 --> 07:22.110 You can type whatever you want. 07:22.630 --> 07:24.790 So let's say image. 07:26.030 --> 07:30.510 We don't want to change authentication for the sake of this tutorial. 07:30.510 --> 07:32.430 We don't want to change authentication. 07:33.830 --> 07:39.510 And in the response field let's change immediately to respond to app node. 07:39.870 --> 07:45.750 So we will be able to send the results to generate back to label. 07:45.750 --> 07:56.950 We will make HTTP request to our workflow using our webhook node using this URL and then using this 07:56.950 --> 07:57.230 node. 07:57.230 --> 08:04.430 So respond to webhook node will be able to send the generated result back to our app. 08:04.430 --> 08:05.710 So let's select this option. 08:06.830 --> 08:07.190 All right. 08:07.190 --> 08:07.750 Perfect. 08:10.310 --> 08:11.670 Now let's connect this to nodes. 08:13.150 --> 08:15.350 Now let's add response to node. 08:16.030 --> 08:16.870 So search for webhook. 08:16.870 --> 08:21.710 Again respond to webhook which returns data for webhook. 08:24.190 --> 08:26.630 And now in response with field. 08:27.550 --> 08:32.230 So the data that should be returned we want to change it to binary file. 08:33.350 --> 08:35.910 So we want to respond with incoming file binary data. 08:37.110 --> 08:37.430 All right. 08:37.430 --> 08:38.030 Perfect. 08:38.910 --> 08:39.670 Now let's save it. 08:39.670 --> 08:40.030 All right. 08:40.030 --> 08:43.550 So let's pause for a second and look at what we have built so far. 08:43.590 --> 08:46.870 So on the left we've got our webhook node. 08:46.870 --> 08:51.190 So this is what listens for incoming requests from our app. 08:51.190 --> 08:53.870 So when we enter the prompt it will listen. 08:53.870 --> 08:57.510 And waiting for this action in the middle we've got OpenAI node. 08:57.510 --> 09:02.870 So it takes the prompt and generates an image using OpenAI's image model. 09:02.870 --> 09:10.700 And finally we've got the response to node, which sends that image back to the app so it can display 09:10.700 --> 09:11.500 it to the user. 09:11.540 --> 09:16.220 So far, we have connected our workflow to this powerful model and the webhook is ready to receive data. 09:16.540 --> 09:20.820 So that means you can now copy the webhook URL and use it and use it in lovable. 09:20.860 --> 09:21.140 All right. 09:21.140 --> 09:27.740 So now we want to make sure that the prompt is actually coming from the app and not hardcoded inside 09:27.740 --> 09:28.460 the workflow. 09:28.900 --> 09:32.980 So to simulate what lovable will send we will test the webhook manually. 09:33.300 --> 09:34.980 So just open the webhook node. 09:37.540 --> 09:39.380 Go to the test editor. 09:40.500 --> 09:44.020 Now let's remove what's inside between these two square brackets. 09:44.500 --> 09:46.100 So remove this part of the code. 09:47.620 --> 09:51.940 Now let's add opening curly brace and closing curly brace. 09:53.380 --> 09:54.260 And inside. 09:56.420 --> 09:59.820 Let's add the property called body. 10:05.380 --> 10:06.020 Colon. 10:06.020 --> 10:06.050 Lon. 10:08.970 --> 10:10.530 Now let's add another opening. 10:10.530 --> 10:10.850 Curly. 10:10.850 --> 10:11.330 Brace. 10:14.810 --> 10:15.490 Enter. 10:16.090 --> 10:20.490 And now let's pass another property called prompt. 10:30.090 --> 10:32.090 And here you can pass whatever prompt you want. 10:34.650 --> 10:37.850 So I'm going with American. 10:39.930 --> 10:44.530 DJ at a rooftop party. 10:52.490 --> 10:54.850 You also need to add closing curly brace. 10:58.250 --> 11:00.330 So now this is the JSON object. 11:00.730 --> 11:01.730 This is our key. 11:01.730 --> 11:02.850 And this is our value. 11:03.610 --> 11:08.610 So this is exactly how the app will send user input to our workflow. 11:10.890 --> 11:11.770 Let it save. 11:13.370 --> 11:13.930 Perfect. 11:16.250 --> 11:16.930 And save. 11:18.090 --> 11:20.330 Now jump over to the OpenAI node. 11:23.410 --> 11:24.410 In the prompt. 11:24.530 --> 11:27.170 Let's switch over to expression node. 11:29.010 --> 11:30.290 Let's remove this prompt. 11:32.370 --> 11:34.570 And let's add the dynamic variable. 11:37.650 --> 11:38.290 Perfect. 11:39.850 --> 11:45.570 So what this does is tells the node to pull the prompt from the incoming webhook data. 11:46.250 --> 11:47.450 So it's dynamic now. 11:47.890 --> 11:48.370 Cool. 11:49.130 --> 11:50.730 So now let's test workflow. 11:51.730 --> 11:53.570 And everything should be set up properly. 11:53.890 --> 11:59.050 You should see it run through the flow and return a fresh image based on that prompt. 11:59.090 --> 11:59.690 Alright, perfect. 11:59.690 --> 12:00.650 Let's see the result. 12:04.610 --> 12:05.410 It's so funny. 12:05.450 --> 12:06.170 It's so funny. 12:06.370 --> 12:07.410 All right, let's move on. 12:11.520 --> 12:12.160 Five. 12:12.200 --> 12:18.480 Now, when you open the OpenAI node, you can see that the model generated the image. 12:19.720 --> 12:20.760 So you can always do it here. 12:20.760 --> 12:24.600 You can also download it right here just by clicking on this button. 12:25.320 --> 12:31.600 And if you open the webhook node we can see that the image is passed back via the webhook. 12:34.240 --> 12:34.600 All right. 12:34.600 --> 12:35.040 Great. 12:35.440 --> 12:41.280 Just to let you know, I'm going to add this simple JSON object in the resource section. 12:41.280 --> 12:43.520 So you can just copy and paste it. 12:45.280 --> 12:45.640 All right. 12:45.640 --> 12:45.880 Great. 12:45.880 --> 12:50.160 So now we are ready to connect our workflow to the web app. 12:50.400 --> 12:56.600 So go to the label dev create an account. 12:56.760 --> 12:59.000 And then you will see interface like this one. 12:59.200 --> 13:00.720 So here you can enter your prompt. 13:01.080 --> 13:01.320 Yes. 13:01.320 --> 13:03.640 So lovable is relatively new. 13:03.680 --> 13:05.120 No code appeared there. 13:05.480 --> 13:11.230 Kind of like cursor A windsurf board v0. 13:11.790 --> 13:15.870 So just describe the app you want and it builds it for you using AI. 13:16.190 --> 13:17.670 All right so here is the prompt. 13:18.150 --> 13:20.910 I will use to generate our front end. 13:21.270 --> 13:24.070 It's the same prompt I used to create my app. 13:24.670 --> 13:27.630 So let's create an AI powered image generator app. 13:28.990 --> 13:33.270 So this prompt tells lovable exactly what kind of app we want. 13:33.830 --> 13:39.230 So we are asking it to build a simple image generator with a text input and a button. 13:39.590 --> 13:42.830 So the interface should be clean, modern and visually appealing. 13:43.070 --> 13:48.270 Users should be able to type in a description of the image they want, and click a button to generate 13:48.270 --> 13:48.550 it. 13:51.390 --> 13:54.870 To generate the image, send a Post request to this endpoint. 13:55.830 --> 13:59.550 So we give it the webhook URL so it knows where to send the prompt. 14:00.470 --> 14:04.550 And then we say and we say it's a Post request. 14:05.150 --> 14:09.270 So now is the time to go to our editing workflow. 14:11.950 --> 14:16.150 Open the webhook node with production URL. 14:17.710 --> 14:19.670 Make sure to make this workflow active. 14:21.630 --> 14:22.270 Confirm. 14:22.870 --> 14:23.630 Alright, great. 14:24.910 --> 14:28.310 Let's go back to the app and let's replace this webhook URL. 14:28.350 --> 14:34.150 It's actually the same URL because I just copied my prompt, but I just wanted to show you where you 14:34.150 --> 14:35.990 need to put your webhook URL. 14:36.230 --> 14:42.630 Then we show an example of the data we will send to just a prompt in JSON format. 14:43.910 --> 14:47.710 So curly braces prompt a high resolution portrait of a man wearing a suit. 14:49.390 --> 14:53.670 And also we let it know to response will be an image file. 14:53.710 --> 14:55.310 So it knows how to display it. 14:55.510 --> 14:58.550 So the API will return the generated image as a binary file. 14:58.550 --> 15:01.510 So that's all it needs to build the full user interface for us. 15:01.550 --> 15:03.990 So it needs to write a single line of code. 15:04.750 --> 15:06.990 So just hit enter. 15:07.150 --> 15:11.340 So just send it out And let's wait a few minutes. 15:12.020 --> 15:13.260 Here you can see it's working. 15:16.140 --> 15:19.540 I'm going to create a beautiful image generator app with a clean, modern interface. 15:19.540 --> 15:26.340 The design will draw inspiration from popular AI platforms like Dall-E, Dali and Midjourney during 15:26.380 --> 15:29.900 a minimalistic aesthetic with vibrant accents. 15:30.500 --> 15:35.340 For the first version, I will implement visually appealing home page with a creative header, a text 15:35.340 --> 15:41.020 input area for entering image prompts, a generate button with loading state image display area for 15:41.020 --> 15:42.140 the generated results. 15:42.180 --> 15:43.700 Error handling for failed requests. 15:44.300 --> 15:47.220 Basic responsive design for mobile and desktop. 15:47.700 --> 15:49.100 So as you can see, it's really impressive. 15:49.140 --> 15:52.900 It's actually building our app from scratch and we don't need to do anything. 15:53.740 --> 15:59.420 I'll use a color palette with gradients as the primary theme, which is often associated with creativity 15:59.420 --> 15:59.860 and AI. 16:00.140 --> 16:06.540 The interface will have clean lines, subtle animations, and ample white space for a modern feel. 16:09.340 --> 16:12.210 Check the files for migrate. 16:12.210 --> 16:14.530 So transform your ideas into stunning images. 16:14.530 --> 16:17.770 Here you can enter our prompt to describe the image you want to generate. 16:18.130 --> 16:19.170 Have a generate button. 16:22.210 --> 16:26.570 And a detailed description of what you want to create, and I will generate a unique image for you. 16:28.170 --> 16:30.090 As you can see, it looks really, really nice. 16:30.570 --> 16:36.650 Now if you want to publish this app to share the link, just simply click on publish and Confirm. 16:41.050 --> 16:43.210 And this is the link you can use to share the app. 16:51.450 --> 16:52.170 Like perfect. 16:53.450 --> 16:59.130 Now one thing to keep in mind though, Liverpool gives you five free credits every day on the free plan 17:00.130 --> 17:02.370 up to a maximum of 30 credits per month. 17:03.290 --> 17:10.850 Now that's actually enough to build one full app and even make a few follow up edits or prompts if something 17:10.850 --> 17:12.250 doesn't work the first time. 17:12.610 --> 17:17.730 If your prompt is clear and lovable, understands what you want, you can even get away with building 17:17.770 --> 17:20.770 multiple small apps using just those three credits. 17:20.970 --> 17:25.050 One credit for building one small app without follow up prompts. 17:25.050 --> 17:30.410 But if you find yourself tweaking a lot, or if a lovable struggles to get it right on the first try, 17:30.690 --> 17:33.090 those credits can go pretty pretty quickly. 17:33.450 --> 17:37.530 So once you go past those three credits, it can get a bit expensive. 17:37.570 --> 17:39.050 You are prompting it a lot. 17:39.090 --> 17:44.410 So that said, I'm planning to record a follow up tutorial soon showing you how to use some cheaper 17:44.410 --> 17:49.770 alternatives that do pretty much the same thing, but they require a little more setup and technical 17:49.770 --> 17:50.330 knowledge. 17:50.690 --> 17:52.530 Alright, that's it for this tutorial. 17:52.530 --> 17:59.210 I hope you find it helpful and got a good sense of how powerful this new AI tools can be, and how easy 17:59.210 --> 18:02.170 it is to build something useful without writing any code. 18:02.210 --> 18:06.050 This is just the beginning and there is so much potential with this technology. 18:06.170 --> 18:10.090 If you enjoyed it and found it helpful, please consider leaving an honest review. 18:10.130 --> 18:11.890 Thanks for watching and I will see you in the next one.