<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.chat-container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.chat-bubble {
background-color: #f0f0f0;
padding: 10px 15px;
margin-bottom: 10px;
border-radius: 5px;
}
.user-bubble {
background-color: #c3e1fc;
text-align: right;
}
input[type="text"] {
width: calc(100% - 50px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style></head>
<body>
<div class="container">
<h1>ChatGPT</h1>
<div class="chat-container">
<div class="chat-bubble user-bubble">
Hi there, how can I help you today?
</div>
<div class="chat-bubble">
Well, I'm looking for some information on AI chatbots.
</div>
</div>
<form id="chat-form">
<input type="text" id="user-input" placeholder="Type your message...">
<input type="submit" value="Send">
</form>
</div>
<script>
document.getElementById('chat-form').addEventListener('submit', function(e) {
e.preventDefault();
var userInput = document.getElementById('user-input').value;
var userBubble = document.createElement('div');
userBubble.classList.add('chat-bubble', 'user-bubble');
userBubble.textContent = userInput;
document.querySelector('.chat-container').appendChild(userBubble);
document.getElementById('user-input').value = '';
// Make a request to the ChatGPT API to get the response
fetch('https://api.chatgpt.com/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: userInput })
})
.then(response => response.json())
.then(data => {
var chatBubble = document.createElement('div');
chatBubble.classList.add('chat-bubble');
chatBubble.textContent = data.message;
document.querySelector('.chat-container').appendChild(chatBubble);
});
});
</script></body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<div class="chat-log" id="chat-log">
<div class="chat-message">
<div class="sender">ChatGPT</div>
<div class="message">Hello there! How can I help you today?</div>
</div>
</div>
<div class="chat-input">
<input type="text" id="user-input" placeholder="Type your message...">
<button id="send-button">Send</button>
</div></div>
<script>
const chatLog = document.getElementById('chat-log');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
sendButton.addEventListener('click', () => {
const userMessage = userInput.value;
const userChatMessage = document.createElement('div');
userChatMessage.classList.add('chat-message');
userChatMessage.innerHTML = `
<div class="sender">You</div>
<div class="message">${userMessage}</div>
`;
chatLog.appendChild(userChatMessage);
// Call ChatGPT API to get response
fetch('https://api.chatgpt.com/ask', {
method: 'POST',
body: JSON.stringify({ message: userMessage }),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
const { message } = data;
const chatGPTMessage = document.createElement('div');
chatGPTMessage.classList.add('chat-message');
chatGPTMessage.innerHTML = `
<div class="sender">ChatGPT</div>
<div class="message">${message}</div>
`;
chatLog.appendChild(chatGPTMessage);
})
});</script>
</body>
</html>
仿chatgpt网页源码 发布者：luotuoemo，转转请注明出处：https://www.chatairc.com/34664/
