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

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/service/machine/{index.mjs → machine.mjs}

@@ -1,9 +1,10 @@
 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';
@@ -12,7 +13,6 @@ 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 {
@@ -102,7 +102,6 @@ const livenessMachine = createMachine({
             currentDetectedFace: undefined,
             startFace: undefined,
             endFace: undefined,
-            initialFaceMatchTime: undefined,
         },
         freshnessColorAssociatedParams: {
             freshnessColorEl: undefined,
@@ -287,6 +286,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 +298,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,10 +588,6 @@ const livenessMachine = createMachine({
                     startFace: context.faceMatchAssociatedParams.startFace === undefined
                         ? context.faceMatchAssociatedParams.currentDetectedFace
                         : context.faceMatchAssociatedParams.startFace,
-                    initialFaceMatchTime: context.faceMatchAssociatedParams.initialFaceMatchTime ===
-                        undefined
-                        ? Date.now()
-                        : context.faceMatchAssociatedParams.initialFaceMatchTime,
                 };
             },
         }),
@@ -759,21 +759,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 +979,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 +1008,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 +1021,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/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/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';

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/version.mjs

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

package/dist/index.js

@@ -75,7 +75,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";
@@ -99,12 +98,20 @@ const LivenessErrorState = {
 
 // 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,
@@ -292,87 +299,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];
-    }
-    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]);
+        // when face tilts down
+        centerFaceX = eyeCenter[0];
+        centerFaceY = eyeCenter[1];
+    }
+    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.
  */
@@ -548,8 +501,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 <
@@ -782,7 +737,61 @@ class VideoRecorder {
     }
 }
 
