# Webhooks

{% hint style="info" %}
This method requires backend workflows so you will need to be on a paid Bubble plan
{% endhint %}

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

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

{% embed url="<https://www.youtube.com/watch?v=-VlztwBGzns>" %}

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"

<div align="left"><figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2FyE9ewbDFk14jZ83NfU3E%2F2023-09-07%2010.36.58.gif?alt=media&#x26;token=0acd5b83-a512-45ca-b53d-62a98deef229" alt="" width="563"><figcaption></figcaption></figure></div>

* 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

<div align="left"><figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2FkbPGVZcH5v9mKPWKjLrM%2F2023-09-07%2010.41.54.gif?alt=media&#x26;token=dbcba6cb-bdc7-4e2b-be1b-7d4acc1a9327" alt="" width="563"><figcaption></figcaption></figure></div>

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](https://www.postman.com/) 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"

<div align="left"><figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2Ff2y5zd21xnYEaXEUuAOQ%2F2023-09-07%2010.51.27.gif?alt=media&#x26;token=19a686af-8db0-4c40-a7b3-170a86144ac1" alt="" width="563"><figcaption></figcaption></figure></div>

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

<figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2F6o16mhPi5Sy9qigC84zh%2FScreenshot%202023-09-07%20at%2011.10.22.png?alt=media&#x26;token=92bc525f-def5-4447-b5d8-e217daa63a6e" alt=""><figcaption></figcaption></figure>

* We now need to add Authorization credentials to our API call
  * Click on "Authorization" and select "API Key" as the "Type"

<figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2FNUvl2ZUWdQyrsGthG4dg%2FScreenshot%202023-09-07%20at%2011.12.09.png?alt=media&#x26;token=3c8d9916-37fe-4a3a-a318-51190136f35c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2FMPLyjNmIv57oLoU68SkQ%2FScreenshot%202023-09-07%20at%2011.14.19.png?alt=media&#x26;token=adb51120-93c7-42fe-b831-c5113088c94b" alt=""><figcaption></figcaption></figure>

* 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

<figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2FVJVrIXxhTF7mx274P8PC%2FScreenshot%202023-09-07%20at%2011.16.21.png?alt=media&#x26;token=426e8807-d047-414e-910e-cee1d9f56dd3" alt=""><figcaption></figcaption></figure>

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

<div align="left"><figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2FPKRtMYRSm8CjZ48ge4hf%2FScreenshot%202023-09-07%20at%2011.27.01.png?alt=media&#x26;token=b44f1eb0-e295-444c-a330-4d17c3b87fa4" alt="" width="563"><figcaption></figcaption></figure></div>

* 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"&#x20;

<figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2FLTc3O51rTaiKk2M9ek74%2F2023-09-07%2011.28.49.gif?alt=media&#x26;token=84529f77-571e-4d73-8028-fb788b716bd0" alt=""><figcaption></figcaption></figure>

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

<div align="left"><figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2Fx4HoVikWm8oIzNKkqYXB%2FScreenshot%202023-09-07%20at%2011.31.20.png?alt=media&#x26;token=95d7cc78-6950-4472-ba12-82d27f37f087" alt="" width="563"><figcaption></figcaption></figure></div>

* We can now update the "Status" and "Output - Images" field in our database&#x20;

<div align="left"><figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2FRB7C0fCUHYRXxLOyWgk3%2FScreenshot%202023-09-07%20at%2011.39.14.png?alt=media&#x26;token=276b8db0-af77-4ed7-817e-a3c939112184" alt="" width="563"><figcaption></figcaption></figure></div>

* 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

<div align="left"><figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2FEkWc0vMMBSuR5j7jy2aN%2FScreenshot%202023-09-07%20at%2011.54.33.png?alt=media&#x26;token=68badc0e-8701-4ab7-a7bf-f6f05a956063" alt="" width="563"><figcaption></figcaption></figure></div>

* **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

<figure><img src="https://1187100604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ueA3DZDjlYOZVlFZToc%2Fuploads%2Fqg70HiOMYQa1h1ykhkXA%2F2023-09-07%2011.45.28.gif?alt=media&#x26;token=b0e0c19f-e77e-43f1-a409-dbe20c25aa73" alt=""><figcaption></figcaption></figure>

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.
