@smileid/web-components 11.3.0 → 11.4.0

package/dist/types/document-auto-capture.d.ts

@@ -0,0 +1,34 @@
+import { FunctionComponent } from 'preact';
+
+declare const SmartDocumentCapture: FunctionComponent<SmartDocumentCaptureProps>;
+export default SmartDocumentCapture;
+
+declare interface SmartDocumentCaptureProps {
+    'document-type'?: string;
+    'side-of-id'?: string;
+    'show-navigation'?: string | boolean;
+    'theme-color'?: string;
+    'hide-attribution'?: string | boolean;
+}
+
+export { }
+
+
+
+declare module 'signature_pad' {
+  export default class SignaturePad {
+    constructor(canvas: HTMLCanvasElement, options?: any);
+
+    clear(): void;
+
+    toDataURL(type?: string): string;
+
+    fromDataURL(dataURL: string): void;
+
+    isEmpty(): boolean;
+
+    on(event: string, callback: (...args: unknown[]) => void): void;
+
+    off(event: string, callback: (...args: unknown[]) => void): void;
+  }
+}

package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx

@@ -1,8 +1,6 @@
 import { useRef, useEffect } from 'preact/hooks';
-import { useSignal } from '@preact/signals';
 import register from 'preact-custom-element';
 import type { FunctionComponent } from 'preact';
-import throttle from 'lodash/throttle';
 
 import { getBoolProp } from '../../../../utils/props';
 import { useFaceCapture, useCamera } from './hooks';
@@ -50,13 +48,6 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
   const initialFacingMode = allowAgentMode ? 'environment' : 'user';
   const camera = useCamera(initialFacingMode);
 
-  const throttledMultipleFaces = useSignal(false);
-  const updateMultipleFacesUI = useRef(
-    throttle((value: boolean) => {
-      throttledMultipleFaces.value = value;
-    }, 100),
-  ).current;
-
   const faceCapture = useFaceCapture({
     videoRef: camera.videoRef,
     canvasRef,
@@ -106,14 +97,9 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
       faceCapture.stopDetectionLoop();
       camera.stopCamera();
       faceCapture.cleanup();
-      updateMultipleFacesUI.cancel();
     };
   }, []);
 
