How to create illusion diffusion apps without code

At the intersection of art, creativity and AI - illusions diffusion models have captivated our minds. 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. From mind-bending images blended with the optical illusions generator: logos with flower fields, faces with graphical backgrounds and more. 

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. We will be using the best illusion diffusion without code using replicate. 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 for a quick start. 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 by Step Tutorial

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.

   
   

2. Clone the illusion diffusion template

   Go to the templates section and pick the template. This will give you the entire workflow in one click.

   

   
   

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. This node of Replicate lets you use multiple load models in a workflow.

   

   Then add this key in the two Replicate nodes.

   
   

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 API?

Shipping this template gives you an API endpoint URL. You can use this directly in your frontend apps that you build either with nocode builders like Bubble, Framer, FlutterFlow, GlideApps, Toddle, Bravo etc on front-end framer works like Next.js, React, Vue.js, Flutter, iOS, Android apps etc.

🚀 This endpoint is highly scalable on Google cloud and can handle from 1 user to millions of users with cost efficiency.

You can do a quick test by using this API endpoint URL in your browser and appending the following param values to it: First a text prompt and then a image URL with which you want it to be blended.

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.

This endpoint in the template is a GET request, but you can change it to POST and add authentication if you want it to be accessible by only validated or paying customers. You have full control. Check out BuildShip Documentation for further details on how you can expand on this template further.

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

  Every workflow has a 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.

  
  

  

  
  

• Replicate API to remove image background, then storage image to Cloud Storage

  Incoming image from the query parameter, is first passed to the Replicate background remover API to prepare it for the illusion diffusion model. This AI media generated is stored in the BuildShip Cloud Storage.

  
  

  

  
  

• Wait and then convert image to black-and-white

  You can then wait for a few milliseconds and then convert the image to black and white as the illusion diffusion model expects it in b&w. For this we will be using a simple script node. In BuildShip, you can run any piece of javascript or typescript code and even use any NPM package.

  

  
  

  For converting to black and white, we can simply ask AI to generate a node script code, here is generated one with jimp module.

  import Jimp from 'jimp';

• Rescale image to required dimensions

  Upscale the B/W image to target resolution using jimp code node.

  

• Replicate API - Illusion Diffusion node

  Generate illusion diffusion image with the given prompt from the request API query parameter and processed image - to generate image using andreasjansson/illusion model

  

  
  

• Return node

  The generated image stored in the cloud storage has an URL that is then return in the return node. So this can now be used in any frontend application easily.