Skip to content

Add ORT worker proxy to prevent main thread locking, and service worker to cross-origin isolate which allows wasm threads #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions training/public/enable-threads.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
// NOTE: This file creates a service worker that cross-origin-isolates the page (read more here: https://web.dev/coop-coep/) which allows us to use wasm threads.
// Normally you would set the COOP and COEP headers on the server to do this, but Github Pages doesn't allow this, so this is a hack to do that.

/* Edited version of: coi-serviceworker v0.1.6 - Guido Zuidhof, licensed under MIT */
// From here: https://github.com/gzuidhof/coi-serviceworker
if(typeof window === 'undefined') { // This code only runs if it's inside the Service Worker
self.addEventListener("install", () => self.skipWaiting());
self.addEventListener("activate", e => e.waitUntil(self.clients.claim()));

async function handleFetch(request) {
if(request.cache === "only-if-cached" && request.mode !== "same-origin") {
return;
}

if(request.mode === "no-cors") { // We need to set `credentials` to "omit" for no-cors requests, per this comment: https://bugs.chromium.org/p/chromium/issues/detail?id=1309901#c7
request = new Request(request.url, {
cache: request.cache,
credentials: "omit",
headers: request.headers,
integrity: request.integrity,
destination: request.destination,
keepalive: request.keepalive,
method: request.method,
mode: request.mode,
redirect: request.redirect,
referrer: request.referrer,
referrerPolicy: request.referrerPolicy,
signal: request.signal,
});
}

let r = await fetch(request).catch(e => console.error(e));

if(r.status === 0) {
return r;
}

const headers = new Headers(r.headers);
headers.set("Cross-Origin-Embedder-Policy", "credentialless"); // or: require-corp
headers.set("Cross-Origin-Opener-Policy", "same-origin");

return new Response(r.body, { status: r.status, statusText: r.statusText, headers });
}

self.addEventListener("fetch", function(e) {
e.respondWith(handleFetch(e.request)); // respondWith must be executed synchonously (but can be passed a Promise)
});

} else { // This code initializes the service worker.
(async function() {
if(window.crossOriginIsolated) return; // Don't init service worker if we're already cross-origin isolated.

let registration = await navigator.serviceWorker.register(window.document.currentScript.src).catch(e => console.error("COOP/COEP Service Worker failed to register:", e));
if(registration) {
console.log("COOP/COEP Service Worker registered", registration.scope);

registration.addEventListener("updatefound", () => {
console.log("Reloading page to make use of updated COOP/COEP Service Worker.");
window.location.reload();
});

// If the registration is active, but it's not controlling the page
if(registration.active && !navigator.serviceWorker.controller) {
console.log("Reloading page to make use of COOP/COEP Service Worker.");
window.location.reload();
}
}
})();
}

// Code to deregister:
// let registrations = await navigator.serviceWorker.getRegistrations();
// for(let registration of registrations) {
// await registration.unregister();
// }
6 changes: 5 additions & 1 deletion training/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,11 @@

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="%PUBLIC_URL%/enable-threads.js"></script>
<script src="%PUBLIC_URL%/onnxruntime_web_build_inference_with_training_ops/ort.js"></script>
<script>
ort.env.wasm.proxy = true;
</script>
<div id="root"></div>
<!--
This HTML file is a template.
Expand All @@ -41,4 +45,4 @@
-->
</body>

</html>
</html>