DEV Community
Follow
How I built a browser-only face-rating app with Next.js + MediaPipe (no upload, $0 per scan)
The author created PSLRate to address issues with existing "rate my face" tools that upload selfies or incur per-scan API costs. PSLRate's core principle is to compute facial attractiveness scores entirely within the user's browser, eliminating the need for server uploads or recurring charges. This client-side approach focuses on measurable geometric features of the face, such as symmetry, facial thirds and fifths, canthal tilt, and facial width-to-height ratio. These geometric calculations are deterministic and do not require external models or cloud processing. The tool leverages MediaPipe's FaceLandmarker to extract 478 3D facial landmarks directly on the user's device. These landmarks are then used to calculate various geometric metrics, each scored on a scale of zero to one based on its proximity to ideal proportions. A weighted blend of these geometric scores is used to generate a final attractiveness score out of ten. This free tier is completely client-side, making it genuinely free and privacy-preserving, as the user's photo never leaves their browser. A paid tier is available, which sends the photo once to a vision LLM for a personality and "glow-up" reading, covering the API cost through user credits. This architectural decision to push deterministic work to the client is highlighted as key to creating a valuable and trustworthy free product.