@ohos-ports/react-three-drei 10.7.7-beta.0

package/web/DragControls.js

@@ -0,0 +1,127 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+import { useGesture } from '@use-gesture/react';
+
+const initialModelPosition = /* @__PURE__ */new THREE.Vector3();
+const mousePosition2D = /* @__PURE__ */new THREE.Vector2();
+const mousePosition3D = /* @__PURE__ */new THREE.Vector3();
+const dragOffset = /* @__PURE__ */new THREE.Vector3();
+const dragPlaneNormal = /* @__PURE__ */new THREE.Vector3();
+const dragPlane = /* @__PURE__ */new THREE.Plane();
+const DragControls = /*#__PURE__*/React.forwardRef(({
+  autoTransform = true,
+  matrix,
+  axisLock,
+  dragLimits,
+  onHover,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+  children,
+  dragConfig,
+  ...props
+}, fRef) => {
+  const defaultControls = useThree(state => state.controls);
+  const {
+    camera,
+    size,
+    raycaster,
+    invalidate
+  } = useThree();
+  const ref = React.useRef(null);
+  const bind = useGesture({
+    onHover: ({
+      hovering
+    }) => onHover && onHover(hovering !== null && hovering !== void 0 ? hovering : false),
+    onDragStart: ({
+      event
+    }) => {
+      if (defaultControls) defaultControls.enabled = false;
+      const {
+        point
+      } = event;
+      ref.current.matrix.decompose(initialModelPosition, new THREE.Quaternion(), new THREE.Vector3());
+      mousePosition3D.copy(point);
+      dragOffset.copy(mousePosition3D).sub(initialModelPosition);
+      onDragStart && onDragStart(initialModelPosition);
+      invalidate();
+    },
+    onDrag: ({
+      xy: [dragX, dragY],
+      intentional
+    }) => {
+      if (!intentional) return;
+      const normalizedMouseX = (dragX - size.left) / size.width * 2 - 1;
+      const normalizedMouseY = -((dragY - size.top) / size.height) * 2 + 1;
+      mousePosition2D.set(normalizedMouseX, normalizedMouseY);
+      raycaster.setFromCamera(mousePosition2D, camera);
+      if (!axisLock) {
+        camera.getWorldDirection(dragPlaneNormal).negate();
+      } else {
+        switch (axisLock) {
+          case 'x':
+            dragPlaneNormal.set(1, 0, 0);
+            break;
+          case 'y':
+            dragPlaneNormal.set(0, 1, 0);
+            break;
+          case 'z':
+            dragPlaneNormal.set(0, 0, 1);
+            break;
+        }
+      }
+      dragPlane.setFromNormalAndCoplanarPoint(dragPlaneNormal, mousePosition3D);
+      raycaster.ray.intersectPlane(dragPlane, mousePosition3D);
+      const previousLocalMatrix = ref.current.matrix.clone();
+      const previousWorldMatrix = ref.current.matrixWorld.clone();
+      const intendedNewPosition = new THREE.Vector3(mousePosition3D.x - dragOffset.x, mousePosition3D.y - dragOffset.y, mousePosition3D.z - dragOffset.z);
+      if (dragLimits) {
+        intendedNewPosition.x = dragLimits[0] ? Math.max(Math.min(intendedNewPosition.x, dragLimits[0][1]), dragLimits[0][0]) : intendedNewPosition.x;
+        intendedNewPosition.y = dragLimits[1] ? Math.max(Math.min(intendedNewPosition.y, dragLimits[1][1]), dragLimits[1][0]) : intendedNewPosition.y;
+        intendedNewPosition.z = dragLimits[2] ? Math.max(Math.min(intendedNewPosition.z, dragLimits[2][1]), dragLimits[2][0]) : intendedNewPosition.z;
+      }
+      if (autoTransform) {
+        ref.current.matrix.setPosition(intendedNewPosition);
+        const deltaLocalMatrix = ref.current.matrix.clone().multiply(previousLocalMatrix.invert());
+        const deltaWorldMatrix = ref.current.matrix.clone().multiply(previousWorldMatrix.invert());
+        onDrag && onDrag(ref.current.matrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
+      } else {
+        const tempMatrix = new THREE.Matrix4().copy(ref.current.matrix);
+        tempMatrix.setPosition(intendedNewPosition);
+        const deltaLocalMatrix = tempMatrix.clone().multiply(previousLocalMatrix.invert());
+        const deltaWorldMatrix = tempMatrix.clone().multiply(previousWorldMatrix.invert());
+        onDrag && onDrag(tempMatrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
+      }
+      invalidate();
+    },
+    onDragEnd: () => {
+      if (defaultControls) defaultControls.enabled = true;
+      onDragEnd && onDragEnd();
+      invalidate();
+    }
+  }, {
+    drag: {
+      filterTaps: true,
+      threshold: 1,
+      ...(typeof dragConfig === 'object' ? dragConfig : {})
+    }
+  });
+  React.useImperativeHandle(fRef, () => ref.current, []);
+  React.useLayoutEffect(() => {
+    if (!matrix) return;
+
+    // If the matrix is a real matrix4 it means that the user wants to control the gizmo
+    // In that case it should just be set, as a bare prop update would merely copy it
+    ref.current.matrix = matrix;
+  }, [matrix]);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, bind(), {
+    matrix: matrix,
+    matrixAutoUpdate: false
+  }, props), children);
+});
+
+export { DragControls };

