Background removal with No Code & Bubble.io

Removing Background Images with No Code and Bubble.io

Here's how you can remove the background from your images in your Bubble app just like this website here and I'm going to show you how I've built this simple page and API connection to remove the green background from this image of me. One of the images that we use on our videos and if you want to see more videos like this then click the link down in the description because we've got hundreds of Bubble's tutorial videos just like this one but I'm going to dive right in now into the API here.

Setting Up the API Connection

So I've signed up for an account with these guys and I then I've gone into the API documentation and I've looked for their image file, C, URL and I've taken what they've got written here and translated that into the Bubble API connector. So I've added the Bubble API connector, I've added the name remove.bg and then I have to authenticate because it's like a password it's how you know if I used the service a lot they'd want to know who to bill which account so I add the private key in header it's got this name and here's my key value which I'll be deleting as soon as I publish this video and then I go ahead and I add an API call and so I can name this anything I like I've said upload and process I've set it as an action and the data type as image.

Understanding API Response and Form Data

Now in 99% of our demonstrations with a Bubble API connector this is set to JSON because we get a load of text data in JSON code back but actually this API in some ways is nice and clean it just responds back with the processed image. Then I need form data again most of the time we use JSON but in this case we use form data and then I have the parameters image file and I set that to be send file.

API Documentation and Implementation

Now I've got all of that from this documentation here which is here's the end point and then I've actually not added in the size parameter doesn't need it but we can see that this goes in the header just explain that and then we have image and then the file. Now you can do this two different ways you could just point at an image URL and you could do that just as easily with Bubble but I've gone with image file because the image might not be a public image if you've got the right privacy rules set up around uploading files and images and attach files in your privacy rules then your images even if you were to direct links them may not be accessible and so this third party service wouldn't be able to pick the image up from the URL so we're actually just sending the file instead we're not saying look here here's the file we're saying here's the file okay then let's dive in a little bit deeper I had to initialize it by uploading a file here and I've got no errors and so it's successfully initialized that means that I can go onto my page and my page is called image demo and on the page I have a custom state that I've called processed image and it's of type image because I want to be able to display the results by adding an image element to my page and saying go to my custom state and show the process image it's just my way of recalling it without necessarily saving the image to my database.

Image Processing and Storage

Now the image is not saved to a field in my database but the image will take up space in the file manager of my Bubble app so I am still taking up space of my Bubble app quota by doing this to the image I've then got an image uploader and I've got a button so let's have a look when the button is clicked I run my API call now I see this in here and if I wanted to find it again I could go into plugins and search for my remove background and so it's remove background upload and process and that's just because that's exactly what I've named it here okay so yours may be different then I say take the result of step one and set the state so I'm populating the custom state with the image and the end of all of that and it literally just takes seconds to do is a rather quick and impressive background removal tool built completely with no code using the background removal API and combining that with my Bubble app.