写一个调用chatgpt ai的网站源码
以下是一个简单的网站源码示例,用于调用ChatGPT AI模型:
- HTML文件(index.html):
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT AI Demo</title>
</head>
<body>
<h1>ChatGPT AI Demo</h1>
<div id="chat-container">
<div id="chat-log"></div>
<input type="text" id="user-input" placeholder="输入消息..." />
<button id="send-button" onclick="sendMessage()">发送</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
- JavaScript文件(script.js):
$(document).ready(function() {
// ChatGPT API URL
const apiUrl = 'https://api.openai.com/v1/engines/davinci-codex/completions';
// Replace with your OpenAI API key
const apiKey = 'YOUR_API_KEY';
// Chat log container
const chatLog = $('#chat-log');
// Send user message to ChatGPT
function sendMessage() {
const userInput = $('#user-input').val();
if (userInput.trim() === '') {
return;
}
// Add user message to chat log
chatLog.append('<div class="user-message">' + userInput + '</div>');
// Clear user input
$('#user-input').val('');
// Call ChatGPT API
$.ajax({
url: apiUrl,
type: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiKey
},
data: JSON.stringify({
'prompt': userInput,
'max_tokens': 50 // Adjust as needed
}),
success: function(response) {
const chatGptResponse = response.choices[0].text.trim();
// Add ChatGPT response to chat log
chatLog.append('<div class="chatgpt-message">' + chatGptResponse + '</div>');
// Scroll to bottom of chat log
chatLog.scrollTop(chatLog[0].scrollHeight);
},
error: function() {
alert('Error calling the ChatGPT API.');
}
});
}
// Register enter key press event
$('#user-input').keypress(function(event) {
if (event.which === 13) {
sendMessage();
}
});
});
请注意,此源码示例仅提供了一个基本的前端实现,您需要将其中的YOUR_API_KEY替换为您自己的OpenAI API密钥,并确保已在OpenAI平台上创建了ChatGPT AI模型。此外,还应根据需要进行样式和布局的自定义
原文地址: https://www.cveoy.top/t/topic/iKlv 著作权归作者所有。请勿转载和采集!