DEV Community: Harini Janakiraman

How to create illusion diffusion apps without code

Harini Janakiraman — Wed, 11 Oct 2023 23:25:35 +0000

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/

CMS for Firebase and Firestore

Harini Janakiraman — Mon, 27 Sep 2021 16:44:03 +0000

Building products requires tons of context switching between your database cloud console UI, code editor and tinkering with CLIs on terminals for deploying cloud functions.

Google Firestore is great for building and launching scalable apps fast on the serverless stack. There is a drawback though - the Firestore UI looks like this.

It is hard to navigate the nested document store and the UI is not intuitive. I have personally faced this challenge many times when building products on Firebase. Only developers have access to the data and you don't want to waste their time to build yet another internal portal or data download script. This is one of the main reasons why we built Rowy - an open-source platform to manage your data in an intuitive spreadsheet-like UI. Say goodbye to emailing that "vFinalFinal" Excel sheet.

But that is just the tip of the iceberg. We also questioned why cloud functions need to be built the way they do now. From starting with a boilerplate code on editors to deploying using CLI on terminals to finally looking at the logs on Google Cloud console. Why?

We wanted to flip the script by making the process of building and deploying cloud functions effortless, right in the browser and in the view of your data. No Devops, CI/CD, CLIs, reading docs. It just works.

While we are at it, doesn't it also make sense to have pre-built commonly used functions and extensions to connect to your favorite third-party tools? We did just that.

With a goal to help developers focus on building their product functionality fast, we built Rowy with ❤️. Our code is open-source, you fully own your data and your data stays on your own GCP/Firestore project.

Let's see how you can build on GCP within minutes

First, you can get setup quickly with this link below to deploy Rowy on your Google Cloud/Firebase project.

Once setup is complete, you should be able to access your Firestore data in a collaborative spreadsheet-like UI and perform any CRUD operations.

This is just the start. There is so much more you can do here.

Build your data model visually

As a first step in building any product, you can build your Firestore data model visually by simply clicking the "Add Table" and "Add column" buttons. Choose from 30+ fields including complex data fields like images, files, richtext, subtables, code, flexible fields like json and more.

Powerful and rich spreadsheet-like UI

Manage your data intuitively on a familiar spreadsheet-like UI with all the functionality and features that come with it.

⚡️ Bulk import and export data - csv, json
⚡️ Filter and sort data fields
⚡️ Create your custom flexible views by locking, freezing, hiding columns. Admins have full control over their data views for different user roles, i.e., you can create data portals customized for your operations team, marketing, developers, PMs ... or any user really

Collaborate with your team

Invite your team members to collaborate on the data and give them specific granular CRUD permissions at a table-level and field-level using custom roles.

Connect to your favorite tools

With ready-made extensions to Typeform, SendGrid, Algolia, Twilio, Bigquery and more, you can connect to your favorite third-party tools. Also, you have full flexibility to customize these pre-built extensions or build your own.

Multiple views for the same data collection

You can have more than one way to look at the same Firestore collection by using flexible Table views with unique Table IDs. You can build table and column views for your different team members with unique roles.

Default values, data validation, required fields

Allowing non-technical users to make changes to production data is scary. To address this, Rowy not only allows permission and access controls at a table-level and field-level but also the ability to validate any field-level CRUD operations with regex checks to ensure critical data is always accurate before updating your Firestore document. You can also define default values for fields (static, null, custom) and make fields mandatory for row creation.

Write cloud functions

You can build cloud functions that are triggered on any field-level data changes. Easy deploy, no need for terminals, CLIs and boilerplate code. Import npm packages and use any API. Read full documentation here.

If you like what we are building, give Rowy a quick spin on your Firebase project using the button below.

This runs RowyRun (an open-source, cloud run instance) that operates exclusively on your GCP project. We will never have access to your service account or any of your data. Alternatively, you can also manually install using the steps detailed here.

Join the community of developers building on GCP/Firebase using Rowy

😻Github 💬Discord 🐦Twitter

Please give us a star on Github to get the latest updates 🌟 We would love to hear from you and get feedback 👋