Initial commit

CODE-LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

EventEmitter.js

@@ -0,0 +1,59 @@
+export class EventEmitter {
+  constructor() {
+    this.events = {};
+  }
+
+  addEventListener(event, listener, options = {}) {
+    if (!this.events[event]) {
+      this.events[event] = [];
+    }
+    
+    const wrappedListener = {
+      callback: listener,
+      once: options.once || false
+    };
+    
+    this.events[event].push(wrappedListener);
+  }
+
+  removeEventListener(event, listener) {
+    if (!this.events[event]) return;
+    
+    this.events[event] = this.events[event].filter(
+      wrappedListener => wrappedListener.callback !== listener
+    );
+  }
+
+  dispatchEvent(event) {
+    const eventName = event.type;
+    if (!this.events[eventName]) return;
+    
+    this.events[eventName] = this.events[eventName].filter(wrappedListener => {
+      wrappedListener.callback.call(this, event);
+      return !wrappedListener.once;
+    });
+  }
+
+  emit(eventName, data) {
+    const event = new CustomEvent(eventName, { detail: data });
+    this.dispatchEvent(event);
+  }
+}
+
+export class CustomEvent {
+  constructor(type, options = {}) {
+    this.type = type;
+    this.detail = options.detail;
+    this.target = null;
+    this.currentTarget = null;
+    this.defaultPrevented = false;
+    this.bubbles = options.bubbles || false;
+    this.cancelable = options.cancelable || false;
+  }
+
+  preventDefault() {
+    if (this.cancelable) {
+      this.defaultPrevented = true;
+    }
+  }
+}

PCMPlayerWorklet.js

@@ -0,0 +1,563 @@
+import { EventEmitter, CustomEvent } from './EventEmitter.js';
+
+/**
+ * PCMPlayerWorklet - Drop-in replacement for PCMPlayer using AudioWorklet
+ * Uses dynamic buffer management with backpressure for smooth playback
+ */
+export class PCMPlayerWorklet extends EventEmitter {
+  constructor(audioContext, options = {}) {
+    super();
+    this.audioContext = audioContext;
+    this.options = options;
+    this.workletNode = null;
+    this.isInitialized = false;
+    this.playbackTime = 0; // For API compatibility
+
+    // Audio nodes
+    this.gainNode = this.audioContext.createGain();
+    this.gainNode.connect(this.audioContext.destination);
+    this.analyser = this.audioContext.createAnalyser();
+    this.gainNode.connect(this.analyser);
+
+    // Queue for chunks waiting to be sent
+    this.pendingChunks = [];
+    this.availableCapacity = 0;
+    this.isWorkletReady = false;
+    this.hasReceivedInitialCapacity = false;
+
+    // Metrics
+    this.metrics = {
+      chunksPlayed: 0,
+      underruns: 0,
+      bufferLevel: 0,
+      samplesPlayed: 0
+    };
+
+    // Initialize worklet
+    this.initPromise = this.initialize();
+  }
+
+  async initialize() {
+    if (this.isInitialized) return;
+
+    try {
+      // Calculate buffer parameters
+      const sampleRate = this.audioContext.sampleRate;
+      const minBufferMs = this.options.minBufferBeforePlaybackMs || 300;
+      const minBufferSamples = Math.floor(minBufferMs * sampleRate / 1000);
+
+      // Buffer size: enough for smooth playback but not excessive
+      // Target 60 seconds of buffer to prevent any overflow issues
+      const bufferSizeSamples = sampleRate * 60;
+
+      // Create the worklet processor code
+      const processorCode = `
+        class PCMProcessor extends AudioWorkletProcessor {
+          constructor() {
+            super();
+            
+            // Ring buffer - sized appropriately
+            this.bufferSize = ${bufferSizeSamples};
+            this.ringBuffer = new Float32Array(this.bufferSize);
+            this.readPos = 0;
+            this.writePos = 0;
+            this.isPlaying = false;
+            
+            // Configuration
+            this.minBufferSamples = ${minBufferSamples};
+            this.targetBufferSamples = ${minBufferSamples * 2}; // Target 2x min for stability
+            
+            // State
+            this.streamEnded = false;
+            this.playbackCompleteReported = false;
+            
+            // Stats reporting
+            this.frameCount = 0;
+            this.reportInterval = 256; // Report every ~5ms at 48kHz
+            
+            this.port.onmessage = (e) => {
+              switch(e.data.type) {
+                case 'audio':
+                  this.addAudio(e.data.data);
+                  break;
+                case 'reset':
+                  this.reset();
+                  break;
+                case 'stream-ended':
+                  this.streamEnded = true;
+                  break;
+              }
+            };
+            
+            // Send initial capacity
+            this.sendCapacityUpdate();
+          }
+          
+          addAudio(float32Data) {
+            const samples = float32Data.length;
+            const available = this.getAvailableSpace();
+            const bufferedBefore = this.getBufferedSamples();
+            
+            
+            if (samples > available) {
+              // This shouldn't happen with proper backpressure
+              console.error('Buffer overflow - bug in backpressure. Samples:', samples, 'Available:', available, 'Buffered:', this.getBufferedSamples());
+              // Drop oldest data to recover
+              const overflow = samples - available;
+              this.readPos = (this.readPos + overflow) % this.bufferSize;
+            }
+            
+            // Write to ring buffer
+            if (this.writePos + samples <= this.bufferSize) {
+              this.ringBuffer.set(float32Data, this.writePos);
+              this.writePos += samples;
+              if (this.writePos >= this.bufferSize) {
+                this.writePos = 0;
+              }
+            } else {
+              const firstPart = this.bufferSize - this.writePos;
+              const secondPart = samples - firstPart;
+              this.ringBuffer.set(float32Data.slice(0, firstPart), this.writePos);
+              this.ringBuffer.set(float32Data.slice(firstPart), 0);
+              this.writePos = secondPart;
+            }
+            
+            // Auto-start when we have enough buffered
+            const buffered = this.getBufferedSamples();
+            
+            if (!this.isPlaying && buffered >= this.minBufferSamples) {
+              const now = currentTime;
+              this.isPlaying = true;
+              // Notify that playback has started
+              this.port.postMessage({
+                type: 'playback-started',
+                buffered: buffered,
+                audioTime: now
+              });
+            }
+            
+            // Report capacity after adding
+            this.sendCapacityUpdate();
+          }
+          
+          getAvailableSpace() {
+            const used = this.getBufferedSamples();
+            return this.bufferSize - used - 128; // Leave small safety margin
+          }
+          
+          getBufferedSamples() {
+            if (this.writePos >= this.readPos) {
+              return this.writePos - this.readPos;
+            } else {
+              return this.bufferSize - this.readPos + this.writePos;
+            }
+          }
+          
+          sendCapacityUpdate() {
+            const buffered = this.getBufferedSamples();
+            const capacity = this.getAvailableSpace();
+            
+            // Calculate how much we want to receive
+            // If buffer is low, request more; if it's full, request nothing
+            let requestSamples = 0;
+            if (buffered < this.targetBufferSamples) {
+              requestSamples = Math.min(capacity, this.targetBufferSamples - buffered);
+            }
+            
+            this.port.postMessage({
+              type: 'capacity',
+              buffered: buffered,
+              capacity: capacity,
+              requestSamples: requestSamples,
+              isPlaying: this.isPlaying
+            });
+          }
+          
+          process(inputs, outputs, parameters) {
+            const output = outputs[0];
+            if (!output || !output[0]) return true;
+            
+            const outputChannel = output[0];
+            const numSamples = outputChannel.length;
+            
+            // Report stats periodically
+            if (++this.frameCount % this.reportInterval === 0) {
+              this.sendCapacityUpdate();
+            }
+            
+            if (!this.isPlaying) {
+              outputChannel.fill(0);
+              return true;
+            }
+            
+            const buffered = this.getBufferedSamples();
+            
+            if (buffered < numSamples) {
+              // Underrun - play what we have and fill rest with silence
+              let samplesRead = 0;
+              
+              if (buffered > 0) {
+                // Play whatever samples we DO have
+                if (this.readPos + buffered <= this.bufferSize) {
+                  for (let i = 0; i < buffered; i++) {
+                    outputChannel[i] = this.ringBuffer[this.readPos + i];
+                  }
+                  this.readPos += buffered;
+                  if (this.readPos >= this.bufferSize) {
+                    this.readPos = 0;
+                  }
+                } else {
+                  // Wrap-around case
+                  const firstPart = this.bufferSize - this.readPos;
+                  const secondPart = buffered - firstPart;
+                  
+                  for (let i = 0; i < firstPart; i++) {
+                    outputChannel[i] = this.ringBuffer[this.readPos + i];
+                  }
+                  for (let i = 0; i < secondPart; i++) {
+                    outputChannel[firstPart + i] = this.ringBuffer[i];
+                  }
+                  
+                  this.readPos = secondPart;
+                }
+                samplesRead = buffered;
+              }
+              
+              // Fill remaining with silence
+              for (let i = samplesRead; i < numSamples; i++) {
+                outputChannel[i] = 0;
+              }
+              
+              // Check for playback complete
+              if (this.streamEnded && buffered === 0) {
+                if (!this.playbackCompleteReported) {
+                  this.port.postMessage({
+                    type: 'playback-complete'
+                  });
+                  this.playbackCompleteReported = true;
+                }
+                this.isPlaying = false;
+                this.streamEnded = false;
+              } else {
+                // Request more data urgently
+                this.port.postMessage({
+                  type: 'underrun',
+                  buffered: buffered,
+                  needed: numSamples
+                });
+                this.sendCapacityUpdate();
+              }
+            } else {
+              // Normal playback - read from ring buffer
+              if (this.readPos + numSamples <= this.bufferSize) {
+                for (let i = 0; i < numSamples; i++) {
+                  outputChannel[i] = this.ringBuffer[this.readPos + i];
+                }
+                this.readPos += numSamples;
+                if (this.readPos >= this.bufferSize) {
+                  this.readPos = 0;
+                }
+              } else {
+                // Wrap-around case
+                const firstPart = this.bufferSize - this.readPos;
+                const secondPart = numSamples - firstPart;
+                
+                for (let i = 0; i < firstPart; i++) {
+                  outputChannel[i] = this.ringBuffer[this.readPos + i];
+                }
+                for (let i = 0; i < secondPart; i++) {
+                  outputChannel[firstPart + i] = this.ringBuffer[i];
+                }
+                
+                this.readPos = secondPart;
+              }
+            }
+            
+            return true;
+          }
+          
+          reset() {
+            this.readPos = 0;
+            this.writePos = 0;
+            this.ringBuffer.fill(0);
+            this.isPlaying = false;
+            this.streamEnded = false;
+            this.playbackCompleteReported = false;
+            this.sendCapacityUpdate();
+          }
+        }
+        
+        registerProcessor('pcm-processor', PCMProcessor);
+      `;
+
+      // Create and load worklet
+      const blob = new Blob([processorCode], { type: 'application/javascript' });
+      const workletUrl = URL.createObjectURL(blob);
+
+      await this.audioContext.audioWorklet.addModule(workletUrl);
+      URL.revokeObjectURL(workletUrl);
+
+      // Create worklet node
+      this.workletNode = new AudioWorkletNode(this.audioContext, 'pcm-processor');
+      this.workletNode.connect(this.gainNode);
+
+      // Handle messages from worklet
+      this.workletNode.port.onmessage = (e) => {
+        switch (e.data.type) {
+          case 'capacity':
+            this.handleCapacityUpdate(e.data);
+            break;
+
+          case 'underrun':
+            this.metrics.underruns++;
+            console.warn(`[MAIN THREAD] ⚠️ UNDERRUN #${this.metrics.underruns} detected! buffered=${e.data.buffered} samples, needed=${e.data.needed} samples`);
+            // Try to send more data immediately
+            this.processPendingChunks();
+            break;
+
+          case 'playback-started':
+            console.log(`[MAIN THREAD] Received playback-started at performance.now=${performance.now().toFixed(2)}ms, audioContext.currentTime=${this.audioContext.currentTime.toFixed(3)}s, worklet reported audioTime=${e.data.audioTime}s`);
+            this.emit('firstPlayback', {
+              startTime: this.audioContext.currentTime,
+              bufferedSamples: e.data.buffered
+            });
+            break;
+
+          case 'playback-complete':
+            this.emit('audioEnded', {
+              endTime: this.audioContext.currentTime
+            });
+            break;
+        }
+      };
+
+      this.isInitialized = true;
+      this.isWorkletReady = true;
+    } catch (error) {
+      console.error('Failed to initialize PCMPlayerWorklet:', error);
+      throw error;
+    }
+  }
+
+  handleCapacityUpdate(data) {
+    this.availableCapacity = data.capacity;
+    this.metrics.bufferLevel = data.buffered;
+
+    // console.log(`[CAPACITY] Update at ${performance.now().toFixed(2)}ms: capacity=${data.capacity}, buffered=${data.buffered}, pending=${this.pendingChunks.length}`);
+
+    // Mark that we've received initial capacity
+    if (!this.hasReceivedInitialCapacity) {
+      this.hasReceivedInitialCapacity = true;
+      // console.log(`[CAPACITY] *** FIRST capacity received at ${performance.now().toFixed(2)}ms, processing ${this.pendingChunks.length} pending chunks`);
+      // Process any chunks that were waiting for initial capacity
+      if (this.pendingChunks.length > 0) {
+        this.processPendingChunks();
+      }
+    }
+
+    // If worklet is requesting data, try to send it
+    if (data.requestSamples > 0 && this.pendingChunks.length > 0) {
+      this.processPendingChunks();
+    }
+  }
+
+  processPendingChunks() {
+    if (!this.isWorkletReady || this.pendingChunks.length === 0) {
+      return;
+    }
+
+    // Don't send if we don't know capacity yet
+    if (this.availableCapacity <= 0) {
+      return;
+    }
+
+    // Send ONE chunk if it fits, then wait for next capacity update
+    // This prevents race conditions from sending multiple chunks before worklet updates
+    const chunk = this.pendingChunks[0];
+
+    if (chunk.length <= this.availableCapacity) {
+      // Send the whole chunk
+      this.pendingChunks.shift();
+      this.workletNode.port.postMessage({
+        type: 'audio',
+        data: chunk
+      });
+      // Set capacity to 0 to prevent sending more until we get an update
+      this.availableCapacity = 0;
+    } else if (this.availableCapacity > 4096) {
+      // Send partial chunk only if we have significant space
+      const partial = chunk.slice(0, this.availableCapacity);
+      console.log(`Sending partial: ${partial.length} samples from ${chunk.length} (capacity: ${this.availableCapacity})`);
+      this.pendingChunks[0] = chunk.slice(this.availableCapacity);
+      this.workletNode.port.postMessage({
+        type: 'audio',
+        data: partial
+      });
+      // Set capacity to 0 to prevent sending more until we get an update
+      this.availableCapacity = 0;
+    } else {
+      console.log(`Not sending - chunk ${chunk.length} samples, capacity ${this.availableCapacity}`);
+    }
+    // else: Not enough space, wait for next capacity update
+
+    // If all chunks sent and stream ended, notify worklet
+    if (this.pendingChunks.length === 0 && this.pendingStreamEnd) {
+      this.workletNode.port.postMessage({ type: 'stream-ended' });
+      this.pendingStreamEnd = false;
+    }
+  }
+
+  playAudio(data) {
+    if (!this.isInitialized) {
+      // Queue the data if not initialized yet
+      if (!this.initPendingQueue) {
+        this.initPendingQueue = [];
+        this.initPromise.then(() => {
+          // Process queued data
+          const queue = this.initPendingQueue;
+          this.initPendingQueue = null;
+          for (const queuedData of queue) {
+            this.playAudio(queuedData);
+          }
+        });
+      }
+      this.initPendingQueue.push(data);
+      return;
+    }
+
+    if (this.audioContext.state !== 'running') {
+      return;
+    }
+
+    // Convert to Float32Array if needed
+    const float32Array = data instanceof Int16Array
+      ? this.pcm16ToFloat32(data)
+      : data;
+
+    // Add to pending queue
+    this.pendingChunks.push(float32Array);
+
+    // Only try to process if we've received initial capacity and have space
+    // Otherwise wait for capacity update from worklet
+    if (this.hasReceivedInitialCapacity && this.availableCapacity > 0) {
+      this.processPendingChunks();
+    }
+
+    // Update metrics
+    this.metrics.chunksPlayed++;
+
+    // Update playback time for compatibility
+    const duration = float32Array.length / this.audioContext.sampleRate;
+    this.playbackTime = this.audioContext.currentTime + duration;
+
+    // Emit events for compatibility
+    this.emit('audioStarted', {
+      startTime: this.audioContext.currentTime,
+      duration: duration,
+      samples: float32Array.length
+    });
+  }
+
+  notifyStreamEnded() {
+    if (this.pendingChunks.length > 0) {
+      // Still have chunks to send, mark for later
+      this.pendingStreamEnd = true;
+    } else {
+      // No chunks left, send immediately
+      if (this.workletNode) {
+        this.workletNode.port.postMessage({ type: 'stream-ended' });
+      }
+    }
+  }
+
+  pcm16ToFloat32(pcm16) {
+    const float32 = new Float32Array(pcm16.length);
+    for (let i = 0; i < pcm16.length; i++) {
+      float32[i] = pcm16[i] / 32768;
+    }
+    return float32;
+  }
+
+  reset() {
+    this.playbackTime = 0;
+    this.pendingChunks = [];
+    this.pendingStreamEnd = false;
+    this.availableCapacity = 0;
+
+    if (this.workletNode) {
+      this.workletNode.port.postMessage({ type: 'reset' });
+    }
+
+    // Quick fade out to avoid clicks
+    if (this.gainNode) {
+      const now = this.audioContext.currentTime;
+      this.gainNode.gain.setValueAtTime(this.gainNode.gain.value, now);
+      this.gainNode.gain.linearRampToValueAtTime(0, now + 0.05);
+      setTimeout(() => {
+        this.gainNode.gain.value = 1;
+      }, 100);
+    }
+  }
+
+  stopAllSources() {
+    this.reset();
+  }
+
+  async resume() {
+    if (this.audioContext.state === 'suspended') {
+      await this.audioContext.resume();
+    }
+  }
+
+  get volume() {
+    return this.gainNode.gain.value;
+  }
+
+  set volume(value) {
+    const clampedValue = Math.max(0, Math.min(1, value));
+    this.gainNode.gain.value = clampedValue;
+    this.emit('volumeChange', { volume: clampedValue });
+  }
+
+  get volumePercentage() {
+    return this.volume * 100;
+  }
+
+  set volumePercentage(percentage) {
+    this.volume = percentage / 100;
+  }
+
+  getAnalyserData() {
+    const bufferLength = this.analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    this.analyser.getByteFrequencyData(dataArray);
+    return dataArray;
+  }
+
+  getTimeDomainData() {
+    const bufferLength = this.analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    this.analyser.getByteTimeDomainData(dataArray);
+    return dataArray;
+  }
+
+  getPlaybackStatus() {
+    const bufferMs = this.metrics.bufferLevel
+      ? (this.metrics.bufferLevel / this.audioContext.sampleRate) * 1000
+      : 0;
+
+    return {
+      currentTime: this.audioContext.currentTime,
+      scheduledTime: this.playbackTime,
+      bufferedDuration: bufferMs / 1000,
+      state: this.audioContext.state,
+      worklet: {
+        bufferLevelSamples: this.metrics.bufferLevel,
+        bufferLevelMs: bufferMs,
+        underruns: this.metrics.underruns,
+        chunksPlayed: this.metrics.chunksPlayed,
+        pendingChunks: this.pendingChunks.length
+      }
+    };
+  }
+}

