Skip to content
PlanetNoCode
0:17:38
603
21
6
Last update : 23/08/2024

🎨🖼️ Unleash Your Inner Artist with AI Image Generation! 🤖

🪄 The Magic of No-Code AI Art

Ever dreamt of creating stunning artwork without touching a paintbrush? 🤔 Now you can, with the power of AI and no-code platforms! This is your quick-start guide to building your own AI art generator app using Bubble.io and Replicate.

🧰 Building Your Artistic Arsenal

  1. Bubble.io: This is your digital canvas! Bubble.io is a visual programming platform that lets you build web applications without writing code. It’s like drag-and-drop for building apps!

  2. Replicate: Think of this as your AI artist’s studio. Replicate hosts powerful AI models, including the one we’ll use to generate images from text prompts.

  3. API Connector: This is the bridge between Bubble and Replicate. APIs (Application Programming Interfaces) allow different software applications to talk to each other.

🚀 Building Your App in a Flash

1️⃣ Setting the Stage (Bubble.io Layout)

  • Input Field: This is where your users will type in their creative prompts.
  • Button: A simple button labeled “Generate Artwork” that kicks off the magic when clicked.
  • Image Element: This is your gallery! The generated artwork will appear here for your users to admire.

2️⃣ Summoning the AI Artist (Connecting to Replicate)

  • API Connector Setup:
    • Head to the “Plugins” section in Bubble.io and install the API Connector.
    • Create a new API call and name it something like “generate_image”.
    • Set the API call type to “POST” (this tells the API we’re sending data).
  • Replicate API Endpoint:
    • Find the API endpoint URL from Replicate’s documentation for the AI model you’re using. This URL will be specific to the model.
    • Paste this URL into the “API Endpoint” field in your Bubble.io API Connector.

3️⃣ Whispering Your Artistic Vision (Sending the Prompt)

  • Dynamic Data:
    • In your Bubble.io workflow, link the user’s input in the Input Field to the “prompt” parameter of your API call.
    • Use Bubble’s “JSON safe” operator to ensure the text is formatted correctly for the API.
  • Webhooks:
    • Set up a webhook in Bubble.io to receive a notification when the image generation is complete.
    • Configure the Replicate API call to use this webhook URL.

4️⃣ 🖼️ Unveiling Your Masterpiece (Displaying the Image)

  • Database Storage: Create a new data type in Bubble.io to store the generated images (you can choose to store either the image URL or the actual image file).
  • Data Retrieval: Use a “Do a search for” action in Bubble to retrieve the most recently generated image from your database.
  • Image Display: Link the Image Element on your page to display the retrieved image.

🎉 Congratulations! You’ve Built Your Own AI Art Generator! 🎉

Now you can create an endless stream of unique artwork based on any prompt you can imagine! Experiment, have fun, and share your creations with the world! 🎨🌎

🧰 Toolbox for Your Artistic Journey

  • Bubble.io: https://bubble.io/ – Your visual programming playground for building web apps.
  • Replicate: https://replicate.com/ – Explore and use powerful AI models with ease.
  • Planet No Code (Bubble.io Tutorials): https://go.planetnocode.com/explore – A treasure trove of resources to master Bubble.io.

Other videos of

Play Video
PlanetNoCode
0:06:07
19
2
0
Last update : 07/11/2024
Play Video
PlanetNoCode
0:04:48
709
11
0
Last update : 07/11/2024
Play Video
PlanetNoCode
0:03:30
370
18
3
Last update : 30/10/2024
Play Video
PlanetNoCode
0:04:54
757
31
3
Last update : 30/10/2024
Play Video
PlanetNoCode
0:08:11
45
2
0
Last update : 30/10/2024
Play Video
PlanetNoCode
0:03:11
774
20
2
Last update : 09/10/2024
Play Video
PlanetNoCode
0:03:52
254
8
0
Last update : 09/10/2024
Play Video
PlanetNoCode
0:06:32
194
7
1
Last update : 02/10/2024
Play Video
PlanetNoCode
0:05:57
336
15
0
Last update : 02/10/2024