make it now connect it to the google gemani api ai and make it so when the image is screenshot the user can tell the ai which is ogoogle gemani api ai like translate the image to arabic, make flashcards, etc...so basiclly gogle gemani api we will use vison will extract the text and then based onn the user, so basically when they screenshot the user can ask automatically then there question will be sent when they say "stop", there will be a seciton where called ai which will show the user the ai answer it came up with, they can also view previous chat with the ai, now write the full code: <!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: #fbfbfa;
      padding: 14px;
      box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .sidebar .logo {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 20px;
      padding: 4px 10px;
    }
    .menu-item {
      padding: 6px 10px;
      cursor: pointer;
      border-radius: 3px;
      transition: background-color 0.1s;
      user-select: none;
      font-size: 14px;
    }
    .menu-item:hover {
      background-color: rgba(55, 53, 47, 0.08);
    }
    .menu-item.active {
      background-color: rgba(55, 53, 47, 0.08);
    }
    .content {
      flex-grow: 1;
      padding: 60px 96px;
      overflow-y: auto;
      box-sizing: border-box;
    }
    h1 {
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 20px;
      line-height: 1.2;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
      color: #37352f;
      margin-bottom: 16px;
    }
    #output {
      margin-top: 20px;
      padding: 16px;
      border: 1px solid rgba(55, 53, 47, 0.16);
      border-radius: 3px;
      background-color: #fbfbfa;
      min-height: 50px;
      font-size: 14px;
    }
    #images {
      margin-top: 40px;
    }
    #images h2 {
      font-size: 30px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .screenshot {
      margin-bottom: 20px;
      border: 1px solid rgba(55, 53, 47, 0.16);
      padding: 12px;
      border-radius: 3px;
      background-color: #fbfbfa;
    }
    .screenshot img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    #share-screen-btn {
      padding: 6px 10px;
      cursor: pointer;
      border-radius: 3px;
      transition: background-color 0.1s;
      user-select: none;
      background-color: #fbfbfa;
      color: #37352f;
      text-align: left;
      font-size: 14px;
      border: none;
      width: 100%;
      margin-top: auto;
    }
    #share-screen-btn:hover {
      background-color: rgba(55, 53, 47, 0.08);
    }
    #share-screen-btn.active {
      background-color: rgba(55, 53, 47, 0.08);
    }
  </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>
      <button id="share-screen-btn">Share Screen</button>
    </div>
    <div class="content">
      <h1>Voice Activation Test</h1>
      <p>
        This page listens for you to say "hello". 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>

  <script>
    // ------------------ Configuration ------------------
    // Replace with your actual Groq API key
    const API_KEY = '<TRUFFLEHOG_REDACTED_GROQ>';  // <-- PUT YOUR API KEY HERE
    const TRIGGER_PHRASE = 'hello'; // Updated trigger phrase to "hello"
    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 "hello" 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>