right now the interval is very slow I want it to be in real time speed also make the code word instead "image" also make the share screen button the same color as our current ui: <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Voice Activation Test with Screen Sharing</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);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .sidebar .logo {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .menu-item {
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s;
      user-select: none;
    }
    .menu-item:hover {
      background-color: #e9e9e7;
    }
    .menu-item.active {
      background-color: #dcdcc8;
    }
    .content {
      flex-grow: 1;
      padding: 40px;
      overflow-y: auto;
      box-sizing: border-box;
    }
    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;
    }
    /* Additional Styles for Images Section */
    #images {
      margin-top: 40px;
    }
    #images h2 {
      margin-bottom: 10px;
    }
    .screenshot {
      margin-bottom: 20px;
      border: 1px solid #ddd;
      padding: 10px;
      border-radius: 5px;
      background-color: #fafafa;
    }
    .screenshot img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    /* Style for Share Screen Button */
    #share-screen-btn {
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s;
      user-select: none;
      background-color: #4CAF50;
      color: white;
      text-align: center;
      font-size: 1em;
    }
    #share-screen-btn:hover {
      background-color: #45a049;
    }
    #share-screen-btn.active {
      background-color: #3e8e41;
    }
  </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 id="share-screen-btn">Share Screen</div> <!-- Share Screen Button -->
    </div>
    <div class="content">
      <h1>Voice Activation Test</h1>
      <p>
        This page listens for you to say "chat to do screen shot". When detected, it will take a screenshot of your shared screen and display it in the Images section below.
      </p>
      <div id="output">Transcription will appear here...</div>
      
      <div id="images">
        <h2>Images</h2>
        <!-- Screenshots will be appended here -->
      </div>
      
      <!-- Hidden Video Element to Capture Shared Screen -->
      <video id="shared-screen-video" autoplay style="display: none;"></video>
    </div>
  </div>

  <!-- Include html2canvas from CDN if still needed elsewhere -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> -->
  
  <script>
    // ------------------ Configuration ------------------
    // Replace with your actual Groq API key
    const API_KEY = '<TRUFFLEHOG_REDACTED_GROQ>';  // <-- PUT YOUR API KEY HERE
    const TRIGGER_PHRASE = 'chat'; // The phrase to listen for
    const RECORD_INTERVAL = 5000; // Recording interval in milliseconds (5 seconds)
    // ---------------------------------------------------

    let mediaRecorder;
    let audioChunks = [];

    let sharedStream = null; // To store the shared screen stream
    const videoElement = document.getElementById('shared-screen-video');

    // Initialize Media for Recording Audio
    function initializeMedia() {
      navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream);
        
        mediaRecorder.onstart = () => {
          audioChunks = []; // Clear audio chunks when recording starts
          console.log('Recording started');
        };

        mediaRecorder.ondataavailable = (event) => {
          if (event.data && event.data.size > 0) {
            audioChunks.push(event.data);
          }
        };

        mediaRecorder.onstop = () => {
          console.log('Recording stopped');
          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 (stop and start recording every RECORD_INTERVAL milliseconds)
        setInterval(() => {
          if (mediaRecorder.state === "recording") {
            mediaRecorder.stop();
          }
          if (mediaRecorder.state !== "recording") {
            mediaRecorder.start();
          }
        }, RECORD_INTERVAL); // e.g., 5000 milliseconds

        // Start recording
        mediaRecorder.start();
      })
      .catch(error => {
        console.error('Error accessing microphone', error);
        document.getElementById('output').innerText = 'Error accessing microphone: ' + error.message;
      });
    }

    // Function to send audio blob to Groq transcription API
    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 => {
        if (!response.ok) {
          throw new Error('Network response was not ok: ' + response.statusText);
        }
        return 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(TRIGGER_PHRASE)) {
            // Trigger screenshot
            captureScreenshot();
          }
        } else {
          console.error('No transcription text found in response');
        }
      })
      .catch(error => {
        console.error('Error transcribing audio:', error);
        document.getElementById('output').innerText = 'Error transcribing audio: ' + error.message;
      });
    }

    // Function to capture screenshot of the shared screen
    function captureScreenshot() {
      if (!sharedStream) {
        alert('Please share your screen first by clicking the "Share Screen" button.');
        return;
      }

      // Create a canvas to draw the video frame
      const video = document.getElementById('shared-screen-video');
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');

      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      // Convert canvas to image
      canvas.toBlob(blob => {
        const imgURL = URL.createObjectURL(blob);

        // Create a new div to hold the screenshot
        const screenshotDiv = document.createElement('div');
        screenshotDiv.classList.add('screenshot');

        // Create an image element
        const imgElement = document.createElement('img');
        imgElement.src = imgURL;
        imgElement.alt = 'Screenshot on "chat" command';

        // Append image to div
        screenshotDiv.appendChild(imgElement);

        // Append the screenshot div to the images section
        document.getElementById('images').appendChild(screenshotDiv);

        console.log('Screenshot captured and added to Images section');

        // Revoke the object URL after the image loads to free memory
        imgElement.onload = () => {
          URL.revokeObjectURL(imgURL);
        };
      }, 'image/png');
    }

    // Function to handle Screen Sharing
    function shareScreen() {
      if (sharedStream) {
        // If already sharing, stop the stream
        stopScreenSharing();
        return;
      }

      navigator.mediaDevices.getDisplayMedia({ video: true })
      .then(stream => {
        sharedStream = stream;
        videoElement.srcObject = stream;

        // Add event listener to detect when the user stops sharing
        stream.getVideoTracks()[0].addEventListener('ended', () => {
          stopScreenSharing();
        });

        // Update button styling to indicate active sharing
        const shareBtn = document.getElementById('share-screen-btn');
        shareBtn.classList.add('active');
        shareBtn.innerText = 'Stop Sharing';

        console.log('Screen sharing started');
      })
      .catch(error => {
        console.error('Error sharing screen:', error);
        alert('Error sharing screen: ' + error.message);
      });
    }

    // Function to stop Screen Sharing
    function stopScreenSharing() {
      if (sharedStream) {
        sharedStream.getTracks().forEach(track => track.stop());
        sharedStream = null;
        videoElement.srcObject = null;

        // Update button styling to indicate inactive sharing
        const shareBtn = document.getElementById('share-screen-btn');
        shareBtn.classList.remove('active');
        shareBtn.innerText = 'Share Screen';

        console.log('Screen sharing stopped');
      }
    }

    // Initialize Media on page load
    window.addEventListener('DOMContentLoaded', () => {
      initializeMedia();

      // Add event listener to Share Screen button
      document.getElementById('share-screen-btn').addEventListener('click', shareScreen);
    });
  </script>
</body>
</html> now write the full code now