下面是一个简单的ChatGPT聊天界面的HTML示例：
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT 聊天界面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.chat-log {
height: 400px;
overflow-y: scroll;
padding: 10px;
border: 1px solid #ccc;
}
.user-message, .bot-message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.user-message {
background-color: #dcf8c6;
}
.bot-message {
background-color: #f6f6f6;
}
.input-container {
margin-top: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #4caf50;
color: #ffffff;
border: none;
border-radius: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<div class="chat-log" id="chat-log"></div>
<div class="input-container">
<input type="text" id="user-input">
<button onclick="sendMessage()">发送</button>
</div>
</div>
<script>
const chatLog = document.getElementById('chat-log');
const userInput = document.getElementById('user-input');
function sendMessage() {
const message = userInput.value;
if (message.trim() !== '') {
appendUserMessage(message);
userInput.value = '';
scrollToBottom();
getBotResponse(message);
}
}
function appendUserMessage(message) {
const userMessageElement = document.createElement('div');
userMessageElement.classList.add('user-message');
userMessageElement.textContent = message;
chatLog.appendChild(userMessageElement);
}
function appendBotMessage(message) {
const botMessageElement = document.createElement('div');
botMessageElement.classList.add('bot-message');
botMessageElement.textContent = message;
chatLog.appendChild(botMessageElement);
}
function scrollToBottom() {
chatLog.scrollTop = chatLog.scrollHeight;
}
function getBotResponse(userMessage) {
// 在这里添加与ChatGPT的API交互代码，获取机器人的回复
// 然后调用appendBotMessage函数将回复添加到聊天界面中
}
</script>
</body>
</html>这个HTML文件包含一个简单的聊天界面，具有一个聊天记录框(chat-log)、一个用户输入框(user-input)和一个发送按钮。用户在输入框中输入消息，并点击发送按钮，就会调用sendMessage()函数发送消息，并将用户的消息显示在聊天记录框中。在getBotResponse()函数中，你可以添加与ChatGPT的API交互代码，获取机器人的回复，并将回复添加到聊天记录框中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT Chat Interface</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
background-color: #333;
color: white;
padding: 20px;
}
.header h1 {
margin: 0;
}
.chatbox {
flex: 1;
padding: 20px;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: #ccc #f0f0f0;
}
.chatbox::-webkit-scrollbar {
width: 8px;
}
.chatbox::-webkit-scrollbar-track {
background: #f0f0f0;
}
.chatbox::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 4px;
}
.input-area {
display: flex;
align-items: center;
padding: 20px;
background-color: #f0f0f0;
}
.input-area input {
flex: 1;
height: 40px;
padding: 10px;
border: none;
border-radius: 4px;
}
.input-area button {
height: 40px;
margin-left: 10px;
padding: 0 20px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style></head>
<body>
<div class="container">
<div class="header">
<h1>ChatGPT Chat Interface</h1>
</div>
<div class="chatbox" id="chatbox">
<!-- Chat messages will be dynamically added here -->
</div>
<div class="input-area">
<input type="text" id="userInput" placeholder="Type your message...">
<button id="sendButton">Send</button>
</div>
</div>
<script>
const chatbox = document.getElementById('chatbox');
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');
// Function to add user message to chatbox
function addUserMessage(message) {
const userMessage = document.createElement('div');
userMessage.className = 'message user';
userMessage.textContent = message;
chatbox.appendChild(userMessage);
}
// Function to add assistant message to chatbox
function addAssistantMessage(message) {
const assistantMessage = document.createElement('div');
assistantMessage.className = 'message assistant';
assistantMessage.textContent = message;
chatbox.appendChild(assistantMessage);
}
// Function to handle user input
function handleUserInput() {
const message = userInput.value;
addUserMessage(message);
// TODO: Send user message to backend for processing and get assistant's response
// Replace the following line with appropriate code to handle backend communication
const assistantResponse = "Assistant's response goes here";
addAssistantMessage(assistantResponse);
userInput.value = '';
}
// Event listener for send button click
sendButton.addEventListener('click', handleUserInput);
// Event listener for Enter key press
userInput.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
handleUserInput();
}
});
</script></body>
</html>
chatgpt聊天界面 html 发布者：luotuoemo，转转请注明出处：https://www.chatairc.com/34216/
