How to use illusion diffusion model to generate an image combining two images without code in your apps

If you are on Twitter (I mean 𝕏), you must have seen a recent wave of AI-generated images of QR codes, spiral images, and brand logos superimposed on AI-generated images with illusion diffusion model. This is an interesting trend and we want to show you exactly how to build this and use it in your apps - with no code. But of course, you can tweak the code anytime to make the workflow your style.

Let's get started. For this tutorial, you will be using BuildShip's ready-made template. BuildShip is a low-code visual backend builder powered by AI that lets you build a seemingly complex backend with ease. This template comes with prebuilt steps for removing background from an image, converting the image to black-and-white, and then uploading it to storage for use in the illusion diffusion model with your prompt.

Step 1: Create a BuildShip account

Create an account on BuildShip if you do not have one already. Once you create the account, you will be directed to create a project - you can give it a name and select the region you want the app to be deployed to.

Step 2: Clone the "Combine images" template

Go to the templates section and pick the "Combine Images" template.

Step 3: Add your Replicate API key

Next, add your Replicate API key by clicking the context menu and clicking secret as shown below. Your API key is securely stored on Google Cloud Secret Manager and never exposed on the UI. This makes it super secure to use in your apps and web apps.

Step 4: Click Ship and you are done, for real!

Now you are ready to click Ship, button. This will instantly deploy this workflow and give you an API URL that you can start using in your apps.

How to use this generated API?

You can do a quick test by using this API endpoint URL in your browser and appending the following param values to it.

image_url=https://…&prompt=a surreal landscape flower fieldwith river and blue sky

To use this API in your app, web app built with no-code tools like Bubble, FlutterFlow, Adalo, Bravo Studio, Toddle, etc., or a frontend framework like Next.js, React … On your app, you will have a simple form or input fields taking in your image URL and prompt text passing that to this API endpoint, and using the generated image to display back in your app.

For complete documentation on how to use POST requests, check user is an authenticated user, and more, check out BuildShip Documentation.

How does this work?

This might seem like magic, so let's unpack how this works and how you can tweak it any way you like.

Trigger node

This is the core node that marks the beginning of your workflow. In this case it is an GET API request and so anytime your shipping API endpoint is called with the required params, it will trigger the workflow.

Remove the image background using Replicate

Convert image to black-and-white

using javascript node and NPM

Illusion Diffusion node

Generate illusion diffusion image with the give prompt and processed image

Return node

Finally