--- title: "Cloudinary's hidden magic: AI image manipulation in the URL" description: "Use Cloudinary's AI features to remove items or fill out backgrounds. This is amazing! https://cloudinary.com/blog/generative-fill-ai-powered-outpainting" date: "2023-10-11T09:49:25.000Z" url: "https://timbenniks.dev/videos/tim/007-yutf3yvsdco" youtube_url: "https://www.youtube.com/watch?v=YuTF3yVsDco" playlist: "tim" image: "https://i.ytimg.com/vi/YuTF3yVsDco/maxresdefault.jpg" tags: ["ai-engineering", "content-ops", "performance", "cloud-infra", "frontend"] --- # Cloudinary's hidden magic: AI image manipulation in the URL Use Cloudinary's AI features to remove items or fill out backgrounds. This is amazing! https://cloudinary.com/blog/generative-fill-ai-powered-outpainting Watch on YouTube: https://www.youtube.com/watch?v=YuTF3yVsDco ## Transcript I found this amazing AI tool hidden somewhere inside cloudinary and it's simple and elegant and it will change the game for web developers like you and I a lot of developers work kind of on their own or maybe in a small team and they don't have a full design department or a full shooting studio for media they just get the media as is and you just deal with it and a lot of the time adding a correct crop to an image is really hard to do because the the matter that's on the image that you need might get cropped off in a weird way or sometimes there's way too much on an image you kind of just want to remove like the hot air balloon from that Sky because you need a clean Sky well this cloudinary AI can do that in a really easy way and we can just do it on the URL off the image in the browser well let's go to the browser and I'll show you how that works all right this is use case number one so we are now looking at a fashion show and so the photographer obviously took the pictures exactly like how the models work to get the full view of the look well as you can see there's a few gaps in this grid and imagine your customer or your client whoever you want to call them asked hey can't you just make these Square well when you make them Square you have to crop them out and then you lose the head and the feet of these models well that's an obvious nogo right so what you have to do is actually add some batting on the sides and fill that up with AI well cloudinary has your back so let's have a look so when I press this button I just changed the URLs of these images and cloudinary served the image with AI generated and so of course I did that once before so the generation is fast so look at that the sides are completely filled this is awesome and sometimes there's some interesting stuff happen this is like a little clock here and there's like somebody with a white jacket and here there's Michael Jackson I don't know anyways um this is actually not to too distracting and it works pretty well the looks are still well defined everything is cool so let's have a look at the original image to see what I did with um the just the base URL of this image so you can see here the base URL of this image is just the aspect ratio of 600 by 900 so that's like the tall image right so now now that we know the basics let's have a look at what this generative AI image looks like so there's not that much more here so we have a b gen filled so it knows it has to do something with filling and then we pad it and then we make the aspect ratio 1 by one and so that pad actually looks at okay this is my image and it needs padding added and I have Genera fill setup in my URL so let's have a look what this aspect ratio is now and it's like one by one so it became wider so it actually added stuff in in this case there's like a little Wall came here and a few more people and this just perfectly fine here and so there's actually a bunch of different things that um cloudinary does with different cropping modes and paddings right so we can add a normal pad like we just did or a limited pad or there's a minimum pad and a fill pad and they all kind of do do slightly different things to make sure that your padding is correct but you can also tell it go up North and fill it there or go to the west and fill it there and so there's all this lovely stuff here that works incredibly well all right on to the next use case so this is a picture that I took the other day from my garden and there was a hot air balloon because that's when you take the picture and stuff like that happen but imagine you need this image without the balloon just to have on the background of an image of of a website somewhere well let's remove that balloon with AI and you actually give it a prompt to cloudinary in the URL and it just just does it for you so let's remove there you go and it's completely gone and so let's have a look at what that looks like um when I don't have remove it so it's just a normal image q auto F Auto the width whatever and now let's remove it and now let's open it oh opening a new tab and so now if you can see we have an e gen remove with a prompt and the prompt is just the balloon because it knows it has to remove something and you just tell it the balloon there you go balloon is gone when I actually remove this again balloon is back balloon is gone this is crazy you just do it on the URL and you can give it a prompt holy moly it's relatively simple it doesn't do all the crazy things that you might see in you know mid Journey or whatever but this is an excellent use case for web developers like you and I we just need to get away with things like this and this is perfect for that anyways um think about the possibilities that this gives you in an e-commerce space or removing Shadows from products and things like that it just works incredibly well for that kind of stuff at scale anyways that's what I wanted to show you today um happy coding cheers