Create STUNNING AI Art with NO CODE - Image Flux Generator

Generate AI Artwork with No Code

Did you know you can generate breathtaking AI artwork with a no code app that you've built yourself? And we're going to do that in just ten minutes using the replicate API and Bubble.io as our no code platform. So let's dive right into Bubble.io and we have a blank page here. So at the bare minimal, what we need to generate some AI artwork is a input to put a prompt, a button, and then a text or an image element rather to display the image that we generated back to our user. So let's get that all into place.

Setting Up the Basic UI Elements

So I'm going to drag in a multi line input. Now, I'm not going to be laying this out based on best practices. This is just going to be quick and rough. Of course, if you were seriously building a Bubble app, you wouldn't be using fixed layout, you'd be using rows and columns and getting to grips with flexbox through that. But we just want to be really quick.

Creating a Proof of Concept

It's a proof of concept. So we'll drag a button in and full width and then we'll have an image element.

Okay, so what's going to happen? Let's actually relabel this one. We'll say generate artwork. So what will happen is that a user will enter text, a text prompt into here. They'll click generate artwork and will display the image back.

Connecting to the Replicate API

Now of course you can make your prompt available to your users, or you could part make it available, or you could in fact have your own prompt behind the scenes and your users click a button and you generate an image based on the prompt that you provide. That's all possible. We're just going to keep it simple for now. So in order to do this, we need to link in with the API in replicate and replicate makes that very easy for us to do. We go onto the Explore tab and then we'll click through onto one of their flux models and then we'll swap this into HTTP because this is basically the format that we can copy and paste almost exactly into Bubble.

Using the API Connector Plugin

So how do we connect our Bubble app to a API HTTP endpoint just like this one? Well, if we go into our Bubble app and then go into plugins, you'll need to install the API connector. It's the most popular plugin and once you get to grips of it, which you should do by the end of this video, you can connect with hundreds, thousands, hundreds of thousands of services. Look, I've got a few here. We've got SEO tools, we've got other AI's, we've got calendar tools, all can be connected to and we've got videos showing you how to do that in our catalog.

Setting Up the API Call

But we're focusing right now on replicate.

Okay. And then I'm just going to expand this open and I'm going to call it generate image. So now we just need to go back and check the API documentation and basically cross reference, copy and paste across. So if I go not this one, this one here, I can see that I need to send an API key with the, with the name, the label authorization bearer and then my API key I also need to send across in the header section of my API call content type application JSON. Now as of a few months ago, Bubble does that automatically unless you override it.

Configuring the API Request

So we can completely ignore this line. We then have the data, or I like to refer to it as the body section. And that's everything between these quote marks here, not including the quote marks. So I'm going to copy that and you'll see that there's nowhere to put it. That's because we have to change this to a post.

Cool. How do we know that it is post? Because we see post just here. We also need to know the end point. Where are we sending this data to?

And this will be different depending on which model you use because you can see that the provider of the model and the model name is part of this line. So I'm going to take this, copy it and paste it in here, making sure that when I've copied it across there aren't some extra spaces at the start. I'm then going to swap this into date from data into action. This just means it can be used as a action within a workflow in Bubble, a data API. A better use case would be say whether, where you're calling the API and you're getting a list back immediately.

Setting Up the Webhook

No, we are taking an action in this case. Now there's one other thing that is worth adding in. Did I miss a, I've missed off there when I copied it across closing brackets. So let me copy it across again.

There we go. Right, so I have some closing brackets. Now there's some other part to get to grips with with using a API like this. And if you've worked with transcription APIs, you'll be familiar with it. We're going to cover all the details, don't worry.

But it's the fact that you can ask it to generate an image and it could take 2 seconds, it could take 20, it could take a whole minute to generate. Now you will need to use a webhook for that. Because rather than forcing your Bubble app or your user to wait with like a crawling across the top of the screen loading bar, you'll use a webhook. So this will send this API action and it's going to get back at the id and then your webhook will be informed when the image is completed. So we're going to add in another not, oh, there's something really off with copying this across.

Configuring the Webhook

There we go. It needs to be inputs. Inputs is an object in the right, copy that, cross right. That looks better. So because we're not putting in input, but we do need to put a comma there.

And then I'm going to say webhook.

And the reason that I know this will work is because if I dive into the documentation, I can see that I can supply webhook as a string within the API call. It's not part of the input object. That's why I've not put it in here. It's not in there. It's outside of input, which is that bit there.

Creating the Backend Workflow

Okay. And so now I need to supply a endpoint in my Bubble app to receive the notification that the image has successfully been generated. Now to do that I'm going to first of all open in a new tab, my Bubble app, because I kind of need to be working in two tabs at the same time here in order to train my endpoint what data to receive. So let me go ahead and do that. So I've now got two tabs open which are identical points in my Bubble app.

So I'm going to take this one and go ahead and go into backend workflows. If you don't see backend workflows, you have to enable them in settings under the API tab and you have to be on a paid Bubble app in order for this to work. But the cheapest of the paid plans will be fine. So we'll create an endpoint and I'll call this one image webhook. It's part of a URL, so you can't put spaces in it or anything like that.

Setting Up the API Endpoint

It needs to be public. And then I put it into detect request data and I say detect data. And this gives me my endpoint and I need to leave it in this mode. This is ready to detect the structure of data that is inbound. And so I go back into my API call, I'm going to paste my endpoint in there.

I then need to authenticate my call. I almost forgot this. So we say private key in header wise. Why are we saying that because it's authorization bearer and then the API token. So if I go back into my Bubble app, I write in bearer and then I paste in my API key.

