breaking(liveness): update liveness component default cdn to use reko…

…gnition cdn (#4106)

* chore(liveness): update liveness component default cdn to use rekognition cdn

* Create seven-balloons-add.md

* Update seven-balloons-add.md

* chore: add doc updates

* update to use new liveness cdn

* remove unused imports

* Update docs/src/pages/[platform]/connected-components/liveness/react-props.ts

Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com>

* Update docs/src/pages/[platform]/connected-components/liveness/react-props.ts

Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com>

* fix comments

* add comments, add urls, add variables

* fix url

* Update seven-balloons-add.md

* Update .changeset/seven-balloons-add.md

---------

Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com>

.changeset/seven-balloons-add.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-liveness": major
+---
+
+**Breaking**: Update liveness component default cdn to use rekognition cdn. Note: customers with CSP policies will need to update their policy to allow the new default cdn url at - https://cdn.liveness.rekognition.amazonaws.com

canary/e2e/features/liveness/face-detect.feature

@@ -7,5 +7,5 @@ Feature: Liveness Start Screen
 
   @react
   Scenario: Blazeface CDN is up
-    Then I request "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm" and get "200"
-    And I request "https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1/model.json?tfjs-format=file" and get "200"
+    Then I request "https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow/tfjs-backend-wasm/3.11.0/tfjs-backend-wasm-simd.wasm" and get "200"
+    And I request "https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow-models/blazeface/0.0.7/model/model.json" and get "200"

docs/src/data/ignoredLinks.ts

@@ -21,5 +21,7 @@ export const IGNORED_LINKS = [
   'https://github.com/aws-amplify/amplify-ui-swift-liveness/issues/new/choose', // 302 amplify-ui-swift-liveness does not have issue templates yet
   'https://developer.apple.com/design/human-interface-guidelines/patterns/accessing-private-data/', // 401 Apple doesn't like bots maybe
   'https://twitter.com/AWSAmplify',
+  'https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1/model.json?tfjs-format=file', // 302 to a google cdn
+  'https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow/tfjs-backend-wasm/3.11.0/', // 404 this is the intentional path as the tfjs library will append the correct file name
   'https://cdn.liveness.rekognition.amazonaws.com',
 ];

docs/src/pages/[platform]/connected-components/liveness/full-api.react.mdx

@@ -1,5 +1,7 @@
 import { Tabs, TabItem, Table, TableHead, TableRow, TableCell, TableBody, View } from '@aws-amplify/ui-react';
 import ReactPropsTable from '@/components/propsTable/ReactPropsTable';
+import { ResponsiveTable, ResponsiveTableCell } from '@/components/ResponsiveTable';
+import { CodeHighlight } from '@/components/CodeHighlight';
 import { FACE_LIVENESS_DETECTOR_PROPS, FACE_LIVENESS_DETECTOR_COMPONENTS, FACE_LIVENESS_DETECTOR_CONFIG, FACE_LIVENESS_DETECTOR_ERROR_STATES, LIVENESS_ERROR } from './react-props';
 
 ## Full API Reference
@@ -20,7 +22,29 @@ Below is the full list of props that can be used with the `FaceLivenessDetectorC
 
 Below is the full list of props that can be used with the `FaceLivenessDetectorConfig`. You can also reference the [source code here](https://github.com/aws-amplify/amplify-ui/blob/main/packages/react-liveness/src/components/FaceLivenessDetector/service/types/liveness.ts). For instructions on using your own CDN [check here](./liveness/customization#custom-cdn).
 
-<ReactPropsTable props={FACE_LIVENESS_DETECTOR_CONFIG} />
+<ResponsiveTable highlightOnHover>
+  <TableHead>
+    <TableRow>
+      <TableCell as="th">Name</TableCell>
+      <TableCell as="th">Description</TableCell>
+      <TableCell as="th">Type</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <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="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="Type"><CodeHighlight code={"string"} language="typescript" /></ResponsiveTableCell>
+    </TableRow>
+  </TableBody>
+</ResponsiveTable>
 
 ### LivenessError
 

docs/src/pages/[platform]/connected-components/liveness/react-props.ts

@@ -74,21 +74,6 @@ export const FACE_LIVENESS_DETECTOR_COMPONENTS = [
   },
 ];
 
-export const FACE_LIVENESS_DETECTOR_CONFIG = [
-  {
-    name: `binaryPath?`,
-    description:
-      'Overrides the WASM backend binary CDN path, the default is https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@3.11.0/dist/. When overriding this path ensure that the wasm version matches the version of @tensorflow/tfjs-backend-wasm installed by npm.',
-    type: `string`,
-  },
-  {
-    name: `faceModelUrl?`,
-    description:
-      'Overrides the Blazeface model and weights bin CDN URL default is https://tfhub.dev/tensorflow/tfjs-model/blazeface/1/default/1/model.json?tfjs-format=file.',
-    type: `string`,
-  },
-];
-
 export const LIVENESS_ERROR = [
   {
     name: `state`,

packages/react-liveness/src/components/FaceLivenessDetector/service/utils/blazefaceFaceDetection.ts

@@ -12,6 +12,15 @@ import { FaceDetection, Face, Coordinate } from '../types';
 
 type BlazeFaceModelBackend = 'wasm' | 'cpu';
 
+export const BLAZEFACE_VERSION = '0.0.7';
+
+/**
+ *   WARNING: When updating these links,
+ *   also make sure to update documentation and the link in the canary/e2e test "canary/e2e/features/liveness/face-detect.feature"
+ */
+export const DEFAULT_BLAZEFACE_URL = `https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow-models/blazeface/${BLAZEFACE_VERSION}/model/model.json`;
+export const DEFAULT_TFJS_WASM_URL = `https://cdn.liveness.rekognition.amazonaws.com/face-detection/tensorflow/tfjs-backend-wasm/${tfjsWasm.version_wasm}/`;
+
 /**
  * The BlazeFace implementation of the FaceDetection interface.
  */
@@ -23,13 +32,8 @@ export class BlazeFaceFaceDetection extends FaceDetection {
 
   constructor(binaryPath?: string, faceModelUrl?: string) {
     super();
-    this.faceModelUrl = faceModelUrl;
-    this.binaryPath =
-      binaryPath ??
-      /**  Note: If to update this link,
-       *   also make sure to update the link in the canary/e2e test "canary/e2e/features/liveness/face-detect.feature"
-       */
-      `https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@${tfjsWasm.version_wasm}/dist/`;
+    this.faceModelUrl = faceModelUrl ?? DEFAULT_BLAZEFACE_URL;
+    this.binaryPath = binaryPath ?? DEFAULT_TFJS_WASM_URL;
   }
 
   async loadModels(): Promise<void> {