`data/artifacts/1fd68f0d37b7/hf-qwen-coder-32b.html`

88 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #282c34; color: white; font-family: Arial, sans-serif; }
        canvas { border: 1px solid white; }
        button { position: absolute; top: 10px; right: 10px; background: none; border: none; color: inherit; cursor: pointer; font-size: 16px; }
    </style>
</head>
<body>
    <canvas id="visualizer" width="800" height="400"></canvas>
    <button onclick="toggleTheme()">Toggle Theme</button>
    <script>
        const canvas = document.getElementById('visualizer');
        const ctx = canvas.getContext('2d');
        let themeLight = false;

        function toggleTheme() {
            themeLight = !themeLight;
            document.body.style.backgroundColor = themeLight ? '#ffffff' : '#282c34';
            document.body.style.color = themeLight ? '#000000' : '#ffffff';
            ctx.fillStyle = themeLight ? '#000000' : '#ffffff';
        }

        async function initAudio() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                const audioContext = new AudioContext();
                const source = audioContext.createMediaStreamSource(stream);
                const analyser = audioContext.createAnalyser();
                source.connect(analyser);

                analyser.fftSize = 256;
                const bufferLength = analyser.frequencyBinCount;
                const dataArray = new Uint8Array(bufferLength);

                function draw() {
                    requestAnimationFrame(draw);
                    analyser.getByteFrequencyData(dataArray);
                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                    // Frequency bars
                    const barWidth = (canvas.width / bufferLength) * 2.5;
                    let barHeight;
                    let x = 0;

                    for(let i = 0; i < bufferLength; i++) {
                        barHeight = dataArray[i] / 2;
                        ctx.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight);
                        x += barWidth + 1;
                    }

                    // Waveform
                    analyser.getByteTimeDomainData(dataArray);
                    ctx.beginPath();
                    const sliceWidth = canvas.width * 1.0 / bufferLength;
                    let y;

                    for(let i = 0; i < bufferLength; i++) {
                        y = dataArray[i] / 128.0 * canvas.height / 2;

                        if(i === 0) {
                            ctx.moveTo(x, y);
                        } else {
                            ctx.lineTo(x, y);
                        }

                        x += sliceWidth;
                    }

                    ctx.lineWidth = 2;
                    ctx.strokeStyle = '#ffcc5c';
                    ctx.stroke();
                }

                draw();
            } catch (err) {
                ctx.font = '20px Arial';
                ctx.fillText('Microphone permission denied.', canvas.width / 4, canvas.height / 2);
            }
        }

        initAudio();
    </script>
</body>
</html>