Background Changer
Last updated
Was this helpful?
Last updated
Was this helpful?
Description: This tool automatically changes the background using artificial intelligence. With this feature, you can easily modify the backgrounds of your uploaded images.
Usage Steps:
Input:
Upload an image in the "Image 1" field.
Enter a descriptive text in the "Text 1" field.
Output Retrieval:
The modified image with the new background will be accessible via the "output" state.
Detailed Setup
Installing the Plugin:
In your application editor, navigate to the “Plugin” tab and open the “Add Plugins” section.
In the search box, type “Aicado AI Connector” and select the relevant plugin from the search results to complete the installation.
Once these steps are completed, the Aicado AI Connector plugin will be ready to use.
This setup ensures that the Background Changer feature is properly integrated, so you can easily swap backgrounds in your images using AI.
At this stage, two different tokens are required for the plugin to function correctly. The first token is the Aicado Access Token. You can obtain your Aicado Access Token by following these steps:
Log in to the Aicado AI website.
Navigate to the Profile or Settings section.
Copy the “Aicado Access Token” that appears.
After completing these steps, you can move on to acquiring the second token.
Then, paste the copied Aicado Access Token into the corresponding Access Token section within your application and save it. This step is necessary to authorize the plugin.
In the next step, you need to fill in the "your_api_token" field. Follow these instructions:
In your application editor, go to the Settings section.
Enter the API tab.
You will see an option or button labeled “Generate a new API Token.”
Click this button, then copy the generated API Token.
Finally, paste the copied value into the "your_api_token" field within the plugin.
This will complete all the required tokens for the plugin.
Then we add a button and create a workflow for this button.
Properties Area and Usage
This section contains the essential information required for the application to operate. You can select the "Background Changer" AI model from the AI Model tab and enter the corresponding data. For this model, use the following fields:
text1 – to input a descriptive text
image1 – to upload the image whose background will be changed
Webhook (Callback) Settings
To process responses from the AI model, you need to define a “webhook response.” This setup requires the root URL of the Workflow API. Follow these steps to obtain the URL:
Navigate to Settings > API.
On the API page, take the displayed root URL and append the event name you created previously in Backend Workflows.
For instance, if your event name is “get-response”, the resulting URL might look like:
With this configuration, the data from the AI model is transmitted via the defined webhook to your backend workflow, allowing your application to execute the necessary operations.
Adding “Aicado AI Connector” to the Button Workflow
Adding an Action to the Workflow
Open the workflow screen for the button you previously created.
Click the “Click here to add an action” link and select the Aicado AI Connector action from the list.
Defining the Model and Mandatory Fields
AI Model: Select the model you wish to use from the dropdown list.
Response Webhook URL:
This should be in the format:
https://<my‑app>.bubbleapps.io/api/1.1/wf/get-response
This URL points to the get-response workflow you created in the backend.
Model Customization Fields for “Swap Faces In Photos”:
Add the following fields:
image1
text1
Save and Test
Once all fields are filled in correctly, save the workflow.
Run your application in Preview mode, click the button, and verify that the response returned from the model is processed into the database through the get-response backend workflow.
Once you complete these steps, your button will trigger the selected AI model, and the incoming responses will be stored in the backend according to the parameters you have defined.
Saving the Output and Adding Run ID
Creating a New Record (Create New Thing):
In your button’s workflow, add the “Create a new thing” action.
For the Type field, select the AI Output data type.
Populating the Fields:
In the run_id field, assign the Run ID returned from Step 1 (Aicado AI Connector). For example:
Save and Test:
Save the workflow.
In your application, choose the desired AI model and click the button.
The model will run, and its response will be stored in the AI Output record in the database, including the run_id.
Your system is now fully set up: once you select your AI model and click the button, the process will execute automatically, and the output will be saved with the corresponding Run ID.
Defining “Data Types”
For your application to operate smoothly, you need to create the following fields in the Data Types section with exactly the names (in quotes) and types specified:
Data Types Definition:
expense — number
output — text
output_list — text (list)
run_id — text
Important Notes:
Write the field names exactly as shown above; do not add any uppercase/lowercase variations, spaces, or underscores.
Ensure that you select the correct types (Number or Text).
Mismatched names or types may cause errors during data recording by the backend workflows.
For the plugin to function, you need to define a "backend event." Follow these steps to complete this process:
Go to the Backend Workflows section.
Click the New API Workflow button to create a new API workflow.
This step is essential for the plugin to process the required data appropriately.
Creating a New Backend Workflow and Configuring Parameters
Follow these steps to create a backend workflow that will process responses from the AI model:
Workflow Name: When the new workflow window opens, give it a name. For example, you might name it "get-response".
Expose as Public API Workflow: Make sure to check the “Expose as a public API workflow” option. This setting allows your workflow to be accessed via an API endpoint.
Add Parameters: Click the “Add a new parameter” button and add the following parameters:
output
Type: text
output_list
Type: list of text
run_id
Type: text
expense
Type: number
Configure Each Parameter: For each of these parameters:
Activate the Optional checkbox.
Ensure that the object type remains as a JSON Object.
These parameters are critical for the correct functioning of your system. Please make sure that you add all of them without any omissions to ensure the backend workflow can handle and process the incoming data properly.
Once these steps are completed, your backend workflow will be correctly configured to receive data from the Aicado AI Connector and process it according to your application’s requirements.
Creating a New Backend Workflow and Configuring Parameters
Workflow Name:
In the opened window, assign a name for the workflow. For example, you can use “get-response.”
API Workflow Settings:
Check the “Expose as a public API workflow” option. This setting makes your workflow accessible as an API endpoint.
Adding Parameters:
Click on the “Add a new parameter” button.
Configure the workflow with the following parameters:
output (text)
output_list (list of text)
run_id (text)
expense (number)
For each of these fields, ensure that the Optional checkbox is activated. Also, verify that the object type remains as JSON Object.
These parameters are critical for the correct operation of the system, so please make sure to add all of them without any omissions.
Now it's time to test your project using the button you created. For the Background Changer model, please verify that both the text1 and image1 fields are properly filled in before testing.
