人机聊天界面实现代码
时间: 2023-10-26 08:10:51 浏览: 63
人机聊天界面的实现代码可以使用前端技术,例如 HTML、CSS 和 JavaScript。以下是一个简单的示例代码:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人机聊天界面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<div class="chat-history">
<div class="chat-message bot-message">
<p>你好,我是人工智能小助手,请问有什么需要帮助的?</p>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="请输入消息...">
<button>发送</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.chat-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.chat-message {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.bot-message {
background-color: #eee;
}
.user-message {
background-color: #337ab7;
color: #fff;
align-self: flex-end;
}
.chat-input {
display: flex;
margin-top: 20px;
}
.chat-input input {
flex-grow: 1;
padding: 10px;
border-radius: 5px 0 0 5px;
border: none;
}
.chat-input button {
padding: 10px;
border-radius: 0 5px 5px 0;
border: none;
background-color: #337ab7;
color: #fff;
cursor: pointer;
}
```
JavaScript:
```javascript
const messageInput = document.querySelector('.chat-input input');
const sendMessage = document.querySelector('.chat-input button');
const chatHistory = document.querySelector('.chat-history');
sendMessage.addEventListener('click', function() {
const messageContent = messageInput.value;
if (messageContent.trim() !== '') {
const userMessage = createMessage(messageContent, 'user');
chatHistory.appendChild(userMessage);
messageInput.value = '';
sendBotMessage(messageContent);
}
});
function sendBotMessage(messageContent) {
const botMessage = createMessage('正在处理中...', 'bot');
chatHistory.appendChild(botMessage);
// 调用接口获取 AI 回复的消息
// 此处省略实现
setTimeout(function() {
const aiMessage = createMessage('AI 回复的消息', 'bot');
chatHistory.removeChild(botMessage);
chatHistory.appendChild(aiMessage);
}, 1000);
}
function createMessage(messageContent, messageType) {
const message = document.createElement('div');
message.classList.add('chat-message');
message.classList.add(messageType + '-message');
const messageText = document.createElement('p');
messageText.textContent = messageContent;
message.appendChild(messageText);
return message;
}
```
以上代码实现了一个简单的人机聊天界面,用户输入消息后,界面会显示用户发送的消息,并模拟调用接口获取 AI 回复的消息并显示在界面上。