Integration Details

This page explains how the Web Measurement Embedded App (WMEA) fits into your application. It primarily focuses on technical integration, but also covers user-facing messages and supported languages.

Component Integration

The WMEA is integrated directly by initializing the MeasurementEmbeddedApp class. Fetch your credentials first, then call init method which accepts an object of type MeasurementEmbeddedAppOptions.

import MeasurementEmbeddedApp, {
  faceAttributeValue,
  type Profile,
  type MeasurementEmbeddedAppOptions,
} from '@nuralogix.ai/web-measurement-embedded-app';

const { SEX_ASSIGNED_MALE_AT_BIRTH, SMOKER_FALSE, BLOOD_PRESSURE_MEDICATION_FALSE, DIABETES_NONE } =
  faceAttributeValue;
const measurementApp = new MeasurementEmbeddedApp();

// Retrieve credentials before init
// Let's assume fetchStudyId and fetchToken functions
// call your server endpoints (e.g., /api/studyId, /api/token)
const studyIdResponse = await fetchStudyId(); // { status: '200', studyId }
const tokenResponse = await fetchToken(); // { status: '200', token, refreshToken }

if (studyIdResponse.status === '200' && tokenResponse.status === '200') {
  const container: HTMLDivElement = document.createElement('div');

  // Style the container before passing it to MeasurementEmbeddedApp
  Object.assign(container.style, {
    position: 'fixed',
    top: '60px',
    left: '0',
    width: '100vw',
    height: 'calc(100vh - 60px)',
  });

  const profile: Profile = {
    age: 40,
    height: 180,
    weight: 60,
    sex: SEX_ASSIGNED_MALE_AT_BIRTH,
    smoking: SMOKER_FALSE,
    bloodPressureMedication: BLOOD_PRESSURE_MEDICATION_FALSE,
    diabetes: DIABETES_NONE,
    bypassProfile: false,
  };

  const options: MeasurementEmbeddedAppOptions = {
    container,
    appPath: './measurement-app',
    settings: {
      token: tokenResponse.token,
      refreshToken: tokenResponse.refreshToken,
      studyId: studyIdResponse.studyId,
    },
    profile,
    // language: 'en',                      // [optional] See list of supported languages
    // apiUrl: 'api.na-east.deepaffex.ai',  // [optional] for region specific data processing
    // config,                              // [optional]
    loadError: function (error) {
      console.error('Load error', error);
    },
  };
}
Copy

Notes:

1. Profile values must use the exact faceAttributeValue enum values as shown in the example above. If you are collecting demographic info from a form we recommend setting up your form to use these values so you don't have to worry about conversions.

2. Default Config used if the optional config object is not passed:

const defaultConfig: Config = {
  checkConstraints: true,
  cameraFacingMode: 'user',
  cameraAutoStart: false,
  measurementAutoStart: false,
  cancelWhenLowSNR: true,
};
Copy

Results

Results are delivered via on.results event handler. A common pattern is to save them to your app state, then navigate to the results page in your application:

measurementApp.on.results = (results) => {
  // 1) Persist results in your app state
  store.measurement.setResults(results);

  // 2) Navigate to the results page in your SPA
  router.push('/results');
};
Copy

Note: Results are available immediately upon measurement completion through the event handler. If legal agreement allows, detailed results can be retrieved later using DeepAffex API endpoints.

Error Handling

Errors are delivered via on.error event handler:

import { ErrorCodes } from '@nuralogix.ai/web-measurement-embedded-app';
measurementApp.on.error = (error) => {
  switch (error.code) {
    case ErrorCodes.PROFILE_INFO_NOT_SET:
      console.log('Profile information is not set', error);
      break;
    // Add switch statements for the rest of available ErrorCodes
    default:
      console.log('An unknown error occurred', error);
  }
};
Copy

For a list of available error codes please see ErrorCodes

Event Handling

Events are delivered via on.event event handler:

import { appEvents } from '@nuralogix.ai/web-measurement-embedded-app';

measurementApp.on.event = (appEvent) => {
  switch (appEvent) {
    case appEvents.APP_LOADED:
      console.log('Application loaded');
      break;
    // Add switch statements for the rest of available app events
    default:
      console.log('An unknown app event occurred', appEvent);
      break;
  }
};
Copy

For a list of available error codes please see appEvents

Supported Languages

Language selection follows this priority:

1. Language specified in initialization object
2. Browser's active language (if supported)
3. English (default)

For a list of available supported languages, please see SupportedLanguage

Other methods and properties

For a complete list of available methods and properties, please see MeasurementEmbeddedApp