package/web/FaceControls.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),o=require("@react-three/fiber"),n=require("maath"),c=require("../core/VideoTexture.cjs.js"),a=require("./WebcamVideoTexture.cjs.js"),u=require("./Facemesh.cjs.js"),s=require("./FaceLandmarker.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("suspend-react"),require("hls.js"),require("../core/Line.cjs.js"),require("three-stdlib");var f=i(e),d=l(r),p=l(t);function m(e,r){return e.clone().add(r).multiplyScalar(.5)}function b(e,r,t){const o=e.localToWorld(r);return t.worldToLocal(o)}const h=t.createContext({}),y=t.forwardRef((({camera:e,videoTexture:r={start:!0},manualDetect:i=!1,faceLandmarkerResult:l,manualUpdate:y=!1,makeDefault:j,smoothTime:v=.25,offset:T=!0,offsetScalar:V=80,eyes:w=!1,eyesAsOrigin:g=!0,depth:q=.15,debug:x=!1,facemesh:O},k)=>{var S,R;const E=o.useThree((e=>e.scene)),D=o.useThree((e=>e.camera)),F=o.useThree((e=>e.set)),C=o.useThree((e=>e.get)),L=e||D,M=t.useRef(null),[A]=t.useState((()=>new d.Object3D)),[P]=t.useState((()=>new d.Vector3)),[W]=t.useState((()=>new d.Vector3)),[_]=t.useState((()=>new d.Vector3)),[z]=t.useState((()=>new d.Vector3)),B=t.useCallback((()=>{A.parent=L.parent;const e=M.current;if(e){const{outerRef:r,eyeRightRef:t,eyeLeftRef:o}=e;if(t.current&&o.current){const{irisDirRef:e}=t.current,{irisDirRef:n}=o.current;e.current&&n.current&&r.current&&(P.copy(b(e.current,new d.Vector3(0,0,0),r.current)),W.copy(b(n.current,new d.Vector3(0,0,0),r.current)),A.position.copy(b(r.current,m(P,W),L.parent||E)),_.copy(b(e.current,new d.Vector3(0,0,1),r.current)),z.copy(b(n.current,new d.Vector3(0,0,1),r.current)),A.lookAt(r.current.localToWorld(m(_,z))))}else r.current&&(A.position.copy(b(r.current,new d.Vector3(0,0,0),L.parent||E)),A.lookAt(r.current.localToWorld(new d.Vector3(0,0,1))))}return A}),[L,W,z,P,_,E,A]),[I]=t.useState((()=>new d.Object3D)),H=t.useCallback((function(e,r){if(L){var t;if(null!==(t=r)&&void 0!==t||(r=B()),v>0){const t=1e-9;n.easing.damp3(I.position,r.position,v,e,void 0,void 0,t),n.easing.dampE(I.rotation,r.rotation,v,e,void 0,void 0,t)}else I.position.copy(r.position),I.rotation.copy(r.rotation);L.position.copy(I.position),L.rotation.copy(I.rotation)}}),[L,B,v,I.position,I.rotation]);o.useFrame(((e,r)=>{y||H(r)}));const N=t.useRef(null),[U,G]=t.useState(),J=s.useFaceLandmarker(),K=t.useCallback(((e,r)=>{const t=N.current;if(!t)return;const o=t.source.data,n=null==J?void 0:J.detectForVideo(o,e);G(n)}),[J]),Q=t.useMemo((()=>Object.assign(Object.create(d.EventDispatcher.prototype),{computeTarget:B,update:H,facemeshApiRef:M})),[B,H]);t.useImperativeHandle(k,(()=>Q),[Q]),t.useEffect((()=>{if(j){const e=C().controls;return F({controls:Q}),()=>F({controls:e})}}),[j,Q,C,F]);const X=null!=l?l:U,Y=null==X?void 0:X.faceLandmarks[0],Z=null==X||null==(S=X.facialTransformationMatrixes)?void 0:S[0],$=null==X||null==(R=X.faceBlendshapes)?void 0:R[0],ee={onVideoFrame:K,...r};return p.createElement(h.Provider,{value:Q},!i&&p.createElement(t.Suspense,{fallback:null},"src"in ee?p.createElement(c.VideoTexture,f.default({ref:N},ee)):p.createElement(a.WebcamVideoTexture,f.default({ref:N},ee))),p.createElement(u.Facemesh,f.default({ref:M,children:p.createElement("meshNormalMaterial",{side:d.DoubleSide})},O,{points:Y,depth:q,facialTransformationMatrix:Z,faceBlendshapes:$,eyes:w,eyesAsOrigin:g,offset:T,offsetScalar:V,debug:x,"rotation-z":Math.PI,visible:x})))}));exports.FaceControls=y,exports.useFaceControls=()=>t.useContext(h);

package/web/FaceControls.d.ts

@@ -0,0 +1,29 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { RefObject } from 'react';
+import type { FaceLandmarkerResult } from '@mediapipe/tasks-vision';
+import { VideoTextureProps } from '../core/VideoTexture';
+import { FacemeshApi, FacemeshProps } from './Facemesh';
+export type FaceControlsProps = {
+    camera?: THREE.Camera;
+    videoTexture?: VideoTextureProps;
+    manualDetect?: boolean;
+    faceLandmarkerResult?: FaceLandmarkerResult;
+    manualUpdate?: boolean;
+    makeDefault?: boolean;
+    smoothTime?: number;
+    offset?: boolean;
+    offsetScalar?: number;
+    eyes?: boolean;
+    eyesAsOrigin?: boolean;
+    depth?: number;
+    debug?: boolean;
+    facemesh?: FacemeshProps;
+};
+export type FaceControlsApi = THREE.EventDispatcher & {
+    computeTarget: () => THREE.Object3D;
+    update: (delta: number, target?: THREE.Object3D) => void;
+    facemeshApiRef: RefObject<FacemeshApi>;
+};
+export declare const FaceControls: React.ForwardRefExoticComponent<FaceControlsProps & React.RefAttributes<FaceControlsApi>>;
+export declare const useFaceControls: () => FaceControlsApi;

package/web/FaceControls.js

@@ -0,0 +1,236 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { forwardRef, useRef, useState, useCallback, useMemo, useImperativeHandle, useEffect, Suspense, useContext, createContext } from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { easing } from 'maath';
+import { VideoTexture } from '../core/VideoTexture.js';
+import { WebcamVideoTexture } from './WebcamVideoTexture.js';
+import { Facemesh } from './Facemesh.js';
+import { useFaceLandmarker } from './FaceLandmarker.js';
+
+function mean(v1, v2) {
+  return v1.clone().add(v2).multiplyScalar(0.5);
+}
+function localToLocal(objSrc, v, objDst) {
+  // see: https://discourse.threejs.org/t/object3d-localtolocal/51564
+  const v_world = objSrc.localToWorld(v);
+  return objDst.worldToLocal(v_world);
+}
+
+//
+//
+//
+
+const FaceControlsContext = /* @__PURE__ */createContext({});
+
+/**
+ * The camera follows your face.
+ *
+ * Pre-requisite: wrap into a `FaceLandmarker` provider:
+ *
+ * ```jsx
+ * <FaceLandmarker>...</FaceLandmarker>
+ * ```
+ */
+
+const FaceControls = /* @__PURE__ */forwardRef(({
+  camera,
+  videoTexture = {
+    start: true
+  },
+  manualDetect = false,
+  faceLandmarkerResult,
+  manualUpdate = false,
+  makeDefault,
+  smoothTime = 0.25,
+  offset = true,
+  offsetScalar = 80,
+  eyes = false,
+  eyesAsOrigin = true,
+  depth = 0.15,
+  debug = false,
+  facemesh
+}, fref) => {
+  var _result$facialTransfo, _result$faceBlendshap;
+  const scene = useThree(state => state.scene);
+  const defaultCamera = useThree(state => state.camera);
+  const set = useThree(state => state.set);
+  const get = useThree(state => state.get);
+  const explCamera = camera || defaultCamera;
+  const facemeshApiRef = useRef(null);
+
+  //
+  // computeTarget()
+  //
+  // Compute `target` position and rotation for the camera (according to <Facemesh>)
+  //
+  //  1. 👀 either following the 2 eyes
+  //  2. 👤 or just the head mesh
+  //
+
+  const [target] = useState(() => new THREE.Object3D());
+  const [irisRightDirPos] = useState(() => new THREE.Vector3());
+  const [irisLeftDirPos] = useState(() => new THREE.Vector3());
+  const [irisRightLookAt] = useState(() => new THREE.Vector3());
+  const [irisLeftLookAt] = useState(() => new THREE.Vector3());
+  const computeTarget = useCallback(() => {
+    // same parent as the camera
+    target.parent = explCamera.parent;
+    const facemeshApi = facemeshApiRef.current;
+    if (facemeshApi) {
+      const {
+        outerRef,
+        eyeRightRef,
+        eyeLeftRef
+      } = facemeshApi;
+      if (eyeRightRef.current && eyeLeftRef.current) {
+        // 1. 👀
+
+        const {
+          irisDirRef: irisRightDirRef
+        } = eyeRightRef.current;
+        const {
+          irisDirRef: irisLeftDirRef
+        } = eyeLeftRef.current;
+        if (irisRightDirRef.current && irisLeftDirRef.current && outerRef.current) {
+          //
+          // position: mean of irisRightDirPos,irisLeftDirPos
+          //
+          irisRightDirPos.copy(localToLocal(irisRightDirRef.current, new THREE.Vector3(0, 0, 0), outerRef.current));
+          irisLeftDirPos.copy(localToLocal(irisLeftDirRef.current, new THREE.Vector3(0, 0, 0), outerRef.current));
+          target.position.copy(localToLocal(outerRef.current, mean(irisRightDirPos, irisLeftDirPos), explCamera.parent || scene));
+
+          //
+          // lookAt: mean of irisRightLookAt,irisLeftLookAt
+          //
+          irisRightLookAt.copy(localToLocal(irisRightDirRef.current, new THREE.Vector3(0, 0, 1), outerRef.current));
+          irisLeftLookAt.copy(localToLocal(irisLeftDirRef.current, new THREE.Vector3(0, 0, 1), outerRef.current));
+          target.lookAt(outerRef.current.localToWorld(mean(irisRightLookAt, irisLeftLookAt)));
+        }
+      } else {
+        // 2. 👤
+
+        if (outerRef.current) {
+          target.position.copy(localToLocal(outerRef.current, new THREE.Vector3(0, 0, 0), explCamera.parent || scene));
+          target.lookAt(outerRef.current.localToWorld(new THREE.Vector3(0, 0, 1)));
+        }
+      }
+    }
+    return target;
+  }, [explCamera, irisLeftDirPos, irisLeftLookAt, irisRightDirPos, irisRightLookAt, scene, target]);
+
+  //
+  // update()
+  //
+  // Updating the camera `current` position and rotation, following `target`
+  //
+
+  const [current] = useState(() => new THREE.Object3D());
+  const update = useCallback(function (delta, target) {
+    if (explCamera) {
+      var _target;
+      (_target = target) !== null && _target !== void 0 ? _target : target = computeTarget();
+      if (smoothTime > 0) {
+        // damping current
+        const eps = 1e-9;
+        easing.damp3(current.position, target.position, smoothTime, delta, undefined, undefined, eps);
+        easing.dampE(current.rotation, target.rotation, smoothTime, delta, undefined, undefined, eps);
+      } else {
+        // instant
+        current.position.copy(target.position);
+        current.rotation.copy(target.rotation);
+      }
+      explCamera.position.copy(current.position);
+      explCamera.rotation.copy(current.rotation);
+    }
+  }, [explCamera, computeTarget, smoothTime, current.position, current.rotation]);
+  useFrame((_, delta) => {
+    if (manualUpdate) return;
+    update(delta);
+  });
+
+  //
+  // onVideoFrame (only used if !manualDetect)
+  //
+
+  const videoTextureRef = useRef(null);
+  const [_faceLandmarkerResult, setFaceLandmarkerResult] = useState();
+  const faceLandmarker = useFaceLandmarker();
+  const onVideoFrame = useCallback((now, metadata) => {
+    const texture = videoTextureRef.current;
+    if (!texture) return;
+    const videoFrame = texture.source.data;
+    const result = faceLandmarker == null ? void 0 : faceLandmarker.detectForVideo(videoFrame, now);
+    setFaceLandmarkerResult(result);
+  }, [faceLandmarker]);
+
+  //
+  // Ref API
+  //
+
+  const api = useMemo(() => Object.assign(Object.create(THREE.EventDispatcher.prototype), {
+    computeTarget,
+    update,
+    facemeshApiRef
+  }), [computeTarget, update]);
+  useImperativeHandle(fref, () => api, [api]);
+
+  //
+  // makeDefault (`controls` global state)
+  //
+
+  useEffect(() => {
+    if (makeDefault) {
+      const old = get().controls;
+      set({
+        controls: api
+      });
+      return () => set({
+        controls: old
+      });
+    }
+  }, [makeDefault, api, get, set]);
+
+  //
+  //
+  //
+
+  const result = faceLandmarkerResult !== null && faceLandmarkerResult !== void 0 ? faceLandmarkerResult : _faceLandmarkerResult;
+  const points = result == null ? void 0 : result.faceLandmarks[0];
+  const facialTransformationMatrix = result == null || (_result$facialTransfo = result.facialTransformationMatrixes) == null ? void 0 : _result$facialTransfo[0];
+  const faceBlendshapes = result == null || (_result$faceBlendshap = result.faceBlendshapes) == null ? void 0 : _result$faceBlendshap[0];
+  const videoTextureProps = {
+    onVideoFrame,
+    ...videoTexture
+  };
+  return /*#__PURE__*/React.createElement(FaceControlsContext.Provider, {
+    value: api
+  }, !manualDetect && /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, 'src' in videoTextureProps ? /*#__PURE__*/React.createElement(VideoTexture, _extends({
+    ref: videoTextureRef
+  }, videoTextureProps)) : /*#__PURE__*/React.createElement(WebcamVideoTexture, _extends({
+    ref: videoTextureRef
+  }, videoTextureProps))), /*#__PURE__*/React.createElement(Facemesh, _extends({
+    ref: facemeshApiRef,
+    children: /*#__PURE__*/React.createElement("meshNormalMaterial", {
+      side: THREE.DoubleSide
+    })
+  }, facemesh, {
+    points: points,
+    depth: depth,
+    facialTransformationMatrix: facialTransformationMatrix,
+    faceBlendshapes: faceBlendshapes,
+    eyes: eyes,
+    eyesAsOrigin: eyesAsOrigin,
+    offset: offset,
+    offsetScalar: offsetScalar,
+    debug: debug,
+    "rotation-z": Math.PI,
+    visible: debug
+  })));
+});
+const useFaceControls = () => useContext(FaceControlsContext);
+
+export { FaceControls, useFaceControls };