Initializing the API Call

There we go. And I will of course be deleting this key before I publish this video. So now we're ready to initialize. And this is again, it's kind of training Bubble. It's to say are there any errors in here and what sort of response to expect back?

Because we're going to need to work with some of the data that comes back, including the unique id, because that's how we go ahead and fetch the final image and know which image has been generated. So I'm going to say initialize, call and heads up. This is not going to work. Okay. We get the fact that there is an error in our JSON, and that's because the prompt that I've copied from, from replicate has actually got a JSON syntax error in it, at least when we run it through the Bubble environment like this, which is that we've got speech marks here.

Fixing JSON Syntax Errors

And speech marks can cause a lot of nuisance with JSON because you have to declare that, well, is it a speech mark that's part of the code or is it a speech mark that's part of the text? And in order for it to be part of the text, we have to escape it by using a backslash. But this is double backslashed it and it's not working. So it should now work. And of course, if you were just to overwrite this and write whatever prompt you wanted in, it's going to work fine too.

So let's initialize the call. Perfect. And we get back all of this data. We get back an id and we get back a URL to get a the final image. So I'm going to expand this open and copy this onto my clipboard and click save.

Testing the API Response

And now if I go back here, because it's not a particularly strenuous prompt for the AI, we get back all this data saying that the image has been generated and it's been completed and we get back the image here. I think I'm going to go and expand the list here. We get back an output. Yeah, so actually we can go ahead and.

Yeah, copy this. So if I copy this into a new tab and open, it's actually just going to download it straight away. I can't share that based on the screen software, screen sharing software that I'm using. But I've downloaded an image of a cake and that's the generated image. So I'm going to click save.

Saving the Image to the Database

Now we can begin to put it all together. But before I do that, I'm just going to highlight something that I did there that I didn't comment on, which is that Bubble will do a good job of auto detecting the format of data that comes in. But the image we get back is just the URL in which that image is stored on the replicate servers. So I changed this from text to image so that Bubble will treat it as an image in the workflow builder. So let's click save.

Now I want to save this to my database. So I'm going to go ahead and create a new thing. And there's a lot of data types in here. In fact, I'm just going to go ahead and delete that AI image data type that will be from a different video. So then confuse things.

Creating a New Data Type

Yeah, right. So to create a new thing I'm going to say a new data type and I'll call this one AI image. And then I'm going to create a new field. And this is where I'm going to save the image. Now there's two parts here.

Am I saving the URL of the image or am I actually saving the image to my database? Well I'm going to show you how to do both because if I just say image and then of type image, I can now go into request data. That's the data that's come into this endpoint and I can go to output. Now I suspect because it's going to be a parameter somewhere, the output is a list. You could get back more than one version.

Saving the Image to Bubble Storage

I've only requested one. So I'm just going to say first item and then I'm going to say first item, right? Yeah. If I click off it now, this will work, but it will work only temporarily because it's being saved as an image, as a line in the Bubble database. But the image isn't being saved to the Bubble storage.

Now I've not read through all the documentation. I don't know how long replicate is going to store that image on their service, but you can bet that they'll delete it at some point. So I need to make sure that this is actually saved to my Bubble storage. So I'm going to say save to Bubble storage and then I'm just going to say image.

Connecting the Frontend and Backend

Okay, now it is actually being saved to my Bubble storage. Let's plug all of this in together, including our front end. So let's go back to our page and I'm going to say here, add in a workflow. So I'll say image generate image. I see that, because that's exactly what I named it here.

If you don't see it, you've not initialized it, you've called it something else.

Making the Prompt Dynamic

Oh, right. I need to update in the API connector, so I'm going to make my prompt dynamic. Now, Bubble tells me that I can add in dynamic values into this API request using triangle brackets. So I'm going to add in prompt. Notice that I've removed the speech marks.

I'm not going to click re initialize call because I'll get an error because I'm not passing the appropriately formatted data into the API request. I'm also going to make one other change here, which is that we've got initialize that this is the end point in our backend workflow in training mode. We don't want it to be in training mode. We actually want it just received the data. And while I'm thinking of that, we need to make one other change here, which is to say run the workflow without authentication.

Handling JSON Safely

You just need to be wary of this, because now if this endpoint was public, anyone could send any data to it. They could wreak havoc with your app. It's up to you to assess whether that's an issue or not. Let's go back here. So we've removed initialize and we've removed the speech marks.

We've removed the speech marks because we need to make the content that goes into prompt JSON safe in case our user, as we saw earlier, puts any speech marks themselves into the prompt. Let's go back here and you'll see that this is now updated to only show the dynamic value. So I'll say my multi line input a and then I'll say JSON safe, because JSON safe escapes with the backslashes, any pesky punctuation, and wraps the whole thing in the speech marks. So that's going to run when that button is clicked and it's going to trigger the backend workflow that creates an image. Now, I need a way of retrieving the image from my database.

Retrieving the Generated Image

So I'm actually just going to say that the dynamic image is going to be do a search for aiimage where the created date is ordered newest through to oldest, and then I'll say first item image. Okay, now this is because I'm keeping this quick. So this is effectively saying go into the database, find the latest image, and show it here. Now if you were using this in a different way. You'd use a different approach.

If you've got any questions, place a comment down below. We're happy to answer them, but hopefully now this will work. So all that's left to do is to click preview. Here's our app. And then I'll say image.

Testing the Final App

I'll say cocker spaniel riding a bike. Okay, I'll click create artwork. Now we'll see the loading bar going across the top. That is the initial prompt being sent and then the web hook is filed. It happened really quickly, but let me walk you through it.