使用ghatgpt的api

Su_Backy

已于 2023-03-04 18:35:35 修改

阅读量453

点赞数

文章标签： xhtml javascript oneapi

于 2023-03-04 18:34:55 首次发布

本文链接：https://blog.csdn.net/fathaozzha/article/details/129337628

版权

该文章提供了一个简单的HTML和JavaScript实现的ChatGPT聊天室示例。用户通过输入消息，使用OpenAIAPI获取回复，并在页面上展示交互过程。代码包括设置请求头以授权OpenAI的API调用以及处理用户输入和显示AI响应的逻辑。

摘要由CSDN通过智能技术生成

1、搭梯子
2、注册openai，获取keys
3、将key填到你的key里面xhr.setRequestHeader('Authorization', 'Bearer 你的keys');

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <style>
      #messages {
        /* min-width: 209px; */
        max-width: 500px;
        border: 1px solid;
        border-radius: 0 20px 0 0;
        padding: 20px;
        margin-bottom: 10px;
      }
      pre {
        border-bottom: 1px solid;
      }
      code {
        overflow: auto;
        display: block;
      }
      .header {
        text-align: center;
        border-bottom: 1px solid;
      }
      #message-form {
        display: flex;
      }
      #message-input {
        width: 467px;
        height: 30px;
      }
      #submit-button {
        width: 70px;
        height: 35px;
      }
      .loader {
        position: absolute;
        border: 4px solid transparent;
        border-top-color: #3f51b5;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

    </style>
  </head>
  <body>
    <h1>chatgpt-聊天室</h1>
    <div id="messages">
      <div class="header">消息</div>
    </div>
    <form id="message-form">
      <textarea type="text" id="message-input" placeholder="输入消息..."></textarea>
      <button type="submit" id="submit-button">
        <span id="submit-span"></span>
        发送
      </button>
    </form>
    <!-- <script src="app.js"></script> -->
    <script type="text/javascript">
      (function () {
        var messagesEl = document.getElementById('messages');
        var messageFormEl = document.getElementById('message-form');
        var messageInputEl = document.getElementById('message-input');

        const submitSpan = document.getElementById("submit-span");
        const submitButton = document.getElementById("submit-button");
        messageFormEl.addEventListener('submit', function (event) {
          submitButton.disabled = true;
          submitSpan.setAttribute("class", "loader");
          event.preventDefault();
          var message = messageInputEl.value;
          messagesEl.innerHTML += '<div><strong>我</strong>: ' + message + '</div>';
          messageInputEl.value = '';
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
              submitButton.disabled = false;
              submitSpan.removeAttribute("class");
              if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                messagesEl.innerHTML += '<pre><strong>AI</strong>: <code class="language-test">' + response.choices[0].text + '</code></pre>';
              } else {
                console.error('获取chatgpt回复失败');
              }
            }
          };
          xhr.open('POST', 'https://api.openai.com/v1/completions', true);
          xhr.setRequestHeader('Content-Type', 'application/json');
          xhr.setRequestHeader('Authorization', 'Bearer KEY');
          xhr.send(JSON.stringify(
            {
              model: "text-davinci-003",
              prompt: message,
              max_tokens: 1000,
              temperature: 0,
              top_p: 1,
              n: 1,
              stream: false
            }
          ));
        });
      })();
    </script>
  </body>
</html>