Upload folder using huggingface_hub

index.html

@@ -6,114 +6,200 @@
     <title>Voxtral Realtime 4B — Live Speech-to-Text</title>
     <style>
         * { box-sizing: border-box; margin: 0; padding: 0; }
+        :root {
+            --mistral-orange: #FF7000;
+            --mistral-amber: #FF8C00;
+            --mistral-dark: #1A1008;
+            --mistral-surface: #181210;
+            --mistral-border: #2A2018;
+            --mistral-muted: #887860;
+            --mistral-text: #F0E8E0;
+            --mistral-green: #4ADE80;
+        }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-            background: #0a0a0a; color: #e0e0e0;
+            background: var(--mistral-dark); color: var(--mistral-text);
             min-height: 100vh; display: flex; flex-direction: column;
             align-items: center; padding: 2rem 1rem;
         }
+        a { color: var(--mistral-orange); text-decoration: none; }
+        a:hover { text-decoration: underline; }
         .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; }
+        /* Header */
+        .header { text-align: center; margin-bottom: 2rem; }
+        h1 {
+            font-size: 1.5rem; font-weight: 700;
+            background: linear-gradient(135deg, var(--mistral-orange), var(--mistral-amber));
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .subtitle { color: var(--mistral-muted); font-size: 0.8rem; margin-top: 0.25rem; }
+        .model-link {
+            display: inline-flex; align-items: center; gap: 0.3rem;
+            font-size: 0.75rem; margin-top: 0.5rem; color: var(--mistral-muted);
+        }
+        .model-link a { color: var(--mistral-orange); }
+
+        /* Load section */
+        .load-section {
+            background: var(--mistral-surface); border: 1px solid var(--mistral-border);
+            border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem;
+            text-align: center;
+        }
+        .load-section.hidden { display: none; }
+        .config-row {
+            display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1rem;
+        }
+        .config-row select {
+            background: var(--mistral-dark); border: 1px solid var(--mistral-border);
+            border-radius: 8px; padding: 0.5rem 0.75rem; color: var(--mistral-text);
+            font-size: 0.8rem; cursor: pointer;
+        }
+        .config-row select:focus { outline: 1px solid var(--mistral-orange); }
+        .load-btn {
+            background: linear-gradient(135deg, var(--mistral-orange), var(--mistral-amber));
+            border: none; border-radius: 10px; padding: 0.7rem 2rem;
+            color: #fff; font-size: 0.9rem; font-weight: 600;
+            cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em;
+        }
+        .load-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
+        .load-btn:active { transform: translateY(0); }
+        .load-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
+        .load-hint { font-size: 0.7rem; color: var(--mistral-muted); margin-top: 0.75rem; }
+
+        /* Progress */
+        .progress-bar {
+            width: 100%; height: 4px; background: var(--mistral-dark); border-radius: 2px;
+            overflow: hidden; margin-top: 0.75rem; opacity: 0; transition: opacity 0.3s;
+        }
+        .progress-bar.visible { opacity: 1; }
+        .progress-bar .fill {
+            height: 100%; border-radius: 2px;
+            background: linear-gradient(90deg, var(--mistral-orange), var(--mistral-amber));
+            transition: width 0.3s; width: 0%;
+        }
+        #loadStatus { font-size: 0.75rem; color: var(--mistral-muted); margin-top: 0.5rem; min-height: 1.2em; }
+
+        /* Mic */
+        .mic-wrap { display: flex; justify-content: center; margin: 1.25rem 0; }
         .mic-btn {
-            width: 96px; height: 96px; border-radius: 50%;
-            border: 3px solid #333; background: #151515;
+            width: 80px; height: 80px; border-radius: 50%;
+            border: 2px solid var(--mistral-border); background: var(--mistral-surface);
             cursor: pointer; display: flex; align-items: center; justify-content: center;
-            transition: all 0.2s; position: relative;
+            transition: all 0.2s;
         }
-        .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);
+        .mic-btn:hover { border-color: var(--mistral-orange); }
+        .mic-btn.listening {
+            border-color: var(--mistral-green); background: rgba(74,222,128,0.05);
+            box-shadow: 0 0 0 0 rgba(74,222,128,0.3);
             animation: ring 2s ease-out infinite;
         }
-        .mic-btn.disabled { opacity: 0.3; cursor: not-allowed; }
+        .mic-btn.disabled { opacity: 0.25; cursor: not-allowed; pointer-events: none; }
         @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); }
+            0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.3); }
+            100% { box-shadow: 0 0 0 18px rgba(74,222,128,0); }
         }
