Pressurance
Assuring pleaure with right pressure
The problem Pressurance solves
Throughout the development of this project, we successfully overcame several key problems that significantly improved the accuracy, usability, and performance of the application. One of the main issues we solved was identifying the closest possible landmark for the Touwei (ST8) acupressure point using MediaPipe's FaceMesh. Since there is no direct mapping for acupressure points in the model, we carefully analyzed the 3D facial mesh and tested multiple landmark indices to find the ones that most consistently aligned with the traditional location of ST8, finally achieving a near-accurate visual placement.
We also tackled the issue of asymmetry in landmark placement by implementing real-time face alignment strategies and choosing more stable landmark references. This helped ensure that both left and right points appeared symmetrically, even if the user tilted their head slightly.
Another major problem we solved was related to UI responsiveness and design consistency. Initially, Tailwind CSS was used, but we later transitioned to normal CSS to reduce dependency and improve cross-browser compatibility. We successfully replicated the modern design using pure CSS while maintaining responsiveness and clean layout structure.
Additionally, we optimized the countdown timer and highlight system so they function smoothly with minimal lag, even on lower-spec devices. This involved managing the animation and update intervals efficiently without overwhelming the rendering process.
Challenges we ran into
While developing this project, we encountered a range of challenges across both the technical and design phases. One of the initial hurdles was accurately identifying facial landmarks for the Touwei (ST8) acupressure point using MediaPipe's FaceMesh. Although the model provides 468 landmarks, finding the exact coordinates that closely match the traditional ST8 point required extensive experimentation, visual inspection, and adjustments due to a lack of labeled documentation for these specific acupoints.
Another significant issue was the asymmetry in landmark detection, especially when the user's head was slightly tilted or not perfectly aligned with the camera. MediaPipe landmarks are dynamically calculated and can vary slightly based on lighting, camera angle, and facial orientation, which led to inconsistencies in point placement. Ensuring the red dots were correctly and symmetrically positioned required trial and error and sometimes manual tuning.
We also struggled with customizing the UI using Tailwind CSS. Initially, it was difficult to convert those styles into standard CSS while preserving design consistency and responsiveness. Additionally, we had to ensure that the layout adjusted properly to different screen sizes.
Finally, integrating live feedback (like the countdown timer and point highlight animation) while keeping performance smooth was tricky. We had to carefully manage the refresh rate and UI re-renders to avoid flickering or lag.
Tracks Applied (1)