Medical Face Aligner: Before-and-After Comparison for Clinics

Overview

A web tool for the exact comparison of before and after photos in beauty and medical clinics. When two photos of the same face are taken some time apart, the head is tilted a little differently and the face is closer to or farther from the camera, which makes comparing by eye misleading. This tool aligns both photos automatically so that only the real change of the face is visible. I built this project in 2025.

The pictures on this page were made with the sample photos of the application itself.

What the application does

• Two ways to give input: take a photo straight from the camera of the device (for example in the clinic), or upload a high-quality photo from the archive. Three ready samples are there for a quick try.

• Automatic alignment: the face is found in each photo, and with 468 key points of the face the slope of the line between the eyes is calculated and the tilt of the head is corrected. The distance between the eyes is made equal in both photos so that the size of the face is the same.

• Smart cropping: the crop box is calculated from the coordinates of the face with percentage margins, so no black bars appear in the output and the face is always in the same place of the frame.

• Comparison with a slider: the result is shown with a before-and-after slider: by dragging it over the face, the change becomes visible.

• Output: download a side-by-side image for the patient file, with "before" and "after" labels.

The diagram below shows the workflow.

How it works

• Face detection: the MediaPipe Face Mesh model finds the 468 points. In the web version it runs in the browser itself, so the photo of the patient never leaves the device.

• Image mathematics: rotation, resizing and cropping are done with a transformation matrix on a Canvas, and the size of the rotated frame is recalculated so that the corners are not cut off.

• Server version (API): I also wrote the same algorithm with Python, OpenCV and FastAPI, which takes two photos and returns the two aligned photos, so that it can be used in other applications too. I also made a small OpenCV tool to see the result with a slider.

• Interface: dark and clean, with Next.js, React and Tailwind CSS.

Tools

• Next.js, React, TypeScript, Tailwind CSS

• MediaPipe Face Mesh, HTML Canvas

• Python, OpenCV, FastAPI (the API version)

Result

A tool that turns the comparison of before and after from a judgement by eye into a standard and reliable comparison, and gives a result ready to be put in the file within a few seconds.