Web Measurement Embedded App (WMEA) - v0.1.0-beta.7

This guide will help you effectively use NuraLogix Web Measurement Embedded App (WMEA) to create useful working web applications.

Installation

The main way that we ship our NuraLogix Web Measurement Embedded App (WMEA) code to NPM is as ECMAScript modules with ECMAScript 2022, the 13th edition syntax. This allows developers to take advantage of modern JavaScript features and have greater control over what they ship to their end users.

You can use either of the following methods to add the library to your project:

Package managers

# yarn
yarn add @nuralogix.ai/web-measurement-embedded-app

# npm
npm install @nuralogix.ai/web-measurement-embedded-app

Load from a Content Delivery Network (CDN)

You can use NuraLogix Web Measurement Embedded App (WMEA) directly in the browser via a CDN such as unpkg, jsDelivr, Skypack, esm.sh and npmmirror (a complete mirror of npmjs.com in China).

Here are some key advantages of using import maps to load NuraLogix Web Measurement Embedded App (WMEA) from well-known CDNs:

1. Simplifies Dependency Management

No need for a bundler like Webpack or Rollup to resolve module imports.
Works directly in the browser without additional setup.

2. Faster Load Times with CDNs

CDNs optimize delivery with caching, compression, and edge locations.
Reduces latency compared to self-hosted libraries.

3. Automatic Versioning and Updates

Easily switch versions by updating the import map.
Can use version pinning (e.g., unpkg.com/:package@:version/:file).

4. Reduces Build Complexity

No need for npm install or package-lock files for browser-only apps.
Avoids dependency resolution issues in bundlers.

5. Optimized for Browser Environments

CDNs serve optimized ESM modules with minimal transformations.
Avoids CommonJS-to-ESM interop issues.

6. Flexible Module Resolution

Define custom mappings to override default module resolutions.
Allows switching between different CDNs or self-hosted versions without code changes.

7. Ideal for Prototyping and Demos

Great for quick experiments without setting up a full build pipeline.
Reduces friction when sharing code samples.

A. Using an Import Map

You can use importmap to reference the SDK:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Measurement Embedded App Demo</title>
    <style>
      #measurement-embedded-app-container {
        position: fixed;
        top: 100px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 100px);
      }
    </style>
    <script type="importmap">
      {
        "imports": {
          "@nuralogix.ai/web-measurement-embedded-app": "https://unpkg.com/@nuralogix.ai/web-measurement-embedded-app"
        }
      }
    </script>
  </head>
  <body>
    <div id="measurement-embedded-app-container"></div>
    <script type="module">
      import MeasurementEmbeddedApp, {
        faceAttributeValue,
      } from '@nuralogix.ai/web-measurement-embedded-app';
      const measurementApp = new MeasurementEmbeddedApp();
      const container = document.getElementById('measurement-embedded-app-container');
      if (container) {
        const apiUrl = '/api';
        const studyId = await fetch(`${apiUrl}/studyId`);
        const studyIdResponse = await studyId.json();
        const token = await fetch(`${apiUrl}/token`);
        const tokenResponse = await token.json();
        if (studyIdResponse.status === '200' && tokenResponse.status === '200') {
          measurementApp.init({
            container,
            appPath: 'https://unpkg.com/@nuralogix.ai/web-measurement-embedded-app/dist',
            // language: 'fr',
            settings: {
              token: tokenResponse.token,
              refreshToken: tokenResponse.refreshToken,
              studyId: studyIdResponse.studyId,
            },
            profile: {
              age: 40,
              height: 180,
              weight: 60,
              sex: faceAttributeValue.SEX_ASSIGNED_MALE_AT_BIRTH,
              smoking: faceAttributeValue.SMOKER_FALSE,
              bloodPressureMedication: faceAttributeValue.BLOOD_PRESSURE_MEDICATION_FALSE,
              diabetes: faceAttributeValue.DIABETES_NONE,
              bypassProfile: true,
            },
            // apiUrl: 'api.deepaffex.ai',
            loadError: function (error) {
              console.error('load error', error);
            },
          });
          measurementApp.on.results = (results) => {
            console.log('Results received', results);
            measurementApp.destroy();
          };
          measurementApp.on.error = (error) => {
            console.log('error received', error);
          };
          measurementApp.on.event = (appEvent) => {
            console.log('App event received', appEvent);
          };
        } else {
          console.error('Failed to get Study ID and Token pair');
        }
      }
    </script>
  </body>
</html>

B. Using Direct ES Module Import

Alternatively, you can import the module directly from a CDN without using import maps:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Measurement Embedded App Demo</title>
    <style>
      #measurement-embedded-app-container {
        position: fixed;
        top: 100px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 100px);
      }
    </style>
  </head>
  <body>
    <div id="measurement-embedded-app-container"></div>
    <script type="module">
      import MeasurementEmbeddedApp, {
        faceAttributeValue,
      } from 'https://unpkg.com/@nuralogix.ai/web-measurement-embedded-app/lib/index.mjs';
      const measurementApp = new MeasurementEmbeddedApp();
      const container = document.getElementById('measurement-embedded-app-container');
      if (container) {
        const apiUrl = '/api';
        const studyId = await fetch(`${apiUrl}/studyId`);
        const studyIdResponse = await studyId.json();
        const token = await fetch(`${apiUrl}/token`);
        const tokenResponse = await token.json();
        if (studyIdResponse.status === '200' && tokenResponse.status === '200') {
          measurementApp.init({
            container,
            appPath: 'https://unpkg.com/@nuralogix.ai/web-measurement-embedded-app/dist',
            // language: 'fr',
            settings: {
              token: tokenResponse.token,
              refreshToken: tokenResponse.refreshToken,
              studyId: studyIdResponse.studyId,
            },
            profile: {
              age: 40,
              height: 180,
              weight: 60,
              sex: faceAttributeValue.SEX_ASSIGNED_MALE_AT_BIRTH,
              smoking: faceAttributeValue.SMOKER_FALSE,
              bloodPressureMedication: faceAttributeValue.BLOOD_PRESSURE_MEDICATION_FALSE,
              diabetes: faceAttributeValue.DIABETES_NONE,
              bypassProfile: true,
            },
            // apiUrl: 'api.deepaffex.ai',
            loadError: function (error) {
              console.error('load error', error);
            },
          });
          measurementApp.on.results = (results) => {
            console.log('Results received', results);
            measurementApp.destroy();
          };
          measurementApp.on.error = (error) => {
            console.log('error received', error);
          };
          measurementApp.on.event = (appEvent) => {
            console.log('App event received', appEvent);
          };
        } else {
          console.error('Failed to get Study ID and Token pair');
        }
      }
    </script>
  </body>
</html>