@smileid/web-components 11.4.3 → 11.4.5

package/lib/components/selfie/src/smartselfie-capture/utils/mediapipeManager.ts

@@ -122,6 +122,62 @@ export class UnsupportedMediapipeEnvironmentError extends Error {
   }
 }
 
+/**
+ * @description Thrown when `FaceLandmarker.createFromOptions` does not settle
+ * within {@link MEDIAPIPE_INIT_TIMEOUT_MS}. The WASM and model assets download
+ * over the network, but the subsequent WASM compile + GPU/CPU graph
+ * initialization runs on-device and can stall indefinitely on some drivers.
+ * Without a timeout the cached `loading` promise never resolves nor rejects,
+ * which (a) keeps the loading UI spinning until the wrapper's hard deadline and
+ * (b) poisons the singleton so retries/remounts await the same stuck promise.
+ * Treated as a transient failure by callers so the bounded retry can re-run.
+ */
+export class MediapipeInitTimeoutError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'MediapipeInitTimeoutError';
+  }
+}
+
+// Last-resort hang guard for `createFromOptions`. This call also downloads the
+// ~3MB model, so the budget must cover a slow/uncached fetch as well as the
+// on-device init — hence it is deliberately generous. It exists only so a truly
+// wedged init eventually rejects (letting the wrapper's bounded retry / hard
+// deadline take over) rather than hanging forever; it is NOT used to decide the
+// GPU→CPU fallback (that keys off real init errors — see getMediapipeInstance).
+const MEDIAPIPE_INIT_TIMEOUT_MS = 45000;
+
+/**
+ * @description Races a promise against a timeout. On timeout, rejects with a
+ * {@link MediapipeInitTimeoutError}. The underlying promise is not (and cannot
+ * be) aborted — we just stop awaiting it so callers can recover.
+ * @param {Promise<T>} promise The work to bound.
+ * @param {number} ms Timeout in milliseconds.
+ * @param {string} message Message for the timeout error.
+ * @returns {Promise<T>} Resolves/rejects with the promise, or rejects on timeout.
+ */
+const withTimeout = <T>(
+  promise: Promise<T>,
+  ms: number,
+  message: string,
+): Promise<T> =>
+  new Promise<T>((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      reject(new MediapipeInitTimeoutError(message));
+    }, ms);
+
+    promise.then(
+      (value) => {
+        clearTimeout(timeoutId);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timeoutId);
+        reject(error);
+      },
+    );
+  });
+
 /**
  * @description Reads system architecture hints from User-Agent Client Hints.
  * @returns {Promise<string | null>} Lower-cased hint string or null when hints are unavailable.
@@ -207,6 +263,28 @@ const hasFP16Support = () => {
   return !!(hasHalfFloatExt && hasColorBufferHalfFloat && hasHalfFloatLinear);
 };
 
+/**
+ * @description Creates a FaceLandmarker with the given compute delegate.
+ * Extracted so the init can be retried with a different delegate without
+ * duplicating the options.
+ * @param {Awaited<ReturnType<typeof FilesetResolver.forVisionTasks>>} vision Resolved WASM fileset.
+ * @param {'CPU' | 'GPU'} delegate Compute delegate to use.
+ * @returns {Promise<FaceLandmarker>} The created FaceLandmarker.
+ */
+const createLandmarker = (
+  vision: Awaited<ReturnType<typeof FilesetResolver.forVisionTasks>>,
+  delegate: 'CPU' | 'GPU',
+): Promise<FaceLandmarker> =>
+  FaceLandmarker.createFromOptions(vision, {
+    baseOptions: {
+      modelAssetPath: `https://web-models.smileidentity.com/face_landmarker/face_landmarker.task`,
+      delegate,
+    },
+    outputFaceBlendshapes: true,
+    runningMode: 'VIDEO',
+    numFaces: 2,
+  });
+
 export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
   if (!window.__smileIdentityMediapipe) {
     window.__smileIdentityMediapipe = {
@@ -249,15 +327,69 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
       const delegate =
         gpuDelegate === 'CPU' || !hasFP16Support() ? 'CPU' : 'GPU';
 
-      const faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
-        baseOptions: {
-          modelAssetPath: `https://web-models.smileidentity.com/face_landmarker/face_landmarker.task`,
-          delegate,
-        },
-        outputFaceBlendshapes: true,
-        runningMode: 'VIDEO',
-        numFaces: 2,
-      });
+      // A GPU-delegate init can throw on some drivers (WebGL context/shader
+      // failures) even though the model already downloaded; on a genuine GPU
+      // *error* we retry once on CPU before giving up. We deliberately do NOT
+      // fall back on a timeout: the timeout also covers the model download, so
+      // a slow fetch could trip it while a healthy GPU init is still in
+      // progress — abandoning it to start a redundant CPU init only makes
+      // things worse. A timeout therefore propagates as a transient failure for
+      // the wrapper's bounded retry / hard deadline to handle.
+      //
+      // Orphan handling: when `withTimeout` fires, the underlying
+      // `createLandmarker` promise is still in flight (it cannot be aborted).
+      // If it eventually resolves, the resulting `FaceLandmarker` would leak a
+      // GPU/WebGL context, so we attach a best-effort `.close()` cleanup to the
+      // original promise reference for both the GPU and CPU init paths.
+      const closeOrphan = (orphan: FaceLandmarker) => {
+        try {
+          orphan.close();
+        } catch {
+          /* best effort */
+        }
+      };
+
+      let faceLandmarker: FaceLandmarker;
+      const initPromise = createLandmarker(vision, delegate);
+      try {
+        faceLandmarker = await withTimeout(
+          initPromise,
+          MEDIAPIPE_INIT_TIMEOUT_MS,
+          `MediaPipe initialization timed out after ${MEDIAPIPE_INIT_TIMEOUT_MS}ms (delegate: ${delegate}).`,
+        );
+      } catch (error) {
+        const isTimeout = error instanceof MediapipeInitTimeoutError;
+        if (isTimeout) {
+          // Stop awaiting the in-flight init, but if it eventually resolves,
+          // close the orphaned instance to avoid leaking a GPU/WebGL context.
+          initPromise.then(closeOrphan, () => {
+            /* already failed; nothing to clean up */
+          });
+        }
+        if (delegate === 'GPU' && !isTimeout) {
+          console.warn(
+            '[SmileID] GPU MediaPipe init failed; retrying with CPU delegate.',
+            error,
+          );
+          const cpuInitPromise = createLandmarker(vision, 'CPU');
+          try {
+            faceLandmarker = await withTimeout(
+              cpuInitPromise,
+              MEDIAPIPE_INIT_TIMEOUT_MS,
+              `MediaPipe CPU initialization timed out after ${MEDIAPIPE_INIT_TIMEOUT_MS}ms.`,
+            );
+          } catch (cpuError) {
+            if (cpuError instanceof MediapipeInitTimeoutError) {
+              cpuInitPromise.then(closeOrphan, () => {
+                /* already failed; nothing to clean up */
+              });
+            }
+            throw cpuError;
+          }
+        } else {
+          throw error;
+        }
+      }
 
       mediapipeGlobal.instance = faceLandmarker;
       mediapipeGlobal.loaded = true;
