<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voice Activation Test</title>
  <style>
    body, html {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: #ffffff;
      color: #37352f;
    }
    .container {
      display: flex;
      height: 100%;
    }
    .sidebar {
      width: 240px;
      background-color: #f7f6f3;
      padding: 20px;
      box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
    }
    .content {
      flex-grow: 1;
      padding: 40px;
      overflow-y: auto;
    }
    h1 {
      font-size: 2.5em;
      font-weight: 700;
      margin-bottom: 20px;
    }
    p {
      font-size: 1em;
      line-height: 1.5;
      color: #4d4d4d;
    }
    #output {
      margin-top: 20px;
      padding: 15px;
      border: 1px solid #e0e0e0;
      border-radius: 3px;
      background-color: #f9f9f9;
      min-height: 50px;
      font-size: 0.9em;
    }
    .logo {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .menu-item {
      padding: 8px 0;
      cursor: pointer;
    }
    .menu-item:hover {
      background-color: #e9e9e7;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sidebar">
      <div class="logo">Voice Test</div>
      <div class="menu-item">Dashboard</div>
      <div class="menu-item">Settings</div>
      <div class="menu-item">Help</div>
    </div>
    <div class="content">
      <h1>Voice Activation Test</h1>
      <p>This page will listen for you to say "hey water" and respond with "hello".</p>
      <div id="output">Transcription will appear here...</div>
    </div>
  </div>
  <script>
    // Replace 'YOUR_GROQ_API_KEY' with your actual Groq API key
    const API_KEY = '<TRUFFLEHOG_REDACTED_GROQ>';  // <-- PUT YOUR API KEY HERE
    let mediaRecorder;
    let audioChunks = [];
    navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.onstart = () => {
        audioChunks = []; // Clear audio chunks when recording starts
      };
      mediaRecorder.ondataavailable = (event) => {
        if (event.data && event.data.size > 0) {
          audioChunks.push(event.data);
        }
      };
      mediaRecorder.onstop = () => {
        // When recording stops, process the audio
        let audioBlob = new Blob(audioChunks, { 'type' : 'audio/webm; codecs=opus' });
        // Now send audioBlob to Groq transcription API
        sendAudioToGroq(audioBlob);
        // audioChunks will be cleared in onstart
      };
      // Set the recording interval (e.g., stop and start recording every 5 seconds)
      setInterval(() => {
          if (mediaRecorder.state === "recording") {
              mediaRecorder.stop();
          }
          if (mediaRecorder.state !== "recording") {
              mediaRecorder.start();
          }
      }, 5000); // 5 seconds
      // Start recording
      mediaRecorder.start();
    })
    .catch(error => {
      console.error('Error accessing microphone', error);
    });
    function sendAudioToGroq(audioBlob) {
      const formData = new FormData();
      formData.append('file', audioBlob, 'audio.webm'); // Include a filename
      formData.append('model', 'distil-whisper-large-v3-en'); // Required model
      fetch('https://api.groq.com/openai/v1/audio/transcriptions', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer ' + API_KEY
          // 'Content-Type' is automatically set to 'multipart/form-data' with boundary
        },
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        // Handle the transcription result
        console.log("Transcription result:", data);
        if (data.text) {
          // Update the output div
          document.getElementById('output').innerText = data.text;
          if (data.text.toLowerCase().includes("hey water")) {
            alert("hello");
          }
        } else {
          console.error('No transcription text found in response');
        }
      })
      .catch(error => {
        console.error('Error transcribing audio:', error);
      });
    }
   
  </script>
</body>
</html> make it when I say hey water now it screen shot the screen I shared to it and is under images, now write the full complete code