Running machine learning models directly in the browser creates some interesting opportunities for web developers.
Instead of sending images to remote APIs, applications can process sensitive data locally using client-side computer vision.
But there's a challenge that often gets overlooked: how do you make the experience understandable while a model is loading and processing an image?
Here are several lessons worth considering when building browser-based AI tools.
1. Model Loading Is Part of the User Experience
Traditional web applications often respond almost immediately after a user clicks a button.
Browser-based AI tools behave differently.
Before processing an image, the application may need to download a machine learning model, initialize its runtime, and prepare the inference environment.
On slower devices, this can take noticeably longer than expected.
Instead of displaying an unexplained loading spinner, consider communicating the current stage:
- Preparing the analysis model
- Reading the selected image
- Detecting image features
- Calculating the final result
These messages should correspond to actual application states rather than simulated progress.
2. Local Processing Can Improve Privacy
Facial photographs contain personal information.
Running computer vision locally means an application does not need to transmit those photographs to its own servers for analysis.
For example, MediaPipe Face Landmarker can detect facial reference points directly in a compatible web browser.
Developers can use these points to calculate geometric relationships between facial features.
However, local inference alone does not guarantee privacy. Analytics scripts, logging systems, and temporary storage should also be reviewed.
3. Explain the Measurements Instead of Just Showing a Score
Some AI tools reduce complex analysis to a single number.
This may look impressive, but users often have no idea how the number was calculated.
A more transparent interface can display individual measurements and explain what they mean.
Facial landmark analysis, for example, can explore symmetry, proportions, eye spacing, and lower-face geometry.
These are measurements estimated from a photograph, not objective judgments about a person's attractiveness.
4. An Example: PSL Rating AI
I explored these ideas while developing PSL Rating AI.
It is a free browser-based tool that detects facial landmarks and generates an experimental estimate using the informal 0–8 PSL rating scale.
The application explores four areas:
- Facial symmetry
- Facial proportions
- Eye geometry
- Lower-face balance
The analysis runs locally without uploading photos to application servers.
Users can explore the tool without creating an account or paying.
The PSL rating is not a scientifically validated measure of attractiveness. Results are intended for adults 18+ and entertainment or exploration purposes.
Not every photograph is suitable for computer vision analysis.
A useful application should recognize situations such as missing faces, multiple faces, poor lighting, or extreme head rotation.
Rather than generating an unreliable result, it should explain the problem and guide users toward a better input.
Clear error messages are especially important for applications that provide numerical estimates.
Final Thoughts
Building browser-based AI applications involves more than running a machine learning model.
Developers must consider performance, privacy, input validation, explainability, and the way results are presented.
A good AI interface should help users understand what the system is doing, what its measurements represent, and where its limitations begin.
Disclosure: I developed PSL Rating AI, the experimental application mentioned in this article.