added web worker example

diffusionstudio · Jul 7, 2024 · cb27a68 · cb27a68
1 parent 5da629f
commit cb27a68
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -26,11 +26,11 @@ const wav = await tts.predict({
   voiceId: 'en_US-hfc_female-medium',
 });
 
-// available in Web Worker
-
 const audio = new Audio();
 audio.src = URL.createObjectURL(wav);
 audio.play();
+
+// as seen in /example with Web Worker
 ```
 
 With the initial run of the predict function you will download the model which will then be stored in your [Origin private file system](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system). You can also do this manually in advance *(recommended)*, as follows:

diff --git a/example/index.ts b/example/index.ts
@@ -0,0 +1,28 @@
+import * as tts from '../src';
+import Worker from './worker.ts?worker';
+
+// required for e2e
+Object.assign(window, { tts });
+
+document.querySelector('#app')!.innerHTML = `
+<button id="btn" type="button">Predict</button>
+`
+
+document.getElementById('btn')?.addEventListener('click', async () => {
+  const worker = new Worker();
+
+  worker.postMessage({
+    type: 'init',
+    text: "As the waves crashed against the shore, they carried tales of distant lands and adventures untold.",
+    voiceId: 'en_US-hfc_female-medium',
+  });
+
+  worker.addEventListener('message', (event: MessageEvent<{ type: 'result', audio: Blob }>) => {
+    if (event.data.type != 'result') return;
+
+    const audio = new Audio();
+    audio.src = URL.createObjectURL(event.data.audio);
+    audio.play();
+    worker.terminate();
+  });
+});
diff --git a/example/vite-env.d.ts b/example/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/example/worker.ts b/example/worker.ts
@@ -0,0 +1,14 @@
+import * as tts from '../src/index';
+
+async function main(event: MessageEvent<tts.InferenceConfg & { type: 'init' }>) {
+  if (event.data?.type != 'init') return;
+
+  const blob = await tts.predict({
+    text: event.data.text,
+    voiceId: event.data.voiceId,
+  });
+
+  self.postMessage({ type: 'result', audio: blob })
+}
+
+self.addEventListener('message', main);
diff --git a/index.html b/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/example/index.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -48,12 +48,12 @@
     "test": "npx playwright test --project=chromium"
   },
   "devDependencies": {
+    "@playwright/test": "^1.35.1",
     "typescript": "^5.2.2",
     "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1",
-    "@playwright/test": "^1.35.1"
+    "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {
     "onnxruntime-web": "^1.18.0"
   }
-}
+}
diff --git a/src/main.ts b/src/main.ts