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.

Check the Masks description for more details.

Apply Mask V5 Http

post

Authorizations

HTTPBearer

AuthorizationstringRequired

Bearer authentication header of the form Bearer <token>.

Query parameters

company_idstring · uuidRequired

Body

application/json

image_idstring · uuid4Required

image_typestring · enumRequiredPossible values:

mask_over_imagebooleanOptionalDefault: false

Responses

200

Successful Response

application/json

422

Validation Error

application/json

post

/service/rasterisation/v5/svg_masks/

HTTPcURLJavaScriptPython

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"
    }
  ]
}

Draw mask onlyDraw mask over image

{
  "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)

{
    "algorithm_tech_name": "hydration",
    "masked_image_url": "https://storage.googleapis.com/prod-rasterised_images/companies/8e1d8206-f8e4-4615-924d-6b67abb907e4/images/245a25a8-a5a6-44ed-980c-b4341281389e/masks/v5/hydration_restored.svg?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=rasterisation%40sasuke-core-prd.iam.gserviceaccount.com%2F20250304%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20250304T091623Z&X-Goog-Expires=3600&X-Goog-SignedHeaders=host&X-Goog-Signature=a6cf133f8c185ab7aa903a9d09eac4df7dc51a3514ca214726bab1ed51ca3fe1ff22f4a3385db51efb032780c056b484b8912265c6b5a92e3f04c23bd4983f28b9600665307007f9fd76b797f4d2464f146f7c2094baa96666e8d1aaa1a267afdc17eb06ffd975d9221763f58571ec5ae6ab9cbb0654764099aa0252c861f91e689cae1d0205204dd76e08b47d8031ffeba6a0083cd7868da8571c10f0c9ac3660c44b0d330ac5ec8a224f43fc28a5b61e780c17aa9f1b520c2f7b1537aba032e85c8de459d2388db614b278165f96f7ce860e37af1685a320101b964a574c9541eb0ba96b89854b5c6df54f43cad545e2d2a5d52fc3f8cb786e084abaccfb3a",
    "error": null,
    "main_metric": {
      "name": "Hydration Score",
      "tech_name": "hydration_score",
      "value": 25,
      "widget_type": "bad_good_line"
    },
    "sub_metrics": [
      {
        "name": "Hydration Level",
        "tech_name": "hydration_level",
        "value": "Severe Dehydration",
        "widget_type": "category"
      }
    ]
}

Normal result without submetrics

{
    "algorithm_tech_name": "uniformness",
    "masked_image_url": "https://storage.googleapis.com/prod-rasterised_images/companies/8e1d8206-f8e4-4615-924d-6b67abb907e4/images/245a25a8-a5a6-44ed-980c-b4341281389e/masks/v5/uniformness_restored.svg?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=rasterisation%40sasuke-core-prd.iam.gserviceaccount.com%2F20250304%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20250304T091623Z&X-Goog-Expires=3600&X-Goog-SignedHeaders=host&X-Goog-Signature=95b0345083fe3f82cac806ab2f9f20417248ad7252c8ea1274f964982a3c3ab5788ff3cb3947410022d074525c1fa267adf046c2983dec6acd9c13d76593c9272b4186c523f112e77627f212703301f54b7efac104b617031fd7c745028467c624f88c27fbd117c05643a782b1e2ba25a0c5a1cd59f6b6f7c1fb4b03713c8d80eeae84de86500a08fb8786524fe9c102a8a24913bb8cee2f209a89f31df64e52bec4ac172935b13e8681b13e787b986b2c4ec716383609fb4e5221c68dbaf10fbf8631650295043b27ef308a902b05f58ed82dfa15b63fadd2ff3c989c1a24994d57c5212f47497a1fafe297ba9905568fde4182b2b34382643d35a8f8cde4af",
    "error": null,
    "main_metric": {
      "name": "Uniformness Score",
      "tech_name": "uniformness_score",
      "value": 59,
      "widget_type": "bad_good_line"
    },
    "sub_metrics": []
}

Normal result but without mask

{
    "algorithm_tech_name": "skin_type",
    "masked_image_url": null,
    "error": null,
    "main_metric": {
      "name": "Skin type",
      "tech_name": "face_skin_type_class",
      "value": "Dry",
      "widget_type": "category"
    },
    "sub_metrics": [
      {
        "name": "U-zone skin type",
        "tech_name": "u_zone_skin_type_class",
        "value": "Dry",
        "widget_type": "category"
      },
      {
        "name": "T-zone skin type",
        "tech_name": "t_zone_skin_type_class",
        "value": "Dry",
        "widget_type": "category"
      }
    ]
}

Possible Errors

If you accidentally request an algorithm without masks:

[
      {
            "algorithm_tech_name": "front_face_areas",
            "masked_image_url": null,
            "error": "front_face_areas processing error: The requested algorithm has no areas results.",
            "main_metric": null,
            "sub_metrics": []
      }
]

If you request an algorithm that wasn't calculated for the image:

[
    {
      "algorithm_tech_name": "acne.front_face_areas",
      "masked_image_url": null,
      "error": "acne.front_face_areas processing error: The requested algorithm is not found.",
      "main_metric": null,
      "sub_metrics": []
    }
]

Example SVG Mask

Hydration 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.

<object 
    type="image/svg+xml" 
    data="https://storage.googleapis.com/...">
</object>

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.

<div id="svg-container"></div>

<script>
fetch("https://storage.googleapis.com/...")
  .then(response => response.text())
  .then(data => {
    document.getElementById("svg-container").innerHTML = data;
  });
</script>

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:

polygon.vectorEffectClass.eye_bags-eye_bags_mask {
    fill: blueviolet;
}

So the result would look like this: