FastAPI + WebSocket streaming with newspaper UI

Dockerfile

@@ -0,0 +1,49 @@
+# Dockerfile for Nemotron Speech Streaming
+# FastAPI + WebSocket + NeMo ASR
+
+FROM nvidia/cuda:12.1.0-runtime-ubuntu22.04
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    DEBIAN_FRONTEND=noninteractive
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    python3.10 \
+    python3-pip \
+    python3.10-dev \
+    ffmpeg \
+    libsndfile1 \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set Python 3.10 as default
+RUN ln -sf /usr/bin/python3.10 /usr/bin/python3 && \
+    ln -sf /usr/bin/python3.10 /usr/bin/python
+
+WORKDIR /app
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY main.py .
+COPY static/ ./static/
+
+# Create non-root user for security
+RUN useradd --create-home --shell /bin/bash appuser && \
+    chown -R appuser:appuser /app
+USER appuser
+
+# Expose port
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+    CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:7860/health')" || exit 1
+
+# Run the application
+CMD ["python", "-m", "uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,11 +1,10 @@
 ---
 title: Nemotron Speech Streaming
-emoji: 🎙️
-colorFrom: green
-colorTo: blue
-sdk: gradio
-sdk_version: 4.44.0
-app_file: app.py
+emoji: 📰
+colorFrom: gray
+colorTo: gray
+sdk: docker
+app_port: 7860
 pinned: false
 license: apache-2.0
 suggested_hardware: t4-small
@@ -13,22 +12,30 @@ models:
   - nvidia/nemotron-speech-streaming-en-0.6b
 ---
 
-# Nemotron Speech ASR
+# The Daily Transcript
 
-Real-time English speech recognition powered by [NVIDIA Nemotron Speech Streaming](https://huggingface.co/nvidia/nemotron-speech-streaming-en-0.6b).
+Real-time speech-to-text transcription powered by **NVIDIA Nemotron ASR**.
 
 ## Features
 
-- **600M parameter** FastConformer-CacheAware-RNNT model
-- **Streaming-optimized** architecture for low-latency transcription
-- **Automatic punctuation and capitalization**
-- Three input modes: File upload, Microphone recording, Live streaming
+- **WebSocket-based streaming** for low-latency transcription
+- **Newspaper-style UI** - clean black & white design
+- **Real-time updates** - see your words appear as you speak
+- **No Triton required** - uses NeMo model directly with PyTorch
 
-## Usage
+## How It Works
 
-1. **File Upload**: Upload any audio file to get a transcription
-2. **Microphone**: Record audio directly from your browser
-3. **Live Streaming**: Real-time transcription as you speak
+1. Click "Start Recording" to begin
+2. Speak into your microphone
+3. Watch your words appear in real-time
+4. Click "Stop Recording" when done
+
+## Technical Details
+
+- **Backend**: FastAPI with WebSocket support
+- **Frontend**: Vanilla HTML/JS with Web Audio API
+- **Model**: nvidia/nemotron-speech-streaming-en-0.6b (600M parameters)
+- **Audio**: 16kHz, mono, PCM16
 
 ## Model Details
 
@@ -36,8 +43,15 @@ Real-time English speech recognition powered by [NVIDIA Nemotron Speech Streamin
 - **Input**: 16kHz mono audio (minimum 80ms)
 - **Output**: English text with punctuation and capitalization
 
-## Acknowledgments
+## Local Development
 
-Built with [NVIDIA NeMo](https://github.com/NVIDIA/NeMo) and [Gradio](https://gradio.app/).
+```bash
+pip install -r requirements.txt
+python main.py
+```
+
+Then open http://localhost:7860 in your browser.
+
+## Acknowledgments
 
-# Rebuild trigger Sat Jan 10 23:15:06 PST 2026
+Built with [NVIDIA NeMo](https://github.com/NVIDIA/NeMo) and FastAPI.

main.py

@@ -0,0 +1,224 @@
+"""
+FastAPI + WebSocket backend for real-time speech transcription.
+Uses NeMo ASR model directly (no Triton required).
+"""
+
+import asyncio
+import json
+import uuid
+import sys
+from pathlib import Path
+from typing import Optional, AsyncIterator
+from datetime import datetime
+
+import numpy as np
+import torch
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from loguru import logger
+
+# Configure logging
+logger.remove()
+logger.add(
+    sys.stderr,
+    format="<green>{time:HH:mm:ss}</green> | <level>{level: <8}</level> | <level>{message}</level>",
+    level="INFO",
+)
+
+# Global model
+ASR_MODEL = None
+DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
+
+def load_model():
+    """Load the NeMo ASR model."""
+    global ASR_MODEL
+
+    logger.info("Loading NeMo ASR Model...")
+    try:
+        import nemo.collections.asr as nemo_asr
+        ASR_MODEL = nemo_asr.models.ASRModel.from_pretrained(
+            model_name="nvidia/nemotron-speech-streaming-en-0.6b"
+        )
+        ASR_MODEL.eval()
+
+        if torch.cuda.is_available():
+            logger.info("Moving model to CUDA")
+            ASR_MODEL = ASR_MODEL.cuda()
+        else:
+            logger.warning("CUDA not available, using CPU (will be slow)")
+
+        logger.info("Model loaded successfully!")
+        return True
+    except Exception as e:
+        logger.error(f"Failed to load model: {e}")
+        return False
+
+
+# Create FastAPI app
+app = FastAPI(title="Nemotron Speech Streaming")
+
+
+@app.on_event("startup")
+async def startup():
+    """Load model on startup."""
+    load_model()
+
+
+@app.get("/health")
+async def health():
+    """Health check endpoint."""
+    return {
+        "status": "healthy",
+        "model_loaded": ASR_MODEL is not None,
+        "device": DEVICE,
+    }
+
+
+@app.get("/")
+async def root():
+    """Serve the frontend."""
+    return FileResponse(Path(__file__).parent / "static" / "index.html")
+
+
+@app.websocket("/ws/transcribe")
+async def websocket_transcribe(websocket: WebSocket):
+    """
+    WebSocket endpoint for streaming transcription.
+
+    Protocol:
+    - Client sends binary PCM audio data (16-bit, 16kHz, mono)
+    - Server sends JSON: {"type": "transcript", "text": "...", "is_final": bool}
+    """
+    await websocket.accept()
+
+    session_id = str(uuid.uuid4())[:8]
+    logger.info(f"[{session_id}] Client connected")
+
+    # Send ready message
+    await websocket.send_json({
+        "type": "ready",
+        "session_id": session_id,
+        "model_loaded": ASR_MODEL is not None,
+    })
+
+    if ASR_MODEL is None:
+        await websocket.send_json({
+            "type": "error",
+            "message": "Model not loaded. Please wait and try again.",
+        })
+        await websocket.close()
+        return
+
+    # Audio buffer
+    audio_buffer = np.array([], dtype=np.float32)
+    chunk_count = 0
+    last_transcript = ""
+
+    # Processing settings
+    MIN_AUDIO_LENGTH = 8000  # 0.5 seconds at 16kHz
+    MAX_AUDIO_LENGTH = 80000  # 5 seconds at 16kHz
+    PROCESS_EVERY_N_CHUNKS = 3  # Process every N chunks for efficiency
+
+    try:
+        while True:
+            message = await websocket.receive()
+
+            if message["type"] == "websocket.disconnect":
+                break
+
+            # Handle binary audio data
+            if "bytes" in message:
+                audio_bytes = message["bytes"]
+                chunk_count += 1
+
+                # Convert bytes to numpy array (expecting 16-bit PCM)
+                audio_chunk = np.frombuffer(audio_bytes, dtype=np.int16).astype(np.float32) / 32768.0
+
+                # Add to buffer
+                audio_buffer = np.concatenate([audio_buffer, audio_chunk])
+
+                # Log periodically
+                if chunk_count % 20 == 0:
+                    logger.debug(f"[{session_id}] Chunks: {chunk_count}, Buffer: {len(audio_buffer)} samples")
+
+                # Process when we have enough audio
+                if len(audio_buffer) >= MIN_AUDIO_LENGTH and chunk_count % PROCESS_EVERY_N_CHUNKS == 0:
+                    # Use last N samples for context
+                    audio_context = audio_buffer[-MAX_AUDIO_LENGTH:] if len(audio_buffer) > MAX_AUDIO_LENGTH else audio_buffer
+
+                    try:
+                        with torch.no_grad():
+                            start_time = datetime.now()
+                            results = ASR_MODEL.transcribe([audio_context])
+                            inference_time = (datetime.now() - start_time).total_seconds() * 1000
+
+                            if results and len(results) > 0:
+                                hyp = results[0]
+
+                                # Extract text
+                                if isinstance(hyp, str):
+                                    text = hyp
+                                elif hasattr(hyp, 'text'):
+                                    text = hyp.text
+                                elif hasattr(hyp, 'pred_text'):
+                                    text = hyp.pred_text
+                                else:
+                                    text = str(hyp)
+
+                                text = text.strip()
+
+                                if text and text != last_transcript:
+                                    last_transcript = text
+                                    logger.info(f"[{session_id}] ({inference_time:.0f}ms) {text[:60]}...")
+
+                                    await websocket.send_json({
+                                        "type": "transcript",
+                                        "text": text,
+                                        "is_final": False,
+                                        "latency_ms": inference_time,
+                                    })
+
+                    except Exception as e:
+                        logger.error(f"[{session_id}] Inference error: {e}")
+
+                    # Trim buffer to prevent memory growth
+                    if len(audio_buffer) > MAX_AUDIO_LENGTH:
+                        audio_buffer = audio_buffer[-MAX_AUDIO_LENGTH:]
+
+            # Handle JSON control messages
+            elif "text" in message:
+                try:
+                    data = json.loads(message["text"])
+                    msg_type = data.get("type")
+
+                    if msg_type == "reset":
+                        audio_buffer = np.array([], dtype=np.float32)
+                        chunk_count = 0
+                        last_transcript = ""
+                        logger.info(f"[{session_id}] Session reset")
+                        await websocket.send_json({"type": "reset_ack"})
+
+                    elif msg_type == "ping":
+                        await websocket.send_json({"type": "pong"})
+
+                except json.JSONDecodeError:
+                    pass
+
+    except WebSocketDisconnect:
+        logger.info(f"[{session_id}] Client disconnected")
+    except Exception as e:
+        logger.error(f"[{session_id}] WebSocket error: {e}")
+    finally:
+        logger.info(f"[{session_id}] Session ended (processed {chunk_count} chunks)")
+
+
+# Mount static files
+static_path = Path(__file__).parent / "static"
+if static_path.exists():
+    app.mount("/static", StaticFiles(directory=str(static_path)), name="static")
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -1,9 +1,11 @@
-gradio>=4.44.0
-spaces
+fastapi>=0.104.0
+uvicorn[standard]>=0.24.0
+websockets>=12.0
+loguru>=0.7.0
+numpy>=1.24.0
 torch>=2.0.0
-numpy
-librosa
-soundfile
+librosa>=0.10.0
+soundfile>=0.12.0
 nemo_toolkit[asr] @ git+https://github.com/NVIDIA/NeMo.git@main
 Cython
 packaging

static/index.html

@@ -0,0 +1,511 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The Daily Transcript</title>
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Serif+Pro:wght@400;600&family=IBM+Plex+Mono&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg: #f5f5f0;
+            --text: #1a1a1a;
+            --text-light: #666;
+            --border: #1a1a1a;
+            --accent: #1a1a1a;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Source Serif Pro', Georgia, serif;
+            background: var(--bg);
+            color: var(--text);
+            min-height: 100vh;
+            line-height: 1.6;
+        }
+
+        /* Newspaper Header */
+        .masthead {
+            text-align: center;
+            padding: 30px 20px 20px;
+            border-bottom: 3px double var(--border);
+            margin-bottom: 20px;
+        }
+
+        .masthead h1 {
+            font-family: 'Playfair Display', Georgia, serif;
+            font-size: clamp(2.5rem, 8vw, 4.5rem);
+            font-weight: 900;
+            letter-spacing: -0.02em;
+            text-transform: uppercase;
+            margin-bottom: 5px;
+        }
+
+        .masthead .tagline {
+            font-style: italic;
+            color: var(--text-light);
+            font-size: 1rem;
+            margin-bottom: 10px;
+        }
+
+        .masthead .edition {
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 0.75rem;
+            color: var(--text-light);
+            border-top: 1px solid var(--border);
+            border-bottom: 1px solid var(--border);
+            padding: 8px 0;
+            margin-top: 15px;
+            display: flex;
+            justify-content: space-between;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        /* Main Content */
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 0 20px 40px;
+        }
+
+        /* Status Bar */
+        .status-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid var(--border);
+            margin-bottom: 30px;
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 0.8rem;
+        }
+
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #ccc;
+            border: 1px solid var(--border);
+        }
+
+        .status-dot.connected {
+            background: #1a1a1a;
+            animation: pulse 2s infinite;
+        }
+
+        .status-dot.recording {
+            background: #1a1a1a;
+            animation: pulse 0.5s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+
+        /* Transcript Area */
+        .transcript-section {
+            margin-bottom: 40px;
+        }
+
+        .section-header {
+            font-family: 'Playfair Display', Georgia, serif;
+            font-size: 0.9rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            border-bottom: 2px solid var(--border);
+            padding-bottom: 5px;
+            margin-bottom: 20px;
+        }
+
+        .transcript-box {
+            min-height: 200px;
+            padding: 30px;
+            background: #fff;
+            border: 1px solid var(--border);
+            position: relative;
+        }
+
+        .transcript-box::before {
+            content: '"';
+            font-family: 'Playfair Display', Georgia, serif;
+            font-size: 4rem;
+            position: absolute;
+            top: 10px;
+            left: 20px;
+            color: #ddd;
+            line-height: 1;
+        }
+
+        .transcript-text {
+            font-family: 'Source Serif Pro', Georgia, serif;
+            font-size: 1.5rem;
+            line-height: 1.8;
+            text-align: justify;
+            hyphens: auto;
+            padding-left: 40px;
+        }
+
+        .transcript-text.placeholder {
+            color: var(--text-light);
+            font-style: italic;
+        }
+
+        .transcript-text .cursor {
+            display: inline-block;
+            width: 2px;
+            height: 1.2em;
+            background: var(--text);
+            margin-left: 2px;
+            animation: blink 1s infinite;
+            vertical-align: text-bottom;
+        }
+
+        @keyframes blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0; }
+        }
+
+        /* Controls */
+        .controls {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 30px;
+        }
+
+        .btn {
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 0.85rem;
+            padding: 15px 40px;
+            border: 2px solid var(--border);
+            background: var(--bg);
+            color: var(--text);
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover {
+            background: var(--text);
+            color: var(--bg);
+        }
+
+        .btn:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .btn.primary {
+            background: var(--text);
+            color: var(--bg);
+        }
+
+        .btn.primary:hover {
+            background: var(--bg);
+            color: var(--text);
+        }
+
+        .btn.recording {
+            background: var(--text);
+            color: var(--bg);
+            animation: pulse 0.5s infinite;
+        }
+
+        /* Footer */
+        .footer {
+            text-align: center;
+            padding: 20px;
+            border-top: 1px solid var(--border);
+            margin-top: 40px;
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 0.75rem;
+            color: var(--text-light);
+        }
+
+        /* Latency display */
+        .latency {
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 0.7rem;
+            color: var(--text-light);
+            text-align: right;
+            margin-top: 10px;
+        }
+
+        /* Responsive */
+        @media (max-width: 600px) {
+            .masthead h1 {
+                font-size: 2rem;
+            }
+
+            .transcript-text {
+                font-size: 1.2rem;
+                padding-left: 30px;
+            }
+
+            .transcript-box::before {
+                font-size: 3rem;
+            }
+
+            .controls {
+                flex-direction: column;
+            }
+
+            .btn {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="masthead">
+        <h1>The Daily Transcript</h1>
+        <p class="tagline">All the Words That's Fit to Transcribe</p>
+        <div class="edition">
+            <span id="date"></span>
+            <span id="session-id">Connecting...</span>
+            <span id="time"></span>
+        </div>
+    </header>
+
+    <main class="container">
+        <div class="status-bar">
+            <div class="status-indicator">
+                <div class="status-dot" id="status-dot"></div>
+                <span id="status-text">Connecting...</span>
+            </div>
+            <div id="latency-display"></div>
+        </div>
+
+        <section class="transcript-section">
+            <h2 class="section-header">Live Transcription</h2>
+            <div class="transcript-box">
+                <p class="transcript-text placeholder" id="transcript">
+                    Press the button below to begin recording. Your words will appear here as you speak.
+                </p>
+            </div>
+            <div class="latency" id="latency-info"></div>
+        </section>
+
+        <div class="controls">
+            <button class="btn primary" id="record-btn" disabled>Start Recording</button>
+            <button class="btn" id="clear-btn">Clear</button>
+        </div>
+
+        <footer class="footer">
+            <p>Powered by NVIDIA Nemotron ASR &bull; Real-time Speech Recognition</p>
+        </footer>
+    </main>
+
+    <script>
+        // Elements
+        const statusDot = document.getElementById('status-dot');
+        const statusText = document.getElementById('status-text');
+        const transcriptEl = document.getElementById('transcript');
+        const recordBtn = document.getElementById('record-btn');
+        const clearBtn = document.getElementById('clear-btn');
+        const latencyInfo = document.getElementById('latency-info');
+        const sessionIdEl = document.getElementById('session-id');
+        const dateEl = document.getElementById('date');
+        const timeEl = document.getElementById('time');
+        const latencyDisplay = document.getElementById('latency-display');
+
+        // State
+        let ws = null;
+        let audioContext = null;
+        let mediaStream = null;
+        let processor = null;
+        let isRecording = false;
+        let currentTranscript = '';
+
+        // Update date/time
+        function updateDateTime() {
+            const now = new Date();
+            dateEl.textContent = now.toLocaleDateString('en-US', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+            });
+            timeEl.textContent = now.toLocaleTimeString('en-US', {
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        }
+        updateDateTime();
+        setInterval(updateDateTime, 1000);
+
+        // Connect WebSocket
+        function connect() {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            ws = new WebSocket(`${protocol}//${window.location.host}/ws/transcribe`);
+
+            ws.onopen = () => {
+                console.log('WebSocket connected');
+            };
+
+            ws.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+
+                switch (data.type) {
+                    case 'ready':
+                        statusDot.className = 'status-dot connected';
+                        statusText.textContent = 'Ready';
+                        sessionIdEl.textContent = `Session: ${data.session_id}`;
+                        recordBtn.disabled = false;
+                        break;
+
+                    case 'transcript':
+                        currentTranscript = data.text;
+                        updateTranscript();
+                        if (data.latency_ms) {
+                            latencyDisplay.textContent = `${Math.round(data.latency_ms)}ms`;
+                        }
+                        break;
+
+                    case 'error':
+                        statusText.textContent = `Error: ${data.message}`;
+                        break;
+
+                    case 'reset_ack':
+                        currentTranscript = '';
+                        updateTranscript();
+                        break;
+                }
+            };
+
+            ws.onclose = () => {
+                statusDot.className = 'status-dot';
+                statusText.textContent = 'Disconnected';
+                recordBtn.disabled = true;
+                // Reconnect after 2 seconds
+                setTimeout(connect, 2000);
+            };
+
+            ws.onerror = (error) => {
+                console.error('WebSocket error:', error);
+            };
+        }
+
+        // Update transcript display
+        function updateTranscript() {
+            if (currentTranscript) {
+                transcriptEl.className = 'transcript-text';
+                transcriptEl.innerHTML = currentTranscript + (isRecording ? '<span class="cursor"></span>' : '');
+            } else {
+                transcriptEl.className = 'transcript-text placeholder';
+                transcriptEl.textContent = 'Press the button below to begin recording. Your words will appear here as you speak.';
+            }
+        }
+
+        // Start recording
+        async function startRecording() {
+            try {
+                // Get microphone access
+                mediaStream = await navigator.mediaDevices.getUserMedia({
+                    audio: {
+                        sampleRate: 16000,
+                        channelCount: 1,
+                        echoCancellation: true,
+                        noiseSuppression: true,
+                    }
+                });
+
+                // Create audio context
+                audioContext = new AudioContext({ sampleRate: 16000 });
+                const source = audioContext.createMediaStreamSource(mediaStream);
+
+                // Create script processor for capturing audio
+                processor = audioContext.createScriptProcessor(4096, 1, 1);
+
+                processor.onaudioprocess = (e) => {
+                    if (ws && ws.readyState === WebSocket.OPEN) {
+                        const inputData = e.inputBuffer.getChannelData(0);
+                        // Convert float32 to int16
+                        const int16Data = new Int16Array(inputData.length);
+                        for (let i = 0; i < inputData.length; i++) {
+                            int16Data[i] = Math.max(-32768, Math.min(32767, inputData[i] * 32768));
+                        }
+                        ws.send(int16Data.buffer);
+                    }
+                };
+
+                source.connect(processor);
+                processor.connect(audioContext.destination);
+
+                isRecording = true;
+                recordBtn.textContent = 'Stop Recording';
+                recordBtn.className = 'btn recording';
+                statusDot.className = 'status-dot recording';
+                statusText.textContent = 'Recording...';
+                updateTranscript();
+
+            } catch (error) {
+                console.error('Error starting recording:', error);
+                statusText.textContent = 'Microphone access denied';
+            }
+        }
+
+        // Stop recording
+        function stopRecording() {
+            if (processor) {
+                processor.disconnect();
+                processor = null;
+            }
+            if (audioContext) {
+                audioContext.close();
+                audioContext = null;
+            }
+            if (mediaStream) {
+                mediaStream.getTracks().forEach(track => track.stop());
+                mediaStream = null;
+            }
+
+            isRecording = false;
+            recordBtn.textContent = 'Start Recording';
+            recordBtn.className = 'btn primary';
+            statusDot.className = 'status-dot connected';
+            statusText.textContent = 'Ready';
+            updateTranscript();
+        }
+
+        // Clear transcript
+        function clearTranscript() {
+            currentTranscript = '';
+            updateTranscript();
+            latencyDisplay.textContent = '';
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'reset' }));
+            }
+        }
+
+        // Event listeners
+        recordBtn.addEventListener('click', () => {
+            if (isRecording) {
+                stopRecording();
+            } else {
+                startRecording();
+            }
+        });
+
+        clearBtn.addEventListener('click', clearTranscript);
+
+        // Start connection
+        connect();
+    </script>
+</body>
+</html>