chore: update liveness UX (#4728)

* feat(liveness): Update start-screen UX * feat(liveness): more ux updates to match design mocks * chore: remove unused variables * chore: add disableStartScreen prop * make initial oval match dark mode theme * update styles * chore: update unit tests * chore(liveness): fix liveness to work with v6 * chore: fix size update * reomve unused import * small fixes * chore: remove StartLiveness, refactor * more code cleanup * increase wait time to 1 second * chore: fix unit tests and refactor * more cleanup * chore: fix color mode bug, fix glitchiness while loading, add internal hook for color mode * fix unti test * chore: add customization for recording icon and cancel button * Create pretty-tables-live.md * Update examples/next/pages/ui/components/liveness/components/LivenessInlineResults.tsx Co-authored-by: Scott Rees <[email protected]> * Update examples/next/pages/ui/components/liveness/components/LivenessInlineResults.tsx Co-authored-by: Scott Rees <[email protected]> * chore: update unit tests * remove unused variable * remove more unused variables * update snapshot * chore: fix liveness docs * chore: fix liveness e2e tests * chore: update useColormode hook * chore: update liveness docs * fix bbox generation formula * small refactor updates * chore: more liveness docs updates * chore: address ux feedback * address more liveness feedback * more fix * Update docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Co-authored-by: Scott Rees <[email protected]> * update css colors * update white color in one more place * chore: remove component updates, refactor local storage to utils * fix unit test --------- Co-authored-by: Ayush Goyal <[email protected]> Co-authored-by: Scott Rees <[email protected]>
aws-amplify · Nov 16, 2023 · 872e27d · 872e27d
1 parent ca86625
commit 872e27d
Show file tree

Hide file tree

Showing 54 changed files with 948 additions and 787 deletions.
diff --git a/.changeset/pretty-tables-live.md b/.changeset/pretty-tables-live.md
@@ -0,0 +1,9 @@
+---
+"@aws-amplify/ui-react-liveness": major
+---
+
+breaking(liveness): update liveness UX
+
+Replace start screen with instructions with a new hair check start screen that lets end users interface with the camera. Also added camera selection and upgraded the blazeface model.
+
+Updated `disableInstructionScreen` to `disableStartScreen`
diff --git a/docs/src/data/ignoredLinks.ts b/docs/src/data/ignoredLinks.ts
@@ -40,4 +40,6 @@ export const IGNORED_LINKS = [
   'https://pub.dev/documentation/amplify_authenticator/latest/amplify_authenticator/AuthenticatorState-class.html',
   'https://pub.dev/documentation/amplify_authenticator/latest/amplify_authenticator/amplify_authenticator-library.html',
   'https://docs.flutter.dev/ui/accessibility-and-localization/internationalization',
+  'https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow/tfjs-backend-wasm/4.11.0/',
+  'https://tfhub.dev/mediapipe/tfjs-model/face_detection/short/1',
 ];
diff --git a/.../pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx b/.../pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FaceLivenessDetector } from '@aws-amplify/ui-react-liveness';
-import { View, Heading, Alert, Card, Text } from '@aws-amplify/ui-react';
+import { View, Heading, Alert } from '@aws-amplify/ui-react';
 
 export function CustomizationComponents() {
   return (
@@ -9,17 +9,6 @@ export function CustomizationComponents() {
       region={'us-east-1'}
       onAnalysisComplete={async () => {}}
       components={{
-        Header: () => {
-          return (
-            <View flex="1">
-              <Heading>Face Liveness check</Heading>
-              <Text>
-                You will go through a face verification process to prove that
-                you are a real person.
-              </Text>
-            </View>
-          );
-        },
         PhotosensitiveWarning: (): JSX.Element => {
           return (
             <Alert
@@ -33,25 +22,6 @@ export function CustomizationComponents() {
             </Alert>
           );
         },
-        Instructions: (): JSX.Element => {
-          return (
-            <Card variation="elevated">
-              Instructions to follow to use Face Liveness detector
-              <ol>
-                <li>
-                  Make sure your face is not covered with sunglasses or a mask.
-                </li>
-                <li>
-                  Move to a well-lit place that is not dark or in direct
-                  sunlight.
-                </li>
-                <li>
-                  Fill onscreen oval with your face and hold for colored lights.
-                </li>
-              </ol>
-            </Card>
-          );
-        },
         ErrorView: ({ children }) => {
           return (
             <View flex="1" backgroundColor="white">

diff --git a/docs/src/pages/[platform]/connected-components/liveness/customization/Customizationi18n.tsx b/docs/src/pages/[platform]/connected-components/liveness/customization/Customizationi18n.tsx
@@ -6,23 +6,13 @@ const dictionary = {
   // use default strings for english
   en: null,
   es: {
-    instructionsHeaderHeadingText: 'Verificación de vida',
-    instructionsHeaderBodyText:
-      'Pasará por un proceso de verificación facial para demostrar que es una persona real.',
-    instructionListStepOneText:
-      'Cuando aparezca un óvalo, rellena el óvalo con tu cara en 7 segundos.',
-    instructionListStepTwoText: 'Maximiza el brillo de tu pantalla.',
-    instructionListStepThreeText:
-      'Asegúrese de que su cara no esté cubierta con gafas de sol o una máscara.',
-    instructionListStepFourText:
-      'Muévase a un lugar bien iluminado que no esté expuesto a la luz solar directa.',
     photosensitivyWarningHeadingText: 'Advertencia de fotosensibilidad',
     photosensitivyWarningBodyText:
       'Esta verificación muestra luces de colores. Tenga cuidado si es fotosensible.',
-    instructionListHeadingText:
-      'Siga las instrucciones para completar la verificación:',
     goodFitCaptionText: 'Buen ajuste',
     tooFarCaptionText: 'Demasiado lejos',
+    hintCenterFaceText: 'Centra tu cara',
+    startScreenBeginCheckText: 'Comenzar a verificar',
   },
 };
 

diff --git a/.../connected-components/liveness/customization/customization.components.react.mdx b/.../connected-components/liveness/customization/customization.components.react.mdx
@@ -7,10 +7,10 @@ FaceLivenessDetector allows overriding some UI components using the `components`
 
 The following code snippet demonstrates how to pass in custom HTML rendering functions:
 
-- Custom Header
 - Custom Photo Sensitivity Warning
-- Custom Instruction List
 - Custom Error View
+- Custom Cancel Button
+- Custom Recording Icon
 
 ```tsx file=./CustomizationComponents.tsx
 ```

diff --git a/docs/src/pages/[platform]/connected-components/liveness/full-api.react.mdx b/docs/src/pages/[platform]/connected-components/liveness/full-api.react.mdx
@@ -62,13 +62,13 @@ Below is the full list of props that can be used with the `FaceLivenessDetectorC
     <TableRow>
       <ResponsiveTableCell label="Name">binaryPath?</ResponsiveTableCell>
       {/* WARNING: Ensure that this URL matches the value in the liveness component */}
-      <ResponsiveTableCell label="Description">Overrides the WASM binary path, the default is https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow/tfjs-backend-wasm/3.11.0/. When overriding this path ensure that the wasm version matches the version of [@tensorflow/tfjs-backend-wasm](https://www.npmjs.com/package/@tensorflow/tfjs-backend-wasm) installed by npm.</ResponsiveTableCell>
+      <ResponsiveTableCell label="Description">Overrides the WASM binary path, the default is https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow/tfjs-backend-wasm/4.11.0/. When overriding this path ensure that the wasm version matches the version of [@tensorflow/tfjs-backend-wasm](https://www.npmjs.com/package/@tensorflow/tfjs-backend-wasm) installed by npm.</ResponsiveTableCell>
       <ResponsiveTableCell label="Type"><CodeHighlight code={"string"} language="typescript" /></ResponsiveTableCell>
     </TableRow>
     <TableRow>
       <ResponsiveTableCell label="Name">faceModelUrl?</ResponsiveTableCell>
       {/* WARNING: Ensure that this URL matches the value in the liveness component */}
-      <ResponsiveTableCell label="Description">Overrides the Blazeface model and weights bin CDN URL. Default value is https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow-models/blazeface/0.0.7/model/model.json</ResponsiveTableCell>
+      <ResponsiveTableCell label="Description">Overrides the Blazeface model and weights bin CDN URL. Default value is https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow-models/blazeface/1.0.2/model/model.json</ResponsiveTableCell>
       <ResponsiveTableCell label="Type"><CodeHighlight code={"string"} language="typescript" /></ResponsiveTableCell>
     </TableRow>
     <TableRow>

diff --git a/docs/src/pages/[platform]/connected-components/liveness/react-props.ts b/docs/src/pages/[platform]/connected-components/liveness/react-props.ts
@@ -27,9 +27,9 @@ export const FACE_LIVENESS_DETECTOR_PROPS = [
     type: `(error: LivenessError) => void`,
   },
   {
-    name: `disableInstructionScreen?`,
+    name: `disableStartScreen?`,
     description:
-      'Optional parameter for the disabling the Start/Get Ready Screen, default: false.',
+      'Optional parameter for the disabling the start screen, default: false.',
     type: `boolean`,
   },
   {
@@ -50,23 +50,12 @@ export const FACE_LIVENESS_DETECTOR_PROPS = [
 ];
 
 export const FACE_LIVENESS_DETECTOR_COMPONENTS = [
-  {
-    name: `Header?`,
-    description: 'Overrides the rendered component in the header section.',
-    type: `React.ComponentType`,
-  },
   {
     name: `PhotosensitiveWarning?`,
     description:
       'Overrides the rendered component for the photosensitivity warning.',
     type: `React.ComponentType`,
   },
-  {
-    name: `Instructions?`,
-    description:
-      'Overrides the rendered component for the instruction section.',
-    type: `React.ComponentType`,
-  },
   {
     name: `ErrorView?`,
     description: 'Overrides the rendered component for error view.',

diff --git a/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx b/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx
@@ -681,6 +681,55 @@ The latest version of the `Authenticator` has a completely different set of CSS
 Previous versions of `Authenticator` exposed a `onAuthUIStateChange` handler to detect Auth state changes. For similar functionality see [useAuthenticator](/react/connected-components/authenticator/advanced#access-auth-state).
 
 ## `@aws-amplify/ui-react-liveness`
+### Migrate from 2.x to 3.x
+#### Installation
+
+Install the 3.x version of the `@aws-amplify/ui-react-liveness` library.
+
+<Tabs.Container defaultValue="npm">
+  <Tabs.List>
+    <Tabs.Item value="npm">npm</Tabs.Item>
+    <Tabs.Item value="yarn">yarn</Tabs.Item>
+  </Tabs.List>
+  <Tabs.Panel value="npm">
+    <TerminalCommand command="npm install [email protected] @aws-amplify/[email protected]" />
+  </Tabs.Panel>
+  <Tabs.Panel value="yarn">
+    <TerminalCommand command="yarn add [email protected] @aws-amplify/[email protected]" />
+  </Tabs.Panel>
+</Tabs.Container>
+
+#### Update and Usage
+
+Optionally update your App with the new prop usage:
+
+**App.js**
+
+```diff
+ const App = () => (
+  return (
+    <ThemeProvider>
+      {loading ? (
+        <Loader />
+      ) : (
+        <FaceLivenessDetector
+          sessionId={createLivenessApiData.sessionId}
+          region="us-east-1"
+          onAnalysisComplete={handleAnalysisComplete}
+-         disableInstructionScreen={true}
++         disableStartScreen={true}
+        />
+      )}
+    </ThemeProvider>
+  );
+);
+
+```
+
+#### CDN CSP Policy
+
+The 3.x version of the `FaceLivenessDetector` has been updated to use the latest version of TensorFlow and Blazeface, thus the default CDN paths have changed. If your application has an existing CSP policy, ensure your policy allows https://cdn.liveness.rekognition.amazonaws.com. If you are using a custom CDN make sure to update your CDN versions to match [@tensorflow/tfjs-backend-wasm](https://www.npmjs.com/package/@tensorflow/tfjs-backend-wasm/v/4.11.0) and [@tensorflow-models/face-detection](https://www.npmjs.com/package/@tensorflow-models/face-detection/v/1.0.2).Please look over the [Liveness Config](../connected-components/liveness/customization#facelivenessdetectorconfig) section for more information.
+
 ### Migrate from 1.x to 2.x
 #### Installation
 

diff --git a/examples/next/pages/ui/components/liveness/components/LivenessDefault.tsx b/examples/next/pages/ui/components/liveness/components/LivenessDefault.tsx
@@ -1,14 +1,14 @@
 import { View, Flex, Loader, Text } from '@aws-amplify/ui-react';
 import {
-  FaceLivenessDetector,
   FaceLivenessDetectorCore,
+  FaceLivenessDetector,
 } from '@aws-amplify/ui-react-liveness';
 import { useLiveness } from './useLiveness';
 import { SessionIdAlert } from './SessionIdAlert';
 import LivenessInlineResults from './LivenessInlineResults';
 
 export default function LivenessDefault({
-  disableInstructionScreen = false,
+  disableStartScreen = false,
   components = undefined,
   credentialProvider = undefined,
 }) {
@@ -36,12 +36,7 @@ export default function LivenessDefault({
           <Loader /> <Text as="span">Loading...</Text>
         </Flex>
       ) : (
-        <Flex
-          direction="column"
-          gap="xl"
-          position="relative"
-          style={{ zIndex: '2' }}
-        >
+        <Flex direction="column" gap="xl">
           <SessionIdAlert
             sessionId={createLivenessSessionApiData['sessionId']}
           />
@@ -55,40 +50,24 @@ export default function LivenessDefault({
 
           <Flex gap="0" direction="column" position="relative">
             {!getLivenessResponse ? (
-              credentialProvider ? (
-                <FaceLivenessDetectorCore
-                  sessionId={createLivenessSessionApiData['sessionId']}
-                  region={'us-east-1'}
-                  onUserCancel={onUserCancel}
-                  onAnalysisComplete={async () => {
-                    await handleGetLivenessDetection(
-                      createLivenessSessionApiData['sessionId']
-                    );
-                  }}
-                  onError={(error) => {
-                    console.error(error);
-                  }}
-                  disableInstructionScreen={disableInstructionScreen}
-                  components={components}
-                  config={{ credentialProvider }}
-                />
-              ) : (
-                <FaceLivenessDetector
-                  sessionId={createLivenessSessionApiData['sessionId']}
-                  region={'us-east-1'}
-                  onUserCancel={onUserCancel}
-                  onAnalysisComplete={async () => {
-                    await handleGetLivenessDetection(
-                      createLivenessSessionApiData['sessionId']
-                    );
-                  }}
-                  onError={(error) => {
-                    console.error(error);
-                  }}
-                  disableInstructionScreen={disableInstructionScreen}
-                  components={components}
-                />
-              )
+              <FaceLivenessDetectorCore
+                sessionId={createLivenessSessionApiData['sessionId']}
+                region={'us-east-1'}
+                onUserCancel={onUserCancel}
+                onAnalysisComplete={async () => {
+                  await handleGetLivenessDetection(
+                    createLivenessSessionApiData['sessionId']
+                  );
+                }}
+                onError={(error) => {
+                  console.error(error);
+                }}
+                disableStartScreen={disableStartScreen}
+                components={components}
+                {...(credentialProvider
+                  ? { config: { credentialProvider } }
+                  : {})}
+              />
             ) : null}
           </Flex>
         </Flex>

diff --git a/examples/next/pages/ui/components/liveness/components/LivenessInlineResults.tsx b/examples/next/pages/ui/components/liveness/components/LivenessInlineResults.tsx
@@ -19,7 +19,7 @@ export default function LivenessInlineResults({
   ).toString('base64');
   const displayScore = truncateNumber(confidenceScore, 4);
   return (
-    <>
+    <Flex direction="column" gap="medium">
       <Flex as="span" style={{ whiteSpace: 'nowrap' }}>
         <Text>Liveness result:</Text>
         <Text fontWeight="bold" margin="0 0.5rem">
@@ -28,12 +28,27 @@ export default function LivenessInlineResults({
       </Flex>
 
       <Text as="span" style={{ whiteSpace: 'nowrap' }}>
-        Confidence score:
+        Liveness confidence score:
         <Badge variation={isLive ? 'success' : 'error'} margin="0 0.5rem">
           {displayScore}
         </Badge>
       </Text>
 
+      {!isLive && (
+        <Text as="span">
+          <Text fontWeight="bold">Tips to pass the video check:</Text>
+          <ol>
+            <li>Maximize you screen&apos;s brightness</li>
+            <li>
+              Avoid very bright lighting conditions, such as direct sunlight.
+            </li>
+            <li>
+              Remove sunglasses, mask, hat, or anything blocking your face.
+            </li>
+          </ol>
+        </Text>
+      )}
+
       <Flex justifyContent="start">
         <Button variation="primary" type="button" onClick={onUserCancel}>
           Try again
@@ -46,6 +61,6 @@ export default function LivenessInlineResults({
         src={`data:image/jpeg;base64,${base64string}`}
         alt="Audit image"
       />
-    </>
+    </Flex>
   );
 }
diff --git a/examples/next/pages/ui/components/liveness/disable-start-screen/index.page.tsx b/examples/next/pages/ui/components/liveness/disable-start-screen/index.page.tsx
@@ -15,7 +15,7 @@ Amplify.configure({
 const App = () => {
   return (
     <Layout>
-      <LivenessDefault disableInstructionScreen={true} />
+      <LivenessDefault disableStartScreen={true} />
     </Layout>
   );
 };

diff --git a/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx b/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx
@@ -17,7 +17,7 @@ const App = () => {
   return (
     <Layout>
       <LivenessDefault
-        disableInstructionScreen={false}
+        disableStartScreen={false}
         components={{
           Header: () => {
             return (