<!DOCTYPE html>
<html>
<head>
<title>ChatGPT Online Chat</title>
<script src="https://cdn.jsdelivr.net/npm/@openai/chatgpt"></script>
<style>
#chat-container {
width: 500px;
margin: 0 auto;
}
#chat-history {
border: 1px solid #ccc;
height: 300px;
overflow-y: scroll;
padding: 10px;
}
#user-input {
margin-top: 10px;
}
</style></head>
<body>
<div id="chat-container">
<div id="chat-history"></div>
<div id="user-input">
<input type="text" id="user-message" />
<button onclick="sendMessage()">Send</button>
</div>
</div>
<script>
const chatHistory = document.getElementById('chat-history');
const chatGPT = new gpt.ChatGPTAPI({
apiKey: 'YOUR_API_KEY',
});
async function sendMessage() {
const userInput = document.getElementById('user-message').value;
addMessageToChat(userInput, 'user');
const chatGPTResponse = await chatGPT.sendMessage(userInput);
addMessageToChat(chatGPTResponse, 'bot');
}
function addMessageToChat(message, sender) {
const messageDiv = document.createElement('div');
messageDiv.innerHTML = message;
messageDiv.classList.add(`${sender}-message`);
chatHistory.appendChild(messageDiv);
}
</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT Online Chat</title>
<style>
/* Add your custom CSS styles here */
</style></head>
<body>
<div id="chat-window">
<!-- Chat messages will be displayed here -->
</div>
<input type="text" id="user-input" placeholder="Type your message...">
<button id="send-btn">Send</button>
<script>
// Add your JavaScript code here
</script></body>
</html>
chatgpt在线聊天网页源码 发布者：luotuoemo，转转请注明出处：https://www.chatairc.com/35050/