-        .mic-btn svg { width: 36px; height: 36px; fill: #888; transition: fill 0.2s; }
-        .mic-btn.recording svg { fill: #22c55e; }
+        .mic-btn svg { width: 32px; height: 32px; fill: var(--mistral-muted); transition: fill 0.2s; }
+        .mic-btn.listening svg { fill: var(--mistral-green); }
 
-        .waveform { height: 48px; margin: 0.5rem 0; }
+        /* Waveform */
+        .waveform { height: 44px; margin: 0.25rem 0; }
         .waveform canvas { width: 100%; height: 100%; display: block; border-radius: 6px; }
 
+        /* Status */
         #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%;
+            text-align: center; font-size: 0.75rem; color: var(--mistral-muted);
+            min-height: 1.2em; margin: 0.25rem 0;
         }
 
+        /* Transcript */
         .transcript-card {
-            background: #111; border: 1px solid #1e1e1e; border-radius: 10px;
-            padding: 1.25rem; margin-top: 1rem; min-height: 160px;
+            background: var(--mistral-surface); border: 1px solid var(--mistral-border);
+            border-radius: 12px; padding: 1.25rem; margin-top: 0.75rem; min-height: 140px;
+        }
+        .transcript-label {
+            font-size: 0.65rem; color: var(--mistral-muted);
+            text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem;
         }
-        .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;
+            font-size: 0.9rem; line-height: 1.7; color: var(--mistral-text);
             white-space: pre-wrap; word-break: break-word;
         }
-        #transcript.placeholder { color: #444; font-style: italic; font-family: inherit; }
+        #transcript.placeholder { color: #554830; 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 */
         .timing {
-            text-align: center; font-size: 0.7rem; color: #555; margin-top: 0.5rem;
+            text-align: center; font-size: 0.65rem; color: var(--mistral-muted);
+            margin-top: 0.5rem;
+        }
+
+        /* Footer */
+        .footer {
+            margin-top: 2rem; text-align: center; font-size: 0.65rem;
+            color: var(--mistral-muted); line-height: 1.6;
         }
     </style>
-  <script type="module" crossorigin src="/assets/index-CDAO7ueL.js"></script>
+  <script type="module" crossorigin src="/assets/index-_bf5fS8E.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="header">
+        <h1>Voxtral Realtime 4B</h1>
+        <p class="subtitle">Speech-to-Text in the browser with transformers.js + WebGPU</p>
+        <p class="model-link">
+            Model: <a href="https://huggingface.co/mistralai/Voxtral-Mini-4B-Realtime-2602" target="_blank" rel="noopener">
+                mistralai/Voxtral-Mini-4B-Realtime-2602
+            </a>
+            &middot;
+            ONNX: <a href="https://huggingface.co/onnx-community/Voxtral-Mini-4B-Realtime-2602-ONNX" target="_blank" rel="noopener">
+                onnx-community/Voxtral-Mini-4B-Realtime-2602-ONNX
+            </a>
+        </p>
+    </div>
 
-    <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>
+    <!-- Load Model -->
+    <div class="load-section" id="loadSection">
+        <div class="config-row">
+            <select id="dtype" title="Quantization">
+                <option value="q4">q4 (~1.5 GB)</option>
+                <option value="q4f16">q4f16 (~1.5 GB)</option>
+                <option value="fp16">fp16 (~8 GB)</option>
+            </select>
+            <select id="device" title="Backend">
+                <option value="webgpu">WebGPU</option>
+                <option value="wasm">WASM (CPU)</option>
+            </select>
+        </div>
+        <button class="load-btn" id="loadBtn" onclick="window.__loadModel()">Load Model</button>
+        <div class="load-hint">Requires a browser with WebGPU support (Chrome 113+, Edge 113+)</div>
+        <div class="progress-bar" id="progressBar"><div class="fill" id="progressFill"></div></div>
+        <div id="loadStatus"></div>
     </div>
 
-    <div class="waveform"><canvas id="waveCanvas"></canvas></div>
+    <!-- Active UI (hidden until model loads) -->
+    <div id="activeUI" style="display:none">
+        <div class="mic-wrap">
+            <button class="mic-btn" 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 id="status">Loading model...</div>
-    <div class="progress-bar" id="progressBar"><div class="fill" id="progressFill"></div></div>
+        <div class="waveform"><canvas id="waveCanvas"></canvas></div>
+        <div id="status">Click the mic to start listening</div>
+    </div>
 
-    <div class="transcript-card">
+    <div class="transcript-card" id="transcriptCard" style="display:none">
         <div class="transcript-label">Transcript</div>
         <div id="transcript" class="placeholder">Speak into your microphone...</div>
     </div>
+    <div class="timing" id="timing"></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 class="footer">
+        Powered by <a href="https://huggingface.co/docs/transformers.js" target="_blank">transformers.js</a>
+        &middot; Runs entirely in your browser
     </div>
-    <div class="timing" id="timing"></div>
 </div>
 
 </body>