@opexa/portal-components 0.0.970 → 0.0.971

package/dist/components/shared/SelfieImageField/SelfieImageField.client.js

@@ -95,7 +95,7 @@ function Camera() {
                                             context.mutation.mutate({ file });
                                             context.disclosure.setOpen(false);
                                         }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                            context.camera.reset();
+                                            context.camera.reopen();
                                         }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
 }
 /*

package/dist/components/shared/SelfieImageField/SelfieImageField.js

@@ -1,11 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import dynamic from 'next/dynamic';
-import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
-const Component = dynamic(() => import('./SelfieImageField.client.js').then((mod) => mod.SelfieImageField__client), {
-    ssr: false,
-    loading: () => (_jsx("div", { className: "flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border border-border-primary bg-bg-primary", children: _jsx(Spinner02Icon, { className: "size-8 text-text-quinary" }) })),
-});
+import { SelfieImageField__client } from './SelfieImageField.client.js';
 export function SelfieImageField(props) {
-    return _jsx(Component, { ...props });
+    return _jsx(SelfieImageField__client, { ...props });
 }

package/dist/components/shared/SelfieImageField/useSelfieImageField.d.ts

@@ -20,4 +20,5 @@ export declare function useSelfieImageField(props: UseSelfieImageFieldProps): {
     guideRef: import("react").RefObject<HTMLDivElement | null>;
     maskRef: import("react").RefObject<HTMLDivElement | null>;
     faceFound: boolean;
+    detectorReady: boolean;
 };

package/dist/components/shared/SelfieImageField/useSelfieImageField.js

@@ -114,6 +114,19 @@ export function useSelfieImageField(props) {
         },
     });
     const [faceFound, setFaceFound] = useState(false);
+    const [detectorReady, setDetectorReady] = useState(false);
+    // Preload detector when disclosure opens
+    useEffect(() => {
+        if (disclosure.open) {
+            setDetectorReady(false);
+            getFaceDetector()
+                .then(() => setDetectorReady(true))
+                .catch((e) => {
+                console.error('Failed to load face detector:', e);
+                setDetectorReady(false);
+            });
+        }
+    }, [disclosure.open]);
     // Reset faceFound when camera is reset or reopened
     // biome-ignore lint/correctness/useExhaustiveDependencies: Reset faceFound on state change
     useEffect(() => {
@@ -123,9 +136,14 @@ export function useSelfieImageField(props) {
         if (!camera.videoRef.current || !guideRef.current) {
             return setFaceFound(false);
         }
-        setFaceFound(await validateFaceFromVideo(camera.videoRef.current, guideRef.current));
-    }, disclosure.open && !camera.data && !camera.error && !camera.loading
-        ? 300
+        const found = await validateFaceFromVideo(camera.videoRef.current, guideRef.current);
+        setFaceFound(found);
+    }, disclosure.open &&
+        detectorReady &&
+        !camera.data &&
+        !camera.error &&
+        !camera.loading
+        ? 100
         : null);
     return {
         field,
@@ -139,13 +157,13 @@ export function useSelfieImageField(props) {
         guideRef,
         maskRef,
         faceFound,
+        detectorReady,
     };
 }
-let __image_face_detector__ = null;
-let __video_face_detector__ = null;
+let __face_detector__ = null;
 let __vision__ = null;
-let __image_face_detector_promise__ = null;
-let __video_face_detector_promise__ = null;
+let __current_running_mode__ = 'IMAGE';
+let __face_detector_promise__ = null;
 let __vision_promise__ = null;
 async function getVision() {
     if (__vision__)
@@ -165,12 +183,12 @@ async function getVision() {
     })();
     return __vision_promise__;
 }
-async function getImageFaceDetector() {
-    if (__image_face_detector__)
-        return __image_face_detector__;
-    if (__image_face_detector_promise__)
-        return __image_face_detector_promise__;
-    __image_face_detector_promise__ = (async () => {
+async function getFaceDetector() {
+    if (__face_detector__)
+        return __face_detector__;
+    if (__face_detector_promise__)
+        return __face_detector_promise__;
+    __face_detector_promise__ = (async () => {
         try {
             const vision = await getVision();
             const detector = await FaceDetector.createFromOptions(vision, {
@@ -181,44 +199,28 @@ async function getImageFaceDetector() {
                     modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
                 },
             });
-            __image_face_detector__ = detector;
+            __face_detector__ = detector;
+            __current_running_mode__ = 'IMAGE';
             return detector;
         }
         catch (e) {
-            __image_face_detector_promise__ = null;
+            __face_detector_promise__ = null;
             throw e;
         }
     })();
-    return __image_face_detector_promise__;
+    return __face_detector_promise__;
 }
-async function getVideoFaceDetector() {
-    if (__video_face_detector__)
-        return __video_face_detector__;
-    if (__video_face_detector_promise__)
-        return __video_face_detector_promise__;
-    __video_face_detector_promise__ = (async () => {
-        try {
-            const vision = await FilesetResolver.forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm');
-            const detector = await FaceDetector.createFromOptions(vision, {
-                baseOptions: {
-                    modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
-                    delegate: 'GPU',
-                },
-                runningMode: 'VIDEO',
-            });
-            __video_face_detector__ = detector;
-            return detector;
-        }
-        catch (e) {
-            __video_face_detector_promise__ = null;
-            throw e;
-        }
-    })();
-    return __video_face_detector_promise__;
+async function ensureRunningMode(mode) {
+    const detector = await getFaceDetector();
+    if (__current_running_mode__ !== mode) {
+        await detector.setOptions({ runningMode: mode });
+        __current_running_mode__ = mode;
+    }
+    return detector;
 }
 async function validateFaceFromImage(image) {
     try {
-        const detector = await getImageFaceDetector();
+        const detector = await ensureRunningMode('IMAGE');
         const result = detector.detect(image);
         return result.detections.length > 0;
     }
@@ -231,7 +233,7 @@ async function validateFaceFromVideo(video, guide) {
     if (video.readyState < 2)
         return false;
     try {
-        const detector = await getVideoFaceDetector();
+        const detector = await ensureRunningMode('VIDEO');
         const result = detector.detectForVideo(video, performance.now());
         const detection = result.detections.at(0);
         if (!detection)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.970",
+	"version": "0.0.971",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",