### Browser Demo Setup with Rust WASM

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/README.md

This code demonstrates the setup for running the speech recognition model in a web browser using WebAssembly (WASM) and WebGPU. It includes steps for building the WASM package, generating a self-signed certificate for secure contexts (required by WebGPU), and starting a development server. The primary dependency is `wasm-pack` for building.

```bash
# Build WASM package
wasm-pack build --target web --no-default-features --features wasm

# Generate self-signed cert (WebGPU requires secure context)
openssl req -x509 -newkey ec -pkeyopt ec_paramgen_curve:prime256v1 \
  -keyout /tmp/voxtral-key.pem -out /tmp/voxtral-cert.pem \
  -days 7 -nodes -subj "/CN=localhost"

# Start dev server
bun serve.mjs
```

--------------------------------

### Adapter Structure Example

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

Illustrates the structure of the adapter component, which appears to be a sequential network with specific weight matrices for projection and transformation.

```text
# Adapter (Sequential with indices 0, 2 - GELU at index 1)
mm_streams_embeddings.embedding_module.audio_language_projection.0.weight  # [3072, 5120]
mm_streams_embeddings.embedding_module.audio_language_projection.2.weight  # [3072, 3072]
```

--------------------------------

### Start Microphone Input - JavaScript

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/space/index.html

Handles the click event for the microphone start button. It clears previous output, starts the microphone client, updates button visibility, activates visualization, sets the status to 'recording', and starts a timer. Includes error handling for microphone startup.

```javascript
micBtn.addEventListener('click', async () => {
  try {
    clearOutput();
    await client.startMicrophone();
    micBtn.style.display = 'none';
    stopMicBtn.style.display = '';
    cancelMicBtn.style.display = '';
    micViz.classList.add('active');
    statusDot.className = 'dot recording';
    recStartTime = Date.now();
    recTimerInterval = setInterval(tickTimer, 1000);
    tickTimer();
  } catch (e) {
    setStatus('error', 'mic: ' + e.message);
    console.error(e);
  }
});
```

--------------------------------

### Start Microphone Recording - JavaScript

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/web/index.html

Initiates microphone recording when the mic button is clicked. It starts the client's microphone, updates the UI to show recording controls, starts a timer interval, and begins the timer update. Includes error handling for microphone access.

```javascript
micBtn.addEventListener('click', async () => {
  try {
    await client.startMicrophone();
    micBtn.style.display = 'none';
    stopMicBtn.style.display = '';
    cancelMicBtn.style.display = '';
    micVisualizer.classList.add('active');
    statusDot.classList.add('recording');
    recStartTime = Date.now();
    recTimerInterval = setInterval(updateRecTimer, 1000);
    updateRecTimer();
  } catch (e) {
    updateStatus('error', 'Microphone error: ' + e.message);
    console.error(e);
  }
});
```

--------------------------------

### Development Server and Feature Flags Configuration

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

Command to start a development HTTPS server for browser testing using Bun. The TOML snippet defines default and optional feature flags for the project, including 'wgpu', 'native-tokenizer', 'wasm', 'cli', and 'hub'.

```bash
# Dev HTTPS server for browser testing
bun serve.mjs
```

```toml
default = ["wgpu", "native-tokenizer"]
wgpu              # Burn GPU backend (WebGPU/Vulkan/Metal) — required for gguf module
native-tokenizer  # tokenizers crate (C deps, disabled in WASM)
wasm              # WASM bindings: enables wgpu + wasm-bindgen + web-sys + dep:wgpu
cli               # clap + indicatif for voxtral-transcribe binary
hub               # hf-hub for model downloads
```

--------------------------------

### LLM Layer Structure Example

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

Illustrates the typical structure of layers within the Large Language Model (LLM) component of the project. It shows weight patterns for ADA RMSNorm, attention, and feed-forward networks.

```text
# LLM layer structure (26 layers)
layers.{N}.ada_rms_norm_t_cond.0.weight    # [32, 3072] - ADA RMSNorm in LLM!
layers.{N}.ada_rms_norm_t_cond.2.weight    # [3072, 32]
layers.{N}.attention_norm.weight           # [3072]
layers.{N}.attention.wq/wk/wv/wo.weight   # GQA attention
layers.{N}.ffn_norm.weight                 # [3072]
layers.{N}.feed_forward.w1/w2/w3.weight   # SwiGLU MLP
```

--------------------------------

