Spaces:

shreyask
/

Voxtral-Mini-Realtime-WebGPU

Running

App Files Files Community

shreyask commited on 29 days ago

Commit

e745b13

verified ·

1 Parent(s): 508140e

Upload folder using huggingface_hub

Browse files

Files changed (4) hide show

README.md +13 -4
assets/index-CDAO7ueL.js +0 -0
assets/ort-wasm-simd-threaded.asyncify-COni_aV6.wasm +3 -0
index.html +119 -18

README.md CHANGED Viewed

@@ -1,10 +1,19 @@
 ---
-title: Voxtral Realtime 4b
-emoji: 📚
-colorFrom: blue
 colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Voxtral Realtime 4B
+emoji: 🎙️
+colorFrom: gray
 colorTo: green
 sdk: static
 pinned: false
+license: apache-2.0
+short_description: Speech-to-Text in the browser with transformers.js + WebGPU
 ---
+# Voxtral Realtime 4B — Live Speech-to-Text
+Real-time speech transcription running entirely in your browser using [Voxtral-Mini-4B-Realtime](https://huggingface.co/mistralai/Voxtral-Mini-4B-Realtime-2602) via [transformers.js](https://github.com/huggingface/transformers.js) + WebGPU.
+- Click the mic to start listening
+- VAD automatically detects speech segments
+- Words appear as the model generates them
+- All processing happens locally — no server needed

assets/index-CDAO7ueL.js ADDED Viewed

The diff for this file is too large to render. See raw diff

assets/ort-wasm-simd-threaded.asyncify-COni_aV6.wasm ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:f1c17268b97461e8128bc564ba43e705d1dbad66cdf0d98e46d70e34afabadf5
+size 22364280

index.html CHANGED Viewed

@@ -1,19 +1,120 @@
-<!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>Voxtral Realtime 4B — Live Speech-to-Text</title>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: #0a0a0a; color: #e0e0e0;
+            min-height: 100vh; display: flex; flex-direction: column;
+            align-items: center; padding: 2rem 1rem;
+        }
+        .container { max-width: 580px; width: 100%; }
+        h1 { font-size: 1.3rem; text-align: center; }
+        .subtitle { color: #666; font-size: 0.8rem; text-align: center; margin: 0.25rem 0 1.5rem; }
+        .mic-wrap { display: flex; justify-content: center; margin: 1.5rem 0; }
+        .mic-btn {
+            width: 96px; height: 96px; border-radius: 50%;
+            border: 3px solid #333; background: #151515;
+            cursor: pointer; display: flex; align-items: center; justify-content: center;
+            transition: all 0.2s; position: relative;
+        }
+        .mic-btn:hover { border-color: #555; background: #1a1a1a; }
+        .mic-btn.recording {
+            border-color: #22c55e; background: #0a1a0a;
+            box-shadow: 0 0 0 0 rgba(34,197,94,0.4);
+            animation: ring 2s ease-out infinite;
+        }
+        .mic-btn.disabled { opacity: 0.3; cursor: not-allowed; }
+        @keyframes ring {
+            0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
+            100% { box-shadow: 0 0 0 20px rgba(34,197,94,0); }
+        }
+        .mic-btn svg { width: 36px; height: 36px; fill: #888; transition: fill 0.2s; }
+        .mic-btn.recording svg { fill: #22c55e; }
+        .waveform { height: 48px; margin: 0.5rem 0; }
+        .waveform canvas { width: 100%; height: 100%; display: block; border-radius: 6px; }
+        #status {
+            text-align: center; font-size: 0.8rem; color: #666;
+            min-height: 1.2em; margin: 0.5rem 0;
+        }
+        .progress-bar {
+            width: 100%; height: 3px; background: #1a1a1a; border-radius: 2px;
+            overflow: hidden; margin: 0.5rem 0; opacity: 0; transition: opacity 0.3s;
+        }
+        .progress-bar.visible { opacity: 1; }
+        .progress-bar .fill {
+            height: 100%; background: #2563eb; border-radius: 2px;
+            transition: width 0.3s; width: 0%;
+        }
+        .transcript-card {
+            background: #111; border: 1px solid #1e1e1e; border-radius: 10px;
+            padding: 1.25rem; margin-top: 1rem; min-height: 160px;
+        }
+        .transcript-label { font-size: 0.7rem; color: #555; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
+        #transcript {
+            font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+            font-size: 0.95rem; line-height: 1.7; color: #d4d4d4;
+            white-space: pre-wrap; word-break: break-word;
+        }
+        #transcript.placeholder { color: #444; font-style: italic; font-family: inherit; }
+        .config-row {
+            display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.25rem;
+        }
+        .config-row select {
+            background: #141414; border: 1px solid #282828; border-radius: 6px;
+            padding: 0.4rem 0.6rem; color: #999; font-size: 0.75rem;
+        }
+        .timing {
+            text-align: center; font-size: 0.7rem; color: #555; margin-top: 0.5rem;
+        }
+    </style>
+  <script type="module" crossorigin src="/assets/index-CDAO7ueL.js"></script>
+</head>
+<body>
+<div class="container">
+    <h1>Voxtral Realtime 4B</h1>
+    <p class="subtitle">Speech-to-Text in the browser with transformers.js (local build)</p>
+    <div class="mic-wrap">
+        <button class="mic-btn disabled" id="micBtn" title="Click to start/stop listening">
+            <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>
+        </button>
+    </div>
+    <div class="waveform"><canvas id="waveCanvas"></canvas></div>
+    <div id="status">Loading model...</div>
+    <div class="progress-bar" id="progressBar"><div class="fill" id="progressFill"></div></div>
+    <div class="transcript-card">
+        <div class="transcript-label">Transcript</div>
+        <div id="transcript" class="placeholder">Speak into your microphone...</div>
+    </div>
+    <div class="config-row">
+        <select id="dtype">
+            <option value="q4">q4</option>
+            <option value="q4f16">q4f16</option>
+            <option value="q8">q8</option>
+            <option value="fp16">fp16</option>
+        </select>
+        <select id="device">
+            <option value="webgpu">WebGPU</option>
+            <option value="wasm">WASM</option>
+        </select>
+    </div>
+    <div class="timing" id="timing"></div>
+</div>
+</body>
 </html>