Fix cross-origin isolation to resolve TTS crash and slow ASR on HuggingFace (#4)

- Add cross-origin isolation via service worker to fix TTS and ASR on HuggingFace (934bcfd49b68a209e8d0a1e8681a099962229a5f)
- Fix infinite reload loop in coi-serviceworker on HuggingFace (d85d217bc786d098d9fb5cd24f307223359ed6ab)


Co-authored-by: Pau Labarta Bajo <Paulescu@users.noreply.huggingface.co>

index.html

@@ -613,6 +613,7 @@
 
   <div class="drop-overlay" id="dropOverlay">Drop audio file here</div>
 
+  <script src="./coi-serviceworker.js"></script>
   <script type="module" src="./main.js"></script>
 </body>
 </html>

public/coi-serviceworker.js

@@ -0,0 +1,76 @@
+/* coi-serviceworker - enables cross-origin isolation via service worker
+ * Based on https://github.com/gzuidhof/coi-serviceworker (MIT License)
+ *
+ * Without Cross-Origin-Opener-Policy + Cross-Origin-Embedder-Policy headers,
+ * SharedArrayBuffer is unavailable, ONNX Runtime WASM falls back to single-threaded,
+ * and compute-heavy models (audio_encoder) become unusably slow.
+ *
+ * This service worker injects those headers on every response so the app works
+ * on static hosts (e.g. HuggingFace Spaces) that don't set them server-side.
+ */
+
+if (typeof window === "undefined") {
+  // ---- Service worker context ----
+  self.addEventListener("install", () => self.skipWaiting());
+  self.addEventListener("activate", (e) => e.waitUntil(self.clients.claim()));
+
+  self.addEventListener("fetch", (e) => {
+    // Skip non-GET and opaque "only-if-cached" requests (Chrome quirk)
+    if (
+      e.request.cache === "only-if-cached" &&
+      e.request.mode !== "same-origin"
+    ) {
+      return;
+    }
+
+    e.respondWith(
+      fetch(e.request)
+        .then((r) => {
+          // Opaque responses can't be modified; return as-is
+          if (r.status === 0) return r;
+
+          const headers = new Headers(r.headers);
+          headers.set("Cross-Origin-Opener-Policy", "same-origin");
+          headers.set("Cross-Origin-Embedder-Policy", "require-corp");
+
+          return new Response(r.body, {
+            status: r.status,
+            statusText: r.statusText,
+            headers,
+          });
+        })
+        .catch((err) => {
+          console.error("[coi-serviceworker] fetch error:", err);
+        })
+    );
+  });
+} else {
+  // ---- Page context: register service worker ----
+  if (
+    !window.crossOriginIsolated &&
+    window.isSecureContext &&
+    "serviceWorker" in navigator
+  ) {
+    navigator.serviceWorker
+      .register(document.currentScript.src)
+      .then((reg) => {
+        // SW already active but page loaded without isolation: reload once to activate headers.
+        // Guard with sessionStorage to avoid an infinite loop in contexts where
+        // crossOriginIsolated can never become true (e.g. HuggingFace iframe embeds).
+        if (reg.active && !window.crossOriginIsolated) {
+          if (!sessionStorage.getItem("coi-reloaded")) {
+            sessionStorage.setItem("coi-reloaded", "1");
+            window.location.reload();
+          }
+        }
+      })
+      .catch((err) =>
+        console.warn("[coi-serviceworker] registration failed:", err)
+      );
+
+    // Reload whenever the SW takes control (first install or update)
+    navigator.serviceWorker.addEventListener("controllerchange", () =>
+      window.location.reload()
+    );
+  }
+}

vite.config.js

@@ -15,4 +15,10 @@ export default defineConfig({
       'Cross-Origin-Embedder-Policy': 'require-corp',
     },
   },
+  preview: {
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  },
 });