Full Custom Flow

Base URL: https://your-store.myshopify.com/apps/proxy_genlook-x/public

async function tryOn(photoFile, productId) {
  // productId: "gid://shopify/Product/1234567890"
  const base = "/apps/proxy_genlook-x/public";

  // 1. Check the store can generate right now
  const credits = await fetch(`${base}/check-credits`).then((r) => r.json());
  if (!credits.allowed) throw new Error("No generation credits available");

  // 2. Upload the shopper's photo (3-step signed-URL flow).
  //    Passing productId here is optional but lets Genlook warm the
  //    product images while the shopper's photo uploads.
  const { uploadUrl, uploadKey } = await fetch(`${base}/prepare-upload`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ productId }),
  }).then((r) => r.json());

  await fetch(uploadUrl, {
    method: "PUT",
    headers: { "Content-Type": "application/octet-stream" },
    body: photoFile,
  });

  const { fileId } = await fetch(`${base}/upload-complete`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ uploadKey }),
  }).then((r) => r.json());
  // fileId looks like "customer-media/acc_123/file_abc123xyz.jpg"

  // 3. Start the AI generation
  const { jobId, code, message } = await fetch(`${base}/fitting-room`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ userImageId: fileId, productId }),
  }).then((r) => r.json());
  if (!jobId) throw new Error(`${code}: ${message}`);

  // 4. Poll for the result (most try-ons finish in 10 to 20 seconds)
  for (let i = 0; i < 30; i++) {
    const status = await fetch(`${base}/generation/${jobId}`).then((r) => r.json());

    if (status.status === "COMPLETED") return status.resultImageUrl;
    if (status.status === "FAILED") throw new Error(status.errorMessage);

    await new Promise((resolve) => setTimeout(resolve, 2000));
  }

  throw new Error("The generation request timed out");
}