Simple GPT html client

<!DOCTYPE html>
<html>
<head>
  <title>OpenAI Chat Interface</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>OpenAI Chat Interface</h1>

  <div id="chat-container">
    <div id="chat-log"></div>
    <input type="text" id="user-input" placeholder="Type your message...">
    <button id="send-btn">Send</button>
  </div>

  <script>
    $(document).ready(function() {
      const API_ENDPOINT = 'https://api.openai.com/v1/chat/completions';
      const MODEL = 'gpt-3.5-turbo'; //or if you have access to 'gpt-4'

      function sendMessage() {
        const userInput = $('#user-input').val();
        if (userInput.trim() === '') {
          return;
        }

        $('#chat-log').append('<p><strong>You:</strong> ' + userInput + '</p>');
        $('#user-input').val('');

        $.ajax({
          url: API_ENDPOINT,
          type: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer YOUR_API_KEY'
          },
          data: JSON.stringify({
            model: MODEL,
            messages: [{ role: 'system', content: 'You are a helpful assistant.' }, { role: 'user', content: userInput }]
          }),
          success: function(response) {
            const answer = response.choices[0].message.content;
            $('#chat-log').append('<p><strong>Assistant:</strong> ' + answer + '</p>');
          },
          error: function(xhr) {
            console.error(xhr.responseText);
          }
        });
      }

      $('#send-btn').click(sendMessage);
      $('#user-input').keypress(function(e) {
        if (e.which === 13) {
          sendMessage();
        }
      });
    });
  </script>
</body>
</html>