The Challenge
Selling made-to-order tie-dye has a problem stock photography can’t solve. Every piece is dyed by hand, so no two are identical, and the specific combination a customer wants has almost certainly never been photographed. You can’t show them the product, because it doesn’t exist until they order it.
The usual answer is a grid of swatches and a hopeful imagination. The better answer is to render it.
What I Built
A production storefront with an AI design studio at the center of it.
A customer picks a garment, which carries its own dye technique (spiral, cloud, ice, stripe), and up to three colors. An image model renders a mockup of that combination, which they approve before it reaches the cart. Behind that sits a full commerce system: Stripe checkout in live and test modes, webhook-driven fulfillment, refunds, transactional email, AI-assisted review moderation, and an admin surface for products, colors, orders and ad creative.
Consent as a Product Surface
Generated previews of a handmade product create an expectation problem. The render is crisp, evenly dyed, and identical every time. The physical piece is none of those things by design, and that variation is what people are buying.
So approval is a deliberate two-step. Generate, then click through a dialog stating plainly that this is a concept and the hand-dyed piece will differ. Only then can it reach the cart.
That’s a small piece of UI carrying a lot of weight. It’s the difference between a delighted customer and a refund request, and the pattern is worth stealing for anything that previews a physical good with a generative model.
Inference in the Browser
The admin side has a job that would normally be a server round trip: cutting product photos out of their backgrounds. Instead a segmentation model runs directly in the browser on WebGPU through transformers.js. No upload, no queue, no per-image cost.
It’s a practical use of client-side inference rather than a demonstration of one. The tradeoff is a hard WebGPU dependency, fine for an admin tool on a known machine and not fine on a storefront.
Built to Grow
The catalog side already holds a real dye supplier’s full product line, 63 swatches with names, codes and prices, which is the foundation for pricing every design against what the shop can actually mix. The storefront, the admin surface and the generation pipeline were built as separate, composable pieces precisely so the palette, the techniques and the product range can expand without touching checkout.
That is the difference between a demo and a platform. The first version ships; the second, third and fourth ship on top of it instead of around it.
Technical Highlights
- Consent-gated generative UX that sets expectations before purchase rather than after delivery
- Client-side WebGPU segmentation for background removal, avoiding server cost entirely
- Stripe in live and test modes, with prices resolved from a server-side map rather than client totals for every mapped variant
- Webhook-driven fulfillment and refunds, with Slack notifications for sales, errors, support and feedback
- AI-assisted review moderation using forced function calling to return a structured verdict rather than prose
- 19 edge functions covering checkout, refunds, webhooks, email, moderation and generation