Welcome to this tutorial.
Today I will show you exactly how you can create your very own AI powered image generation app like
this one to generate beautiful images using N810 which includes just three nodes.
It's very simple to set up, and the newest OpenAI's image generator model called GPT image one, which
is currently the best model for generating detailed images with text.
So behind the scenes we are using this model, which is also part of ChatGPT.
So basically you can use it inside ChatGPT and people love it.
It's incredibly good at creating sharp, detailed images even when you prompt includes a text.
So text is something most text to image models and tools powered by Llms struggle with.
We will build our user interface so the front end for our app with loveable, which is an AI powered
appbuilder.
So you don't need to write a single line of code.
And we know about a year ago you would need to know how to code to create this kind of applications.
Cases.
Nowadays, you can build apps without writing a single line of code.
You will help problems and tools like Copilot and tools like lovable.
So these are.
Building platform lets anyone create fully functional web or mobile applications just by describing
what they want in natural language.
So these are examples of images I created using this app.
You have ultra realistic samurai.
Another one.
And as I said this model is really good in creating images with text.
So let me show you how it works.
I'm going to enter a prompt like this a frog wearing sunglasses and floating on a pizza slice in the
swimming pool.
And now he generate image.
Now let's go to our workflow and check executions.
As you can see, execution is running.
Now let's go back to our app and see the result.
As you can see, it's really, really nice.
So yeah, you can easily publish this app just by clicking one button and share the link with your friends
so they can use your app.
So it's just amazing.
This app even has a bunch of cool features built in, so you can see the image shows up after you click
the Generate Image button.
It also saves you recent generations down here so you can look back at what you made.
Here you can see the prompt and if you are not sure what to type, it gives you some fun prompt ideas
so you can just click on it and try it out.
And it's super, super easy to use and the results are pretty awesome.
So yes, now actually let me show you how you can build your own AI image generation app using the best
text to image model available on the market right now.
So OpenAI's GPT image one.
Let's jump into N810 and start building.
All right so let's create a brand new workflow.
So create workflow.
Now let's add a trigger node.
So we'll be using trigger node just for testing.
Later I will be using webhook.
Now let's add OpenAI node.
So search OpenAI.
And we want to generate an image.
Alright great.
Now make sure you are connected to your OpenAI account.
Now if for any reason you don't have an OpenAI account and you don't know how to create API keys, just
go to the How to Setup credentials section and you will find the dedicated tutorial on how to on how
to connect to OpenAI models.
You just simply need to create credentials and then provide API key and then save.
Now as a resource with image, we want to generate an image and we want to use GPT image one.
Now if you don't see this model just make sure your version is up to date.
So currently I'm on.
One second.
I'm on version 1.91.3.
So this is the latest version and the newest GPT image.
One model comes with the last update, so make sure you are on the latest version.
Alright great.
Now let's go back to our workflow.
Now let's enter some very simple prompt such as Penguin with a backpack.
And now let's test the step.
Now the first time you run this you might get an error.
No worries.
It just means you need to verify your OpenAI account.
So to fix it, you need to go to your OpenAI dashboard.
So I'm going to show you go to OpenAI platform.
So this is the same place from you get your API keys to use the models.
As you can see API reference and here you profile API keys section to generate API keys.
So you should be already familiar with this page.
Now go to settings.
And here you need to verify your identity just by simply scanning a QR code and by providing some type
of ID.
It's super simple.
You don't need to have a company and there is no any cost involved.
It takes about two minutes.
Now let's go back to our workflow.
And let's see the result.
So remember the prompt is Penguin with a backpack.
Yeah.
It's amazing.
You just.
It's just incredibly good.
Alright.
Perfect.
Not that we tested the connection to OpenAI's models, and we are able to use the GPT one model.
Let's tweak two more options.
So let's add option.
And here we have a quality.
So it affects image clarity and cost.
So you can change it to.
Low and high.
And you also have a resolution.
So at option resolution.
And you can change it for the thumbnails or some portraits.
Alright great.
Now let's actually make it more production ready.
So the next thing we need to do we need to remove the test workflow trigger.
So right.
Now let's add a webhook.
I like it.
So we are going to use production ready URL to connect to the web app.
We need to switch HTTP method to post.
As path let's say.
You can type whatever you want.
So let's say image.
We don't want to change authentication for the sake of this tutorial.
We don't want to change authentication.
And in the response field let's change immediately to respond to app node.
So we will be able to send the results to generate back to label.
We will make HTTP request to our workflow using our webhook node using this URL and then using this
node.
So respond to webhook node will be able to send the generated result back to our app.
So let's select this option.
All right.
Perfect.
Now let's connect this to nodes.
Now let's add response to node.
So search for webhook.
Again respond to webhook which returns data for webhook.
And now in response with field.
So the data that should be returned we want to change it to binary file.
So we want to respond with incoming file binary data.
All right.
Perfect.
Now let's save it.
All right.
So let's pause for a second and look at what we have built so far.
So on the left we've got our webhook node.
So this is what listens for incoming requests from our app.
So when we enter the prompt it will listen.
And waiting for this action in the middle we've got OpenAI node.
So it takes the prompt and generates an image using OpenAI's image model.
And finally we've got the response to node, which sends that image back to the app so it can display
it to the user.
So far, we have connected our workflow to this powerful model and the webhook is ready to receive data.
So that means you can now copy the webhook URL and use it and use it in lovable.
All right.
So now we want to make sure that the prompt is actually coming from the app and not hardcoded inside
the workflow.
So to simulate what lovable will send we will test the webhook manually.
So just open the webhook node.
Go to the test editor.
Now let's remove what's inside between these two square brackets.
So remove this part of the code.
Now let's add opening curly brace and closing curly brace.
And inside.
Let's add the property called body.
Colon.
Lon.
Now let's add another opening.
Curly.
Brace.
Enter.
And now let's pass another property called prompt.
And here you can pass whatever prompt you want.
So I'm going with American.
DJ at a rooftop party.
You also need to add closing curly brace.
So now this is the JSON object.
This is our key.
And this is our value.
So this is exactly how the app will send user input to our workflow.
Let it save.
Perfect.
And save.
Now jump over to the OpenAI node.
In the prompt.
Let's switch over to expression node.
Let's remove this prompt.
And let's add the dynamic variable.
Perfect.
So what this does is tells the node to pull the prompt from the incoming webhook data.
So it's dynamic now.
Cool.
So now let's test workflow.
And everything should be set up properly.
You should see it run through the flow and return a fresh image based on that prompt.
Alright, perfect.
Let's see the result.
It's so funny.
All right, let's move on.
Five.
Now, when you open the OpenAI node, you can see that the model generated the image.
So you can always do it here.
You can also download it right here just by clicking on this button.
And if you open the webhook node we can see that the image is passed back via the webhook.
All right.
Great.
Just to let you know, I'm going to add this simple JSON object in the resource section.
So you can just copy and paste it.
All right.
Great.
So now we are ready to connect our workflow to the web app.
So go to the label dev create an account.
And then you will see interface like this one.
So here you can enter your prompt.
Yes.
So lovable is relatively new.
No code appeared there.
Kind of like cursor A windsurf board v0.
So just describe the app you want and it builds it for you using AI.
All right so here is the prompt.
I will use to generate our front end.
It's the same prompt I used to create my app.
So let's create an AI powered image generator app.
So this prompt tells lovable exactly what kind of app we want.
So we are asking it to build a simple image generator with a text input and a button.
So the interface should be clean, modern and visually appealing.
Users should be able to type in a description of the image they want, and click a button to generate
it.
To generate the image, send a Post request to this endpoint.
So we give it the webhook URL so it knows where to send the prompt.
And then we say and we say it's a Post request.
So now is the time to go to our editing workflow.
Open the webhook node with production URL.
Make sure to make this workflow active.
Confirm.
Alright, great.
Let's go back to the app and let's replace this webhook URL.
It's actually the same URL because I just copied my prompt, but I just wanted to show you where you
need to put your webhook URL.
Then we show an example of the data we will send to just a prompt in JSON format.
So curly braces prompt a high resolution portrait of a man wearing a suit.
And also we let it know to response will be an image file.
So it knows how to display it.
So the API will return the generated image as a binary file.
So that's all it needs to build the full user interface for us.
So it needs to write a single line of code.
So just hit enter.
So just send it out And let's wait a few minutes.
Here you can see it's working.
I'm going to create a beautiful image generator app with a clean, modern interface.
The design will draw inspiration from popular AI platforms like Dall-E, Dali and Midjourney during
a minimalistic aesthetic with vibrant accents.
For the first version, I will implement visually appealing home page with a creative header, a text
input area for entering image prompts, a generate button with loading state image display area for
the generated results.
Error handling for failed requests.
Basic responsive design for mobile and desktop.
So as you can see, it's really impressive.
It's actually building our app from scratch and we don't need to do anything.
I'll use a color palette with gradients as the primary theme, which is often associated with creativity
and AI.
The interface will have clean lines, subtle animations, and ample white space for a modern feel.
Check the files for migrate.
So transform your ideas into stunning images.
Here you can enter our prompt to describe the image you want to generate.
Have a generate button.
And a detailed description of what you want to create, and I will generate a unique image for you.
As you can see, it looks really, really nice.
Now if you want to publish this app to share the link, just simply click on publish and Confirm.
And this is the link you can use to share the app.
Like perfect.
Now one thing to keep in mind though, Liverpool gives you five free credits every day on the free plan
up to a maximum of 30 credits per month.
Now that's actually enough to build one full app and even make a few follow up edits or prompts if something
doesn't work the first time.
If your prompt is clear and lovable, understands what you want, you can even get away with building
multiple small apps using just those three credits.
One credit for building one small app without follow up prompts.
But if you find yourself tweaking a lot, or if a lovable struggles to get it right on the first try,
those credits can go pretty pretty quickly.
So once you go past those three credits, it can get a bit expensive.
You are prompting it a lot.
So that said, I'm planning to record a follow up tutorial soon showing you how to use some cheaper
alternatives that do pretty much the same thing, but they require a little more setup and technical
knowledge.
Alright, that's it for this tutorial.
I hope you find it helpful and got a good sense of how powerful this new AI tools can be, and how easy
it is to build something useful without writing any code.
This is just the beginning and there is so much potential with this technology.
If you enjoyed it and found it helpful, please consider leaving an honest review.
Thanks for watching and I will see you in the next one.