Initial commit

build/snippets/wasm-bindgen-rayon-38edf6e439f6d70d/src/workerHelpers.no-bundler.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2022 Google Inc. All Rights Reserved.
+ * 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.
+ */
+
+// This file is kept similar to workerHelpers.js, but intended to be used in
+// a bundlerless ES module environment (which has a few differences).
+
+function waitForMsgType(target, type) {
+  return new Promise(resolve => {
+    target.addEventListener('message', function onMsg({ data }) {
+      if (data == null || data.type !== type) return;
+      target.removeEventListener('message', onMsg);
+      resolve(data);
+    });
+  });
+}
+
+// We need to wait for a specific message because this file is used both
+// as a Worker and as a regular script, so it might receive unrelated
+// messages on the page.
+waitForMsgType(self, 'wasm_bindgen_worker_init').then(async data => {
+  const pkg = await import(data.mainJS);
+  await pkg.default(data.module, data.memory);
+  postMessage({ type: 'wasm_bindgen_worker_ready' });
+  pkg.wbg_rayon_start_worker(data.receiver);
+});
+
+// Note: this is never used, but necessary to prevent a bug in Firefox
+// (https://bugzilla.mozilla.org/show_bug.cgi?id=1702191) where it collects
+// Web Workers that have a shared WebAssembly memory with the main thread,
+// but are not explicitly rooted via a `Worker` instance.
+//
+// By storing them in a variable, we can keep `Worker` objects around and
+// prevent them from getting GC-d.
+let _workers;
+
+export async function startWorkers(module, memory, builder) {
+  if (builder.numThreads() === 0) {
+    throw new Error(`num_threads must be > 0.`);
+  }
+
+  const workerInit = {
+    type: 'wasm_bindgen_worker_init',
+    module,
+    memory,
+    receiver: builder.receiver(),
+    mainJS: builder.mainJS()
+  };
+
+  _workers = await Promise.all(
+    Array.from({ length: builder.numThreads() }, async () => {
+      // Self-spawn into a new Worker.
+      // The script is fetched as a blob so it works even if this script is
+      // hosted remotely (e.g. on a CDN). This avoids a cross-origin
+      // security error.
+      let scriptBlob = await fetch(import.meta.url).then(r => r.blob());
+      let url = URL.createObjectURL(scriptBlob);
+      const worker = new Worker(url, {
+        type: 'module'
+      });
+      worker.postMessage(workerInit);
+      await waitForMsgType(worker, 'wasm_bindgen_worker_ready');
+      URL.revokeObjectURL(url);
+      return worker;
+    })
+  );
+  builder.build();
+}

build/wasm_speech_streaming.d.ts

