AI Images with Bubble.io using OpenAI DALL-E 3

Connecting OpenAI DALL-E 3 to Bubble.io

OpenAI have just released DALL-E 3 and in this Bubble tutorial video I'm going to show you how you can connect right in to 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 planetnocode.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 planetnocode.com. Let's dive into this OpenAI Bubble tutorial.

Introduction to DALL-E 3

DALL-E 3 is an image generator, 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.

Setting Up the API Connection

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. 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 C-U-R-L. And 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.

Configuring the API Call

So let's get the content type in first of all. I'm going to add in a 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 generate a new key. Copy it, paste it in and remember to put bearer at the start because it's basically going to be identical to this. 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.

Creating the API Action

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 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 dynamic prompt as long as I make sure that it's not private and then I need the end point.

Testing the API Call

It's the last thing that I've missed. There we go, copy that into there 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 that 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 just generating avatars or you just need placeholder images then this is seriously impressive what OpenAI are doing.

Implementing the API in 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.io 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 learned 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 on to my page.

Designing the Page Layout

When designing in Bubble I always say to people fix 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 a input go 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.

Creating the Data Structure

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. So let's list through our AI images and I'm going to do a search for all AI images and then I need to put in my image. So this is current cell's AI image image and I'm going to put in a text label to remind us of what the prompt was. So current cell's AI image prompt.

Setting Up the Workflow

Cool right this is going to say generate image and so what do I need this to do? Well because I have successfully initialized the call through the Bubble API connect plugin I'm now going to find OpenAI generate image and the exact term for what this is is exactly what I've written in here so it's OpenAI generate image and then the prompt is going to be my multiline 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 OpenAI to send a response and so I'm going to say create a new thing AI image when image equals the result of step one data.

Handling the API Response

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 OpenAI 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 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 OpenAI servers 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 bubbles app storage so I'm not dependent on whether they keep it for 24 hours or 40 hours I think you know I mean and 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 work because I have missed something here which is that when I initialize 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 I've in my mind I've got what the fix is yeah 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 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 inputs 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 okay let's test it out.

Testing the Final Implementation

I'm gonna now say a car yeah 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 just noticed that I will have made a mistake in this which is I'm not saving the prompt prompt equals I'll say multi-line input let's try that again I'll make one more change to 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 a cat in Paris having lunch okay there we go.

Conclusion and Additional Resources

So if you're learning Bubble remember check out website planetnocode.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 out together over zoom do you have to our website planetnocode.com to find out more.