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.

Step 1: Create an account with an image generator provider.

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.

https://lh6.googleusercontent.com/q_qJmw6YieJrsKlxNrQzUT8Hh_gdC_0JqTVOLoGKxUqp69b5xxrzTzO9-Yzkt4KHfUX_xWols5wB0kqogJzCrG_FNM2XjPop4osXYoJH9Oopb9qArf89Nwy_vm-p_4v0G2OESydEagZt5YELxjmrdPQ

Step 2: Setting up an API key with Stability.ai

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

https://lh5.googleusercontent.com/5_A1SWymMFIPhrr3LkBQUFCTiH2IPcz3V54zDQsuRltrwEHJd-Pz-jUEguAb3hJ5DUeCdh9xVakY32Xw5LBvsVrXTkb3G2HhBRlUcagqMboAMFlUwawOIG0fA97Q6BD8V7Xa2X7s8Cg_UGnTcyrfBM0

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.

https://lh5.googleusercontent.com/uVVVlHDCaODWx8oVyuMJsXYo-t0NRGBS5qkTn_Hx9Y_aYvZ-N75DOrCl8YwSJx1SRR0olccVKk3336C0sBUJkjj5qGf0iLyFpZrk2tYHAX4Bs0dDjtdb0kxzjdl39uSOnO8JcEaLjsrNHDfBKw5uO6M

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

https://lh5.googleusercontent.com/ULSsaKsjXy1HTrEOKgqKAebst1RRTLczVwQPOW4YQIurdcR1EFN3SOfaqAm6HZ12eVW3Ty526_LDAxImiuedB1JSFlke9v6LkHNNviYdzDqHA8xVYfMkrcimA4OfFm09z8PQnxX5QjMm5Na2G0fYbp0

  1. 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.

https://lh3.googleusercontent.com/Q7RWasagBKUamGWfKKnVTOBmSWHDESdYq15ozSgh0-q-FFsQwjlYGBvgWuqm97Lftukij7vfUaa4CJiF4pNa0wO28_JdOj5r8NfQ6gty2H_P3vx_LLOogJgQ0ey75KhTxUtFfotnjKddRVVCGBHPcxA

Step 3: Setting up a slot in the app front-end where the image will appear

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

https://lh6.googleusercontent.com/cjyiKYd6AMgz_hZ98hlkkfMa-4itYo_AwB55Pi5lPa2NNEuM4zu1FELEgmWkmJ_Um8ZSAKoy9j4sXwLiZ9C5dYGST-jtNSJteyzpw724sKaA8l8ptdd1nuvRsSK9JNJg2kAT2fi4pyiQGd8ikEBbot8

  1. 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.