@@ -0,0 +1,66 @@
+/* tslint:disable */
+/* eslint-disable */
+export function wbg_rayon_start_worker(receiver: number): void;
+export function initThreadPool(num_threads: number): Promise<any>;
+export class MoshiASRDecoder {
+  free(): void;
+  stop_streaming(): void;
+  start_streaming(): void;
+  process_audio_chunk(audio_data: Float32Array, callback: Function): void;
+  constructor(weights: Uint8Array, tokenizer: Uint8Array, mimi: Uint8Array, config: Uint8Array);
+}
+export class wbg_rayon_PoolBuilder {
+  private constructor();
+  free(): void;
+  numThreads(): number;
+  build(): void;
+  mainJS(): string;
+  receiver(): number;
+}
+
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+export interface InitOutput {
+  readonly __wbg_moshiasrdecoder_free: (a: number, b: number) => void;
+  readonly moshiasrdecoder_new: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => number;
+  readonly moshiasrdecoder_process_audio_chunk: (a: number, b: number, c: number, d: any) => void;
+  readonly moshiasrdecoder_start_streaming: (a: number) => void;
+  readonly moshiasrdecoder_stop_streaming: (a: number) => void;
+  readonly __wbg_wbg_rayon_poolbuilder_free: (a: number, b: number) => void;
+  readonly wbg_rayon_poolbuilder_build: (a: number) => void;
+  readonly wbg_rayon_poolbuilder_mainJS: (a: number) => any;
+  readonly wbg_rayon_poolbuilder_numThreads: (a: number) => number;
+  readonly wbg_rayon_poolbuilder_receiver: (a: number) => number;
+  readonly wbg_rayon_start_worker: (a: number) => void;
+  readonly initThreadPool: (a: number) => any;
+  readonly __wbindgen_exn_store: (a: number) => void;
+  readonly __externref_table_alloc: () => number;
+  readonly __wbindgen_export_2: WebAssembly.Table;
+  readonly memory: WebAssembly.Memory;
+  readonly __wbindgen_malloc: (a: number, b: number) => number;
+  readonly __wbindgen_thread_destroy: (a?: number, b?: number, c?: number) => void;
+  readonly __wbindgen_start: (a: number) => void;
+}
+
+export type SyncInitInput = BufferSource | WebAssembly.Module;
+/**
+* Instantiates the given `module`, which can either be bytes or
+* a precompiled `WebAssembly.Module`.
+*
+* @param {{ module: SyncInitInput, memory?: WebAssembly.Memory, thread_stack_size?: number }} module - Passing `SyncInitInput` directly is deprecated.
+* @param {WebAssembly.Memory} memory - Deprecated.
+*
+* @returns {InitOutput}
+*/
+export function initSync(module: { module: SyncInitInput, memory?: WebAssembly.Memory, thread_stack_size?: number } | SyncInitInput, memory?: WebAssembly.Memory): InitOutput;
+
+/**
+* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+* for everything else, calls `WebAssembly.instantiate` directly.
+*
+* @param {{ module_or_path: InitInput | Promise<InitInput>, memory?: WebAssembly.Memory, thread_stack_size?: number }} module_or_path - Passing `InitInput` directly is deprecated.
+* @param {WebAssembly.Memory} memory - Deprecated.
+*
+* @returns {Promise<InitOutput>}
+*/
+export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput>, memory?: WebAssembly.Memory, thread_stack_size?: number } | InitInput | Promise<InitInput>, memory?: WebAssembly.Memory): Promise<InitOutput>;

build/wasm_speech_streaming.js