### Conv Downsampler Structure Example

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

Shows the structure of convolutional layers used for downsampling audio features within the encoder. It includes kernel and channel dimensions.

```text
# Conv downsampler
mm_streams_embeddings.embedding_module.whisper_encoder.conv_layers.0.conv.*  # [1280, 128, 3]
mm_streams_embeddings.embedding_module.whisper_encoder.conv_layers.1.conv.*  # [1280, 1280, 3]
```

--------------------------------

### Audio Encoder Weight Names (Example)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/VOXTRAL_ARCHITECTURE.md

Provides example weight names for the convolutional layers of the audio encoder, following typical naming conventions. These are subject to verification against actual SafeTensors files.

```text
# Convolutional downsampler
encoder.conv1.weight                    [1280, 128, kernel]
encoder.conv1.bias                      [1280]
encoder.conv2.weight                    [1280, 1280, kernel]
encoder.conv2.bias                      [1280]
```

--------------------------------

### Test Transcription Output (Pure Rust)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

Example of a transcription output generated by the pure Rust audio pipeline. This demonstrates the system's ability to process audio files and produce text.

```text
Input:  test_data/mary_had_lamb.wav (15.95s historical phonograph recording)
Output: " I spoke in the original phonograph. A little piece of practical poetry.
         Mary had a little lamb, it's sweet with quite a flow..."
```

--------------------------------

### List Quantization Presets (Rust CLI)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/QUANTIZATION.md

Command to list all available quantization presets for the `quantize_model` binary. Requires 'cli' and 'cpu' features.

```bash
cargo run --bin quantize_model --features "cli cpu" -- list-presets
```

--------------------------------

### Run End-to-End Browser Tests

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/README.md

Executes end-to-end tests for the browser interface using Playwright. This requires Playwright to be installed (`bunx playwright install`) and model shards to be available.

```bash
bunx playwright test tests/e2e_browser.spec.ts
```

--------------------------------

### Build Project with WGPU Backend

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

Builds the Rust project using the WGPU backend for graphics processing. It requires disabling default features and explicitly enabling the 'wgpu' feature.

```bash
cargo build --features wgpu --no-default-features
```

--------------------------------

### Initialize Voxtral Client and UI Elements - JavaScript

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/space/index.html

Initializes the VoxtralClient and sets up event listeners for various UI elements. It checks for WebGPU support and updates the UI status accordingly. Dependencies include the VoxtralClient class and DOM elements with specific IDs.

```javascript
import { VoxtralClient } from './voxtral-client.js';

if (!navigator.gpu) {
  document.getElementById('webgpu-warning').style.display = 'block';
}

const client = new VoxtralClient();
const $ = id => document.getElementById(id);
const statusDot = $('status-dot');
const statusText = $('status-text');
const progressTrack = $('progress-track');
const progressFill = $('progress-fill');
const transcriptionEl = $('transcription');
const audioInfo = $('audio-info');
const loadBtn = $('load-btn');
const clearCacheBtn = $('clear-cache-btn');
const cacheInfo = $('cache-info');
const micBtn = $('mic-btn');
const stopMicBtn = $('stop-mic-btn');
const cancelMicBtn = $('cancel-mic-btn');
const transcribeBtn = $('transcribe-btn');
const micViz = $('mic-viz');
const recTimer = $('rec-timer');

let audioFile = null;
let recStartTime = null;
let recTimerInterval = null;

function setStatus(cls, text) {
  statusDot.className = 'dot ' + cls;
  statusText.textContent = text;
}

function syncButtons() {
  loadBtn.disabled = !(client.ready && !client.modelLoaded);
  micBtn.disabled = !client.isReady();
  transcribeBtn.disabled = !(client.isReady() && audioFile);
}

function clearOutput() {
  transcriptionEl.textContent = '';
  transcriptionEl.classList.remove('placeholder');
}
```

--------------------------------

### Generate Quantized Model and Shards (Rust CLI)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/QUANTIZATION.md

Commands to generate quantized models and split them into phased shards using the `quantize_model` binary. Requires 'cli' and 'cpu' features.

```bash
cargo run --release --bin quantize_model --features "cli cpu" -- \
  quantize --preset q8-full --output models/quantized/voxtral-q8-full

cargo run --release --bin quantize_model --features "cli cpu" -- \
  shard --input models/quantized/voxtral-q8-full --output-dir models/shards
```

