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

In the previous step, 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.

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 "Live Image Quality Assurance." 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.

Check the LIQA™ feature description to know more about LIQA™.

LIQA supports integration into:

  • Web apps

  • Native apps (Swift/Kotlin)

  • Cross-platform apps (Flutter/React Native)

Follow the LIQA documentation to integrate LIQA: https://docs.liqa.haut.ai/

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.

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, we provide the best user experience to build a seamless image collection with smartphone devices for end-users who started your app on laptop/desktop devices.

The flow covers these steps:

  1. End-user starts your app on a laptop/desktop device

  2. Generate a QR сode with a link

  3. End-user scans the QR code with a smartphone device

  4. End-user opens page from your QR-code link page

  5. End-user takes a photo using a smartphone device camera

  6. Your app uploads a collected image to your server

  7. Your server receives the image and signals the opened desktop session

  8. Your app frontend on the desktop receives the image uploaded signal

Here are the steps in more detail on how to build it:

End-user starts your app on a laptop/desktop device

When the user starts your app on a laptop/desktop device:

  • Your server should generate a unique session identifier (token).

  • Your frontend should display a QR code that contains a link for mobile phones to access.

Generate a QR сode with a link

Here are some hints on how to do it easier

  • You can generate a QR code with a link pointing to your server, embedding the session token in the URL.

  • Use a library like qrcode in Python or a JavaScript solution to generate the QR code dynamically.

Example:

<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://yourapp.com/mobile-login?token=UNIQUE_SESSION_TOKEN" alt="QR Code">

End-user scans the QR code with a smartphone device

The user scans the QR code using their smartphone phone, which directs them to a mobile webpage that is connected to the desktop session through the unique token.

End-user opens page from your QR-code link page

  • On the mobile webpage, use the token from the URL to identify the corresponding session on the server (see End-user starts your app on a laptop/desktop device).

  • You can store session details on the server and associate both the desktop and mobile clients with the same session token.

End-user takes a photo using a smartphone device camera

On the mobile page, the user is prompted to take a photo using their phone's camera.

Your app can use LIQA™ here, see #integrate-liqa-tm-smart-camera-tool

Alternatively, you can use built-in HTML5 API getUserMedia to access the smartphone device camera without quality control by LIQA™.

Your app uploads a collected image to your server

Once the end-user captures the photo, your app frontend on a smartphone device can send the image data to your server.

We highly recommend formatting the image to the data format acceptable to SaaS API. If your app uses LIQA™, follow the instructions in LIQA documentation.

Alternatively, you should make sure the image is formatted as a base64 string. You can do it by using JavaScript or send it directly using the FormData:

const formData = new FormData();
formData.append('photo', file);

fetch('https://yourapp.com/upload-photo', {
  method: 'POST',
  body: formData
}).then(response => response.json())
.then(data => {
  // Handle success
});

Your server receives the image and signals the opened desktop session

  • After the frontend of the page, opened on a smartphone device, uploads the image to the server, the server can send a real-time update to the desktop page to notify that the image has been captured and uploaded.

  • We recommend using WebSockets, Server-Sent Events (SSE), or polling to send this signal to the desktop page.

Example using WebSockets:

const socket = new WebSocket('wss://yourapp.com/ws');
socket.onmessage = function(event) {
  console.log('Photo captured and uploaded:', event.data);
};

Your app frontend on the desktop receives the image uploaded signal

  • When your app page, opened on a desktop device, receives the signal from your server, the page can update the UI to show that the image has been captured and uploaded.

  • Your app can display a success message, show the uploaded image (fetched from the server), or trigger any further actions, depending on the logic of your app.

Please remember that the provided flow depends on your app use case and your capabilities. You can adjust the steps or choose your own methods to achieve the same results. If you need any consultation, please contact our support team for advice.

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.

Recommendation

Should users be allowed to upload previously captured Images?

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.

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

The two-device flow, where a user logs in on a 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 uploaded and linked 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 to learn how to:

PreviousIntegrate Haut.AI Image Analysis with Your AppNextIntegrate Haut.AI Product Recommendation with Your App

Last updated