Image to Video

Image to Video - User Guide

Description Image to Video is an AI-powered video creation tool that generates videos from a combination of images and text.

Usage Steps

  1. Image Input:

    • Upload the first image in the "Image1" field.

  2. Text Input:

    • Enter the desired text in the "Text1" field.

  3. Retrieve the Output:

    • Once processing is complete, access the generated video 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.

    • After completing these steps, the Aicado AI Connector plugin will be ready to use.

This setup integrates the Image to Video feature into your project, enabling you to easily create videos using AI by combining your images and text.

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 AI model you want to use from the AI Model tab and enter the corresponding data in the designated fields. For this model, the following fields are used:

  • text1 – for text input

  • image1 – for image input

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:

    https://<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.

1. Adding an Action to the Workflow

  • Open the Workflow: Open the workflow screen for the button you previously created.

  • Add Action: Click the “Click here to add an action” link and select the Aicado AI Connector action from the list.


2. Defining the Model and Mandatory Fields

  • AI Model: Choose the desired AI model from the dropdown list.

  • Response Webhook URL: Ensure the Response Webhook URL is in the following format:

    bashKopyalahttps://<my‑app>.bubbleapps.io/api/1.1/wf/get-response

    This URL directs the response to the get-response workflow you set up in the backend.

  • Model Customization Fields: Depending on the chosen AI model, fill in the following fields:

    • text1

    • image1


3. Save and Test the Workflow

  • Save Workflow: After filling in all required fields, save the workflow.

  • Test in Preview Mode: Run your application in Preview mode, click the button, and ensure that the model's response is processed into your database through the get-response backend workflow. This confirms that the AI model triggers correctly and the returned data is stored as expected.


4. Saving the Output and Adding Run ID

To store the result from the Aicado AI Connector action:

  • Create a New Record: In the button’s workflow, add the “Create a new thing” action.

  • Select Data Type: In the Type field, choose the AI Output data type.

  • Populate Run ID Field: Set the run_id field to the Run ID returned by the first step, for example:

    rustKopyalarun_id = Result of Step 1 (Aicado AI Connector)'s Run ID
  • Save Workflow: Save the workflow again.

  • Final Testing: In your application, select the desired AI model and click the button. The model will run, and the response will be saved to the AI Output record in the database including the run_id.


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.

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

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.

Now it's time to test your project using the button you created. For the Image to Video model, please verify that both the text1 and Image1 fields are filled with the appropriate values before testing.

Last updated

Was this helpful?