<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端Gui训练场</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #000000;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
width: 1024px;
background: #1e1e1e;
border-radius: 16px;
box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
overflow: hidden;
position: relative;
}
.header {
background: #282828;
padding: 15px 20px;
text-align: center;
font-size: 28px;
font-weight: bold;
border-bottom: 2px solid #333333;
position: relative;
z-index: 1;
}
.header::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #4caf50, #3498db);
}
.messages {
padding: 20px;
height: calc(100vh - 200px);
overflow-y: auto;
background: linear-gradient(to bottom, #1e1e1e, #282828);
}
.message {
margin-bottom: 15px;
padding: 10px;
border-radius: 10px;
max-width: 70%;
word-wrap: break-word;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
}
.user {
background: #4caf50;
align-self: flex-end;
animation: fadeInRight 0.5s;
}
.bot {
background: #3498db;
align-self: flex-start;
animation: fadeInLeft 0.5s;
}
.input-group {
display: flex;
padding: 15px 20px;
background: #282828;
border-top: 2px solid #333333;
}
input[type="text"] {
flex: 1;
padding: 12px;
border: none;
border-radius: 8px;
margin-right: 10px;
background: #ffffff;
color: #000000;
font-size: 16px;
}
button {
padding: 12px 18px;
background-color: #9b59b6;
color: #ffffff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 16px;
}
button:hover {
background-color: #8e44ad;
}
.typing-indicator {
display: inline-block;
padding: 10px;
}
.typing-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
margin: 0 2px;
animation: typingAnimation 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) {
animation-delay: 0s;
}
.typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typingAnimation {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-5px); }
}
@keyframes fadeInLeft {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
</style>
</head>
<body>
<div class="container">
<div class="header">智能对话框</div>
<div class="messages" id="messages">
<!-- 消息将在这里显示 -->
</div>
<div class="input-group">
<input type="text" id="userInput" placeholder="请输入消息..." onkeypress="handleKeyPress(event)">
<button onclick="sendMessage()">发送</button>
</div>
</div>
<script>
// 显示正在输入指示器
function showTypingIndicator() {
const typingDiv = document.createElement('div');
typingDiv.className = 'message bot';
typingDiv.id = 'typingIndicator';
typingDiv.innerHTML = `
<div class="typing-indicator">
<span class="typing-dot"></span>
<span class="typing-dot"></span>
<span class="typing-dot"></span>
</div>
`;
document.getElementById('messages').appendChild(typingDiv);
document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
}
// 隐藏正在输入指示器
function hideTypingIndicator() {
const indicator = document.getElementById('typingIndicator');
if (indicator) {
indicator.remove();
}
}
// 处理回车键
function handleKeyPress(event) {
if (event.key === 'Enter') {
sendMessage();
}
}
// 发送消息
async function sendMessage() {
const userInput = document.getElementById('userInput').value.trim();
if (!userInput) return;
const messagesDiv = document.getElementById('messages');
// 添加用户消息
const userMessageDiv = document.createElement('div');
userMessageDiv.className = 'message user';
userMessageDiv.textContent = userInput;
messagesDiv.appendChild(userMessageDiv);
// 清空输入框
document.getElementById('userInput').value = '';
// 显示正在输入指示器
showTypingIndicator();
try {
// 调用API
const response = await fetch('https://api.siliconflow.cn/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer sk-qwtasqxritolghnrsywaypplfblzutiencycqwpfdidpdsed'
},
body: JSON.stringify({
model: "deepseek-ai/DeepSeek-V2.5",
messages: [
{"role": "system", "content": "You are a helpful assistant designed to output JSON."},
{"role": "user", "content": userInput}
],
response_format: {"type": "json_object"}
})
});
if (!response.ok) {
const errorData = await response.json(); // 获取错误信息
throw new Error(`Network response was not ok: ${errorData.message}`);
}
const data = await response.json();
const botResponse = data.choices[0]?.message?.content || '抱歉，我没有理解您的问题。';
// 隐藏指示器
hideTypingIndicator();
// 添加机器人回复
const botMessageDiv = document.createElement('div');
botMessageDiv.className = 'message bot';
botMessageDiv.textContent = botResponse;
messagesDiv.appendChild(botMessageDiv);
} catch (error) {
// 隐藏指示器
hideTypingIndicator();
// 显示错误信息
const errorDiv = document.createElement('div');
errorDiv.className = 'message bot';
errorDiv.textContent = `抱歉，出现错误: ${error.message}`;
messagesDiv.appendChild(errorDiv);
console.error('API请求错误:', error);
}
// 滚动到底部
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
</script>
</body>
</html>
发表于 2025-4-5 08:04:47