Implement Polling for Image Generation Status Using Request IDs

[skushagra9]

Instead of polling all the images, and checking all of them if they are Generated or not, once we generate images, pass on the request_ids to the frontend, and use these request_ids to poll the backend,

Here's the backend polling endpoint :

router.get("/poll/images/:requestId", async (req, res) => {
    const requestId = req.params.requestId;
    const request = await prisma.requests.findUnique({
        where: {
            requestId: requestId
        }
    })
    if (request?.status === "completed") {
        const image = request?.imageGenerated;
        res.status(200).json({ message: "success", imageGenerated: image });
    } else {
        res.status(400).json({ message: "pending" });
    }
})

Please note for adding this change, it would require structural DB change, where we will have another Table - Requests

model Requests {
  id             String   @id @default(auto()) @map("_id") @db.ObjectId
  status         String   @default("pending") // pending, completed, failed
  requestId      String   @unique
  stripeId       String
  imageGenerated String?
  createdAt      DateTime @default(now())
  updatedAt      DateTime @updatedAt
}

[skushagra9]

If anyone is interested to pick this up , I can provide help
I have already implemented it in my project
@hkirat @yashmakhija

[hkirat]

yeah this is good

[skushagra9]

yeah this is good

Thanks @hkirat
I have done it exactly what I have shown in the description, and works fine
I can help if anyone interested to solve it

[yashmakhija]

it would be better approach

[yaswanthkosuru]

@skushagra9
may i work on these or you are working?

[skushagra9]

@skushagra9 may i work on these or you are working?

Yes yes
Please go ahead,
If you need any help let me know

[rohitkumarxyz]

@yashmakhija @skushagra9 @hkirat If no one is working on this issue, can I take it up?

[skushagra9]

@yashmakhija @skushagra9 @hkirat If no one is working on this issue, can I take it up?

Yes , Go ahead

[rohitkumarxyz]

Currently, we fetch all generated images in bulk using the /image/bulk endpoint. However, we want to modify this approach to fetch images one by one as they are generated. Instead of requesting multiple images at once, we will introduce a new endpoint, /image/:imageid, which retrieves a single image by image

and image id we are getting from the api
//pack/generate
//ai/generate

just confirm me so i can just fix this issue Asap

[rohitkumarxyz]

@skushagra9

[rohitkumarxyz]

@skushagra9 please confirm

[skushagra9]

Currently, we fetch all generated images in bulk using the /image/bulk endpoint. However, we want to modify this approach to fetch images one by one as they are generated. Instead of requesting multiple images at once, we will introduce a new endpoint, /image/:imageid, which retrieves a single image by image

and image id we are getting from the api //pack/generate //ai/generate

just confirm me so i can just fix this issue Asap

Yes, Its just that we have a separate collection for storing requestIds , from which we would use the new endpoint to get data

I have also shared the schema , please check it and let me know if any confusions

Also its just that we return the requestId with the response when we generate image .

And then we use this requestId/ array of requestIds

[rohitkumarxyz]

@skushagra9 thank you

[rohitkumarxyz]

@skushagra9
Now, what I understand is that there are a few things I need to add. Let me explain: on the frontend, when we are generating images with...
app/web/components/camera
i) ${BACKEND_URL}/ai/generate,
path:- app/web/components/Packcard
ii) ${BACKEND_URL}/pack/generate

Now, on both APIs, we are getting the IDs of the images that we want to generate.
res.json({
imageId: data.id,
});

res.json({
images: images.map((image) => image.id),
});

Right now, on the frontend, we are not saving the requested image IDs or maintaining their state. To fix this, we either need to add Recoil (or another state management library) to store the requested IDs. This way, we can use them later to send an API call and fetch the generated images from the backend.

const generatePack = async () => {
const token = await getToken();
await axios.post(
${BACKEND_URL}/pack/generate,
{
packId: props.id,
modelId: props.selectedModelId,
},
{
headers: {
Authorization: Bearer ${token},
},
}
);
};