diff --git a/README.md b/README.md index 75bf82e..904663f 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ await rtClient.setImage(garmentBlob, { }); ``` -Call `setImage()` again at any time to switch garments - no need to reconnect. +Call `setImage()` again at any time to switch garments - no need to reconnect. For fast switching, resize garment images to a max of 1024px before sending; large images (>1024px) significantly increase switch latency. --- @@ -107,7 +107,7 @@ The ideal setup is a **clean garment image** paired with a **descriptive prompt* - **Clean garment images work best** - just the clothing item, no person wearing it - **White or clean backgrounds** are ideal -- **At least 512x512 pixels** - the model reproduces what it sees, so clear garment = better results +- **512–1024px on the long edge** - the model reproduces what it sees, so clear garment = better results. Images larger than 1024px add latency without improving quality; always resize before calling `setImage()`. - If your source image shows a person wearing the garment, consider using an image editing model to extract just the clothing item **Prompt structure:** diff --git a/examples/mobile-fitting-room/app/page.tsx b/examples/mobile-fitting-room/app/page.tsx index d0ea553..8975e46 100644 --- a/examples/mobile-fitting-room/app/page.tsx +++ b/examples/mobile-fitting-room/app/page.tsx @@ -6,7 +6,7 @@ import { useDecartRealtime } from "@/hooks/useDecartRealtime"; import { useHandGesture } from "@/hooks/useHandGesture"; import { useFittingQueue } from "@/hooks/useFittingQueue"; import { useFittingRotation } from "@/hooks/useFittingRotation"; -import { urlToImageBlob } from "@/lib/image-utils"; +import { urlToImageBlob, resizeImageBlob } from "@/lib/image-utils"; import { PRODUCTS } from "@/lib/products"; import type { Product } from "@/lib/products"; import { ShoppingView } from "@/components/ShoppingView"; @@ -33,7 +33,7 @@ export default function FittingRoomPage() { if (!clientRef.current) return; setProcessingStatus("Applying..."); try { - const blob = await urlToImageBlob(product.image); + const blob = await urlToImageBlob(product.image).then(resizeImageBlob); await clientRef.current.setImage(blob, { prompt: product.prompt, enhance: false, @@ -86,7 +86,7 @@ export default function FittingRoomPage() { const [cameraStream, token, firstBlob] = await Promise.all([ stream ?? startCamera(), fetchToken(), - urlToImageBlob(queue[0].image).catch(() => undefined), + urlToImageBlob(queue[0].image).then(resizeImageBlob).catch(() => undefined), ]); if (cameraStream && token) {