README.md

@@ -1,12 +1,77 @@
----
-title: Pocket Tts Web
-emoji: 🌖
-colorFrom: yellow
-colorTo: pink
-sdk: static
-pinned: false
-license: cc-by-4.0
-short_description: Real-time voice cloning entirely in your browser! (CPU)
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Pocket TTS ONNX Web Demo
+emoji: 🌖
+colorFrom: yellow
+colorTo: pink
+sdk: static
+app_file: index.html
+pinned: false
+license: cc-by-4.0
+short_description: Real-time voice cloning entirely in your browser! (CPU)
+---
+
+# Pocket TTS Web Demo
+
+Real-time neural text-to-speech with voice cloning, running entirely in your browser.
+
+## Features
+
+- **Voice Cloning**: Clone any voice from a short audio sample
+- **Predefined Voices**: 3 bundled voices (Cosette, Jean, Fantine)
+- **Streaming Audio**: Real-time audio generation with low latency
+- **Pure Browser**: No server required, runs entirely in WebAssembly
+
+## Model Files
+
+The demo requires the following ONNX models in the `onnx/` directory:
+
+| File | Size | Purpose |
+|------|------|---------|
+| `mimi_encoder.onnx` | ~70 MB | Voice audio → embeddings |
+| `text_conditioner.onnx` | ~16 MB | Text tokens → embeddings |
+| `flow_lm_main_int8.onnx` | ~73 MB | AR transformer (INT8) |
+| `flow_lm_flow_int8.onnx` | ~10 MB | Flow matching network (INT8) |
+| `mimi_decoder_int8.onnx` | ~22 MB | Latents → audio decoder (INT8) |
+
+Additional files:
+- `tokenizer.model` - SentencePiece tokenizer (~60 KB)
+- `voices.bin` - Predefined voice embeddings (~1.5 MB)
+
+## Browser Requirements
+
+- Modern browser with WebAssembly support
+- Chrome, Edge, Firefox, or Safari (latest versions)
+- ~200 MB RAM for model loading
+
+## Voice Cloning
+
+1. Click "Upload Voice" or select "Custom (Upload)" from the dropdown
+2. Upload an audio file (WAV, MP3, etc.) with clear speech
+3. Best results with 3-10 seconds of clean audio
+4. The voice will be encoded and used for all subsequent generations
+
+## File Structure
+
+```
+pocket-tts-web/
+├── index.html              # Main HTML page
+├── onnx-streaming.js       # Main thread controller
+├── inference-worker.js     # Web Worker for ONNX inference
+├── PCMPlayerWorklet.js     # Audio playback worklet
+├── EventEmitter.js         # Event utilities
+├── sentencepiece.js        # SentencePiece tokenizer library
+├── style.css               # Styles
+├── tokenizer.model         # SentencePiece model
+├── voices.bin              # Predefined voice embeddings
+└── onnx/
+    ├── mimi_encoder.onnx
+    ├── text_conditioner.onnx
+    ├── flow_lm_main_int8.onnx
+    ├── flow_lm_flow_int8.onnx
+    └── mimi_decoder_int8.onnx
+```
+
+## License
+
+- **Models & Voice Embeddings**: CC BY 4.0 (inherited from [kyutai/pocket-tts](https://huggingface.co/kyutai/pocket-tts))
+- **Code**: Apache 2.0

index.html

@@ -1,19 +1,193 @@
-<!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>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pocket TTS - Neural Voice Cloning in Your Browser</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Nunito:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- ONNX Runtime Web (loaded by worker, kept here for potential main thread usage) -->
+    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.0/dist/ort.min.js"></script>
+</head>
+
+<body>
+    <!-- Ambient Background Effects -->
+    <div class="ambient-layer">
+        <div class="orb orb--primary"></div>
+        <div class="orb orb--secondary"></div>
+        <div class="orb orb--tertiary"></div>
+        <div class="grid-overlay"></div>
+    </div>
+
+    <div class="app-shell">
+        <!-- Hero Header -->
+        <header class="hero">
+            <div class="hero__brand">
+                <div class="logo">
+                    <svg class="logo__icon" viewBox="0 0 32 32" fill="none">
+                        <path d="M16 4C16 4 8 8 8 16C8 24 16 28 16 28" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
+                        <path d="M16 4C16 4 24 8 24 16C24 24 16 28 16 28" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
+                        <path d="M12 10V22" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
+                        <path d="M16 8V24" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
+                        <path d="M20 10V22" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
+                        <defs>
+                            <linearGradient id="logoGrad" x1="8" y1="4" x2="24" y2="28" gradientUnits="userSpaceOnUse">
+                                <stop stop-color="#3eb489"/>
+                                <stop offset="0.5" stop-color="#00d4aa"/>
+                                <stop offset="1" stop-color="#7fffd4"/>
+                            </linearGradient>
+                        </defs>
+                    </svg>
+                    <span class="logo__text">Pocket TTS</span>
+                </div>
+                <div class="hero__badge">
+                    <span class="badge">ONNX Runtime</span>
+                </div>
+            </div>
+            <p class="hero__tagline">Real-time neural text-to-speech with voice cloning, running entirely in your browser</p>
+        </header>
+
+        <main class="main">
+            <!-- Input Section -->
+            <section class="input-section">
+                <!-- Voice Selection -->
+                <div class="voice-section">
+                    <div class="voice-selector">
+                        <label for="voice-select" class="voice-selector__label">Voice</label>
+                        <select id="voice-select" class="voice-selector__dropdown">
+                            <option value="">Loading voices...</option>
+                        </select>
+                    </div>
+                    <div class="voice-upload">
+                        <button id="voice-upload-btn" class="btn btn--outline btn--small">
+                            <svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                                <polyline points="17 8 12 3 7 8"/>
+                                <line x1="12" y1="3" x2="12" y2="15"/>
+                            </svg>
+                            <span>Upload Voice</span>
+                        </button>
+                        <input type="file" id="voice-upload" accept="audio/*" hidden>
+                        <span id="voice-upload-status" class="voice-upload-status"></span>
+                    </div>
+                </div>
+
+                <div class="textarea-wrap">
+                    <textarea
+                        id="text-input"
+                        placeholder="Type or paste text to synthesize..."
+                        aria-label="Text to synthesize"
+                        maxlength="500"
+                    ></textarea>
+                    <div class="textarea-meta">
+                        <span class="char-count"><span id="char-count">0</span>/500</span>
+                    </div>
+                </div>
+
+                <!-- Sample Texts -->
+                <div class="sample-texts">
+                    <span class="sample-texts__label">Try:</span>
+                    <button class="sample-btn" data-text="Hello, welcome to Pocket TTS. This is a demonstration of real-time voice cloning running entirely in your browser.">Demo greeting</button>
+                    <button class="sample-btn" data-text="I completely understand how frustrating this must be for you. Let me take care of this right away and make sure we get it resolved.">Empathetic support</button>
+                    <button class="sample-btn" data-text="Wow, congratulations! That's absolutely fantastic news! I'm so thrilled for you!">Excited</button>
+                    <button class="sample-btn" data-text="I'm really sorry to hear about your loss. Please know that we're here for you, and take all the time you need.">Compassionate</button>
+                    <button class="sample-btn" data-text="Great question! I'd be happy to walk you through this step by step. First, let's start with the basics.">Helpful guide</button>
+                </div>
+
+                <div class="controls">
+                    <button id="generate-btn" class="btn btn--primary">
+                        <svg class="btn__icon" viewBox="0 0 24 24" fill="currentColor">
+                            <polygon points="5,3 19,12 5,21"/>
+                        </svg>
+                        <span class="btn__text">Generate Audio</span>
+                        <div class="btn__loader" id="btn-loader"></div>
+                    </button>
+                    <button id="stop-btn" class="btn btn--secondary" disabled>
+                        <svg class="btn__icon" viewBox="0 0 24 24" fill="currentColor">
+                            <rect x="6" y="6" width="12" height="12" rx="1"/>
+                        </svg>
+                        <span class="btn__text">Stop</span>
+                    </button>
+                </div>
+            </section>
+
+            <!-- Output Section: Visualizer + Metrics -->
+            <section class="output-section">
+                <div class="visualizer-panel">
+                    <div class="visualizer-panel__header">
+                        <span class="visualizer-panel__title">Audio Output</span>
+                        <div class="status-indicator" id="status-indicator">
+                            <span class="status-dot"></span>
+                            <span class="status-text" id="stat-status">Idle</span>
+                        </div>
+                    </div>
+                    <div class="visualizer-container">
+                        <canvas id="visualizer-waveform"></canvas>
+                        <canvas id="visualizer-bars" class="visualizer-bars"></canvas>
+                    </div>
+                </div>
+
+                <div class="metrics-panel">
+                    <h3 class="metrics-panel__title">Performance</h3>
+
+                    <div class="metric">
+                        <div class="metric__header">
+                            <span class="metric__label">Time to First Byte</span>
+                            <button class="metric__info" aria-label="TTFB explanation" data-tooltip="Time from request until first audio chunk is received">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <circle cx="12" cy="12" r="10"/>
+                                    <path d="M12 16v-4M12 8h.01"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="metric__value">
+                            <span class="metric__number" id="stat-ttfb">--</span>
+                            <span class="metric__unit">ms</span>
+                        </div>
+                        <div class="metric__bar">
+                            <div class="metric__bar-fill" id="ttfb-bar"></div>
+                        </div>
+                    </div>
+
+                    <div class="metric metric--highlight">
+                        <div class="metric__header">
+                            <span class="metric__label">Real-Time Factor</span>
+                            <button class="metric__info" aria-label="RTFx explanation" data-tooltip="Audio duration divided by processing time. Values above 1x mean faster than real-time playback.">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <circle cx="12" cy="12" r="10"/>
+                                    <path d="M12 16v-4M12 8h.01"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="metric__value">
+                            <span class="metric__number metric__number--large" id="stat-rtfx">--</span>
+                            <span class="metric__unit">x</span>
+                        </div>
+                        <div class="metric__context" id="rtfx-context">&gt;1x = faster than real-time</div>
+                        <div class="metric__note" id="edge-opt-note" style="display: none;">(edge optimization applied)</div>
+                    </div>
+
+                    <div class="metric metric--status">
+                        <span class="metric__label">Model</span>
+                        <div class="model-status" id="model-status">
+                            <span class="model-status__dot"></span>
+                            <span class="model-status__text">Not loaded</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <footer class="footer">
+            <p><a href="https://github.com/kyutai-labs/pocket-tts" target="_blank" rel="noopener">Pocket TTS</a> by <a href="https://kyutai.org" target="_blank" rel="noopener">Kyutai</a>. This is an unofficial demo.</p>
+            <p class="footer__disclaimer">Do not use for voice cloning without consent, misinformation, fraud, or any harmful/illegal purpose. All liability disclaimed.</p>
+        </footer>
+    </div>
+
+    <script type="module" src="onnx-streaming.js?v=1"></script>
+</body>
+
+</html>

inference-worker.js

@@ -0,0 +1,1044 @@
+// Pocket TTS ONNX Web Worker
+console.log('Pocket TTS Worker Starting...');
+self.postMessage({ type: 'status', status: 'Worker Thread Started', state: 'idle' });
+
+// Load ONNX Runtime (will be loaded dynamically in loadModels for module worker)
+let ort = null;
+
+// Configuration
+const MODELS = {
+    mimi_encoder: './onnx/mimi_encoder.onnx',
+    text_conditioner: './onnx/text_conditioner.onnx',
+    flow_lm_main: './onnx/flow_lm_main_int8.onnx',
+    flow_lm_flow: './onnx/flow_lm_flow_int8.onnx',
+    mimi_decoder: './onnx/mimi_decoder_int8.onnx',
+    tokenizer: './tokenizer.model',
+    voices: './voices.bin'
+};
+
+const SAMPLE_RATE = 24000;
+const SAMPLES_PER_FRAME = 1920;
+const MAX_FRAMES = 500;
+
+// State
+let mimiEncoderSession = null;
+let textConditionerSession = null;
+let flowLmMainSession = null;
+let flowLmFlowSession = null;
+let mimiDecoderSession = null;
+let tokenizerProcessor = null;
+let tokenizerModelB64 = null;
+let predefinedVoices = {};
+let stTensors = []; // Optimization: Pre-allocated s/t tensors for max LSD
+let isGenerating = false;
+let isReady = false;
+
+// Dynamic LSD (Latent Solver/Diffusion steps)
+const MAX_LSD = 10;  // Default/max quality
+let currentLSD = MAX_LSD;
+
+// Current voice embedding (cached)
+let currentVoiceEmbedding = null;
+let currentVoiceName = null;
+
+// Text preprocessing utilities
+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 ORDINAL_ONES = ['', 'first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth', 'eleventh', 'twelfth', 'thirteenth', 'fourteenth', 'fifteenth', 'sixteenth', 'seventeenth', 'eighteenth', 'nineteenth'];
+const ORDINAL_TENS = ['', '', 'twentieth', 'thirtieth', 'fortieth', 'fiftieth', 'sixtieth', 'seventieth', 'eightieth', 'ninetieth'];
+
+function numberToWords(num, options = {}) {
+    const { andword = '', zero = 'zero', group = 0 } = options;
+    if (num === 0) return zero;
+    const convert = (n) => {
+        if (n < 20) return ONES[n];
+        if (n < 100) return TENS[Math.floor(n / 10)] + (n % 10 ? ' ' + ONES[n % 10] : '');
+        if (n < 1000) {
+            const remainder = n % 100;
+            return ONES[Math.floor(n / 100)] + ' hundred' + (remainder ? (andword ? ' ' + andword + ' ' : ' ') + convert(remainder) : '');
+        }
+        if (n < 1000000) {
+            const thousands = Math.floor(n / 1000);
+            const remainder = n % 1000;
+            return convert(thousands) + ' thousand' + (remainder ? ' ' + convert(remainder) : '');
+        }
+        if (n < 1000000000) {
+            const millions = Math.floor(n / 1000000);
+            const remainder = n % 1000000;
+            return convert(millions) + ' million' + (remainder ? ' ' + convert(remainder) : '');
+        }
+        const billions = Math.floor(n / 1000000000);
+        const remainder = n % 1000000000;
+        return convert(billions) + ' billion' + (remainder ? ' ' + convert(remainder) : '');
+    };
+    if (group === 2 && num > 1000 && num < 10000) {
+        const high = Math.floor(num / 100);
+        const low = num % 100;
+        if (low === 0) return convert(high) + ' hundred';
+        else if (low < 10) return convert(high) + ' ' + (zero === 'oh' ? 'oh' : zero) + ' ' + ONES[low];
+        else return convert(high) + ' ' + convert(low);
+    }
+    return convert(num);
+}
+
+function ordinalToWords(num) {
+    if (num < 20) return ORDINAL_ONES[num] || numberToWords(num) + 'th';
+    if (num < 100) {
+        const tens = Math.floor(num / 10);
+        const ones = num % 10;
+        if (ones === 0) return ORDINAL_TENS[tens];
+        return TENS[tens] + ' ' + ORDINAL_ONES[ones];
+    }
+    const cardinal = numberToWords(num);
+    if (cardinal.endsWith('y')) return cardinal.slice(0, -1) + 'ieth';
+    if (cardinal.endsWith('one')) return cardinal.slice(0, -3) + 'first';
+    if (cardinal.endsWith('two')) return cardinal.slice(0, -3) + 'second';
+    if (cardinal.endsWith('three')) return cardinal.slice(0, -5) + 'third';
+    if (cardinal.endsWith('ve')) return cardinal.slice(0, -2) + 'fth';
+    if (cardinal.endsWith('e')) return cardinal.slice(0, -1) + 'th';
+    if (cardinal.endsWith('t')) return cardinal + 'h';
+    return cardinal + 'th';
+}
+
+const UNICODE_MAP = {
+    'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c', 'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u', 'ý': 'y', 'ÿ': 'y', 'ß': 'ss', 'œ': 'oe', 'ð': 'd', 'þ': 'th', 'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE', 'Ç': 'C', 'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ý': 'Y', '\u201C': '"', '\u201D': '"', '\u2018': "'", '\u2019': "'", '\u2026': '...', '\u2013': '-', '\u2014': '-'
+};
+
+function convertToAscii(text) {
+    return text.split('').map(c => UNICODE_MAP[c] || c).join('').normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+
+const ABBREVIATIONS = [
+    [/\bmrs\./gi, 'misuss'], [/\bms\./gi, 'miss'], [/\bmr\./gi, 'mister'], [/\bdr\./gi, 'doctor'], [/\bst\./gi, 'saint'], [/\bco\./gi, 'company'], [/\bjr\./gi, 'junior'], [/\bmaj\./gi, 'major'], [/\bgen\./gi, 'general'], [/\bdrs\./gi, 'doctors'], [/\brev\./gi, 'reverend'], [/\blt\./gi, 'lieutenant'], [/\bhon\./gi, 'honorable'], [/\bsgt\./gi, 'sergeant'], [/\bcapt\./gi, 'captain'], [/\besq\./gi, 'esquire'], [/\bltd\./gi, 'limited'], [/\bcol\./gi, 'colonel'], [/\bft\./gi, 'fort']
+];
+const CASED_ABBREVIATIONS = [
+    [/\bTTS\b/g, 'text to speech'], [/\bHz\b/g, 'hertz'], [/\bkHz\b/g, 'kilohertz'], [/\bKBs\b/g, 'kilobytes'], [/\bKB\b/g, 'kilobyte'], [/\bMBs\b/g, 'megabytes'], [/\bMB\b/g, 'megabyte'], [/\bGBs\b/g, 'gigabytes'], [/\bGB\b/g, 'gigabyte'], [/\bTBs\b/g, 'terabytes'], [/\bTB\b/g, 'terabyte'], [/\bAPIs\b/g, "a p i's"], [/\bAPI\b/g, 'a p i'], [/\bCLIs\b/g, "c l i's"], [/\bCLI\b/g, 'c l i'], [/\bCPUs\b/g, "c p u's"], [/\bCPU\b/g, 'c p u'], [/\bGPUs\b/g, "g p u's"], [/\bGPU\b/g, 'g p u'], [/\bAve\b/g, 'avenue'], [/\betc\b/g, 'etcetera']
+];
+
+function expandAbbreviations(text) {
+    for (const [regex, replacement] of [...ABBREVIATIONS, ...CASED_ABBREVIATIONS]) text = text.replace(regex, replacement);
+    return text;
+}
+
+const NUM_PREFIX_RE = /#(\d)/g;
+const NUM_SUFFIX_RE = /(\d)([KMBT])/gi;
+const NUM_LETTER_SPLIT_RE = /(\d)([a-z])|([a-z])(\d)/gi;
+const COMMA_NUMBER_RE = /(\d[\d,]+\d)/g;
+const DATE_RE = /(^|[^/])(\d\d?[/-]\d\d?[/-]\d\d(?:\d\d)?)($|[^/])/g;
+const PHONE_NUMBER_RE = /\(?\d{3}\)?[-.\s]\d{3}[-.\s]?\d{4}/g;
+const TIME_RE = /(\d\d?):(\d\d)(?::(\d\d))?/g;
+const POUNDS_RE = /£([\d,]*\d+)/g;
+const DOLLARS_RE = /\$([\d.,]*\d+)/g;
+const DECIMAL_NUMBER_RE = /(\d+(?:\.\d+)+)/g;
+const MULTIPLY_RE = /(\d)\s?\*\s?(\d)/g;
+const DIVIDE_RE = /(\d)\s?\/\s?(\d)/g;
+const ADD_RE = /(\d)\s?\+\s?(\d)/g;
+const SUBTRACT_RE = /(\d)?\s?-\s?(\d)/g;
+const FRACTION_RE = /(\d+)\/(\d+)/g;
+const ORDINAL_RE = /(\d+)(st|nd|rd|th)/gi;
+const NUMBER_RE = /\d+/g;
+
+function normalizeNumbers(text) {
+    text = text.replace(NUM_PREFIX_RE, (_, d) => `number ${d}`);
+    text = text.replace(NUM_SUFFIX_RE, (_, num, suffix) => {
+        const map = { k: 'thousand', m: 'million', b: 'billion', t: 'trillion' };
+        return `${num} ${map[suffix.toLowerCase()]}`;
+    });
+    for (let i = 0; i < 2; i++) {
+        text = text.replace(NUM_LETTER_SPLIT_RE, (m, d1, l1, l2, d2) => {
+            if (d1 && l1) return `${d1} ${l1}`;
+            if (l2 && d2) return `${l2} ${d2}`;
+            return m;
+        });
+    }
+    text = text.replace(COMMA_NUMBER_RE, m => m.replace(/,/g, ''));
+    text = text.replace(DATE_RE, (_, pre, date, post) => pre + date.split(/[./-]/).join(' dash ') + post);
+    text = text.replace(PHONE_NUMBER_RE, m => {
+        const digits = m.replace(/\D/g, '');
+        return digits.length === 10 ? `${digits.slice(0, 3).split('').join(' ')}, ${digits.slice(3, 6).split('').join(' ')}, ${digits.slice(6).split('').join(' ')}` : m;
+    });
+    text = text.replace(TIME_RE, (_, hours, minutes, seconds) => {
+        const h = parseInt(hours), m = parseInt(minutes), s = seconds ? parseInt(seconds) : 0;
+        if (!seconds) return m === 0 ? (h === 0 ? '0' : h > 12 ? `${hours} minutes` : `${hours} o'clock`) : minutes.startsWith('0') ? `${hours} oh ${minutes[1]}` : `${hours} ${minutes}`;
+        let res = '';
+        if (h !== 0) res = hours + ' ' + (m === 0 ? 'oh oh' : minutes.startsWith('0') ? `oh ${minutes[1]}` : minutes);
+        else if (m !== 0) res = minutes + ' ' + (s === 0 ? 'oh oh' : seconds.startsWith('0') ? `oh ${seconds[1]}` : seconds);
+        else res = seconds;
+        return res + ' ' + (s === 0 ? '' : seconds.startsWith('0') ? `oh ${seconds[1]}` : seconds);
+    });
+    text = text.replace(POUNDS_RE, (_, amount) => `${amount.replace(/,/g, '')} pounds`);
+    text = text.replace(DOLLARS_RE, (_, amount) => {
+        const parts = amount.replace(/,/g, '').split('.');
+        const dollars = parseInt(parts[0]) || 0;
+        const cents = parts[1] ? parseInt(parts[1]) : 0;
+        if (dollars && cents) return `${dollars} ${dollars === 1 ? 'dollar' : 'dollars'}, ${cents} ${cents === 1 ? 'cent' : 'cents'}`;
+        if (dollars) return `${dollars} ${dollars === 1 ? 'dollar' : 'dollars'}`;
+        if (cents) return `${cents} ${cents === 1 ? 'cent' : 'cents'}`;
+        return 'zero dollars';
+    });
+    text = text.replace(DECIMAL_NUMBER_RE, m => m.split('.').join(' point ').split('').join(' '));
+    text = text.replace(MULTIPLY_RE, '$1 times $2');
+    text = text.replace(DIVIDE_RE, '$1 over $2');
+    text = text.replace(ADD_RE, '$1 plus $2');
+    text = text.replace(SUBTRACT_RE, (_, a, b) => (a ? a : '') + ' minus ' + b);
+    text = text.replace(FRACTION_RE, '$1 over $2');
+    text = text.replace(ORDINAL_RE, (_, num) => ordinalToWords(parseInt(num)));
+    text = text.replace(NUMBER_RE, m => {
+        const num = parseInt(m);
+        if (num > 1000 && num < 3000) {
+            if (num === 2000) return 'two thousand';
+            if (num > 2000 && num < 2010) return 'two thousand ' + numberToWords(num % 100);
+            if (num % 100 === 0) return numberToWords(Math.floor(num / 100)) + ' hundred';
+            return numberToWords(num, { zero: 'oh', group: 2 });
+        }
+        return numberToWords(num);
+    });
+    return text;
+}
+
+const SPECIAL_CHARACTERS = [
+    [/@/g, ' at '], [/&/g, ' and '], [/%/g, ' percent '], [/:/g, '.'], [/;/g, ','], [/\+/g, ' plus '], [/\\/g, ' backslash '], [/~/g, ' about '], [/(^| )<3/g, ' heart '], [/<=/g, ' less than or equal to '], [/>=/g, ' greater than or equal to '], [/</g, ' less than '], [/>/g, ' greater than '], [/=/g, ' equals '], [/\//g, ' slash '], [/_/g, ' '],
+];
+const LINK_HEADER_RE = /https?:\/\//gi;
+const DASH_RE = /(.) - (.)/g;
+const DOT_RE = /([A-Z])\.([A-Z])/gi;
+const PARENTHESES_RE = /[\(\[\{][^\)\]\}]*[\)\]\}](.)?/g;
+
+function normalizeSpecial(text) {
+    text = text.replace(LINK_HEADER_RE, 'h t t p s colon slash slash ');
+    text = text.replace(DASH_RE, '$1, $2');
+    text = text.replace(DOT_RE, '$1 dot $2');
+    text = text.replace(PARENTHESES_RE, (m, after) => {
+        let result = m.replace(/[\(\[\{]/g, ', ').replace(/[\)\]\}]/g, ', ');
+        if (after && /[$.!?,]/.test(after)) result = result.slice(0, -2) + after;
+        return result;
+    });
+    return text;
+}
+
+function expandSpecialCharacters(text) {
+    for (const [regex, replacement] of SPECIAL_CHARACTERS) text = text.replace(regex, replacement);
+    return text;
+}
+
+function collapseWhitespace(text) {
+    return text.replace(/\s+/g, ' ').replace(/ ([.\?!,])/g, '$1');
+}
+
+function dedupPunctuation(text) {
+    return text.replace(/\.\.\.+/g, '[ELLIPSIS]').replace(/,+/g, ',').replace(/[.,]*\.[.,]*/g, '.').replace(/[.,!]*![.,!]*/g, '!').replace(/[.,!?]*\?[.,!?]*/g, '?').replace(/\[ELLIPSIS\]/g, '...');
+}
+
+// Split text into sentence chunks (max 50 tokens each)
+function splitIntoBestSentences(text) {
+    const preparedText = prepareText(text);
+    if (!preparedText) return [];
+
+    const tokenIds = tokenizerProcessor.encodeIds(preparedText);
+
+    // Get end-of-sentence token IDs
+    const eosTokenIds = tokenizerProcessor.encodeIds('.!...?');
+    const eosSet = new Set(eosTokenIds);
+
+    // Find sentence boundaries
+    const endOfSentenceIndices = [0];
+    let previousWasEos = false;
+
+    for (let i = 0; i < tokenIds.length; i++) {
+        if (eosSet.has(tokenIds[i])) {
+            previousWasEos = true;
+        } else {
+            if (previousWasEos) {
+                endOfSentenceIndices.push(i);
+            }
+            previousWasEos = false;
+        }
+    }
+    endOfSentenceIndices.push(tokenIds.length);
+
+    // Reconstruct sentences with token counts
+    const sentences = [];
+    for (let i = 0; i < endOfSentenceIndices.length - 1; i++) {
+        const start = endOfSentenceIndices[i];
+        const end = endOfSentenceIndices[i + 1];
+        const sentenceTokens = tokenIds.slice(start, end);
+        const sentenceText = tokenizerProcessor.decodeIds(sentenceTokens).trim();
+        sentences.push({ tokens: end - start, text: sentenceText });
+    }
+
+    // Merge into chunks of max 50 tokens
+    const MAX_TOKENS = 50;
+    const chunks = [];
+    let currentChunk = '';
+    let currentTokens = 0;
+
+    for (const { tokens, text } of sentences) {
+        if (currentChunk === '') {
+            currentChunk = text;
+            currentTokens = tokens;
+            continue;
+        }
+
+        if (currentTokens + tokens > MAX_TOKENS) {
+            chunks.push(currentChunk.trim());
+            currentChunk = text;
+            currentTokens = tokens;
+        } else {
+            currentChunk += ' ' + text;
+            currentTokens += tokens;
+        }
+    }
+
+    if (currentChunk !== '') {
+        chunks.push(currentChunk.trim());
+    }
+
+    return chunks;
+}
+
+// Pocket TTS specific text preprocessing
+function prepareText(text) {
+    text = text.trim();
+    if (!text) return '';
+
+    // Convert to ASCII
+    text = convertToAscii(text);
+
+    // Normalize numbers first
+    text = normalizeNumbers(text);
+
+    // Normalize special characters
+    text = normalizeSpecial(text);
+
+    // Expand abbreviations
+    text = expandAbbreviations(text);
+
+    // Expand special characters
+    text = expandSpecialCharacters(text);
+
+    // Collapse whitespace
+    text = collapseWhitespace(text);
+
+    // Deduplicate punctuation
+    text = dedupPunctuation(text);
+
+    // Final cleanup
+    text = text.trim();
+
+    // Ensure proper punctuation at end
+    if (text && text[text.length - 1].match(/[a-zA-Z0-9]/)) {
+        text = text + '.';
+    }
+
+    // Capitalize first letter
+    if (text && !text[0].match(/[A-Z]/)) {
+        text = text[0].toUpperCase() + text.slice(1);
+    }
+
+    return text;
+}
+
+// ----------------------------------------------------------------------------
+// Worker Logic
+// ----------------------------------------------------------------------------
+
+self.onmessage = async (e) => {
+    const { type, data } = e.data;
+    console.log('Worker received message:', type);
+
+    if (type === 'load') {
+        try {
+            await loadModels();
+            postMessage({ type: 'loaded' });
+        } catch (err) {
+            postMessage({ type: 'error', error: err.toString() });
+        }
+    } else if (type === 'generate') {
+        if (!isReady) {
+            postMessage({ type: 'error', error: 'Models are not loaded yet.' });
+            return;
+        }
+        if (isGenerating) return;
+        try {
+            await startGeneration(data.text, data.voice);
+        } catch (err) {
+            console.error('Generation Error:', err);
+            postMessage({ type: 'error', error: err.toString() });
+        }
+    } else if (type === 'encode_voice') {
+        if (!isReady) {
+            postMessage({ type: 'error', error: 'Models are not loaded yet.' });
+            return;
+        }
+        try {
+            const embedding = await encodeVoiceAudio(data.audio);
+            currentVoiceEmbedding = embedding;
+            currentVoiceName = 'custom';
+            postMessage({ type: 'voice_encoded', voiceName: 'custom' });
+        } catch (err) {
+            console.error('Voice encoding error:', err);
+            postMessage({ type: 'error', error: 'Failed to encode voice: ' + err.toString() });
+        }
+    } else if (type === 'set_voice') {
+        if (!isReady) {
+            postMessage({ type: 'error', error: 'Models are not loaded yet.' });
+            return;
+        }
+        if (data.voiceName === 'custom') {
+            // Custom voice already set via encode_voice
+            postMessage({ type: 'voice_set', voiceName: 'custom' });
+        } else if (predefinedVoices[data.voiceName]) {
+            currentVoiceEmbedding = predefinedVoices[data.voiceName];
+            currentVoiceName = data.voiceName;
+            postMessage({ type: 'voice_set', voiceName: data.voiceName });
+        } else {
+            postMessage({ type: 'error', error: `Unknown voice: ${data.voiceName}` });
+        }
+    } else if (type === 'set_lsd') {
+        // Dynamic LSD adjustment for edge devices
+        const newLSD = Math.max(1, Math.min(MAX_LSD, data.lsd));
+        if (newLSD !== currentLSD) {
+            console.log(`LSD adjusted: ${currentLSD} → ${newLSD}`);
+            currentLSD = newLSD;
+        }
+    } else if (type === 'stop') {
+        isGenerating = false;
+        postMessage({ type: 'status', status: 'Stopped', state: 'idle' });
+    }
+};
+
+async function loadModels() {
+    if (mimiEncoderSession) return;
+
+    postMessage({ type: 'status', status: 'Loading ONNX Runtime...', state: 'loading' });
+
+    // Load ONNX Runtime dynamically
+    const version = '1.20.0';
+    const cdnBase = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${version}/dist/`;
+
+    try {
+        const ortModule = await import(`https://cdn.jsdelivr.net/npm/onnxruntime-web@${version}/dist/ort.min.mjs`);
+        ort = ortModule.default || ortModule;
+    } catch (e) {
+        console.error('Failed to load ONNX Runtime:', e);
+        throw new Error('Failed to load ONNX Runtime: ' + e.message);
+    }
+
+    if (!ort) {
+        throw new Error('ONNX Runtime failed to load');
+    }
+
+    postMessage({ type: 'status', status: 'Loading models...', state: 'loading' });
+
+    // Configure WASM Paths
+    ort.env.wasm.wasmPaths = cdnBase;
+
+    // Enable SIMD for significant performance boost (2-4x faster)
+    ort.env.wasm.simd = true;
+
+    // Configure multi-threading
+    if (!self.crossOriginIsolated) {
+        console.warn('Environment is not cross-origin isolated. Disabling WASM multi-threading.');
+        console.warn('To enable multi-threading, serve with headers:');
+        console.warn('  Cross-Origin-Opener-Policy: same-origin');
+        console.warn('  Cross-Origin-Embedder-Policy: require-corp');
+        ort.env.wasm.numThreads = 1;
+    } else {
+        const threads = Math.min(navigator.hardwareConcurrency || 4, 8);
+        ort.env.wasm.numThreads = threads;
+        console.log(`Multi-threading enabled with ${threads} threads`);
+    }
+
+    console.log(`ONNX Runtime Web config: simd=${ort.env.wasm.simd}, threads=${ort.env.wasm.numThreads}`);
+
+    try {
+        const sessionOptions = {
+            executionProviders: ['wasm'],
+            graphOptimizationLevel: 'all'
+        };
+
+        // Load all models in parallel
+        postMessage({ type: 'status', status: 'Loading MIMI encoder...', state: 'loading' });
+        console.log('Loading MIMI encoder...');
+
+        const [encoderRes, textCondRes, flowMainRes, flowFlowRes, decoderRes] = await Promise.all([
+            ort.InferenceSession.create(MODELS.mimi_encoder, sessionOptions),
+            ort.InferenceSession.create(MODELS.text_conditioner, sessionOptions),
+            ort.InferenceSession.create(MODELS.flow_lm_main, sessionOptions),
+            ort.InferenceSession.create(MODELS.flow_lm_flow, sessionOptions),
+            ort.InferenceSession.create(MODELS.mimi_decoder, sessionOptions)
+        ]);
+
+        mimiEncoderSession = encoderRes;
+        textConditionerSession = textCondRes;
+        flowLmMainSession = flowMainRes;
+        flowLmFlowSession = flowFlowRes;
+        mimiDecoderSession = decoderRes;
+
+        console.log('All models loaded successfully');
+        console.log('Flow LM Main inputs:', flowLmMainSession.inputNames);
+        console.log('Flow LM Main outputs:', flowLmMainSession.outputNames);
+        console.log('MIMI decoder inputs:', mimiDecoderSession.inputNames);
+        console.log('MIMI decoder outputs:', mimiDecoderSession.outputNames);
+
+        // Load tokenizer
+        postMessage({ type: 'status', status: 'Loading tokenizer...', state: 'loading' });
+        console.log('Loading tokenizer...');
+
+        const tokenizerResponse = await fetch(MODELS.tokenizer);
+        if (!tokenizerResponse.ok) {
+            throw new Error(`Failed to load tokenizer: ${tokenizerResponse.statusText}`);
+        }
+        const tokenizerBuffer = await tokenizerResponse.arrayBuffer();
+        tokenizerModelB64 = btoa(String.fromCharCode(...new Uint8Array(tokenizerBuffer)));
+
+        // Import and initialize sentencepiece processor
+        const spModule = await import('./sentencepiece.js?v=2');
+        const SentencePieceProcessor = spModule.SentencePieceProcessor;
+        if (!SentencePieceProcessor) {
+            throw new Error('SentencePieceProcessor not found in sentencepiece.js');
+        }
+        tokenizerProcessor = new SentencePieceProcessor();
+        await tokenizerProcessor.loadFromB64StringModel(tokenizerModelB64);
+        console.log('Tokenizer loaded');
+
+        // Load predefined voices
+        postMessage({ type: 'status', status: 'Loading voices...', state: 'loading' });
+        console.log('Loading predefined voices...');
+
+        try {
+            const voicesResponse = await fetch(MODELS.voices);
+            if (voicesResponse.ok) {
+                const voicesData = await voicesResponse.arrayBuffer();
+                predefinedVoices = parseVoicesBin(voicesData);
+                console.log('Loaded voices:', Object.keys(predefinedVoices));
+
+                // Set default voice
+                if (predefinedVoices['cosette']) {
+                    currentVoiceEmbedding = predefinedVoices['cosette'];
+                    currentVoiceName = 'cosette';
+                } else {
+                    // Use first available voice
+                    const firstVoice = Object.keys(predefinedVoices)[0];
+                    if (firstVoice) {
+                        currentVoiceEmbedding = predefinedVoices[firstVoice];
+                        currentVoiceName = firstVoice;
+                    }
+                }
+            }
+        } catch (e) {
+            console.warn('Could not load predefined voices:', e);
+        }
+
+        // Send list of available voices
+        postMessage({
+            type: 'voices_loaded',
+            voices: Object.keys(predefinedVoices),
+            defaultVoice: currentVoiceName
+        });
+
+        // Pre-allocate s/t tensors for Flow Matching Loop (Optimization)
+        // Pre-allocate for MAX_LSD to support dynamic switching
+        console.log(`Pre-allocating Flow Matching tensors for LSD 1-${MAX_LSD}...`);
+        stTensors = {};
+
+        for (let lsd = 1; lsd <= MAX_LSD; lsd++) {
+            stTensors[lsd] = [];
+            const dt = 1.0 / lsd;
+            for (let j = 0; j < lsd; j++) {
+                const s = j / lsd;
+                const t = s + dt;
+                stTensors[lsd].push({
+                    s: new ort.Tensor('float32', new Float32Array([s]), [1, 1]),
+                    t: new ort.Tensor('float32', new Float32Array([t]), [1, 1])
+                });
+            }
+        }
+
+        isReady = true;
+        postMessage({ type: 'status', status: 'Ready', state: 'idle' });
+        postMessage({ type: 'model_status', status: 'ready', text: 'Ready' });
+        postMessage({ type: 'loaded' });
+
+    } catch (err) {
+        console.error('Model load failed:', err);
+        throw err;
+    }
+}
+
+function parseVoicesBin(buffer) {
+    // Simple binary format:
+    // Header: 4 bytes (uint32) = number of voices
+    // For each voice:
+    //   - 32 bytes: voice name (null-terminated string)
+    //   - 4 bytes (uint32): number of frames
+    //   - 4 bytes (uint32): embedding dim (1024)
+    //   - frames * dim * 4 bytes: float32 embeddings
+
+    const voices = {};
+    const view = new DataView(buffer);
+    let offset = 0;
+
+    const numVoices = view.getUint32(offset, true);
+    offset += 4;
+
+    for (let i = 0; i < numVoices; i++) {
+        // Read voice name
+        const nameBytes = new Uint8Array(buffer, offset, 32);
+        const nameEnd = nameBytes.indexOf(0);
+        const name = new TextDecoder().decode(nameBytes.subarray(0, nameEnd > 0 ? nameEnd : 32)).trim();
+        offset += 32;
+
+        // Read dimensions
+        const numFrames = view.getUint32(offset, true);
+        offset += 4;
+        const embDim = view.getUint32(offset, true);
+        offset += 4;
+
+        // Read embeddings
+        const embSize = numFrames * embDim;
+        const embeddings = new Float32Array(buffer, offset, embSize);
+        offset += embSize * 4;
+
+        // Store as [1, numFrames, embDim] shaped array info
+        voices[name] = {
+            data: new Float32Array(embeddings),
+            shape: [1, numFrames, embDim]
+        };
+
+        console.log(`Loaded voice '${name}': ${numFrames} frames, ${embDim} dim`);
+    }
+
+    return voices;
+}
+
+async function encodeVoiceAudio(audioData) {
+    // audioData should be Float32Array at 24kHz, mono
+    // Reshape to [1, 1, samples]
+    const input = new ort.Tensor('float32', audioData, [1, 1, audioData.length]);
+
+    const outputs = await mimiEncoderSession.run({ audio: input });
+    const embeddings = outputs[mimiEncoderSession.outputNames[0]];
+
+    return {
+        data: new Float32Array(embeddings.data),
+        shape: embeddings.dims
+    };
+}
+
+// Hardcoded state shapes extracted from ONNX model metadata
+// These are the initial shapes - dynamic dimensions start at 0
+const FLOW_LM_STATE_SHAPES = {
+    // KV cache layers: [kv=2, batch=1, max_seq=1000, heads=16, head_dim=64]
+    state_0: { shape: [2, 1, 1000, 16, 64], dtype: 'float32' },
+    state_1: { shape: [0], dtype: 'float32' },  // dynamic
+    state_2: { shape: [1], dtype: 'int64' },    // step counter
+    state_3: { shape: [2, 1, 1000, 16, 64], dtype: 'float32' },
+    state_4: { shape: [0], dtype: 'float32' },
+    state_5: { shape: [1], dtype: 'int64' },
+    state_6: { shape: [2, 1, 1000, 16, 64], dtype: 'float32' },
+    state_7: { shape: [0], dtype: 'float32' },
+    state_8: { shape: [1], dtype: 'int64' },
+    state_9: { shape: [2, 1, 1000, 16, 64], dtype: 'float32' },
+    state_10: { shape: [0], dtype: 'float32' },
+    state_11: { shape: [1], dtype: 'int64' },
+    state_12: { shape: [2, 1, 1000, 16, 64], dtype: 'float32' },
+    state_13: { shape: [0], dtype: 'float32' },
+    state_14: { shape: [1], dtype: 'int64' },
+    state_15: { shape: [2, 1, 1000, 16, 64], dtype: 'float32' },
+    state_16: { shape: [0], dtype: 'float32' },
+    state_17: { shape: [1], dtype: 'int64' },
+};
+
+const MIMI_DECODER_STATE_SHAPES = {
+    state_0: { shape: [1], dtype: 'bool' },
+    state_1: { shape: [1, 512, 6], dtype: 'float32' },
+    state_2: { shape: [1], dtype: 'bool' },
+    state_3: { shape: [1, 64, 2], dtype: 'float32' },
+    state_4: { shape: [1, 256, 6], dtype: 'float32' },
+    state_5: { shape: [1], dtype: 'bool' },
+    state_6: { shape: [1, 256, 2], dtype: 'float32' },
+    state_7: { shape: [1], dtype: 'bool' },
+    state_8: { shape: [1, 128, 0], dtype: 'float32' },  // dynamic
+    state_9: { shape: [1, 128, 5], dtype: 'float32' },
+    state_10: { shape: [1], dtype: 'bool' },
+    state_11: { shape: [1, 128, 2], dtype: 'float32' },
+    state_12: { shape: [1], dtype: 'bool' },
+    state_13: { shape: [1, 64, 0], dtype: 'float32' },  // dynamic
+    state_14: { shape: [1, 64, 4], dtype: 'float32' },
+    state_15: { shape: [1], dtype: 'bool' },
+    state_16: { shape: [1, 64, 2], dtype: 'float32' },
+    state_17: { shape: [1], dtype: 'bool' },
+    state_18: { shape: [1, 32, 0], dtype: 'float32' },  // dynamic
+    state_19: { shape: [2, 1, 8, 1000, 64], dtype: 'float32' },
+    state_20: { shape: [1], dtype: 'int64' },
+    state_21: { shape: [1], dtype: 'int64' },
+    state_22: { shape: [2, 1, 8, 1000, 64], dtype: 'float32' },
+    state_23: { shape: [1], dtype: 'int64' },
+    state_24: { shape: [1], dtype: 'int64' },
+    state_25: { shape: [1], dtype: 'bool' },
+    state_26: { shape: [1, 512, 16], dtype: 'float32' },
+    state_27: { shape: [1], dtype: 'bool' },
+    state_28: { shape: [1, 1, 6], dtype: 'float32' },
+    state_29: { shape: [1], dtype: 'bool' },
+    state_30: { shape: [1, 64, 2], dtype: 'float32' },
+    state_31: { shape: [1], dtype: 'bool' },
+    state_32: { shape: [1, 32, 0], dtype: 'float32' },  // dynamic
+    state_33: { shape: [1], dtype: 'bool' },
+    state_34: { shape: [1, 512, 2], dtype: 'float32' },
+    state_35: { shape: [1], dtype: 'bool' },
+    state_36: { shape: [1, 64, 4], dtype: 'float32' },
+    state_37: { shape: [1], dtype: 'bool' },
+    state_38: { shape: [1, 128, 2], dtype: 'float32' },
+    state_39: { shape: [1], dtype: 'bool' },
+    state_40: { shape: [1, 64, 0], dtype: 'float32' },  // dynamic
+    state_41: { shape: [1], dtype: 'bool' },
+    state_42: { shape: [1, 128, 5], dtype: 'float32' },
+    state_43: { shape: [1], dtype: 'bool' },
+    state_44: { shape: [1, 256, 2], dtype: 'float32' },
+    state_45: { shape: [1], dtype: 'bool' },
+    state_46: { shape: [1, 128, 0], dtype: 'float32' },  // dynamic
+    state_47: { shape: [1], dtype: 'bool' },
+    state_48: { shape: [1, 256, 6], dtype: 'float32' },
+    state_49: { shape: [2, 1, 8, 1000, 64], dtype: 'float32' },
+    state_50: { shape: [1], dtype: 'int64' },
+    state_51: { shape: [1], dtype: 'int64' },
+    state_52: { shape: [2, 1, 8, 1000, 64], dtype: 'float32' },
+    state_53: { shape: [1], dtype: 'int64' },
+    state_54: { shape: [1], dtype: 'int64' },
+    state_55: { shape: [1, 512, 16], dtype: 'float32' },
+};
+
+function initState(session, stateShapes) {
+    /**
+     * Initialize state tensors for a stateful ONNX model using hardcoded shapes.
+     */
+    const state = {};
+
+    for (const inputName of session.inputNames) {
+        if (inputName.startsWith('state_')) {
+            const stateInfo = stateShapes[inputName];
+            if (!stateInfo) {
+                console.warn(`Unknown state input: ${inputName}, skipping`);
+                continue;
+            }
+
+            const { shape, dtype } = stateInfo;
+            const size = shape.reduce((a, b) => a * b, 1);
+
+            let data;
+            if (dtype === 'int64') {
+                data = new BigInt64Array(size);
+            } else if (dtype === 'bool') {
+                data = new Uint8Array(size);
+            } else {
+                data = new Float32Array(size);
+            }
+
+            state[inputName] = new ort.Tensor(dtype, data, shape);
+            console.log(`Init state ${inputName}: shape=${JSON.stringify(shape)}, dtype=${dtype}`);
+        }
+    }
+
+    return state;
+}
+
+async function startGeneration(text, voiceName) {
+    isGenerating = true;
+    currentLSD = MAX_LSD;  // Reset to max quality for each new generation
+    postMessage({ type: 'status', status: 'Generating...', state: 'running' });
+    postMessage({ type: 'generation_started', data: { time: performance.now() } });
+
+    try {
+        // Split text into sentence chunks (max 50 tokens each)
+        const chunks = splitIntoBestSentences(text);
+        console.log(`Split into ${chunks.length} chunks:`, chunks);
+
+        if (chunks.length === 0) {
+            throw new Error('No text to generate');
+        }
+
+        // Get voice embedding
+        let voiceEmb = currentVoiceEmbedding;
+        if (voiceName && voiceName !== currentVoiceName) {
+            if (predefinedVoices[voiceName]) {
+                voiceEmb = predefinedVoices[voiceName];
+                currentVoiceEmbedding = voiceEmb;
+                currentVoiceName = voiceName;
+            }
+        }
+
+        if (!voiceEmb) {
+            throw new Error('No voice embedding available. Please select a voice or upload custom audio.');
+        }
+
+        // Run generation pipeline with chunks
+        await runGenerationPipeline(voiceEmb, chunks);
+
+    } catch (err) {
+        console.error('Generation error:', err);
+        postMessage({ type: 'error', error: err.toString() });
+    } finally {
+        if (isGenerating) {
+            postMessage({ type: 'stream_ended' });
+            postMessage({ type: 'status', status: 'Finished', state: 'idle' });
+        }
+        isGenerating = false;
+    }
+}
+
+async function runGenerationPipeline(voiceEmb, chunks) {
+    // Initialize state - persists across all chunks
+    let flowLmState = initState(flowLmMainSession, FLOW_LM_STATE_SHAPES);
+    let mimiState = initState(mimiDecoderSession, MIMI_DECODER_STATE_SHAPES);
+    const emptySeq = new ort.Tensor('float32', new Float32Array(0), [1, 0, 32]);
+    const emptyTextEmb = new ort.Tensor('float32', new Float32Array(0), [1, 0, 1024]);
+
+    // Voice embedding tensor
+    const voiceTensor = new ort.Tensor('float32', voiceEmb.data, voiceEmb.shape);
+    console.log('Voice embeddings shape:', voiceEmb.shape);
+
+    // Voice conditioning (once for all chunks)
+    console.log('Running voice conditioning...');
+    const voiceCondInputs = {
+        sequence: emptySeq,
+        text_embeddings: voiceTensor,
+        ...flowLmState
+    };
+
+    let condResult = await flowLmMainSession.run(voiceCondInputs);
+
+    // Update state from voice conditioning
+    for (let i = 2; i < flowLmMainSession.outputNames.length; i++) {
+        const outputName = flowLmMainSession.outputNames[i];
+        if (outputName.startsWith('out_state_')) {
+            const stateIdx = parseInt(outputName.replace('out_state_', ''));
+            flowLmState[`state_${stateIdx}`] = condResult[outputName];
+        }
+    }
+
+    // Streaming parameters
+    const FIRST_CHUNK_FRAMES = 3;
+    const NORMAL_CHUNK_FRAMES = 12;
+
+    // Tracking across all chunks
+    const allGeneratedLatents = [];
+    let isFirstAudioChunk = true;
+    let totalDecodedFrames = 0;
+    let totalFlowLmTime = 0;
+    let totalDecodeTime = 0;
+    const arStartTime = performance.now();
+
+    // Process each text chunk
+    for (let chunkIdx = 0; chunkIdx < chunks.length; chunkIdx++) {
+        if (!isGenerating) break;
+
+        const chunkText = chunks[chunkIdx];
+        console.log(`Processing chunk ${chunkIdx + 1}/${chunks.length}: "${chunkText}"`);
+
+        // Tokenize this chunk
+        const tokenIds = tokenizerProcessor.encodeIds(chunkText);
+        console.log(`Chunk ${chunkIdx + 1} tokens:`, tokenIds.length);
+
+        // Text conditioning for this chunk
+        const textInput = new ort.Tensor('int64', BigInt64Array.from(tokenIds.map(x => BigInt(x))), [1, tokenIds.length]);
+        const textCondResult = await textConditionerSession.run({ token_ids: textInput });
+        let textEmb = textCondResult[textConditionerSession.outputNames[0]];
+
+        if (textEmb.dims.length === 2) {
+            textEmb = new ort.Tensor('float32', textEmb.data, [1, textEmb.dims[0], textEmb.dims[1]]);
+        }
+
+        const textCondInputs = {
+            sequence: emptySeq,
+            text_embeddings: textEmb,
+            ...flowLmState
+        };
+
+        condResult = await flowLmMainSession.run(textCondInputs);
+
+        // Update state from text conditioning
+        for (let i = 2; i < flowLmMainSession.outputNames.length; i++) {
+            const outputName = flowLmMainSession.outputNames[i];
+            if (outputName.startsWith('out_state_')) {
+                const stateIdx = parseInt(outputName.replace('out_state_', ''));
+                flowLmState[`state_${stateIdx}`] = condResult[outputName];
+            }
+        }
+
+        // AR generation for this chunk
+        const chunkLatents = [];
+        let currentLatent = new ort.Tensor('float32', new Float32Array(32).fill(NaN), [1, 1, 32]);
+        let chunkDecodedFrames = 0;
+
+        for (let step = 0; step < MAX_FRAMES; step++) {
+            if (!isGenerating) break;
+
+            // Yield every 4 steps to allow message processing (e.g., set_lsd)
+            if (step > 0 && step % 4 === 0) {
+                await new Promise(r => setTimeout(r, 0));
+            }
+
+            const arInputs = {
+                sequence: currentLatent,
+                text_embeddings: emptyTextEmb,
+                ...flowLmState
+            };
+
+            const stepStart = performance.now();
+            const arResult = await flowLmMainSession.run(arInputs);
+
+            const conditioning = arResult['conditioning'];
+            const eosLogit = arResult['eos_logit'].data[0];
+            const isEos = eosLogit > -4.0;
+
+            // Flow matching (LSD loop) - uses currentLSD which can be adjusted dynamically
+            const TEMP = 0.7;
+            const STD = Math.sqrt(TEMP);
+            let xData = new Float32Array(32);
+            for (let i = 0; i < 32; i++) {
+                let u = 0, v = 0;
+                while (u === 0) u = Math.random();
+                while (v === 0) v = Math.random();
+                xData[i] = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v) * STD;
+            }
+
+            const lsdSteps = currentLSD;
+            const dt = 1.0 / lsdSteps;
+
+            for (let j = 0; j < lsdSteps; j++) {
+                const flowInputs = {
+                    c: conditioning,
+                    s: stTensors[lsdSteps][j].s,
+                    t: stTensors[lsdSteps][j].t,
+                    x: new ort.Tensor('float32', xData, [1, 32])
+                };
+
+                const flowResult = await flowLmFlowSession.run(flowInputs);
+                const v = flowResult['flow_dir'].data;
+
+                for (let k = 0; k < 32; k++) {
+                    xData[k] += v[k] * dt;
+                }
+            }
+
+            totalFlowLmTime += performance.now() - stepStart;
+
+            const latentData = xData;
+            chunkLatents.push(new Float32Array(latentData));
+            allGeneratedLatents.push(new Float32Array(latentData));
+
+            // Update state
+            currentLatent = new ort.Tensor('float32', latentData, [1, 1, 32]);
+            for (let i = 2; i < flowLmMainSession.outputNames.length; i++) {
+                const outputName = flowLmMainSession.outputNames[i];
+                if (outputName.startsWith('out_state_')) {
+                    const stateIdx = parseInt(outputName.replace('out_state_', ''));
+                    flowLmState[`state_${stateIdx}`] = arResult[outputName];
+                }
+            }
+
+            // Decode audio chunks
+            const pending = chunkLatents.length - chunkDecodedFrames;
+            let decodeSize = 0;
+
+            if (isEos) {
+                decodeSize = pending;
+            } else if (isFirstAudioChunk && pending >= FIRST_CHUNK_FRAMES) {
+                decodeSize = FIRST_CHUNK_FRAMES;
+            } else if (pending >= NORMAL_CHUNK_FRAMES) {
+                decodeSize = NORMAL_CHUNK_FRAMES;
+            }
+
+            if (decodeSize > 0) {
+                const decodeLatents = new Float32Array(decodeSize * 32);
+                for (let i = 0; i < decodeSize; i++) {
+                    decodeLatents.set(chunkLatents[chunkDecodedFrames + i], i * 32);
+                }
+
+                const latentTensor = new ort.Tensor('float32', decodeLatents, [1, decodeSize, 32]);
+                const decodeInputs = { latent: latentTensor, ...mimiState };
+
+                const decStart = performance.now();
+                const decodeResult = await mimiDecoderSession.run(decodeInputs);
+                totalDecodeTime += performance.now() - decStart;
+                const audioChunk = decodeResult[mimiDecoderSession.outputNames[0]].data;
+
+                // Update MIMI state
+                for (let i = 1; i < mimiDecoderSession.outputNames.length; i++) {
+                    const outputName = mimiDecoderSession.outputNames[i];
+                    const stateIdx = i - 1;
+                    mimiState[`state_${stateIdx}`] = decodeResult[outputName];
+                }
+
+                chunkDecodedFrames += decodeSize;
+                totalDecodedFrames += decodeSize;
+
+                const audioFloat32 = new Float32Array(audioChunk);
+                const isLastChunk = isEos && chunkIdx === chunks.length - 1;
+                postMessage({
+                    type: 'audio_chunk',
+                    data: audioFloat32,
+                    metrics: {
+                        bbTime: 0,
+                        decTime: 0,
+                        chunkDuration: audioFloat32.length / SAMPLE_RATE,
+                        isFirst: isFirstAudioChunk,
+                        isLast: isLastChunk
+                    }
+                }, [audioFloat32.buffer]);
+
+                isFirstAudioChunk = false;
+            }
+
+            if (isEos) {
+                console.log(`Chunk ${chunkIdx + 1} EOS at step ${step}, ${chunkLatents.length} frames`);
+                break;
+            }
+        }
+    }
+
+    const totalTime = (performance.now() - arStartTime) / 1000;
+    const audioSeconds = allGeneratedLatents.length * SAMPLES_PER_FRAME / SAMPLE_RATE;
+
+    // RTFx based on actual generation time (flow LM + decoder), not including conditioning
+    const genTime = (totalFlowLmTime + totalDecodeTime) / 1000;
+    const rtfx = audioSeconds / genTime;
+
+    console.log(`Generation complete: ${allGeneratedLatents.length} frames (${audioSeconds.toFixed(2)}s audio)`);
+    console.log(`  Total time: ${totalTime.toFixed(2)}s`);
+    console.log(`  Gen time: ${genTime.toFixed(2)}s, RTFx: ${rtfx.toFixed(2)}x`);
+    console.log(`  Flow LM: ${(totalFlowLmTime/1000).toFixed(2)}s (${(totalFlowLmTime/allGeneratedLatents.length).toFixed(1)}ms/step)`);
+    console.log(`  Decoder: ${(totalDecodeTime/1000).toFixed(2)}s`);
+
+    postMessage({
+        type: 'status',
+        status: `Finished (RTFx: ${rtfx.toFixed(2)}x)`,
+        state: 'idle',
+        metrics: { rtfx, genTime, totalTime, audioDuration: audioSeconds }
+    });
+}
+
+// Pre-allocated buffers for step counter updates (avoid GC pressure in hot loop)
+const stepBuffers = {};
+
+function updateStateSteps(state, increment) {
+    // Update step counters in state dict - reuse buffers to avoid allocation
+    const incBigInt = BigInt(increment);
+    for (const key in state) {
+        if (key.includes('step') && state[key]) {
+            const tensor = state[key];
+            if (tensor.data instanceof BigInt64Array) {
+                // Reuse buffer if same size, otherwise create new one
+                if (!stepBuffers[key] || stepBuffers[key].length !== tensor.data.length) {
+                    stepBuffers[key] = new BigInt64Array(tensor.data.length);
+                }
+                const buf = stepBuffers[key];
+                for (let i = 0; i < tensor.data.length; i++) {
+                    buf[i] = tensor.data[i] + incBigInt;
+                }
+                state[key] = new ort.Tensor('int64', buf, tensor.dims);
+            }
+        }
+    }
+}

