Adding an image generator to your Bubble app

Here we will show you how to add an image generator to your app which responds to the same prompt which generates the text output.

In our case - Dream Studio, which provides the model called “Stable Diffusion.” Another popular model is Midjourney, but it doesn’t offer an API key so you cannot integrate it into an external app.

Payment: A free account will provide sufficient credits to test out the steps below. But once you run out of free credits on Dream Studio, your API key will not work and neither will your app. Make sure to buy credits if you plan here to use the app extensively or deploy it for public use. Dream Studio has a pay-as-you-go plan, so they will not charge the card you link with your account unless you are actively using their AI through their website or the API key.

1.Once you’re logged in, click on your profile logo in the utmost top left corner.

2.You will be taken to your account dashboard, where you can generate API keys. In the box called “API keys”, click on the plus button on the right.

4.Click the copy button to copy the API key over to your clip board.

5. Copy over the API key to a private document where you can save it but no one else can see it. You will need this code for later.

Note: Remember, the API key is a direct access to your wallet. If you believe your API key has been compromised, delete it by pressing the ‘X’ next to the copy button.

1. Select the image object from the menu on the left.

2. With the image element selected, hold down the mouse and draw out a box of the size you would like the image to assume when generated. A box of image options should appear once you are done drawing the box. If it did not appear, double click on the box you have just drawn.

3. In the window that appears, click on the circled “i” button in the top-right corner.

4. In the side-menu that appeared, click on the option “Add a new custom state.”

Note: This state is important because it is what gets updated when you trigger a change with the button. In this case, we will change the state of the text box once our AI model generates content which we want to show up in this box.

5. Give your state a name. Here, we gave the name “poem_img_output” to specify that this image is in relation to the poem generator. You can give a name of your own liking, as long as you remember it for future steps.

6. Next click on “State type”

7. Select “image” from the drop-down menu.

8. Once you’re done specifying all the parameters, click on the blue button “Create.”

9. Back in the image options menu, click on the area next to “Dynamic image”.

10. In the drop down menu, select the name of the image box you have created (in our case, “Image A”)

11. Now select the state name you choose in step 3.5. In our case, this is “poem_img_output”

12. Once you’re done, exit out of the image options menu.

1. Click on the ‘Plugins’ tab in the far-left menu.

2. Click on the “Add another API” button. You should see the API connection with OpenAI’s text generator already be present above.

3. Give this API connection a unique name, one to which you will know how to refer to later. We suggest the name “Stable Diffusion”, since that is what we will be connecting with.

4. Click on the button “Add a shared header”

7. In the windows which appear, fill the slot next to the word “Key” with the words “Content-Type”, don’t forget to capitalize and add a hyphen.

8. In the window to the right of it, where it says “Value” type in the slot “application/json”

9. Click again on the button “Add a shared header” to add another header.

10. In the second “Key” window slot type in “Authorization”. Don’t forget to capitalize.

11. In the “Value” slot, to the right of the second “Key” slot, type in “Bearer”.

12. Copy the API key you have saved from platform.stability.ai website earlier. (If you forgot where you saved it, you can copy it again by logging into stability.ai and then going to https://platform.stability.ai/account/keys)

13. Add a spacebar after the word “Bearer” in the second “Value” slot, then paste the API key from stability.ai

14. Click yet again on the button “Add a shared header”.

15. In the third “Key” slot type in the word “Accept.

16. In the third “Value” slot to the right of the third “Key” slot type in “image/png”

17. Now click the word “expand” in the API call window to expand you API call.

18. In the window which appeared, click on the drop-down menu next to the words “Use as”,

19. Click on the option “Action” from the drop-down menu.

20. Make sure the tab next to “Data type” says “JSON”.

21. Now click on the drop-down menu under the word “Name”

22. From the drop-down menu select “POST”

23. Type the text in the slot next to “POST”:

https://api.stability.ai/v1/generation/stable-diffusion-v1-5/text-to-image

Note: As explained before, this address is called an end point, and it is specified in the manual of the provider. In case of stability.ai, the end point address can be found here: https://api.stability.ai/docs#tag/v1generation/operation/textToImage

24. Down in the parameters, where it says “Body” type in the following code:

{

"text_prompts": [

{

"text": "An image of <input>"

}

],

"cfg_scale": 7,

"height": 1024,

"width": 1024,

"samples": 1,

"steps": 30

}

Instead of “An image of <input>” you can insert your own prompt. Whatever the user inputs in the app at the front-end will be inserted into the <input>.

Note: You can also add other parameters which you can specify to your liking. Just remember to put the name of the parameter in quotations and add a comma after the end of the parameters. All the parameters can be found here: https://platform.stability.ai/docs/api-reference#tag/v1generation/operation/textToImage

26. Make sure there is no checkmark next to the toggle “Private”

27. Once you are done click on “Initialize Call” (If you tried it before, the button will say “Reinitialize Call”)

1. Click on the ‘Workflow’ tab in the far-left menu.

2. Within your workflow, click on the square with a dotted perimeter which says “Click here to add an event…”

3. In the menu which appeared, click on the item “Element” in the left column.

4. In the list of options on the right, select “An element is clicked”

5. A new menu window will appear. In it, click on the drop-down menu next to the word “Element.”

6. From the drop down menu, select “Button Generate”, or whatever name you gave to the button you made in in Step 4.12 of the original app creation manual.

7. Exit out of that window.

8. Click on the item below which says “Click here to add an action…”

9. From the menu which appears, in the left column, select the option “Plugins”

10. From the menu on the right, select the API call with the name which you specified in step 4.3. In our case, that name would be “Stable Diffusion”.

11. In the menu that appears, click on the box next to “body (input)”.

12. A blue pop-up window will appear, saying “Insert dynamic data”. Click on it.

13. In the drop-down menu which appears, select the option “Input <what you chose for the variable name in step 4.4 of the original app creation manual>”. In our case, that variable name is also “input” so our choice will be “Input input…”

14. In the next window, click “ ‘s value”.

15. Exit out of that window.

16. Click on the box with the dotted perimeter which says “Click here to add an action…”

17. From the menu which appears, select the item “Element Action” in the left column.

18. From the menu items which appeared on the right, select “Set state”

19. In the menu which appeared, click on the drop-down menu next to the title “Element.”

20. From the drop-down menu, select the image name specified by the name of the image box created in Step 3.2. In our case, that name is “Image A”.

21. Click on the drop-down menu next to the title “Custom State.”

22. From the drop-down menu options, select the name of the state which you gave in Step 4.5. In our case, that name would be “poem_img_output”.

23. Click on the drop-down menu next to the title “Value.”

24. From the drop-down menu, select the item “Result of Step 1”

Congratulations! You just created an image generator.

Preview your experience by clicking preview in the top-right corner.

Preview your experience by clicking preview in the top-right corner.

In the app you just created, put in something in the text box, and see if a poem and an image of your desired content will appear below.