作为一个js开发人员如何使用JavaScript写一个通过配置open ai key调用chatGPT30接口的网页

首先，你需要先获得OpenAI的API Key。可以在OpenAI的官网注册账号并申请API Key。
创建一个HTML网页，包含一个文本框和一个按钮，用于输入文本和触发API调用。
使用JavaScript编写代码，将输入的文本作为参数，调用OpenAI的API接口。可以使用fetch或axios等库进行调用。
接收API返回的结果，并将其展示在网页上，可以使用document.createElement和innerHTML等方法。
为了保证安全性，建议将API Key保存在服务器端，通过服务器端的调用来触发API请求，而不是直接在客户端使用API Key。

下面是一个简单的示例代码：

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <title>Chat with GPT-3</title>
</head>
<body>
    <input type="text" id="input-text">
    <button onclick="chat()">Chat</button>
    <div id="output"></div>
    <script src="chat.js"></script>
</body>
</html>

JavaScript部分：

function chat() {
    const inputText = document.getElementById("input-text").value;
    const apiKey = "your-openai-api-key";
    const url = "https://api.openai.com/v1/engines/davinci-codex/completions";
    const data = {
        "prompt": inputText,
        "max_tokens": 100,
        "temperature": 0.7
    };
    fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${apiKey}`
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        const output = document.getElementById("output");
        output.innerHTML = result.choices[0].text;
    })
    .catch(error => console.error(error));
}

在这个示例中，我们使用了fetch库来调用OpenAI的API接口，并将输入的文本作为prompt参数传递给API。API的返回结果是一个JSON格式的对象，我们从中获取了输出文本，并将其展示在网页上。你需要将"your-openai-api-key"替换为你自己的OpenAI API Key

作为一个js开发人员如何使用JavaScript写一个通过配置open ai key调用chatGPT30接口的网页