@davi-ai/retorik-framework 4.0.0 → 4.0.1

package/dist/ThreeJsWrapper.4302165c.js

@@ -0,0 +1,666 @@
+var $4gYsi$reactjsxruntime = require("react/jsx-runtime");
+var $4gYsi$react = require("react");
+var $4gYsi$daviaireactbodyenginethree = require("@davi-ai/react-bodyengine-three");
+var $4gYsi$reactredux = require("react-redux");
+var $4gYsi$mediapipetasksvision = require("@mediapipe/tasks-vision");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+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 =
+        typeof globalThis !== 'undefined'
+          ? globalThis
+          : typeof self !== 'undefined'
+          ? self
+          : typeof window !== 'undefined'
+          ? window
+          : typeof global !== 'undefined'
+          ? global
+          : {};
+  var parcelRequire = $parcel$global["parcelRequirea39d"];
+var parcelRegister = parcelRequire.register;
+parcelRegister("3QHCU", function(module, exports) {
+
+$parcel$defineInteropFlag(module.exports);
+
+$parcel$export(module.exports, "default", () => $929a5fce6d871a46$export$2e2bcd8739ae039);
+
+
+
+
+
+var $kpW3P = parcelRequire("kpW3P");
+
+var $7WHA7 = parcelRequire("7WHA7");
+
+var $gp19G = parcelRequire("gp19G");
+
+var $dZyZK = parcelRequire("dZyZK");
+const $929a5fce6d871a46$var$ThreeJsWrapper = ({ agentData: agentData, visible: visible, height: height, size: size, cameraPreset: cameraPreset, calibration: calibration, centered: centered })=>{
+    var _calibration_static, _calibration_dynamic;
+    const dispatch = (0, $4gYsi$reactredux.useDispatch)();
+    const gpuData = (0, $4gYsi$reactredux.useSelector)((state)=>state.retorikReducer.gpuData);
+    const speaking = (0, $4gYsi$reactredux.useSelector)((state)=>state.speechReducer.speaking);
+    const loaderClosed = (0, $4gYsi$reactredux.useSelector)((state)=>state.retorikReducer.loaderClosed);
+    const recognitionState = (0, $4gYsi$reactredux.useSelector)((state)=>state.speechReducer.activeRecognitionState);
+    const lastRecognitionInterim = (0, $4gYsi$reactredux.useSelector)((state)=>state.speechReducer.lastRecognitionInterim);
+    const singleViseme = (0, $4gYsi$reactredux.useSelector)((state)=>state.speechReducer.singleVisemeAdded);
+    const multiVisemes = (0, $4gYsi$reactredux.useSelector)((state)=>state.speechReducer.multiVisemesAdded);
+    const streamingQueue = (0, $4gYsi$reactredux.useSelector)((state)=>state.speechReducer.streamingQueue);
+    const characterLoaded = (0, $4gYsi$reactredux.useSelector)((state)=>state.viewReducer.characterLoaded);
+    const isMobile = (0, $4gYsi$reactredux.useSelector)((state)=>state.viewReducer.isMobile);
+    const [targets, setTargets] = (0, $4gYsi$react.useState)([]);
+    const [dynamicData, setDynamicData] = (0, $4gYsi$react.useState)(undefined);
+    const [openCalibration, setOpenCalibration] = (0, $4gYsi$react.useState)(false);
+    /**
+   * Use model's source to get the right loader. Default to avaturn loader
+   */ const type = (0, $4gYsi$react.useMemo)(()=>{
+        if (agentData.source) switch(agentData.source.toLowerCase()){
+            case (0, $7WHA7.Source3DEngine).avatarsdk:
+            case (0, $7WHA7.Source3DEngine).avatarsdkbis:
+                return (0, $4gYsi$daviaireactbodyenginethree.CreationTool).avatarsdk;
+            case (0, $7WHA7.Source3DEngine).cc3:
+            case (0, $7WHA7.Source3DEngine).cc4:
+                return (0, $4gYsi$daviaireactbodyenginethree.CreationTool).cc3;
+            case (0, $7WHA7.Source3DEngine).rpm:
+            case (0, $7WHA7.Source3DEngine).readyplayerme:
+                return (0, $4gYsi$daviaireactbodyenginethree.CreationTool).rpm;
+            case (0, $7WHA7.Source3DEngine).avaturn:
+            default:
+                return (0, $4gYsi$daviaireactbodyenginethree.CreationTool).avaturn;
+        }
+        return (0, $4gYsi$daviaireactbodyenginethree.CreationTool).avaturn;
+    }, [
+        agentData
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        var _calibration_static, _calibration_dynamic;
+        if (!(calibration === null || calibration === void 0 ? void 0 : (_calibration_static = calibration.static) === null || _calibration_static === void 0 ? void 0 : _calibration_static.enabled) && !(calibration === null || calibration === void 0 ? void 0 : (_calibration_dynamic = calibration.dynamic) === null || _calibration_dynamic === void 0 ? void 0 : _calibration_dynamic.enabled) || isMobile) dispatch((0, $kpW3P.storeActions).view.setCalibrationCompleted(true));
+    }, [
+        calibration,
+        isMobile
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        var _calibration_static, _calibration_dynamic;
+        // Check if we should open the calibration screen or not
+        if (((calibration === null || calibration === void 0 ? void 0 : (_calibration_static = calibration.static) === null || _calibration_static === void 0 ? void 0 : _calibration_static.enabled) || (calibration === null || calibration === void 0 ? void 0 : (_calibration_dynamic = calibration.dynamic) === null || _calibration_dynamic === void 0 ? void 0 : _calibration_dynamic.enabled)) && !isMobile) {
+            var _calibration_static1, _calibration_static2, _calibration_dynamic1, _calibration_dynamic2;
+            // 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 === null || calibration === void 0 ? void 0 : (_calibration_static1 = calibration.static) === null || _calibration_static1 === void 0 ? void 0 : _calibration_static1.enabled) && calibration.static.staticTarget) {
+                const o = new (0, $4gYsi$daviaireactbodyenginethree.Object3D)();
+                o.position.set(calibration.static.staticTarget.x, calibration.static.staticTarget.y, calibration.static.staticTarget.z);
+                setTargets([
+                    o
+                ]);
+                setOpenCalibration(false);
+                dispatch((0, $kpW3P.storeActions).view.setCalibrationCompleted(true));
+            } else if ((calibration === null || calibration === void 0 ? void 0 : (_calibration_static2 = calibration.static) === null || _calibration_static2 === void 0 ? void 0 : _calibration_static2.enabled) && calibration.static.loadStaticTargetFromLocalStorage && localStorage.getItem('Retorik.Framework.Static.Target')) {
+                const calibrationData = JSON.parse(localStorage.getItem('Retorik.Framework.Static.Target') || '{}');
+                const o = new (0, $4gYsi$daviaireactbodyenginethree.Object3D)();
+                o.position.set(calibrationData.x, calibrationData.y, calibrationData.z);
+                setTargets([
+                    o
+                ]);
+                setOpenCalibration(false);
+                dispatch((0, $kpW3P.storeActions).view.setCalibrationCompleted(true));
+            } else if (((_calibration_dynamic1 = calibration.dynamic) === null || _calibration_dynamic1 === void 0 ? void 0 : _calibration_dynamic1.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_dynamic2 = calibration.dynamic) === null || _calibration_dynamic2 === void 0 ? void 0 : _calibration_dynamic2.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, $kpW3P.storeActions).view.setCalibrationCompleted(true));
+        }
+    }, [
+        calibration,
+        isMobile
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        singleViseme && (0, $4gYsi$daviaireactbodyenginethree.addViseme)(singleViseme);
+    }, [
+        singleViseme
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        multiVisemes.length && (0, $4gYsi$daviaireactbodyenginethree.setVisemes)(multiVisemes);
+    }, [
+        multiVisemes
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        if (speaking || streamingQueue.length) (0, $4gYsi$daviaireactbodyenginethree.setCharacterState)((0, $4gYsi$daviaireactbodyenginethree.CharacterState).speaking);
+        else if (recognitionState === (0, $7WHA7.RecognitionState).Closed) (0, $4gYsi$daviaireactbodyenginethree.setCharacterState)((0, $4gYsi$daviaireactbodyenginethree.CharacterState).idle);
+        else if (lastRecognitionInterim) (0, $4gYsi$daviaireactbodyenginethree.setCharacterState)((0, $4gYsi$daviaireactbodyenginethree.CharacterState).listening);
+        else (0, $4gYsi$daviaireactbodyenginethree.setCharacterState)((0, $4gYsi$daviaireactbodyenginethree.CharacterState).waiting);
+    }, [
+        speaking,
+        recognitionState,
+        lastRecognitionInterim,
+        streamingQueue
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        !speaking && (0, $4gYsi$daviaireactbodyenginethree.flushLipSyncData)();
+    }, [
+        speaking
+    ]);
+    return /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsxs)((0, ($parcel$interopDefault($4gYsi$react))).Fragment, {
+        children: [
+            /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("div", {
+                style: {
+                    height: size || '100%',
+                    paddingTop: height || 0,
+                    visibility: characterLoaded && visible ? 'visible' : 'hidden'
+                },
+                children: type && /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)((0, $4gYsi$daviaireactbodyenginethree.Character), {
+                    url: agentData.url,
+                    type: type,
+                    animationsUrl: (agentData === null || agentData === void 0 ? void 0 : agentData.animationsUrl) || 'https://cdn.retorik.ai/bodyengine-three/animations/cc4/female/standing/',
+                    gender: (agentData === null || agentData === void 0 ? void 0 : agentData.gender) === 'male' ? 'male' : 'female',
+                    onLoadingCompleted: ()=>dispatch((0, $kpW3P.storeActions).view.setCharacterLoaded(true)),
+                    camera: (0, $4gYsi$daviaireactbodyenginethree.presets)[cameraPreset || 'default'],
+                    targets: targets,
+                    autoLookAt: true,
+                    detectGpuData: gpuData,
+                    license: "fake-license"
+                })
+            }),
+            !characterLoaded && /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.jsx)("div", {
+                    className: "rf-w-1/4 rf-aspect-square",
+                    children: /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)((0, $gp19G.default), {})
+                })
+            }),
+            openCalibration && loaderClosed && /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)((0, $dZyZK.default), {
+                centered: centered,
+                staticCalibrationEnabled: !!(calibration === null || calibration === void 0 ? void 0 : (_calibration_static = calibration.static) === null || _calibration_static === void 0 ? void 0 : _calibration_static.enabled),
+                dynamicCalibrationEnabled: !!(calibration === null || calibration === void 0 ? void 0 : (_calibration_dynamic = calibration.dynamic) === null || _calibration_dynamic === void 0 ? void 0 : _calibration_dynamic.enabled),
+                setTargets: (targets)=>setTargets(targets),
+                dynamicData: dynamicData
+            })
+        ]
+    });
+};
+var $929a5fce6d871a46$export$2e2bcd8739ae039 = $929a5fce6d871a46$var$ThreeJsWrapper;
+
+});
+parcelRegister("dZyZK", function(module, exports) {
+
+$parcel$export(module.exports, "default", () => $5422cff32f1fe2dc$export$2e2bcd8739ae039);
+
+
+
+
+
+var $kpW3P = parcelRequire("kpW3P");
+
+var $8sMtK = parcelRequire("8sMtK");
+var $5422cff32f1fe2dc$var$CalibrationMode = /*#__PURE__*/ function(CalibrationMode) {
+    CalibrationMode[CalibrationMode["none"] = 1] = "none";
+    CalibrationMode[CalibrationMode["static"] = 2] = "static";
+    CalibrationMode[CalibrationMode["dynamic"] = 3] = "dynamic";
+    return CalibrationMode;
+}($5422cff32f1fe2dc$var$CalibrationMode || {});
+const $5422cff32f1fe2dc$var$CalibrationScreen = ({ centered: centered, staticCalibrationEnabled: staticCalibrationEnabled, dynamicCalibrationEnabled: dynamicCalibrationEnabled, dynamicData: dynamicData, setTargets: setTargets })=>{
+    const dispatch = (0, $4gYsi$reactredux.useDispatch)();
+    const cameraPosition = (0, $4gYsi$daviaireactbodyenginethree.getCameraPosition)();
+    const characterHeight = (0, $4gYsi$daviaireactbodyenginethree.getCharacterHeight)();
+    const characterLoaded = (0, $4gYsi$reactredux.useSelector)((state)=>state.viewReducer.characterLoaded);
+    const calibrationCompleted = (0, $4gYsi$reactredux.useSelector)((state)=>state.viewReducer.calibrationCompleted);
+    const [calibrationMode, setCalibrationMode] = (0, $4gYsi$react.useState)(dynamicData ? 3 : 1);
+    const [distanceFromDevice, setDistanceFromDevice] = (0, $4gYsi$react.useState)((dynamicData === null || dynamicData === void 0 ? void 0 : dynamicData.distanceFromAgentToCameraInCentimeters) || 0);
+    const [webcamRotation, setWebcamRotation] = (0, $4gYsi$react.useState)(0);
+    const [agentEyesHeightOnScreen, setAgentEyesHeightOnScreen] = (0, $4gYsi$react.useState)(0);
+    const [worldDistancePerDegree, setWorldDistancePerDegree] = (0, $4gYsi$react.useState)(0);
+    const [currentAngleInDegrees, setCurrentAngleInDegrees] = (0, $4gYsi$react.useState)(0);
+    const [cameraX, setCameraX] = (0, $4gYsi$react.useState)(0);
+    const [cameraY, setCameraY] = (0, $4gYsi$react.useState)(0);
+    const [cameraZ, setCameraZ] = (0, $4gYsi$react.useState)(0);
+    const cameraXRef = (0, $4gYsi$react.useRef)(0);
+    const cameraYRef = (0, $4gYsi$react.useRef)(0);
+    const cameraZRef = (0, $4gYsi$react.useRef)(0);
+    const currentAngleInDegreesRef = (0, $4gYsi$react.useRef)(0);
+    const webcamHeightRef = (0, $4gYsi$react.useRef)((dynamicData === null || dynamicData === void 0 ? void 0 : dynamicData.webcamHeight) || 0);
+    const userEyesHeightRef = (0, $4gYsi$react.useRef)(0);
+    const agentEyesHeightRef = (0, $4gYsi$react.useRef)(0);
+    const distanceFromDeviceRef = (0, $4gYsi$react.useRef)(0);
+    const webcamRotatedRef = (0, $4gYsi$react.useRef)((dynamicData === null || dynamicData === void 0 ? void 0 : dynamicData.cameraRotationInDegrees) || 0);
+    const deltaAgentHeightAgentWorldHeightInCentimetersRef = (0, $4gYsi$react.useRef)((dynamicData === null || dynamicData === void 0 ? void 0 : dynamicData.deltaAgentHeightAgentWorldHeightInCentimeters) || 0);
+    const ratioPixelToCentimeterRef = (0, $4gYsi$react.useRef)((dynamicData === null || dynamicData === void 0 ? void 0 : dynamicData.ratioPixelToCentimeter) || 0);
+    const calibrationCompletedRef = (0, $4gYsi$react.useRef)(calibrationCompleted);
+    const counterRef = (0, $4gYsi$react.useRef)(0);
+    (0, $4gYsi$react.useEffect)(()=>{
+        // If dynamic data are given, let's validate immediately to set calibratoin as completed
+        dynamicData && handleValidate();
+    }, []);
+    (0, $4gYsi$react.useEffect)(()=>{
+        characterLoaded && !dynamicData && (0, $4gYsi$daviaireactbodyenginethree.setLookAtCamera)(true);
+        return ()=>{
+            (0, $4gYsi$daviaireactbodyenginethree.setLookAtCamera)(false);
+        };
+    }, [
+        characterLoaded
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        if (worldDistancePerDegree && !dynamicData) {
+            const o = new (0, $4gYsi$daviaireactbodyenginethree.Object3D)();
+            o.position.set(cameraX, cameraY + currentAngleInDegrees * worldDistancePerDegree, Math.max(cameraZ / 5, 0.3));
+            setTargets([
+                o
+            ]);
+        }
+    }, [
+        currentAngleInDegrees,
+        worldDistancePerDegree,
+        distanceFromDevice,
+        cameraX,
+        cameraY,
+        cameraZ
+    ]);
+    (0, $4gYsi$react.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, $4gYsi$react.useEffect)(()=>{
+        if (!dynamicData) characterHeight && agentEyesHeightOnScreen && (deltaAgentHeightAgentWorldHeightInCentimetersRef.current = (characterHeight - characterHeight / 16) * 100 - agentEyesHeightOnScreen);
+    }, [
+        characterHeight,
+        agentEyesHeightOnScreen
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        !dynamicData && (webcamRotatedRef.current = webcamRotation);
+    }, [
+        webcamRotation
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        calibrationCompletedRef.current = calibrationCompleted;
+    }, [
+        calibrationCompleted
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        if (!dynamicData && calibrationMode === 2) (0, $4gYsi$daviaireactbodyenginethree.setShowFirstTarget)(!calibrationCompleted);
+    }, [
+        calibrationMode,
+        calibrationCompleted
+    ]);
+    const handleReset = ()=>{
+        setCurrentAngleInDegrees(0);
+        currentAngleInDegreesRef.current = 0;
+    };
+    const handleValidate = ()=>{
+        (0, $4gYsi$daviaireactbodyenginethree.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, $kpW3P.storeActions).view.setCalibrationCompleted(true));
+    };
+    const handleFaceDetected = (detections, width, height)=>{
+        counterRef.current++;
+        if ((detections === null || detections === void 0 ? void 0 : 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, $4gYsi$daviaireactbodyenginethree.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, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.jsx)((0, $8sMtK.default), {
+                    detectionThreshold: 0.8,
+                    onFaceDetected: handleFaceDetected,
+                    showThumbnail: !calibrationCompleted,
+                    rotation: webcamRotation
+                })
+            }),
+            !calibrationCompleted && /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)((0, ($parcel$interopDefault($4gYsi$react))).Fragment, {
+                children: calibrationMode === 1 ? /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.jsx)("p", {
+                            className: "rf-text-medium-size-auto",
+                            children: "Choisissez un mode de calibrage :"
+                        }),
+                        /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsxs)("div", {
+                            className: "rf-flex rf-flex-row rf-gap-4",
+                            children: [
+                                staticCalibrationEnabled && /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.jsxs)("div", {
+                                className: "rf-grid rf-grid-cols-2 rf-grid-rows-3 rf-gap-4",
+                                children: [
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Hauteur webcam (en cm)"
+                                    }),
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("input", {
+                                        type: "number",
+                                        min: 0,
+                                        max: 300,
+                                        onChange: (e)=>{
+                                            webcamHeightRef.current = parseInt(e.target.value);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Votre taille (en cm)"
+                                    }),
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Hauteur des yeux de l'agent (en cm)"
+                                    }),
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("input", {
+                                        type: "number",
+                                        min: 50,
+                                        max: 300,
+                                        onChange: (e)=>{
+                                            setAgentEyesHeightOnScreen(parseInt(e.target.value));
+                                            agentEyesHeightRef.current = parseInt(e.target.value);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Distance utilisateur - borne (en cm)"
+                                    }),
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("input", {
+                                        type: "number",
+                                        min: 20,
+                                        max: 100,
+                                        onChange: (e)=>{
+                                            setDistanceFromDevice(parseInt(e.target.value));
+                                            distanceFromDeviceRef.current = parseInt(e.target.value);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("p", {
+                                        className: "rf-font-bold",
+                                        children: "Rotation de la webcam (en degr\xe9s)"
+                                    }),
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsxs)("div", {
+                                        className: "rf-flex rf-flex-row rf-gap-2",
+                                        children: [
+                                            /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.jsxs)("div", {
+                        className: "rf-ml-4 rf-flex rf-flex-col rf-gap-4",
+                        children: [
+                            /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsxs)("div", {
+                                className: "rf-flex rf-flex-row rf-items-center rf-gap-4",
+                                children: [
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.jsx)("p", {
+                                                children: "Position actuelle de la cible : "
+                                            }),
+                                            /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("p", {
+                                                children: `x: ${cameraX}`
+                                            }),
+                                            /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("p", {
+                                                children: `y: ${cameraY + (currentAngleInDegrees ? currentAngleInDegrees * worldDistancePerDegree : 0)}`
+                                            }),
+                                            /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("p", {
+                                                children: `z: ${Math.max(cameraZ / 5, 0.3)}`
+                                            }),
+                                            /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("p", {
+                                                children: `angle: ${currentAngleInDegrees}\xb0`
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsxs)("div", {
+                                className: "rf-flex rf-flex-row rf-gap-2",
+                                children: [
+                                    /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.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, $4gYsi$reactjsxruntime.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 $5422cff32f1fe2dc$export$2e2bcd8739ae039 = $5422cff32f1fe2dc$var$CalibrationScreen;
+
+});
+parcelRegister("8sMtK", function(module, exports) {
+
+$parcel$export(module.exports, "default", () => $8d9a75d3aaaf531b$export$2e2bcd8739ae039);
+
+
+
+const $8d9a75d3aaaf531b$var$runningMode = 'VIDEO';
+let $8d9a75d3aaaf531b$var$lastVideoTime = -1;
+const $8d9a75d3aaaf531b$var$defaultConstraints = {
+    video: {
+        facingMode: 'user'
+    }
+};
+const $8d9a75d3aaaf531b$var$FaceDetector = ({ detectionThreshold: detectionThreshold, onFaceDetected: onFaceDetected, showThumbnail: showThumbnail, rotation: rotation })=>{
+    const [webcamWidth, setWebcamWidth] = (0, $4gYsi$react.useState)(0);
+    const [webcamHeight, setWebcamHeight] = (0, $4gYsi$react.useState)(0);
+    const [faceDetector, setFaceDetector] = (0, $4gYsi$react.useState)();
+    const videoRef = (0, $4gYsi$react.useRef)(null);
+    const rotationRef = (0, $4gYsi$react.useRef)(rotation || 0);
+    (0, $4gYsi$react.useEffect)(()=>{
+        rotationRef.current = rotation || 0;
+    }, [
+        rotation
+    ]);
+    (0, $4gYsi$react.useEffect)(()=>{
+        const createfaceDetector = async ()=>{
+            const vision = await (0, $4gYsi$mediapipetasksvision.FilesetResolver).forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm');
+            const newFaceDetector = await (0, $4gYsi$mediapipetasksvision.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: $8d9a75d3aaaf531b$var$runningMode
+            });
+            newFaceDetector && setFaceDetector(newFaceDetector);
+        };
+        const initializefaceDetector = async ()=>{
+            navigator.mediaDevices.getUserMedia($8d9a75d3aaaf531b$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 !== $8d9a75d3aaaf531b$var$lastVideoTime) {
+                $8d9a75d3aaaf531b$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, $4gYsi$react.useEffect)(()=>{
+        if (faceDetector && videoRef.current) // Activate the webcam stream
+        navigator.mediaDevices.getUserMedia($8d9a75d3aaaf531b$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, $4gYsi$reactjsxruntime.jsx)("div", {
+        id: "retorik-framework-face-detector",
+        className: `rf-absolute rf-top-0 rf-left-0 ${!showThumbnail && 'rf-invisible'}`,
+        children: /*#__PURE__*/ (0, $4gYsi$reactjsxruntime.jsx)("video", {
+            ref: videoRef,
+            src: "",
+            autoPlay: true,
+            style: {
+                rotate: `${rotation}deg`,
+                width: showThumbnail ? webcamWidth / 2 : webcamWidth,
+                height: showThumbnail ? webcamHeight / 2 : webcamHeight
+            }
+        })
+    });
+};
+var $8d9a75d3aaaf531b$export$2e2bcd8739ae039 = $8d9a75d3aaaf531b$var$FaceDetector;
+
+});
+
+
+
+
+//# sourceMappingURL=ThreeJsWrapper.4302165c.js.map