package/web/FaceLandmarker.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("suspend-react");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=r(e);const s=e.createContext({}),n={basePath:"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17/wasm",options:{baseOptions:{modelAssetPath:"https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",delegate:"GPU"},runningMode:"VIDEO",outputFaceBlendshapes:!0,outputFacialTransformationMatrixes:!0}},o=e.forwardRef((({basePath:o=n.basePath,options:i=n.options,children:c},u)=>{const l=JSON.stringify(i),d=t.suspend((async()=>{const{FilesetResolver:e,FaceLandmarker:t}=await Promise.resolve().then((function(){return r(require("@mediapipe/tasks-vision"))})),a=await e.forVisionTasks(o);return t.createFromOptions(a,i)}),[o,l]);return e.useEffect((()=>()=>{null==d||d.close(),t.clear([o,l])}),[d,o,l]),e.useImperativeHandle(u,(()=>d),[d]),a.createElement(s.Provider,{value:d},c)}));exports.FaceLandmarker=o,exports.FaceLandmarkerDefaults=n,exports.useFaceLandmarker=function(){return e.useContext(s)};

package/web/FaceLandmarker.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import type { FaceLandmarker as FaceLandmarkerImpl, FaceLandmarkerOptions } from '@mediapipe/tasks-vision';
+export type FaceLandmarkerProps = {
+    basePath?: string;
+    options?: FaceLandmarkerOptions;
+    children?: ReactNode;
+};
+export declare const FaceLandmarkerDefaults: {
+    basePath: string;
+    options: FaceLandmarkerOptions;
+};
+export declare const FaceLandmarker: React.ForwardRefExoticComponent<FaceLandmarkerProps & React.RefAttributes<FaceLandmarkerImpl>>;
+export declare function useFaceLandmarker(): FaceLandmarkerImpl | undefined;

