make it so when they are asking the question and say stop make the ai analayse the image and anserr the users question if it cant find what is looking for in the image it willl still anaswer it, we will use the google gemani api ai: const fs = require('fs');

const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });

const imageParts = [
  {
    inlineData: {
      data: fs.readFileSync("image.jpg", {encoding: 'base64'}),
      mimeType: "image/jpeg"
    }
  },
];

const result = await model.generateContent(["Describe this image:", ...imageParts]);
console.log(result.response.text()); the code Is from gogole gemani source code how to do image analsys just emerge it when with our code I will insert the api key just tell me where like #api key here, 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);
    }
    .image-tab {
      display: flex;
      align-items: center;
      padding: 6px 10px;
      cursor: pointer;
      border-radius: 3px;
      transition: background-color 0.1s;
      user-select: none;
      font-size: 14px;
    }
    .image-tab:hover {
      background-color: rgba(55, 53, 47, 0.08);
    }
    .image-tab .star-icon {
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sidebar">
      <div class="logo">Voice Test</div>
      <div class="image-tab">
        <span class="star-icon">★</span>
        Images
      </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 "ahmed". When detected, it will take a screenshot of your shared screen and display it in the Images section below. Please make sure to share your screen before activating with "ahmed".
      </p>
      <div id="output">Waiting for "ahmed" to be said...</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 = 'ahmed';
    const STOP_PHRASE = 'stop';
    // ---------------------------------------------------

    let mediaRecorder;
    let audioChunks = [];
    let isListening = false;
    let transcription = '';

    let sharedStream = null;
    const videoElement = document.getElementById('shared-screen-video');

    function initializeMedia() {
      navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream);
        
        mediaRecorder.onstart = () => {
          audioChunks = [];
          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' });
          sendAudioToGroq(audioBlob);
        };

        startListening();
      })
      .catch(error => {
        console.error('Error accessing microphone', error);
        document.getElementById('output').innerText = 'Error accessing microphone: ' + error.message;
      });
    }

    function startListening() {
      if (mediaRecorder && mediaRecorder.state !== "recording") {
        mediaRecorder.start();
        setTimeout(() => {
          if (mediaRecorder.state === "recording") {
            mediaRecorder.stop();
            startListening();
          }
        }, 5000);
      }
    }

    function sendAudioToGroq(audioBlob) {
      const formData = new FormData();
      formData.append('file', audioBlob, 'audio.webm');
      formData.append('model', 'distil-whisper-large-v3-en');

      fetch('https://api.groq.com/openai/v1/audio/transcriptions', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer ' + API_KEY
        },
        body: formData
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok: ' + response.statusText);
        }
        return response.json();
      })
      .then(data => {
        if (data.text) {
          handleTranscription(data.text);
        } 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 handleTranscription(text) {
      const lowerText = text.toLowerCase();
      
      if (lowerText.includes(TRIGGER_PHRASE)) {
        if (!sharedStream) {
          document.getElementById('output').innerText = 'Please share your screen first before saying "ahmed".';
          return;
        }
        if (!isListening) {
          isListening = true;
          transcription = '';
          captureScreenshot();
          document.getElementById('output').innerText = 'Activated! Please ask your question to the AI.';
        }
      } else if (isListening) {
        if (lowerText.includes(STOP_PHRASE)) {
          isListening = false;
          document.getElementById('output').innerText = 'AI is thinking...';
          // Here you would typically send the transcription to an AI for processing
          console.log('Full transcription:', transcription);
          // Reset transcription for next round
          transcription = '';
        } else {
          transcription += ' ' + text;
          document.getElementById('output').innerText = transcription.trim();
        }
      }
    }

    function captureScreenshot() {
      if (!sharedStream) {
        alert('Please share your screen first by clicking the "Share Screen" button.');
        return;
      }

      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);

      canvas.toBlob(blob => {
        const imgURL = URL.createObjectURL(blob);

        const screenshotDiv = document.createElement('div');
        screenshotDiv.classList.add('screenshot');

        const imgElement = document.createElement('img');
        imgElement.src = imgURL;
        imgElement.alt = 'Screenshot on "ahmed" command';

        screenshotDiv.appendChild(imgElement);

        document.getElementById('images').appendChild(screenshotDiv);

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

        imgElement.onload = () => {
          URL.revokeObjectURL(imgURL);
        };
      }, 'image/png');
    }

    function shareScreen() {
      if (sharedStream) {
        stopScreenSharing();
        return;
      }

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

        stream.getVideoTracks()[0].addEventListener('ended', () => {
          stopScreenSharing();
        });

        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 stopScreenSharing() {
      if (sharedStream) {
        sharedStream.getTracks().forEach(track => track.stop());
        sharedStream = null;
        videoElement.srcObject = null;

        const shareBtn = document.getElementById('share-screen-btn');
        shareBtn.classList.remove('active');
        shareBtn.innerText = 'Share Screen';

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

    window.addEventListener('DOMContentLoaded', () => {
      initializeMedia();
      document.getElementById('share-screen-btn').addEventListener('click', shareScreen);
    });
  </script>
</body>
</html> write the full complete code now and dont add comment saying add this here no write the full code