Async simultaneously loading two mediapipe packages (Hand Pose + Selfie Segmentation) leads to loading error at load time.

[Harleyzheng]

Please make sure that this is a bug and also refer to the troubleshooting, FAQ documentation before raising any issues.

System information (Please provide as much relevant information as possible)

• Have I written custom code (as opposed to using a stock example script provided in MediaPipe):
  no

• OS Platform and Distribution (e.g., Linux Ubuntu 16.04, Android 11, iOS 14.4):
  macos 12

• Browser and version (e.g. Google Chrome, Safari) if the issue happens on browser:
  chrome

• Programming Language and version ( e.g. C++, Python, Java):
  javascript, node

• MediaPipe version:
  node_modules/@mediapipe/hands
  node_modules/@mediapipe/selfie_segmentation/

• Solution ( e.g. FaceMesh, Pose, Holistic ):
  Hand Pose + Selfie Segmentation

Describe the current behavior:
Async simultaneously loading two mediapipe packages (Hand Pose + Selfie Segmentation) leads to loading error at load time.
The hands_solution wasm incorrectly inter-loads selfie_segmentation_solution wasm code. We implemented a Mutex to force loading the two packages synchronously to resolve this issue.

Please see below error stack:

Uncaught (in promise) RuntimeError: abort(Module.arguments has been replaced with plain arguments_ (the initial value can be provided on Module, but after startup the value is only looked for on a local variable of that name)) at Error
    at jsStackTrace (:3000/mpss/selfie_segmentation_solution_simd_wasm_bin.js:9)
    at stackTrace (:3000/mpss/selfie_segmentation_solution_simd_wasm_bin.js:9)
    at abort (:3000/mpss/selfie_segmentation_solution_simd_wasm_bin.js:9)
    at Object.get (:3000/mpss/selfie_segmentation_solution_simd_wasm_bin.js:9)
    at :3000/mph/hands_solution_simd_wasm_bin.js:9
    at pa.h (:3000/static/js/vendors~main.chunk.js:3980)
    at G (:3000/static/js/vendors~main.chunk.js:2381)
    at sa.next (:3000/static/js/vendors~main.chunk.js:2411)
    at :3000/static/js/vendors~main.chunk.js:2444
    at new Promise (<anonymous>)
    at ta (:3000/static/js/vendors~main.chunk.js:2439)
    at H (:3000/static/js/vendors~main.chunk.js:2449)
    at :3000/static/js/vendors~main.chunk.js:3979
    at async Promise.all (:3000/index 0)
    at abort (:3000/mpss/selfie_segmentation_solution_simd_wasm_bin.js:9)
    at Object.get (:3000/mpss/selfie_segmentation_solution_simd_wasm_bin.js:9)
    at :3000/mph/hands_solution_simd_wasm_bin.js:9
    at pa.h (:3000/static/js/vendors~main.chunk.js:3980)
    at G (:3000/static/js/vendors~main.chunk.js:2381)
    at sa.next (:3000/static/js/vendors~main.chunk.js:2411)
    at :3000/static/js/vendors~main.chunk.js:2444
    at new Promise (<anonymous>)
    at ta (:3000/static/js/vendors~main.chunk.js:2439)
    at H (:3000/static/js/vendors~main.chunk.js:2449)
    at :3000/static/js/vendors~main.chunk.js:3979
    at async Promise.all (:3000/index 0)

Describe the expected behavior:
More than one solution engines should be loaded successfully at the same time.

Standalone code to reproduce the issue:
Provide a reproducible test case that is the bare minimum necessary to replicate the problem. If possible, please share a link to Colab/repo link /any notebook:

From codepen.io, simply run the following:
=======start========
const mpHands = window;

const selfieSegmentation = new SelfieSegmentation({locateFile: (file) => {
return https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation@0.1/${file};
}});
selfieSegmentation.initialize();

const config = {locateFile: (file: string) => {
return https://cdn.jsdelivr.net/npm/@mediapipe/hands@${mpHands.VERSION}/${file};
}};
const hands = new mpHands.Hands(config);
hands.initialize()

========end=========

selfie_segmentation_solution_simd_wasm_bin.js:9 Uncaught (in promise) RuntimeError: abort(Module.arguments has been replaced with plain arguments_ (the initial value can be provided on Module, but after startup the value is only looked for on a local variable of that name)) at Error
    at jsStackTrace (selfie_segmentation_solution_simd_wasm_bin.js:9)
    at stackTrace (selfie_segmentation_solution_simd_wasm_bin.js:9)
    at abort (selfie_segmentation_solution_simd_wasm_bin.js:9)
    at Object.get (selfie_segmentation_solution_simd_wasm_bin.js:9)
    at selfie_segmentation_solution_simd_wasm_bin.js:9
    at pa.h (hands.js:57)
    at G (hands.js:14)
    at sa.next (hands.js:15)
    at hands.js:15
    at new Promise (<anonymous>)
    at abort (selfie_segmentation_solution_simd_wasm_bin.js:9)
    at Object.get (selfie_segmentation_solution_simd_wasm_bin.js:9)
    at selfie_segmentation_solution_simd_wasm_bin.js:9
    at pa.h (hands.js:57)
    at G (hands.js:14)
    at sa.next (hands.js:15)
    at hands.js:15
    at new Promise (<anonymous>)
    at ta (hands.js:15)
    at H (hands.js:16)

[1o1w1]

+1

[tyrmullen]

Correct-- currently the initializers don't play nicely together. But you shouldn't need anything complicated-- just adding await before the .initialize() calls (specifically await selfieSegmentation.initialize()) should be sufficient.

However, leaving this bug open, as it would be a nice thing for us to have, although this isn't something I'll be able to tackle myself any time soon, so unassigning myself.

[mhays-google]

Definitely a useful feature, but we do not currently support loading multiple systems into the same page. There is no projection on when this functionality would be available.

[google-ml-butler]

Are you satisfied with the resolution of your issue?
Yes
No