Giao diện ChatGPT đẹp nâng cao: index.html
Dưới đây là một ví dụ về phần index.html của ChatGPT với giao diện đẹp nâng cao:
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.chat-log {
height: 300px;
overflow-y: scroll;
border: 1px solid #cccccc;
padding: 10px;
}
.user-message {
background-color: #e6f2ff;
border-radius: 5px;
padding: 5px;
margin-bottom: 10px;
}
.assistant-message {
background-color: #f5f5f5;
border-radius: 5px;
padding: 5px;
margin-bottom: 10px;
}
.input-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.input-container input {
flex-grow: 1;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
}
.input-container button {
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-left: 10px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<h1>ChatGPT</h1>
<div class="chat-log" id="chat-log"></div>
<div class="input-container">
<input type="text" id="user-input" placeholder="Type your message..."/>
<button onclick="sendMessage()">Send</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();
getAssistantReply(message);
}
}
function appendUserMessage(message) {
const userMessageContainer = document.createElement('div');
userMessageContainer.classList.add('user-message');
userMessageContainer.textContent = message;
chatLog.appendChild(userMessageContainer);
}
function appendAssistantMessage(message) {
const assistantMessageContainer = document.createElement('div');
assistantMessageContainer.classList.add('assistant-message');
assistantMessageContainer.textContent = message;
chatLog.appendChild(assistantMessageContainer);
}
function scrollToBottom() {
chatLog.scrollTop = chatLog.scrollHeight;
}
function getAssistantReply(userMessage) {
// Gửi yêu cầu API để nhận phản hồi từ trợ lý ở đây
// Ví dụ: fetch('/assistant', { method: 'POST', body: JSON.stringify({ message: userMessage }) })
// .then(response => response.json())
// .then(data => appendAssistantMessage(data.message))
// .catch(error => console.error(error));
// Ví dụ: Phản hồi ngẫu nhiên từ trợ lý
const assistantReplies = ['Hello!', 'How can I assist you?', 'Nice to meet you!'];
const randomIndex = Math.floor(Math.random() * assistantReplies.length);
const assistantReply = assistantReplies[randomIndex];
appendAssistantMessage(assistantReply);
}
</script>
</body>
</html>
Đoạn mã trên tạo một giao diện đơn giản cho ChatGPT với các phần tử HTML và CSS. Khi người dùng nhập tin nhắn và nhấn 'Send', tin nhắn sẽ được gửi đến trợ lý ảo (tạm thời được mô phỏng bằng cách chọn ngẫu nhiên một phản hồi từ một danh sách). Phản hồi từ trợ lý sẽ được hiển thị trong hộp thoại chat.
Lưu ý rằng đây chỉ là một giao diện đơn giản và bạn cần thay thế phần gửi yêu cầu API (trong hàm getAssistantReply) bằng mã thực tế để gửi tin nhắn từ người dùng và nhận phản hồi từ trợ lý thông qua API.
原文地址: https://www.cveoy.top/t/topic/o7iL 著作权归作者所有。请勿转载和采集!