Image manipulation by use of Cloudinary generative AI

Project Showcase
1

Had to unpublish the app as the Cloudinary use went through the roof

Main features

  • Create new image based on an existing image and fill the area outside the existing image with AI generated stuff
  • Replace something in an existing image e.g. change a shirt to a jacket on a person
  • Upload an image to Glide
  • Auto-upload the image to Cloudinary
  • Remove the image from Glide

image
image414Ă—873 48.7 KB
image
image412Ă—869 36.8 KB

** Try it out yourself **
https://demo-cloudinary-ai.glide.page
Please remember - this app is for demo purposes only. If you want to do some real production - then copy the app and use your own Glide account and Cloudinary account.

Idea
The app lets you use some of Cloudinary’s AI capabilities.
You can either upload images to the app - which is then moved to Cloudinary - or use some of the existing images.
Two different AI capabilities are presented - Generative fill and Generative replace. A number of parameters must be supplied in order to give the AI bot information about what to do.

Building your own version

Copy and modify version:

Prerequisite

  • A Cloudinary account
  • A upload preset is to be setup inside Cloudinary
  • A folder for your uploaded images is to be setup inside Cloudinary

If you haven’t got a Cloudinary account yet the please consider signing up by an invitation link. This will give some extra credits for me and allow for more free transformations, file storage etc. Mine is:
[Image and Video Upload, Storage, Optimization and CDN]
(Invite for Cloudinary)

But you could also ask some of the other Cloudinary gurus of the community for their invitation link.

Tricks

  • Input you Cloudinary folder path (in column Cloudinary folder path) in General table

  • Input you Cloudinary folder (in column Cloudinary folder) in General table

  • Create a folder in Cloudinary e.g. DemoAIfromglide

  • Create a Auto upload mapping in Cloudinary (URL prefix: https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/xxxxxxRRB29pZ2kwVHF72/pub/)

    image
    image1341Ă—492 57.5 KB

  • Create an Upload preset in cloudinary (found in Settings)

    image
    image1126Ă—465 58.6 KB

  • The app gets its assets saved to a specific folder - this can be determined from the table “Image upload” when you have uploaded one image (don’t click the button - this will move the image). Go to data view and copy the data in the column “Image name full”. It will be something like:
    https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/xxedxRRB29pZ2kwVHF72/pub/

10 Likes
2

Very interesting post. Thanks for sharing!

2 Likes
3

You look great in a tuxedo Kristian. What neat image manipulation.

1 Like