> For the complete documentation index, see [llms.txt](https://docs.saas.haut.ai/haut.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.saas.haut.ai/haut.ai/quick-start-guides/build-custom-app-powered-by-haut.ai/create-the-best-end-user-experience-for-image-collection-in-your-app.md).

# Create the Best End-User Experience for Image Collection in Your App

This page describes the recommended steps to ensure the best user experience for image collection

{% hint style="success" %}
In the previous [step](/haut.ai/quick-start-guides/build-custom-app-powered-by-haut.ai/integrate-haut.ai-image-analysis-with-your-app.md), you already built a flow for image upload to SaaS, image analysis with SaaS Algorithms, and display of the Algorithms results.

Now, let's continue with image collection and AI quality control during image collection.
{% endhint %}

## About Image Collection

The image collection is a part of the end-user experience that allows them to engage with your app in real-time, making photos using their devices and submitting them for analysis.

It is important to understand that each use case is different in the requirements for image quality and analysis validity: *engaging apps might not always talk about skin problems to the same degree as professional dermatological apps*. However, it is true that higher quality image analysis allows for higher trust and engagement from the end-user perspective.

Every image has a set of quality parameters values, such as visibility of body part area, its position in frame relative to camera, illumination intensity and direction, etc. In the real world, the quality parameters values can vary significantly, but the AI analysis requires them to be in specific narrow ranges to return the most correct and stable result.

The **standardized images** are the images with all quality parameters that could impact the AI analysis, having values in specific narrow ranges. The ranges are defined based on the consequent AI analysis requirements to make sure that each standardized image results in the most possibly correct and stable AI analysis result.

***

## Integrate LIQA™ (Smart Camera Tool) into Your App

LIQA™ stands for "**L**ive **I**mage **Q**uality **A**ssurance." LIQA™ is a `JavaScript`-based library that provides a ready-to-use **"smart camera" experience**: the interactive interface for users to take a high-quality photo of a specific body part.

{% hint style="info" %}
Check the [LIQA™ feature description](/haut.ai/haut.ai-features/liqa.md) to know more about **LIQA**™.
{% endhint %}

LIQA supports integration into:

* Web apps
* Native apps (Swift/Kotlin)
* Cross-platform apps (Flutter/React Native)

{% hint style="info" %}
Follow the LIQA documentation to integrate LIQA: <https://docs.liqa.haut.ai/>
{% endhint %}

LIQA needs a license key to start. Create it in SaaS on the `LIQA licenses` tab of the `API and license keys` section, then pass it to LIQA as the `license` attribute. See [LIQA](/haut.ai/haut.ai-features/liqa.md#manage-liqa-licenses-in-saas) for the steps.

### FAQ about LIQA™

#### Is it necessary to use LIQA™? What could be the consequences of not using LIQA™?

Using LIQA™ is highly recommended for capturing high-quality photos, especially in applications like skin analysis. LIQA™ ensures that images are taken with optimal lighting and clarity, which is crucial for accurate assessments. Without LIQA™, there could be several potential issues:

* **Face detection errors**: Photos may miss the face entirely or capture it only partially, making automated analysis unreliable.
* **Inaccurate skin analysis**: Low lighting or poor focus may result in photos that are too dark or blurry. Insufficient light or shadows on the face can lead to inaccurate analysis results.

By using LIQA™, you can ensure better photo consistency, leading to more precise and reliable outcomes in skin analysis.

***

## Create a Seamless Smartphone Image Collection for Laptop Users with Two-Device Flow in Your App

Unfortunately, modern laptops/desktops still rarely possess built-in cameras with enough spatial resolution and signal-to-noise ratio for a good AI image analysis.

In contrast, modern mobile devices usually have high-quality cameras and high computational power, combined with mobility and ease of use.

{% hint style="warning" %}
We highly recommend designing your application so that laptop/desktop users use separate smartphone devices for image collection. We do not recommend having the option for image collection via desktop/laptop camera aside for testing purposes.

For your simplicity, LIQA provides a companion two-device flow that lets desktop users scan a QR code, capture the image on a smartphone, and return the captured image to the desktop LIQA session automatically.
{% endhint %}

{% hint style="info" %}
Check the LIQA Image Sources documentation for the companion flow: <https://docs.liqa.haut.ai/customization/user-flow/image-sources.html#allow-taking-photo-on-mobile-device-companion-flow-optional>
{% endhint %}

### Enable LIQA companion flow

To enable the two-device flow, add `companion` to the LIQA `sources` attribute:

```html
<hautai-liqa
  license="YOUR_LIQA_LICENSE_KEY"
  sources="front_camera,upload,companion"
>
</hautai-liqa>
```

### How the LIQA companion flow works

1. When LIQA starts on a desktop device, it displays the source-selection screen and prompts the user to scan a QR code to take a photo on a mobile device.
2. When the user scans the QR code, the mobile device opens the LIQA flow using the same configuration as the desktop session, including `styles`, `messages`, `preset`, and `sources`.
3. Once the photo is taken on the mobile device, the desktop LIQA session receives the photo and emits the `capture` event.
4. After receiving the `capture` event, pass the captured image to your existing backend upload flow.

{% hint style="info" %}
If LIQA does not detect a desktop device, the user goes through the usual LIQA flow on the current device. This means the same configuration can support desktop companion capture and direct mobile capture.
{% endhint %}

***

## FAQ

### Should users be allowed to upload previously captured Images?

Allowing users to upload previously captured images has both benefits and risks, and whether or not to enable this feature depends on your priorities for accuracy, user experience, and system design.

**Reasons to allow uploading of previously captured images**

1. **Convenience**: Users may prefer using existing photos, making the process faster and more flexible.
2. **Situational needs**: In some cases, users may not have ideal conditions (lighting, environment) to capture a new photo on the spot, so they can use a photo taken earlier.

**Reasons not to allow uploading of previously captured images**

1. **Inconsistent image quality**: Pre-captured images may not meet the quality standards for lighting, face visibility, or resolution. Without the real-time quality assessment of LIQA, the uploaded images could lead to inaccurate skin analysis.
2. **No real-time validation**: When users take photos in real-time through the app, you can ensure quality through on-the-spot validation. Allowing uploads removes that control, risking poor results.
3. **User frustration**: If uploaded images don't meet the quality requirements and are rejected, users may feel frustrated without understanding why, especially since the image was already captured.
4. **Potential for outdated photos**: Users could upload old or irrelevant photos that do not reflect their current skin condition, leading to misleading analysis.

{% hint style="info" %}
Some upload risks can be mitigated with [LIQA Photo Quality Check](https://docs.liqa.haut.ai/customization/quality-check/), which can validate uploaded images before analysis. For stricter flows, use `quality-check="strict"` or source-scoped checks for `upload`.
{% endhint %}

**Recommendation**

{% hint style="info" %}
It's generally recommended **not to allow uploading of previously captured images** in applications where real-time image quality is crucial, like skin analysis. However, if convenience and flexibility are prioritized, uploading could be allowed with certain safeguards, such as requiring users to meet specific image quality checks before submission.

In either case, clear guidelines should be provided to the user regarding the conditions and quality required for an image to ensure reliable analysis.
{% endhint %}

***

### How does a two-device flow improve both image quality and user experience?

The two-device flow, where a user starts on desktop and captures a photo using their mobile phone, offers several advantages for improving both image quality and the overall user experience:

**1. Higher image quality:**

* **Mobile camera capabilities**: Most mobile phones today have high-quality cameras with better sensors and image processing than desktop or laptop webcams. This results in clearer, sharper, and more detailed photos that are essential for accurate skin analysis.
* **Mobile camera features**: Smartphones often include features like auto-focus, face detection, and better lighting adjustments, which enhance the quality of the captured image.

**2. Improved user experience**

* **Convenience**: Using a mobile phone to take a photo is more natural and intuitive for users. Mobile devices offer greater flexibility in positioning and control, making it easier to take well-framed pictures.
* **Instant sync between devices**: The two-device flow ensures that the mobile-captured image is immediately returned to the desktop session, providing seamless feedback and real-time interaction between the two devices.

Two-device flow leverages the strengths of both desktop and mobile devices, resulting in a smooth process that delivers higher-quality images and an enhanced user experience.

***

## Next Steps

Follow our next guide [Integrate Haut.AI Product Recommendation with Your App](/haut.ai/quick-start-guides/build-custom-app-powered-by-haut.ai/integrate-haut.ai-product-recommendation-with-your-app.md) to learn how to:

* Build a customized product/treatment recommendation powered by [Product Recommendation System 2.0](/haut.ai/haut.ai-features/product-recommendation-system-2.0.md).

***

{% hint style="warning" %}
Not a Haut.AI client yet?
{% endhint %}

<a href="https://haut.ai/book-a-demo?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button primary" data-icon="user-vneck">Book a demo</a> <a href="https://haut.ai/product/ai-skin-analysis?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button secondary" data-icon="external-link">Platform overview on haut.ai</a>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.saas.haut.ai/haut.ai/quick-start-guides/build-custom-app-powered-by-haut.ai/create-the-best-end-user-experience-for-image-collection-in-your-app.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.