Add try-on to a custom store

<!-- On the product page -->
<button id="tryon-open">Try it on</button>

<dialog id="tryon">
  <input id="tryon-photo" type="file" accept="image/jpeg,image/png" />
  <label>
    <input id="tryon-consent" type="checkbox" />
    I'm 18 or over, this is a photo of me, and I agree to it being processed
    to create a virtual try-on. <a href="/privacy">How we use it</a>
  </label>
  <button id="tryon-go">See it on me</button>
  <p id="tryon-status" role="status"></p>
  <img id="tryon-result" alt="You wearing this item" hidden />
</dialog>

// Shrinks the photo to at most 1600px and re-encodes it as JPEG. This keeps it
// well under the 4 MB limit and drops the camera's EXIF data (including GPS).
async function shrink(file) {
  const bitmap = await createImageBitmap(file);
  const scale = Math.min(1, 1600 / Math.max(bitmap.width, bitmap.height));
  const canvas = document.createElement("canvas");
  canvas.width = Math.round(bitmap.width * scale);
  canvas.height = Math.round(bitmap.height * scale);
  canvas.getContext("2d").drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.88));
}

document.getElementById("tryon-go").addEventListener("click", async () => {
  const file = document.getElementById("tryon-photo").files[0];
  const status = document.getElementById("tryon-status");
  if (!file || !document.getElementById("tryon-consent").checked) {
    status.textContent = "Choose a photo and tick the box first.";
    return;
  }

  status.textContent = "Creating your try-on…";
  const form = new FormData();
  form.append("photo", await shrink(file), "photo.jpg");
  form.append("productId", window.PRODUCT_ID);       // your own product id
  form.append("requestId", crypto.randomUUID());      // one per click

  // YOUR server — never Clothsy's API directly. Your key stays there.
  const start = await fetch("/tryon", { method: "POST", body: form });
  const started = await start.json();
  if (!start.ok) { status.textContent = started.message; return; }

  // Ask your server every 2.5 seconds until the result is ready.
  for (let i = 0; i < 72; i++) {
    await new Promise((r) => setTimeout(r, 2500));
    const res = await fetch("/tryon/" + started.id);
    const body = await res.json();
    if (body.status === "success") {
      const img = document.getElementById("tryon-result");
      img.src = body.resultUrl;
      img.hidden = false;
      status.textContent = "";
      return;
    }
    if (body.status === "failed") { status.textContent = body.message; return; }
  }
  status.textContent = "This is taking longer than usual. Please try again.";
});

import { S3Client, PutObjectCommand, GetObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { randomUUID } from "node:crypto";

const s3 = new S3Client({ region: process.env.AWS_REGION });
const BUCKET = process.env.TRYON_PHOTO_BUCKET; // private bucket, not public

/** Stores the shopper's photo privately and returns a URL that works for 15 minutes. */
export async function hostPhoto(jpegBytes) {
  const key = `tryon-photos/${randomUUID()}.jpg`;
  await s3.send(new PutObjectCommand({
    Bucket: BUCKET, Key: key, Body: jpegBytes, ContentType: "image/jpeg",
  }));
  return getSignedUrl(s3, new GetObjectCommand({ Bucket: BUCKET, Key: key }), {
    expiresIn: 15 * 60,
  });
}

// Then, instead of uploading:
//   person: { url: await hostPhoto(req.file.buffer) }        (SDK)
//   personImageUrl: await hostPhoto(req.file.buffer)         (HTTP)

// Only needed without the SDK — its friendlyMessage(error) does this for you.
function messageFor(code) {
  switch (code) {
    case "PERSON_PHOTO_REJECTED":
      return "Please use a clear, well-lit photo of just you, facing the camera.";
    case "IMAGE_REJECTED":
    case "GARMENT_REJECTED":
      return "Virtual try-on isn't available for this photo or item.";
    case "IMAGE_TOO_LARGE":
    case "UNSUPPORTED_IMAGE":
      return "Please use a JPEG or PNG photo under 4 MB.";
    case "RATE_LIMITED":
      return "Lots of people are trying things on right now. Try again in a minute.";
    case "INSUFFICIENT_CREDITS":   // alert yourself too: the button should go quiet
    default:
      return "Virtual try-on isn't available right now. Please try again later.";
  }
}