html JavaScript 调用chatgpt api

要在HTML和JavaScript中调用OpenAI的ChatGPT API，你需要一个有效的API密钥。以下是一个简单的示例，展示了如何使用JavaScript发送请求到ChatGPT API。

首先，你需要在OpenAI的网站上创建一个新的API密钥。

然后，你可以创建一个HTML文件，并在其中使用JavaScript代码来发送请求：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChatGPT Example</title>
    <script>
        function sendMessageToGPT() {
            const apiKey = 'YOUR_OPENAI_API_KEY'; // 替换为你的API密钥
            const messages = [
                { role: 'user', content: document.getElementById('userInput').value }
            ];
 
            fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${apiKey}`
                },
                body: JSON.stringify({
                    messages,
                    model: "gpt-3.5-turbo",
                    temperature: 0.7
                })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('botResponse').value = data.choices[0].message.content;
            })
            .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <textarea id="userInput" placeholder="Enter your message here..."></textarea>
    <button onclick="sendMessageToGPT()">Send to GPT</button>
    <textarea id="botResponse" placeholder="GPT will respond here..." readonly></textarea>
</body>
</html>

在上面的代码中，替换YOUR_OPENAI_API_KEY为你的API密钥。用户在textarea输入消息，点击按钮后，消息通过sendMessageToGPT函数发送到ChatGPT API，并将返回的响应显示在另一个textarea中。

注意：由于API使用频率和text-input的长度，OpenAI可能对请求频率有限制。在实际应用中，你可能需要实现更复杂的逻辑，比如缓存和限流，以确保遵守使用条款并保持应用的稳定性。

html JavaScript 调用chatgpt api

评论已关闭

推荐阅读