AI Powered Image Transformations in Nuxt with Cloudinary

AI is currently storming the IT industry in all areas from software development to regular daily usage. I was pleasently suprised to learn that Cloudinary already provides generative AI support for image transformations that allows to modify your images on the fly.

How cool is that? For me this is an amazing thing and when Colby contacted me to implement this feature in Cloudinary module for Nuxt, I instantly started reading and learning about it. It is a great feature that is very easy to use and brings a lot of value to image transformations.

In this article, I would like to introduce you to how easy it is to use Cloudinary AI Powered Image Transformations in Nuxt applications by using the module.

Enjoy!

🟢 AI Powered Image Transformations in Nuxt with Cloudinary

If you have not yet used Cloudinary module for Nuxt, I highly encourage you to do so as it is a great module for image media management like optimization, transformation, and storage. You can learn more about it here or by watching introductory video here.

Let's take a look at following image:

It is a regular image of shoes. Normally in NuxtCloudinary, we could create such image element as follows:

  <CldImage
    src="images/sneakers"
    width="900"
    height="900"
    alt="Sample Product"
  />

This would allow us to benefit from Cloudinary automatic image format and quality adjustements to deliver optimized media to our users.

Recolor

Let's imagine now that we would like to transform this image - I specifically don't like the color of the shoe laces and would prefer it to be purple instead. We could do it like following:

  <CldImage
    src="images/sneakers"
    width="900"
    height="900"
    alt="Sample Product"
    :recolor="['shoelaces', 'purple']"
  />

And the result would be like following:

Remove

Let's continue with the amazing transformations, shall we? For some reason, I decided that I don't like the shoe laces on my shoes (crazy me :D) and I would love to have an image of shoes that wouldn't have such element on it. We could use NuxtCloudinary to do so like following:

  <CldImage
    src="images/sneakers"
    width="900"
    height="900"
    alt="Sample Product"
    remove="shoelaces"
  />

And the result would be like following:

Replace Background

And finally, the most recent feature in the module - replace background! Normally, I could remove background from an image and add a custom one by myself but let's say that I am quite lazy and would like to use AI for that. Nothing easier in Nuxt Cloudinary. Let's replace background of the image so that it is something different.

  <CldImage
    src="images/sneakers"
    width="900"
    height="900"
    alt="Sample Product"
    replaceBackground
  />

And the result would be like following:

Apart from just setting the prop on the component which would let AI generate the background on its own, we could also pass a string or an object to it so that the generated background would meet our needs. We can do it like following:

  <CldImage
    src="images/sneakers"
    width="900"
    height="900"
    alt="Sample Product"
    :replaceBackground="{ prompt: 'fish tank', seed: 3 }"
  />

How amazing is that? :)

If you are interested in learning more about Generative AI transformations, check out this link. And if you are interested in learning more about Nuxt Cloudinary in general, check out following link.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to use generative AI for Image Transformations in Nuxt with Cloudinary!

Take care and see you next time!

And happy coding as always 🖥️