--------------------------------

### Encoder Layer Structure Example

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

Details the structure of layers within the audio encoder component. It highlights the presence of biases in the Multi-Head Attention (MHA) and feed-forward layers.

```text
# Encoder layer structure (32 layers)
mm_streams_embeddings.embedding_module.whisper_encoder.transformer.layers.{N}.*
  .attention.wq/wk/wv.weight + .wq/wv.bias    # MHA with biases
  .attention.wo.weight + .wo.bias
  .feed_forward.w1/w2/w3.weight + .w2.bias
```

--------------------------------

### Native Rust Project Building

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/README.md

These commands show how to build the Rust project for native execution. The first command builds with default features (wgpu and native-tokenizer), while the second command enables all available features, including CLI and Hugging Face Hub integration. The `--release` flag is used for optimized builds.

```bash
# Native (default features: wgpu + native-tokenizer)
cargo build --release

# With all features
cargo build --release --features "wgpu,cli,hub"
```

--------------------------------

### Hybrid Client-Server: Extract Mel Spectrograms (JavaScript)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/QUANTIZATION.md

Example JavaScript code for a browser client that extracts Mel spectrograms from audio using `MelClient`. The extracted Mel data is intended to be sent to a server via WebSocket.

```javascript
// Browser code using MelClient
const client = new MelClient();
const mel = client.extractMel(audioSamples);
// Send mel to server via WebSocket
ws.send(mel.buffer);
```

--------------------------------

### Load Quantized Models in Rust

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/QUANTIZATION.md

Demonstrates how to load quantized models saved in Burn's NamedMpkGz format using Rust. It requires initializing the model structure first and then using a recorder to load the weights from a file. This process is essential for using pre-quantized models in the application.

```rust
use burn::record::{FullPrecisionSettings, NamedMpkGzFileRecorder};

// First initialize the model structure
let model: VoxtralModel<B> = /* initialize empty or from original */;

// Then load quantized weights
let recorder = NamedMpkGzFileRecorder::<FullPrecisionSettings>::default();
let model = model.load_file("path/to/model", &recorder, &device)?;
```

--------------------------------

### Update Recording Timer - JavaScript

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/web/index.html

Updates the displayed recording timer based on the elapsed time since recording started. It calculates minutes and seconds and formats them into a 'MM:SS' string. This function is intended to be called repeatedly by an interval.

```javascript
function updateRecTimer() {
  if (!recStartTime) return;
  const elapsed = Math.floor((Date.now() - recStartTime) / 1000);
  const mins = Math.floor(elapsed / 60);
  const secs = elapsed % 60;
  recTimer.textContent = `${mins}:${secs.toString().padStart(2, '0')}`;
}
```

--------------------------------

### Model Weights Download Commands

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

Bash commands to download model weights using 'uv run' with the 'huggingface_hub' feature. It shows how to download F32 SafeTensors weights, Q4 GGUF weights, and sharded weights for WASM deployment.

```bash
# F32 SafeTensors (~9 GB)
uv run --with huggingface_hub hf download mistralai/Voxtral-Mini-4B-Realtime-2602 --local-dir models/voxtral

# Q4 GGUF (~2.5 GB)
uv run --with huggingface_hub hf download TrevorJS/voxtral-mini-realtime-gguf voxtral-q4.gguf --local-dir models

# Sharded for WASM (5 × ≤512 MB each)
# Expected: models/voxtral-q4-shards/shard-{aa..ae}
```

--------------------------------

### Native and WASM Build Commands in Rust

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

Commands for building the project natively and for WebAssembly (WASM). Native builds use Cargo with specific features like 'wgpu', 'cli', and 'hub'. WASM builds utilize 'wasm-pack' targeting the web, disabling default features and enabling 'wasm'.

```bash
# Native build
cargo build --features "wgpu,cli,hub"
cargo build --release --features "wgpu,cli,hub"

# WASM build (produces pkg/ directory)
wasm-pack build --target web --no-default-features --features wasm
```

--------------------------------

### Token ID to Vocab Index Conversion (Rust)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/VOXTRAL_ARCHITECTURE.md

Illustrates how to convert token IDs to vocabulary indices for text decoding in Rust. It subtracts an offset of 1000 from the token ID to get the correct index into the vocabulary bytes array.

```rust
let vocab_idx = (token_id - 1000) as usize;
let bytes = vocab_bytes[vocab_idx];
```

