chatgptApi 文档使用以及 Demo演示_chatgpt demo

2401_85123379

于 2024-06-24 14:15:41 发布

阅读量302

点赞数 5

文章标签： chatgpt

本文链接：https://blog.csdn.net/2401_85123379/article/details/139924840

版权

四、接口示例

该接口功能较多，支持最常用的问答功能。

（1）请求方式，Post

（2）url：https://api.openai.com/v1/completions

（3）请求体 (json)。

{
  "model": "text-davinci-003",
  "prompt": "Say this is a test",
  "max_tokens": 7,
  "temperature": 0,
  "top_p": 1,
  "n": 1,
  "stream": false
}

（4）接口文档 https://platform.openai.com/docs/api-reference/completions/create

请求参数解析：

五、JavaScript调用API

下面直接可以使用js+html开发一个对话，具体的源码demo:如下：

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Ai - Chat</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .chatgptMain{
            padding: 0 20px;
        }
        #chatgpt-response {
            font-family: "宋体";
            font-size: 20px;
            color: #0000FF;
            font-weight: bold;
        }
    </style>
    <script>
        async function callCHATGPT() {
            var responseText1 = document.getElementById("chatgpt-response");
            responseText1.innerHTML = ""

            function printMessage(message) {
               var responseText = document.getElementById("chatgpt-response");
               var index = 0;

               // 创建一个定时器，每隔一段时间打印一个字符
               var interval = setInterval(function() {
                    responseText.innerHTML += message[index];
                    index++;

                    // 当打印完成时，清除定时器
                    if (index >= message.length) {
                        clearInterval(interval);
                    }
                  },
                150); // 每隔50毫秒打印一个字符
            }
            var xhr = new XMLHttpRequest();
            var url = "https://api.openai.com/v1/completions";
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.setRequestHeader("Authorization", "Bearer 你自己的key");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                  var json = JSON.parse(xhr.responseText);
                  var response = json.choices[0].text;

                // 将CHATGPT的返回值输出到文本框
                var responseText = document.getElementById("chatgpt-response");
                var index = 0;

                // 创建一个定时器，每隔一段时间打印一个字符
                var interval = setInterval(function() {
                        responseText.innerHTML += response[index];
                        index++;

                        // 当打印完成时，清除定时器
                        if (index >= response.length) {
                           clearInterval(interval);
                        }
                    },
                    50); // 每隔50毫秒打印一个字符
               }
            };

            var data = JSON.stringify({
               "prompt": document.getElementById("chat-gpt-input").value,
               "max_tokens": 2048,
               "temperature": 0.5,
               "top_p": 1,
               "frequency_penalty": 0,
               "presence_penalty": 0,
               "model": "text-davinci-003"
            });
            console.log(data);
            await printMessage('正在思考，请等待......');
            await xhr.send(data);
         }
    </script>
</head>

<body>
    <div class="chatgptMain">
        <div class="filter-menu text-center mb-40">
            <h4>与Ai对话，请描述您的需求-支持中文、英语、日本语等</h4>
        </div>
#### 结束  

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！



![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)