Chatbot_ScrollBack_Davinci2.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Chatbot</title>
  </head>
  <body>
    <div>
      <textarea id="message-box" rows="10" cols="50" readonly></textarea>
    </div>
    <div>
      <textarea id="message-input" rows="5" cols="50"></textarea>
      <button id="send-button">Send</button>
    </div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  const OPENAI_API_KEY = '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';
  const PROXY_URL = 'https://api.openai.com/v1';
  const MAX_LINES = 2048;
  const GPT_MODEL = 'text-davinci-003';

  function sendMessage() {
    const messageInput = document.getElementById('message-input');
    const messageBox = document.getElementById('message-box');
    const message = messageInput.value.trim();

    if (!message) {
      return;
    }

    messageInput.value = '';
    messageBox.innerHTML += `You: ${message}\n`;

    const prompt = `${message}\nAI:`;

    $.ajax({
      url: `${PROXY_URL}/engines/${GPT_MODEL}/completions`,
      type: 'POST',
      beforeSend: function (xhr) {
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Authorization', `Bearer ${OPENAI_API_KEY}`);
      },
      data: JSON.stringify({
        prompt: prompt,
        max_tokens: 2048,
        temperature: 1,
        n: 25,
        stop: 'AI:',
      }),
    })
      .done(function (response) {
        const answer = response.choices[0].text.trim();

        messageBox.innerHTML += `AI: ${answer}\n`;

        // Limit the number of lines in the message box
        const lines = messageBox.value.split('\n');
        if (lines.length > MAX_LINES) {
          messageBox.value = lines.slice(lines.length - MAX_LINES).join('\n');
        }

        // Scroll to the bottom of the message box
        messageBox.scrollTop = messageBox.scrollHeight;
      })
      .fail(function (jqXHR, textStatus, errorThrown) {
        console.error(`Request failed: ${textStatus}, ${errorThrown}`);
      });
  }

  document.addEventListener('DOMContentLoaded', function () {
    const sendButton = document.getElementById('send-button');
    sendButton.addEventListener('click', sendMessage);

    const messageInput = document.getElementById('message-input');
    messageInput.addEventListener('keydown', function (event) {
      if (event.shiftKey && event.keyCode === 13) {
        // Shift + Enter
        return;
      }

      if (event.keyCode === 13) {
        // Enter
        event.preventDefault();
        sendMessage();
      }
    });

    const messageBox = document.getElementById('message-box');
    messageBox.addEventListener('wheel', function (event) {
    if (event.deltaY < 0) {
      // Scrolling up
      messageBox.scrollTop -= 10;
    } else {
      // Scrolling down
      messageBox.scrollTop += 10;
    }
  });
});
</script>

</body>
</html>