JavaScript function to explain selected text on the page using GPT 3.5

explain-selected.js

(function() {
  const OPENAI_API_KEY = 'sk-...';
  let selectedText = window.getSelection().toString().trim();
  if (selectedText.length > 0) {
    let body = JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [{role: 'system', content: 'explain this succinctly' },{ role: 'user', content: selectedText }]
    });
    fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${OPENAI_API_KEY}`
      },
      body: body
    })
    .then(response => response.json())
    .then(data => {
      let responseBox = document.createElement('div');
      responseBox.style.width = '300px';
      responseBox.style.backgroundColor = 'white';
      responseBox.style.padding = '5px';
      responseBox.style.border = '1px solid black';
      responseBox.style.position = 'fixed';
      responseBox.style.top = '10px';
      responseBox.style.right = '10px';
      let closeButton = document.createElement('button');
      closeButton.innerHTML = 'X';
      closeButton.onclick = () => { document.body.removeChild(responseBox); };
      responseBox.appendChild(document.createTextNode(data.choices[0].message.content));
      responseBox.appendChild(closeButton);
      document.body.appendChild(responseBox);
    });
  }
})();