Spaces:
Running
Running
| <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> | |