@aws-amplify/ui-react-liveness 3.0.15 → 3.0.17

package/dist/esm/components/FaceLivenessDetector/FaceLivenessDetectorCore.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useInterpret } from '@xstate/react';
-import { livenessMachine } from './service/machine/index.mjs';
+import { livenessMachine } from './service/machine/machine.mjs';
 import './service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
 import '@tensorflow-models/face-detection';

package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.mjs

@@ -2,7 +2,7 @@ import React__default, { useRef, useState } from 'react';
 import { classNames } from '@aws-amplify/ui';
 import { Loader, View, Flex, Text, Label, SelectField, Button } from '@aws-amplify/ui-react';
 import { useColorMode } from '@aws-amplify/ui-react/internal';
-import '../service/machine/index.mjs';
+import '../service/machine/machine.mjs';
 import { FaceMatchState } from '../service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
 import '@tensorflow-models/face-detection';

package/dist/esm/components/FaceLivenessDetector/LivenessCheck/LivenessCheck.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Flex, Text, Button, View } from '@aws-amplify/ui-react';
-import '../service/machine/index.mjs';
+import '../service/machine/machine.mjs';
 import '../service/types/liveness.mjs';
 import { LivenessErrorState } from '../service/types/error.mjs';
 import '@tensorflow/tfjs-core';

package/dist/esm/components/FaceLivenessDetector/displayText.mjs

