Now let's implement another AI feature which will be only for images. It's going to appear right next to the filters and it's going to be used to remove background. So let's go ahead and let's go inside of the toolbar component. Let's find the filters. Here they are.
So I'm just going to copy this implementation, paste it below, change the label here to be remove background And I'm going to go ahead and use the icon called Square Split Horizontal from Lucid React. So make sure you have added the import for that. There we go. The active tool here will be Remove BG And on change active tool will be the same thing. So as always, simply confirming your types that you have the active tool remove-bg.
Perfect. And it should now already be visible right here. There we go. You can see that when an image is selected, we have the remove background. Let's just confirm that our shape does not have it and that our text does not have it either.
Perfect. So only images have the remove background button. Now let's go ahead and let's add the remove background sidebar so we can actually copy the recently created AI sidebar because it's going to be quite similar. So I'm going to copy and paste the AI sidebar and I'm going to call this remove-bg-sidebar.tsx. Make sure you are inside of the newly created remove background sidebar and replace all instances of ai-sidebar with our new remove-bg-sidebar.
Of AI sidebar with our new remove BG sidebar. Go ahead and confirm that the active tool checked is remove BG. And in the title here, let's go ahead and change this to be background removal and let's go ahead and write remove background from image using AI. There we go. So now let's go ahead and let's check it out but before that we just have to add it to our editor.
So where we've added the AI sidebar let's copy and paste this and let's now add remove BG sidebar. I will modify the import to use the add features. There we go. And now let's try it out. I'm going to refresh everything here and I'm going to go ahead and add a random image here and when I click on remove background there we go, background removal remove background from image using AI and we are now going to modify this as well so the first thing I want to do inside of the sidebar is actually display the image for which background we are going to remove.
So for that we are actually going to need the image from next image. So import image from next image. We now need to find a way to display the current, to actually, you know, get the URL of the current active image. So we can do that the following way. First of all, let's remove all these mutations and things, right?
We only need onClose and we are not going to be using the text area here. Let's remove this disabled and let's remove this. So we have no errors here. So what I want to do here is I want to get the selected object. So for that I can use editor selected objects and simply get the first one in the array here.
And then I can get the image by using selected object question mark dot slash original element dot slash current source and we have to add okay let's just fix this so selected object right here and this is the problem. It says that the original element does not exist but if you add a console.log over the selected object you should be able to see the original element. So let's just check that first so you can see where I got that from. So I'm going to go ahead and add an image here. And usually have the selected object here.
And inside of here, you should be able to find, there we go, the original element. And inside of the original element, there should be the current source. There we go. You can see the image from Unsplash URL. There we go.
So we just confirmed it's there. So in order to access it, let's go ahead and add tsignore here. Now we have the image and let's go ahead and write image source like this and what I want to do first is the following. So below the tool sidebar header I want to go ahead and check if we don't have the image source. Let's go ahead and do the following.
Let's create a div here with the class name of flex flex call gap y4 items center justify center and flex1 and let's render the alert triangle from Lucid React. Let's give it a class name of size four and text muted foreground. Ensure that you've added the import for Lucid React so I'm just gonna add it here and below that we're gonna go ahead and add a paragraph feature not available for this object so in case we manage to open that sidebar for something that doesn't have a image source we're gonna display an error So class name for this will be TextMutedForeground and TextExtraSmall. Great! And now let's go ahead and let's render if we have an image the following image source to be precise.
So we're gonna go ahead and remove this to be a div with a class name. And it's gonna be the following. So it's going to be dynamic. So prepare CN here. In the first argument, we're going to add relative, aspect, square, rounded, medium, overflow, hidden, transition, and background muted.
And then we're gonna go ahead and for now, write false and opacity 50. We are later gonna change the false to be a dynamic variable for whether we are removing the background or not. So while we are removing the background, we're going to lower the opacity so it indicates that something is happening. And inside of here, we're going to go ahead and use the image to add the image source here. Fill, give it an alt of image and the class name of object cover and then below all of these all of this div we're gonna add a button here which will say remove background we're gonna give this a class name of width full.
Like that. There we go. And let's go ahead and create the on submit method or we can just use the const on click here. For now, just console log removing. And let's assign the on click.
On click. There we go. And let's just confirm. Did we add this inside of the editor? We did, right?
Remove background sidebar. We did, perfect. So let's try it out now. So I'm gonna go ahead and refresh. I'm gonna add, first of all, an image from Unsplash.
And I'm gonna click on the remove background and there we go you can see that it now shows that image here so let's go ahead and just fix the padding a bit looks like the padding is definitely missing here how about I add p4 there we go and space y4 can I do that okay no I'm gonna do the following so I'm gonna open a div here and give it a class name of padding4 space y4 and then I will wrap the entire thing inside of the scroll area? There we go. Now it looks better. Perfect. So make sure that inside of your next config you have the instructions for all of these remote patterns.
Because now is the time where errors can happen because we are rendering the source inside of the next image component. So try it out first on Unsplash image. It should work because we have images on splash.com. Then let's go ahead and let's try an astronaut riding a horse on Mars. HD cinematic.
Let's try and generate this using AI now. There we go. So we have this and let's go ahead and click on remove background and there we go. It can load this as well because I've added replicate dot delivery. If you get an error make sure that you copy this the host which it says and simply paste it here.
Great and let's just go ahead and fix it looks a bit stretched so let's go inside of the remove background sidebar here and let's fix this class name to be object cover. There we go. So we have that one and there's one more that we have to try, which is the image upload, right? So, all right, these two are working fine. Now let's go ahead and let's try the upload image here.
So I'm going to upload this image that I have. Let's go ahead and wait a second. There we go. So we have this image as well. And let's click on remove background.
And there we go. It can load that as well. So if you're getting any errors for this make sure that you have all of these remote patterns right here perfect and now let's go ahead and let's actually implement the functionality to remove the background So we are actually going to do this inside of our existing AI route group. So inside of source app API route AI and we can remove everything else. So I'm gonna go ahead and at the top I'm going to add another post which will be slash remove dash BG.
And inside of here we're going to go ahead and add a Z validator again. And we're going to validate JSON. It's going to be z.object and it will simply accept an image, which will be, you know, the URL. Great, now we get the asynchronous controller here with the context inside of the params and we can destructure the image from CRequestValid.json Now let's go ahead and let's get the... Well now we have to create the replicate model So I'm using the removeBackground model You can simply search for something like that.
So inside of the search here, let's try remove background. And let's see what pops up. So I look by runs, right? So there's this one. I'm using this one in my project.
So this one was more recently updated, but this one has more runs monthly. You can also try, you know, any other one if you like. I used this one. R-E-M-B-G. So like this short one.
And let's go ahead and find this. So I'm going to click on the API here. And I'm going to follow the instructions right here. There we go. So I will copy this part.
Right here. Let's paste it here. There we go. So this is my input and the image will literally be the image from my request validation here and this will stay the same and there we go, we now have our output here, So this is all in one line of course. And now let's go ahead and properly type this.
So again, this will be unknown. And then we're going to define the response to be output as string. And then we can return C.JSON data and simply the new image and let's indent this. There we go. So we just have our new endpoint.
Now what we have to do is we have to generate the use remove background mutation. So let's go inside of the... Where are my features? Right here. So we can copy the use generate image and rename it to use remove background.
And now let's go ahead and fix these types here so instead of looking at the generate image for the response type we're going to be looking at remove background and same thing for the request type so remove background let's rename this to use remove background actually Let's rename this to use remove background. Actually, let's rename this to use remove, you know, BG. So it's shorter. This can stay the same. And in here, we also have to change this to remove background.
And everything else is actually the same. Perfect. Now let's go back inside of the remove sidebar. So remove background sidebar where we are rendering our image here. And let's go ahead and actually add the mutation here.
So const mutation will be use remove background. Make sure you've added the import right here. And while we are here, we can remove all unused imports. There we go. And now inside of this onclick right here, we're going to go ahead and do the following.
So I'm going to go ahead and add a comment to do block with paywall. So we currently don't have that. And then let's go ahead and do mutation, mutate and simply pass in the image. Oh, the image will be image source. There we go.
And then in the options here add on success. Oops, on success. Destructure the data. And simply call editor. Add image.
Data. There we go. If we've done this correctly, this should work just fine. Let's try it out. So the remove background, of course, can only work if the image has, you know, the proper, it has the proper look for the background to be removed.
So you can't pick one with a bunch of colors. So I'm going to upload my own image again, like this one, because it has almost like a blue screen behind it. So it's easy to separate the subject from the background. Let's go ahead and click remove background and let's click remove background. So now we have no indicators that it's loading.
So that's one thing I forgot to add. So we're gonna do that in another iteration but there we go! Background officially removed! Amazing, amazing job! And now let's just go ahead and wrap up the chapter by adding the proper disabled states here.
So once we have the mutation here what we can do is we can first of all change this false to be mutation is pending like this and disable the button if mutation is pending. And now let's try this again to see the effect. There we go. So you can now see that something is happening while the model is loading. Let's wait a few seconds for this to finish.
And then we're going to be able to see our result again. There we go. Amazing, amazing job.