microsoft / microsoft/onnxruntime-inference-examples

Webnn: Uncaught (in promise) Error: External mounted files are not available.

Open
#531 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

javascript QNN EP
Dominant language
C++
Stars
1.7k
Forks
414
Avg merge
1d 6h
Merged PRs (30d)
14

Description

I am trying to infer a model in Qualcomm NPU. I try to load the model and this is the error I get:

Image

This is my index.html code

<title>ONNX Runtime WebNN Example</title>

WebNN Image Classifier

Select an image to classify. <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.all.min.js"></script> <script src="main.js"></script>

This is my inference code while trying to infer on Qualcomm NPU (main.js):

const modelPath = 'model.onnx';
const classesPath = 'classes.txt';

const options = {
executionProviders: [
{
name: 'webnn',
deviceType: 'npu',
powerPreference: 'default',
},
],
};

let classLabels = [];

async function loadClasses() {
const response = await fetch(classesPath);
const text = await response.text();
classLabels = text.split('\n').map(label => label.trim()).filter(label => label.length > 0);
}

async function loadModel() {
try {
const session = await ort.InferenceSession.create(modelPath, options);
return session;
} catch (err) {
document.getElementById('result').textContent = Model load failed: ${err.message};
throw err;
}
}

function preprocessImage(imageElement) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 224;
canvas.height = 224;
ctx.drawImage(imageElement, 0, 0, 224, 224);
const imageData = ctx.getImageData(0, 0, 224, 224).data;

const input = new Float32Array(3 * 224 * 224);
for (let i = 0; i < 224 * 224; i++) {
input[i] = imageData[i * 4] / 255.0;
input[i + 224 * 224] = imageData[i * 4 + 1] / 255.0;
input[i + 2 * 224 * 224] = imageData[i * 4 + 2] / 255.0;
}

return new ort.Tensor('float32', input, [1, 3, 224, 224]);
}

async function classifyImage(file) {
const img = new Image();
img.src = URL.createObjectURL(file);
await img.decode();

const session = await loadModel();
const inputTensor = preprocessImage(img);

const feeds = { image_tensor: inputTensor }; // ✅ Correct input name
const results = await session.run(feeds);
const outputData = results.class_logits.data; // ✅ Correct output name

const topIndex = outputData.indexOf(Math.max(...outputData));
const predictedLabel = classLabels[topIndex] || Class ${topIndex};

document.getElementById('result').textContent = Prediction: ${predictedLabel};
}

document.getElementById('imageInput').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (file) {
await loadClasses();
classifyImage(file);
}
});

I don't know why I am getting this error

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the WebNN model load from index.html and main.js using the referenced model.onnx and classes.txt, then inspect where the external-mounted-files error is raised. Compare the browser, ONNX Runtime Web, WebNN, and Qualcomm NPU setup used by the report; done means the cause is identified and a verified loading configuration or documented limitation is provided.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
machine-learning, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.