radames/OpenAI-CLIP-JavaScript
7
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="utf-8">5 <meta name="viewport" content="width=device-width">6 <title>ONNX Bug(?): Loading Several Image Model Sessions at Once</title>7 </head>8 <body>9 <style> body * { font-family: monospace; } </style>10 <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.10.0/dist/ort.js"></script>11 12 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>13 <br>14 Downloading model: <progress id="imageModelLoadingProgressBarEl" value="0"></progress> <span id="imageModelLoadingMbEl"></span>15 <br>16 Number of initialized sessions so far: <span id="workerInitProgressEl"></span>17 <br>18 <button onclick="initializeWorkers()">click here to start</button>19 <br>20 (see browser console for errors)21 22 <script>23 let onnxImageSessions = [];24 async function initializeWorkers() {25 numWorkersEl.disabled = true;26 27 let imageOnnxBlob = await downloadBlobWithProgress('https://huggingface.co/rocca/openai-clip-js/resolve/main/clip-image-vit-32-float32.onnx', function(e) {28 let ratio = e.loaded / e.total;29 imageModelLoadingProgressBarEl.value = ratio;30 imageModelLoadingMbEl.innerHTML = Math.round(ratio*352)+" MB";31 });32 33 let imageModelUrl = window.URL.createObjectURL(imageOnnxBlob);34 35 let numImageWorkers = Number(numWorkersEl.value);36 37 ort.env.wasm.numThreads = 1;38 39 for(let i = 0; i < numImageWorkers; i++) {40 let session = await ort.InferenceSession.create(imageModelUrl, { executionProviders: ["wasm"] }); // webgl is not compatible with this model (need to tweak conversion data/op types)41 onnxImageSessions.push(session);42 workerInitProgressEl.innerHTML = i+1;43 }44 45 window.URL.revokeObjectURL(imageModelUrl);46 47 console.log("FINISHED");48 }49 50 function downloadBlobWithProgress(url, onProgress) {51 return new Promise((res, rej) => {52 var blob;53 var xhr = new XMLHttpRequest();54 xhr.open('GET', url, true);55 xhr.responseType = 'arraybuffer';56 xhr.onload = function(e) {57 blob = new Blob([this.response]); 58 };59 xhr.onprogress = onProgress;60 xhr.onloadend = function(e){61 res(blob);62 }63 xhr.send();64 });65 }66 </script>67 </body>68</html>69