-const VERSION = '3.0.15';
+/**
+ * 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 };
+}
+
+const VERSION = '3.0.16';
 
 const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
 const getLivenessUserAgent = () => {
@@ -1340,7 +1349,6 @@ const STATIC_VIDEO_CONSTRAINTS = {
 
 const CAMERA_ID_KEY = 'AmplifyLivenessCameraId';
 const DEFAULT_FACE_FIT_TIMEOUT = 7000;
-const MIN_FACE_MATCH_TIME = 1000;
 let responseStream;
 const responseStreamActor = async (callback) => {
     try {
@@ -1430,7 +1438,6 @@ const livenessMachine = xstate.createMachine({
             currentDetectedFace: undefined,
             startFace: undefined,
             endFace: undefined,
-            initialFaceMatchTime: undefined,
         },
         freshnessColorAssociatedParams: {
             freshnessColorEl: undefined,
@@ -1615,6 +1622,8 @@ const livenessMachine = xstate.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: {
@@ -1625,29 +1634,32 @@ const livenessMachine = xstate.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',
@@ -1912,10 +1924,6 @@ const livenessMachine = xstate.createMachine({
                     startFace: context.faceMatchAssociatedParams.startFace === undefined
                         ? context.faceMatchAssociatedParams.currentDetectedFace
                         : context.faceMatchAssociatedParams.startFace,
-                    initialFaceMatchTime: context.faceMatchAssociatedParams.initialFaceMatchTime ===
-                        undefined
-                        ? Date.now()
-                        : context.faceMatchAssociatedParams.initialFaceMatchTime,
                 };
             },
         }),
@@ -2087,21 +2095,10 @@ const livenessMachine = xstate.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);
@@ -2318,7 +2315,7 @@ const livenessMachine = xstate.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;
@@ -2347,7 +2344,7 @@ const livenessMachine = xstate.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) {
@@ -2360,7 +2357,13 @@ const livenessMachine = xstate.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;
@@ -2615,7 +2618,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,
@@ -2661,13 +2663,11 @@ const Hint = ({ hintDisplayText }) => {
         return React__namespace.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
@@ -2681,7 +2681,7 @@ const Hint = ({ hintDisplayText }) => {
             faceMatchPercentage > 50) {
             a11yHintString = hintDisplayText.hintMatchIndicatorText;
         }
-        return (React__namespace.createElement(Toast, { size: "large", variation: faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary' },
+        return (React__namespace.createElement(Toast, { size: "large", variation: 'primary' },
             React__namespace.createElement(uiReact.VisuallyHidden, { "aria-live": "assertive" }, a11yHintString),
             React__namespace.createElement(uiReact.View, { "aria-label": a11yHintString }, resultHintString)));
     }

package/dist/types/components/FaceLivenessDetector/service/machine/index.d.ts

@@ -1,5 +1 @@
-import { LivenessContext, LivenessEvent } from '../types';
-export declare const livenessMachine: import("xstate").StateMachine<LivenessContext, any, LivenessEvent, {
-    value: any;
-    context: LivenessContext;
-}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, LivenessEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;
+export { livenessMachine } from './machine';

package/dist/types/components/FaceLivenessDetector/service/machine/machine.d.ts

@@ -0,0 +1,5 @@
+import { LivenessContext, LivenessEvent } from '../types';
+export declare const livenessMachine: import("xstate").StateMachine<LivenessContext, any, LivenessEvent, {
+    value: any;
+    context: LivenessContext;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, LivenessEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;

package/dist/types/components/FaceLivenessDetector/service/types/liveness.d.ts

@@ -98,7 +98,6 @@ export declare enum IlluminationState {
 export declare enum FaceMatchState {
     MATCHED = "MATCHED",
     TOO_FAR = "TOO FAR",
-    TOO_CLOSE = "TOO CLOSE",
     CANT_IDENTIFY = "CANNOT IDENTIFY",
     FACE_IDENTIFIED = "ONE FACE IDENTIFIED",
     TOO_MANY = "TOO MANY FACES",

package/dist/types/components/FaceLivenessDetector/service/types/machine.d.ts

@@ -11,7 +11,6 @@ export interface FaceMatchAssociatedParams {
     currentDetectedFace?: Face;
     startFace?: Face;
     endFace?: Face;
-    initialFaceMatchTime?: number;
 }
 export interface FreshnessColorAssociatedParams {
     freshnessColorEl?: HTMLCanvasElement;

package/dist/types/components/FaceLivenessDetector/service/utils/constants.d.ts

@@ -1,6 +1,12 @@
 export declare const FACE_DISTANCE_THRESHOLD = 0.32;
 export declare const REDUCED_THRESHOLD = 0.4;
 export declare const REDUCED_THRESHOLD_MOBILE = 0.37;
+export declare const PUPIL_DISTANCE_WEIGHT = 2;
+export declare const FACE_HEIGHT_WEIGHT = 1.8;
+export declare const FACE_MATCH_RANGE_MIN = 0;
+export declare const FACE_MATCH_RANGE_MAX = 1;
+export declare const FACE_MATCH_WEIGHT_MIN = 0.25;
+export declare const FACE_MATCH_WEIGHT_MAX = 0.75;
 export declare const WS_CLOSURE_CODE: {
     SUCCESS_CODE: number;
     DEFAULT_ERROR_CODE: number;

package/dist/types/components/FaceLivenessDetector/service/utils/getFaceMatchStateInLivenessOval.d.ts

@@ -0,0 +1,17 @@
+import { LivenessOvalDetails, Face, FaceMatchState } from '../types';
+import { SessionInformation } from '@aws-sdk/client-rekognitionstreaming';
+interface MatchStateInOvalParams {
+    face: Face;
+    ovalDetails: LivenessOvalDetails;
+    initialFaceIntersection: number;
+    sessionInformation: SessionInformation;
+    frameHeight: number;
+}
+/**
+ * Returns the state of the provided face with respect to the provided liveness oval.
+ */
+export declare function getFaceMatchStateInLivenessOval({ face, ovalDetails, initialFaceIntersection, sessionInformation, frameHeight, }: MatchStateInOvalParams): {
+    faceMatchState: FaceMatchState;
+    faceMatchPercentage: number;
+};
+export {};

package/dist/types/components/FaceLivenessDetector/service/utils/index.d.ts

@@ -2,5 +2,6 @@ export * from './blazefaceFaceDetection';
 export * from './videoRecorder';
 export * from './support';
 export * from './liveness';
+export * from './getFaceMatchStateInLivenessOval';
 export * from './streamProvider';
 export * from './freshnessColorDisplay';

package/dist/types/components/FaceLivenessDetector/service/utils/liveness.d.ts

@@ -50,14 +50,7 @@ export declare function drawStaticOval(canvasEl: HTMLCanvasElement, videoEl: HTM
 export declare function clearOvalCanvas({ canvas, }: {
     canvas: HTMLCanvasElement;
 }): void;
-export declare function generateBboxFromLandmarks(face: Face, oval: LivenessOvalDetails): BoundingBox;
-/**
- * Returns the state of the provided face with respect to the provided liveness oval.
- */
-export declare function getFaceMatchStateInLivenessOval(face: Face, ovalDetails: LivenessOvalDetails, initialFaceIntersection: number, sessionInformation: SessionInformation): {
-    faceMatchState: FaceMatchState;
-    faceMatchPercentage: number;
-};
+export declare function generateBboxFromLandmarks(face: Face, oval: LivenessOvalDetails, frameHeight: number): BoundingBox;
 /**
  * Returns the illumination state in the provided video frame.
  */

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.0.15";
+export declare const VERSION = "3.0.16";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-liveness",
-  "version": "3.0.15",
+  "version": "3.0.16",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {