Switching backends yields error - Failed to execute 'dispatch' on 'MLContext': Invalid inputs: The context of MLGraph doesn't match the context of the MLTensor with name "pixel_values"

[ibelem]

Repro Steps:

1. Run WebNN on a NPU supported device e.g. Intel LNL
2. Enable WebNN on Chrome Canary
3. Visit Image Classification demo on NPU https://microsoft.github.io/webnn-developer-preview/demos/image-classification/?provider=webnn&devicetype=npu&model=mobilenet-v2&run=1
4. Click Classify button

Actual Result

PASS

Repro Steps: (cont.)

5. Click WebNN GPU button
6. Click Classify button

Actual Result

Failed to execute 'dispatch' on 'MLContext': Invalid inputs: The context of MLGraph doesn't match the context of the MLTensor with name "pixel_values"

Note

Error also occurs when switching from WebNN GPU to WebNN NPU

Environment

• Google Chrome Version 133.0.6887.4 (Official Build) canary (64-bit)

This version of Transformers.js distribution was built using the following components:

1. ONNX Runtime Web: 1.21.0-dev.20241122-a2ba3cb547
2. Transformers.js: v3 branch
3. Get performance data: patch

Related Issues

• Trying image classification demo twice yields error - Failed to execute 'dispatch' on 'MLContext': Invalid inputs: The context of MLGraph doesn't match the context of the MLTensor with name "pixel_values". #51
• [Image Classification] Failed to execute 'dispatch' on 'MLContext': Invalid inputs #46

Related Fixes

• [WebNN EP] Add cache for MLContexts in the WebNNBackend onnxruntime#22510

@egalli Please help to check this issue. Thanks!

CC @fdwr @Honry

[ibelem]

@egalli

1. Add let classifier; before main()

2. Update

const classifier = await transformers.pipeline("image-classification", modelPath, options);

to

classifier = await transformers.pipeline("image-classification", modelPath, options);

3. Add codes in updateBackend()

        if (classifier) {
            await classifier.dispose();

            // let model = classifier.model.sessions?.model;
            // await model.release();

            // classifier = null;
            console.log("classifier.dispose() completed");
        }

Added codes above in demo application side (index.js), the classifier dispose() method was invoked successfully, but the issue still exists when clicking Classify button. Do you have any insights? Thanks!

[egalli]

It looks like we weren't checking the context before attempting to reuse existing MLTensors. I have created a PR fthat fixes the issue microsoft/onnxruntime#23100