# Dress Room
\
**Clothes Changer**
**Description:**\
This feature allows users to change the clothing in an image. By utilizing two different images (for example, a model image and a clothing image), you can create a new combination.
**Usage Steps:**
1. **Image Input:**
* In the **"Image 1"** field, input the image containing the model or person you want to modify.
* In the **"Image 2"** field, input the image that contains the clothing you wish to change.
2. **Initiate the Process and Retrieve the Output:**
* Once the process is complete, the generated results will be accessible via the **"output\_list"** 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.
* After these steps, the Aicado AI Connector plugin will be ready to use.
This setup enables you to integrate the Clothes Changer feature into your project, allowing you to swap and combine clothing between 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. Select the **"Dress Room"** AI model from the **AI Model** tab and enter the appropriate data. For this model, the designated fields are:
* **image1**
* **image2**
**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://.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.
**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\://\.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**
* **image2**
**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.
#### "Data Types” (Veri Tipleri) Tanımlama
**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.r.
**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.
**Adding a New Action**
* Click on the “Click here to add an action” link.\
From the menu that appears, select the **Make changes to a thing** option.
**Setting the Thing to Change**
* In the **Thing to change** section, perform a search for **“All Outputs”**.
* Use a constraint by matching the **run\_id** field with the **run\_id** parameter received from the event.
* Then, append the expression **:first item** to select the first entry. This will update the first record among the existing **“All Outputs”**.
**Updating the Fields**
* Select the **Change another field** option to update the following data:
* **expense = expense**
* **output = output**
* **output\_list = output\_list**
* **run\_id = run\_id**
After completing all these settings correctly, the corresponding fields in the **“All Outputs”** record will be updated.
---
# 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/dress-room.md?ask=
```
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.