--------------------------------

### Initialize WASM and WebGPU Client (JavaScript)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/web/index.html

This asynchronous function initializes the Voxtral client, which includes setting up WASM and WebGPU. It updates the status display to indicate the initialization progress and readiness. Error handling is included to report any initialization failures.

```javascript
async function initClient() {
    try {
        updateStatus('loading', 'Initializing WASM + WebGPU...');
        await client.init();
        updateStatus('', 'WASM ready. Select model files to load.');
        updateButtons();
    } catch (e) {
        updateStatus('error', 'Failed to initialize: ' + e.message);
        console.error(e);
    }
}
```

--------------------------------

### Generate WASM32-Fit Model with Truncated Vocab (Rust CLI)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/QUANTIZATION.md

Command to generate a single-file quantized model optimized for WASM32, with a truncated vocabulary size. Requires 'cli' and 'cpu' features.

```bash
cargo run --release --bin quantize_model --features "cli cpu" -- \
  quantize --preset q8-full --max-vocab 32768 --output models/quantized/voxtral-q8-v32k
```

--------------------------------

### GGUF Pipeline Components in Rust

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

An outline of the components involved in the GGUF inference pipeline, detailing the modules and files responsible for parsing, loading, model execution, and GPU acceleration. This includes custom WGSL shaders for Q4 matrix multiplication.

```text
reader.rs (GGUF parser + ShardedCursor)
  → loader.rs (Q4ModelLoader, two-phase for WASM)
    → model.rs (Q4 model components, TokEmbedStore)
      → tensor.rs + linear.rs + op.rs + shader.wgsl (GPU Q4 matmul)
        → bindings.rs (WASM JS API)
```

--------------------------------

### Build Project with CUDA Backend

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

Builds the Rust project using the CUDA backend for GPU acceleration. This command disables default features and enables the 'cuda' feature.

```bash
cargo build --features cuda --no-default-features
```

--------------------------------

### Use Voxtral WASM Package in Browser

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

Demonstrates how to use the compiled Voxtral WebAssembly package within a web browser. It involves initializing the WASM module, creating a Voxtral instance, loading model weights and tokenizer configuration, and then transcribing audio data. The audio data should be a 16kHz mono Float32Array.

```javascript
import init, { Voxtral } from './pkg/voxtral_mini_realtime.js';

await init();
const voxtral = new Voxtral();

// Load model (must be fetched separately - 8GB!)
const modelBytes = await fetch('consolidated.safetensors').then(r => r.arrayBuffer());
const tokenizerJson = await fetch('tekken.json').then(r => r.text());
voxtral.loadModel(new Uint8Array(modelBytes), tokenizerJson);

// Transcribe (16kHz mono Float32Array)
const text = voxtral.transcribe(audioData);
```

--------------------------------

### Testing and Benchmarking Commands in Rust

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

Commands for running tests and benchmarks. 'cargo test' executes unit and integration tests, with options to run specific tests or modules. 'cargo bench' runs benchmarks, including microbenchmarks for Q4 operations and the full inference pipeline, and CPU audio processing.

```bash
# Tests (110 tests: 107 unit + 3 integration)
cargo test --features "wgpu,cli,hub"
cargo test test_q4_roundtrip_small           # single test
cargo test gguf::tests                        # module tests

# Benchmarks (Criterion)
cargo bench --features "wgpu,cli,hub" q4_ops       # Q4 matmul kernel microbenchmarks
cargo bench --features "wgpu,cli,hub" q4_pipeline   # full inference pipeline (requires GGUF model)
cargo bench --features "wgpu,cli,hub" audio          # CPU audio processing
```

--------------------------------

### Audio-to-LLM Adapter Implementation (Python)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/VOXTRAL_ARCHITECTURE.md

Implements the AudioLanguageAdapter class, which projects audio encoder outputs to the LLM's input dimension. It includes two linear layers and a GELU activation function.

```python
class AudioLanguageAdapter:
    def __init__(self):
        self.linear1 = Linear(5120, 5120)  # input_dim = 1280 * 4
        self.linear2 = Linear(5120, 3072)  # output_dim = LLM dim

    def forward(self, x):
        # x: [batch, T, 5120] - grouped encoder output
        x = self.linear1(x)
        x = gelu(x)
        x = self.linear2(x)
        return x  # [batch, T, 3072]
```

--------------------------------

### Native CLI Transcription with Rust

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/README.md

