@davi-ai/retorik-framework 4.0.0 → 4.0.2

package/dist/ThreeJsWrapper.cb253b3a.js

@@ -0,0 +1,649 @@
+import {jsxs as $313pz$jsxs, jsx as $313pz$jsx} from "react/jsx-runtime";
+import $313pz$react, {useState as $313pz$useState, useMemo as $313pz$useMemo, useEffect as $313pz$useEffect, useRef as $313pz$useRef} from "react";
+import {CreationTool as $313pz$CreationTool, Object3D as $313pz$Object3D, addViseme as $313pz$addViseme, setVisemes as $313pz$setVisemes, setCharacterState as $313pz$setCharacterState, CharacterState as $313pz$CharacterState, flushLipSyncData as $313pz$flushLipSyncData, Character as $313pz$Character, presets as $313pz$presets, getCameraPosition as $313pz$getCameraPosition, getCharacterHeight as $313pz$getCharacterHeight, setLookAtCamera as $313pz$setLookAtCamera, setShowFirstTarget as $313pz$setShowFirstTarget} from "@davi-ai/react-bodyengine-three";
+import {useDispatch as $313pz$useDispatch, useSelector as $313pz$useSelector} from "react-redux";
+import {FilesetResolver as $313pz$FilesetResolver, FaceDetector as $313pz$FaceDetector} from "@mediapipe/tasks-vision";
+
+
+function $parcel$defineInteropFlag(a) {
+  Object.defineProperty(a, '__esModule', {value: true, configurable: true});
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+      var $parcel$global = globalThis;
+    var parcelRequire = $parcel$global["parcelRequirea39d"];
+var parcelRegister = parcelRequire.register;
+parcelRegister("4UN3k", function(module, exports) {
+
+$parcel$defineInteropFlag(module.exports);
+
+$parcel$export(module.exports, "default", () => $22f0b0bb3c6ec1e7$export$2e2bcd8739ae039);
+
+
+
+
+
+var $8ItUL = parcelRequire("8ItUL");
+
+var $4ucVo = parcelRequire("4ucVo");
+
+var $7MbNn = parcelRequire("7MbNn");
+
+var $gFkoW = parcelRequire("gFkoW");
+const $22f0b0bb3c6ec1e7$var$ThreeJsWrapper = ({ agentData: agentData, visible: visible, height: height, size: size, cameraPreset: cameraPreset, calibration: calibration, centered: centered })=>{
+    const dispatch = (0, $313pz$useDispatch)();
+    const gpuData = (0, $313pz$useSelector)((state)=>state.retorikReducer.gpuData);
+    const speaking = (0, $313pz$useSelector)((state)=>state.speechReducer.speaking);
+    const loaderClosed = (0, $313pz$useSelector)((state)=>state.retorikReducer.loaderClosed);
+    const recognitionState = (0, $313pz$useSelector)((state)=>state.speechReducer.activeRecognitionState);
+    const lastRecognitionInterim = (0, $313pz$useSelector)((state)=>state.speechReducer.lastRecognitionInterim);
+    const singleViseme = (0, $313pz$useSelector)((state)=>state.speechReducer.singleVisemeAdded);
+    const multiVisemes = (0, $313pz$useSelector)((state)=>state.speechReducer.multiVisemesAdded);
+    const streamingQueue = (0, $313pz$useSelector)((state)=>state.speechReducer.streamingQueue);
+    const characterLoaded = (0, $313pz$useSelector)((state)=>state.viewReducer.characterLoaded);
+    const isMobile = (0, $313pz$useSelector)((state)=>state.viewReducer.isMobile);
+    const [targets, setTargets] = (0, $313pz$useState)([]);
+    const [dynamicData, setDynamicData] = (0, $313pz$useState)(undefined);
+    const [openCalibration, setOpenCalibration] = (0, $313pz$useState)(false);
+    /**
+   * Use model's source to get the right loader. Default to avaturn loader
+   */ const type = (0, $313pz$useMemo)(()=>{
+        if (agentData.source) switch(agentData.source.toLowerCase()){
+            case (0, $4ucVo.Source3DEngine).avatarsdk:
+            case (0, $4ucVo.Source3DEngine).avatarsdkbis:
+                return (0, $313pz$CreationTool).avatarsdk;
+            case (0, $4ucVo.Source3DEngine).cc3:
+            case (0, $4ucVo.Source3DEngine).cc4:
+                return (0, $313pz$CreationTool).cc3;
+            case (0, $4ucVo.Source3DEngine).rpm:
+            case (0, $4ucVo.Source3DEngine).readyplayerme:
+                return (0, $313pz$CreationTool).rpm;
+            case (0, $4ucVo.Source3DEngine).avaturn:
+            default:
+                return (0, $313pz$CreationTool).avaturn;
+        }
+        return (0, $313pz$CreationTool).avaturn;
+    }, [
+        agentData
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        if (!calibration?.static?.enabled && !calibration?.dynamic?.enabled || isMobile) dispatch((0, $8ItUL.storeActions).view.setCalibrationCompleted(true));
+    }, [
+        calibration,
+        isMobile
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        // Check if we should open the calibration screen or not
+        if ((calibration?.static?.enabled || calibration?.dynamic?.enabled) && !isMobile) {
+            // If there are some static data in the props or the local storage, we can directly set the targets without opening the calibration screen
+            if (calibration?.static?.enabled && calibration.static.staticTarget) {
+                const o = new (0, $313pz$Object3D)();
+                o.position.set(calibration.static.staticTarget.x, calibration.static.staticTarget.y, calibration.static.staticTarget.z);
+                setTargets([
+                    o
+                ]);
+                setOpenCalibration(false);
+                dispatch((0, $8ItUL.storeActions).view.setCalibrationCompleted(true));
+            } else if (calibration?.static?.enabled && calibration.static.loadStaticTargetFromLocalStorage && localStorage.getItem('Retorik.Framework.Static.Target')) {
+                const calibrationData = JSON.parse(localStorage.getItem('Retorik.Framework.Static.Target') || '{}');
+                const o = new (0, $313pz$Object3D)();
+                o.position.set(calibrationData.x, calibrationData.y, calibrationData.z);
+                setTargets([
+                    o
+                ]);
+                setOpenCalibration(false);
+                dispatch((0, $8ItUL.storeActions).view.setCalibrationCompleted(true));
+            } else if (calibration.dynamic?.enabled && calibration.dynamic.dynamicData) {
+                // Check if all the mandatory dynamic data are in the props
+                if (calibration.dynamic.dynamicData.webcamHeight && calibration.dynamic.dynamicData.ratioPixelToCentimeter && calibration.dynamic.dynamicData.deltaAgentHeightAgentWorldHeightInCentimeters && calibration.dynamic.dynamicData.distanceFromAgentToCameraInCentimeters) setDynamicData({
+                    ...calibration.dynamic.dynamicData,
+                    cameraRotationInDegrees: calibration.dynamic.dynamicData.cameraRotationInDegrees || 0
+                });
+                setOpenCalibration(true);
+            } else if (calibration.dynamic?.enabled && calibration.dynamic.loadDynamicDataFromLocalStorage && localStorage.getItem('Retorik.Framework.Dynamic.Data')) {
+                // Check if the local storage data is complete
+                const calibrationData = JSON.parse(localStorage.getItem('Retorik.Framework.Dynamic.Data') || '{}');
+                if (calibrationData.webcamHeight && calibrationData.ratioPixelToCentimeter && calibrationData.deltaAgentHeightAgentWorldHeightInCentimeters && calibrationData.distanceFromAgentToCameraInCentimeters) setDynamicData({
+                    ...calibrationData,
+                    cameraRotationInDegrees: calibrationData.cameraRotationInDegrees || 0
+                });
+                setOpenCalibration(true);
+            } else setOpenCalibration(true);
+        } else {
+            setOpenCalibration(false);
+            dispatch((0, $8ItUL.storeActions).view.setCalibrationCompleted(true));
+        }
+    }, [
+        calibration,
+        isMobile
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        singleViseme && (0, $313pz$addViseme)(singleViseme);
+    }, [
+        singleViseme
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        multiVisemes.length && (0, $313pz$setVisemes)(multiVisemes);
+    }, [
+        multiVisemes
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        if (speaking || streamingQueue.length) (0, $313pz$setCharacterState)((0, $313pz$CharacterState).speaking);
+        else if (recognitionState === (0, $4ucVo.RecognitionState).Closed) (0, $313pz$setCharacterState)((0, $313pz$CharacterState).idle);
+        else if (lastRecognitionInterim) (0, $313pz$setCharacterState)((0, $313pz$CharacterState).listening);
+        else (0, $313pz$setCharacterState)((0, $313pz$CharacterState).waiting);
+    }, [
+        speaking,
+        recognitionState,
+        lastRecognitionInterim,
+        streamingQueue
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        !speaking && (0, $313pz$flushLipSyncData)();
+    }, [
+        speaking
+    ]);
+    return /*#__PURE__*/ (0, $313pz$jsxs)((0, $313pz$react).Fragment, {
+        children: [
+            /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                style: {
+                    height: size || '100%',
+                    paddingTop: height || 0,
+                    visibility: characterLoaded && visible ? 'visible' : 'hidden'
+                },
+                children: type && /*#__PURE__*/ (0, $313pz$jsx)((0, $313pz$Character), {
+                    url: agentData.url,
+                    type: type,
+                    animationsUrl: agentData?.animationsUrl || 'https://cdn.retorik.ai/bodyengine-three/animations/cc4/female/standing/',
+                    gender: agentData?.gender === 'male' ? 'male' : 'female',
+                    onLoadingCompleted: ()=>dispatch((0, $8ItUL.storeActions).view.setCharacterLoaded(true)),
+                    camera: (0, $313pz$presets)[cameraPreset || 'default'],
+                    targets: targets,
+                    autoLookAt: true,
+                    detectGpuData: gpuData,
+                    license: "fake-license"
+                })
+            }),
+            !characterLoaded && /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                className: "rf-absolute rf-top-0 rf-left-0 rf-w-full rf-h-full rf-flex rf-justify-center rf-items-center",
+                children: /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                    className: "rf-w-1/4 rf-aspect-square",
+                    children: /*#__PURE__*/ (0, $313pz$jsx)((0, $7MbNn.default), {})
+                })
+            }),
+            openCalibration && loaderClosed && /*#__PURE__*/ (0, $313pz$jsx)((0, $gFkoW.default), {
+                centered: centered,
+                staticCalibrationEnabled: !!calibration?.static?.enabled,
+                dynamicCalibrationEnabled: !!calibration?.dynamic?.enabled,
+                setTargets: (targets)=>setTargets(targets),
+                dynamicData: dynamicData
+            })
+        ]
+    });
+};
+var $22f0b0bb3c6ec1e7$export$2e2bcd8739ae039 = $22f0b0bb3c6ec1e7$var$ThreeJsWrapper;
+
+});
+parcelRegister("gFkoW", function(module, exports) {
+
+$parcel$export(module.exports, "default", () => $c6350b57d46149f8$export$2e2bcd8739ae039);
+
+
+
+
+
+var $8ItUL = parcelRequire("8ItUL");
+
+var $dJb7j = parcelRequire("dJb7j");
+var $c6350b57d46149f8$var$CalibrationMode = /*#__PURE__*/ function(CalibrationMode) {
+    CalibrationMode[CalibrationMode["none"] = 1] = "none";
+    CalibrationMode[CalibrationMode["static"] = 2] = "static";
+    CalibrationMode[CalibrationMode["dynamic"] = 3] = "dynamic";
+    return CalibrationMode;
+}($c6350b57d46149f8$var$CalibrationMode || {});
+const $c6350b57d46149f8$var$CalibrationScreen = ({ centered: centered, staticCalibrationEnabled: staticCalibrationEnabled, dynamicCalibrationEnabled: dynamicCalibrationEnabled, dynamicData: dynamicData, setTargets: setTargets })=>{
+    const dispatch = (0, $313pz$useDispatch)();
+    const cameraPosition = (0, $313pz$getCameraPosition)();
+    const characterHeight = (0, $313pz$getCharacterHeight)();
+    const characterLoaded = (0, $313pz$useSelector)((state)=>state.viewReducer.characterLoaded);
+    const calibrationCompleted = (0, $313pz$useSelector)((state)=>state.viewReducer.calibrationCompleted);
+    const [calibrationMode, setCalibrationMode] = (0, $313pz$useState)(dynamicData ? 3 : 1);
+    const [distanceFromDevice, setDistanceFromDevice] = (0, $313pz$useState)(dynamicData?.distanceFromAgentToCameraInCentimeters || 0);
+    const [webcamRotation, setWebcamRotation] = (0, $313pz$useState)(0);
+    const [agentEyesHeightOnScreen, setAgentEyesHeightOnScreen] = (0, $313pz$useState)(0);
+    const [worldDistancePerDegree, setWorldDistancePerDegree] = (0, $313pz$useState)(0);
+    const [currentAngleInDegrees, setCurrentAngleInDegrees] = (0, $313pz$useState)(0);
+    const [cameraX, setCameraX] = (0, $313pz$useState)(0);
+    const [cameraY, setCameraY] = (0, $313pz$useState)(0);
+    const [cameraZ, setCameraZ] = (0, $313pz$useState)(0);
+    const cameraXRef = (0, $313pz$useRef)(0);
+    const cameraYRef = (0, $313pz$useRef)(0);
+    const cameraZRef = (0, $313pz$useRef)(0);
+    const currentAngleInDegreesRef = (0, $313pz$useRef)(0);
+    const webcamHeightRef = (0, $313pz$useRef)(dynamicData?.webcamHeight || 0);
+    const userEyesHeightRef = (0, $313pz$useRef)(0);
+    const agentEyesHeightRef = (0, $313pz$useRef)(0);
+    const distanceFromDeviceRef = (0, $313pz$useRef)(0);
+    const webcamRotatedRef = (0, $313pz$useRef)(dynamicData?.cameraRotationInDegrees || 0);
+    const deltaAgentHeightAgentWorldHeightInCentimetersRef = (0, $313pz$useRef)(dynamicData?.deltaAgentHeightAgentWorldHeightInCentimeters || 0);
+    const ratioPixelToCentimeterRef = (0, $313pz$useRef)(dynamicData?.ratioPixelToCentimeter || 0);
+    const calibrationCompletedRef = (0, $313pz$useRef)(calibrationCompleted);
+    const counterRef = (0, $313pz$useRef)(0);
+    (0, $313pz$useEffect)(()=>{
+        // If dynamic data are given, let's validate immediately to set calibratoin as completed
+        dynamicData && handleValidate();
+    }, []);
+    (0, $313pz$useEffect)(()=>{
+        characterLoaded && !dynamicData && (0, $313pz$setLookAtCamera)(true);
+        return ()=>{
+            (0, $313pz$setLookAtCamera)(false);
+        };
+    }, [
+        characterLoaded
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        if (worldDistancePerDegree && !dynamicData) {
+            const o = new (0, $313pz$Object3D)();
+            o.position.set(cameraX, cameraY + currentAngleInDegrees * worldDistancePerDegree, Math.max(cameraZ / 5, 0.3));
+            setTargets([
+                o
+            ]);
+        }
+    }, [
+        currentAngleInDegrees,
+        worldDistancePerDegree,
+        distanceFromDevice,
+        cameraX,
+        cameraY,
+        cameraZ
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        if (cameraPosition && !(cameraPosition.x === 0 && cameraPosition.y === 0)) {
+            const zDistanceCameraPlusUser = cameraPosition.z + distanceFromDevice / 100;
+            setCameraX(cameraPosition.x);
+            setCameraY(cameraPosition.y);
+            setCameraZ(zDistanceCameraPlusUser);
+            cameraXRef.current = cameraPosition.x;
+            cameraYRef.current = cameraPosition.y;
+            cameraZRef.current = zDistanceCameraPlusUser;
+            // Get Y world distance for one degree using tangent. The z distance is divided by 5 with 0.3 at the lowest to show a visible height bar when calibrating
+            setWorldDistancePerDegree(Math.tan(Math.PI / 180) * Math.max(zDistanceCameraPlusUser / 5, 0.3));
+        }
+    }, [
+        cameraPosition,
+        distanceFromDevice
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        if (!dynamicData) characterHeight && agentEyesHeightOnScreen && (deltaAgentHeightAgentWorldHeightInCentimetersRef.current = (characterHeight - characterHeight / 16) * 100 - agentEyesHeightOnScreen);
+    }, [
+        characterHeight,
+        agentEyesHeightOnScreen
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        !dynamicData && (webcamRotatedRef.current = webcamRotation);
+    }, [
+        webcamRotation
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        calibrationCompletedRef.current = calibrationCompleted;
+    }, [
+        calibrationCompleted
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        if (!dynamicData && calibrationMode === 2) (0, $313pz$setShowFirstTarget)(!calibrationCompleted);
+    }, [
+        calibrationMode,
+        calibrationCompleted
+    ]);
+    const handleReset = ()=>{
+        setCurrentAngleInDegrees(0);
+        currentAngleInDegreesRef.current = 0;
+    };
+    const handleValidate = ()=>{
+        (0, $313pz$setLookAtCamera)(false);
+        if (calibrationMode === 2) // In static mode, store the target in local storage to be able to reuse it later and avoid asking the user to calibrate again if the data are valid
+        localStorage.setItem('Retorik.Framework.Static.Target', JSON.stringify({
+            x: cameraX,
+            y: cameraY + currentAngleInDegrees * worldDistancePerDegree,
+            z: cameraZ
+        }));
+        else if (calibrationMode === 3 && ratioPixelToCentimeterRef.current) {
+            localStorage.setItem('Retorik.Framework.Dynamic.Data', JSON.stringify({
+                webcamHeight: webcamHeightRef.current,
+                ratioPixelToCentimeter: ratioPixelToCentimeterRef.current,
+                deltaAgentHeightAgentWorldHeightInCentimeters: deltaAgentHeightAgentWorldHeightInCentimetersRef.current,
+                cameraRotationInDegrees: webcamRotatedRef.current,
+                distanceFromAgentToCameraInCentimeters: distanceFromDeviceRef.current
+            }));
+            setTargets([]);
+        }
+        dispatch((0, $8ItUL.storeActions).view.setCalibrationCompleted(true));
+    };
+    const handleFaceDetected = (detections, width, height)=>{
+        counterRef.current++;
+        if (detections?.length && width && height) {
+            // The detections are inverted in X and Y axis (the origin is the top right corner of the image)
+            const webcamPositionY = webcamRotatedRef.current === 0 ? height / 2 : width / 2;
+            const userPositionY = webcamRotatedRef.current === 0 ? height * (1 - detections[0].keypoints[0].y) : width * (1 - detections[0].keypoints[0].x);
+            if (calibrationCompletedRef.current) // Check if the mandatory data have been filled (webcam / agent / user heights + distance user <-> device)
+            {
+                if (webcamHeightRef.current && ratioPixelToCentimeterRef.current && deltaAgentHeightAgentWorldHeightInCentimetersRef.current !== 0) {
+                    const deltaHeightInPixels = webcamPositionY - userPositionY;
+                    const userEyesHeightInCentimeters = webcamHeightRef.current - deltaHeightInPixels * ratioPixelToCentimeterRef.current;
+                    const targetYInWorldCoordinates = (userEyesHeightInCentimeters + deltaAgentHeightAgentWorldHeightInCentimetersRef.current) / 100;
+                    const o = new (0, $313pz$Object3D)();
+                    o.position.set(cameraXRef.current, targetYInWorldCoordinates, cameraZRef.current);
+                    setTargets([
+                        o
+                    ]);
+                }
+            } else // The detections are inverted in X and Y axis (the origin is the top right corner of the image)
+            if (webcamHeightRef.current && userEyesHeightRef.current && distanceFromDeviceRef.current) {
+                // Get the difference in height between the webcam and the user's eyes in cm, then use the detection to get the same difference in pixels on the webcam's image
+                const deltaHeightInCentimeters = Math.abs(webcamHeightRef.current - userEyesHeightRef.current);
+                const deltaHeightInPixels = Math.abs(webcamPositionY - userPositionY);
+                deltaHeightInPixels && (ratioPixelToCentimeterRef.current = deltaHeightInCentimeters / deltaHeightInPixels);
+            }
+        }
+    };
+    return /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+        id: "retorik-framework-animation-container-calibration",
+        className: `rf-absolute rf-top-0 rf-h-full rf-w-full rf-grid rf-grid-cols-1 rf-grid-rows-1 ${!centered && 'landscape-retorik:rf-translate-x-1/4'}`,
+        children: [
+            calibrationMode === 3 && /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                className: "rf-relative rf-z-1 rf-h-full rf-w-full rf-col-start-1 rf-col-span-1 rf-row-start-1 rf-row-span-1 rf-flex rf-justify-start rf-items-start",
+                children: /*#__PURE__*/ (0, $313pz$jsx)((0, $dJb7j.default), {
+                    detectionThreshold: 0.8,
+                    onFaceDetected: handleFaceDetected,
+                    showThumbnail: !calibrationCompleted,
+                    rotation: webcamRotation
+                })
+            }),
+            !calibrationCompleted && /*#__PURE__*/ (0, $313pz$jsx)((0, $313pz$react).Fragment, {
+                children: calibrationMode === 1 ? /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+                    className: "rf-h-full rf-w-full rf-col-start-1 rf-col-span-1 rf-row-start-1 rf-row-span-1 rf-flex rf-flex-col rf-justify-center rf-items-center rf-gap-4 rf-bg-white rf-bg-opacity-50",
+                    children: [
+                        /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                            className: "rf-text-medium-size-auto",
+                            children: "Choisissez un mode de calibrage :"
+                        }),
+                        /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+                            className: "rf-flex rf-flex-row rf-gap-4",
+                            children: [
+                                staticCalibrationEnabled && /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                                    className: "rf-px-4 rf-py-2 rf-border rf-border-primary rf-rounded-lg rf-bg-primary rf-bg-opacity-50 rf-cursor-pointer",
+                                    onClick: ()=>setCalibrationMode(2),
+                                    children: "STATIQUE"
+                                }),
+                                dynamicCalibrationEnabled && /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                                    className: "rf-px-4 rf-py-2 rf-border rf-border-primary rf-rounded-lg rf-bg-primary rf-bg-opacity-50 rf-cursor-pointer",
+                                    onClick: ()=>setCalibrationMode(3),
+                                    children: "DYNAMIQUE"
+                                })
+                            ]
+                        })
+                    ]
+                }) : /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                    className: "rf-relative rf-h-full rf-w-full rf-col-start-1 rf-col-span-1 rf-row-start-1 rf-row-span-1 rf-flex rf-flex-col rf-justify-center rf-gap-4",
+                    children: calibrationMode === 3 ? /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+                        className: "rf-absolute rf-left-32 rf-flex rf-flex-col rf-justify-center rf-items-center rf-gap-4",
+                        children: [
+                            /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+                                className: "rf-grid rf-grid-cols-2 rf-grid-rows-3 rf-gap-4",
+                                children: [
+                                    /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Hauteur webcam (en cm)"
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsx)("input", {
+                                        type: "number",
+                                        min: 0,
+                                        max: 300,
+                                        onChange: (e)=>{
+                                            webcamHeightRef.current = parseInt(e.target.value);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Votre taille (en cm)"
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsx)("input", {
+                                        type: "number",
+                                        min: 50,
+                                        max: 300,
+                                        onChange: (e)=>{
+                                            // We estimate the height of the user's eyes is 12 cm less than their total height
+                                            userEyesHeightRef.current = parseInt(e.target.value) - 12;
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Hauteur des yeux de l'agent (en cm)"
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsx)("input", {
+                                        type: "number",
+                                        min: 50,
+                                        max: 300,
+                                        onChange: (e)=>{
+                                            setAgentEyesHeightOnScreen(parseInt(e.target.value));
+                                            agentEyesHeightRef.current = parseInt(e.target.value);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Distance utilisateur - borne (en cm)"
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsx)("input", {
+                                        type: "number",
+                                        min: 20,
+                                        max: 100,
+                                        onChange: (e)=>{
+                                            setDistanceFromDevice(parseInt(e.target.value));
+                                            distanceFromDeviceRef.current = parseInt(e.target.value);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Rotation de la webcam (en degr\xe9s)"
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+                                        className: "rf-flex rf-flex-row rf-gap-2",
+                                        children: [
+                                            /*#__PURE__*/ (0, $313pz$jsx)("button", {
+                                                className: `rf-px-2 rf-py-1 rf-border rf-border-primary rf-rounded-lg rf-bg-primary rf-bg-opacity-50 rf-cursor-pointer ${webcamRotation === 0 && 'rf-bg-opacity-100'}`,
+                                                onClick: ()=>setWebcamRotation(0),
+                                                children: "0"
+                                            }),
+                                            /*#__PURE__*/ (0, $313pz$jsx)("button", {
+                                                className: `rf-px-2 rf-py-1 rf-border rf-border-primary rf-rounded-lg rf-bg-primary rf-bg-opacity-50 rf-cursor-pointer ${webcamRotation === 90 && 'rf-bg-opacity-100'}`,
+                                                onClick: ()=>setWebcamRotation(90),
+                                                children: "90"
+                                            }),
+                                            /*#__PURE__*/ (0, $313pz$jsx)("button", {
+                                                className: `rf-px-2 rf-py-1 rf-border rf-border-primary rf-rounded-lg rf-bg-primary rf-bg-opacity-50 rf-cursor-pointer ${webcamRotation === -90 && 'rf-bg-opacity-100'}`,
+                                                onClick: ()=>setWebcamRotation(-90),
+                                                children: "-90"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                                className: "rf-h-16 rf-w-16 rf-flex rf-justify-center rf-items-center rf-bg-white rf-border rf-border-black rf-rounded-lg hover: rf-cursor-pointer",
+                                onClick: handleValidate,
+                                children: "Done"
+                            })
+                        ]
+                    }) : /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+                        className: "rf-ml-4 rf-flex rf-flex-col rf-gap-4",
+                        children: [
+                            /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+                                className: "rf-flex rf-flex-row rf-items-center rf-gap-4",
+                                children: [
+                                    /*#__PURE__*/ (0, $313pz$jsx)("input", {
+                                        type: "range",
+                                        min: -25,
+                                        max: 25,
+                                        step: 1,
+                                        value: currentAngleInDegrees,
+                                        onChange: (e)=>{
+                                            const val = parseInt(e.target.value);
+                                            setCurrentAngleInDegrees(val);
+                                            currentAngleInDegreesRef.current = val;
+                                        },
+                                        className: "rf-range-vertical rf-w-8 rf-h-80 rf-appearance-none rf-border rf-border-black rf-rounded-lg rf-cursor-pointer",
+                                        style: {
+                                            writingMode: 'vertical-lr',
+                                            direction: 'rtl'
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+                                        className: "rf-w-fit rf-p-4 rf-flex rf-flex-col rf-justify-center rf-gap-2 rf-bg-white rf-border rf-border-black rf-rounded-lg",
+                                        children: [
+                                            /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                                children: "Position actuelle de la cible : "
+                                            }),
+                                            /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                                children: `x: ${cameraX}`
+                                            }),
+                                            /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                                children: `y: ${cameraY + (currentAngleInDegrees ? currentAngleInDegrees * worldDistancePerDegree : 0)}`
+                                            }),
+                                            /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                                children: `z: ${Math.max(cameraZ / 5, 0.3)}`
+                                            }),
+                                            /*#__PURE__*/ (0, $313pz$jsx)("p", {
+                                                children: `angle: ${currentAngleInDegrees}\xb0`
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $313pz$jsxs)("div", {
+                                className: "rf-flex rf-flex-row rf-gap-2",
+                                children: [
+                                    /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                                        className: "rf-h-10 rf-px-4 rf-flex rf-justify-center rf-items-center rf-bg-white rf-border rf-border-black rf-rounded-lg rf-cursor-pointer",
+                                        onClick: ()=>handleReset(),
+                                        children: "Reset"
+                                    }),
+                                    /*#__PURE__*/ (0, $313pz$jsx)("div", {
+                                        className: "rf-h-10 rf-px-4 rf-flex rf-justify-center rf-items-center rf-bg-white rf-border rf-border-black rf-rounded-lg rf-cursor-pointer",
+                                        onClick: handleValidate,
+                                        children: "Done"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+var $c6350b57d46149f8$export$2e2bcd8739ae039 = $c6350b57d46149f8$var$CalibrationScreen;
+
+});
+parcelRegister("dJb7j", function(module, exports) {
+
+$parcel$export(module.exports, "default", () => $741aef3293d0db11$export$2e2bcd8739ae039);
+
+
+
+const $741aef3293d0db11$var$runningMode = 'VIDEO';
+let $741aef3293d0db11$var$lastVideoTime = -1;
+const $741aef3293d0db11$var$defaultConstraints = {
+    video: {
+        facingMode: 'user'
+    }
+};
+const $741aef3293d0db11$var$FaceDetector = ({ detectionThreshold: detectionThreshold, onFaceDetected: onFaceDetected, showThumbnail: showThumbnail, rotation: rotation })=>{
+    const [webcamWidth, setWebcamWidth] = (0, $313pz$useState)(0);
+    const [webcamHeight, setWebcamHeight] = (0, $313pz$useState)(0);
+    const [faceDetector, setFaceDetector] = (0, $313pz$useState)();
+    const videoRef = (0, $313pz$useRef)(null);
+    const rotationRef = (0, $313pz$useRef)(rotation || 0);
+    (0, $313pz$useEffect)(()=>{
+        rotationRef.current = rotation || 0;
+    }, [
+        rotation
+    ]);
+    (0, $313pz$useEffect)(()=>{
+        const createfaceDetector = async ()=>{
+            const vision = await (0, $313pz$FilesetResolver).forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm');
+            const newFaceDetector = await (0, $313pz$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: $741aef3293d0db11$var$runningMode
+            });
+            newFaceDetector && setFaceDetector(newFaceDetector);
+        };
+        const initializefaceDetector = async ()=>{
+            navigator.mediaDevices.getUserMedia($741aef3293d0db11$var$defaultConstraints).then((display)=>{
+                const settings = display.getVideoTracks()[0].getSettings();
+                setWebcamWidth(settings.width || 0);
+                setWebcamHeight(settings.height || 0);
+                createfaceDetector();
+            }).catch((error)=>console.warn('Retorik Framework > an error occured when trying to use the webcam : ', error));
+        };
+        initializefaceDetector();
+    }, []);
+    const predictWebcam = async ()=>{
+        if (faceDetector && videoRef.current) {
+            let startTimeMs = performance.now();
+            // Detect faces using detectForVideo
+            if (videoRef.current.currentTime !== $741aef3293d0db11$var$lastVideoTime) {
+                $741aef3293d0db11$var$lastVideoTime = videoRef.current.currentTime;
+                const detections = faceDetector.detectForVideo(videoRef.current, startTimeMs, {
+                    rotationDegrees: rotationRef.current
+                }).detections;
+                if (detections.length) {
+                    const score = detections[0].categories[0].score;
+                    score > detectionThreshold && onFaceDetected(detections, videoRef.current.videoWidth, videoRef.current.videoHeight);
+                }
+            }
+        }
+        // Call this function again to keep predicting when the browser is ready
+        window.requestAnimationFrame(predictWebcam);
+    };
+    (0, $313pz$useEffect)(()=>{
+        if (faceDetector && videoRef.current) // Activate the webcam stream
+        navigator.mediaDevices.getUserMedia($741aef3293d0db11$var$defaultConstraints).then((stream)=>{
+            if (videoRef.current) {
+                videoRef.current.srcObject = stream;
+                videoRef.current.addEventListener('loadeddata', predictWebcam);
+            }
+        }).catch((err)=>{
+            console.error(err);
+        });
+    }, [
+        faceDetector
+    ]);
+    return /*#__PURE__*/ (0, $313pz$jsx)("div", {
+        id: "retorik-framework-face-detector",
+        className: `rf-absolute rf-top-0 rf-left-0 ${!showThumbnail && 'rf-invisible'}`,
+        children: /*#__PURE__*/ (0, $313pz$jsx)("video", {
+            ref: videoRef,
+            src: "",
+            autoPlay: true,
+            style: {
+                rotate: `${rotation}deg`,
+                width: showThumbnail ? webcamWidth / 2 : webcamWidth,
+                height: showThumbnail ? webcamHeight / 2 : webcamHeight
+            }
+        })
+    });
+};
+var $741aef3293d0db11$export$2e2bcd8739ae039 = $741aef3293d0db11$var$FaceDetector;
+
+});
+
+
+
+
+//# sourceMappingURL=ThreeJsWrapper.cb253b3a.js.map