API for SVG Masks
How to receive Algorithm Masks visualized as SVG images.
the Masks are additional results of image analysis, representing the spatial information about detected skin/hair health returned by the selected set of Algorithms.
falseSuccessful Response
https://storage.googleapis.com/...Validation Error
POST /service/rasterisation/v5/svg_masks/?company_id=123e4567-e89b-12d3-a456-426614174000 HTTP/1.1
Host: saas.haut.ai/
Authorization: Bearer YOUR_SECRET_TOKEN
Content-Type: application/json
Accept: */*
Content-Length: 1004
{
"image_id": "245a25a8-a5a6-44ed-980c-b4341281389e",
"image_type": "restored",
"mask_over_image": false,
"masks": [
{
"algorithm_tech_name": "hydration"
},
{
"algorithm_tech_name": "uniformness"
},
{
"algorithm_tech_name": "solar_pigmentation"
},
{
"algorithm_tech_name": "freckles"
},
{
"algorithm_tech_name": "redness"
},
{
"algorithm_tech_name": "translucency"
},
{
"algorithm_tech_name": "melasma"
},
{
"algorithm_tech_name": "moles"
},
{
"algorithm_tech_name": "lines"
},
{
"algorithm_tech_name": "post_inflammatory_hyperpigmentation"
},
{
"algorithm_tech_name": "eye_bags"
},
{
"algorithm_tech_name": "acne_inflammation"
},
{
"algorithm_tech_name": "pores"
},
{
"algorithm_tech_name": "pustules"
},
{
"algorithm_tech_name": "papules"
},
{
"algorithm_tech_name": "acne_class"
},
{
"algorithm_tech_name": "skin_tone"
},
{
"algorithm_tech_name": "pigmentation"
},
{
"algorithm_tech_name": "quality"
},
{
"algorithm_tech_name": "acne"
},
{
"algorithm_tech_name": "skin_type"
},
{
"algorithm_tech_name": "eyes_age"
},
{
"algorithm_tech_name": "age"
},
{
"algorithm_tech_name": "skintone_classification"
}
]
}{
"results": {
"algorithm_tech_name": "hydration",
"main_metric": {
"name": "Hydration Score",
"tech_name": "hydration_score",
"value": 25,
"widget_type": "bad_good_line"
},
"masked_image_url": "https://storage.googleapis.com/...",
"sub_metrics": [
{
"name": "Hydration Level",
"tech_name": "hydration_level",
"value": "Severe Dehydration",
"widget_type": "category"
}
]
},
"quality_feedback": {
"overlay": "Low quality image",
"tooltip": {
"negative": [
"Improper light source positioning"
],
"positive": [
"Good face resolution"
],
"warn": []
}
},
"image_url": "https://storage.googleapis.com/..."
}Possible Results
Normal full result (masked image + metrics + submetrics)
Normal result without submetrics
Normal result but without mask
Possible Errors
If you accidentally request an algorithm without masks:
If you request an algorithm that wasn't calculated for the image:
Example SVG Mask
How to embed SVG mask or image to HTML
Without JavaScript
Using object tag, just insert the generated signed URL into data attribute.
✅ Pros: Retains SVG scalability and interactions.
❌ Cons: Limited browser support and no direct CSS styling.
With JavaScript
Download SVG content from the signed URL and inject it into your div container.
✅ Pros: Allows direct manipulation via CSS and JS.
❌ Cons: Requires JavaScript to fetch and insert the SVG.
CSS mask customization example
For example I have the svg mask for eye bags algorithm.
The mask consists of 3 masks actually:
eye_bags-dark_circles_mask(yellow)eye_bags-eye_bags_mask(green)eye_bags-lacrimal_grooves_mask(white)
And it will look like this:
For example, I would like to override the fill color of eye_bags-eye_bags_mask.
In order to achieve it, I need to add this CSS rule:
So the result would look like this:
Not a Haut.AI client yet?
Last updated