This snippet demonstrates how to transcribe audio files using the native command-line interface. It covers downloading model weights and performing transcription with both full-precision (f32) and quantized (Q4 GGUF) models. Dependencies include `huggingface_hub` for model downloads and `wgpu` for GPU acceleration.

```bash
# Download model weights (~9 GB)
uv run --with huggingface_hub \
  hf download mistralai/Voxtral-Mini-4B-Realtime-2602 --local-dir models/voxtral

# Transcribe an audio file (f32 SafeTensors path)
cargo run --release --features "wgpu,cli,hub" --bin voxtral-transcribe -- \
  --audio audio.wav --model models/voxtral

# Or use the Q4 quantized path (~2.5 GB)
cargo run --release --features "wgpu,cli,hub" --bin voxtral-transcribe -- \
  --audio audio.wav --gguf models/voxtral-q4.gguf --tokenizer models/voxtral/tekken.json
```

--------------------------------

### WASM Asynchronous GPU Readback (into_data_async)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

Demonstrates the use of `into_data_async().await` for asynchronous GPU readbacks in WASM, avoiding `into_scalar()` which uses `block_on()` and causes panics in the WASM environment.

```rust
// In bindings.rs or similar module

use wgpu::Buffer;

async fn read_gpu_buffer_async(buffer: &Buffer) -> Result<Vec<u8>, wgpu::Error> {
    // Assuming 'buffer' is a wgpu::Buffer that has been mapped for reading
    let data = buffer.slice(..).map_async(wgpu::MapMode::Read).await;
    match data {
        Ok(_) => {
            let buffer_view = buffer.get_mapped_range();
            let result = buffer_view.to_vec();
            buffer.unmap();
            Ok(result)
        }
        Err(e) => Err(e),
    }
}

// Usage example:
// let gpu_data = read_gpu_buffer_async(&my_gpu_buffer).await?;
// Instead of:
// let scalar_data = my_gpu_buffer.into_scalar(); // This panics in WASM

```

--------------------------------

### WASM Two-Phase Model Loading Strategy

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

Details a two-phase loading process for models in WASM to manage the 4GB total address space limit. It first loads Q4 weights, releases the GGUF reader, and then finalizes the model loading.

```rust
pub struct Q4ModelParts {
    // ... fields for model parts ...
}

impl Q4ModelParts {
    pub fn new(reader: impl Read + Seek) -> Result<Self, Error> {
        // Phase 1: Load Q4 weights
        let q4_weights = load_q4_weights(reader)?;
        // Drop the GGUF reader here to free up address space
        // drop(reader);

        // Phase 2: Finalize model loading
        let model_parts = Self::finalize_loading(q4_weights)?;
        Ok(model_parts)
    }

    fn finalize_loading(q4_weights: /* type of loaded weights */) -> Result<Self, Error> {
        // ... implementation ...
        Ok(Self { /* ... */ })
    }
}

// Usage example in loader.rs:
// let file = File::open("model.gguf")?;
// let model_parts = Q4ModelParts::new(file)?;

```

--------------------------------

### Build and Test Voxtral Project (Rust CLI)

Source: https://context7.com/trevors/voxtral-mini-realtime-rs/llms.txt

Provides commands for building the Rust project for native and WASM targets, running tests, performing linting, and executing benchmarks. It also includes steps for setting up a development server for browser testing.

```bash
# Native build with default features (wgpu + native-tokenizer)
cargo build --release

# Native build with all features
cargo build --release --features "wgpu,cli,hub"

# WASM build for browser deployment
wasm-pack build --target web --no-default-features --features wasm

# Run tests (requires GPU for full suite)
cargo test --features "wgpu,cli,hub"

# Run linting
cargo clippy --features "wgpu,cli,hub" -- -D warnings
cargo clippy --no-default-features --features wasm --target wasm32-unknown-unknown -- -D warnings

# Run benchmarks
cargo bench audio                    # Audio processing benchmarks
cargo bench q4_ops --features wgpu   # Q4 operation benchmarks
cargo bench q4_pipeline --features wgpu  # Full pipeline benchmarks

# E2E browser test (requires Playwright and model shards)
bunx playwright test tests/e2e_browser.spec.ts

# Start development server for browser demo
openssl req -x509 -newkey ec -pkeyopt ec_paramgen_curve:prime256v1 \
  -keyout /tmp/voxtral-key.pem -out /tmp/voxtral-cert.pem \
  -days 7 -nodes -subj "/CN=localhost"
bun serve.mjs
# Open https://localhost:8443

```

