Webhooks

This method requires backend workflows so you will need to be on a paid Bubble plan

Webhooks can be used to automatically return the output from a prediction once Replicate has finished creating the prediction.

The below video tutorial shows how to set intialize webhooks and use them to save output from predictions from 12:42.

The steps involved in setting up webhooks are as follows:

Enable backend workflows

• Go to the "Settings" -> "API" section of your Bubble editor

• Tick the "Enable Workflow API and Backend Workflows" box

Create an API workflow

• You should now have access to a reusable element in your pages dropdown called "Backend workflows"

• Create a new "API Workflow"

• Once you've named the workflow, click on the "Parameter definition" dropdown and select "Manual definition"

• Click on "Detect data"

• You should be presented with a popup with a URL

This is the URL Replicate is going to send data to once Predictions have been created. We now need to intitialize the webhook.

Initalizing the webhook

• Some 3rd party services (like Stripe) make it very easy to initialize a webhook from their website

• Unfortunately, this is not the case with Replicate

• Therefore I recommend using Postman to intialize our webhook
• This will effectively involve making an API call from Postman to Replicate

Postman

• Sign up for a Postman account and navigate to "My Workspace"

• Click on "New" and then select "HTTP"

• Change the type of the API call to "POST" and paste in the following URL: https://api.replicate.com/v1/predictions

• We now need to add Authorization credentials to our API call

  • Click on "Authorization" and select "API Key" as the "Type"

• Add "Authorization" to the "Key" input field and "Token " followed by your Replicate Token to the "Value" input field

• We now need to add the raw JSON that contain the parameters we're sending in the API call:

  • Click on "Body" and then tick the "raw" checkbox

  • Choose JSON as the option in the far-right dropdown text

You now need to paste in some JSON. The exact parameters will depend on which model you're setting the webhook up for:

JSON for Stable Diffusion Model

{
    "version": "ac732df83cea7fff18b8472768c88ad041fa750ff7682a21affe81863cbe77e4",
        "webhook_completed": "YOUR WEBHOOK URL FROM BACKEND WORKFLOW",
        "input": {
            "prompt": "Rafael Nadal, Gta vice city, gta 5 cover art, borderlands style, celshading, symmetric highly detailed eyes, trending on artstation, by rhad, one person only",
            "height": 512,
            "width": 512,
            "num_outputs": 1,
            "num_inference_steps": 30,
            "guidance_scale": 7.5
        }
}

JSON for GFPGAN Model

{
    "version": "9283608cc6b7be6b65a8e44983db012355fde4132009bf99d976b2f0896856a3",
    "webhook_completed": "YOUR WEBHOOK URL FROM BACKEND WORKFLOW",
    "input": {
        "img": "https://i.pinimg.com/originals/90/87/ee/9087eeacb7420e486ef2caa2da969695.jpg",
        "scale": 1,
        "version": "v1.4"
    }
}

JSON for SDXL Model

{
    "version": "da77bc59ee60423279fd632efb4795ab731d9e3ca9705ef3341091fb989b7eaf",
    "webhook_completed": "YOUR WEBHOOK URL FROM BACKEND WORKFLOW",
    "input": {
            "prompt": "Rafael Nadal, Gta vice city, gta 5 cover art, borderlands style, celshading, symmetric highly detailed eyes, trending on artstation, by rhad, one person only",
            "height": 512,
            "width": 512,
            "num_outputs": 1,
            "num_inference_steps": 30,
            "guidance_scale": 7.5
        }
}

Please note:

• You'll need paste in the URL generated from the backend workflow in the "webhook_completed" field

• the "prompt" and "img" inputs I'm using in the examples above are just for demo purposes - it doesn't matter what image you use here as we're just intializing the webhook

Next steps

• Ensure you have the popup with the URL open on the backend workflows section of your Bubble editor

• Then go back to your Postman dashboard and click on "send"

• If the API call has been successful, you should now see the below popup appear in your Bubble editor

• This is all the data that is being returned by Replicate from the prediction we just created in Postman

• Click "Save"

• Add a "make changes to a thing" workflow action to your API workflow

• The thing we want to change is "Do a search for", "Prediction", "first item"

• In order to specify the exact prediction we want to change, we need to put in the following constraint: "ID = Request Data's id"

• We can now update the "Status" and "Output - Images" field in our database

• To ensure this workflow is only run when the prediction has completed, add a condition to the workflow so that the status needs to change to "succeeded" before it runs

• FINAL STEP: Copy the URL you used to initialize the webhook and paste it into the relevant "Webhook URL" field in the "Plugins" tab of your Bubble editor. MAKE SURE TO REMOVE THE "intialize" FROM THE END OF THE URL

Please note: the above example is for the GFPGAN model. If you're returning an image from a different model you'll need to put the URL into that model's Webhook URL input.

Your database should now update automatically whenever a prediction has been completed.