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"
  },
  "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!",
    "face_pitch_angle_deviation": "Turn face to camera",
    "capturing_front": "Stay still",
    "capturing_left": "Move your head slowly\nto scan your skin",
    "capturing_right": "Move your head slowly\nto scan your skin"
  },
  "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"
  },
  "preview": {
    "title": "Well done!",
    "text": "Check how beautiful you are",
    "retake": "Retake",
    "submit": "Submit"
  }
}
{
  "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"
  },
  "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!",
    "face_pitch_angle_deviation": "Turn face to camera",
    "capturing_front": "Stay still",
    "capturing_left": "Move your head slowly\nto scan your skin",
    "capturing_right": "Move your head slowly\nto scan your skin"
  },
  "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"
  },
  "preview": {
    "title": "Well done!",
    "text": "Check how beautiful you are",
    "retake": "Retake",
    "submit": "Submit"
  }
}