--------------------------------

### Initialize VoxtralClient and UI Elements (JavaScript)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/web/index.html

This snippet initializes the VoxtralClient and sets up references to various UI elements for status display, file inputs, and control buttons. It also defines state variables to manage the application's state, such as loaded files and recording status.

```javascript
import { VoxtralClient } from './voxtral-client.js';

const client = new VoxtralClient();

// UI elements
const statusDot = document.getElementById('status-dot');
const statusText = document.getElementById('status-text');
const progressContainer = document.getElementById('progress-container');
const progressBar = document.getElementById('progress-bar');
const transcriptionEl = document.getElementById('transcription');
const audioInfo = document.getElementById('audio-info');
const loadBtn = document.getElementById('load-btn');

// Model file inputs
const ggufInput = document.getElementById('gguf-file');
const tokenizerInput = document.getElementById('tokenizer-file');
const ggufLabel = document.getElementById('gguf-label');
const tokenizerLabel = document.getElementById('tokenizer-label');

// Buttons
const micBtn = document.getElementById('mic-btn');
const stopMicBtn = document.getElementById('stop-mic-btn');
const cancelMicBtn = document.getElementById('cancel-mic-btn');
const transcribeBtn = document.getElementById('transcribe-btn');

// Mic UI
const micVisualizer = document.getElementById('mic-visualizer');
const recTimer = document.getElementById('rec-timer');

// State
let ggufFile = null;
let tokenizerFile = null;
let audioFile = null;
let recStartTime = null;
let recTimerInterval = null;

function updateStatus(status, text) {
    statusDot.className = 'status-dot ' + status;
    statusText.textContent = text;
}

const loadServerBtn = document.getElementById('load-server-btn');

function updateButtons() {
    loadBtn.disabled = !(client.ready && ggufFile && tokenizerFile && !client.modelLoaded);
    loadServerBtn.disabled = !(client.ready && !client.modelLoaded);
    micBtn.disabled = !client.isReady();
    transcribeBtn.disabled = !(client.isReady() && audioFile);
}
```

--------------------------------

### HTTPS Development Server for WebGPU Secure Context

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

A simple HTTPS development server implemented in Node.js using `serve.mjs`. It's configured with a self-signed certificate to enable WebGPU access in browsers, which requires a secure context. It serves model shards from a specified directory.

```javascript
// serve.mjs
import serve from 'serve';
import fs from 'fs';
import path from 'path';

const __dirname = path.resolve();

// Generate or use existing self-signed certificate
// For simplicity, assume cert.pem and key.pem exist or are generated elsewhere
const options = {
  sslKey: fs.readFileSync(path.join(__dirname, 'key.pem')),
  sslCert: fs.readFileSync(path.join(__dirname, 'cert.pem')),
  port: 8080, // Or any other desired port
  public: 'models/voxtral-q4-shards/', // Directory to serve shards from
  // Add API route for shards if needed, e.g., '/api/shards'
};

serve(options).then(({ hostname, port }) => {
  console.log(`HTTPS server running at https://${hostname}:${port}`);
  console.log(`Serving model shards from: ${path.join(__dirname, options.public)}`);
}).catch((err) => {
  console.error('Failed to start server:', err);
});

```

--------------------------------

### End-to-End Benchmark and CLI Inference Commands

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

Commands for running end-to-end benchmarks and performing CLI inference. The E2E benchmark binary requires audio files, GGUF models, and tokenizer configurations. CLI inference uses the 'voxtral-transcribe' binary with similar parameters.

```bash
# E2E benchmark binary (stage-level timing, JSON output)
cargo run --features "wgpu,cli,hub" --bin e2e-bench -- \
  --audio test_data/mary_had_lamb.wav \
  --gguf models/voxtral-q4.gguf \
  --tokenizer models/voxtral/tekken.json

# E2E browser test (requires model shards + Playwright)
bunx playwright test tests/e2e_browser.spec.ts

# CLI inference
cargo run --features "wgpu,cli,hub" --bin voxtral-transcribe -- \
  --audio test_data/mary_had_lamb.wav \
  --gguf models/voxtral-q4.gguf \
  --tokenizer models/voxtral/tekken.json