@@ -265,6 +397,8 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
 
       return faceLandmarker;
     } catch (error) {
+      // Always clear the poisoned promise so the wrapper's bounded retry — and
+      // any later remount — can re-attempt instead of awaiting a dead promise.
       mediapipeGlobal.loading = null;
       throw error;
     }
@@ -277,4 +411,6 @@ export const __testUtils = {
   matchesExcludedGpu,
   getDelegateFromGpuDetection,
   supportsWasmReftypes,
+  withTimeout,
+  MEDIAPIPE_INIT_TIMEOUT_MS,
 };

package/lib/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.4.3",
+  "version": "11.4.5",
   "private": true,
   "exports": {
     ".": "./index.js"

package/lib/components/smart-camera-web/src/SmartCameraWeb.js

@@ -166,11 +166,13 @@ class SmartCameraWeb extends HTMLElement {
     this.documentCapture.addEventListener(
       'document-capture-screens.cancelled',
       () => {
-        this.SelfieCaptureScreens.setAttribute(
-          'initial-screen',
-          'selfie-capture',
-        );
         this.setActiveScreen(this.SelfieCaptureScreens);
+        // Land on a clean selfie capture screen by driving the navigation
+        // explicitly. Previously this set `initial-screen="selfie-capture"`,
+        // whose side effect was a full SelfieCaptureScreens rebuild — re-fired
+        // on every back-navigation (setAttribute invokes attributeChangedCallback
+        // even when the value is unchanged).
+        this.SelfieCaptureScreens.restartSelfieCapture();
         this.SelfieCaptureScreens.removeAttribute('data-camera-error');
         this.SelfieCaptureScreens.setAttribute('data-camera-ready', true);
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.4.3",
+  "version": "11.4.5",
   "private": false,
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
@@ -105,7 +105,7 @@
     "@typescript-eslint/eslint-plugin": "^8.49.0",
     "@typescript-eslint/parser": "^8.49.0",
     "cross-env": "^7.0.3",
-    "cypress": "^13.15.0",
+    "cypress": "^13.17.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",