package/web/FaceLandmarker.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useContext, createContext } from 'react';
+import { suspend, clear } from 'suspend-react';
+
+/* eslint react-hooks/exhaustive-deps: 1 */
+const FaceLandmarkerContext = /* @__PURE__ */createContext({});
+const FaceLandmarkerDefaults = {
+  basePath: 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17/wasm',
+  options: {
+    baseOptions: {
+      modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',
+      delegate: 'GPU'
+    },
+    runningMode: 'VIDEO',
+    outputFaceBlendshapes: true,
+    outputFacialTransformationMatrixes: true
+  }
+};
+const FaceLandmarker = /*#__PURE__*/forwardRef(({
+  basePath = FaceLandmarkerDefaults.basePath,
+  options = FaceLandmarkerDefaults.options,
+  children
+}, fref) => {
+  const opts = JSON.stringify(options);
+  const faceLandmarker = suspend(async () => {
+    const {
+      FilesetResolver,
+      FaceLandmarker
+    } = await import('@mediapipe/tasks-vision');
+    const vision = await FilesetResolver.forVisionTasks(basePath);
+    return FaceLandmarker.createFromOptions(vision, options);
+  }, [basePath, opts]);
+  useEffect(() => {
+    return () => {
+      faceLandmarker == null || faceLandmarker.close();
+      clear([basePath, opts]);
+    };
+  }, [faceLandmarker, basePath, opts]);
+  useImperativeHandle(fref, () => faceLandmarker, [faceLandmarker]); // expose faceLandmarker through ref
+
+  return /*#__PURE__*/React.createElement(FaceLandmarkerContext.Provider, {
+    value: faceLandmarker
+  }, children);
+});
+function useFaceLandmarker() {
+  return useContext(FaceLandmarkerContext);
+}
+
+export { FaceLandmarker, FaceLandmarkerDefaults, useFaceLandmarker };