Webhook questions

Ask us anything How do I?
1

I am trying to understand APIs in order to make a tool for generating AI images using replicate.com API.

I am able to GET a list of images that have been generated.
I am also able to POST using the info below.
This all works. And the generated image appears on replicate.

The only problem is that the list I GET does not update when a new image is generated. I believe the webook field below is supposed to contain a link on my site that will receive the updated data, but I dont know what to put there.

Any help would be appreciated.



return {
"version": 
"aff48af9c68d162388d230a2ab003f68d2638d88307bdaf1c2f1ac95079c9613",

"input": 
{
 "image":"https://cdn.weweb.io/designs/d6d23d03-d243-4e93-a12d-0894127d67b1/sections/00036-4043749077.png?_wwcv=1686217442920",
 "prompt": variables[/* prompt input - value */ '485d128e-e47f-413e-860f-d059c46e30a5-value'],
 "num_samples":"1", 
 "image_resolution": "512", 
 "low_threshold": 100,
 "high_threshold":200, 
 "ddim_steps":20,
 "scale":9, 
 "seed":235232, 
 "eta":0,
 "a_prompt":"longbody, lowres, bad anatomy, bad hands, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality",
 "n_prompt":"longbody, lowres, bad anatomy, bad hands, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality"},
    
"webhook": 
"",
    
"webhook_events_filter": 
["completed"]
    }
2

I don’t know for sure, but I suspect you need to implement this in your backend. I use Xano as my backend and it has webhook capabilities. I just setup two to receive Stripe events. The webhook on the backend will receive the events and make updates in your DB which WeWeb will receive the next time your collection is updated.

2 Likes
3

Ah right. That makes sense. Thank you.

1 Like
4

WeWeb apps only live in the frontend (aka the end user browser), hence, are no servers and can’t receive webhooks.

As @Dorian mentioned it, your backend should take care of this :wink:

2 Likes
5

Just wanted to pick this up, as I faced a similar problem.

The problem is usually that the image generation is done asynchronously. So you are getting an immediate response from the API with an ID and not the finished image.
They offer mostly a webhook solution to send the finished image then to the desired destination.

But this use case is not working with weweb, as most of the times the user wants to see the image instantly without refreshing.

How I solved this:

  1. Make the API call to create the image
  2. Receive Generation ID (image is still being created, so not finished)
  3. Make another API call directly to that Image
  4. Loop the request until the API call returns a finished image. I did this with Javascript, as I couldn’t find out how to do an infinite loop based on a condition natively with weweb.
  5. Store the image in a variable, which updates immediately and image container
  6. Store the image in your database (weweb → Database)

This is very specific to image generation, but can be applied to anything that works similarly with async API Calls.

Hope it’s gonna help someone in the future.

1 Like