Mirrorform

• 

  hero page

• 

• 

• 

Inspiration

Beauty shopping often begins with uncertainty and ends with an overwhelming list of products. Skin-analysis tools may provide scores, but they rarely explain what those scores mean, what someone should do next, or how much the experience costs in data and API usage.

We built Mirrorform around a simpler idea:

Read first, recommend second, try on last.

We wanted to create a calm, transparent beauty experience that helps users understand their skin and make a confident decision—without presenting AI as an unquestionable black box.

What it does

Mirrorform turns a single photo into a guided beauty journey:

1. The Mirror helps the user capture or upload a suitable photo with framing guidance.
2. The Reading uses the YouCam Skin Analysis API to identify skin concerns and presents them as understandable visual signals.
3. The Routine converts the results into three ranked, practical actions generated locally, requiring no additional API calls.
4. The Look Bridge uses YouCam Virtual Try-On to help the user explore a look after understanding their needs.

Every session also includes visible API-cost information, an itemized usage record, and the ability to delete the submitted image. Mirrorform is designed as a beauty guidance tool, not a medical diagnostic service.

How we built it

Mirrorform uses a lightweight, framework-free web interface built with HTML, CSS, and JavaScript. A Node.js server connects the browser experience to a TypeScript application core.

We integrated two YouCam capabilities:

• Skin Analysis for extracting concern signals from the user's photo.
• Virtual Try-On for transforming the reading into a visual decision-making experience.

YouCam operations follow an asynchronous workflow: upload the image, create a task, receive a task ID, and poll until the task succeeds or fails. We built a reusable polling system with exponential backoff, jitter, timeouts, cancellation, and retry handling.

All vendor-specific code lives behind a VisionProvider interface. This lets Mirrorform use either the live YouCam provider or a deterministic mock provider. The mock follows the same application path, allowing us to rehearse the full experience without credentials or API usage.

The three-step routine is synthesized locally from the strongest concerns. This keeps the recommendation layer fast and resilient while avoiding unnecessary API consumption.

Because the hackathon API allocation is finite, we also created a server-side unit ledger. Every paid operation reserves its estimated units before making a network request:

[ \text{available units} = \text{budget} - \text{committed units} - \text{reserved units} ]

Successful calls are committed, while failed calls release their reservation. Separate budgets protect integration, testing, filming, and contingency units from one another.

Privacy was treated as part of the architecture rather than a policy added afterward. Captures are scoped to a session, responses never expose raw image data, logs redact credentials and image payloads, abandoned sessions expire, and users can explicitly delete their session.

Challenges we faced

The first major challenge was understanding that the YouCam APIs were asynchronous task systems rather than conventional request-response endpoints. Treating them as ordinary endpoints would have produced loading states that never completed. Building a shared polling abstraction solved this while also giving us reliable timeout and retry behavior.

Image handling was another challenge. Skin analysis and virtual try-on have different input expectations, and real users may submit large, rotated, poorly framed, or unsupported images. Mirrorform normalizes captures into provider-safe formats, validates decoded file size, and gives users actionable guidance when the provider rejects an image.

We also had to make failures feel intentional. “No face detected,” a temporary network failure, expired credentials, and an exhausted budget require completely different responses. We created a closed error taxonomy that decides whether an error is retryable, whether the user can correct it, and what safe message may be displayed.

Cross-platform testing uncovered a static-file path check that worked on Windows but failed on Linux and macOS. We replaced the hard-coded separator with platform-aware path handling and expanded our smoke testing. Screenshot automation also exposed timing issues with entrance animations, leading us to verify the interface using reduced-motion settings.

Finally, we had to balance a polished demo with limited API units. The mock provider, isolated budget buckets, and visible spending controls allowed us to iterate freely while preserving the units needed for live testing and filming.

What we learned

The biggest lesson was that an AI result is only as useful as the decision it enables. Displaying a collection of skin scores was technically possible, but it was not enough. Ranking the signals, explaining them in plain language, and connecting them to a short routine made the analysis useful.

We also learned that trust can be a product feature. Showing real elapsed time instead of a fake progress bar, displaying costs before an action, explaining why a recommendation appears, and providing genuine deletion controls all make the experience feel more credible.

Most importantly, we learned that the strongest AI products do not use an API for every step. Mirrorform uses YouCam where visual intelligence matters, then performs recommendation synthesis locally. That combination makes the experience faster, more affordable, and more resilient.

What’s next

Next, we want to expand Mirrorform with longitudinal skin tracking, product-catalog integrations, climate-aware routines, more inclusive validation across skin tones and lighting conditions, and retailer integrations that connect recommendations to suitable products.

Our goal is to make Mirrorform the trusted bridge between beauty analysis and confident action:

One photo. One honest reading. One look you can actually decide on.

Built With

• codex
• css
• html
• javascript
• kimi
• typescript