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.
Today, we will show you exactly how to build this 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.
https://fh48ty.buildship.run/illusion_diffusion
🚀 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.
?prompt=a surreal landscape with flow fields&image_url=https://asset.brandfetch.io/id20mQyGeY/idyE-PQqf2.png
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.
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.
Building with low-code gives you the power to ship fast while maintaining full control over extensibility and flexibility to build your ideas exactly the way you want.
Get started here: http://buildship.com/
Top comments (0)