Prevent redundant WASM file downloads when using Mediapipe HandLandmarker and FaceLandmarker

I’m working with the Mediapipe library to initialize both HandLandmarker and FaceLandmarker in my web application. I noticed that the WASM file is being downloaded twice—once for each landmarker. I want to download the WASM file only once and use it for both landmarkers. How can I achieve this?

What I Have Tried:

  • I’ve tried creating the vision object once and passing it to both landmarkers, but I’m not sure if this is the correct approach or if there’s a better way to handle this.

Desired Outcome:
-I want to download the WASM file only once and use it to initialize both the HandLandmarker and FaceLandmarker.

Additional Context:

  • I’m using the latest version of Mediapipe.
  • Both landmarkers need to run concurrently for my application.
const vision = await FilesetResolver.forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm');
const initializeHandDetection = async () => {
      try {
          handLandmarker.current = await HandLandmarker.createFromOptions(vision, {
              baseOptions: {
                  modelAssetPath: hand_landmarker_task,
                  delegate: 'GPU',
              },
              numHands: 1,
              runningMode: 'VIDEO',
              minHandDetectionConfidence: 0.7,
              minTrackingConfidence: 0.7,
          });
      } catch (error) {
          console.error('Error initializing hand detection:', error);
      }
  };

  const initializeFaceLandMarker = async () => {
      try {
          faceLandmarker.current = await FaceLandmarker.createFromOptions(vision, {
              baseOptions: {
                  modelAssetPath: face_landmarker_task,
                  delegate: 'GPU',
              },
              numFaces: 1,
              minTrackingConfidence: 0.8,
              minFaceDetectionConfidence: 0.8,
              runningMode: 'VIDEO',
              outputFacialTransformationMatrixes: true,
          });
      } catch (error) {
          console.error('Error initializing face detection:', error);
          throw error;
      }
  };

  if (isHand) {
      initializeHandDetection();
  } else {
      initializeFaceDetection();
  }