@@ -0,0 +1,398 @@
+import { startWorkers } from './snippets/wasm-bindgen-rayon-38edf6e439f6d70d/src/workerHelpers.no-bundler.js';
+
+let wasm;
+
+function addToExternrefTable0(obj) {
+    const idx = wasm.__externref_table_alloc();
+    wasm.__wbindgen_export_2.set(idx, obj);
+    return idx;
+}
+
+function handleError(f, args) {
+    try {
+        return f.apply(this, args);
+    } catch (e) {
+        const idx = addToExternrefTable0(e);
+        wasm.__wbindgen_exn_store(idx);
+    }
+}
+
+const cachedTextDecoder = (typeof TextDecoder !== 'undefined' ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true }) : { decode: () => { throw Error('TextDecoder not available') } } );
+
+if (typeof TextDecoder !== 'undefined') { cachedTextDecoder.decode(); };
+
+let cachedUint8ArrayMemory0 = null;
+
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.buffer !== wasm.memory.buffer) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function getStringFromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().slice(ptr, ptr + len));
+}
+
+function isLikeNone(x) {
+    return x === undefined || x === null;
+}
+
+let cachedFloat32ArrayMemory0 = null;
+
+function getFloat32ArrayMemory0() {
+    if (cachedFloat32ArrayMemory0 === null || cachedFloat32ArrayMemory0.buffer !== wasm.memory.buffer) {
+        cachedFloat32ArrayMemory0 = new Float32Array(wasm.memory.buffer);
+    }
+    return cachedFloat32ArrayMemory0;
+}
+
+let WASM_VECTOR_LEN = 0;
+
+function passArrayF32ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 4, 4) >>> 0;
+    getFloat32ArrayMemory0().set(arg, ptr / 4);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+function passArray8ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 1, 1) >>> 0;
+    getUint8ArrayMemory0().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+/**
+ * @param {number} receiver
+ */
+export function wbg_rayon_start_worker(receiver) {
+    wasm.wbg_rayon_start_worker(receiver);
+}
+
+/**
+ * @param {number} num_threads
+ * @returns {Promise<any>}
+ */
+export function initThreadPool(num_threads) {
+    const ret = wasm.initThreadPool(num_threads);
+    return ret;
+}
+
+const MoshiASRDecoderFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_moshiasrdecoder_free(ptr >>> 0, 1));
+
+export class MoshiASRDecoder {
+
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        MoshiASRDecoderFinalization.unregister(this);
+        return ptr;
+    }
+
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_moshiasrdecoder_free(ptr, 0);
+    }
+    stop_streaming() {
+        wasm.moshiasrdecoder_stop_streaming(this.__wbg_ptr);
+    }
+    start_streaming() {
+        wasm.moshiasrdecoder_start_streaming(this.__wbg_ptr);
+    }
+    /**
+     * @param {Float32Array} audio_data
+     * @param {Function} callback
+     */
+    process_audio_chunk(audio_data, callback) {
+        const ptr0 = passArrayF32ToWasm0(audio_data, wasm.__wbindgen_malloc);
+        const len0 = WASM_VECTOR_LEN;
+        wasm.moshiasrdecoder_process_audio_chunk(this.__wbg_ptr, ptr0, len0, callback);
+    }
+    /**
+     * @param {Uint8Array} weights
+     * @param {Uint8Array} tokenizer
+     * @param {Uint8Array} mimi
+     * @param {Uint8Array} config
+     */
+    constructor(weights, tokenizer, mimi, config) {
+        const ptr0 = passArray8ToWasm0(weights, wasm.__wbindgen_malloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ptr1 = passArray8ToWasm0(tokenizer, wasm.__wbindgen_malloc);
+        const len1 = WASM_VECTOR_LEN;
+        const ptr2 = passArray8ToWasm0(mimi, wasm.__wbindgen_malloc);
+        const len2 = WASM_VECTOR_LEN;
+        const ptr3 = passArray8ToWasm0(config, wasm.__wbindgen_malloc);
+        const len3 = WASM_VECTOR_LEN;
+        const ret = wasm.moshiasrdecoder_new(ptr0, len0, ptr1, len1, ptr2, len2, ptr3, len3);
+        this.__wbg_ptr = ret >>> 0;
+        MoshiASRDecoderFinalization.register(this, this.__wbg_ptr, this);
+        return this;
+    }
+}
+
+const wbg_rayon_PoolBuilderFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_wbg_rayon_poolbuilder_free(ptr >>> 0, 1));
+
+export class wbg_rayon_PoolBuilder {
+
+    static __wrap(ptr) {
+        ptr = ptr >>> 0;
+        const obj = Object.create(wbg_rayon_PoolBuilder.prototype);
+        obj.__wbg_ptr = ptr;
+        wbg_rayon_PoolBuilderFinalization.register(obj, obj.__wbg_ptr, obj);
+        return obj;
+    }
+
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        wbg_rayon_PoolBuilderFinalization.unregister(this);
+        return ptr;
+    }
+
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_wbg_rayon_poolbuilder_free(ptr, 0);
+    }
+    /**
+     * @returns {number}
+     */
+    numThreads() {
+        const ret = wasm.wbg_rayon_poolbuilder_numThreads(this.__wbg_ptr);
+        return ret >>> 0;
+    }
+    build() {
+        wasm.wbg_rayon_poolbuilder_build(this.__wbg_ptr);
+    }
+    /**
+     * @returns {string}
+     */
+    mainJS() {
+        const ret = wasm.wbg_rayon_poolbuilder_mainJS(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * @returns {number}
+     */
+    receiver() {
+        const ret = wasm.wbg_rayon_poolbuilder_receiver(this.__wbg_ptr);
+        return ret >>> 0;
+    }
+}
+
+async function __wbg_load(module, imports) {
+    if (typeof Response === 'function' && module instanceof Response) {
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            try {
+                return await WebAssembly.instantiateStreaming(module, imports);
+
+            } catch (e) {
+                if (module.headers.get('Content-Type') != 'application/wasm') {
+                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+
+                } else {
+                    throw e;
+                }
+            }
+        }
+
+        const bytes = await module.arrayBuffer();
+        return await WebAssembly.instantiate(bytes, imports);
+
+    } else {
+        const instance = await WebAssembly.instantiate(module, imports);
+
+        if (instance instanceof WebAssembly.Instance) {
+            return { instance, module };
+
+        } else {
+            return instance;
+        }
+    }
+}
+
+function __wbg_get_imports() {
+    const imports = {};
+    imports.wbg = {};
+    imports.wbg.__wbg_buffer_609cc3eee51ed158 = function(arg0) {
+        const ret = arg0.buffer;
+        return ret;
+    };
+    imports.wbg.__wbg_call_672a4d21634d4a24 = function() { return handleError(function (arg0, arg1) {
+        const ret = arg0.call(arg1);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_call_7cccdd69e0791ae2 = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = arg0.call(arg1, arg2);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_getRandomValues_80578b2ff2a093ba = function() { return handleError(function (arg0) {
+        globalThis.crypto.getRandomValues(arg0);
+    }, arguments) };
+    imports.wbg.__wbg_instanceof_Window_def73ea0955fc569 = function(arg0) {
+        let result;
+        try {
+            result = arg0 instanceof Window;
+        } catch (_) {
+            result = false;
+        }
+        const ret = result;
+        return ret;
+    };
+    imports.wbg.__wbg_length_a446193dc22c12f8 = function(arg0) {
+        const ret = arg0.length;
+        return ret;
+    };
+    imports.wbg.__wbg_log_8b4e426889933567 = function(arg0, arg1) {
+        console.log(getStringFromWasm0(arg0, arg1));
+    };
+    imports.wbg.__wbg_new_a12002a7f91c75be = function(arg0) {
+        const ret = new Uint8Array(arg0);
+        return ret;
+    };
+    imports.wbg.__wbg_newnoargs_105ed471475aaf50 = function(arg0, arg1) {
+        const ret = new Function(getStringFromWasm0(arg0, arg1));
+        return ret;
+    };
+    imports.wbg.__wbg_newwithlength_a381634e90c276d4 = function(arg0) {
+        const ret = new Uint8Array(arg0 >>> 0);
+        return ret;
+    };
+    imports.wbg.__wbg_set_65595bdd868b3009 = function(arg0, arg1, arg2) {
+        arg0.set(arg1, arg2 >>> 0);
+    };
+    imports.wbg.__wbg_startWorkers_2329d931beb7bef4 = function(arg0, arg1, arg2) {
+        const ret = startWorkers(arg0, arg1, wbg_rayon_PoolBuilder.__wrap(arg2));
+        return ret;
+    };
+    imports.wbg.__wbg_static_accessor_GLOBAL_88a902d13a557d07 = function() {
+        const ret = typeof global === 'undefined' ? null : global;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_static_accessor_GLOBAL_THIS_56578be7e9f832b0 = function() {
+        const ret = typeof globalThis === 'undefined' ? null : globalThis;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_static_accessor_SELF_37c5d418e4bf5819 = function() {
+        const ret = typeof self === 'undefined' ? null : self;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_static_accessor_URL_151cb8815849ce83 = function() {
+        const ret = import.meta.url;
+        return ret;
+    };
+    imports.wbg.__wbg_static_accessor_WINDOW_5de37043a91a9c40 = function() {
+        const ret = typeof window === 'undefined' ? null : window;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_subarray_aa9065fa9dc5df96 = function(arg0, arg1, arg2) {
+        const ret = arg0.subarray(arg1 >>> 0, arg2 >>> 0);
+        return ret;
+    };
+    imports.wbg.__wbindgen_init_externref_table = function() {
+        const table = wasm.__wbindgen_export_2;
+        const offset = table.grow(4);
+        table.set(0, undefined);
+        table.set(offset + 0, undefined);
+        table.set(offset + 1, null);
+        table.set(offset + 2, true);
+        table.set(offset + 3, false);
+        ;
+    };
+    imports.wbg.__wbindgen_is_undefined = function(arg0) {
+        const ret = arg0 === undefined;
+        return ret;
+    };
+    imports.wbg.__wbindgen_memory = function() {
+        const ret = wasm.memory;
+        return ret;
+    };
+    imports.wbg.__wbindgen_module = function() {
+        const ret = __wbg_init.__wbindgen_wasm_module;
+        return ret;
+    };
+    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
+        const ret = getStringFromWasm0(arg0, arg1);
+        return ret;
+    };
+    imports.wbg.__wbindgen_throw = function(arg0, arg1) {
+        throw new Error(getStringFromWasm0(arg0, arg1));
+    };
+
+    return imports;
+}
+
+function __wbg_init_memory(imports, memory) {
+    imports.wbg.memory = memory || new WebAssembly.Memory({initial:29,maximum:65536,shared:true});
+}
+
+function __wbg_finalize_init(instance, module, thread_stack_size) {
+    wasm = instance.exports;
+    __wbg_init.__wbindgen_wasm_module = module;
+    cachedFloat32ArrayMemory0 = null;
+    cachedUint8ArrayMemory0 = null;
+
+    if (typeof thread_stack_size !== 'undefined' && (typeof thread_stack_size !== 'number' || thread_stack_size === 0 || thread_stack_size % 65536 !== 0)) { throw 'invalid stack size' }
+    wasm.__wbindgen_start(thread_stack_size);
+    return wasm;
+}
+
+function initSync(module, memory) {
+    if (wasm !== undefined) return wasm;
+
+    let thread_stack_size
+    if (typeof module !== 'undefined') {
+        if (Object.getPrototypeOf(module) === Object.prototype) {
+            ({module, memory, thread_stack_size} = module)
+        } else {
+            console.warn('using deprecated parameters for `initSync()`; pass a single object instead')
+        }
+    }
+
+    const imports = __wbg_get_imports();
+
+    __wbg_init_memory(imports, memory);
+
+    if (!(module instanceof WebAssembly.Module)) {
+        module = new WebAssembly.Module(module);
+    }
+
+    const instance = new WebAssembly.Instance(module, imports);
+
+    return __wbg_finalize_init(instance, module, thread_stack_size);
+}
+
+async function __wbg_init(module_or_path, memory) {
+    if (wasm !== undefined) return wasm;
+
+    let thread_stack_size
+    if (typeof module_or_path !== 'undefined') {
+        if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+            ({module_or_path, memory, thread_stack_size} = module_or_path)
+        } else {
+            console.warn('using deprecated parameters for the initialization function; pass a single object instead')
+        }
+    }
+
+    if (typeof module_or_path === 'undefined') {
+        module_or_path = new URL('wasm_speech_streaming_bg.wasm', import.meta.url);
+    }
+    const imports = __wbg_get_imports();
+
+    if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {
+        module_or_path = fetch(module_or_path);
+    }
+
+    __wbg_init_memory(imports, memory);
+
+    const { instance, module } = await __wbg_load(await module_or_path, imports);
+
+    return __wbg_finalize_init(instance, module, thread_stack_size);
+}
+
+export { initSync };
+export default __wbg_init;

build/wasm_speech_streaming_bg.wasm

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

build/wasm_speech_streaming_bg.wasm.d.ts

@@ -0,0 +1,21 @@
+/* tslint:disable */
+/* eslint-disable */
+export const __wbg_moshiasrdecoder_free: (a: number, b: number) => void;
+export const moshiasrdecoder_new: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => number;
+export const moshiasrdecoder_process_audio_chunk: (a: number, b: number, c: number, d: any) => void;
+export const moshiasrdecoder_start_streaming: (a: number) => void;
+export const moshiasrdecoder_stop_streaming: (a: number) => void;
+export const __wbg_wbg_rayon_poolbuilder_free: (a: number, b: number) => void;
+export const wbg_rayon_poolbuilder_build: (a: number) => void;
+export const wbg_rayon_poolbuilder_mainJS: (a: number) => any;
+export const wbg_rayon_poolbuilder_numThreads: (a: number) => number;
+export const wbg_rayon_poolbuilder_receiver: (a: number) => number;
+export const wbg_rayon_start_worker: (a: number) => void;
+export const initThreadPool: (a: number) => any;
+export const __wbindgen_exn_store: (a: number) => void;
+export const __externref_table_alloc: () => number;
+export const __wbindgen_export_2: WebAssembly.Table;
+export const memory: WebAssembly.Memory;
+export const __wbindgen_malloc: (a: number, b: number) => number;
+export const __wbindgen_thread_destroy: (a?: number, b?: number, c?: number) => void;
+export const __wbindgen_start: (a: number) => void;

index.html

@@ -1,19 +1,299 @@
-<!doctype html>
+<!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>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WASM Streaming Speech Recognition</title>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&display=swap");
+      html, body { font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
+    </style>
+    <script src="css/tailwind-3.4.17.js"></script>
+    <script type="module">
+      const MODEL_ID = "moshi_1b_en_fr_q4k";
+      const WEIGHTS_URL = "https://huggingface.co/efficient-nlp/stt-1b-en_fr-quantized/resolve/main/model-q4k.gguf";
+      const MIMI_URL = "https://huggingface.co/efficient-nlp/stt-1b-en_fr-quantized/resolve/main/[email protected]";
+      const TOKENIZER_URL = "https://huggingface.co/efficient-nlp/stt-1b-en_fr-quantized/resolve/main/tokenizer_en_fr_audio_8000.json";
+      const CONFIG_URL = "https://huggingface.co/efficient-nlp/stt-1b-en_fr-quantized/resolve/main/config.json";
+
+      const moshiWorker = new Worker("./moshiWorker.js", { type: "module" });
+      let mediaRecorder = null;
+      let audioChunks = [];
+      let isRecording = false;
+      let audioStream = null;
+      let audioContext = null;
+      let processor = null;
+      let source = null;
+      let modelInitialized = false;
+      let pendingStart = false;
+      
+      // Performance tracking
+      let audioChunksProcessed = 0;
+      let sessionStartTime = 0;
+
+      function updateStatusDiv(message) {
+        document.querySelector("#status-div").textContent = message;
+      }
+
+      function updateDiagnostics() {
+        const diagnostics = document.querySelector("#diagnostics");
+        if (!diagnostics) return;
+        
+        const cpuCount = navigator.hardwareConcurrency || 'unknown';
+        
+        // Only update metrics when recording, otherwise show final values
+        if (isRecording && sessionStartTime) {
+          // Calculate real-time factor (audio processed / wall clock time)
+          // >1 = faster than real-time, <1 = slower than real-time  
+          const audioProcessed = audioChunksProcessed * (1024 / 24000);
+          const audioSessionDuration = (Date.now() - sessionStartTime) / 1000;
+          const realTimeFactor = audioSessionDuration > 0 ? (audioProcessed / audioSessionDuration) : 0;
+          
+          // Color code based on performance
+          let factorColor = '';
+          if (realTimeFactor >= 0.95) {
+            factorColor = 'text-green-600';
+          } else if (realTimeFactor >= 0.8) {
+            factorColor = 'text-yellow-600';
+          }
+          else {
+            factorColor = 'text-red-600';
+          }
+          
+          diagnostics.innerHTML = `CPUs: ${cpuCount}, Real-time factor: <span class="${factorColor}">${realTimeFactor.toFixed(2)}x</span>, Duration: ${audioSessionDuration.toFixed(1)}s`;
+        } else if (!sessionStartTime) {
+          diagnostics.innerHTML = `CPUs: ${cpuCount}, Real-time factor: <span class="text-gray-600">0.00x</span>, Duration: 0.0s`;
+        } 
+      }
+
+      window.addEventListener('load', updateDiagnostics);
+      setInterval(updateDiagnostics, 200);
+
+      function initializeModel() {
+        if (modelInitialized) return;
+        
+        const button = document.querySelector("#speech-button");
+        button.disabled = true;
+        button.className = "bg-gray-400 text-gray-700 font-normal py-2 px-4 rounded cursor-not-allowed";
+        
+        moshiWorker.postMessage({
+          command: "initialize",
+          weightsURL: WEIGHTS_URL,
+          modelID: MODEL_ID,
+          mimiURL: MIMI_URL,
+          tokenizerURL: TOKENIZER_URL,
+          configURL: CONFIG_URL,
+        });
+      }
+
+      // Handle messages from worker
+      moshiWorker.addEventListener("message", async (event) => {
+        const data = event.data;
+        if (data.status === "model_ready") {
+          modelInitialized = true;
+          updateStatusDiv("Model loaded - Ready to start");
+          
+          const button = document.querySelector("#speech-button");
+          button.disabled = false;
+          button.className = "bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 px-4 rounded";
+          
+          if (pendingStart) {
+            pendingStart = false;
+            await startRecording();
+          }
+        } else if (data.status === "streaming") {
+          // Add new word to transcription in real-time
+          const outputDiv = document.querySelector("#output-generation");
+          const placeholder = document.querySelector("#output-placeholder");
+          
+          if (placeholder) placeholder.hidden = true;
+          
+          if (outputDiv.textContent) {
+            outputDiv.textContent += " " + data.word;
+          } else {
+            outputDiv.textContent = data.word;
+          }
+          outputDiv.hidden = false;
+        } else if (data.status === "chunk_processed") {
+          audioChunksProcessed++;
+        } else if (data.status === "loading") {
+          updateStatusDiv(data.message);
+        } else if (data.error) {
+          updateStatusDiv("Error: " + data.error);
+          pendingStart = false;
+        }
+      });
+
+      function updateStatus(data) {
+        const { status, message, word } = data;
+        const outputDiv = document.querySelector("#output-generation");
+        
+        if (status === "loading" || status === "decoding") {
+          updateStatusDiv(message || (status === "loading" ? "Loading..." : "Decoding..."));
+        } else if (status === "streaming") {
+          // Add new word to the transcription in real-time
+          if (outputDiv.textContent) {
+            outputDiv.textContent += " " + word;
+          } else {
+            outputDiv.textContent = word;
+          }
+          outputDiv.hidden = false;
+        } else if (status === "complete") {
+          updateStatusDiv("Ready");
+        }
+      }
+
+      async function startMicrophone() {
+        try {
+          audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          updateStatusDiv("Microphone access granted");
+          
+          audioContext = new AudioContext({ sampleRate: 24000 });
+          source = audioContext.createMediaStreamSource(audioStream);
+          
+          processor = audioContext.createScriptProcessor(1024, 1, 1);
+          
+          processor.onaudioprocess = function(event) {
+            if (!isRecording || !modelInitialized) return;
+            
+            const inputBuffer = event.inputBuffer;
+            const inputData = inputBuffer.getChannelData(0);
+            
+            // Send audio chunk to worker
+            const audioChunk = new Float32Array(inputData);
+            moshiWorker.postMessage({
+              command: "process_audio",
+              audioData: audioChunk
+            }, [audioChunk.buffer]);
+          };
+          
+          source.connect(processor);
+          processor.connect(audioContext.destination);
+          
+        } catch (error) {
+          updateStatusDiv("Microphone access denied: " + error.message);
+          throw error;
+        }
+      }
+      
+      function stopMicrophone() {
+        // Disconnect audio nodes
+        if (processor) {
+          processor.disconnect();
+          processor = null;
+        }
+        if (source) {
+          source.disconnect();
+          source = null;
+        }
+        if (audioContext) {
+          audioContext.close();
+          audioContext = null;
+        }
+        
+        // Stop media stream
+        if (audioStream) {
+          audioStream.getTracks().forEach(track => track.stop());
+          audioStream = null;
+        }
+        
+        updateStatusDiv("Microphone stopped");
+      }
+
+      async function startRecording() {
+        const button = document.querySelector("#speech-button");
+        
+        try {
+          updateStatusDiv("Requesting microphone access...");
+          await startMicrophone();
+          
+          // Reset performance counters
+          audioChunksProcessed = 0;
+          sessionStartTime = Date.now();
+          
+          // Start streaming session
+          moshiWorker.postMessage({ command: "start_stream" });
+          
+          isRecording = true;
+          button.textContent = "Stop Speech";
+          button.className = "bg-red-600 hover:bg-red-700 text-white font-normal py-2 px-4 rounded";
+          updateStatusDiv("Listening...");
+          
+          // Clear previous transcription
+          document.querySelector("#output-generation").textContent = "";
+          document.querySelector("#output-generation").hidden = true;
+          document.querySelector("#output-placeholder").hidden = true;
+          
+        } catch (error) {
+          console.error('Error starting microphone:', error);
+          updateStatusDiv("Error: " + error.message);
+          pendingStart = false;
+        }
+      }
+
+      document.querySelector("#speech-button").addEventListener("click", async () => {
+        const button = document.querySelector("#speech-button");
+        
+        if (!isRecording) {
+          // Check if model is ready
+          if (!modelInitialized) {
+            pendingStart = true;
+            initializeModel();
+            return;
+          }
+          
+          await startRecording();
+        } else {
+          stopMicrophone();
+          
+          // End streaming session
+          moshiWorker.postMessage({ command: "stop_stream" });
+          
+          isRecording = false;
+          button.textContent = "Start Speech";
+          button.className = "bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 px-4 rounded";
+          updateStatusDiv("Ready to start");
+        }
+      });
+    </script>
+  </head>
+  <body class="container max-w-4xl mx-auto p-4">
+    <main class="grid grid-cols-1 gap-8 relative">
+      <div>
+        <h1 class="text-4xl font-bold">WASM Streaming Speech Recognition</h1>
+        <p class="text-gray-700">
+          Transcribe audio from your microphone in real time in the browser using Rust/WASM.
+          This demo runs entirely offline on your CPU after downloading a ~950 MB model.
+          It understands English and French, and uses the
+          <a href="https://huggingface.co/kyutai/stt-1b-en_fr" target="_blank" class="underline hover:text-blue-600">Kyutai STT model</a>
+          together with a WASM runtime built in 
+          <a href="https://github.com/huggingface/candle/" target="_blank" class="underline hover:text-blue-600">Candle</a>.
+        </p>
+      </div>
+
+      <div>
+        <button id="speech-button" class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 px-4 rounded">
+          Start Speech
+        </button>
+        <div class="mt-2 text-gray-600 text-sm space-y-1">
+          <div>Status: <span id="status-div">Click "Start Speech" to begin</span></div>
+          <div id="diagnostics">CPUs: -, Real-time factor: 0.00x, Duration: 0.0s</div>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="font-medium">Transcription:</h3>
+        <div class="min-h-[200px] bg-slate-100 text-gray-700 p-4 rounded-md">
+          <p id="output-generation" hidden></p>
+          <span id="output-placeholder" class="font-light text-gray-500">Click "Start Speech" to begin transcription</span>
+        </div>
+      </div>
+
+      <div class="mt-4 p-3 bg-gray-50 text-gray-700 rounded-md">
+        💡 This demo shows offline transcription in your browser.  
+        For more accurate cloud transcription and real-time LLM grammar correction, check out  
+        <a href="https://voicewriter.io" target="_blank" class="underline hover:text-blue-600">Voice Writer</a>.
+      </div>
+    </main>
+  </body>
+</html>

moshiWorker.js

@@ -0,0 +1,125 @@
+import init, {
+  MoshiASRDecoder,
+  initThreadPool,
+} from "./build/wasm_speech_streaming.js";
+
+async function fetchArrayBuffer(url) {
+  const cacheName = "whisper-candle-cache";
+  const cache = await caches.open(cacheName);
+  const cachedResponse = await cache.match(url);
+  if (cachedResponse) {
+    const data = await cachedResponse.arrayBuffer();
+    return new Uint8Array(data);
+  }
+  const res = await fetch(url, { cache: "force-cache" });
+  cache.put(url, res.clone());
+  return new Uint8Array(await res.arrayBuffer());
+}
+
+class MoshiASR {
+  static decoder = null;
+
+  // Initialize the model
+  static async initialize(params) {
+    const { weightsURL, tokenizerURL, mimiURL, configURL } = params;
+
+    if (this.decoder) {
+      self.postMessage({ status: "model_ready" });
+      return;
+    }
+
+    try {
+      await init();
+      const numThreads = navigator.hardwareConcurrency || 4;
+      await initThreadPool(numThreads);
+
+      self.postMessage({
+        status: "loading",
+        message: `Loading Model (~950 MB)`,
+      });
+
+      const [weightsArrayU8, tokenizerArrayU8, mimiArrayU8, configArrayU8] =
+        await Promise.all([
+          fetchArrayBuffer(weightsURL),
+          fetchArrayBuffer(tokenizerURL),
+          fetchArrayBuffer(mimiURL),
+          fetchArrayBuffer(configURL),
+        ]);
+
+      this.decoder = new MoshiASRDecoder(
+        weightsArrayU8,
+        tokenizerArrayU8,
+        mimiArrayU8,
+        configArrayU8
+      );
+
+      self.postMessage({ status: "model_ready" });
+    } catch (error) {
+      self.postMessage({ error: error.message });
+    }
+  }
+
+  static startStream() {
+    if (this.decoder) {
+      this.decoder.start_streaming();
+    }
+  }
+
+  static stopStream() {
+    if (this.decoder) {
+      this.decoder.stop_streaming();
+    }
+  }
+
+  static processAudio(audioData) {
+    if (this.decoder) {
+      this.decoder.process_audio_chunk(audioData, (word) => {
+        self.postMessage({
+          status: "streaming",
+          word: word,
+        });
+      });
+      self.postMessage({
+        status: "chunk_processed",
+      });
+    }
+  }
+}
+
+self.addEventListener("message", async (event) => {
+  const { command } = event.data;
+
+  try {
+    switch (command) {
+      case "initialize":
+        const { weightsURL, modelID, tokenizerURL, mimiURL, configURL } =
+          event.data;
+        await MoshiASR.initialize({
+          weightsURL,
+          modelID,
+          tokenizerURL,
+          mimiURL,
+          configURL,
+        });
+        break;
+
+      case "start_stream":
+        MoshiASR.startStream();
+        break;
+
+      case "stop_stream":
+        MoshiASR.stopStream();
+        break;
+
+      case "process_audio":
+        const { audioData } = event.data;
+        MoshiASR.processAudio(audioData);
+        break;
+
+      default:
+        self.postMessage({ error: "Unknown command: " + command });
+    }
+  } catch (e) {
+    self.postMessage({ error: e.message });
+  }
+});