@@ -1,5 +1,7 @@
 const defaultErrorDisplayText = {
     errorLabelText: 'Error',
+    connectionTimeoutHeaderText: 'Connection time out',
+    connectionTimeoutMessageText: 'Connection has timed out.',
     timeoutHeaderText: 'Time out',
     timeoutMessageText: "Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",
     faceDistanceHeaderText: 'Forward movement detected',

package/dist/esm/components/FaceLivenessDetector/service/machine/{index.mjs → machine.mjs}

@@ -1,18 +1,18 @@
 import { nanoid } from 'nanoid';
 import { createMachine, assign, spawn, actions } from 'xstate';
-import { drawStaticOval, getBoundingBox, getColorsSequencesFromSessionInformation, isCameraDeviceVirtual, getFaceMatchState, isFaceDistanceBelowThreshold, estimateIllumination, getOvalDetailsFromSessionInformation, generateBboxFromLandmarks, drawLivenessOvalInCanvas, getOvalBoundingBox, getIntersectionOverUnion, getFaceMatchStateInLivenessOval, getStaticLivenessOvalDetails } from '../utils/liveness.mjs';
+import { drawStaticOval, getBoundingBox, getColorsSequencesFromSessionInformation, isCameraDeviceVirtual, getFaceMatchState, isFaceDistanceBelowThreshold, estimateIllumination, getOvalDetailsFromSessionInformation, generateBboxFromLandmarks, drawLivenessOvalInCanvas, getOvalBoundingBox, getIntersectionOverUnion, getStaticLivenessOvalDetails } from '../utils/liveness.mjs';
 import { FaceMatchState } from '../types/liveness.mjs';
 import { LivenessErrorState } from '../types/error.mjs';
 import { BlazeFaceFaceDetection } from '../utils/blazefaceFaceDetection.mjs';
+import { getFaceMatchStateInLivenessOval } from '../utils/getFaceMatchStateInLivenessOval.mjs';
 import { LivenessStreamProvider } from '../utils/streamProvider.mjs';
 import { FreshnessColorDisplay } from '../utils/freshnessColorDisplay.mjs';
-import { isServerSesssionInformationEvent, isDisconnectionEvent, isValidationExceptionEvent, isInternalServerExceptionEvent, isThrottlingExceptionEvent, isServiceQuotaExceededExceptionEvent, isInvalidSignatureRegionException } from '../utils/eventUtils.mjs';
+import { isServerSesssionInformationEvent, isDisconnectionEvent, isValidationExceptionEvent, isInternalServerExceptionEvent, isThrottlingExceptionEvent, isServiceQuotaExceededExceptionEvent, isInvalidSignatureRegionException, isConnectionTimeoutError } from '../utils/eventUtils.mjs';
 import { STATIC_VIDEO_CONSTRAINTS } from '../../utils/helpers.mjs';
 import { WS_CLOSURE_CODE } from '../utils/constants.mjs';
 
 const CAMERA_ID_KEY = 'AmplifyLivenessCameraId';
 const DEFAULT_FACE_FIT_TIMEOUT = 7000;
-const MIN_FACE_MATCH_TIME = 1000;
 let responseStream;
 const responseStreamActor = async (callback) => {
     try {
@@ -56,14 +56,20 @@ const responseStreamActor = async (callback) => {
         }
     }
     catch (error) {
-        let returnedError = error;
         if (isInvalidSignatureRegionException(error)) {
-            returnedError = new Error('Invalid region in FaceLivenessDetector or credentials are scoped to the wrong region.');
-        }
-        if (returnedError instanceof Error) {
             callback({
                 type: 'SERVER_ERROR',
-                data: { error: returnedError },
+                data: {
+                    error: new Error('Invalid region in FaceLivenessDetector or credentials are scoped to the wrong region.'),
+                },
+            });
+        }
+        else if (error instanceof Error) {
+            callback({
+                type: isConnectionTimeoutError(error)
+                    ? 'CONNECTION_TIMEOUT'
+                    : 'SERVER_ERROR',
+                data: { error },
             });
         }
     }
@@ -102,7 +108,6 @@ const livenessMachine = createMachine({
             currentDetectedFace: undefined,
             startFace: undefined,
             endFace: undefined,
-            initialFaceMatchTime: undefined,
         },
         freshnessColorAssociatedParams: {
             freshnessColorEl: undefined,
@@ -142,6 +147,10 @@ const livenessMachine = createMachine({
             target: 'error',
             actions: 'updateErrorStateForServer',
         },
+        CONNECTION_TIMEOUT: {
+            target: 'error',
+            actions: 'updateErrorStateForConnectionTimeout',
+        },
         RUNTIME_ERROR: {
             target: 'error',
         },
@@ -287,6 +296,8 @@ const livenessMachine = createMachine({
                         100: { target: 'checkRecordingStarted' },
                     },
                 },
+                // Evaluates face match and moves to checkMatch
+                // which continually checks for match until either timeout or face match
                 ovalMatching: {
                     entry: 'cancelOvalDrawingTimeout',
                     invoke: {
@@ -297,29 +308,32 @@ const livenessMachine = createMachine({
                         },
                     },
                 },
+                // If `hasFaceMatchedInOval` is true, then move to `delayBeforeFlash`, which pauses
+                // for one second to show "Hold still" text before moving to `flashFreshnessColors`.
+                // If not, move back to ovalMatching and re-evaluate match state
                 checkMatch: {
                     after: {
                         0: {
-                            target: 'flashFreshnessColors',
-                            cond: 'hasFaceMatchedInOvalWithMinTime',
+                            target: 'delayBeforeFlash',
+                            cond: 'hasFaceMatchedInOval',
                             actions: [
+                                'setFaceMatchTimeAndStartFace',
                                 'updateEndFaceMatch',
                                 'setupFlashFreshnessColors',
                                 'cancelOvalMatchTimeout',
                                 'cancelOvalDrawingTimeout',
                             ],
                         },
-                        0.1: {
-                            target: 'ovalMatching',
-                            cond: 'hasFaceMatchedInOval',
-                            actions: 'setFaceMatchTimeAndStartFace',
-                        },
                         1: {
                             target: 'ovalMatching',
-                            cond: 'hasNotFaceMatchedInOval',
                         },
                     },
                 },
+                delayBeforeFlash: {
+                    after: {
+                        1000: 'flashFreshnessColors',
+                    },
+                },
                 flashFreshnessColors: {
                     invoke: {
                         src: 'flashColors',
@@ -584,14 +598,13 @@ const livenessMachine = createMachine({
                     startFace: context.faceMatchAssociatedParams.startFace === undefined
                         ? context.faceMatchAssociatedParams.currentDetectedFace
                         : context.faceMatchAssociatedParams.startFace,
-                    initialFaceMatchTime: context.faceMatchAssociatedParams.initialFaceMatchTime ===
-                        undefined
-                        ? Date.now()
-                        : context.faceMatchAssociatedParams.initialFaceMatchTime,
                 };
             },
         }),
         resetErrorState: assign({ errorState: (_) => undefined }),
+        updateErrorStateForConnectionTimeout: assign({
+            errorState: (_) => LivenessErrorState.CONNECTION_TIMEOUT,
+        }),
         updateErrorStateForTimeout: assign({
             errorState: (_, event) => event.data?.errorState || LivenessErrorState.TIMEOUT,
         }),
@@ -759,21 +772,10 @@ const livenessMachine = createMachine({
     },
     guards: {
         shouldTimeoutOnFailedAttempts: (context) => context.failedAttempts >= context.maxFailedAttempts,
-        hasFaceMatchedInOvalWithMinTime: (context) => {
-            const { faceMatchState, initialFaceMatchTime } = context.faceMatchAssociatedParams;
-            const timeSinceInitialFaceMatch = Date.now() - initialFaceMatchTime;
-            const hasMatched = faceMatchState === FaceMatchState.MATCHED &&
-                timeSinceInitialFaceMatch >= MIN_FACE_MATCH_TIME;
-            return hasMatched;
-        },
         hasFaceMatchedInOval: (context) => {
             return (context.faceMatchAssociatedParams.faceMatchState ===
                 FaceMatchState.MATCHED);
         },
-        hasNotFaceMatchedInOval: (context) => {
-            return (context.faceMatchAssociatedParams.faceMatchState !==
-                FaceMatchState.MATCHED);
-        },
         hasSingleFace: (context) => {
             return (context.faceMatchAssociatedParams.faceMatchState ===
                 FaceMatchState.FACE_IDENTIFIED);
@@ -990,7 +992,7 @@ const livenessMachine = createMachine({
                 videoWidth: videoEl.width,
             });
             // renormalize initial face
-            const renormalizedFace = generateBboxFromLandmarks(initialFace, ovalDetails);
+            const renormalizedFace = generateBboxFromLandmarks(initialFace, ovalDetails, videoEl.videoHeight);
             initialFace.top = renormalizedFace.top;
             initialFace.left = renormalizedFace.left;
             initialFace.height = renormalizedFace.bottom - renormalizedFace.top;
@@ -1019,7 +1021,7 @@ const livenessMachine = createMachine({
             let faceMatchPercentage = 0;
             let detectedFace;
             let illuminationState;
-            const initialFaceBoundingBox = generateBboxFromLandmarks(initialFace, ovalDetails);
+            const initialFaceBoundingBox = generateBboxFromLandmarks(initialFace, ovalDetails, videoEl.videoHeight);
             const { ovalBoundingBox } = getOvalBoundingBox(ovalDetails);
             const initialFaceIntersection = getIntersectionOverUnion(initialFaceBoundingBox, ovalBoundingBox);
             switch (detectedFaces.length) {
@@ -1032,7 +1034,13 @@ const livenessMachine = createMachine({
                 case 1: {
                     //exactly one face detected, match face with oval;
                     detectedFace = detectedFaces[0];
-                    const { faceMatchState: faceMatchStateInLivenessOval, faceMatchPercentage: faceMatchPercentageInLivenessOval, } = getFaceMatchStateInLivenessOval(detectedFace, ovalDetails, initialFaceIntersection, serverSessionInformation);
+                    const { faceMatchState: faceMatchStateInLivenessOval, faceMatchPercentage: faceMatchPercentageInLivenessOval, } = getFaceMatchStateInLivenessOval({
+                        face: detectedFace,
+                        ovalDetails: ovalDetails,
+                        initialFaceIntersection,
+                        sessionInformation: serverSessionInformation,
+                        frameHeight: videoEl.videoHeight,
+                    });
                     faceMatchState = faceMatchStateInLivenessOval;
                     faceMatchPercentage = faceMatchPercentageInLivenessOval;
                     break;

package/dist/esm/components/FaceLivenessDetector/service/types/error.mjs

@@ -2,6 +2,7 @@
  * The liveness error states
  */
 const LivenessErrorState = {
+    CONNECTION_TIMEOUT: 'CONNECTION_TIMEOUT',
     TIMEOUT: 'TIMEOUT',
     RUNTIME_ERROR: 'RUNTIME_ERROR',
     FRESHNESS_TIMEOUT: 'FRESHNESS_TIMEOUT',

package/dist/esm/components/FaceLivenessDetector/service/types/liveness.mjs

@@ -14,7 +14,6 @@ var FaceMatchState;
 (function (FaceMatchState) {
     FaceMatchState["MATCHED"] = "MATCHED";
     FaceMatchState["TOO_FAR"] = "TOO FAR";
-    FaceMatchState["TOO_CLOSE"] = "TOO CLOSE";
     FaceMatchState["CANT_IDENTIFY"] = "CANNOT IDENTIFY";
     FaceMatchState["FACE_IDENTIFIED"] = "ONE FACE IDENTIFIED";
     FaceMatchState["TOO_MANY"] = "TOO MANY FACES";

package/dist/esm/components/FaceLivenessDetector/service/utils/constants.mjs

@@ -1,11 +1,19 @@
 // Face distance is calculated as pupilDistance / ovalWidth.
 // The further away you are from the camera the distance between your pupils will decrease, thus lowering the threshold values.
-// These FACE_DISTNACE_THRESHOLD values are determined by the science team and should only be changed with their approval.
+// These FACE_DISTANCE_THRESHOLD values are determined by the science team and should only be changed with their approval.
 // We want to ensure at the start of a  check that the user's pupilDistance/ovalWidth is below FACE_DISTANCE_THRESHOLD to ensure that they are starting
 //  a certain distance away from the camera.
 const FACE_DISTANCE_THRESHOLD = 0.32;
 const REDUCED_THRESHOLD = 0.4;
 const REDUCED_THRESHOLD_MOBILE = 0.37;
+// Constants from science team to determine ocular distance (space between eyes)
+const PUPIL_DISTANCE_WEIGHT = 2.0;
+const FACE_HEIGHT_WEIGHT = 1.8;
+// Constants from science team to find face match percentage
+const FACE_MATCH_RANGE_MIN = 0;
+const FACE_MATCH_RANGE_MAX = 1;
+const FACE_MATCH_WEIGHT_MIN = 0.25;
+const FACE_MATCH_WEIGHT_MAX = 0.75;
 const WS_CLOSURE_CODE = {
     SUCCESS_CODE: 1000,
     DEFAULT_ERROR_CODE: 4000,
@@ -15,4 +23,4 @@ const WS_CLOSURE_CODE = {
     USER_ERROR_DURING_CONNECTION: 4007,
 };
 
-export { FACE_DISTANCE_THRESHOLD, REDUCED_THRESHOLD, REDUCED_THRESHOLD_MOBILE, WS_CLOSURE_CODE };
+export { FACE_DISTANCE_THRESHOLD, FACE_HEIGHT_WEIGHT, FACE_MATCH_RANGE_MAX, FACE_MATCH_RANGE_MIN, FACE_MATCH_WEIGHT_MAX, FACE_MATCH_WEIGHT_MIN, PUPIL_DISTANCE_WEIGHT, REDUCED_THRESHOLD, REDUCED_THRESHOLD_MOBILE, WS_CLOSURE_CODE };

package/dist/esm/components/FaceLivenessDetector/service/utils/createStreamingClient/CustomWebSocketFetchHandler.mjs

@@ -9,6 +9,7 @@ import { WS_CLOSURE_CODE } from '../constants.mjs';
  * Because of this the file is not fully typed at this time but we should eventually work on fully typing this file.
  */
 const DEFAULT_WS_CONNECTION_TIMEOUT_MS = 2000;
+const WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE = 'Websocket connection timeout';
 const isWebSocketRequest = (request) => request.protocol === 'ws:' || request.protocol === 'wss:';
 const isReadableStream = (payload) => typeof ReadableStream === 'function' && payload instanceof ReadableStream;
 /**
@@ -108,11 +109,7 @@ class CustomWebSocketFetchHandler {
         return new Promise((resolve, reject) => {
             const timeout = setTimeout(() => {
                 this.removeNotUsableSockets(socket.url);
-                reject({
-                    $metadata: {
-                        httpStatusCode: 500,
-                    },
-                });
+                reject(new Error(WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE));
             }, connectionTimeout);
             socket.onopen = () => {
                 clearTimeout(timeout);
@@ -196,4 +193,4 @@ class CustomWebSocketFetchHandler {
     }
 }
 
-export { CustomWebSocketFetchHandler };
+export { CustomWebSocketFetchHandler, WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE };

package/dist/esm/components/FaceLivenessDetector/service/utils/eventUtils.mjs

@@ -1,7 +1,13 @@
+import { WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE } from './createStreamingClient/CustomWebSocketFetchHandler.mjs';
+
 const isServerSesssionInformationEvent = (value) => {
     return !!value
         ?.ServerSessionInformationEvent;
 };
+const isConnectionTimeoutError = (error) => {
+    const { message } = error;
+    return message.includes(WEBSOCKET_CONNECTION_TIMEOUT_MESSAGE);
+};
 const isDisconnectionEvent = (value) => {
     return !!value
         ?.DisconnectionEvent;
@@ -27,4 +33,4 @@ const isInvalidSignatureRegionException = (error) => {
     return (name === 'InvalidSignatureException' && message.includes('valid region'));
 };
 
-export { isDisconnectionEvent, isInternalServerExceptionEvent, isInvalidSignatureRegionException, isServerSesssionInformationEvent, isServiceQuotaExceededExceptionEvent, isThrottlingExceptionEvent, isValidationExceptionEvent };
+export { isConnectionTimeoutError, isDisconnectionEvent, isInternalServerExceptionEvent, isInvalidSignatureRegionException, isServerSesssionInformationEvent, isServiceQuotaExceededExceptionEvent, isThrottlingExceptionEvent, isValidationExceptionEvent };

package/dist/esm/components/FaceLivenessDetector/service/utils/getFaceMatchStateInLivenessOval.mjs

@@ -0,0 +1,59 @@
+import { FaceMatchState } from '../types/liveness.mjs';
+import { generateBboxFromLandmarks, getOvalBoundingBox, getIntersectionOverUnion } from './liveness.mjs';
+import { FACE_MATCH_RANGE_MAX, FACE_MATCH_WEIGHT_MAX, FACE_MATCH_WEIGHT_MIN, FACE_MATCH_RANGE_MIN } from './constants.mjs';
+
+/**
+ * Returns the state of the provided face with respect to the provided liveness oval.
+ */
+function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceIntersection, sessionInformation, frameHeight, }) {
+    let faceMatchState;
+    const challengeConfig = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
+        ?.ChallengeConfig;
+    if (!challengeConfig ||
+        !challengeConfig.OvalIouThreshold ||
+        !challengeConfig.OvalIouHeightThreshold ||
+        !challengeConfig.OvalIouWidthThreshold ||
+        !challengeConfig.FaceIouHeightThreshold ||
+        !challengeConfig.FaceIouWidthThreshold) {
+        throw new Error('Challenge information not returned from session information.');
+    }
+    const { OvalIouThreshold, FaceIouHeightThreshold, FaceIouWidthThreshold } = challengeConfig;
+    const faceBoundingBox = generateBboxFromLandmarks(face, ovalDetails, frameHeight);
+    const minFaceX = faceBoundingBox.left;
+    const maxFaceX = faceBoundingBox.right;
+    const minFaceY = faceBoundingBox.top;
+    const maxFaceY = faceBoundingBox.bottom;
+    const { ovalBoundingBox, minOvalX, minOvalY, maxOvalX, maxOvalY } = getOvalBoundingBox(ovalDetails);
+    const intersection = getIntersectionOverUnion(faceBoundingBox, ovalBoundingBox);
+    const intersectionThreshold = OvalIouThreshold;
+    const faceDetectionWidthThreshold = ovalDetails.width * FaceIouWidthThreshold;
+    const faceDetectionHeightThreshold = ovalDetails.height * FaceIouHeightThreshold;
+    /** From Science
+     * p=max(min(1,0.75∗(si−s0)/(st−s0)+0.25)),0)
+     */
+    const faceMatchPercentage = Math.max(Math.min(FACE_MATCH_RANGE_MAX, (FACE_MATCH_WEIGHT_MAX * (intersection - initialFaceIntersection)) /
+        (intersectionThreshold - initialFaceIntersection) +
+        FACE_MATCH_WEIGHT_MIN), FACE_MATCH_RANGE_MIN) * 100;
+    const isFaceOutsideOvalToTheLeft = minOvalX > minFaceX && maxOvalX > maxFaceX;
+    const isFaceOutsideOvalToTheRight = minFaceX > minOvalX && maxFaceX > maxOvalX;
+    const isFaceMatched = intersection > intersectionThreshold;
+    const isFaceMatchedClosely = minOvalY - minFaceY > faceDetectionHeightThreshold ||
+        maxFaceY - maxOvalY > faceDetectionHeightThreshold ||
+        (minOvalX - minFaceX > faceDetectionWidthThreshold &&
+            maxFaceX - maxOvalX > faceDetectionWidthThreshold);
+    if (isFaceMatched) {
+        faceMatchState = FaceMatchState.MATCHED;
+    }
+    else if (isFaceOutsideOvalToTheLeft || isFaceOutsideOvalToTheRight) {
+        faceMatchState = FaceMatchState.OFF_CENTER;
+    }
+    else if (isFaceMatchedClosely) {
+        faceMatchState = FaceMatchState.MATCHED;
+    }
+    else {
+        faceMatchState = FaceMatchState.TOO_FAR;
+    }
+    return { faceMatchState, faceMatchPercentage };
+}
+
+export { getFaceMatchStateInLivenessOval };

package/dist/esm/components/FaceLivenessDetector/service/utils/liveness.mjs

@@ -1,6 +1,6 @@
-import { FaceMatchState, IlluminationState } from '../types/liveness.mjs';
+import { IlluminationState, FaceMatchState } from '../types/liveness.mjs';
 import { LivenessErrorState } from '../types/error.mjs';
-import { FACE_DISTANCE_THRESHOLD, REDUCED_THRESHOLD_MOBILE, REDUCED_THRESHOLD } from './constants.mjs';
+import { PUPIL_DISTANCE_WEIGHT, FACE_HEIGHT_WEIGHT, FACE_DISTANCE_THRESHOLD, REDUCED_THRESHOLD_MOBILE, REDUCED_THRESHOLD } from './constants.mjs';
 
 /**
  * Returns the random number between min and max
@@ -180,87 +180,33 @@ function getPupilDistanceAndFaceHeight(face) {
     const faceHeight = Math.sqrt((eyeCenter[0] - mouth[0]) ** 2 + (eyeCenter[1] - mouth[1]) ** 2);
     return { pupilDistance, faceHeight };
 }
-function generateBboxFromLandmarks(face, oval) {
-    const { leftEye, rightEye, nose, leftEar, rightEar, top: faceTop, height: faceHeight, } = face;
+function generateBboxFromLandmarks(face, oval, frameHeight) {
+    const { leftEye, rightEye, nose, leftEar, rightEar } = face;
     const { height: ovalHeight, centerY } = oval;
     const ovalTop = centerY - ovalHeight / 2;
     const eyeCenter = [];
     eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
     eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
     const { pupilDistance: pd, faceHeight: fh } = getPupilDistanceAndFaceHeight(face);
-    const alpha = 2.0, gamma = 1.8;
-    const ow = (alpha * pd + gamma * fh) / 2;
-    const oh = 1.618 * ow;
-    let cx;
+    const ocularWidth = (PUPIL_DISTANCE_WEIGHT * pd + FACE_HEIGHT_WEIGHT * fh) / 2;
+    let centerFaceX, centerFaceY;
     if (eyeCenter[1] <= (ovalTop + ovalHeight) / 2) {
-        cx = (eyeCenter[0] + nose[0]) / 2;
+        centerFaceX = (eyeCenter[0] + nose[0]) / 2;
+        centerFaceY = (eyeCenter[1] + nose[1]) / 2;
     }
     else {
-        cx = eyeCenter[0];
+        // when face tilts down
+        centerFaceX = eyeCenter[0];
+        centerFaceY = eyeCenter[1];
     }
-    const bottom = faceTop + faceHeight;
-    const top = bottom - oh;
-    const left = Math.min(cx - ow / 2, rightEar[0]);
-    const right = Math.max(cx + ow / 2, leftEar[0]);
+    const faceWidth = ocularWidth;
+    const faceHeight = 1.68 * faceWidth;
+    const top = Math.max(centerFaceY - faceHeight / 2, 0);
+    const bottom = Math.min(centerFaceY + faceHeight / 2, frameHeight);
+    const left = Math.min(centerFaceX - ocularWidth / 2, rightEar[0]);
+    const right = Math.max(centerFaceX + ocularWidth / 2, leftEar[0]);
     return { bottom, left, right, top };
 }
-/**
- * Returns the state of the provided face with respect to the provided liveness oval.
- */
-// eslint-disable-next-line max-params
-function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersection, sessionInformation) {
-    let faceMatchState;
-    const challengeConfig = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
-        ?.ChallengeConfig;
-    if (!challengeConfig ||
-        !challengeConfig.OvalIouThreshold ||
-        !challengeConfig.OvalIouHeightThreshold ||
-        !challengeConfig.OvalIouWidthThreshold ||
-        !challengeConfig.FaceIouHeightThreshold ||
-        !challengeConfig.FaceIouWidthThreshold) {
-        throw new Error('Challenge information not returned from session information.');
-    }
-    const { OvalIouThreshold, OvalIouHeightThreshold, OvalIouWidthThreshold, FaceIouHeightThreshold, FaceIouWidthThreshold, } = challengeConfig;
-    const faceBoundingBox = generateBboxFromLandmarks(face, ovalDetails);
-    const minFaceX = faceBoundingBox.left;
-    const maxFaceX = faceBoundingBox.right;
-    const minFaceY = faceBoundingBox.top;
-    const maxFaceY = faceBoundingBox.bottom;
-    const { ovalBoundingBox, minOvalX, minOvalY, maxOvalX, maxOvalY } = getOvalBoundingBox(ovalDetails);
-    const intersection = getIntersectionOverUnion(faceBoundingBox, ovalBoundingBox);
-    const intersectionThreshold = OvalIouThreshold;
-    const ovalMatchWidthThreshold = ovalDetails.width * OvalIouWidthThreshold;
-    const ovalMatchHeightThreshold = ovalDetails.height * OvalIouHeightThreshold;
-    const faceDetectionWidthThreshold = ovalDetails.width * FaceIouWidthThreshold;
-    const faceDetectionHeightThreshold = ovalDetails.height * FaceIouHeightThreshold;
-    /** From Science
-     * p=max(min(1,0.75∗(si−s0)/(st−s0)+0.25)),0)
-     */
-    const faceMatchPercentage = Math.max(Math.min(1, (0.75 * (intersection - initialFaceIntersection)) /
-        (intersectionThreshold - initialFaceIntersection) +
-        0.25), 0) * 100;
-    const faceIsOutsideOvalToTheLeft = minOvalX > minFaceX && maxOvalX > maxFaceX;
-    const faceIsOutsideOvalToTheRight = minFaceX > minOvalX && maxFaceX > maxOvalX;
-    if (intersection > intersectionThreshold &&
-        Math.abs(minOvalX - minFaceX) < ovalMatchWidthThreshold &&
-        Math.abs(maxOvalX - maxFaceX) < ovalMatchWidthThreshold &&
-        Math.abs(maxOvalY - maxFaceY) < ovalMatchHeightThreshold) {
-        faceMatchState = FaceMatchState.MATCHED;
-    }
-    else if (faceIsOutsideOvalToTheLeft || faceIsOutsideOvalToTheRight) {
-        faceMatchState = FaceMatchState.OFF_CENTER;
-    }
-    else if (minOvalY - minFaceY > faceDetectionHeightThreshold ||
-        maxFaceY - maxOvalY > faceDetectionHeightThreshold ||
-        (minOvalX - minFaceX > faceDetectionWidthThreshold &&
-            maxFaceX - maxOvalX > faceDetectionWidthThreshold)) {
-        faceMatchState = FaceMatchState.TOO_CLOSE;
-    }
-    else {
-        faceMatchState = FaceMatchState.TOO_FAR;
-    }
-    return { faceMatchState, faceMatchPercentage };
-}
 /**
  * Returns the illumination state in the provided video frame.
  */
@@ -436,8 +382,10 @@ async function isFaceDistanceBelowThreshold({ faceDetector, videoEl, ovalDetails
             detectedFace = detectedFaces[0];
             const { width } = ovalDetails;
             const { pupilDistance, faceHeight } = getPupilDistanceAndFaceHeight(detectedFace);
-            const alpha = 2.0, gamma = 1.8;
-            const calibratedPupilDistance = (alpha * pupilDistance + gamma * faceHeight) / 2 / alpha;
+            const calibratedPupilDistance = (PUPIL_DISTANCE_WEIGHT * pupilDistance +
+                FACE_HEIGHT_WEIGHT * faceHeight) /
+                2 /
+                PUPIL_DISTANCE_WEIGHT;
             if (width) {
                 isDistanceBelowThreshold =
                     calibratedPupilDistance / width <
@@ -469,4 +417,4 @@ function getBoundingBox({ deviceHeight, deviceWidth, height, width, top, left, }
     };
 }
 
-export { clearOvalCanvas, drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getBoundingBox, getColorsSequencesFromSessionInformation, getFaceMatchState, getFaceMatchStateInLivenessOval, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getRGBArrayFromColorString, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isClientFreshnessColorSequence, isFaceDistanceBelowThreshold };
+export { clearOvalCanvas, drawLivenessOvalInCanvas, drawStaticOval, estimateIllumination, fillOverlayCanvasFractional, generateBboxFromLandmarks, getBoundingBox, getColorsSequencesFromSessionInformation, getFaceMatchState, getIntersectionOverUnion, getOvalBoundingBox, getOvalDetailsFromSessionInformation, getRGBArrayFromColorString, getStaticLivenessOvalDetails, isCameraDeviceVirtual, isClientFreshnessColorSequence, isFaceDistanceBelowThreshold };

package/dist/esm/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.mjs

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { ComponentClassName } from '@aws-amplify/ui';
 import { View, Flex } from '@aws-amplify/ui-react';
 import { CancelButton } from './CancelButton.mjs';
-import '../service/machine/index.mjs';
+import '../service/machine/machine.mjs';
 import '../service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
 import '@tensorflow-models/face-detection';

package/dist/esm/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.mjs

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { Flex, Text, Button } from '@aws-amplify/ui-react';
 import { AlertIcon } from '@aws-amplify/ui-react/internal';
-import '../service/machine/index.mjs';
+import '../service/machine/machine.mjs';
 import '../service/types/liveness.mjs';
 import { LivenessErrorState } from '../service/types/error.mjs';
 import '@tensorflow/tfjs-core';
@@ -19,10 +19,14 @@ import { LivenessClassNames } from '../types/classNames.mjs';
 
 const renderToastErrorModal = (props) => {
     const { error: errorState, displayText } = props;
-    const { errorLabelText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, } = displayText;
+    const { connectionTimeoutHeaderText, connectionTimeoutMessageText, errorLabelText, timeoutHeaderText, timeoutMessageText, faceDistanceHeaderText, faceDistanceMessageText, multipleFacesHeaderText, multipleFacesMessageText, clientHeaderText, clientMessageText, serverHeaderText, serverMessageText, } = displayText;
     let heading;
     let message;
     switch (errorState) {
+        case LivenessErrorState.CONNECTION_TIMEOUT:
+            heading = connectionTimeoutHeaderText;
+            message = connectionTimeoutMessageText;
+            break;
         case LivenessErrorState.TIMEOUT:
             heading = timeoutHeaderText;
             message = timeoutMessageText;

package/dist/esm/components/FaceLivenessDetector/shared/Hint.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { VisuallyHidden, View } from '@aws-amplify/ui-react';
-import '../service/machine/index.mjs';
+import '../service/machine/machine.mjs';
 import { FaceMatchState, IlluminationState } from '../service/types/liveness.mjs';
 import '@tensorflow/tfjs-core';
 import '@tensorflow-models/face-detection';
@@ -52,7 +52,6 @@ const Hint = ({ hintDisplayText }) => {
         [FaceMatchState.CANT_IDENTIFY]: hintDisplayText.hintCanNotIdentifyText,
         [FaceMatchState.FACE_IDENTIFIED]: hintDisplayText.hintTooFarText,
         [FaceMatchState.TOO_MANY]: hintDisplayText.hintTooManyFacesText,
-        [FaceMatchState.TOO_CLOSE]: hintDisplayText.hintTooCloseText,
         [FaceMatchState.TOO_FAR]: hintDisplayText.hintTooFarText,
         [FaceMatchState.MATCHED]: hintDisplayText.hintHoldFaceForFreshnessText,
         [FaceMatchState.OFF_CENTER]: hintDisplayText.hintFaceOffCenterText,
@@ -98,13 +97,11 @@ const Hint = ({ hintDisplayText }) => {
         return React.createElement(DefaultToast, { text: hintDisplayText.hintHoldFaceForFreshnessText });
     }
     if (isRecording && !isFlashingFreshness) {
-        // During face matching, we want to only show the TOO_CLOSE or
-        // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
-        // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
+        // During face matching, we want to only show the
+        // TOO_FAR texts. For FACE_IDENTIFIED, CANT_IDENTIFY, TOO_MANY
         // we are defaulting to the TOO_FAR text (for now).
         let resultHintString = FaceMatchStateStringMap[FaceMatchState.TOO_FAR];
-        if (faceMatchState === FaceMatchState.TOO_CLOSE ||
-            faceMatchState === FaceMatchState.MATCHED) {
+        if (faceMatchState === FaceMatchState.MATCHED) {
             resultHintString = FaceMatchStateStringMap[faceMatchState];
         }
         // If the face is outside the oval set the aria-label to a string about centering face in oval
@@ -118,7 +115,7 @@ const Hint = ({ hintDisplayText }) => {
             faceMatchPercentage > 50) {
             a11yHintString = hintDisplayText.hintMatchIndicatorText;
         }
-        return (React.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' },
+        return (React.createElement(Toast, { size: "large", variation: 'primary' },
             React.createElement(VisuallyHidden, { "aria-live": "assertive" }, a11yHintString),
             React.createElement(View, { "aria-label": a11yHintString }, resultHintString)));
     }

package/dist/esm/components/FaceLivenessDetector/utils/getDisplayText.mjs

@@ -12,7 +12,7 @@ function getDisplayText(overrideDisplayText) {
         ...defaultLivenessDisplayText,
         ...overrideDisplayText,
     };
-    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, clientHeaderText, clientMessageText, errorLabelText, hintCanNotIdentifyText, hintCenterFaceText, hintCenterFaceInstructionText, hintFaceOffCenterText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, hintCheckCompleteText, hintMatchIndicatorText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
+    const { a11yVideoLabelText, cameraMinSpecificationsHeadingText, cameraMinSpecificationsMessageText, cameraNotFoundHeadingText, cameraNotFoundMessageText, cancelLivenessCheckText, connectionTimeoutHeaderText, connectionTimeoutMessageText, clientHeaderText, clientMessageText, errorLabelText, hintCanNotIdentifyText, hintCenterFaceText, hintCenterFaceInstructionText, hintFaceOffCenterText, hintConnectingText, hintFaceDetectedText, hintHoldFaceForFreshnessText, hintIlluminationNormalText, hintIlluminationTooBrightText, hintIlluminationTooDarkText, hintMoveFaceFrontOfCameraText, hintTooManyFacesText, hintTooCloseText, hintTooFarText, hintVerifyingText, hintCheckCompleteText, hintMatchIndicatorText, faceDistanceHeaderText, faceDistanceMessageText, goodFitCaptionText, goodFitAltText, landscapeHeaderText, landscapeMessageText, multipleFacesHeaderText, multipleFacesMessageText, photosensitivityWarningBodyText, photosensitivityWarningHeadingText, photosensitivityWarningInfoText, photosensitivityWarningLabelText, photosensitivyWarningBodyText, photosensitivyWarningHeadingText, photosensitivyWarningInfoText, photosensitivyWarningLabelText, portraitMessageText, retryCameraPermissionsText, recordingIndicatorText, serverHeaderText, serverMessageText, startScreenBeginCheckText, timeoutHeaderText, timeoutMessageText, tooFarCaptionText, tooFarAltText, tryAgainText, waitingCameraPermissionText, } = displayText;
     const hintDisplayText = {
         hintMoveFaceFrontOfCameraText,
         hintTooManyFacesText,
@@ -61,6 +61,8 @@ function getDisplayText(overrideDisplayText) {
         recordingIndicatorText,
     };
     const errorDisplayText = {
+        connectionTimeoutHeaderText,
+        connectionTimeoutMessageText,
         errorLabelText,
         timeoutHeaderText,
         timeoutMessageText,

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.0.15';
+const VERSION = '3.0.17';
 
 export { VERSION };