-  useEffect(() => {
-    updateMultipleFacesUI(faceCapture.multipleFaces.value);
-  }, [faceCapture.multipleFaces.value]);
-
   useEffect(() => {
     const navigation = navigationRef.current;
 
@@ -160,7 +146,6 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
         videoRef={camera.videoRef}
         canvasRef={canvasRef}
         facingMode={camera.facingMode}
-        multipleFaces={throttledMultipleFaces.value}
         progress={
           faceCapture.capturesTaken.value > 0
             ? faceCapture.capturesTaken.value / faceCapture.totalCaptures.value
@@ -178,6 +163,9 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
             isCapturing={faceCapture.isCapturing.value}
             hasFinishedCapture={faceCapture.hasFinishedCapture.value}
             isReadyToCapture={faceCapture.isReadyToCapture.value}
+            captureButtonFallbackEnabled={
+              faceCapture.captureButtonFallbackEnabled.value
+            }
             allowAgentMode={allowAgentMode}
             agentSupported={camera.agentSupported}
             showAgentModeForTests={showAgentModeForTests}

package/lib/components/selfie/src/smartselfie-capture/components/CameraPreview.tsx

@@ -5,7 +5,6 @@ interface CameraPreviewProps {
   videoRef: Ref<HTMLVideoElement>;
   canvasRef: Ref<HTMLCanvasElement>;
   facingMode: 'user' | 'environment';
-  multipleFaces: boolean;
   progress: number;
   interval: number;
   themeColor: string;
@@ -15,7 +14,6 @@ export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
   videoRef,
   canvasRef,
   facingMode,
-  multipleFaces,
   progress,
   interval,
   themeColor,
@@ -25,7 +23,7 @@ export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
       <div
         className="video-wrapper"
         style={{
-          clipPath: multipleFaces ? 'none' : 'url(#selfie-clip-path)',
+          clipPath: 'url(#selfie-clip-path)',
         }}
       >
         <div className="video-container">
@@ -42,13 +40,11 @@ export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
           />
         </div>
       </div>
-      {!multipleFaces && (
-        <OvalProgress
-          progress={progress}
-          duration={interval}
-          themeColor={themeColor}
-        />
-      )}
+      <OvalProgress
+        progress={progress}
+        duration={interval}
+        themeColor={themeColor}
+      />
     </div>
 
     <style>{`

package/lib/components/selfie/src/smartselfie-capture/components/CaptureControls.tsx

@@ -5,6 +5,7 @@ interface CaptureControlsProps {
   isCapturing: boolean;
   hasFinishedCapture: boolean;
   isReadyToCapture: boolean;
+  captureButtonFallbackEnabled: boolean;
   allowAgentMode: boolean;
   agentSupported: boolean;
   showAgentModeForTests: boolean;
@@ -18,6 +19,7 @@ export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
   isCapturing,
   hasFinishedCapture,
   isReadyToCapture,
+  captureButtonFallbackEnabled,
   allowAgentMode,
   agentSupported,
   showAgentModeForTests,
@@ -32,7 +34,11 @@ export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
         id="start-image-capture"
         class="btn-primary"
         onClick={onStartCapture}
-        disabled={isCapturing || hasFinishedCapture || !isReadyToCapture}
+        disabled={
+          isCapturing ||
+          hasFinishedCapture ||
+          (!isReadyToCapture && !captureButtonFallbackEnabled)
+        }
       >
         {t('selfie.capture.button.startCapture')}
       </button>

package/lib/components/selfie/src/smartselfie-capture/hooks/useFaceCapture.ts

@@ -51,11 +51,11 @@ export const useFaceCapture = ({
   const animationFrameRef = useRef<number | null>(null);
   const captureTimerRef = useRef<NodeJS.Timeout | null>(null);
   const resumeCaptureRef = useRef<(() => void) | null>(null);
+  const fallbackTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   const faceDetected = useSignal(false);
   const faceInBounds = useSignal(false);
   const faceProximity = useSignal<'too-close' | 'too-far' | 'good'>('good');
-  const multipleFaces = useSignal(false);
   const videoAspectRatio = useSignal(16 / 9);
   const faceLandmarks = useSignal<any[]>([]);
   const currentSmileScore = useSignal(0);
@@ -64,6 +64,7 @@ export const useFaceCapture = ({
   const lastSmileTime = useSignal(0);
   const alertTitle = useSignal('');
   const isInitializing = useSignal(true);
+  const captureButtonFallbackEnabled = useSignal(false);
 
   const isCapturing = useSignal(false);
   const isPaused = useSignal(false);
@@ -83,8 +84,7 @@ export const useFaceCapture = ({
     () =>
       faceDetected.value &&
       faceInBounds.value &&
-      faceProximity.value === 'good' &&
-      !multipleFaces.value,
+      faceProximity.value === 'good',
   );
 
   const updateAlertImmediate = (messageKey: MessageKey | null) => {
@@ -101,6 +101,19 @@ export const useFaceCapture = ({
     }, 600),
   ).current;
 
+  const CAPTURE_FALLBACK_TIMEOUT_MS = 10000;
+
+  const startFallbackTimer = () => {
+    if (fallbackTimerRef.current) {
+      clearTimeout(fallbackTimerRef.current);
+    }
+    fallbackTimerRef.current = setTimeout(() => {
+      if (!isReadyToCapture.value) {
+        captureButtonFallbackEnabled.value = true;
+      }
+    }, CAPTURE_FALLBACK_TIMEOUT_MS);
+  };
+
   const initializeFaceLandmarker = async () => {
     try {
       const isAlreadyLoaded =
@@ -114,10 +127,15 @@ export const useFaceCapture = ({
 
       faceLandmarkerRef.current = await getMediapipeInstance();
       isInitializing.value = false;
+      startFallbackTimer();
     } catch (error) {
       console.error('Failed to initialize MediaPipe:', error);
       isInitializing.value = false;
+      // MediaPipe failed — start the fallback timer so the button eventually
+      // enables and the user isn't permanently stuck.
+      startFallbackTimer();
     }
+    startFallbackTimer();
   };
 
   const setupCanvas = () => {
@@ -165,8 +183,6 @@ export const useFaceCapture = ({
   const updateAlerts = () => {
     if (isInitializing.value) {
       updateAlertImmediate('initializing');
-    } else if (multipleFaces.value) {
-      updateAlert('multiple-faces');
     } else if (!faceDetected.value) {
       updateAlert('no-face');
     } else if (faceProximity.value === 'too-close') {
@@ -260,13 +276,12 @@ export const useFaceCapture = ({
 
       // Check number of faces
       const numFaces = results.faceLandmarks ? results.faceLandmarks.length : 0;
-      multipleFaces.value = numFaces > 1;
 
       // Check if face is detected
       const hasFace =
         results.faceBlendshapes &&
         results.faceBlendshapes.length > 0 &&
-        numFaces === 1;
+        numFaces >= 1;
       faceDetected.value = hasFace;
 
       if (hasFace && results.faceLandmarks) {
@@ -322,7 +337,7 @@ export const useFaceCapture = ({
           }
         }
       } else {
-        // No face detected or multiple faces - reset values
+        // No face detected - reset values
         currentSmileScore.value = 0;
         currentFaceSize.value = 0;
         currentMouthOpen.value = 0;
@@ -334,7 +349,6 @@ export const useFaceCapture = ({
     } catch {
       faceDetected.value = false;
       faceInBounds.value = false;
-      multipleFaces.value = false;
       faceProximity.value = 'good';
       currentMouthOpen.value = 0;
 
@@ -417,7 +431,6 @@ export const useFaceCapture = ({
     isPaused.value = true;
 
     if (
-      !multipleFaces.value &&
       faceDetected.value &&
       faceInBounds.value &&
       faceProximity.value === 'good'
@@ -437,11 +450,6 @@ export const useFaceCapture = ({
         return;
       }
 
-      if (multipleFaces.value) {
-        pauseCapture();
-        return;
-      }
-
       if (!faceDetected.value) {
         return;
       }
@@ -474,8 +482,7 @@ export const useFaceCapture = ({
     if (
       faceDetected.value &&
       faceProximity.value === 'good' &&
-      faceInBounds.value &&
-      !multipleFaces.value
+      faceInBounds.value
     ) {
       const isInSmileZone = capturesTaken.value >= smileCheckpoint.value;
       if (isInSmileZone) {
@@ -556,6 +563,9 @@ export const useFaceCapture = ({
     if (captureTimerRef.current) {
       clearInterval(captureTimerRef.current);
     }
+    if (fallbackTimerRef.current) {
+      clearTimeout(fallbackTimerRef.current);
+    }
     stopDetectionLoop();
     updateAlert.cancel();
   };
@@ -564,12 +574,16 @@ export const useFaceCapture = ({
     faceDetected.value = false;
     faceInBounds.value = false;
     faceProximity.value = 'good';
-    multipleFaces.value = false;
     faceLandmarks.value = [];
     currentSmileScore.value = 0;
     currentFaceSize.value = 0;
     currentMouthOpen.value = 0;
     lastSmileTime.value = 0;
+    captureButtonFallbackEnabled.value = false;
+    if (fallbackTimerRef.current) {
+      clearTimeout(fallbackTimerRef.current);
+      fallbackTimerRef.current = null;
+    }
 
     if (canvasRef.current) {
       clearCanvas(canvasRef.current);
@@ -580,7 +594,6 @@ export const useFaceCapture = ({
     faceDetected,
     faceInBounds,
     faceProximity,
-    multipleFaces,
     videoAspectRatio,
     faceLandmarks,
     currentSmileScore,
@@ -590,6 +603,7 @@ export const useFaceCapture = ({
     alertTitle,
     isInitializing,
     isReadyToCapture,
+    captureButtonFallbackEnabled,
 
     isCapturing,
     isPaused,

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

@@ -1,7 +1,6 @@
 import { t } from '../../../../../domain/localisation';
 
 export const MESSAGES = {
-  'multiple-faces': () => t('selfie.smart.alert.multipleFaces'),
   'no-face': () => t('selfie.smart.alert.noFace'),
   'out-of-bounds': () => t('selfie.smart.alert.outOfBounds'),
   'too-close': () => t('selfie.smart.alert.tooClose'),

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

@@ -1,7 +1,65 @@
 import { FaceLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';
 
-//  SM-S931 (for the standard S25), SM-S936 (for the S25+), and SM-S938 (for the S25 Ultra)
-const EXCLUDED_DEVICES = ['sm-s936', 'sm-s931', 'sm-s938'];
+const EXCLUDED_GPUS = [
+  'adreno-830',
+  'adreno-8xx',
+  'adreno-9xx',
+  'adreno-840',
+  'adreno-810',
+];
+
+const normalizeGpuText = (value: string): string =>
+  value
+    .toLowerCase()
+    .replace(/\(tm\)|\btm\b/g, '')
+    .replace(/[^a-z0-9]/g, '');
+
+const matchesExcludedGpu = (value: string): boolean => {
+  const normalizedValue = normalizeGpuText(value);
+
+  return EXCLUDED_GPUS.some((gpuPattern) => {
+    const normalizedPattern = normalizeGpuText(gpuPattern);
+
+    if (normalizedPattern.endsWith('xx')) {
+      const familyPrefix = normalizedPattern.slice(0, -2);
+      return new RegExp(`${familyPrefix}\\d{2}`).test(normalizedValue);
+    }
+
+    return normalizedValue.includes(normalizedPattern);
+  });
+};
+
+/**
+ * @description Gets the GPU renderer string using WebGL debug info extension.
+ * @returns {string | null} The GPU renderer string or null if unavailable.
+ */
+const getGpuRenderer = (): string | null => {
+  try {
+    const canvas = document.createElement('canvas');
+    const gl =
+      canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+    if (!gl || !(gl instanceof WebGLRenderingContext)) return null;
+
+    const ext = gl.getExtension('WEBGL_debug_renderer_info');
+    if (!ext) return null;
+
+    return gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) as string | null;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * @description Checks if the GPU renderer matches any excluded GPU.
+ * @param {string | null} [renderer] Optional GPU renderer string to use. If not provided, it will be fetched via WebGL.
+ * @returns {boolean} True if the GPU is excluded.
+ */
+const isExcludedGpuFromWebGL = (renderer?: string | null): boolean => {
+  const rendererString = (renderer ?? getGpuRenderer())?.toLowerCase() ?? '';
+  if (!rendererString) return false;
+
+  return matchesExcludedGpu(rendererString);
+};
 
 declare global {
   interface Window {
@@ -14,38 +72,70 @@ declare global {
 }
 
 /**
- * @description Detects if the user is on an excluded device using the modern and more accurate
- * User-Agent Client Hints (UA-CH) API to get the device model.
- * @returns {Promise<boolean>} - True if the device model is in the exclusion list.
+ * @description Reads system architecture hints from User-Agent Client Hints.
+ * @returns {Promise<string | null>} Lower-cased hint string or null when hints are unavailable.
  */
-const isExcludedDeviceUsingHints = async (): Promise<boolean> => {
-  // Check for User-Agent Client Hints API support
-  if (typeof navigator !== 'undefined' && navigator.userAgentData) {
-    try {
-      // Request the 'model' high-entropy value and destructure it directly
-      const { model } = await navigator.userAgentData.getHighEntropyValues([
-        'model',
-      ]);
+const getSystemArchitectureHints = async (): Promise<string | null> => {
+  if (typeof navigator === 'undefined' || !(navigator as any).userAgentData) {
+    return null;
+  }
 
-      if (!model) {
-        return false;
-      }
+  try {
+    const hints = await (navigator as any).userAgentData.getHighEntropyValues([
+      'architecture',
+      'model',
+      'platform',
+      'platformVersion',
+      'fullVersionList',
+    ]);
+
+    return JSON.stringify(hints).toLowerCase();
+  } catch (error) {
+    console.warn('UA-CH architecture hints fetch failed.', error);
+    return null;
+  }
+};
+
+/**
+ * @description Determines the MediaPipe delegate based on WebGL renderer info and UA-CH hints.
+ * Uses WebGL renderer as primary detection, UA-CH hints as secondary.
+ * @returns {Promise<'CPU' | 'GPU'>} CPU when excluded GPU is detected; otherwise GPU.
+ */
+const getDelegateFromGpuDetection = async (): Promise<'CPU' | 'GPU'> => {
+  const renderer = getGpuRenderer();
+  const hasWebGlRendererInfo = !!renderer;
+
+  // Primary check: WebGL renderer info (most reliable for GPU detection)
+  if (isExcludedGpuFromWebGL(renderer)) {
+    console.info(`[SmileID] Excluded GPU via WebGL: ${renderer}. Using CPU.`);
+    return 'CPU';
+  }
 
-      const lowerModel = model.toLowerCase();
+  // Secondary check: UA-CH hints (may contain GPU info in some browsers)
+  const hintString = await getSystemArchitectureHints();
+  const hasUaHints = !!hintString;
 
-      // Check if the extracted model string matches any of the excluded prefixes
-      return EXCLUDED_DEVICES.some((prefix) => lowerModel.includes(prefix));
-    } catch (error) {
-      // Log the error but fail safe (return false)
-      console.warn(
-        'UA-CH model fetch failed, falling back to UA string check.',
-        error,
-      );
-      return false;
+  if (hintString) {
+    const hasExcludedGpuInHints = matchesExcludedGpu(hintString);
+
+    if (hasExcludedGpuInHints) {
+      console.info(`[SmileID] Excluded GPU via UA-CH hints. Using CPU.`);
+      return 'CPU';
     }
   }
-  // If API is not supported, return false (rely on synchronous isExcludedDevice)
-  return false;
+
+  if (!hasWebGlRendererInfo && !hasUaHints) {
+    console.info(
+      '[SmileID] No WebGL renderer or UA-CH hints available. Using CPU.',
+    );
+    return 'CPU';
+  }
+
+  // Default to GPU when no exclusion is detected
+  console.info(
+    `[SmileID] No excluded GPU detected. WebGL renderer: ${renderer ?? 'unavailable'}. Using GPU.`,
+  );
+  return 'GPU';
 };
 
 // this was added because devices (mostly older) that do not support FP16 will fail to load the model.
@@ -91,12 +181,14 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
         'https://web-models.smileidentity.com/mediapipe-tasks-vision-wasm',
       );
 
-      const isExcluded = await isExcludedDeviceUsingHints();
+      const gpuDelegate = await getDelegateFromGpuDetection();
+      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: isExcluded || !hasFP16Support() ? 'CPU' : 'GPU',
+          delegate,
         },
         outputFaceBlendshapes: true,
         runningMode: 'VIDEO',
@@ -116,3 +208,8 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
 
   return mediapipeGlobal.loading;
 };
+
+export const __testUtils = {
+  matchesExcludedGpu,
+  getDelegateFromGpuDetection,
+};

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

@@ -1,12 +1,12 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.0.2",
+  "version": "11.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@smileid/signature-pad",
-      "version": "11.0.2",
+      "version": "11.3.0",
       "dependencies": {
         "signature_pad": "^5.0.2"
       },
@@ -224,21 +224,23 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^2.0.2"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -2073,10 +2075,11 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },

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

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

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.3.0",
+  "version": "11.4.0",
+  "private": false,
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
   "types": "dist/types/main.d.ts",