-
Notifications
You must be signed in to change notification settings - Fork 0
/
chat.html
163 lines (163 loc) · 5.78 KB
/
chat.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden; /* 移除浏览器默认的滚动条 */
}
.chat-container {
width: 100%; /* 使用百分比宽度 */
max-width: 600px; /* 设置最大宽度 */
height: 80vh; /* 保持高度相对于视口的比例 */
border: 1px solid #ccc;
overflow-y: scroll; /* 垂直滚动 */
padding: 10px;
background-color: #f5f5f5;
box-sizing: border-box; /* 包括边框和内边距 */
margin: auto; /* 居中 */
}
.message {
margin-bottom: 10px;
clear: both; /* 清除浮动 */
font-size: 14px; /* 修改字体大小 */
display: flex; /* 使用Flexbox布局 */
align-items: flex-start; /* 顶部对齐 */
}
.message-content {
padding: 10px; /* 增加填充 */
border-radius: 5px;
max-width: 70%;
word-wrap: break-word; /* 使长词换行 */
}
.user-message {
justify-content: flex-end; /* 用户消息在右边 */
}
.user-message .message-content {
background-color: #e0f7fa;
margin-left: 10px;
}
.bot-message {
justify-content: flex-start; /* 机器人消息在左边 */
}
.bot-message .message-content {
background-color: #d0f0c0; /* 设置机器人消息框背景颜色为浅绿色 */
margin-right: 10px;
}
.input-container {
width: 100%; /* 使用百分比宽度 */
max-width: 600px; /* 设置最大宽度 */
padding: 10px;
box-sizing: border-box; /* 包括边框和内边距 */
margin: auto; /* 居中 */
display: flex; /* 水平排列 */
justify-content: space-between; /* 两端对齐 */
}
.input-container input {
width: 80%;
padding: 10px; /* 增加填充 */
font-size: 14px; /* 修改字体大小 */
box-sizing: border-box; /* 包括边框和内边距 */
}
.input-container button {
width: 20%;
padding: 10px; /* 增加填充 */
font-size: 14px; /* 修改字体大小 */
box-sizing: border-box; /* 包括边框和内边距 */
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%; /* 使头像为圆形 */
margin-right: 5px; /* 头像和文本之间的间距 */
background-size: cover; /* 使图片覆盖整个头像框 */
background-position: center; /* 使图片居中 */
background-repeat: no-repeat; /* 防止图片重复 */
}
.user-avatar {
background-image: url('F:/AIHelper/nanzhu.jpg'); /* 设置用户头像图片 */
}
.bot-avatar {
background-image: url('F:/AIHelper/nvzhu.jpg'); /* 设置机器人头像图片 */
}
</style>
<title>Chat Interface</title>
</head>
<body>
<div class="chat-container" id="chatContainer">
<!-- 对话内容将在这里动态添加 -->
</div>
<div class="input-container">
<input type="text" id="userInput" placeholder="输入消息..." onkeydown="if (event.keyCode == 13) sendMessage();">
<button onclick="sendMessage()">发送</button>
</div>
<script>
// 处理用户发送的消息
function sendMessage() {
const userInput = document.getElementById('userInput');
const message = userInput.value;
if (message.trim() !== '') {
userMessage(message);
// 发送HTTP POST请求到你的API
fetch('http://127.0.0.1:5000/chat', { // 修改了这里的URL
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: message })
})
.then(response => response.json())
.then(data => {
// 显示机器人的回复
if (data.message) {
botReply(data.message);
} else {
botReply("错误: 无法获取回复");
}
})
.catch(error => {
console.error('Error:', error);
botReply("错误: " + error);
});
userInput.value = ''; // 清空输入框
}
}
// 模拟机器人回复
function botReply(message) {
const chatContainer = document.getElementById('chatContainer');
const botMessage = document.createElement('div');
const botAvatar = document.createElement('div');
const messageContent = document.createElement('div');
botAvatar.classList.add('avatar', 'bot-avatar');
botMessage.classList.add('message', 'bot-message');
messageContent.classList.add('message-content');
messageContent.innerText = message;
botMessage.appendChild(botAvatar);
botMessage.appendChild(messageContent);
chatContainer.appendChild(botMessage);
chatContainer.scrollTop = chatContainer.scrollHeight; // 滚动到底部
}
// 模拟用户发送消息
function userMessage(message) {
const chatContainer = document.getElementById('chatContainer');
const userMessage = document.createElement('div');
const userAvatar = document.createElement('div');
const messageContent = document.createElement('div');
userAvatar.classList.add('avatar', 'user-avatar');
userMessage.classList.add('message', 'user-message');
messageContent.classList.add('message-content');
messageContent.innerText = message;
userMessage.appendChild(messageContent);
userMessage.appendChild(userAvatar);
chatContainer.appendChild(userMessage);
chatContainer.scrollTop = chatContainer.scrollHeight; // 滚动到底部
}
// 添加一些示例消息
botReply('你好啊！');
</script>
</body>
</html>