onnx-streaming.js

@@ -0,0 +1,638 @@
+
+import { PCMPlayerWorklet as PCMPlayer } from './PCMPlayerWorklet.js';
+
+// Configuration
+const SAMPLE_RATE = 24000;
+const FADE_SAMPLES = 480; // 20ms fade at 24kHz
+
+export class PocketTTSStreaming {
+    constructor() {
+        this.worker = null;
+        this.player = null;
+        this.audioContext = null;
+        this.isGenerating = false;
+        this.isWorkerReady = false;
+        this.pendingGeneration = false;
+
+        // Voice state
+        this.availableVoices = [];
+        this.currentVoice = null;
+        this.customVoiceAudio = null;
+
+        // Metrics State
+        this.generationStartTime = 0;
+        this.lastChunkFinishTime = 0;
+        this.rtfMovingAverage = 0;
+
+        // Edge optimization state (dynamic LSD)
+        this.edgeOptimizationApplied = false;
+
+        this.elements = {
+            textInput: document.getElementById('text-input'),
+            generateBtn: document.getElementById('generate-btn'),
+            stopBtn: document.getElementById('stop-btn'),
+            statusText: document.getElementById('stat-status'),
+            statusIndicator: document.getElementById('status-indicator'),
+            modelStatusIcon: document.querySelector('#model-status .model-status__dot'),
+            modelStatusText: document.querySelector('#model-status .model-status__text'),
+            btnLoader: document.getElementById('btn-loader'),
+            statTTFB: document.getElementById('stat-ttfb'),
+            statRTFx: document.getElementById('stat-rtfx'),
+            ttfbBar: document.getElementById('ttfb-bar'),
+            rtfxContext: document.getElementById('rtfx-context'),
+            edgeOptNote: document.getElementById('edge-opt-note'),
+            voiceSelect: document.getElementById('voice-select'),
+            voiceUpload: document.getElementById('voice-upload'),
+            voiceUploadBtn: document.getElementById('voice-upload-btn'),
+            voiceUploadStatus: document.getElementById('voice-upload-status')
+        };
+
+        this.attachEventListeners();
+        this.init();
+        this.setupVisualization();
+    }
+
+    async init() {
+        console.log('Pocket TTS v1.0 - Web Demo');
+        console.log('Secure context:', window.isSecureContext);
+        console.log('Location:', window.location.href);
+        this.updateStatus('Initializing...', 'running');
+
+        // Initial button state
+        this.elements.generateBtn.disabled = true;
+        if (this.elements.voiceUploadBtn) this.elements.voiceUploadBtn.disabled = true;
+        const btnText = this.elements.generateBtn.querySelector('.btn__text');
+        if (btnText) btnText.textContent = 'Loading Models...';
+        this.elements.btnLoader.style.display = 'block';
+
+        // Check secure context
+        if (!window.isSecureContext) {
+            const msg = 'AudioWorklet requires HTTPS or localhost. Current: ' + window.location.hostname;
+            console.error(msg);
+            this.updateStatus(msg, 'error');
+            this.elements.btnLoader.style.display = 'none';
+            if (btnText) btnText.textContent = 'Secure Context Required';
+            return;
+        }
+
+        try {
+            // Initialize Audio Context and Player
+            this.audioContext = new (window.AudioContext || window.webkitAudioContext)({
+                sampleRate: SAMPLE_RATE,
+                latencyHint: 'interactive'
+            });
+
+            // Check if AudioWorklet is supported
+            if (!this.audioContext.audioWorklet) {
+                throw new Error('AudioWorklet not supported in this browser.');
+            }
+
+            await this.audioContext.audioWorklet.addModule('PCMPlayerWorklet.js');
+            this.player = new PCMPlayer(this.audioContext);
+        } catch (err) {
+            console.error('Audio initialization failed:', err);
+            this.updateStatus('Audio init failed: ' + err.message, 'error');
+            this.elements.btnLoader.style.display = 'none';
+            if (btnText) btnText.textContent = 'Audio Error';
+            return;
+        }
+
+        // Initialize Worker (as ES module)
+        console.log('Spawning Inference Worker...');
+        this.worker = new Worker('./inference-worker.js?v=9', { type: 'module' });
+
+        this.worker.onmessage = (e) => {
+            const { type, data, error, status, state, metrics, text, voices, defaultVoice, voiceName } = e.data;
+
+            switch (type) {
+                case 'status':
+                    this.updateStatus(status, state);
+                    break;
+                case 'model_status':
+                    this.updateModelStatus(status, text);
+                    break;
+                case 'voices_loaded':
+                    this.handleVoicesLoaded(voices, defaultVoice);
+                    break;
+                case 'voice_encoded':
+                    this.handleVoiceEncoded(voiceName);
+                    break;
+                case 'voice_set':
+                    this.currentVoice = voiceName;
+                    break;
+                case 'loaded':
+                    console.log('Worker confirmed models loaded.');
+                    this.isWorkerReady = true;
+                    this.elements.generateBtn.disabled = false;
+                    if (this.elements.voiceUploadBtn) this.elements.voiceUploadBtn.disabled = false;
+                    this.elements.btnLoader.style.display = 'none';
+                    const loadedBtnText = this.elements.generateBtn.querySelector('.btn__text');
+                    if (loadedBtnText) loadedBtnText.textContent = 'Generate Audio';
+
+                    if (this.pendingGeneration) {
+                        this.pendingGeneration = false;
+                        this.startGeneration();
+                    }
+                    break;
+                case 'generation_started':
+                    // The main thread already sets this in startGeneration for better precision
+                    break;
+                case 'audio_chunk':
+                    this.handleAudioChunk(data, metrics);
+                    break;
+                case 'stream_ended':
+                    this.handleStreamEnd();
+                    break;
+                case 'error':
+                    console.error('Worker Error:', error);
+                    this.updateStatus(`Error: ${error}`, 'error');
+                    this.resetUI();
+                    break;
+            }
+        };
+
+        // Trigger Model Load in Worker
+        this.worker.postMessage({ type: 'load' });
+    }
+
+    handleVoicesLoaded(voices, defaultVoice) {
+        this.availableVoices = voices;
+        this.currentVoice = defaultVoice;
+
+        // Populate voice selector
+        if (this.elements.voiceSelect) {
+            this.elements.voiceSelect.innerHTML = '';
+
+            // Add predefined voices
+            for (const voice of voices) {
+                const option = document.createElement('option');
+                option.value = voice;
+                option.textContent = voice.charAt(0).toUpperCase() + voice.slice(1);
+                if (voice === defaultVoice) {
+                    option.selected = true;
+                }
+                this.elements.voiceSelect.appendChild(option);
+            }
+
+            // Add custom voice option
+            const customOption = document.createElement('option');
+            customOption.value = 'custom';
+            customOption.textContent = 'Custom (Upload)';
+            this.elements.voiceSelect.appendChild(customOption);
+        }
+
+        console.log('Available voices:', voices, 'Default:', defaultVoice);
+    }
+
+    handleVoiceEncoded(voiceName) {
+        this.currentVoice = voiceName;
+        if (this.elements.voiceUploadStatus) {
+            this.elements.voiceUploadStatus.textContent = 'Voice encoded successfully!';
+            this.elements.voiceUploadStatus.className = 'voice-upload-status success';
+        }
+        // Set the select to custom
+        if (this.elements.voiceSelect) {
+            this.elements.voiceSelect.value = 'custom';
+        }
+    }
+
+    async handleVoiceUpload(file) {
+        if (!file) return;
+
+        if (this.elements.voiceUploadStatus) {
+            this.elements.voiceUploadStatus.textContent = 'Processing audio...';
+            this.elements.voiceUploadStatus.className = 'voice-upload-status';
+        }
+
+        try {
+            // Decode audio file
+            const arrayBuffer = await file.arrayBuffer();
+            const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+
+            // Resample to 24kHz if needed
+            let audioData;
+            if (audioBuffer.sampleRate !== SAMPLE_RATE) {
+                audioData = this.resampleAudio(audioBuffer, SAMPLE_RATE);
+            } else {
+                audioData = audioBuffer.getChannelData(0);
+            }
+
+            // Convert to mono if stereo
+            if (audioBuffer.numberOfChannels > 1 && audioBuffer.sampleRate === SAMPLE_RATE) {
+                const left = audioBuffer.getChannelData(0);
+                const right = audioBuffer.getChannelData(1);
+                audioData = new Float32Array(left.length);
+                for (let i = 0; i < left.length; i++) {
+                    audioData[i] = (left[i] + right[i]) / 2;
+                }
+            }
+
+            // Limit to 10 seconds max
+            const maxSamples = SAMPLE_RATE * 10;
+            if (audioData.length > maxSamples) {
+                audioData = audioData.slice(0, maxSamples);
+            }
+
+            // Send to worker for encoding
+            this.worker.postMessage({
+                type: 'encode_voice',
+                data: { audio: audioData }
+            });
+
+        } catch (err) {
+            console.error('Voice upload error:', err);
+            if (this.elements.voiceUploadStatus) {
+                this.elements.voiceUploadStatus.textContent = `Error: ${err.message}`;
+                this.elements.voiceUploadStatus.className = 'voice-upload-status error';
+            }
+        }
+    }
+
+    resampleAudio(audioBuffer, targetRate) {
+        const sourceRate = audioBuffer.sampleRate;
+        const sourceData = audioBuffer.getChannelData(0);
+
+        // If stereo, mix to mono
+        let monoData = sourceData;
+        if (audioBuffer.numberOfChannels > 1) {
+            const right = audioBuffer.getChannelData(1);
+            monoData = new Float32Array(sourceData.length);
+            for (let i = 0; i < sourceData.length; i++) {
+                monoData[i] = (sourceData[i] + right[i]) / 2;
+            }
+        }
+
+        // Linear interpolation resampling
+        const ratio = sourceRate / targetRate;
+        const outputLength = Math.floor(monoData.length / ratio);
+        const output = new Float32Array(outputLength);
+
+        for (let i = 0; i < outputLength; i++) {
+            const srcIndex = i * ratio;
+            const srcIndexFloor = Math.floor(srcIndex);
+            const srcIndexCeil = Math.min(srcIndexFloor + 1, monoData.length - 1);
+            const t = srcIndex - srcIndexFloor;
+            output[i] = monoData[srcIndexFloor] * (1 - t) + monoData[srcIndexCeil] * t;
+        }
+
+        return output;
+    }
+
+    attachEventListeners() {
+        this.elements.generateBtn.addEventListener('click', () => this.startGeneration());
+        this.elements.stopBtn.addEventListener('click', () => this.stopGeneration());
+
+        // Voice selector
+        if (this.elements.voiceSelect) {
+            this.elements.voiceSelect.addEventListener('change', (e) => {
+                const voice = e.target.value;
+                if (voice === 'custom') {
+                    // Trigger file upload
+                    if (this.elements.voiceUpload) {
+                        this.elements.voiceUpload.click();
+                    }
+                } else {
+                    this.worker.postMessage({
+                        type: 'set_voice',
+                        data: { voiceName: voice }
+                    });
+                }
+            });
+        }
+
+        // Voice file upload
+        if (this.elements.voiceUpload) {
+            this.elements.voiceUpload.addEventListener('change', (e) => {
+                const file = e.target.files[0];
+                if (file) {
+                    this.handleVoiceUpload(file);
+                }
+            });
+        }
+
+        // Voice upload button
+        if (this.elements.voiceUploadBtn) {
+            this.elements.voiceUploadBtn.addEventListener('click', () => {
+                if (this.elements.voiceUpload) {
+                    this.elements.voiceUpload.click();
+                }
+            });
+        }
+
+        // Sample buttons
+        document.querySelectorAll('.sample-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                this.elements.textInput.value = btn.getAttribute('data-text');
+                // Trigger input event to update character count
+                this.elements.textInput.dispatchEvent(new Event('input'));
+            });
+        });
+
+        // Character count
+        this.elements.textInput.addEventListener('input', () => {
+            const count = this.elements.textInput.value.length;
+            const countEl = document.getElementById('char-count');
+            if (countEl) countEl.textContent = count;
+        });
+
+        this.elements.textInput.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                this.startGeneration();
+            }
+        });
+    }
+
+    async startGeneration() {
+        this.generationStartTime = performance.now();
+        try {
+            if (!this.isWorkerReady) {
+                this.pendingGeneration = true;
+                const btnText = this.elements.generateBtn.querySelector('.btn__text');
+                if (btnText) btnText.textContent = 'Starting soon...';
+                return;
+            }
+
+            if (this.isGenerating) return;
+
+            if (this.audioContext && this.audioContext.state === 'suspended') {
+                await this.audioContext.resume();
+            }
+
+            const text = this.elements.textInput.value.trim();
+            if (!text) return;
+
+            this.isGenerating = true;
+            this.elements.generateBtn.disabled = true;
+            this.elements.generateBtn.classList.add('btn--generating');
+            this.elements.stopBtn.disabled = false;
+
+            if (this.player) this.player.reset();
+
+            // Reset metrics
+            this.elements.statTTFB.textContent = '--';
+            this.elements.statRTFx.textContent = '--';
+            if (this.elements.ttfbBar) this.elements.ttfbBar.style.width = '0%';
+            if (this.elements.edgeOptNote) this.elements.edgeOptNote.style.display = 'none';
+
+            this.rtfMovingAverage = 0;
+            this.edgeOptimizationApplied = false;
+
+            // Get current voice from selector
+            const voice = this.elements.voiceSelect ? this.elements.voiceSelect.value : this.currentVoice;
+
+            this.worker.postMessage({
+                type: 'generate',
+                data: { text, voice }
+            });
+        } catch (err) {
+            console.error('Error in startGeneration:', err);
+            this.updateStatus(`Error: ${err.message}`, 'error');
+            this.isGenerating = false;
+            this.resetUI();
+        }
+    }
+
+    stopGeneration() {
+        if (!this.isGenerating) return;
+        this.worker.postMessage({ type: 'stop' });
+        // Handle stop immediately in UI
+        this.handleStreamEnd();
+    }
+
+    applyFadeIn(audioData) {
+        const fadeLen = Math.min(FADE_SAMPLES, audioData.length);
+        for (let i = 0; i < fadeLen; i++) {
+            audioData[i] *= i / fadeLen;
+        }
+    }
+
+    applyFadeOut(audioData) {
+        const fadeLen = Math.min(FADE_SAMPLES, audioData.length);
+        const startIdx = audioData.length - fadeLen;
+        for (let i = 0; i < fadeLen; i++) {
+            audioData[startIdx + i] *= 1 - (i / fadeLen);
+        }
+    }
+
+    handleAudioChunk(audioData, metrics) {
+        if (!this.isGenerating) return;
+
+        // Apply fades to prevent pops
+        if (metrics.isFirst) {
+            this.applyFadeIn(audioData);
+        }
+        if (metrics.isLast) {
+            this.applyFadeOut(audioData);
+        }
+
+        // Play audio
+        this.player.playAudio(audioData);
+
+        // Calculate RTFx immediately (not in RAF) so edge optimization triggers fast
+        const now = performance.now();
+        let ttfb = 0;
+
+        if (metrics.isFirst) {
+            ttfb = now - this.generationStartTime;
+            this.lastChunkFinishTime = now;
+        } else if (this.lastChunkFinishTime > 0) {
+            const timeSinceLastChunk = (now - this.lastChunkFinishTime) / 1000;
+            this.lastChunkFinishTime = now;
+
+            if (timeSinceLastChunk > 0) {
+                const chunkDurationSec = metrics.chunkDuration;
+                const instantaneousRTF = chunkDurationSec / timeSinceLastChunk;
+
+                if (this.rtfMovingAverage === 0) {
+                    this.rtfMovingAverage = instantaneousRTF;
+                } else {
+                    this.rtfMovingAverage = this.rtfMovingAverage * 0.8 + instantaneousRTF * 0.2;
+                }
+
+                // Edge optimization: if RTFx drops below 1.0, switch to LSD=1 immediately
+                if (!this.edgeOptimizationApplied && this.rtfMovingAverage < 1.0) {
+                    this.edgeOptimizationApplied = true;
+                    this.worker.postMessage({ type: 'set_lsd', data: { lsd: 1 } });
+                    console.log('Edge optimization applied: LSD reduced to 1');
+                }
+            }
+        }
+
+        // Update UI in RAF (non-blocking)
+        const rtfxToDisplay = this.rtfMovingAverage;
+        const showEdgeOpt = this.edgeOptimizationApplied;
+        requestAnimationFrame(() => {
+            if (metrics.isFirst) {
+                this.updateTTFB(ttfb);
+            }
+            if (rtfxToDisplay > 0) {
+                this.updateRTFx(rtfxToDisplay);
+            }
+            if (showEdgeOpt && this.elements.edgeOptNote) {
+                this.elements.edgeOptNote.style.display = 'block';
+            }
+        });
+    }
+
+    handleStreamEnd() {
+        if (this.player.notifyStreamEnded) this.player.notifyStreamEnded();
+        this.resetUI();
+        this.isGenerating = false;
+    }
+
+    resetUI() {
+        this.elements.generateBtn.disabled = false;
+        this.elements.generateBtn.classList.remove('btn--generating');
+        const btnText = this.elements.generateBtn.querySelector('.btn__text');
+        if (btnText) btnText.textContent = 'Generate Audio';
+        this.elements.stopBtn.disabled = true;
+    }
+
+    updateStatus(text, state) {
+        this.elements.statusText.textContent = text;
+        this.elements.statusIndicator.className = `status-indicator status-${state}`;
+    }
+
+    updateModelStatus(state, text) {
+        this.elements.modelStatusText.textContent = text;
+        this.elements.modelStatusIcon.className = `status-icon status-${state}`;
+    }
+
+    updateTTFB(ms) {
+        this.elements.statTTFB.textContent = Math.round(ms);
+        const percentage = Math.min((ms / 2000) * 100, 100);
+        this.elements.ttfbBar.style.width = `${percentage}%`;
+        this.elements.ttfbBar.style.background = ms < 500 ? '#00d4aa' : ms < 1000 ? '#ffd93d' : '#ff6b6b';
+    }
+
+    updateRTFx(val) {
+        this.elements.statRTFx.textContent = `${val.toFixed(2)}x`;
+        this.elements.rtfxContext.style.color = val >= 1.0 ? '#00d4aa' : '#ff6b6b';
+    }
+
+    // -------------------------------------------------------------------------
+    // Visualization
+    // -------------------------------------------------------------------------
+    setupVisualization() {
+        this.waveformCanvas = document.getElementById('visualizer-waveform');
+        this.barsCanvas = document.getElementById('visualizer-bars');
+        if (!this.waveformCanvas || !this.barsCanvas) return;
+
+        this.waveformCtx = this.waveformCanvas.getContext('2d');
+        this.barsCtx = this.barsCanvas.getContext('2d');
+
+        // Initial resize
+        this.resizeCanvases();
+        window.addEventListener('resize', () => this.resizeCanvases());
+
+        // Start animation loop
+        requestAnimationFrame(() => this.draw());
+    }
+
+    resizeCanvases() {
+        if (!this.waveformCanvas || !this.barsCanvas) return;
+
+        const parent = this.waveformCanvas.parentElement;
+        const width = parent.clientWidth;
+        const height = parent.clientHeight;
+
+        const dpr = window.devicePixelRatio || 1;
+
+        [this.waveformCanvas, this.barsCanvas].forEach(canvas => {
+            canvas.width = width * dpr;
+            canvas.height = height * dpr;
+            canvas.style.width = `${width}px`;
+            canvas.style.height = `${height}px`;
+            const ctx = canvas.getContext('2d');
+            ctx.scale(dpr, dpr);
+        });
+    }
+
+    draw() {
+        requestAnimationFrame(() => this.draw());
+
+        if (!this.player || !this.player.analyser) return;
+
+        const bufferLength = this.player.analyser.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+
+        // Draw Bars (Frequency)
+        this.player.analyser.getByteFrequencyData(dataArray);
+        this.drawBars(dataArray);
+
+        // Draw Waveform (Time Domain)
+        this.player.analyser.getByteTimeDomainData(dataArray);
+        this.drawWaveform(dataArray);
+    }
+
+    drawWaveform(dataArray) {
+        const ctx = this.waveformCtx;
+        const canvas = this.waveformCanvas;
+        const width = canvas.width / (window.devicePixelRatio || 1);
+        const height = canvas.height / (window.devicePixelRatio || 1);
+
+        ctx.clearRect(0, 0, width, height);
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = '#00d4aa'; // Mint primary
+        ctx.beginPath();
+
+        const sliceWidth = width / dataArray.length;
+        let x = 0;
+
+        for (let i = 0; i < dataArray.length; i++) {
+            const v = dataArray[i] / 128.0;
+            const y = (v * height) / 2;
+
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+
+            x += sliceWidth;
+        }
+
+        ctx.lineTo(width, height / 2);
+        ctx.stroke();
+    }
+
+    drawBars(dataArray) {
+        const ctx = this.barsCtx;
+        const canvas = this.barsCanvas;
+        const width = canvas.width / (window.devicePixelRatio || 1);
+        const height = canvas.height / (window.devicePixelRatio || 1);
+
+        ctx.clearRect(0, 0, width, height);
+
+        const barCount = 120; // Number of bars to display
+        const barWidth = (width / barCount);
+        const samplesPerBar = Math.floor(dataArray.length / barCount);
+
+        for (let i = 0; i < barCount; i++) {
+            let sum = 0;
+            for (let j = 0; j < samplesPerBar; j++) {
+                sum += dataArray[i * samplesPerBar + j];
+            }
+            const average = sum / samplesPerBar;
+            const barHeight = (average / 255) * height * 0.8;
+
+            // Gradient for bar - Mint spectrum
+            const gradient = ctx.createLinearGradient(0, height, 0, height - barHeight);
+            gradient.addColorStop(0, '#3eb48944');
+            gradient.addColorStop(1, '#7fffd4cc');
+
+            ctx.fillStyle = gradient;
+
+            // Rounded bars
+            const x = i * barWidth;
+            const y = height - barHeight;
+            const radius = barWidth / 2;
+
+            ctx.beginPath();
+            ctx.roundRect(x + 1, y, barWidth - 2, barHeight, [2, 2, 0, 0]);
+            ctx.fill();
+        }
+    }
+}
+
+// Start the app
+document.addEventListener('DOMContentLoaded', () => {
+    window.app = new PocketTTSStreaming();
+});

