chatgpt-chat-api.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <main>
      <h2>ChatGPT の Chat completions API</h2>
      <p>
        <a href="https://platform.openai.com/docs/guides/chat"
          >API ドキュメント</a
        ><br />
        OpenAI で API キーを発行してソースコードに埋め込んでください
      </p>
      <input type="text" name="talk" />
      <button type="button" class="send">送信</button>
      <div class="output"></div>
    </main>
    <script>
      // TODO:
      const api_key = "<発行した API キーを入力してください";

      const sendButton = document.querySelector(".send");
      sendButton.addEventListener("click", async () => {
        const text = document.querySelector("[name=talk]");
        const responseText = await requestChatAPI(text.value);
        const output = document.querySelector(".output");
        output.textContent = responseText;
      });

      async function requestChatAPI(text) {
        const headers = {
          "Content-Type": "application/json",
          Authorization: `Bearer ${api_key}`,
        };

        const messages = [
          {
            role: "user",
            content: text,
          },
        ];

        const payload = {
          model: "gpt-3.5-turbo",
          max_tokens: 128,
          messages: messages,
        };
        const response = await axios.post(
          "https://api.openai.com/v1/chat/completions",
          payload,
          {
            headers: headers,
          }
        );
        return response.data.choices[0].message.content;
      }
    </script>
  </body>
</html>