Upload 2 files

app.js

@@ -59,6 +59,7 @@ const clearBtn = document.getElementById('clearBtn');
 const progressSection = document.getElementById('progressSection');
 const progressFill = document.getElementById('progressFill');
 const progressText = document.getElementById('progressText');
+const vadCheckbox = document.getElementById('vadCheckbox');
 const gpuInfo = document.getElementById('gpuInfo');
 
 // Recording state
@@ -126,7 +127,7 @@ async function initModels() {
         const fileProgress = {};
         model = await GraniteSpeechForConditionalGeneration.from_pretrained(MODEL_ID, {
             dtype: {
-                audio_encoder: 'q4f16',
+                audio_encoder: 'q4',
                 embed_tokens: 'q4f16',
                 decoder_model_merged: 'q4f16',
             },
@@ -240,10 +241,15 @@ async function transcribe() {
     showProgress(true);
 
     try {
-        // Get speech segments using VAD
-        updateProgress(5, 'Detecting speech segments...');
-        const segments = await getSpeechSegments(currentAudioData, SAMPLE_RATE);
-        console.log(`VAD found ${segments.length} segment(s)`);
+        // Get speech segments using VAD, or treat entire audio as one segment
+        let segments;
+        if (vadCheckbox.checked) {
+            updateProgress(5, 'Detecting speech segments...');
+            segments = await getSpeechSegments(currentAudioData, SAMPLE_RATE);
+            console.log(`VAD found ${segments.length} segment(s)`);
+        } else {
+            segments = [{ start: 0, end: currentAudioData.length / SAMPLE_RATE }];
+        }
 
         // Start audio playback immediately
         audioPlayer.currentTime = 0;

index.html

@@ -11,8 +11,7 @@
     <div class="browser-error" id="browserError" style="display: none;">
         <div class="browser-error-content">
             <h2>Browser Not Supported</h2>
-            <p>This demo requires <strong>WebGPU</strong>, which is not available in your browser.</p>
-            <p>Please use <strong>Google Chrome 113+</strong> or <strong>Microsoft Edge 113+</strong> on desktop.</p>
+            <p>This demo requires <strong>WebGPU</strong> on a desktop browser. Please use <strong>Google Chrome 113+</strong> or <strong>Microsoft Edge 113+</strong>.</p>
         </div>
     </div>
 
@@ -90,6 +89,10 @@
                     <option value="translate_ja">Translate to Japanese</option>
                 </select>
             </div>
+            <label class="checkbox-row">
+                <input type="checkbox" id="vadCheckbox" checked>
+                <span>Speech segmentation (VAD)</span>
+            </label>
             <label class="checkbox-row">
                 <input type="checkbox" id="punctuationCheckbox" checked>
                 <span>Add punctuation (English only)</span>
@@ -127,7 +130,7 @@
         <!-- Footer -->
         <div class="footer">
             Made with
-            <a href="https://huggingface.co/ibm-granite/granite-4.0-1b-speech" target="_blank">Granite 4.0 1B Speech</a> (quantized)
+            <a href="https://huggingface.co/ibm-granite/granite-4.0-1b-speech" target="_blank">Granite 4.0 1B Speech</a>
             and
             <a href="https://huggingface.co/docs/transformers.js" target="_blank">Transformers.js</a>
             <br>
@@ -137,10 +140,33 @@
     </div>
 
     <script>
-        if (!navigator.gpu) {
-            document.getElementById('browserError').style.display = 'flex';
-            document.getElementById('appContainer').style.display = 'none';
-        }
+        (async () => {
+            let supported = false;
+            let reason = '';
+            try {
+                if (navigator.gpu) {
+                    const adapter = await navigator.gpu.requestAdapter();
+                    if (adapter) {
+                        const info = await adapter.requestAdapterInfo?.() || {};
+                        const isSoftware = /swiftshader|llvmpipe|software/i.test(info.description || '');
+                        if (!isSoftware) supported = true;
+                        else reason = 'Software rendering detected — a GPU with WebGPU support is required.';
+                    }
+                }
+            } catch (e) {}
+            const isMobile = /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent);
+            if (isMobile) {
+                supported = false;
+                reason = 'Mobile browsers are not yet supported. This demo requires ~1.4 GB of GPU memory which exceeds mobile device limits. Please use a desktop browser.';
+            }
+            if (!supported) {
+                document.getElementById('browserError').style.display = 'flex';
+                document.getElementById('appContainer').style.display = 'none';
+                if (reason) {
+                    document.querySelector('.browser-error-content p').textContent = reason;
+                }
+            }
+        })();
     </script>
     <!-- ORT global is retained for VAD (vad.js) and punctuation (punctuator.js) which use WASM -->
     <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.24.3/dist/ort.all.min.js"></script>