Connect Midjourney to Bubble via API Integration - Bubble.io Tutorial
TLDRThis tutorial demonstrates how to integrate the AI art generation tool Midjourney with the no-code platform Bubble using the go api.ai. It guides viewers through creating an account, obtaining an API key, setting up the API connector, and crafting a workflow to generate images based on user prompts. The process includes a custom event and fetch command to handle the image generation and retrieval, culminating in a user interface for inputting prompts and displaying the resulting artwork.
Takeaways
- 🌐 Connect Midjourney to Bubble: The video demonstrates how to integrate the AI art generation tool Midjourney with the no-code platform Bubble.
- 📝 API Key Acquisition: To begin, one must create an account on GitHub and use it to log in to go.ai to obtain an API key for Midjourney.
- 🔌 API Connector Setup: In Bubble, the API connector plugin is used to add the Midjourney API with the necessary headers and API key.
- 🛠️ API Endpoint Configuration: The video details setting up the 'imagine action' endpoint with specific parameters such as aspect ratio, process mode, and prompt.
- 🔄 Task ID Tracking: A task ID is initialized and used to track the progress of the AI-generated image creation process.
- 🔄 Fetch Command Usage: Instead of using a webhook, a fetch command is implemented to poll the API for the status and results of the image generation.
- 🖼️ Image Display: The script describes how to work with the returned image and create a simple UI to display it.
- ⌛️ Workflow Timing: The video outlines a custom event and fetch command workflow to handle the timing of image generation and retrieval.
- 🔄 Looping Mechanism: A looping mechanism is set up to continuously check the status of the image generation until it is complete.
- 🔑 User ID Utilization: The current user's unique ID is used to associate the generated image with the user in the database.
- 🔍 Database Interaction: The video explains how to store the final image and task ID in the database for each user.
Q & A
What is the purpose of the video tutorial?
-The purpose of the video tutorial is to demonstrate how to connect Midjourney, an AI art generation tool, to Bubble, a no-code tool, via API integration.
How can one create an account for the AI Mid Journey API?
-To create an account for the AI Mid Journey API, one needs to go to GitHub, log in with a Google account, and use a GitHub account to log in. After logging in, the API key will be displayed.
What is the URL for the API that will be used to integrate with Mid Journey?
-The URL for the API used to integrate with Mid Journey is 'api.midjourney.com'.
What is the process mode set in the video for the imagine action?
-In the video, the process mode set for the imagine action is 'fast'.
What does the 'x-api-key' represent in the API connector plugin in Bubble?
-The 'x-api-key' in the API connector plugin represents the key used to authenticate requests to the API, ensuring that only authorized users can access the API.
What is the task ID used for in the API call?
-The task ID is used to track the progress of the API call and to fetch the result once the image generation is complete.
Why is the fetch command used instead of a webhook in Bubble?
-The fetch command is used instead of a webhook in Bubble because using webhooks requires a minimum of a PL paid plan, which the tutorial aims to avoid.
How does the video script describe setting up a UI for the API integration?
-The script describes setting up a UI by adding an image display, an input field for the prompt, and a button to send the prompt to the API for image generation.
What is the custom event 'fetch try one' used for in the workflows?
-The custom event 'fetch try one' is used to periodically check the status of the API call by using the task ID and to update the current user's final image once the status is 'finished'.
How does the video script handle the situation where the API call is not finished?
-If the API call is not finished, the script schedules another fetch event with a delay, creating a loop that continues until the status is 'finished' and the image is saved.
What additional features are mentioned in the video for further exploration of the Mid Journey API?
-Additional features mentioned for further exploration include rolls, upscales, zoom out, and face swap, which can be learned through a course available in the video description.
Outlines
🤖 Setting Up AI Art Generation with Mid Journey API
This paragraph introduces the video's focus on integrating the AI art generation tool, Mid Journey, with the no-code platform Bubble. The speaker guides viewers through the process of obtaining API access by creating an account on go api.ai and using a GitHub account for authentication. They explain how to retrieve an API key and proceed to set up the API connector plugin in Bubble, specifying the necessary headers and parameters for the 'Imagine Action' API call, including the URL, process mode, and prompt details.
🖼️ Building the UI and Workflow for AI Art Generation
The second paragraph details the creation of a user interface in Bubble for the AI art generation tool. It includes instructions for adding an image display area, input field for prompts, and a button to initiate the art generation process. The speaker discusses the layout adjustments and the workflow setup, which involves capturing user input and utilizing the current user's unique ID. They also explain the use of a custom event and fetch commands to handle the API response and save the generated image to the user's data, implementing a loop to check the status of the image generation task until completion.
🔄 Testing the AI Art Generation Integration
In the final paragraph, the speaker describes the testing process of the AI art generation setup. They demonstrate how to input a prompt and initiate the process, explaining the expected wait time for the image to be generated and saved to the user's record in the database. The video concludes with a suggestion to check the video description for more information on Mid Journey API calls and related courses, covering various features such as image upscaling, zoom out, and face swap functionalities.
Mindmap
Keywords
💡Midjourney
💡Bubble
💡API Integration
💡API Key
💡GitHub
💡API Connector Plugin
💡Imagine Action
💡Task ID
💡Fetch Command
💡Custom Event
💡User ID
Highlights
Introduction to connecting Midjourney AI art generation tool to Bubble, a no-code platform.
Explanation of the AI Midjourney API and its integration with Bubble.
Step-by-step guide on creating an account and obtaining an API key from GitHub.
Navigating to the Plugins tab in Bubble and installing the API Connector plugin.
Adding the Mid Journey API with a shared header and API key in Bubble.
Labeling the API call 'imagine action' and setting the request method to POST.
Details on the URL structure for the Mid Journey API call.
Parameters setup for the API call including aspect ratio, process mode, and prompt.
Initiating the API call and noting the task ID for tracking the request.
Using a fetch command instead of a webhook due to Bubble's plan restrictions.
Monitoring the status of the API call to check if the image generation is finished.
Retrieving and displaying the generated image from the API response.
Building a simple UI in Bubble with an image display and input fields for prompts.
Workflow setup in Bubble to link user input to the API call parameters.
Using custom events and scheduling to handle API response delays.
Creating a loop with custom events to continuously check the API call status.
Saving the final generated image to the current user's data in Bubble.
Testing the integration with a sample prompt and observing the image generation process.
Final demonstration of the successful integration and image display in the database.
Encouragement to like, subscribe, and check out further tutorials on Mid Journey API.