onnx/ONNX-LICENSE

@@ -0,0 +1,408 @@
+Attribution-NonCommercial 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+    wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More considerations
+     for the public:
+    wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution-NonCommercial 4.0 International Public
+License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution-NonCommercial 4.0 International Public License ("Public
+License"). To the extent this Public License may be interpreted as a
+contract, You are granted the Licensed Rights in consideration of Your
+acceptance of these terms and conditions, and the Licensor grants You
+such rights in consideration of benefits the Licensor receives from
+making the Licensed Material available under these terms and
+conditions.
+
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+  d. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  e. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  f. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  g. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  h. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  i. NonCommercial means not primarily intended for or directed towards
+     commercial advantage or monetary compensation. For purposes of
+     this Public License, the exchange of the Licensed Material for
+     other material subject to Copyright and Similar Rights by digital
+     file-sharing or similar means is NonCommercial provided there is
+     no payment of monetary compensation in connection with the
+     exchange.
+
+  j. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  k. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  l. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part, for NonCommercial purposes only; and
+
+            b. produce, reproduce, and Share Adapted Material for
+               NonCommercial purposes only.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties, including when
+          the Licensed Material is used other than for NonCommercial
+          purposes.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+       4. If You Share Adapted Material You produce, the Adapter's
+          License You apply must not prevent recipients of the Adapted
+          Material from complying with this Public License.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database for NonCommercial purposes
+     only;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material; and
+
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+=======================================================================
+
+Creative Commons is not a party to its public
+licenses. Notwithstanding, Creative Commons may elect to apply one of
+its public licenses to material it publishes and in those instances
+will be considered the “Licensor.” The text of the Creative Commons
+public licenses is dedicated to the public domain under the CC0 Public
+Domain Dedication. Except for the limited purpose of indicating that
+material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the
+public licenses.
+
+Creative Commons may be contacted at creativecommons.org.
+

onnx/flow_lm_flow_int8.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8d627d235c44a597da908e1085ebe241cbbe358964c502c5a5063d18851a5529
+size 9962530

onnx/flow_lm_main_int8.onnx

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

onnx/mimi_decoder_int8.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:501e16f51cf3fb91bd2928ee2a10c96d3461544eff329aafca10489e990b450c
+size 22684077

onnx/mimi_encoder.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:360f050cd0b1e1c9e92e25584391a2214cb7574ba16c67ac5f471f9dce8588e4
+size 73165554

onnx/text_conditioner.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:80ea69f46d8153a9bd42373723cedae4c88ccbde0e052c2a96e9e8f19445adf1
+size 16388363

sentencepiece-browser.js

@@ -0,0 +1,60 @@
+// Browser shims for Node.js modules used by sentencepiece.js
+// These shims allow the sentencepiece module to load in the browser.
+// The actual fs operations are not used when loading from base64.
+
+// Shim for 'fs' module
+export function readFileSync(path) {
+    throw new Error(`fs.readFileSync not available in browser. Tried to read: ${path}`);
+}
+
+export function existsSync(path) {
+    return false;
+}
+
+export const promises = {
+    readFile: (path) => Promise.reject(new Error(`fs.promises.readFile not available in browser`))
+};
+
+// Default export for `import * as fs from 'fs'`
+export default {
+    readFileSync,
+    existsSync,
+    promises
+};
+
+// Buffer shim - re-export what sentencepiece needs
+// `import { Buffer as Buffer$1 } from 'buffer'`
+export const Buffer = globalThis.Buffer || {
+    from: (data, encoding) => {
+        if (encoding === 'base64') {
+            const binary = atob(data);
+            const bytes = new Uint8Array(binary.length);
+            for (let i = 0; i < binary.length; i++) {
+                bytes[i] = binary.charCodeAt(i);
+            }
+            return bytes;
+        }
+        if (typeof data === 'string') {
+            return new TextEncoder().encode(data);
+        }
+        return new Uint8Array(data);
+    },
+    isBuffer: (obj) => obj instanceof Uint8Array,
+    alloc: (size) => new Uint8Array(size),
+    allocUnsafe: (size) => new Uint8Array(size),
+    concat: (buffers, totalLength) => {
+        if (totalLength === undefined) {
+            totalLength = buffers.reduce((sum, buf) => sum + buf.length, 0);
+        }
+        const result = new Uint8Array(totalLength);
+        let offset = 0;
+        for (const buf of buffers) {
+            result.set(buf, offset);
+            offset += buf.length;
+        }
+        return result;
+    }
+};
+
+// Named export for Buffer$1
+export { Buffer as Buffer$1 };

server.py

@@ -0,0 +1,36 @@
+#!/usr/bin/env python3
+"""
+Simple HTTP server with Cross-Origin Isolation headers for SharedArrayBuffer.
+This enables multi-threading in ONNX Runtime Web for much better performance.
+"""
+
+import http.server
+import socketserver
+import sys
+
+PORT = int(sys.argv[1]) if len(sys.argv) > 1 else 8080
+
+
+class CORSRequestHandler(http.server.SimpleHTTPRequestHandler):
+    def end_headers(self):
+        # Required for SharedArrayBuffer (enables multi-threading in WASM)
+        self.send_header('Cross-Origin-Opener-Policy', 'same-origin')
+        self.send_header('Cross-Origin-Embedder-Policy', 'require-corp')
+        # Allow loading from CDN
+        self.send_header('Access-Control-Allow-Origin', '*')
+        super().end_headers()
+
+    def do_OPTIONS(self):
+        self.send_response(200)
+        self.end_headers()
+
+
+if __name__ == '__main__':
+    with socketserver.TCPServer(("", PORT), CORSRequestHandler) as httpd:
+        print(f"Serving at http://localhost:{PORT}")
+        print("Cross-Origin Isolation headers enabled for multi-threading")
+        print("Press Ctrl+C to stop")
+        try:
+            httpd.serve_forever()
+        except KeyboardInterrupt:
+            print("\nShutting down...")

style.css

@@ -1,28 +1,958 @@
+/* ============================================
+   POCKET TTS - DIGITAL MINT & NEO-EMERALD THEME
+   Tech-Kawaii • Clean Code Aesthetic
+   ============================================ */
+
+/* Design Tokens */
+:root {
+    /* Colors - Digital Mint Monochromatic */
+    --color-void: #0a1612;
+    --color-deep: #0d1f1a;
+    --color-surface: rgba(20, 45, 38, 0.85);
+    --color-surface-elevated: rgba(30, 65, 55, 0.9);
+    --color-glass-border: rgba(144, 238, 200, 0.12);
+
+    /* Mint Gradient Spectrum */
+    --gradient-primary: linear-gradient(135deg, #3eb489 0%, #00d4aa 50%, #7fffd4 100%);
+    --gradient-primary-vivid: linear-gradient(135deg, #5eedb8 0%, #00ffcc 100%);
+    --gradient-glow: linear-gradient(135deg, rgba(62, 180, 137, 0.4) 0%, rgba(0, 212, 170, 0.4) 100%);
+    --gradient-soft: linear-gradient(135deg, rgba(127, 255, 212, 0.08) 0%, rgba(62, 180, 137, 0.08) 100%);
+
+    /* Accent Colors - Mint Spectrum */
+    --color-primary: #3eb489;
+    --color-mint: #00d4aa;
+    --color-aquamarine: #7fffd4;
+    --color-seafoam: #98ffc8;
+    --color-glint: #e8fff4;
+    --color-forest: #1a5d4a;
+    --color-teal-dark: #0f3d32;
+
+    /* Semantic Colors */
+    --color-success: #00d4aa;
+    --color-warning: #ffd93d;
+    --color-error: #ff6b6b;
+
+    /* Text */
+    --color-text-primary: #e8fff4;
+    --color-text-secondary: #98c9b8;
+    --color-text-muted: #5a8a7a;
+
+    /* Typography - Soft Geometric */
+    --font-display: 'Quicksand', 'Nunito', sans-serif;
+    --font-body: 'Nunito', 'Quicksand', sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+    /* Spacing */
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+
+    /* Radii - Extra Rounded for Kawaii Feel */
+    --radius-sm: 10px;
+    --radius-md: 14px;
+    --radius-lg: 20px;
+    --radius-xl: 28px;
+    --radius-full: 9999px;
+
+    /* Shadows - Mint Glow */
+    --shadow-sm: 0 2px 8px rgba(0, 20, 15, 0.4);
+    --shadow-md: 0 4px 20px rgba(0, 20, 15, 0.5);
+    --shadow-lg: 0 8px 40px rgba(0, 20, 15, 0.6);
+    --shadow-glow: 0 0 40px rgba(62, 180, 137, 0.3);
+    --shadow-glow-strong: 0 0 60px rgba(0, 212, 170, 0.4);
+
+    /* Transitions */
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --duration-fast: 150ms;
+    --duration-base: 250ms;
+    --duration-slow: 400ms;
+}
+
+/* Reset */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: var(--font-body);
+    background: var(--color-void);
+    color: var(--color-text-primary);
+    min-height: 100vh;
+    overflow-x: hidden;
+    line-height: 1.6;
+}
+
+/* Screen reader only */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* ============================================
+   AMBIENT BACKGROUND - Mint Glow
+   ============================================ */
+.ambient-layer {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+    background: radial-gradient(ellipse at 50% 0%, rgba(62, 180, 137, 0.08) 0%, transparent 50%);
+}
+
+.orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(100px);
+    opacity: 0.5;
+    animation: orb-float 25s ease-in-out infinite;
+}
+
+.orb--primary {
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(62, 180, 137, 0.35) 0%, transparent 70%);
+    top: -20%;
+    right: -15%;
+    animation-delay: 0s;
+}
+
+.orb--secondary {
+    width: 450px;
+    height: 450px;
+    background: radial-gradient(circle, rgba(0, 212, 170, 0.25) 0%, transparent 70%);
+    bottom: -15%;
+    left: -15%;
+    animation-delay: -8s;
+}
+
+.orb--tertiary {
+    width: 350px;
+    height: 350px;
+    background: radial-gradient(circle, rgba(127, 255, 212, 0.15) 0%, transparent 70%);
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    animation-delay: -16s;
+}
+
+@keyframes orb-float {
+    0%, 100% {
+        transform: translate(0, 0) scale(1);
+    }
+    25% {
+        transform: translate(40px, -50px) scale(1.08);
+    }
+    50% {
+        transform: translate(-30px, 30px) scale(0.95);
+    }
+    75% {
+        transform: translate(50px, 40px) scale(1.03);
+    }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.grid-overlay {
+    position: absolute;
+    inset: 0;
+    background-image:
+        linear-gradient(rgba(62, 180, 137, 0.04) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(62, 180, 137, 0.04) 1px, transparent 1px);
+    background-size: 50px 50px;
+    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
+    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* ============================================
+   APP SHELL
+   ============================================ */
+.app-shell {
+    position: relative;
+    z-index: 1;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: var(--space-8) var(--space-6);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    animation: shell-enter 0.8s var(--ease-out) both;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes shell-enter {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* ============================================
+   HERO HEADER
+   ============================================ */
+.hero {
+    text-align: center;
+    margin-bottom: var(--space-10);
+}
+
+.hero__brand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-4);
+    margin-bottom: var(--space-4);
+    flex-wrap: wrap;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.logo__icon {
+    width: 44px;
+    height: 44px;
+    filter: drop-shadow(0 0 16px rgba(62, 180, 137, 0.6));
+}
+
+.logo__text {
+    font-family: var(--font-display);
+    font-size: 2.6rem;
+    font-weight: 700;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: -0.02em;
+    text-shadow: 0 0 40px rgba(62, 180, 137, 0.3);
+}
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--space-1) var(--space-3);
+    background: var(--color-surface);
+    border: 1px solid var(--color-glass-border);
+    border-radius: var(--radius-full);
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--color-mint);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.hero__tagline {
+    font-size: 1.1rem;
+    color: var(--color-text-secondary);
+    max-width: 520px;
+    margin: 0 auto;
+    font-weight: 500;
+}
+
+/* ============================================
+   VOICE SECTION
+   ============================================ */
+.voice-section {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    margin-bottom: var(--space-4);
+    flex-wrap: wrap;
+}
+
+.voice-selector {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.voice-selector__label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+}
+
+.voice-selector__dropdown {
+    padding: var(--space-2) var(--space-4);
+    padding-right: var(--space-8);
+    background: var(--color-surface);
+    border: 1px solid var(--color-glass-border);
+    border-radius: var(--radius-md);
+    color: var(--color-text-primary);
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2398c9b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--space-2) center;
+    background-size: 18px;
+    transition: all var(--duration-fast) var(--ease-out);
+}
+
+.voice-selector__dropdown:hover {
+    border-color: rgba(62, 180, 137, 0.4);
+    background-color: var(--color-surface-elevated);
+}
+
+.voice-selector__dropdown:focus {
+    outline: none;
+    border-color: var(--color-mint);
+    box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.2);
+}
+
+.voice-selector__dropdown option {
+    background: var(--color-deep);
+    color: var(--color-text-primary);
+}
+
+.voice-upload {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.voice-upload-status {
+    font-size: 0.8rem;
+    color: var(--color-text-muted);
+    font-weight: 500;
+}
+
+.voice-upload-status.success {
+    color: var(--color-success);
+}
+
+.voice-upload-status.error {
+    color: var(--color-error);
+}
+
+/* ============================================
+   INPUT SECTION
+   ============================================ */
+.input-section {
+    margin-bottom: var(--space-8);
+}
+
+.textarea-wrap {
+    position: relative;
+    margin-bottom: var(--space-4);
+}
+
+textarea {
+    width: 100%;
+    min-height: 130px;
+    padding: var(--space-4);
+    padding-bottom: var(--space-8);
+    background: var(--color-surface);
+    border: 2px solid var(--color-glass-border);
+    border-radius: var(--radius-lg);
+    color: var(--color-text-primary);
+    font-family: var(--font-body);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.7;
+    resize: vertical;
+    transition: all var(--duration-base) var(--ease-out);
+}
+
+textarea::placeholder {
+    color: var(--color-text-muted);
+}
+
+textarea:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 4px rgba(62, 180, 137, 0.15), var(--shadow-glow);
+}
+
+.textarea-meta {
+    position: absolute;
+    bottom: var(--space-3);
+    right: var(--space-4);
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+}
+
+.char-count {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+}
+
+/* Sample Texts */
+.sample-texts {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
+}
+
+.sample-texts__label {
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+    font-weight: 600;
+}
+
+.sample-btn {
+    padding: var(--space-1) var(--space-3);
+    background: var(--color-surface);
+    border: 1px solid var(--color-glass-border);
+    border-radius: var(--radius-full);
+    color: var(--color-text-secondary);
+    font-family: var(--font-body);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-out);
+}
+
+.sample-btn:hover {
+    background: var(--color-surface-elevated);
+    color: var(--color-aquamarine);
+    border-color: rgba(62, 180, 137, 0.3);
+    transform: translateY(-1px);
+}
+
+.sample-btn:active {
+    transform: scale(0.97) translateY(0);
+}
+
+/* Controls */
+.controls {
+    display: flex;
+    gap: var(--space-3);
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-4) var(--space-6);
+    border-radius: var(--radius-md);
+    font-family: var(--font-body);
+    font-size: 1rem;
+    font-weight: 700;
+    cursor: pointer;
+    border: none;
+    transition: all var(--duration-base) var(--ease-out);
+}
+
+.btn__icon {
+    width: 18px;
+    height: 18px;
+}
+
+.btn--primary {
+    flex: 1;
+    position: relative;
+    background: var(--gradient-primary);
+    color: var(--color-void);
+    overflow: hidden;
+}
+
+.btn--primary::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
+    opacity: 0;
+    transition: opacity var(--duration-fast);
+}
+
+.btn--primary:hover:not(:disabled)::before {
+    opacity: 1;
+}
+
+.btn--primary:hover:not(:disabled) {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-glow-strong);
+}
+
+.btn--primary:active:not(:disabled) {
+    transform: translateY(-1px);
+}
+
+.btn--primary.btn--generating {
+    animation: pulse-glow 2s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+    0%, 100% {
+        box-shadow: 0 0 0 0 rgba(62, 180, 137, 0.5);
+    }
+    50% {
+        box-shadow: 0 0 0 20px rgba(62, 180, 137, 0);
+    }
+}
+
+.btn--secondary {
+    background: var(--color-surface);
+    color: var(--color-text-primary);
+    border: 2px solid var(--color-glass-border);
+}
+
+.btn--secondary:hover:not(:disabled) {
+    background: var(--color-surface-elevated);
+    border-color: rgba(62, 180, 137, 0.3);
+}
+
+.btn--outline {
+    background: transparent;
+    border: 2px solid var(--color-glass-border);
+    color: var(--color-text-secondary);
+}
+
+.btn--outline:hover:not(:disabled) {
+    background: var(--color-surface);
+    border-color: rgba(62, 180, 137, 0.4);
+    color: var(--color-aquamarine);
+}
+
+.btn--small {
+    padding: var(--space-2) var(--space-4);
+    font-size: 0.85rem;
+}
+
+.btn--small .btn__icon {
+    width: 16px;
+    height: 16px;
+}
+
+.btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.btn__loader {
+    width: 18px;
+    height: 18px;
+    border: 2px solid rgba(10, 22, 18, 0.3);
+    border-top-color: var(--color-void);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    display: none;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ============================================
+   OUTPUT SECTION
+   ============================================ */
+.output-section {
+    display: grid;
+    grid-template-columns: 1fr 280px;
+    gap: var(--space-6);
+    margin-bottom: var(--space-8);
+}
+
+/* Visualizer Panel */
+.visualizer-panel {
+    background: var(--color-surface);
+    border: 2px solid var(--color-glass-border);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+}
+
+.visualizer-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-4) var(--space-5);
+    border-bottom: 1px solid var(--color-glass-border);
+}
+
+.visualizer-panel__title {
+    font-family: var(--font-display);
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-text-muted);
+}
+
+.status-indicator--idle .status-dot,
+.status-idle .status-dot {
+    background: var(--color-text-muted);
+}
+
+.status-indicator--running .status-dot,
+.status-running .status-dot {
+    background: var(--color-mint);
+    box-shadow: 0 0 12px rgba(0, 212, 170, 0.6);
+    animation: dot-pulse 1.5s ease-in-out infinite;
+}
+
+.status-indicator--error .status-dot,
+.status-error .status-dot {
+    background: var(--color-error);
+}
+
+@keyframes dot-pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(0.85); }
+}
+
+.status-text {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+}
+
+.visualizer-container {
+    position: relative;
+    height: 160px;
+    background: linear-gradient(180deg, transparent 0%, rgba(62, 180, 137, 0.05) 100%);
+}
+
+.visualizer-container canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.visualizer-bars {
+    opacity: 0.8;
+    mix-blend-mode: screen;
+}
+
+/* Metrics Panel */
+.metrics-panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+}
+
+.metrics-panel__title {
+    font-family: var(--font-display);
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.metric {
+    padding: var(--space-4);
+    background: var(--color-surface);
+    border: 2px solid var(--color-glass-border);
+    border-radius: var(--radius-md);
+}
+
+.metric--highlight {
+    background: var(--gradient-soft);
+    border-color: rgba(62, 180, 137, 0.25);
+}
+
+.metric__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-2);
+}
+
+.metric__label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+}
+
+.metric__info {
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    background: none;
+    border: none;
+    color: var(--color-text-muted);
+    cursor: help;
+    position: relative;
+}
+
+.metric__info svg {
+    width: 100%;
+    height: 100%;
+}
+
+.metric__info:hover {
+    color: var(--color-mint);
+}
+
+.metric__info::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    right: 0;
+    width: 200px;
+    padding: var(--space-2) var(--space-3);
+    background: var(--color-surface-elevated);
+    border: 1px solid var(--color-glass-border);
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    text-align: left;
+    line-height: 1.4;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(4px);
+    transition: all var(--duration-fast) var(--ease-out);
+    z-index: 10;
+    pointer-events: none;
+}
+
+.metric__info:hover::after {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.metric__value {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-1);
+}
+
+.metric__number {
+    font-family: var(--font-mono);
+    font-size: 1.75rem;
+    font-weight: 700;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.metric__number--large {
+    font-size: 2.25rem;
+}
+
+.metric__unit {
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--color-text-muted);
+}
+
+.metric__bar {
+    height: 5px;
+    background: rgba(62, 180, 137, 0.15);
+    border-radius: var(--radius-full);
+    margin-top: var(--space-3);
+    overflow: hidden;
+}
+
+.metric__bar-fill {
+    height: 100%;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-full);
+    transition: width var(--duration-slow) var(--ease-out);
+    width: 0%;
+}
+
+.metric__context {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-text-muted);
+    margin-top: var(--space-2);
+}
+
+.metric__note {
+    font-size: 0.7rem;
+    color: var(--color-warning);
+    margin-top: var(--space-1);
+    font-style: italic;
+    font-weight: 600;
+}
+
+.metric--status {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.model-status {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.model-status__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-text-muted);
+}
+
+.status-loading .model-status__dot {
+    background: var(--color-warning);
+    animation: dot-pulse 1s ease-in-out infinite;
+}
+
+.status-ready .model-status__dot {
+    background: var(--color-success);
+    box-shadow: 0 0 10px rgba(0, 212, 170, 0.5);
+}
+
+.model-status__text {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+.footer {
+    margin-top: auto;
+    padding-top: var(--space-8);
+    text-align: center;
+}
+
+.footer p {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--color-text-muted);
+}
+
+.footer a {
+    color: var(--color-mint);
+    text-decoration: none;
+    font-weight: 600;
+    transition: color var(--duration-fast);
+}
+
+.footer a:hover {
+    color: var(--color-aquamarine);
+    text-decoration: underline;
+}
+
+.footer__disclaimer {
+    font-size: 0.7rem;
+    margin-top: var(--space-2);
+    opacity: 0.7;
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 768px) {
+    .app-shell {
+        padding: var(--space-6) var(--space-4);
+    }
+
+    .logo__text {
+        font-size: 2rem;
+    }
+
+    .voice-section {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .voice-selector {
+        width: 100%;
+    }
+
+    .voice-selector__dropdown {
+        flex: 1;
+    }
+
+    .output-section {
+        grid-template-columns: 1fr;
+    }
+
+    .metrics-panel {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .metric:last-child {
+        grid-column: span 2;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero__brand {
+        flex-direction: column;
+        gap: var(--space-3);
+    }
+
+    .controls {
+        flex-direction: column;
+    }
+
+    .btn--primary {
+        width: 100%;
+    }
+
+    .sample-texts {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .sample-btn {
+        width: 100%;
+        text-align: center;
+    }
+
+    .metrics-panel {
+        grid-template-columns: 1fr;
+    }
+
+    .metric:last-child {
+        grid-column: span 1;
+    }
+
+    .metric__number {
+        font-size: 1.5rem;
+    }
+
+    .metric__number--large {
+        font-size: 1.75rem;
+    }
 }

tokenizer.model

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

voices.bin

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