Choose backend

decoder_worker.js

@@ -376,8 +376,11 @@ async function processMessage(e) {
                 cfg = data.cfg;
                 const onnxUrl = data.onnxUrl;
                 const modelName = data.modelName;
+                const backend = data.backend || 'wasm';
                 const dtype = 'fp32';
 
+                const sessionOptions = { executionProviders: [backend] };
+
                 tailLatency = cfg.n_future * cfg.encoder_depth;
 
                 // Load tokenizer
@@ -394,7 +397,7 @@ async function processMessage(e) {
                 self.postMessage({ type: 'status', message: 'Loading adapter...' });
                 self.postMessage({ type: 'model_start', model: 'Adapter' });
                 const adapterBuffer = await fetchModelWithProgress(adapterUrl, 'Adapter');
-                adapterSession = await ort.InferenceSession.create(adapterBuffer);
+                adapterSession = await ort.InferenceSession.create(adapterBuffer, sessionOptions);
                 self.postMessage({ type: 'model_done', model: 'Adapter' });
 
                 // Initialize decoder init
@@ -402,7 +405,7 @@ async function processMessage(e) {
                 self.postMessage({ type: 'status', message: 'Loading decoder (init)...' });
                 self.postMessage({ type: 'model_start', model: 'Decoder Init' });
                 const decInitBuffer = await fetchModelWithProgress(decInitUrl, 'Decoder Init');
-                decoderInitSession = await ort.InferenceSession.create(decInitBuffer);
+                decoderInitSession = await ort.InferenceSession.create(decInitBuffer, sessionOptions);
                 self.postMessage({ type: 'model_done', model: 'Decoder Init' });
 
                 // Initialize decoder step
@@ -410,10 +413,10 @@ async function processMessage(e) {
                 self.postMessage({ type: 'status', message: 'Loading decoder (step)...' });
                 self.postMessage({ type: 'model_start', model: 'Decoder Step' });
                 const decStepBuffer = await fetchModelWithProgress(decStepUrl, 'Decoder Step');
-                decoderStepSession = await ort.InferenceSession.create(decStepBuffer);
+                decoderStepSession = await ort.InferenceSession.create(decStepBuffer, sessionOptions);
                 self.postMessage({ type: 'model_done', model: 'Decoder Step' });
 
-                self.postMessage({ type: 'ready' });
+                self.postMessage({ type: 'ready', backend: backend });
             } catch (err) {
                 self.postMessage({ type: 'error', message: err.message });
             }

encoder_worker.js

@@ -241,8 +241,11 @@ async function processMessage(e) {
                 cfg = data.cfg;
                 const onnxUrl = data.onnxUrl;
                 const modelName = data.modelName;
+                const backend = data.backend || 'wasm';
                 const dtype = 'fp32';
 
+                const sessionOptions = { executionProviders: [backend] };
+
                 tailLatency = cfg.n_future * cfg.encoder_depth;
 
                 // Initialize preprocessor
@@ -250,7 +253,7 @@ async function processMessage(e) {
                 self.postMessage({ type: 'status', message: 'Loading preprocessor...' });
                 self.postMessage({ type: 'model_start', model: 'Preprocessor' });
                 const prepBuffer = await fetchModelWithProgress(prepUrl, 'Preprocessor');
-                prepSession = await ort.InferenceSession.create(prepBuffer);
+                prepSession = await ort.InferenceSession.create(prepBuffer, sessionOptions);
                 self.postMessage({ type: 'model_done', model: 'Preprocessor' });
 
                 prepDim = cfg.dim;
@@ -263,7 +266,7 @@ async function processMessage(e) {
                 self.postMessage({ type: 'status', message: 'Loading encoder...' });
                 self.postMessage({ type: 'model_start', model: 'Encoder' });
                 const encBuffer = await fetchModelWithProgress(encUrl, 'Encoder');
-                encSession = await ort.InferenceSession.create(encBuffer);
+                encSession = await ort.InferenceSession.create(encBuffer, sessionOptions);
                 self.postMessage({ type: 'model_done', model: 'Encoder' });
 
                 encDim = cfg.dim;
@@ -272,7 +275,7 @@ async function processMessage(e) {
                 encEncoderDepth = cfg.encoder_depth;
                 encContextSize = cfg.encoder_depth * (cfg.n_past + cfg.n_future);
 
-                self.postMessage({ type: 'ready' });
+                self.postMessage({ type: 'ready', backend: backend });
             } catch (err) {
                 self.postMessage({ type: 'error', message: err.message });
             }

index.html

@@ -57,6 +57,23 @@
         .status-dot.listening { background: #00ff88; animation: pulse 1s infinite; }
         .status-dot.recording { background: #ff4444; animation: pulse 0.5s infinite; }
 
+        .backend-badge {
+            display: none;
+            padding: 3px 8px;
+            border-radius: 10px;
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+            margin-left: 10px;
+            background: #444;
+            color: #ccc;
+        }
+
+        .backend-badge.visible { display: inline-block; }
+        .backend-badge.wasm { background: #555; color: #aaa; }
+        .backend-badge.webgl { background: #f90; color: #000; }
+        .backend-badge.webgpu { background: linear-gradient(90deg, #00d4ff, #00ff88); color: #000; }
+
         @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.5; }
@@ -622,6 +639,14 @@
                         <option value="spindlier">Moonshine Spindlier</option>
                     </select>
                 </div>
+                <div class="config-item">
+                    <label>Backend</label>
+                    <select id="backendSelect">
+                        <option value="wasm">WASM (CPU)</option>
+                        <option value="webgl">WebGL (GPU)</option>
+                        <option value="webgpu">WebGPU (GPU)</option>
+                    </select>
+                </div>
                 <div class="config-item">
                     <label>ONNX Files URL</label>
                     <input type="text" id="onnxUrl" placeholder="e.g., ./models or https://..." value="./models">
@@ -641,6 +666,7 @@
             <div class="status-indicator">
                 <div class="status-dot" id="statusDot"></div>
                 <span id="statusText">Ready</span>
+                <span class="backend-badge" id="backendBadge"></span>
             </div>
             <div class="controls">
                 <button class="btn-primary" id="startBtn">Start Listening</button>

streaming_asr.js

@@ -187,6 +187,7 @@ class PipelinedStreamingASR {
     constructor(config) {
         this.modelName = config.modelName || 'sleeker';
         this.onnxUrl = config.onnxUrl || './models';
+        this.backendChoice = config.backend || 'wasm';
         this.onsetThreshold = config.onsetThreshold || 0.5;
         this.offsetThreshold = config.offsetThreshold || 0.3;
         this.emaAlpha = config.emaAlpha || 0.3;
@@ -236,6 +237,10 @@ class PipelinedStreamingASR {
         this.onLiveCaption = null;
         this.onStatusUpdate = null;
         this.onQueueUpdate = null;
+        this.onBackendUpdate = null;
+
+        // Backend info
+        this.backend = 'unknown';
     }
 
     async loadModels(progressCallback, detailedProgressCallback) {
@@ -348,7 +353,8 @@ class PipelinedStreamingASR {
                 data: {
                     cfg: this.cfg,
                     onnxUrl: this.onnxUrl,
-                    modelName: this.modelName
+                    modelName: this.modelName,
+                    backend: this.backendChoice
                 }
             });
         });
@@ -364,6 +370,8 @@ class PipelinedStreamingASR {
                 switch (type) {
                     case 'ready':
                         this.decoderReady = true;
+                        this.backend = e.data.backend || 'wasm';
+                        this.onBackendUpdate?.(this.backend);
                         resolve();
                         break;
                     case 'error':
@@ -391,7 +399,8 @@ class PipelinedStreamingASR {
                 data: {
                     cfg: this.cfg,
                     onnxUrl: this.onnxUrl,
-                    modelName: this.modelName
+                    modelName: this.modelName,
+                    backend: this.backendChoice
                 }
             });
         });
@@ -733,7 +742,9 @@ class ASRDemoUI {
         this.liveCaptionText = document.getElementById('liveCaptionText');
         this.liveCaptionMobile = document.getElementById('liveCaptionMobile');
         this.liveCaptionTextMobile = document.getElementById('liveCaptionTextMobile');
+        this.backendBadge = document.getElementById('backendBadge');
         this.modelSelect = document.getElementById('modelSelect');
+        this.backendSelect = document.getElementById('backendSelect');
         this.onnxUrl = document.getElementById('onnxUrl');
         this.onsetThreshold = document.getElementById('onsetThreshold');
         this.offsetThreshold = document.getElementById('offsetThreshold');
@@ -782,6 +793,7 @@ class ASRDemoUI {
             const config = {
                 modelName: this.modelSelect.value,
                 onnxUrl: this.onnxUrl.value || './models',
+                backend: this.backendSelect.value,
                 onsetThreshold: parseFloat(this.onsetThreshold.value),
                 offsetThreshold: parseFloat(this.offsetThreshold.value)
             };
@@ -792,6 +804,7 @@ class ASRDemoUI {
             this.asr.onTranscript = (text, segmentId) => this.addTranscript(text, segmentId);
             this.asr.onLiveCaption = (text) => this.updateLiveCaption(text);
             this.asr.onStatusUpdate = (status, text) => this.updateStatus(status, text);
+            this.asr.onBackendUpdate = (backend) => this.updateBackendBadge(backend);
 
             await this.asr.loadModels(
                 (text) => {
@@ -826,6 +839,7 @@ class ASRDemoUI {
         this.stopBtn.disabled = true;
         this.disableConfig(false);
         this.updateStatus('idle', 'Ready');
+        this.backendBadge.classList.remove('visible');
     }
 
     updateVadDisplay(prob, history, segmentEvents = [], historyStartTime = 0) {
@@ -978,6 +992,12 @@ class ASRDemoUI {
         this.statusText.textContent = text;
     }
 
+    updateBackendBadge(backend) {
+        const labels = { 'wasm': 'WASM', 'webgl': 'WebGL', 'webgpu': 'WebGPU' };
+        this.backendBadge.textContent = labels[backend] || backend;
+        this.backendBadge.className = 'backend-badge visible ' + backend;
+    }
+
     showLoading(text) {
         this.loadingText.textContent = text;
         this.loadingProgressFill.style.width = '0%';
@@ -1021,6 +1041,7 @@ class ASRDemoUI {
 
     disableConfig(disabled) {
         this.modelSelect.disabled = disabled;
+        this.backendSelect.disabled = disabled;
         this.onnxUrl.disabled = disabled;
         this.onsetThreshold.disabled = disabled;
         this.offsetThreshold.disabled = disabled;