Connect Midjourney to Bubble via API Integration - Bubble.io Tutorial
TLDRThis tutorial guides viewers on integrating the AI art generation tool Midjourney with the no-code platform Bubble. It covers creating an account, obtaining API keys from GitHub, and setting up API connectors in Bubble. The process involves crafting API calls for image generation, utilizing task IDs for status checks, and creating a user interface for input prompts. The workflow includes a custom event to handle image retrieval and storage, ensuring a seamless user experience with the final image saved in the user's profile.
Takeaways
- 💡 This video tutorial demonstrates how to connect MidJourney, an AI art generation tool, to Bubble, a popular no-code platform.
- 🛠️ The process starts by setting up an account and obtaining API keys from goapi.ai, using a GitHub login.
- 🔌 The tutorial involves installing the API connector plugin in Bubble and configuring it with MidJourney's API.
- 🔑 API keys are used as shared headers in the API connector, with 'x-api-key' as the key.
- 📑 The 'imagine' action is set up as a POST request to the MidJourney API URL, with various parameters including aspect ratio and process mode.
- 🧩 Parameters like 'prompt' and 'user ID' are demonstrated, with 'flying squirrel' used as a sample prompt.
- 🕒 Fetch commands and task IDs are utilized to handle asynchronous calls, simulating a webhook without requiring a paid Bubble plan.
- ⚙️ The tutorial shows how to build a simple UI in Bubble, including input fields and buttons for user prompts.
- 🔄 Custom events are created to handle fetch retries, ensuring the image generation process completes successfully.
- 🖼️ The final result includes displaying the generated image in the Bubble UI, stored in the user's data as the final image.
Q & A
What is the purpose of this video tutorial?
-The purpose of the video tutorial is to show how to connect Midjourney, an AI art generation tool, to Bubble, a no-code tool, using API integration.
What do you need to do first before integrating Midjourney with Bubble?
-First, you need to create an account on GitHub, which Midjourney uses for login, and obtain your API key from the Go API platform.
How do you obtain the API key for Midjourney?
-After logging into the Go API platform with your GitHub account, you can navigate to 'My API keys' and either retrieve or reset your API key.
What is the next step after obtaining the API key?
-After obtaining the API key, you need to add it to the API Connector plugin in Bubble, labeling the API call as 'imagine' and setting the method to 'POST'.
What URL should be used for the API call?
-The API call should be sent to the URL: api.midjourneyapi.xyz/mj/v2/imagine.
What parameters are necessary for the API call?
-Necessary parameters include aspect ratio, process mode (set to 'fast'), prompt, and user ID. The 'prompt' and 'user ID' should be unselected as private.
What is the purpose of the 'task ID' in the integration process?
-The 'task ID' is used to track the progress of the image generation and is essential for fetching the final image.
How do you handle the status checking of the image generation in Bubble?
-You create custom events to repeatedly fetch the status using the 'task ID' until the image generation is completed. If the status is 'not finished', the event reschedules itself to check again after a delay.
What happens when the image generation status is 'finished'?
-When the status is 'finished', the final image URL is saved to the current user's data in Bubble, and the image is displayed in the user interface.
What additional features or options are mentioned in the video for Midjourney API calls?
-The video mentions features like roles, upscales, the new zoom-out feature, and face swaps, which can be explored in more detail in the full course on API setups for Midjourney.
Outlines
🔗 Setting Up Mid Journey AI with Bubble: API Integration
In this segment, the video introduces the process of connecting the AI art generation tool Mid Journey to the no-code platform Bubble. The speaker guides viewers through accessing the 'go api.ai' website to create an account and retrieve an API key, which is done by logging in with a GitHub account. The API key is then used to set up an API connector in Bubble, specifying headers and the necessary endpoint URL. The video also covers configuring the 'Imagine' action with parameters such as aspect ratio, process mode, prompt, and user ID, and emphasizes the importance of the task ID for subsequent API calls. It concludes with a mention of the limitations regarding the use of web hooks in Bubble, which requires a paid plan.
🖼️ Creating a UI and Workflow for AI Image Generation
This paragraph details the creation of a user interface (UI) for the AI image generation tool within Bubble. The UI includes an area to display the generated image, an input field for the user to type in their prompt, and a button to initiate the image generation. The speaker then explains how to wire up the workflows in Bubble, using the input value and the current user's unique ID to interact with the API. A custom event is set up to handle the fetch process, with a 15-second delay for the initial fetch attempt, and a subsequent 5-second delay for retries if the image generation is not yet complete. The video demonstrates how to save the final image and task ID to the current user's data within Bubble's database.
📸 Testing the AI Image Generation and Retrieval Process
The final paragraph of the script describes the testing phase of the AI image generation setup. The speaker creates a new user in Bubble's database and inputs a prompt, 'explode loading star', to generate an image. The video shows the process of the custom event being triggered and the fetch commands being executed with a delay to check the status of the image generation. The speaker explains the loop that occurs between the fetch attempts until the image generation is marked as finished, at which point the image is saved to the current user's data. The video concludes with a successful test, showing the image being populated in the database and displayed in the UI. The speaker also encourages viewers to like, subscribe, and check the description for more information on Mid Journey API calls and a course on various API setups.
Mindmap
Keywords
💡Midjourney
💡Bubble
💡API Integration
💡API Key
💡GitHub
💡API Connector
💡Imagine Action
💡Task ID
💡Fetch Command
💡Custom Event
💡Webhook
Highlights
Introduction to connecting Midjourney, an AI art generation tool, to Bubble, a no-code tool.
Navigating to goapi.ai to use the AI API for integration with Midjourney.
Creating an account using GitHub for API key retrieval.
Accessing the API keys through the GitHub account interface.
Adding the API connector plugin in Bubble for Midjourney integration.
Configuring the API with a shared header and API key for authentication.
Labeling the API call 'imagine action' and setting the request method to POST.
Specifying the endpoint URL for the Midjourney API version two.
Adding parameters such as aspect ratio, process mode, prompt, and user ID to the API call.
Using a task ID to track the progress of the API call.
Utilizing a fetch command as an alternative to web hooks for API response handling.
Checking the status of the API call to determine if the image generation is complete.
Retrieving and displaying the generated image from the API response.
Creating a simple UI with an image display, input field, and a button for user interaction.
Wiring up workflows to allow users to input prompts and generate images.
Using custom events and scheduling for handling API response delays.
Storing the final image and task ID in the user's data for record-keeping.
Testing the integration by creating a new user and generating an image with a prompt.
Observing the image generation process and the successful saving of the image in the database.
Encouraging viewers to subscribe for more tutorials on Midjourney API calls and setups.
