AI Image Generation in Bubble with DALL-E 2 OpenAI API

Introduction to DALL-E 2 API in Bubble

OpenAI have just released a public beta for the DALL-E 2 API. This means that you can now generate AI images within your Bubble app and here's how. So I have a Bubble app here and I have installed the API connector because we will be making API calls to the OpenAI API and this one here is for a video we did about text generation but so that this little demonstration here will be fully comprehensive. I'll add it again and I'll call this one DALL-E.

Setting Up the API Connector

So what we need to do with APIs is find the right documentation and so I've got an account with OpenAI and gone down to guides text generation usage and this provides everything we need to know to set up the API connector to connect to OpenAI. So we selected this first part here and copy it and this is going to be part of our call. So I'll name this generate image and paste in the URL there. Now I want to select action here because I want this to take place within a workflow and there are some other sections I need to fill out such as content type and what you can do with the API connector is just in case I want to add additional calls to this API I can share headers so I know that this is likely to be shared across any further calls that I set up.

Configuring API Headers and Body

So paste in there and then authorization and we'll come back to the API key in a moment and then this is all part of my header section here with the VH and then this is my data section or body section. So I'm just going to copy everything including the curly brackets but not including the quotes. Change this to post because then I get a body section paste in there and let's start making our call a bit more dynamic so if I put in these triangle brackets I can name like a variable and then it gives me this box here. I'm going to untick private because I want to be able to input into this variable in a workflow and then we just look at the other details here and the explainers. So the end value is how many images are returned and then obviously we have size. I'm just going to take the size down a little bit because then it will work slightly quicker.

Adding the API Key

Okay then we need our API key so I go over into my DALL-E OpenAI account and click create new secret key and so I copy my API key and I blur it out here but you put it into the box and paste in your API key there and then I'm all good.

Testing the API Call

Well the next thing is to initialize the call and we'll then see if the parameters we've entered are correct and whether the call is successful but I need to put a prompt in first so I mean you can have great fun with this let's go with a polar bear eating and ice cream on the beach. Let's try that. Okay so my authorization header hasn't gone through I reckon I know why that is but I'm just going to check the documentation. Yes I need to put before my API key bearer which is very common. Let's try that. Okay it's taking some time that's good. Okay and so we get back just a couple of fields here including a URL and I would bet that this URL is going to show us our image so if I'll just copy that open a new tab. There we go a polar bear on the beach eating an ice cream so it's worked so I click save because now within the API connection Bubble everything's set up and working.

Setting Up the Frontend

So how would I do this on the front end. So I have a blank page here and we need like a multi-line text input for our prompt. We need a button and we need an ability to display an image and then somewhere to store that image. Now I'm going to try custom states here so I'm just going to in fact to avoid confusion let's put it on the page custom state I'll just call it returned image. And then dynamic image is going to be pages custom state image.

Creating the Workflow

Okay let's wire up our workflow then generate AI image. So here we go let's go for now that because we had as an action I should be able to find it wherever I named it so it's going to be in plugins, DALL-E generate image there we go. So in case that's a little bit confusing that is referring directly to the name that I gave it here because it is an action. If you use data you're not going to be able to access it in the same way within a workflow and then we need to save the image that's returned so DALL-E demo returned image results step to data items URL.

Understanding the API Response

Okay so if we go back and look at the response we get the URL is within data but of course with DALL-E you can request more than one version and you know it could give me five different polar bears on the beach so it's assuming that we're getting back a list so that's why I need to go each items URL first item so that will just return the first item the first URL is returned let's preview that let's make this a little bit tidier to we shall reset inputs. Oh and I need to set up the prompt otherwise we just get another polar bear back so this is my multi-line input.

Testing the Final Result

Okay let's try something different let's try a house cat and a robin sharing a coffee in Paris. Okay not quite what we asked for but that's why you can get all those different versions back now you notice that it takes some time I mean that's because there is a huge amount of computing power going on to generate the image.

Conclusion and Considerations

And so let's recap we have DALL-E API now working with Bubble using the OpenAI API the DALL-E API is in public feature at the moment you'll want to read really carefully through their documentation such as their content policy if you were to build this into a like a fully fledged application other users will be using you'll want to put steps in place to protect your OpenAI account from prompts that will be violating their terms yeah so there we have it this is really such an exciting thing you've seen probably seen so many people on social media sharing the images that they've generated and now you can build an application just like that in Bubble.