static/index.html

<!DOCTYPE html>
<html>
<body style="background:#000; color:#0f0; font-family:monospace;">
    <h2>JARVIS LIVE</h2>
    <div id="log" style="height:200px; overflow-y:auto; border:1px solid #0f0; padding:10px;"></div>
    <input id="in" style="background:#000; color:#0f0; border:1px solid #0f0; width:80%;">
    <button onclick="send()">TRANSMIT</button>

    <script>
        const ctx = new (window.AudioContext || window.webkitAudioContext)({sampleRate: 24000});
        const ws = new WebSocket((location.protocol === 'https:' ? 'wss:' : 'ws:') + '//' + location.host + '/ws/chat');
        ws.binaryType = 'arraybuffer';
        let nextTime = 0;

        ws.onmessage = (e) => {
            const data = new Float32Array(e.data);
            const buf = ctx.createBuffer(1, data.length, 24000);
            buf.copyToChannel(data, 0);
            const src = ctx.createBufferSource();
            src.buffer = buf;
            src.connect(ctx.destination);
            const start = Math.max(ctx.currentTime, nextTime);
            src.start(start);
            nextTime = start + buf.duration;
            document.getElementById('log').innerHTML += "<div>Audio Chunk Streamed</div>";
        };

        function send() {
            const msg = document.getElementById('in').value;
            ws.send(msg);
            document.getElementById('in').value = '';
        }
    </script>
</body>
</html>