<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ONNX Bug(?): Loading Several Image Model Sessions at Once</title>
</head>
<body>
<style> body * { font-family: monospace; } </style>
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.10.0/dist/ort.js"></script>
Choose number of sessions to create: <input id="numWorkersEl" type="range" min="1" max="10" value="8" oninput="numWorkersDisplayEl.textContent=this.value"> <span id="numWorkersDisplayEl"></span> <script>numWorkersEl.max = navigator.hardwareConcurrency; numWorkersDisplayEl.textContent=numWorkersEl.value;</script>
<br>
Downloading model: <progress id="imageModelLoadingProgressBarEl" value="0"></progress> <span id="imageModelLoadingMbEl"></span>
<br>
Number of initialized sessions so far: <span id="workerInitProgressEl"></span>
<br>
<button onclick="initializeWorkers()">click here to start</button>
<br>
(see browser console for errors)
<script>
let onnxImageSessions = [];
async function initializeWorkers() {
numWorkersEl.disabled = true;
let imageOnnxBlob = await downloadBlobWithProgress('https://huggingface.co/rocca/openai-clip-js/resolve/main/clip-image-vit-32-float32.onnx', function(e) {
let ratio = e.loaded / e.total;
imageModelLoadingProgressBarEl.value = ratio;
imageModelLoadingMbEl.innerHTML = Math.round(ratio*352)+" MB";
});
let imageModelUrl = window.URL.createObjectURL(imageOnnxBlob);
let numImageWorkers = Number(numWorkersEl.value);
ort.env.wasm.numThreads = 1;
for(let i = 0; i < numImageWorkers; i++) {
let session = await ort.InferenceSession.create(imageModelUrl, { executionProviders: ["wasm"] }); // webgl is not compatible with this model (need to tweak conversion data/op types)
onnxImageSessions.push(session);
workerInitProgressEl.innerHTML = i+1;
}
window.URL.revokeObjectURL(imageModelUrl);
console.log("FINISHED");
}
function downloadBlobWithProgress(url, onProgress) {
return new Promise((res, rej) => {
var blob;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
blob = new Blob([this.response]);
};
xhr.onprogress = onProgress;
xhr.onloadend = function(e){
res(blob);
}
xhr.send();
});
}
</script>
</body>
</html>