LIQA™

Appearance

Text Messages ​

LIQA has a default English user interface. It is possible to modify the phrases to match the language of your application for localization or slightly change the text messages wording to better fit your application's vibe.

Use the messages API to customize the user interface text messages. If property is left empty, the default interface text messages in English will be used. See all available options below.

Usage ​

The messages attribute accepts a string containing a valid JSON object:

tsx
tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  messages='{ "preview": { "retake": "Retake photo", "submit": "Confirm" } }'
></hautai-liqa>

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  messages='{ "preview": { "retake": "Retake photo", "submit": "Confirm" } }'
></hautai-liqa>

JSON object structure ​

All text messages should be provided in a JSON object, that has a clear structure to specify the text messages for each screen and section of the user interface. The structure is described below:

ts
ts
{
  [key: ScreenName]: {
    [key: MessageKey]: TextMessage
    [key: SectionName]: {
      [key: MessageKey]: TextMessage
    }
  }
}

ts
{
  [key: ScreenName]: {
    [key: MessageKey]: TextMessage
    [key: SectionName]: {
      [key: MessageKey]: TextMessage
    }
  }
}

Example ​

To modify source selection screen texts, we should identify:

ts
ScreenName = "source_selection"
SectionName = "camera_permissions_warning"
MessageKey = "title"
TextMessage = "<Here goes your string to replace the defaut value>"
ScreenName = "source_selection"
SectionName = "camera_permissions_warning"
MessageKey = "title"
TextMessage = "<Here goes your string to replace the defaut value>"

And the JSON object will look like this:

json
{
  "source_selection": {
    "camera_permissions_warning": {
      "title": "<Here goes your string to replace the defaut value>"
    }
  }
}
{
  "source_selection": {
    "camera_permissions_warning": {
      "title": "<Here goes your string to replace the defaut value>"
    }
  }
}

Passing it to the messages attribute will replace the default text message value for specified screen and specified section with the text provided in the JSON object.

Partial Text Replacement is Supported

Any key from the structure can be omitted. The default values will be used for all omitted keys.

Default Values ​

All the available message keys and their default values are shown in the snippet below:

