AI Image Generation in Bubble with DALL-E 2 OpenAI API
In this Bubble tutorial video we demonstrate how to generate AI images within your Bubble app using the DALL-E 2 API (Public Beta) from OpenAI. We take you through every step from interpreting the DALL-E 2 API documentations, to setting up the Bubble API Connector.
Unlock AI image generation: Learn how to integrate DALL-E 2 into your Bubble app for stunning visuals!
Create custom AI art in minutes: Discover the step-by-step process to generate OpenAI-powered images within your no-code project.
Elevate your Bubble app: Master the technique of seamlessly incorporating AI-generated images using the API connector and workflows.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.