Tutorial ​

The tutorial adds a short instruction flow before the user takes or uploads a photo. It helps the user make a correct photo by explaining the expected setup. The default tutorial suggestions are:

• remove glasses;
• move hair away from the face;
• remove any make-up or mask;
• keep the face well lit from the front.

Regular tutorial/banner flow is available on the Source Selection screen, so it requires sources to include a camera source (front_camera or back_camera) and upload. An exception is entry-point="tutorial-alt": it can show the tutorial immediately even when sources contains only a camera source.

Modes ​

Use the tutorial attribute to choose how the built-in instruction flow is shown:

• tutorial="off" disables the tutorial.
• tutorial="image" shows the built-in tutorial as image slides.
• tutorial="video" shows the built-in tutorial as video slides.

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
  tutorial="image"
>
</hautai-liqa>

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
  tutorial="image"
>
</hautai-liqa>

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
  tutorial="video"
>
</hautai-liqa>

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
  tutorial="video"
>
</hautai-liqa>

Defaults ​

The default image tutorial uses the following slides:

Tutorial visuals customization ​

Use the tutorial-character attribute to replace the tutorial visuals with another character.

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
  tutorial="video"
  tutorial-character="8"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
  tutorial="video"
  tutorial-character="8"
></hautai-liqa>

See Character Customization for the available character IDs and examples.

Custom tutorial ​

You can provide a custom tutorial by passing a JSON-encoded array to the tutorial attribute. Each item in the array must contain:

• src: an image URL for the tutorial step;
• hint: the instruction text displayed under that image.

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
  tutorial='[
    { "src": "https://your-domain.com/tutorial/step1.jpg", "hint": "Remove glasses" },
    { "src": "https://your-domain.com/tutorial/step2.jpg", "hint": "Move hair back" },
    { "src": "https://your-domain.com/tutorial/step3.jpg", "hint": "Keep your face well lit from the front" }
  ]'
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  sources="front_camera,upload"
  tutorial='[
    { "src": "https://your-domain.com/tutorial/step1.jpg", "hint": "Remove glasses" },
    { "src": "https://your-domain.com/tutorial/step2.jpg", "hint": "Move hair back" },
    { "src": "https://your-domain.com/tutorial/step3.jpg", "hint": "Keep your face well lit from the front" }
  ]'
></hautai-liqa>

How custom tutorial works ​

• Steps are displayed in the order they are provided in the JSON array.
• The first step image is also used in the tutorial banner preview on the Source Selection screen.
• If the JSON array is empty, LIQA falls back to the default built-in tutorial slides.
• tutorial-character is ignored.