How-To Guide: Build a Website to Generate Art using Bubble and DALLE-2 in 7 Easy Steps (Beginner)
If you’re not familiar with Bubble, it’s a platform that allows you to build web applications without any code. That means you can use Bubble to connect to APIs and build complex applications without a single line of code.
In this post, I’m going to show you how to use Bubble to connect to the DALLE-2 API, that OpenAI provides us with, and build a simple input and output page that you can feed any prompt to and generate images!
Let’s go through some of my examples before we start so that you have an idea of what you’ll be able to do at the end of this post. Keep in mind I’m not the best at designing “prompts” for DALLE-2.
Prompts in this case are simply the instructions you give DALLE-2. The more detailed, the better. And there’s an entire free guide on how to get better at making DALLE-2 produce the image you truly want here.
Prompt 1 : “photo of hip hop cow in a denim jacket recording a hit single in the studio”
Prompt 2: “cinematic shot of a dog drinking coffee on the moon, 8k”
It can get way more realistic than my two examples. I just wanted to show off DALLE’s ability to make sense of the prompts I’m feeding it. You can create almost anything you can think of … except bad stuff (you know) and I don’t think it works well with certain famous names.. but mostly anything! :)
Anyway, let’s start.
Assumptions: You have a basic understanding of Bubble.io and you have an API key from OpenAI.
Step 1
Make a group and put an input field, a button and an image inside of it. You can search for all these elements where you see the 3 arrows converging.
Step 2
Now you’re going to want to go over to OpenAI’s website and get your API key to replace “$OPENAI_API_KEY” in the code below.
“The image generations endpoint allows you to create an original image given a text prompt. Generated images can have a size of 256x256, 512x512, or 1024x1024 pixels. Smaller sizes are faster to generate. You can request 1–10 images at a time using the n parameter.” -OpenAI
curl https://api.openai.com/v1/images/generations \
-H 'Content-Type: application/json' \
-H "Authorization: Bearer $OPENAI_API_KEY" \
-d '{
"prompt": "a white siamese cat",
"n": 1,
"size": "1024x1024"
}'Step 3
Go back to bubble, go to plugins and install the API connector. Add a new API and fill it out the way I did here using the code above in Step 2.
Change their original prompt of “a white siamese cat” to “<prompt>” so that you can have a dynamic input field in the API call.
Initialize the call and you should get a response like this. Don’t worry, we’ll to see the bald cat soon. Click save!
Step 4
Go to your workflow page and click on “When Button is clicked” and go to plugins -> Dalle API or whatever you named it. Replace the (body)prompt with the following dynamic data -> “Input A’s value”
Step 5
Go back to the design tab and double click the whole page and set a custom state like this. Then double-click your image element and set the dynamic image to whatever you named the blank bubble page your working on and set it to the state we just made.
Step 6
Go back to your workflow tab and click to add an action from where we left off. Navigate to element actions and then click “Set State”. Then choose your page name as the element -> custom state as what we created -> Value= Result of Step 1 -> data -> first item’s -> URL.
Ignore my computer being attacked :/ .
Step 7
Hit preview and try it out. You’re done! It may take a few seconds for the picture to load and you may also have to change the dimensions of your image element to not have the image somewhat cut off like in my example here. I typed in “a blue bubble”.
There you go! You’ve made your own image generator.
If you want more posts similar to this, visit CloudCap Solutions and join the signup for my newsletter. It hasn’t launched as yet but I plan on only sending articles related to AI and Web3 topics including articles and recent developments along with my personal opinions on those topics.
I hope this inspires you to explore DALLE-2 on your own as well after showing you how easy it was to build and deploy your own web app!
Thanks for reading! If you found this useful feel free to visit CloudCap Solutions, share this with others, or just leave a clap or comment! All feedback is warmly welcomed.
See ya
