DESTYLE

See it on you. Know if it is worth buying.

Comment

Inspiration

Online fashion shopping gives us more choice than ever, but the final decision is still strangely uncertain. A product photo can look perfect, a virtual try-on can show the garment on a body, and the shopper can still be left asking: should I actually buy this version? That gap inspired DASTYLE. We wanted to go beyond visual novelty and build a decision tool that combines a reusable personal colour profile, a realistic apparel try-on, product context, and a plain-language recommendation. The goal is not to judge attractiveness or promise fit. It is to reduce hesitation and avoid purchases that are likely to become regret or returns.

What it does

DASTYLE is a buy-or-skip assistant for online fashion.

  1. A shopper creates My Model from one guided full-body photo. MediaPipe checks the pose, visibility, and framing on-device before any paid API request can begin.
  2. DASTYLE derives a reusable Style DNA with YouCam AI Facial Color Tones, AI Fitzpatrick Skin Type, and AI Skin Analysis. The profile records colour direction and confidence, not a medical diagnosis.
  3. The shopper pastes a public product link or uploads a garment image. DASTYLE extracts the product image and price when available, then lets the shopper review or correct them.
  4. YouCam AI Clothes Virtual Try-On places the garment on the saved model.
  5. DASTYLE measures the garment colour and runs style-score-v1, an explainable deterministic engine that returns YES, MAYBE, or NO, shows the factors behind the decision, and suggests a stronger colour direction when appropriate.
  6. Accounts can retain My Model, Style DNA, credits, decisions, history, and estimated spend avoided. A clearly labelled Naya demo reproduces the full experience without consuming YouCam units. The consumer value is a faster and more confident purchase decision. The retail value is a decision layer that can improve product discovery, explain recommendations, and reduce avoidable returns without requiring a new 3D asset pipeline.

How we built it

DASTYLE is a responsive Next.js 16 and React 19 application written in strict TypeScript.

  • YouCam integration: A typed server-only adapter handles presigned uploads, task creation, polling, schema validation, error normalization, and the four YouCam capabilities used by the product: Facial Color Tones, Fitzpatrick Skin Type, Skin Analysis, and AI Clothes Virtual Try-On (cloth-v3).
  • One photo, two jobs: The accepted full-body image remains the apparel try-on source. MediaPipe landmarks are also used to produce a temporary face-dominant crop for the Skin AI calls.
  • Explainable decision engine: Sharp measures the garment's dominant colour. style-score-v1 compares it with the Style DNA palette in OKLab colour space, combines user preference and visual confidence, and returns a deterministic verdict with visible factors.
  • Product links: A restricted server-side resolver reads JSON-LD and Open Graph metadata, returns safe candidate images and price data, blocks private network targets, and falls back to upload plus manual correction when stores prevent extraction.
  • Accounts and persistence: Supabase provides Google and email authentication, PostgreSQL with row-level security, private Storage, durable Style DNA, saved checks, and a transactional credit ledger.
  • Payments and hosting: Stripe Checkout is integrated in test mode for credit top-ups. The app is deployed on Vercel.
  • Quality: Zod validates provider payloads, secrets stay server-side, and Vitest plus Playwright cover the deterministic and browser flows. Normal QA never calls YouCam.

Challenges we ran into

The hardest constraint was using one user capture for two very different AI workloads. Apparel VTO needs a clear full-body source, while facial analysis needs a large, front-facing face. Sending the unmodified body photo caused face-too-small and pose errors. We solved this by validating the body locally, using the same MediaPipe landmarks to crop and upscale a face-dominant derivative, and keeping the original image for VTO. The YouCam analyses also differ in strictness and can finish independently. Treating one rejection as a failure for the entire Style DNA wasted successful signals. We changed the workflow so the three analyses run in parallel, reach terminal states independently, and build a transparent partial profile when at least one valid signal remains. Product URLs were another wall: stores use inconsistent metadata, client-side rendering, and bot protection. The resolver now prefers structured data and Open Graph metadata, limits redirects and response size, rejects unsafe network targets, and always offers upload plus manual price correction. Finally, YouCam units are a real production resource. DASTYLE protects them with an on-device photo gate, authenticated provider routes, database-backed credits, idempotent charging, caching, and a zero-unit demo path.

Accomplishments that we're proud of

  • We combined Skin AI and Apparel VTO into one coherent decision loop instead of presenting disconnected API demonstrations.
  • We produced a complete consumer experience: landing page, guided capture, Style DNA, product ingestion, virtual try-on, verdict, history, savings, credits, privacy controls, and account deletion.
  • We built a deterministic recommendation engine whose inputs, factors, thresholds, and provenance can be inspected.
  • We verified the real YouCam integration end-to-end and documented the provider-specific findings without exposing API keys or task identifiers.
  • We made the judging experience safe and repeatable: the Naya demo is complete, visibly labelled, costs zero units, and never masquerades as a live result.
  • We kept credentials server-only and added owner-bound job tokens, private storage, row-level security, URL safety checks, image normalization, and end-to-end deletion.

What we learned

We learned that virtual try-on becomes much more valuable when it is connected to a decision. The image answers "what might this look like?"; the colour profile, product context, and explanation answer "what should I do next?" We also learned that capture quality is part of the product, not a technical afterthought. A local quality gate improves success rate, protects a limited API budget, and gives the shopper immediate feedback before any image leaves the device. Most importantly, personalization needs boundaries. Skin-derived signals can support visual colour guidance, but DASTYLE must clearly avoid medical claims, attractiveness scoring, and fit guarantees. Provenance and consent are product features, not compliance footnotes.

What's next for DESTYLE

Next, we want to turn DASTYLE from a single-item assistant into a lightweight retail decision layer:

  • browser and retailer integrations that open DASTYLE directly from a product page;
  • cart-level comparison across colours, products, and stores;
  • preference learning from explicit likes, skips, and completed purchases;
  • retailer analytics that explain which colour variants create hesitation or avoided spend;
  • merchant-provided product feeds for more reliable pricing and inventory;
  • webhooks and durable job queues for higher-volume production workloads; and
  • additional YouCam fashion categories such as shoes and accessories, while preserving the same explainable decision model.

Built With

Share this project:

Updates

Submission history