json
{
  "source_selection": {
    "title": "Select the capture option",
    "camera_permissions_warning": {
      "title": "Camera access denied",
      "instructions_reset": "Update browser's camera permissions for this app to use a camera or upload a photo from the device.",
      "instructions_reload": "Update browser's camera permissions for this app to use a camera or upload a photo from the device."
    },
    "camera_video": "Take a photo",
    "upload_photo": "Upload from device",
    "continue_on_desktop": "Continue on desktop"
  },
  "tutorial": {
    "how_to_take_a_photo": "How to take a great photo",
    "good_lighting": "Your face should be well lit\nfrom a front",
    "hair_away_from_face": "Move hair back",
    "makeup_off": "Remove extensive make-up\nor mask.",
    "glasses_off": "Remove glasses",
    "tip": "Tip",
    "take_photo": "Take a photo",
    "next": "Next",
    "close": "Close"
  },
  "face_live_video": {
    "face_displaced": "Place face inside frame",
    "face_placement_fixed": "Perfect!",
    "face_distance_far": "Move closer",
    "face_distance_close": "Move further away",
    "face_distance_fixed": "Perfect!",
    "face_angle_deviation": "Turn face to camera",
    "face_angle_fixed": "Perfect!",
    "lighting_insufficient": "Find a brighter place",
    "lighting_excessive": "Find a darker place",
    "lighting_angle_deviation": "Turn to the light source",
    "lighting_fixed": "Perfect!",
    "capturing": "Look at the camera"
  },
  "face_180_live_video": {
    "face_displaced": "Place face inside frame",
    "face_placement_fixed": "Perfect!",
    "face_distance_far": "Move closer",
    "face_distance_close": "Move further away",
    "face_distance_fixed": "Perfect!",
    "face_angle_deviation": "Turn face to camera",
    "face_angle_fixed": "Perfect!",
    "lighting_insufficient": "Find a brighter place",
    "lighting_excessive": "Find a darker place",
    "lighting_angle_deviation": "Turn to the light source",
    "lighting_fixed": "Perfect!",
    "rotating_left": "Move your head slowly",
    "rotating_right": "Move your head slowly",
    "capturing_front": "Stay still",
    "capturing_left": "Stay still",
    "capturing_right": "Stay still",
    "capturing_done": "Perfect!"
  },
  "hair_live_video": {
    "face_displaced": "Place face inside frame",
    "face_placement_fixed": "Perfect!",
    "face_distance_close": "Move further away",
    "face_distance_fixed": "Perfect!",
    "lighting_insufficient": "Find a brighter place",
    "lighting_fixed": "Perfect!",
    "hair_not_visible": "Make your hair visible",
    "hair_visibility_fixed": "Perfect!",
    "face_angle_deviation": "Turn face to camera",
    "face_angle_fixed": "Perfect!",
    "capturing": "Make your hair visible\nPhoto will be collected automatically"
  },
  "image_quality": {
    "face_displaced": {
      "title": "No face detected",
      "description": "Make sure your face is visible"
    },
    "face_pitch_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "face_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "face_yaw_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "lighting_insufficient": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "lighting_excessive": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "lighting_angle_deviation": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "quality_noise": {
      "title": "Too much noise",
      "description": "Make sure your face is well lit"
    },
    "quality_blur": {
      "title": "Image is blurry",
      "description": "Try taking a sharper photo for better results"
    },
    "quality_resolution": {
      "title": "Low resolution",
      "description": "Upload a higher resolution photo"
    },
    "quality_resolution_retake_or_upload": {
      "title": "Low resolution",
      "description": "Take or upload a higher resolution photo"
    },
    "quality_resolution_retake": {
      "title": "Low resolution",
      "description": "Take a higher resolution photo"
    },
    "quality_full_face": {
      "title": "Full face not visible",
      "description": "Ensure your entire face is within the frame"
    },
    "low_image_quality": {
      "title": "Your image has a few issues",
      "description": "Use a better quality photo for accurate analysis"
    },
    "well_done": {
      "title": "Well done!",
      "description": "Check how beautiful you are"
    }
  },
  "preview": {
    "title": "Well done!",
    "retake": "Retake",
    "submit": "Submit",
    "upload": "Upload",
    "image_issue": "Image issue"
  },
  "error": {
    "title": "Ooops",
    "description": "Live Video failed because of some internal error. Please, use Upload photo option."
  },
  "companion": {
    "invite_title": "Scan this QR code to take a photo with your smartphone",
    "invite_description": "The results will be shown here",
    "active_title": "Take a selfie on your smartphone",
    "uploading_title": "Uploading",
    "uploading_description": "File processing in progress",
    "done_title": "Continue on your desktop",
    "done_description": "You can close this page and continue on another device",
    "error_title": "Ooops",
    "error_description": "Photo capture failed because of some internal error.\nPlease, reload the page and try again."
  }
}
{
  "source_selection": {
    "title": "Select the capture option",
    "camera_permissions_warning": {
      "title": "Camera access denied",
      "instructions_reset": "Update browser's camera permissions for this app to use a camera or upload a photo from the device.",
      "instructions_reload": "Update browser's camera permissions for this app to use a camera or upload a photo from the device."
    },
    "camera_video": "Take a photo",
    "upload_photo": "Upload from device",
    "continue_on_desktop": "Continue on desktop"
  },
  "tutorial": {
    "how_to_take_a_photo": "How to take a great photo",
    "good_lighting": "Your face should be well lit\nfrom a front",
    "hair_away_from_face": "Move hair back",
    "makeup_off": "Remove extensive make-up\nor mask.",
    "glasses_off": "Remove glasses",
    "tip": "Tip",
    "take_photo": "Take a photo",
    "next": "Next",
    "close": "Close"
  },
  "face_live_video": {
    "face_displaced": "Place face inside frame",
    "face_placement_fixed": "Perfect!",
    "face_distance_far": "Move closer",
    "face_distance_close": "Move further away",
    "face_distance_fixed": "Perfect!",
    "face_angle_deviation": "Turn face to camera",
    "face_angle_fixed": "Perfect!",
    "lighting_insufficient": "Find a brighter place",
    "lighting_excessive": "Find a darker place",
    "lighting_angle_deviation": "Turn to the light source",
    "lighting_fixed": "Perfect!",
    "capturing": "Look at the camera"
  },
  "face_180_live_video": {
    "face_displaced": "Place face inside frame",
    "face_placement_fixed": "Perfect!",
    "face_distance_far": "Move closer",
    "face_distance_close": "Move further away",
    "face_distance_fixed": "Perfect!",
    "face_angle_deviation": "Turn face to camera",
    "face_angle_fixed": "Perfect!",
    "lighting_insufficient": "Find a brighter place",
    "lighting_excessive": "Find a darker place",
    "lighting_angle_deviation": "Turn to the light source",
    "lighting_fixed": "Perfect!",
    "rotating_left": "Move your head slowly",
    "rotating_right": "Move your head slowly",
    "capturing_front": "Stay still",
    "capturing_left": "Stay still",
    "capturing_right": "Stay still",
    "capturing_done": "Perfect!"
  },
  "hair_live_video": {
    "face_displaced": "Place face inside frame",
    "face_placement_fixed": "Perfect!",
    "face_distance_close": "Move further away",
    "face_distance_fixed": "Perfect!",
    "lighting_insufficient": "Find a brighter place",
    "lighting_fixed": "Perfect!",
    "hair_not_visible": "Make your hair visible",
    "hair_visibility_fixed": "Perfect!",
    "face_angle_deviation": "Turn face to camera",
    "face_angle_fixed": "Perfect!",
    "capturing": "Make your hair visible\nPhoto will be collected automatically"
  },
  "image_quality": {
    "face_displaced": {
      "title": "No face detected",
      "description": "Make sure your face is visible"
    },
    "face_pitch_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "face_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "face_yaw_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "lighting_insufficient": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "lighting_excessive": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "lighting_angle_deviation": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "quality_noise": {
      "title": "Too much noise",
      "description": "Make sure your face is well lit"
    },
    "quality_blur": {
      "title": "Image is blurry",
      "description": "Try taking a sharper photo for better results"
    },
    "quality_resolution": {
      "title": "Low resolution",
      "description": "Upload a higher resolution photo"
    },
    "quality_resolution_retake_or_upload": {
      "title": "Low resolution",
      "description": "Take or upload a higher resolution photo"
    },
    "quality_resolution_retake": {
      "title": "Low resolution",
      "description": "Take a higher resolution photo"
    },
    "quality_full_face": {
      "title": "Full face not visible",
      "description": "Ensure your entire face is within the frame"
    },
    "low_image_quality": {
      "title": "Your image has a few issues",
      "description": "Use a better quality photo for accurate analysis"
    },
    "well_done": {
      "title": "Well done!",
      "description": "Check how beautiful you are"
    }
  },
  "preview": {
    "title": "Well done!",
    "retake": "Retake",
    "submit": "Submit",
    "upload": "Upload",
    "image_issue": "Image issue"
  },
  "error": {
    "title": "Ooops",
    "description": "Live Video failed because of some internal error. Please, use Upload photo option."
  },
  "companion": {
    "invite_title": "Scan this QR code to take a photo with your smartphone",
    "invite_description": "The results will be shown here",
    "active_title": "Take a selfie on your smartphone",
    "uploading_title": "Uploading",
    "uploading_description": "File processing in progress",
    "done_title": "Continue on your desktop",
    "done_description": "You can close this page and continue on another device",
    "error_title": "Ooops",
    "error_description": "Photo capture failed because of some internal error.\nPlease, reload the page and try again."
  }
}