# Background Changer

**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:**

1. **Input:**
   * Upload an image in the **"Image 1"** field.
   * Enter a descriptive text in the **"Text 1"** field.
2. **Output Retrieval:**
   * The modified image with the new background will be accessible via the **"output"** state.

***

**Detailed Setup**

1. **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.

<figure><img src="/files/UNTX0GSAaS05NdrjI3Jx" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/xPtn0RinnV1buNbM9D7Z" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/IsALsC4pUJeL5ynx2HtF" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/WYNbi9XseDeDAFIQY7eK" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/T2gg06uQuBjpDSrz7ZdI" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/bmhm8qx7ffAmj6CQMfVs" alt=""><figcaption></figcaption></figure>

Then we add a button and create a workflow for this button.

<figure><img src="/files/UHXMqqo8faxX9DOZtYq5" alt=""><figcaption></figcaption></figure>

**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

<figure><img src="/files/wGTqS7O35ziWdFKeUlju" alt=""><figcaption></figcaption></figure>

**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:

  ```
  bashKopyalahttps://<your_app_name>.bubbleapps.io/api/1.1/wf/get-response
  ```

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.

<figure><img src="/files/fzoLrzj588H3miYCI2yA" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/kGzlLcH9qNoHNseOpLES" alt=""><figcaption></figcaption></figure>

**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:

  ```
  rustKopyalarun_id = Result of Step 1 (Aicado AI Connector)'s Run ID
  ```

**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.

<figure><img src="/files/V8HKIjwGdhkQazdiCH4F" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/pJ9HtDxhl865m8grt0XH" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/Ew9dBM3lkoFRXZX0rIyj" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/6Jzx5aldvBpgUECZfmg7" alt=""><figcaption></figcaption></figure>

**Creating a New Backend Workflow and Configuring Parameters**

Follow these steps to create a backend workflow that will process responses from the AI model:

***

#### 1. Assign a Name to the Workflow

* **Workflow Name:**\
  When the new workflow window opens, give it a name. For example, you might name it **"get-response"**.

***

#### 2. Configure API Workflow Settings

* **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.

***

#### 3. Create and Configure Parameters

* **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**.

***

#### Important Note

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.

<figure><img src="/files/3KJfT86D39JtXIJ3fo6L" alt=""><figcaption></figcaption></figure>

4. **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.

<figure><img src="/files/sX9JanU9DtGlQHX3wmz4" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/TvdpQ5opMTwLOL7FJCmh" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/HxNlDypi4IB1hkZfrjrb" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aicado.ai/aicado-ai-connector-bubble.io/setup-examples-by-models/background-changer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.