Introduction to DALL-E 3 and OpenAI on Bubble

OpenAI have just released DALL-E 3 and in this Bubble tutorial video I'm going to show you how you can connect right into the OpenAI API and get DALL-E 3 generated images saved into your Bubble app. But before I launch into that, if you're learning Bubble then there is no better place to go than Planetnoco.com because we've got hundreds of Bubble tutorial videos. You may have searched through our YouTube channel but we've got even more videos on our website Planetnoco.com. Let's dive into this OpenAI Bubble tutorial.

Understanding DALL-E 3 and Its Integration with Bubble

DALL-E 3 is an image generator, an AI and it's given some really impressive results so let's get it built into a Bubble app. So in my Bubble app I've gone into Plugins and I've gone to API Connector and I'm going to add in a new API service and I'm going to name this OpenAI. Now I've been using OpenAI for many, many months now so I'm really familiar with how it all plugs in but I'm going to explain each part as I go.

Setting Up the OpenAI API

So Private Key in Header and how do I know that? Well I'm in the API documentation and I'm on Image Generation and I see that my call to OpenAI needs to look like this. If it doesn't look quite like this make sure you change the option here to Select Library to CURL. So I need to have authorization bearer and my API key and I need to have content type application JSON in the header of my API call. So let's get the content type in first of all. I'm going to add in the shared header and go back here, copying and pasting between them. And then the API key, I'll go into my OpenAI account and I'll generate a new key. Copy it. Paste it in. And remember to put bearer at the start because it's basically got to be identical to this.

Configuring the API Call

I then have got the data section or the body section of the API call. So I'm going to copy all of that and place it into an API call. So I'll say this is generate image and I'm going to put it as post. I'm going to have it as action. Action means that it's going to become an option in the workflow and I'll say if a button is clicked I want to be able to run this action. So I'm going to paste in the body of the JSON there and now I want to make something dynamic. I don't always want to receive a White Siamese cat image. So I'm going to change this and put in square brackets and say prompt. And this is going to add in the ability in my workflow to feed in dynamic data or a dynamic prompt as long as I make sure that it's not private.

Finalizing the API Setup

And then I need the end point. It's the last thing that I've missed. There we go. Copy that into that. And then prompt I'm going to say, okay, I'm going to say a photo of a cocker spaniel. And initialize the call. So I get a reply back in JSON and it includes the URL of my image. So I'm going to copy all of that. Open it up. And there is my cocker spaniel. And that's, you know, it's very good. Obviously a huge amount of effort can go into a prompt. But, you know, that is not bad, especially if you're just generating avatars or you just need placeholder images. Then this is seriously impressive what OpenAI are doing.

Integrating the OpenAI API with Bubble

So I've got that now all working in my API connector. How do I add that in to a page in my Bubble app? How do I get it working on the front end basically? So I'm going to save this because this is basically a demonstration that Bubble has learnt the format of the data, the structure of the data that is getting back from OpenAI. So I want to save that and acknowledge that now my prompt is working. And now I'm going to go onto my page.

Designing the Bubble Page

When designing in Bubble, I always say to people, fixed layouts cause loads of layout headaches. But just to make this video quick, I'm going to use fixed layouts on my page, as you can see here. So I need an input. I'm going to say multi-line. And then I'm going to have a button. And then I'm going to have a repeating group because I want to list through all of the images that I've created. I'm going to need to create a new data type for this. I'll say AI image. And I'm going to have a prompt as a text field and I'm going to have image as an image field.

Listing the AI Images

So let's list through our AI images. I'm going to do a search for all AI images. And then I need to put in my image. So this is current sales AI image. And I'm going to put in a text label to remind us of what the prompt was. So current sales AI image prompt. Cool. Right, this is going to say generate image. And so what do I need this to do?

Setting Up the Image Generation

Well, because I have successfully initialized the call through the Bubble API Connect plugin, I'm now going to find open AI generate image. And the exact term for what this is is exactly what I've written in here. So it's open AI generate image. And then the prompt is going to be my multi-line inputs value.

And then right after step one, that's when the Bubble app is going to show the loading bar across the top, because that's when it's waiting for open AI to send the response. And so I'm going to say create a new thing. AI image when image equals the result of step one, data. Okay, so let me just point out one thing because this is going to hopefully make a bit more sense. I've got n is one. You can ask open AI to generate more than one variation. I'm only asking it to generate one, but it still returns in the structured JSON of a list. And that's why when I go back to here, I'm saying get the responses data.

Saving the Generated Image

Now I just want to get the first item because I'm only getting one item back. First items URL. Now, if I leave it as that, Bubble is going to recognize that it is an image at the end of that URL, and it is going to save the location of that image to the Bubble database. Now, I don't know how long the open AI service hold an image onto. So this is not a good strategy because I want to make sure that the image is actually saved to my Bubble's app storage. So I'm not dependent on whether they keep it for 24 hours or 48 hours. I think you know what I mean. So I add to the end of this. Right, so I'm trying to add to the end of it save. Now, I don't think that's worked because I have missed something here, which is that when I reinitialize the call, I like to leave these bits in the videos because it demonstrates how easy it is to make a mistake. And then you can spend hours trying to solve the mistake. But I'm going to show you what I think in my mind I've got what the fix is. So here's data. Remember it's a list and I've only got one back. And then URL, it's treating it as text. I actually need this to be an image. So I'm going to inform Bubble to treat it as an image instead. Now, that should give me the option that I'm looking for here, which is saved to S3. And I will give it the file name of the prompt, the multi-line input value as the file name. And so that is actually going to save it to my Bubble app storage. I'm not dependent on OpenAI keeping it on their servers. And then I'll say reset inputs. Let's try that.

Testing the Bubble and OpenAI Integration

Okay, let's test it out. I'm going to now say, a cartoon of a rocket orbiting a purple planet. So we're waiting on OpenAI to reply now. Okay, and there is my image back. And I've noticed that I will have made a mistake in this, which is I'm not saving the prompt. Prompt equals multi-line input. Let's try that again. Oh, I made one more change too. These are not big enough to see the amazing images that are being generated. Okay, there we go. Let's try it one more time. Let's say, a cat in Paris having lunch. Okay, there we go.

Conclusion

If you're learning Bubble, remember to check out our website, plantinoco.com. I also provide one-to-one tutorials if you continue to get stuck or you're getting really frustrated by something in Bubble. We can work it out together over Zoom.