Also make the code word instead "image" only one word image right now the code word is very long 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>