feat: KittenTTS WebGPU browser demo

Browser TTS using KittenML models with ONNX Runtime Web (WebGPU/WASM).
Phonemization via xenova/phonemizer.js. No server needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

README.md

@@ -1,10 +1,37 @@
 ---
 title: KittenTTS WebGPU
-emoji: 🔥
-colorFrom: yellow
-colorTo: blue
+emoji: 🐱🔥
+colorFrom: purple
+colorTo: indigo
 sdk: static
 pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# KittenTTS WebGPU
+
+Text-to-speech running entirely in your browser via WebGPU/WASM. No server needed.
+
+## Credits
+
+- **Models**: [KittenML](https://huggingface.co/KittenML) — ultra-lightweight TTS models based on StyleTTS 2
+- **Original Demo**: [KittenTTS-Demo](https://huggingface.co/spaces/KittenML/KittenTTS-Demo)
+- **Transformers.js v4**: [huggingface/transformers.js](https://github.com/huggingface/transformers.js) — ML inference in the browser
+- **phonemizer.js**: [xenova/phonemizer.js](https://github.com/xenova/phonemizer.js) — eSpeak-NG phonemization for the web by [Xenova](https://github.com/xenova)
+- **ONNX Runtime Web**: [onnxruntime](https://onnxruntime.ai) — cross-platform ML inference
+- **Kokoro Web**: [xenova/kokoro-web](https://github.com/xenova/kokoro-web) — reference implementation for browser TTS
+
+## Development
+
+```bash
+npm install
+npm run dev
+```
+
+## Build
+
+```bash
+npm run build
+```
+
+Output goes to `dist/` — deploy as a static HuggingFace Space or any static host.

assets/index-Ck4Qq8gn.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#111;--surface:#1a1a1a;--surface-2:#222;--border:#333;--text:#e5e5e5;--text-muted:#888;--accent:#c084fc;--accent-dim:#c084fc26;--radius:8px;--font:system-ui, -apple-system, "Segoe UI", sans-serif;--mono:ui-monospace, "SF Mono", Consolas, monospace}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}.container{flex-direction:column;max-width:720px;min-height:100vh;margin:0 auto;padding:2rem 1.5rem;display:flex}header{text-align:center;margin-bottom:2rem;position:relative}header h1{letter-spacing:-.02em;margin-bottom:.25rem;font-size:1.75rem;font-weight:600}.logo{font-size:1.5rem}.subtitle{color:var(--text-muted);font-size:.9rem}.badge{font-size:.7rem;font-weight:600;font-family:var(--mono);letter-spacing:.05em;border-radius:999px;margin-top:.5rem;padding:.15rem .6rem;display:inline-block}.badge-gpu{color:#4ade80;background:#4ade8026;border:1px solid #4ade804d}.badge-wasm{color:#fbbf24;background:#fbbf2426;border:1px solid #fbbf244d}main{flex-direction:column;flex:1;gap:1.5rem;display:flex}label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;font-size:.8rem;font-weight:500;display:block}textarea{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);font-family:var(--font);resize:vertical;outline:none;padding:.75rem;font-size:.95rem;transition:border-color .15s}textarea:focus{border-color:var(--accent)}textarea::placeholder{color:#555}.controls-row{grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.75rem;display:grid}select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);font-family:var(--font);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;outline:none;padding:.5rem 2rem .5rem .75rem;font-size:.9rem}select:focus{border-color:var(--accent)}select:disabled{opacity:.5;cursor:not-allowed}.speed-row{margin-top:.75rem}.speed-row label{font-family:var(--mono);font-size:.75rem}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;height:4px}.generate-btn{background:var(--accent);color:#111;border-radius:var(--radius);width:100%;font-family:var(--font);cursor:pointer;border:none;margin-top:1rem;padding:.7rem 1.5rem;font-size:.9rem;font-weight:600;transition:opacity .15s}.generate-btn:hover:not(:disabled){opacity:.9}.generate-btn:disabled{opacity:.4;cursor:not-allowed}.output-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}.audio-result{flex-direction:column;gap:.5rem;display:flex}.audio-player{border-radius:var(--radius);width:100%}.duration{color:var(--text-muted);font-size:.75rem;font-family:var(--mono)}.audio-placeholder{text-align:center;color:#555;padding:2rem 1rem;font-size:.85rem}.examples-grid{flex-direction:column;gap:.5rem;display:flex}.example-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);font-family:var(--font);cursor:pointer;text-align:left;align-items:baseline;gap:.75rem;padding:.6rem .75rem;font-size:.85rem;transition:border-color .15s;display:flex}.example-btn:hover:not(:disabled){border-color:var(--accent)}.example-btn:disabled{opacity:.4;cursor:not-allowed}.example-voice{font-family:var(--mono);color:var(--accent);background:var(--accent-dim);border-radius:4px;flex-shrink:0;padding:.1rem .4rem;font-size:.75rem;font-weight:600}.example-text{color:var(--text-muted)}.error-msg{color:#f87171;border-radius:var(--radius);background:#ef44441a;border:1px solid #ef44444d;padding:.75rem 1rem;font-size:.85rem}footer{border-top:1px solid var(--border);text-align:center;color:var(--text-muted);flex-direction:column;gap:.25rem;margin-top:2.5rem;padding-top:1.5rem;font-size:.75rem;display:flex}footer a{color:var(--text-muted);text-underline-offset:2px;text-decoration:underline;transition:color .15s}footer a:hover{color:var(--text)}@media (width<=480px){.container{padding:1.25rem 1rem}.controls-row{grid-template-columns:1fr}header h1{font-size:1.5rem}}

assets/ort-wasm-simd-threaded.jsep-Bzonanhp.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:66dd6edabc43c9ec1df860978baa403c6610de2f3b3bbfdfcfcbbfadf7677132
+size 25096522

assets/worker-Br1yesTn.js

@@ -0,0 +1 @@
+const e=[`$`,...`;:,.!?¡¿—…"«»"" `,...`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`,...`ɑɐɒæɓʙβɔɕçɗɖðʤəɘɚɛɜɝɞɟʄɡɠɢʛɦɧħɥʜɨɪʝɭɬɫɮʟɱɯɰŋɳɲɴøɵɸθœɶʘɹɺɾɻʀʁɽʂʃʈʧʉʊʋⱱʌɣɤʍχʎʏʑʐʒʔʡʕʢǀǁǂǃˈˌːˑʼʴʰʱʲʷˠˤ˞↓↑→↗↘'̩'ᵻ`],t={};for(let n=0;n<e.length;n++)t[e[n]]=n;function n(e){let n=[];for(let r of e){let e=t[r];e!==void 0&&n.push(e)}return n}function r(e){let t=n(e);return t.unshift(0),t.push(10),t.push(0),t}function i(e){if(e[0]!==147||String.fromCharCode(e[1],e[2],e[3],e[4],e[5])!==`NUMPY`)throw Error(`Not a valid .npy file`);let t=e[6],n=new DataView(e.buffer,e.byteOffset,e.byteLength),r,i;t===1?(r=n.getUint16(8,!0),i=10):(r=n.getUint32(8,!0),i=12);let a=new TextDecoder().decode(e.slice(i,i+r)),o=a.match(/'descr'\s*:\s*'([^']+)'/),s=a.match(/'shape'\s*:\s*\(([^)]*)\)/);if(!o)throw Error(`Could not parse dtype from .npy header: `+a);return{descr:o[1],shape:s?s[1].split(`,`).map(e=>parseInt(e.trim(),10)).filter(e=>!isNaN(e)):[],dataOffset:i+r}}function a(e){let{descr:t,shape:n,dataOffset:r}=i(e),a=e.slice(r),o=new ArrayBuffer(a.length);new Uint8Array(o).set(a);let s;if(t===`<f4`||t===`float32`)s=new Float32Array(o);else if(t===`<f8`||t===`float64`){let e=new Float64Array(o);s=new Float32Array(e.length);for(let t=0;t<e.length;t++)s[t]=e[t]}else throw Error(`Unsupported npy dtype: `+t);return{data:s,shape:n}}async function o(e){let t=new Uint8Array(e),n=new DataView(e),r=new Map,i=-1;for(let e=t.length-22;e>=0;e--)if(n.getUint32(e,!0)===101010256){i=e;break}if(i===-1)throw Error(`Could not find End of Central Directory`);let a=n.getUint32(i+16,!0),o=n.getUint16(i+10,!0),s=[],c=a;for(let e=0;e<o&&n.getUint32(c,!0)===33639248;e++){let e=n.getUint16(c+10,!0),r=n.getUint32(c+20,!0),i=n.getUint32(c+24,!0),a=n.getUint16(c+28,!0),o=n.getUint16(c+30,!0),l=n.getUint16(c+32,!0),u=n.getUint32(c+42,!0),d=new TextDecoder().decode(t.slice(c+46,c+46+a));s.push({fileName:d,compressedSize:r,uncompressedSize:i,localHeaderOffset:u,compressionMethod:e}),c+=46+a+o+l}for(let e of s){let i=e.localHeaderOffset,a=n.getUint16(i+26,!0),o=n.getUint16(i+28,!0),s=i+30+a+o,c;if(e.compressionMethod===0)c=t.slice(s,s+e.uncompressedSize);else if(e.compressionMethod===8){let n=t.slice(s,s+e.compressedSize),r=new DecompressionStream(`deflate-raw`),i=r.writable.getWriter();i.write(n),i.close();let a=r.readable.getReader(),o=[],l=0;for(;;){let{done:e,value:t}=await a.read();if(e)break;o.push(t),l+=t.length}c=new Uint8Array(l);let u=0;for(let e of o)c.set(e,u),u+=e.length}else{console.warn(`Skipping ${e.fileName}: unsupported compression ${e.compressionMethod}`);continue}r.set(e.fileName,c)}return r}async function s(e){let t=await fetch(e);if(!t.ok)throw Error(`Failed to fetch voices: ${t.status}`);let n=await o(await t.arrayBuffer()),r={};for(let[e,t]of n){if(!e.endsWith(`.npy`))continue;let n=e.replace(/\.npy$/,``),{data:i,shape:o}=a(t);r[n]={data:i,shape:[o[0]||1,o[1]||i.length]}}return r}let c,l;const u=[`int8`];let d=null,f={},p=null,m=`wasm`;function h(e,t){return`https://huggingface.co/${e}/resolve/main/${t}`}async function g(){try{return`gpu`in navigator?!!await navigator.gpu.requestAdapter():!1}catch{return!1}}async function _(e){self.postMessage({type:`status`,message:`Detecting hardware...`});let t=await g();self.postMessage({type:`status`,message:`Loading runtime...`});let[n,r]=await Promise.all([import(`./ort.bundle.min-DL658BJE.js`),import(`./phonemizer-BgK0uh4o.js`)]);l=n,c=r.phonemize,self.postMessage({type:`status`,message:`Loading config...`});let i=h(e,`config.json`);p=await(await fetch(i)).json();let a=p.model||e.split(`/`).pop()||``,o=u.some(e=>a.includes(e));m=t&&!o?`webgpu`:`wasm`,t&&o&&console.log(`[KittenTTS] Using WASM for "${a}" (int8 models produce NaN on WebGPU)`),self.postMessage({type:`device`,device:m}),self.postMessage({type:`status`,message:`Downloading model & voices...`});let _=h(e,p.model_file),v=(async()=>{let e=await fetch(_);if(!e.ok)throw Error(`Failed to fetch model: ${e.status}`);let t=parseInt(e.headers.get(`content-length`)||`0`,10),n=e.body.getReader(),r=[],i=0;for(;;){let{done:e,value:a}=await n.read();if(e)break;if(r.push(a),i+=a.length,t>0){let e=Math.round(i/t*100),n=(i/1024/1024).toFixed(1);self.postMessage({type:`status`,message:`Downloading model... ${e}% (${n} MB)`})}}let a=new Uint8Array(i),o=0;for(let e of r)a.set(e,o),o+=e.length;return a.buffer})(),y=s(h(e,p.voices)),[b,x]=await Promise.all([v,y]);f=x,self.postMessage({type:`status`,message:`Initializing ${m.toUpperCase()} session...`});let S={executionProviders:m===`webgpu`?[`webgpu`]:[`wasm`]};m===`wasm`&&(l.env.wasm.numThreads=1),d=await l.InferenceSession.create(b,S);let C=p.voice_aliases?Object.keys(p.voice_aliases):Object.keys(f);self.postMessage({type:`ready`,voices:C,device:m,modelName:p.name})}function v(e){return e=e.trim(),e&&(`.!?,;:`.includes(e[e.length-1])||(e+=`,`),e)}function y(e,t=400){let n=e.match(/[^.!?]*[.!?]+|[^.!?]+$/g)||[e],r=[];for(let e of n)if(e=e.trim(),e)if(e.length<=t)r.push(v(e));else{let n=e.split(/\s+/),i=``;for(let e of n)i.length+e.length+1<=t?i+=(i?` `:``)+e:(i&&r.push(v(i)),i=e);i&&r.push(v(i))}return r}function b(e){return e.match(/[\p{L}\p{N}_]+|[^\p{L}\p{N}_\s]/gu)||[]}async function x(e,t,n){if(!d||!p)throw Error(`Model not loaded`);let i=t;p.voice_aliases?.[t]&&(i=p.voice_aliases[t]);let a=f[i];if(!a)throw Error(`Voice "${t}" not found`);p.speed_priors?.[i]&&(n*=p.speed_priors[i]);let o=r(b((await c(e,`en-us`))[0]||``).join(` `)),s=Math.min(e.length,a.shape[0]-1),u=a.shape[1],m=a.data.slice(s*u,(s+1)*u),h=new l.Tensor(`int64`,BigInt64Array.from(o.map(BigInt)),[1,o.length]),g=new l.Tensor(`float32`,m,[1,u]),_=new l.Tensor(`float32`,new Float32Array([n]),[1]),v=(await d.run({input_ids:h,style:g,speed:_}))[d.outputNames[0]].data;return v.slice(0,Math.max(0,v.length-5e3))}async function S(e,t,n){try{let r=y(e);self.postMessage({type:`status`,message:`Generating (${r.length} chunk${r.length>1?`s`:``})...`});let i=[];for(let e=0;e<r.length;e++){self.postMessage({type:`progress`,current:e+1,total:r.length});let a=await x(r[e],t,n);i.push(a)}let a=i.reduce((e,t)=>e+t.length,0),o=new Float32Array(a),s=0;for(let e of i)o.set(e,s),s+=e.length;self.postMessage({type:`audio`,audio:o.buffer,sampleRate:24e3},{transfer:[o.buffer]})}catch(e){self.postMessage({type:`error`,error:e.message||String(e)})}}self.addEventListener(`message`,async e=>{let{action:t,...n}=e.data;switch(t){case`load`:try{await _(n.repoId)}catch(e){console.error(`[KittenTTS Worker] Load error:`,e),self.postMessage({type:`error`,error:e.message||String(e)})}break;case`generate`:await S(n.text,n.voice,n.speed);break}}),self.addEventListener(`error`,e=>{self.postMessage({type:`error`,error:e.message||`Unknown worker error`})}),self.addEventListener(`unhandledrejection`,e=>{self.postMessage({type:`error`,error:e.reason?.message||String(e.reason)})});

index.html

@@ -1,19 +1,14 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>KittenTTS — Browser TTS with WebGPU</title>
+    <meta name="description" content="Text-to-speech running entirely in your browser via WebGPU. Powered by KittenML models and Transformers.js v4." />
+    <script type="module" crossorigin src="/assets/index-CcptzfjJ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Ck4Qq8gn.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
 </html>

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "kitten-tts-web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "^4.0.0-next.8",
+    "onnxruntime-web": "^1.25.0-dev.20260307-d626b568e0",
+    "phonemizer": "^1.2.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@webgpu/types": "^0.1.69",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1"
+  }
+}

src/App.tsx

@@ -0,0 +1,387 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+
+const MODELS: Record<string, string> = {
+  "Nano Int8 (15M · Fastest)": "KittenML/kitten-tts-nano-0.8-int8",
+  "Nano FP32 (15M)": "KittenML/kitten-tts-nano-0.8-fp32",
+  "Micro (40M · Balanced)": "KittenML/kitten-tts-micro-0.8",
+  "Mini (80M · Best Quality)": "KittenML/kitten-tts-mini-0.8",
+};
+
+const DEFAULT_MODEL = "Nano FP32 (15M)";
+
+const EXAMPLES = [
+  {
+    text: "Space is a three-dimensional continuum containing positions and directions.",
+    voice: "Jasper",
+  },
+  {
+    text: "She picked up her coffee and walked toward the window.",
+    voice: "Luna",
+  },
+  {
+    text: "The sun set slowly over the calm, quiet lake.",
+    voice: "Bella",
+  },
+];
+
+type Status = "idle" | "loading" | "ready" | "generating" | "error";
+
+export default function App() {
+  const [text, setText] = useState("");
+  const [model, setModel] = useState(DEFAULT_MODEL);
+  const [voice, setVoice] = useState("Jasper");
+  const [speed, setSpeed] = useState(1.0);
+  const [voices, setVoices] = useState<string[]>([]);
+  const [status, setStatus] = useState<Status>("idle");
+  const [statusMsg, setStatusMsg] = useState("");
+  const [device, setDevice] = useState("");
+  const [progress, setProgress] = useState({ current: 0, total: 0 });
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [duration, setDuration] = useState<number | null>(null);
+
+  const workerRef = useRef<Worker | null>(null);
+  const genStartRef = useRef<number>(0);
+
+  const initWorker = useCallback(() => {
+    if (workerRef.current) workerRef.current.terminate();
+
+    const worker = new Worker(new URL("./worker.ts", import.meta.url), {
+      type: "module",
+    });
+    workerRef.current = worker;
+
+    worker.addEventListener("error", (e) => {
+      console.error("Worker error:", e);
+      setError(`Worker failed: ${e.message}`);
+      setStatus("error");
+      setStatusMsg("");
+    });
+
+    worker.addEventListener("message", (e) => {
+      const msg = e.data;
+      switch (msg.type) {
+        case "status":
+          setStatusMsg(msg.message);
+          break;
+        case "device":
+          setDevice(msg.device);
+          break;
+        case "ready":
+          setStatus("ready");
+          setVoices(msg.voices);
+          setStatusMsg(`${msg.modelName} loaded`);
+          break;
+        case "progress":
+          setProgress({ current: msg.current, total: msg.total });
+          break;
+        case "audio": {
+          const audioData = new Float32Array(msg.audio);
+          const blob = float32ToWav(audioData, msg.sampleRate);
+          const url = URL.createObjectURL(blob);
+          setAudioUrl((prev) => {
+            if (prev) URL.revokeObjectURL(prev);
+            return url;
+          });
+          setDuration(
+            Math.round(performance.now() - genStartRef.current)
+          );
+          setStatus("ready");
+          setStatusMsg("Done!");
+          break;
+        }
+        case "error":
+          setError(msg.error);
+          setStatus("error");
+          setStatusMsg("");
+          break;
+      }
+    });
+
+    return worker;
+  }, []);
+
+  const loadModel = useCallback(
+    (modelKey: string) => {
+      const worker = workerRef.current || initWorker();
+      setStatus("loading");
+      setError(null);
+      setAudioUrl(null);
+      setDuration(null);
+      setStatusMsg("Starting...");
+      worker.postMessage({ action: "load", repoId: MODELS[modelKey] });
+    },
+    [initWorker]
+  );
+
+  useEffect(() => {
+    loadModel(model);
+    return () => {
+      workerRef.current?.terminate();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleModelChange = (newModel: string) => {
+    setModel(newModel);
+    loadModel(newModel);
+  };
+
+  const handleGenerate = () => {
+    if (!text.trim() || status !== "ready") return;
+    setStatus("generating");
+    setError(null);
+    setDuration(null);
+    setProgress({ current: 0, total: 0 });
+    genStartRef.current = performance.now();
+    workerRef.current?.postMessage({ action: "generate", text, voice, speed });
+  };
+
+  const handleExample = (ex: (typeof EXAMPLES)[0]) => {
+    setText(ex.text);
+    setVoice(ex.voice);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      handleGenerate();
+    }
+  };
+
+  return (
+    <div className="container">
+      <header>
+        <h1>
+          <span className="logo">🐱</span> KittenTTS
+        </h1>
+        <p className="subtitle">
+          Text-to-speech running entirely in your browser
+        </p>
+        {device && (
+          <span
+            className={`badge ${device === "webgpu" ? "badge-gpu" : "badge-wasm"}`}
+          >
+            {device.toUpperCase()}
+          </span>
+        )}
+      </header>
+
+      <main>
+        <div className="input-section">
+          <label htmlFor="text-input">Text</label>
+          <textarea
+            id="text-input"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Enter text to synthesize…"
+            rows={5}
+          />
+
+          <div className="controls-row">
+            <div className="control">
+              <label htmlFor="model-select">Model</label>
+              <select
+                id="model-select"
+                value={model}
+                onChange={(e) => handleModelChange(e.target.value)}
+                disabled={status === "loading" || status === "generating"}
+              >
+                {Object.keys(MODELS).map((m) => (
+                  <option key={m} value={m}>
+                    {m}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="control">
+              <label htmlFor="voice-select">Voice</label>
+              <select
+                id="voice-select"
+                value={voice}
+                onChange={(e) => setVoice(e.target.value)}
+                disabled={voices.length === 0}
+              >
+                {voices.map((v) => (
+                  <option key={v} value={v}>
+                    {v}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className="speed-row">
+            <label htmlFor="speed-slider">Speed: {speed.toFixed(2)}x</label>
+            <input
+              id="speed-slider"
+              type="range"
+              min={0.5}
+              max={2.0}
+              step={0.05}
+              value={speed}
+              onChange={(e) => setSpeed(parseFloat(e.target.value))}
+            />
+          </div>
+
+          <button
+            className="generate-btn"
+            onClick={handleGenerate}
+            disabled={status !== "ready" || !text.trim()}
+          >
+            {status === "generating"
+              ? progress.total > 0
+                ? `Generating ${progress.current}/${progress.total}…`
+                : "Generating…"
+              : status === "loading"
+                ? "Loading model…"
+                : "Generate Speech"}
+          </button>
+        </div>
+
+        <div className="output-section">
+          <label>Output</label>
+          {audioUrl ? (
+            <div className="audio-result">
+              <audio controls src={audioUrl} className="audio-player" />
+              {duration !== null && (
+                <span className="duration">
+                  Generated in {(duration / 1000).toFixed(1)}s
+                </span>
+              )}
+            </div>
+          ) : (
+            <div className="audio-placeholder">
+              {status === "loading" || status === "generating"
+                ? statusMsg
+                : "Audio will appear here"}
+            </div>
+          )}
+        </div>
+
+        <div className="examples">
+          <label>Examples</label>
+          <div className="examples-grid">
+            {EXAMPLES.map((ex, i) => (
+              <button
+                key={i}
+                className="example-btn"
+                onClick={() => handleExample(ex)}
+                disabled={status !== "ready"}
+              >
+                <span className="example-voice">{ex.voice}</span>
+                <span className="example-text">{ex.text}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {error && <div className="error-msg">{error}</div>}
+      </main>
+
+      <footer>
+        <p>
+          Models by{" "}
+          <a
+            href="https://huggingface.co/KittenML"
+            target="_blank"
+            rel="noopener"
+          >
+            KittenML
+          </a>
+          {" · "}
+          Original demo:{" "}
+          <a
+            href="https://huggingface.co/spaces/KittenML/KittenTTS-Demo"
+            target="_blank"
+            rel="noopener"
+          >
+            KittenTTS-Demo
+          </a>
+        </p>
+        <p>
+          Powered by{" "}
+          <a
+            href="https://github.com/huggingface/transformers.js"
+            target="_blank"
+            rel="noopener"
+          >
+            Transformers.js v4
+          </a>
+          {" · "}
+          <a
+            href="https://github.com/xenova/phonemizer.js"
+            target="_blank"
+            rel="noopener"
+          >
+            phonemizer.js
+          </a>{" "}
+          by{" "}
+          <a
+            href="https://github.com/xenova"
+            target="_blank"
+            rel="noopener"
+          >
+            Xenova
+          </a>
+          {" · "}
+          <a href="https://onnxruntime.ai" target="_blank" rel="noopener">
+            ONNX Runtime Web
+          </a>
+        </p>
+      </footer>
+    </div>
+  );
+}
+
+/** Convert Float32Array PCM to WAV Blob */
+/** Convert Float32Array PCM to WAV Blob using IEEE float format */
+function float32ToWav(samples: Float32Array, sampleRate: number): Blob {
+  // Normalize audio to [-1, 1] range
+  let maxAbs = 0;
+  for (let i = 0; i < samples.length; i++) {
+    const abs = Math.abs(samples[i]);
+    if (abs > maxAbs) maxAbs = abs;
+  }
+  if (maxAbs > 1) {
+    const scale = 0.95 / maxAbs; // leave some headroom
+    for (let i = 0; i < samples.length; i++) {
+      samples[i] *= scale;
+    }
+  }
+
+  // Write as IEEE 32-bit float WAV (format 3)
+  const bytesPerSample = 4;
+  const dataSize = samples.length * bytesPerSample;
+  const buffer = new ArrayBuffer(44 + dataSize);
+  const view = new DataView(buffer);
+
+  const writeStr = (offset: number, str: string) => {
+    for (let i = 0; i < str.length; i++)
+      view.setUint8(offset + i, str.charCodeAt(i));
+  };
+
+  writeStr(0, "RIFF");
+  view.setUint32(4, 36 + dataSize, true);
+  writeStr(8, "WAVE");
+  writeStr(12, "fmt ");
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 3, true); // IEEE float
+  view.setUint16(22, 1, true); // mono
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * bytesPerSample, true);
+  view.setUint16(32, bytesPerSample, true);
+  view.setUint16(34, 32, true); // bits per sample
+  writeStr(36, "data");
+  view.setUint32(40, dataSize, true);
+
+  // Write float samples directly
+  let offset = 44;
+  for (let i = 0; i < samples.length; i++) {
+    view.setFloat32(offset, samples[i], true);
+    offset += 4;
+  }
+
+  return new Blob([buffer], { type: "audio/wav" });
+}

src/index.css

@@ -0,0 +1,340 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: #111;
+  --surface: #1a1a1a;
+  --surface-2: #222;
+  --border: #333;
+  --text: #e5e5e5;
+  --text-muted: #888;
+  --accent: #c084fc;
+  --accent-dim: rgba(192, 132, 252, 0.15);
+  --radius: 8px;
+  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: ui-monospace, "SF Mono", Consolas, monospace;
+}
+
+html {
+  color-scheme: dark;
+}
+
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+.container {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+
+header {
+  text-align: center;
+  margin-bottom: 2rem;
+  position: relative;
+}
+
+header h1 {
+  font-size: 1.75rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.25rem;
+}
+
+.logo {
+  font-size: 1.5rem;
+}
+
+.subtitle {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.badge {
+  display: inline-block;
+  margin-top: 0.5rem;
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  font-family: var(--mono);
+  letter-spacing: 0.05em;
+}
+
+.badge-gpu {
+  background: rgba(74, 222, 128, 0.15);
+  color: #4ade80;
+  border: 1px solid rgba(74, 222, 128, 0.3);
+}
+
+.badge-wasm {
+  background: rgba(251, 191, 36, 0.15);
+  color: #fbbf24;
+  border: 1px solid rgba(251, 191, 36, 0.3);
+}
+
+/* Main */
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  margin-bottom: 0.4rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+textarea {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 0.95rem;
+  padding: 0.75rem;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+textarea:focus {
+  border-color: var(--accent);
+}
+
+textarea::placeholder {
+  color: #555;
+}
+
+/* Controls */
+
+.controls-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+select {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 0.9rem;
+  padding: 0.5rem 0.75rem;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+}
+
+select:focus {
+  border-color: var(--accent);
+}
+
+select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.speed-row {
+  margin-top: 0.75rem;
+}
+
+.speed-row label {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+}
+
+input[type="range"] {
+  width: 100%;
+  accent-color: var(--accent);
+  height: 4px;
+  cursor: pointer;
+}
+
+/* Generate button */
+
+.generate-btn {
+  margin-top: 1rem;
+  width: 100%;
+  padding: 0.7rem 1.5rem;
+  background: var(--accent);
+  color: #111;
+  border: none;
+  border-radius: var(--radius);
+  font-family: var(--font);
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.generate-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.generate-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Output */
+
+.output-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem;
+}
+
+.audio-result {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.audio-player {
+  width: 100%;
+  border-radius: var(--radius);
+}
+
+.duration {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-family: var(--mono);
+}
+
+.audio-placeholder {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: #555;
+  font-size: 0.85rem;
+}
+
+/* Examples */
+
+.examples-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.example-btn {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.6rem 0.75rem;
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s;
+}
+
+.example-btn:hover:not(:disabled) {
+  border-color: var(--accent);
+}
+
+.example-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.example-voice {
+  flex-shrink: 0;
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--accent);
+  padding: 0.1rem 0.4rem;
+  background: var(--accent-dim);
+  border-radius: 4px;
+}
+
+.example-text {
+  color: var(--text-muted);
+}
+
+/* Error */
+
+.error-msg {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: #f87171;
+  border-radius: var(--radius);
+  padding: 0.75rem 1rem;
+  font-size: 0.85rem;
+}
+
+/* Footer */
+
+footer {
+  margin-top: 2.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border);
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+footer a {
+  color: var(--text-muted);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color 0.15s;
+}
+
+footer a:hover {
+  color: var(--text);
+}
+
+/* Responsive */
+
+@media (max-width: 480px) {
+  .container {
+    padding: 1.25rem 1rem;
+  }
+  .controls-row {
+    grid-template-columns: 1fr;
+  }
+  header h1 {
+    font-size: 1.5rem;
+  }
+}

src/lib/npz-reader.ts

@@ -0,0 +1,214 @@
+/**
+ * Voice data loader — loads KittenTTS voice embeddings.
+ *
+ * Instead of parsing .npz (zip of npy), we download the npz and use
+ * a robust zip + npy parser with proper byte alignment handling.
+ */
+
+export interface VoiceInfo {
+  data: Float32Array;
+  shape: [number, number]; // [numStyles, styleDim]
+}
+
+function parseNpyHeader(bytes: Uint8Array) {
+  // Magic: \x93NUMPY
+  if (bytes[0] !== 0x93 || String.fromCharCode(bytes[1], bytes[2], bytes[3], bytes[4], bytes[5]) !== "NUMPY") {
+    throw new Error("Not a valid .npy file");
+  }
+
+  const majorVersion = bytes[6];
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  let headerLen: number;
+  let headerOffset: number;
+
+  if (majorVersion === 1) {
+    headerLen = view.getUint16(8, true);
+    headerOffset = 10;
+  } else {
+    headerLen = view.getUint32(8, true);
+    headerOffset = 12;
+  }
+
+  const headerStr = new TextDecoder().decode(
+    bytes.slice(headerOffset, headerOffset + headerLen)
+  );
+
+  const descrMatch = headerStr.match(/'descr'\s*:\s*'([^']+)'/);
+  const shapeMatch = headerStr.match(/'shape'\s*:\s*\(([^)]*)\)/);
+
+  if (!descrMatch) throw new Error("Could not parse dtype from .npy header: " + headerStr);
+
+  const descr = descrMatch[1];
+  const shapeNums = shapeMatch
+    ? shapeMatch[1].split(",").map((s) => parseInt(s.trim(), 10)).filter((n) => !isNaN(n))
+    : [];
+
+  const dataOffset = headerOffset + headerLen;
+
+  return { descr, shape: shapeNums, dataOffset };
+}
+
+function npyToFloat32(bytes: Uint8Array): { data: Float32Array; shape: number[] } {
+  const { descr, shape, dataOffset } = parseNpyHeader(bytes);
+  const rawBytes = bytes.slice(dataOffset);
+
+  // Always copy into a fresh aligned ArrayBuffer
+  const aligned = new ArrayBuffer(rawBytes.length);
+  new Uint8Array(aligned).set(rawBytes);
+
+  let data: Float32Array;
+  if (descr === "<f4" || descr === "float32") {
+    data = new Float32Array(aligned);
+  } else if (descr === "<f8" || descr === "float64") {
+    const f64 = new Float64Array(aligned);
+    data = new Float32Array(f64.length);
+    for (let i = 0; i < f64.length; i++) data[i] = f64[i];
+  } else {
+    throw new Error("Unsupported npy dtype: " + descr);
+  }
+
+  return { data, shape };
+}
+
+/**
+ * Parse a zip file and extract entries.
+ * Handles both stored (method 0) and deflated (method 8) entries.
+ * Properly handles data descriptors (bit 3 of flags).
+ */
+async function extractZipEntries(
+  buffer: ArrayBuffer
+): Promise<Map<string, Uint8Array>> {
+  const bytes = new Uint8Array(buffer);
+  const view = new DataView(buffer);
+  const entries = new Map<string, Uint8Array>();
+
+  // First, find the Central Directory to get reliable sizes
+  // Search for End of Central Directory signature (0x06054b50) from the end
+  let eocdOffset = -1;
+  for (let i = bytes.length - 22; i >= 0; i--) {
+    if (view.getUint32(i, true) === 0x06054b50) {
+      eocdOffset = i;
+      break;
+    }
+  }
+
+  if (eocdOffset === -1) {
+    throw new Error("Could not find End of Central Directory");
+  }
+
+  const cdOffset = view.getUint32(eocdOffset + 16, true);
+  const cdEntries = view.getUint16(eocdOffset + 10, true);
+
+  // Parse Central Directory entries to get accurate sizes and offsets
+  interface CDEntry {
+    fileName: string;
+    compressedSize: number;
+    uncompressedSize: number;
+    localHeaderOffset: number;
+    compressionMethod: number;
+  }
+
+  const cdList: CDEntry[] = [];
+  let cdPos = cdOffset;
+
+  for (let i = 0; i < cdEntries; i++) {
+    const sig = view.getUint32(cdPos, true);
+    if (sig !== 0x02014b50) break;
+
+    const compressionMethod = view.getUint16(cdPos + 10, true);
+    const compressedSize = view.getUint32(cdPos + 20, true);
+    const uncompressedSize = view.getUint32(cdPos + 24, true);
+    const fileNameLen = view.getUint16(cdPos + 28, true);
+    const extraLen = view.getUint16(cdPos + 30, true);
+    const commentLen = view.getUint16(cdPos + 32, true);
+    const localHeaderOffset = view.getUint32(cdPos + 42, true);
+
+    const fileName = new TextDecoder().decode(
+      bytes.slice(cdPos + 46, cdPos + 46 + fileNameLen)
+    );
+
+    cdList.push({
+      fileName,
+      compressedSize,
+      uncompressedSize,
+      localHeaderOffset,
+      compressionMethod,
+    });
+
+    cdPos += 46 + fileNameLen + extraLen + commentLen;
+  }
+
+  // Now extract each entry using local headers + CD sizes
+  for (const cd of cdList) {
+    const lhOffset = cd.localHeaderOffset;
+    const lhFileNameLen = view.getUint16(lhOffset + 26, true);
+    const lhExtraLen = view.getUint16(lhOffset + 28, true);
+    const dataStart = lhOffset + 30 + lhFileNameLen + lhExtraLen;
+
+    let fileData: Uint8Array;
+
+    if (cd.compressionMethod === 0) {
+      // Stored
+      fileData = bytes.slice(dataStart, dataStart + cd.uncompressedSize);
+    } else if (cd.compressionMethod === 8) {
+      // Deflate
+      const compressed = bytes.slice(dataStart, dataStart + cd.compressedSize);
+      const ds = new DecompressionStream("deflate-raw");
+      const writer = ds.writable.getWriter();
+      writer.write(compressed);
+      writer.close();
+
+      const reader = ds.readable.getReader();
+      const chunks: Uint8Array[] = [];
+      let totalLen = 0;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        chunks.push(value);
+        totalLen += value.length;
+      }
+
+      fileData = new Uint8Array(totalLen);
+      let pos = 0;
+      for (const chunk of chunks) {
+        fileData.set(chunk, pos);
+        pos += chunk.length;
+      }
+    } else {
+      console.warn(`Skipping ${cd.fileName}: unsupported compression ${cd.compressionMethod}`);
+      continue;
+    }
+
+    entries.set(cd.fileName, fileData);
+  }
+
+  return entries;
+}
+
+/**
+ * Load voice embeddings from a .npz file URL.
+ */
+export async function loadVoices(
+  url: string
+): Promise<Record<string, VoiceInfo>> {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Failed to fetch voices: ${response.status}`);
+  const arrayBuffer = await response.arrayBuffer();
+
+  const entries = await extractZipEntries(arrayBuffer);
+  const voices: Record<string, VoiceInfo> = {};
+
+  for (const [fileName, fileData] of entries) {
+    if (!fileName.endsWith(".npy")) continue;
+
+    const voiceName = fileName.replace(/\.npy$/, "");
+    const { data, shape } = npyToFloat32(fileData);
+
+    voices[voiceName] = {
+      data,
+      shape: [shape[0] || 1, shape[1] || data.length],
+    };
+  }
+
+  return voices;
+}

src/lib/preprocess.ts

@@ -0,0 +1,310 @@
+/**
+ * Text preprocessor — converts numbers, currencies, ordinals, etc. to words.
+ * Port of KittenTTS preprocess.py.
+ * https://github.com/KittenML/KittenTTS
+ */
+
+// ── Number → Words ──
+
+const ONES = [
+  "", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine",
+  "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen",
+  "seventeen", "eighteen", "nineteen",
+];
+const TENS = ["", "", "twenty", "thirty", "forty", "fifty", "sixty", "seventy", "eighty", "ninety"];
+const SCALE = ["", "thousand", "million", "billion", "trillion"];
+
+const ORDINAL_EXCEPTIONS: Record<string, string> = {
+  one: "first", two: "second", three: "third", four: "fourth",
+  five: "fifth", six: "sixth", seven: "seventh", eight: "eighth",
+  nine: "ninth", twelve: "twelfth",
+};
+
+const CURRENCY_SYMBOLS: Record<string, string> = {
+  "$": "dollar", "€": "euro", "£": "pound", "¥": "yen",
+  "₹": "rupee", "₩": "won", "₿": "bitcoin",
+};
+
+function threeDigitsToWords(n: number): string {
+  if (n === 0) return "";
+  const parts: string[] = [];
+  const hundreds = Math.floor(n / 100);
+  const remainder = n % 100;
+  if (hundreds) parts.push(`${ONES[hundreds]} hundred`);
+  if (remainder < 20) {
+    if (remainder) parts.push(ONES[remainder]);
+  } else {
+    const tensWord = TENS[Math.floor(remainder / 10)];
+    const onesWord = ONES[remainder % 10];
+    parts.push(onesWord ? `${tensWord}-${onesWord}` : tensWord);
+  }
+  return parts.join(" ");
+}
+
+export function numberToWords(n: number): string {
+  if (!Number.isInteger(n)) n = Math.floor(n);
+  if (n === 0) return "zero";
+  if (n < 0) return `negative ${numberToWords(-n)}`;
+  if (n >= 100 && n <= 9999 && n % 100 === 0 && n % 1000 !== 0) {
+    const hundreds = Math.floor(n / 100);
+    if (hundreds < 20) return `${ONES[hundreds]} hundred`;
+  }
+  const parts: string[] = [];
+  let remaining = n;
+  for (let i = 0; i < SCALE.length; i++) {
+    const chunk = remaining % 1000;
+    if (chunk) {
+      const w = threeDigitsToWords(chunk);
+      parts.push(SCALE[i] ? `${w} ${SCALE[i]}` : w);
+    }
+    remaining = Math.floor(remaining / 1000);
+    if (remaining === 0) break;
+  }
+  return parts.reverse().join(" ");
+}
+
+export function floatToWords(value: string | number, sep = "point"): string {
+  const text = typeof value === "string" ? value : `${value}`;
+  const negative = text.startsWith("-");
+  const clean = negative ? text.slice(1) : text;
+  let result: string;
+  if (clean.includes(".")) {
+    const [intPart, decPart] = clean.split(".");
+    const intWords = intPart ? numberToWords(parseInt(intPart, 10)) : "zero";
+    const digitMap = ["zero", ...ONES.slice(1)];
+    const decWords = [...decPart].map((d) => digitMap[parseInt(d, 10)]).join(" ");
+    result = `${intWords} ${sep} ${decWords}`;
+  } else {
+    result = numberToWords(parseInt(clean, 10));
+  }
+  return negative ? `negative ${result}` : result;
+}
+
+function ordinalSuffix(n: number): string {
+  const word = numberToWords(n);
+  let prefix: string, last: string, joiner: string;
+  if (word.includes("-")) {
+    const idx = word.lastIndexOf("-");
+    prefix = word.slice(0, idx);
+    last = word.slice(idx + 1);
+    joiner = "-";
+  } else {
+    const parts = word.split(" ");
+    if (parts.length >= 2) {
+      last = parts.pop()!;
+      prefix = parts.join(" ");
+      joiner = " ";
+    } else {
+      last = word;
+      prefix = "";
+      joiner = "";
+    }
+  }
+  let lastOrd: string;
+  if (ORDINAL_EXCEPTIONS[last]) {
+    lastOrd = ORDINAL_EXCEPTIONS[last];
+  } else if (last.endsWith("t")) {
+    lastOrd = last + "h";
+  } else if (last.endsWith("e")) {
+    lastOrd = last.slice(0, -1) + "th";
+  } else {
+    lastOrd = last + "th";
+  }
+  return prefix ? `${prefix}${joiner}${lastOrd}` : lastOrd;
+}
+
+// ── Regex patterns ──
+
+const RE_NUMBER = /(?<![a-zA-Z])-?[\d,]+(?:\.\d+)?/g;
+const RE_ORDINAL = /\b(\d+)(st|nd|rd|th)\b/gi;
+const RE_PERCENT = /(-?[\d,]+(?:\.\d+)?)\s*%/g;
+const RE_CURRENCY = /([$€£¥₹₩₿])\s*([\d,]+(?:\.\d+)?)\s*([KMBT])?(?![a-zA-Z\d])/g;
+const RE_TIME = /\b(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(am|pm)?\b/gi;
+const RE_RANGE = /(?<!\w)(\d+)-(\d+)(?!\w)/g;
+const RE_MODEL_VER = /\b([a-zA-Z][a-zA-Z0-9]*)-(\d[\d.]*)(?=[^\d.]|$)/g;
+const RE_UNIT = /(\d+(?:\.\d+)?)\s*(km|kg|mg|ml|gb|mb|kb|tb|hz|khz|mhz|ghz|mph|kph|°[cCfF]|[cCfF]°|ms|ns|µs)\b/gi;
+const RE_SCALE = /(?<![a-zA-Z])(\d+(?:\.\d+)?)\s*([KMBT])(?![a-zA-Z\d])/g;
+const RE_SCI = /(?<![a-zA-Z\d])(-?\d+(?:\.\d+)?)[eE]([+-]?\d+)(?![a-zA-Z\d])/g;
+const RE_FRACTION = /\b(\d+)\s*\/\s*(\d+)\b/g;
+const RE_DECADE = /\b(\d{1,3})0s\b/g;
+
+const UNIT_MAP: Record<string, string> = {
+  km: "kilometers", kg: "kilograms", mg: "milligrams", ml: "milliliters",
+  gb: "gigabytes", mb: "megabytes", kb: "kilobytes", tb: "terabytes",
+  hz: "hertz", khz: "kilohertz", mhz: "megahertz", ghz: "gigahertz",
+  mph: "miles per hour", kph: "kilometers per hour",
+  ms: "milliseconds", ns: "nanoseconds", "µs": "microseconds",
+  "°c": "degrees Celsius", "c°": "degrees Celsius",
+  "°f": "degrees Fahrenheit", "f°": "degrees Fahrenheit",
+};
+
+const SCALE_MAP: Record<string, string> = {
+  K: "thousand", M: "million", B: "billion", T: "trillion",
+};
+
+const DECADE_MAP: Record<number, string> = {
+  0: "hundreds", 1: "tens", 2: "twenties", 3: "thirties", 4: "forties",
+  5: "fifties", 6: "sixties", 7: "seventies", 8: "eighties", 9: "nineties",
+};
+
+// ── Expansion functions ──
+
+function expandOrdinals(text: string): string {
+  return text.replace(RE_ORDINAL, (_, n) => ordinalSuffix(parseInt(n, 10)));
+}
+
+function expandPercentages(text: string): string {
+  return text.replace(RE_PERCENT, (_, raw) => {
+    const clean = raw.replace(/,/g, "");
+    const w = clean.includes(".") ? floatToWords(parseFloat(clean)) : numberToWords(parseInt(clean, 10));
+    return `${w} percent`;
+  });
+}
+
+function expandCurrency(text: string): string {
+  return text.replace(RE_CURRENCY, (_, symbol, raw, scaleSuffix) => {
+    const clean = raw.replace(/,/g, "");
+    const unit = CURRENCY_SYMBOLS[symbol] || "";
+    if (scaleSuffix) {
+      const scaleWord = SCALE_MAP[scaleSuffix];
+      const num = clean.includes(".") ? floatToWords(clean) : numberToWords(parseInt(clean, 10));
+      return `${num} ${scaleWord} ${unit}s`.trim();
+    }
+    if (clean.includes(".")) {
+      const [intPart, decPart] = clean.split(".");
+      const decVal = parseInt(decPart.slice(0, 2).padEnd(2, "0"), 10);
+      let result = `${numberToWords(parseInt(intPart, 10))} ${unit}s`;
+      if (decVal) result += ` and ${numberToWords(decVal)} cent${decVal !== 1 ? "s" : ""}`;
+      return result;
+    }
+    const val = parseInt(clean, 10);
+    return `${numberToWords(val)} ${unit}${val !== 1 && unit ? "s" : ""}`;
+  });
+}
+
+function expandTime(text: string): string {
+  return text.replace(RE_TIME, (_, h, m, _s, suffix) => {
+    const hour = parseInt(h, 10);
+    const mins = parseInt(m, 10);
+    const sfx = suffix ? ` ${suffix.toLowerCase()}` : "";
+    const hWords = numberToWords(hour);
+    if (mins === 0) return suffix ? `${hWords}${sfx}` : `${hWords} hundred${sfx}`;
+    if (mins < 10) return `${hWords} oh ${numberToWords(mins)}${sfx}`;
+    return `${hWords} ${numberToWords(mins)}${sfx}`;
+  });
+}
+
+function expandRanges(text: string): string {
+  return text.replace(RE_RANGE, (_, lo, hi) =>
+    `${numberToWords(parseInt(lo, 10))} to ${numberToWords(parseInt(hi, 10))}`
+  );
+}
+
+function expandModelNames(text: string): string {
+  return text.replace(RE_MODEL_VER, (_, name, ver) => `${name} ${ver}`);
+}
+
+function expandUnits(text: string): string {
+  return text.replace(RE_UNIT, (_, raw, unit) => {
+    const expanded = UNIT_MAP[unit.toLowerCase()] || unit;
+    const num = raw.includes(".") ? floatToWords(parseFloat(raw)) : numberToWords(parseInt(raw, 10));
+    return `${num} ${expanded}`;
+  });
+}
+
+function expandScaleSuffixes(text: string): string {
+  return text.replace(RE_SCALE, (_, raw, suffix) => {
+    const scaleWord = SCALE_MAP[suffix] || suffix;
+    const num = raw.includes(".") ? floatToWords(raw) : numberToWords(parseInt(raw, 10));
+    return `${num} ${scaleWord}`;
+  });
+}
+
+function expandScientific(text: string): string {
+  return text.replace(RE_SCI, (_, coeff, exp) => {
+    const coeffW = coeff.includes(".") ? floatToWords(coeff) : numberToWords(parseInt(coeff, 10));
+    const expVal = parseInt(exp, 10);
+    const sign = expVal < 0 ? "negative " : "";
+    return `${coeffW} times ten to the ${sign}${numberToWords(Math.abs(expVal))}`;
+  });
+}
+
+function expandFractions(text: string): string {
+  return text.replace(RE_FRACTION, (m, num, den) => {
+    const n = parseInt(num, 10);
+    const d = parseInt(den, 10);
+    if (d === 0) return m;
+    const nWords = numberToWords(n);
+    let dWord: string;
+    if (d === 2) dWord = n === 1 ? "half" : "halves";
+    else if (d === 4) dWord = n === 1 ? "quarter" : "quarters";
+    else {
+      dWord = ordinalSuffix(d);
+      if (n !== 1) dWord += "s";
+    }
+    return `${nWords} ${dWord}`;
+  });
+}
+
+function expandDecades(text: string): string {
+  return text.replace(RE_DECADE, (_, base) => {
+    const b = parseInt(base, 10);
+    const decadeDigit = b % 10;
+    const decadeWord = DECADE_MAP[decadeDigit] || "";
+    if (b < 10) return decadeWord;
+    return `${numberToWords(Math.floor(b / 10))} ${decadeWord}`;
+  });
+}
+
+function replaceNumbers(text: string): string {
+  return text.replace(RE_NUMBER, (m) => {
+    const clean = m.replace(/,/g, "");
+    if (clean.includes(".")) return floatToWords(clean);
+    return numberToWords(parseInt(clean, 10));
+  });
+}
+
+function normalizeLeadingDecimals(text: string): string {
+  text = text.replace(/(?<!\d)(-)\.([\d])/g, "$1" + "0.$2");
+  text = text.replace(/(?<!\d)\.([\d])/g, "0.$1");
+  return text;
+}
+
+const RE_URL = /https?:\/\/\S+|www\.\S+/g;
+const RE_EMAIL = /\b[\w.+-]+@[\w-]+\.[a-z]{2,}\b/gi;
+const RE_HTML = /<[^>]+>/g;
+const RE_PUNCT = /[^\w\s.,?!;:\-\u2014\u2013\u2026]/g;
+const RE_SPACES = /\s+/g;
+
+export function preprocessText(text: string): string {
+  // Remove URLs, emails, HTML
+  text = text.replace(RE_URL, "");
+  text = text.replace(RE_EMAIL, "");
+  text = text.replace(RE_HTML, " ");
+
+  // Normalize leading decimals
+  text = normalizeLeadingDecimals(text);
+
+  // Expand special forms before generic number replacement
+  text = expandCurrency(text);
+  text = expandPercentages(text);
+  text = expandScientific(text);
+  text = expandTime(text);
+  text = expandOrdinals(text);
+  text = expandUnits(text);
+  text = expandScaleSuffixes(text);
+  text = expandFractions(text);
+  text = expandDecades(text);
+  text = expandRanges(text);
+  text = expandModelNames(text);
+  text = replaceNumbers(text);
+
+  // Remove non-prosodic punctuation
+  text = text.replace(RE_PUNCT, " ");
+
+  // Lowercase and collapse whitespace
+  text = text.toLowerCase();
+  text = text.replace(RE_SPACES, " ").trim();
+
+  return text;
+}

src/lib/text-cleaner.ts

@@ -0,0 +1,38 @@
+/**
+ * TextCleaner — maps IPA phoneme characters to integer token IDs.
+ * Direct port of KittenTTS Python TextCleaner class.
+ * https://github.com/KittenML/KittenTTS
+ */
+
+const _pad = "$";
+const _punctuation = ';:,.!?¡¿—…"«»"" ';
+const _letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+const _letters_ipa =
+  "ɑɐɒæɓʙβɔɕçɗɖðʤəɘɚɛɜɝɞɟʄɡɠɢʛɦɧħɥʜɨɪʝɭɬɫɮʟɱɯɰŋɳɲɴøɵɸθœɶʘɹɺɾɻʀʁɽʂʃʈʧʉʊʋⱱʌɣɤʍχʎʏʑʐʒʔʡʕʢǀǁǂǃˈˌːˑʼʴʰʱʲʷˠˤ˞↓↑→↗↘'̩'ᵻ";
+
+const symbols = [_pad, ..._punctuation, ..._letters, ..._letters_ipa];
+
+const charToIndex: Record<string, number> = {};
+for (let i = 0; i < symbols.length; i++) {
+  charToIndex[symbols[i]] = i;
+}
+
+export function cleanText(text: string): number[] {
+  const indexes: number[] = [];
+  for (const char of text) {
+    const idx = charToIndex[char];
+    if (idx !== undefined) {
+      indexes.push(idx);
+    }
+  }
+  return indexes;
+}
+
+export function tokenize(phonemes: string): number[] {
+  const tokens = cleanText(phonemes);
+  // Add start/end tokens matching Python: insert 0 at start, append 10, append 0
+  tokens.unshift(0);
+  tokens.push(10);
+  tokens.push(0);
+  return tokens;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module "*?worker" {
+  const workerConstructor: {
+    new (): Worker;
+  };
+  export default workerConstructor;
+}

src/worker.ts

@@ -0,0 +1,316 @@
+/**
+ * Web Worker — KittenTTS inference via ONNX Runtime Web (WebGPU/WASM).
+ *
+ * Models: https://huggingface.co/KittenML
+ * Phonemizer: https://github.com/xenova/phonemizer.js (Xenova)
+ * ONNX Runtime Web: https://onnxruntime.ai
+ */
+
+import { tokenize } from "./lib/text-cleaner";
+import { loadVoices, type VoiceInfo } from "./lib/npz-reader";
+
+// Dynamic imports — resolved at runtime to avoid Vite dev server transform issues
+let phonemize: (text: string, lang: string) => Promise<string[]>;
+let ort: any;
+
+const HF_BASE = "https://huggingface.co";
+const SAMPLE_RATE = 24000;
+
+// Int8 quantized models produce NaN on WebGPU; all fp32 models should be fine
+const WEBGPU_BLOCKED_PATTERNS = ["int8"];
+
+interface ModelConfig {
+  name: string;
+  version: string;
+  type: string;
+  model: string;
+  model_file: string;
+  voices: string;
+  speed_priors: Record<string, number>;
+  voice_aliases: Record<string, string>;
+}
+
+let session: any = null;
+let voices: Record<string, VoiceInfo> = {};
+let config: ModelConfig | null = null;
+let currentDevice: "webgpu" | "wasm" = "wasm";
+
+function resolveUrl(repoId: string, filename: string): string {
+  return `${HF_BASE}/${repoId}/resolve/main/${filename}`;
+}
+
+async function detectWebGPU(): Promise<boolean> {
+  try {
+    if (!("gpu" in navigator)) return false;
+    const adapter = await (navigator as any).gpu.requestAdapter();
+    return !!adapter;
+  } catch {
+    return false;
+  }
+}
+
+async function loadModel(repoId: string) {
+  self.postMessage({ type: "status", message: "Detecting hardware..." });
+
+  const hasWebGPU = await detectWebGPU();
+
+  // Load runtime dependencies
+  self.postMessage({ type: "status", message: "Loading runtime..." });
+  const [ortModule, phonemizerModule] = await Promise.all([
+    import("onnxruntime-web"),
+    import("phonemizer"),
+  ]);
+  ort = ortModule;
+  phonemize = phonemizerModule.phonemize;
+
+  // Load config
+  self.postMessage({ type: "status", message: "Loading config..." });
+  const configUrl = resolveUrl(repoId, "config.json");
+  const configResp = await fetch(configUrl);
+  config = (await configResp.json()) as ModelConfig;
+
+  // Int8 quantized models produce NaN on WebGPU — only block those
+  const modelName = config.model || repoId.split("/").pop() || "";
+  const isBlocked = WEBGPU_BLOCKED_PATTERNS.some((p) => modelName.includes(p));
+  currentDevice = hasWebGPU && !isBlocked ? "webgpu" : "wasm";
+
+  if (hasWebGPU && isBlocked) {
+    console.log(`[KittenTTS] Using WASM for "${modelName}" (int8 models produce NaN on WebGPU)`);
+  }
+
+  self.postMessage({ type: "device", device: currentDevice });
+
+  // Load voices (.npz) and ONNX model in parallel
+  self.postMessage({ type: "status", message: "Downloading model & voices..." });
+
+  const modelUrl = resolveUrl(repoId, config.model_file);
+
+  const modelPromise = (async () => {
+    const resp = await fetch(modelUrl);
+    if (!resp.ok) throw new Error(`Failed to fetch model: ${resp.status}`);
+
+    const contentLength = parseInt(resp.headers.get("content-length") || "0", 10);
+    const reader = resp.body!.getReader();
+    const chunks: Uint8Array[] = [];
+    let loaded = 0;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+      loaded += value.length;
+      if (contentLength > 0) {
+        const pct = Math.round((loaded / contentLength) * 100);
+        const mb = (loaded / 1024 / 1024).toFixed(1);
+        self.postMessage({
+          type: "status",
+          message: `Downloading model... ${pct}% (${mb} MB)`,
+        });
+      }
+    }
+
+    const modelData = new Uint8Array(loaded);
+    let offset = 0;
+    for (const chunk of chunks) {
+      modelData.set(chunk, offset);
+      offset += chunk.length;
+    }
+    return modelData.buffer;
+  })();
+
+  const voicesUrl = resolveUrl(repoId, config.voices);
+  const voicesPromise = loadVoices(voicesUrl);
+
+  const [modelBuffer, loadedVoices] = await Promise.all([modelPromise, voicesPromise]);
+  voices = loadedVoices;
+
+  // Create ONNX inference session
+  self.postMessage({
+    type: "status",
+    message: `Initializing ${currentDevice.toUpperCase()} session...`,
+  });
+
+  const sessionOptions: any = {
+    executionProviders: currentDevice === "webgpu" ? ["webgpu"] : ["wasm"],
+  };
+
+  if (currentDevice === "wasm") {
+    ort.env.wasm.numThreads = 1;
+  }
+
+  session = await ort.InferenceSession.create(modelBuffer, sessionOptions);
+
+  const voiceNames = config.voice_aliases
+    ? Object.keys(config.voice_aliases)
+    : Object.keys(voices);
+
+  self.postMessage({
+    type: "ready",
+    voices: voiceNames,
+    device: currentDevice,
+    modelName: config.name,
+  });
+}
+
+function ensurePunctuation(text: string): string {
+  text = text.trim();
+  if (!text) return text;
+  if (!".!?,;:".includes(text[text.length - 1])) {
+    text += ",";
+  }
+  return text;
+}
+
+function chunkText(text: string, maxLen = 400): string[] {
+  // Split on sentence boundaries but keep the punctuation
+  const sentences = text.match(/[^.!?]*[.!?]+|[^.!?]+$/g) || [text];
+  const chunks: string[] = [];
+  for (let sentence of sentences) {
+    sentence = sentence.trim();
+    if (!sentence) continue;
+    if (sentence.length <= maxLen) {
+      chunks.push(ensurePunctuation(sentence));
+    } else {
+      const words = sentence.split(/\s+/);
+      let temp = "";
+      for (const word of words) {
+        if (temp.length + word.length + 1 <= maxLen) {
+          temp += (temp ? " " : "") + word;
+        } else {
+          if (temp) chunks.push(ensurePunctuation(temp));
+          temp = word;
+        }
+      }
+      if (temp) chunks.push(ensurePunctuation(temp));
+    }
+  }
+  return chunks;
+}
+
+function basicTokenize(text: string): string[] {
+  // Python's \w matches Unicode word chars (including IPA symbols).
+  // JS \w only matches [a-zA-Z0-9_], so we use the Unicode-aware flag.
+  return text.match(/[\p{L}\p{N}_]+|[^\p{L}\p{N}_\s]/gu) || [];
+}
+
+async function generateChunk(
+  text: string,
+  voiceKey: string,
+  speed: number
+): Promise<Float32Array> {
+  if (!session || !config) throw new Error("Model not loaded");
+
+  let voiceId = voiceKey;
+  if (config.voice_aliases?.[voiceKey]) {
+    voiceId = config.voice_aliases[voiceKey];
+  }
+
+  const voiceData = voices[voiceId];
+  if (!voiceData) throw new Error(`Voice "${voiceKey}" not found`);
+
+  if (config.speed_priors?.[voiceId]) {
+    speed = speed * config.speed_priors[voiceId];
+  }
+
+  // Phonemize text using espeak-ng WASM
+  const phonemesList = await phonemize(text, "en-us");
+  const phonemesRaw = phonemesList[0] || "";
+  const phonemeTokens = basicTokenize(phonemesRaw);
+  const phonemesJoined = phonemeTokens.join(" ");
+  const inputIds = tokenize(phonemesJoined);
+
+  // Select voice style reference based on text length (matches Python logic)
+  const refId = Math.min(text.length, voiceData.shape[0] - 1);
+  const styleDim = voiceData.shape[1];
+  const refStyle = voiceData.data.slice(refId * styleDim, (refId + 1) * styleDim);
+
+  // Create ONNX tensors
+  const inputIdsTensor = new ort.Tensor(
+    "int64",
+    BigInt64Array.from(inputIds.map(BigInt)),
+    [1, inputIds.length]
+  );
+  const styleTensor = new ort.Tensor("float32", refStyle, [1, styleDim]);
+  const speedTensor = new ort.Tensor("float32", new Float32Array([speed]), [1]);
+
+  // Run inference
+  const results = await session.run({
+    input_ids: inputIdsTensor,
+    style: styleTensor,
+    speed: speedTensor,
+  });
+
+  // Get output audio
+  const outputKey = session.outputNames[0];
+  const audioData = results[outputKey].data as Float32Array;
+
+  // Trim trailing silence (matching Python: audio[..., :-5000])
+  return audioData.slice(0, Math.max(0, audioData.length - 5000));
+}
+
+async function generate(text: string, voice: string, speed: number) {
+  try {
+    const chunks = chunkText(text);
+
+    self.postMessage({
+      type: "status",
+      message: `Generating (${chunks.length} chunk${chunks.length > 1 ? "s" : ""})...`,
+    });
+
+    const audioChunks: Float32Array[] = [];
+    for (let i = 0; i < chunks.length; i++) {
+      self.postMessage({
+        type: "progress",
+        current: i + 1,
+        total: chunks.length,
+      });
+      const audio = await generateChunk(chunks[i], voice, speed);
+      audioChunks.push(audio);
+    }
+
+    const totalLen = audioChunks.reduce((s, c) => s + c.length, 0);
+    const fullAudio = new Float32Array(totalLen);
+    let offset = 0;
+    for (const chunk of audioChunks) {
+      fullAudio.set(chunk, offset);
+      offset += chunk.length;
+    }
+
+    self.postMessage(
+      {
+        type: "audio",
+        audio: fullAudio.buffer,
+        sampleRate: SAMPLE_RATE,
+      },
+      { transfer: [fullAudio.buffer] }
+    );
+  } catch (err: any) {
+    self.postMessage({ type: "error", error: err.message || String(err) });
+  }
+}
+
+// Message handler
+self.addEventListener("message", async (e) => {
+  const { action, ...data } = e.data;
+  switch (action) {
+    case "load":
+      try {
+        await loadModel(data.repoId);
+      } catch (err: any) {
+        console.error("[KittenTTS Worker] Load error:", err);
+        self.postMessage({ type: "error", error: err.message || String(err) });
+      }
+      break;
+    case "generate":
+      await generate(data.text, data.voice, data.speed);
+      break;
+  }
+});
+
+self.addEventListener("error", (e) => {
+  self.postMessage({ type: "error", error: e.message || "Unknown worker error" });
+});
+
+self.addEventListener("unhandledrejection", (e: any) => {
+  self.postMessage({ type: "error", error: e.reason?.message || String(e.reason) });
+});

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}

tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  worker: {
+    format: "es",
+  },
+});