make it analayse the screen from the laptop like any tab,now  and make it screenshot when someone says hey ahmed of the tab they choosen to let analsye, edit the code and write the ful complete code and dont add comment saying it here: <!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 = 'api key here';  // <-- 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 ahmed")) {
            alert("hello");
          }
        } else {
          console.error('No transcription text found in response');
        }
      })
      .catch(error => {
        console.error('Error transcribing audio:', error);
      });
    }
    // Note: Making API calls that require an API key from client-side JavaScript is insecure,
    // because the API key can be exposed. This example is for testing purposes only.
    // Additionally, the Groq API server must allow CORS requests from your domain.
    // If CORS is not enabled, the fetch request will fail due to CORS policy.
  </script>
</body>
</html>