LIQA™

Appearance

Quick Start ​

Use this guide when you want the fastest path from "we have LIQA access" to "our application can collect standardized images." It keeps the default LIQA experience, which is the best first step for validating the end-to-end user journey before adding custom sources, styles, tutorials, or production monitoring.

By the end of this page, your application will:

  • load LIQA from the Haut.AI CDN;
  • render the <hautai-liqa> smart camera experience;
  • receive captured images through the captures event.
  1. Access credentials
  2. Import
  3. Integration
  4. Collection of Images

Access credentials ​

These credentials connect the LIQA session to your company license and to the correct CDN assets.

  1. Contact Haut.AI to acquire the license for LIQA. See the Licensing section for more details.
  2. Receive a CDN (Content Delivery Network) URL "SOURCE_URL_PROVIDED_BY_HAUT.AI". This URL is used for downloading LIQA assets during LIQA sessions.
  3. Receive a license key "LICENSE_KEY_PROVIDED_BY_HAUT.AI". This key is used for identifying your Company during LIQA sessions.

Import ​

Import LIQA on the page where your user should start the capture flow. The script stays small and loads the full LIQA experience from the provided CDN URL when needed.

html
<script type="module" src="SOURCE_URL_PROVIDED_BY_HAUT.AI/liqa.js"></script>

This script exposes <hautai-liqa></hautai-liqa> tag that encapsulates the LIQA user-facing interface and logic, ready to be used.

Integration ​

Place the <hautai-liqa> tag where the capture experience should appear in your application. With the default configuration, the LIQA session starts as soon as the component is rendered.

tsx
tsx
<hautai-liqa license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"></hautai-liqa>

tsx
<hautai-liqa license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"></hautai-liqa>

This script inserts LIQA into the selected place of your application and automatically starts the LIQA session.

Give the container enough room: LIQA fills its container, which should have a height of at least 600px. See Container size for details.

Integration problems?

If you face any issues at this moment, please check the Troubleshooting page for most common problems and solutions.

Collection of Images ​

Once the user completes the flow, your application receives standardized images and can continue with its own business logic: upload to Haut.AI SaaS, attach to a user profile, show a preview, or trigger recommendations.

Collect the standardized images emitted by LIQA by adding an event listener for the "captures" event:

js
js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("captures", handleImageCaptures)

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("captures", handleImageCaptures)
tsx
tsx
export function App() {
  const ref = React.useRef()
 
  React.useEffect(() => {
    ref.current.addEventListener("captures", handleImageCaptures)
 
    return () => ref.current.removeEventListener("captures", handleImageCaptures)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    ></hautai-liqa>
  )
}

tsx
export function App() {
  const ref = React.useRef()
 
  React.useEffect(() => {
    ref.current.addEventListener("captures", handleImageCaptures)
 
    return () => ref.current.removeEventListener("captures", handleImageCaptures)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    ></hautai-liqa>
  )
}
vue
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  @captures="handleImageCaptures"
></hautai-liqa>
html
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  (captures)="handleImageCaptures($event)"
></hautai-liqa>
svelte
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  on:captures="{handleImageCaptures}"
></hautai-liqa>

This script offers an event listener with a mockup function for handling the LIQA ImageCapture. The simplest handleImageCaptures function converts the captured image into a Blob JPEG that can be later displayed or sent to the server.

ts
ts
async function handleImageCapture(event: CustomEvent<ImageCapture[]>) {
  const images = await Promise.all(
    // returns the captured images as Blobs (JPEG format)
    event.detail.map((capture) => capture.()),
Property 'blob' does not exist on type 'ImageCapture'.2339Property 'blob' does not exist on type 'ImageCapture'.  )
 
  yourCustomProcessing(images)
}

ts
async function handleImageCapture(event: CustomEvent<ImageCapture[]>) {
  const images = await Promise.all(
    // returns the captured images as Blobs (JPEG format)
    event.detail.map((capture) => capture.()),
Property 'blob' does not exist on type 'ImageCapture'.2339Property 'blob' does not exist on type 'ImageCapture'.  )
 
  yourCustomProcessing(images)
}
Deprecated ways to handle captures (<6.14.0)

Single capture ​

Applies to the "hair" and "face" presets. The following code snippet demonstrates how to handle a single image capture event:

ts
ts
async function handleImageCapture(event: CustomEvent<ImageCapture>) {
  const capture = event.detail
 
  const image = await capture.blob() // returns the captured image as Blob
 
  // ...app logic handling the captured image...
}

ts
async function handleImageCapture(event: CustomEvent<ImageCapture>) {
  const capture = event.detail
 
  const image = await capture.blob() // returns the captured image as Blob
 
  // ...app logic handling the captured image...
}

Multiple captures ​

Applies to the "face-180" preset. When the capture process completes, it produces 3 different images, each representing a different face side. You can retrieve the information about the face side from the image metadata (event.detail.metadata). The code snippet below demonstrates an example how to handle multiple captures and process each based on the face side::

ts
ts
const processedCaptures = []
 
async function handleImageCapture(event: CustomEvent<ImageCapture>) {
  const capture = event.detail
 
  const image = await capture.() // returns the captured image as Blob
Property 'blob' does not exist on type 'ImageCapture'.2339Property 'blob' does not exist on type 'ImageCapture'.  const { side } = capture. // access the capture's face side
Property 'metadata' does not exist on type 'ImageCapture'.2339Property 'metadata' does not exist on type 'ImageCapture'.  const processedCapture = yourCustomProcessing(image, side)
 
  // ...app logic handling the captured image...
 
  processedCaptures.push(processedCapture)
}

ts
const processedCaptures = []
 
async function handleImageCapture(event: CustomEvent<ImageCapture>) {
  const capture = event.detail
 
  const image = await capture.() // returns the captured image as Blob
Property 'blob' does not exist on type 'ImageCapture'.2339Property 'blob' does not exist on type 'ImageCapture'.  const { side } = capture. // access the capture's face side
Property 'metadata' does not exist on type 'ImageCapture'.2339Property 'metadata' does not exist on type 'ImageCapture'.  const processedCapture = yourCustomProcessing(image, side)
 
  // ...app logic handling the captured image...
 
  processedCaptures.push(processedCapture)
}