GlowUp Ai

💡 Inspiration Professional dermatological advice and clinical-grade skin analysis are often expensive, inaccessible, or intimidating. We wanted to democratize skincare by bringing clinical insights straight to the user's pocket. We were inspired by the gap between generic, one-size-fits-all beauty advice online and the highly personalized, data-driven approach used by professionals. Our goal was to create an interactive "AI dermatologist" that not only tells you what's going on with your skin but actually shows you through visual heatmaps and predictive analytics.

⚙️ How we built it We built GlowUp AI using a sleek, decoupled architecture.

Backend: We used Node.js and Express to create a robust server capable of handling high-resolution image uploads via Multer. The backend orchestrates a server-to-server (S2S) integration with the Perfect Corp Skin Analysis API. It handles the complex polling mechanism to retrieve the analysis data securely without exposing API keys to the client. Frontend: We crafted a responsive, glassmorphism-inspired UI using HTML5, modern Vanilla CSS, and JavaScript. We integrated interactive elements like a before/after simulation slider, hover-triggered visual heatmaps, and a PDF report generator for users to take their results on the go. Mock Mode: To preserve API credits during active development, we engineered an offline "Mock Mode" that simulates the API's polling delays and injects cached JSON data so our UI development was never bottlenecked. Challenges we ran into Integrating with a complex, asynchronous S2S API was our biggest hurdle. The Perfect Corp API requires a multi-step pipeline: creating a file entry, uploading raw binaries to an S3 presigned URL, triggering the task, and then continuously polling for results. Managing this async flow while providing snappy, real-time UI feedback to the user required careful state management.

Additionally, deeply parsing the nested, complex JSON response from the Perfect Corp API into clean, usable UI metrics was a massive challenge. We had to write recursive parsing algorithms to extract specific regional scores (like "left cheek" vs "whole face") and normalize inverted scores (where a lower score actually meant a worse condition) into a unified scoring format.

What we learned We learned a tremendous amount about handling asynchronous polling architectures and manipulating image buffers in Node.js.

We also learned how to normalize varied datasets. To calculate our unified "Overall Skin Health Score", we applied a simple but effective average across $N$ parsed metrics:

$$ \text{Overall Score} = \frac{1}{N} \sum_{i=1}^{N} \text{Metric}_i $$

This required standardizing all metrics to a common 0-100 scale, teaching us valuable lessons in data sanitization and frontend data visualization.

Built With

• css3-backend-framework:-node.js
• design
• dotenv-(for-environment-variable-management)-apis:-perfect-corp-skin-analysis-api-(server-to-server-v2.0)-architecture-patterns:-restful-api-polling
• express.js-middleware/tools:-multer-(for-memory-storage-image-handling)
• flexbox/grid
• glassmorphism
• html5
• languages:-javascript-(es6+)
• mock-data-injection-design/ui:-vanilla-css-(css-variables