```

--------------------------------

### Prepare GGUF Model Shards for Browser Deployment

Source: https://context7.com/trevors/voxtral-mini-realtime-rs/llms.txt

Details the process of downloading a GGUF model and splitting it into smaller shards suitable for browser deployment, adhering to ArrayBuffer size limits.

```bash
# Download Q4 GGUF model
uv run --with huggingface_hub \
  hf download TrevorJS/voxtral-mini-realtime-gguf \
  voxtral-q4.gguf --local-dir models

# Split into <=512 MB shards for browser ArrayBuffer limits
mkdir -p models/voxtral-q4-shards
split -b 512m models/voxtral-q4.gguf models/voxtral-q4-shards/shard-

```

--------------------------------

### Download Voxtral Model Weights

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

A script to download the necessary model weights and configuration files for the Voxtral model. It downloads approximately 9GB of data, including the `consolidated.safetensors` file, `params.json`, and `tekken.json`. An option to specify a custom output directory is available.

```bash
# Download model files (~9GB total) - no auth required
./scripts/download_model.py

# Or specify custom output directory
./scripts/download_model.py --output-dir /path/to/models/voxtral
```

--------------------------------

### Build and Test Voxtral Rust Project

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

Commands to build and test the Voxtral Rust project. It first compiles the project using `cargo build` (defaulting to the CPU backend) and then runs all defined tests using `cargo test` to ensure functionality.

```bash
# Build (CPU backend)
cargo build

# Run tests
cargo test
```

--------------------------------

### ADA RMSNorm Conditioning with GELU in Python

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/VOXTRAL_ARCHITECTURE.md

Demonstrates the corrected implementation of ADA RMSNorm conditioning in the decoder, using GELU activation instead of SiLU. This is critical for accurate t-conditioning in the model.

```python
scale = linear_2(gelu(linear_0(t_embed)))  # NOT linear_2(silu(linear_0(t_embed)))
x_scaled = x_normalized * (1 + scale)
```

--------------------------------

### CubeCL-WGPU Patch for Subgroup Size Workaround

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/CLAUDE.md

Details a patch applied to cubecl-wgpu (version 0.9.0) to address WebGPU's subgroup invocation limits. The patch modifies `src/runtime.rs` to cap `max_subgroup_size` when the adapter reports zero, preventing issues with reduce kernels.

```rust
// Patched file: patches/cubecl-wgpu-0.9.0/src/runtime.rs

// ... inside a relevant function or struct method ...

let adapter_limits = adapter.get_limits();
let mut limits = adapter_limits.clone();

// Workaround for WebGPU reporting min/max_subgroup_size as 0
if adapter_limits.max_subgroup_size == 0 {
    // Original logic might have hardcoded 128 or had other issues
    // Patched logic:
    limits.max_subgroup_size = adapter_limits.max_compute_invocations_per_workgroup / 8;
    // Ensure it doesn't exceed the max compute invocations if the division results in a larger number
    limits.max_subgroup_size = limits.max_subgroup_size.min(adapter_limits.max_compute_invocations_per_workgroup);
}

// ... rest of the code using 'limits' ...

// Cargo.toml modification:
// [patch.crates-io]
// cubecl-wgpu = { path = "patches/cubecl-wgpu-0.9.0" }

```

--------------------------------

### Test Phased Inference Accuracy (Rust CLI)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/QUANTIZATION.md

Command to test the accuracy of phased inference against the full model. Requires 'cli', 'cpu', and 'wgpu' features.

```bash
cargo run --release --bin test_accuracy --features "cli cpu wgpu" -- --variant phased
```

--------------------------------

### Streaming Inference Prefix Adjustment (Python)

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/VOXTRAL_ARCHITECTURE.md

Demonstrates the correct prefix token generation for streaming inference to avoid an anomaly at position 38. It uses a BOS token followed by a specified number of STREAMING_PAD tokens.

```python
# BOS token ID is assumed to be 1
# STREAMING_PAD token ID is assumed to be 32
prefix_tokens = [1] + [32] * 37  # BOS + 37 STREAMING_PAD = 38 tokens
```

--------------------------------

### Python Script for Inspecting Model Weights

Source: https://github.com/trevors/voxtral-mini-realtime-rs/blob/main/docs/CONTINUATION.md

A Python script designed to browse and inspect model weights stored in SafeTensors format. It provides summaries, shapes, and statistics of the model's components.

```python
scripts/inspect_weights.py
```