You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
224 lines
9.4 KiB
224 lines
9.4 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Spring AI 聊天助手</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3b82f6',
|
|
secondary: '#64748b',
|
|
neutral: '#f8fafc',
|
|
dark: '#1e293b'
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif']
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.chat-message {
|
|
@apply p-4 rounded-lg mb-4 max-w-[80%];
|
|
}
|
|
.user-message {
|
|
@apply bg-primary text-white self-end;
|
|
}
|
|
.ai-message {
|
|
@apply bg-neutral border border-gray-200 text-dark self-start;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen flex flex-col">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="bg-white shadow-sm">
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa fa-robot text-primary text-2xl"></i>
|
|
<h1 class="text-xl font-bold text-dark">Spring AI 聊天助手</h1>
|
|
</div>
|
|
<div class="text-sm text-secondary">
|
|
<span id="status" class="flex items-center">
|
|
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
|
在线
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="flex-1 container mx-auto px-4 py-8 max-w-4xl">
|
|
<!-- 聊天区域 -->
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
|
<!-- 聊天头部 -->
|
|
<div class="bg-primary text-white p-4">
|
|
<h2 class="text-lg font-semibold">AI 助手</h2>
|
|
<p class="text-sm opacity-80">基于 DeepSeek 模型</p>
|
|
</div>
|
|
|
|
<!-- 聊天消息区 -->
|
|
<div id="chat-messages" class="p-4 h-[500px] overflow-y-auto flex flex-col space-y-4">
|
|
<!-- 欢迎消息 -->
|
|
<div class="chat-message ai-message">
|
|
<div class="flex items-start">
|
|
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3 flex-shrink-0">
|
|
<i class="fa fa-robot"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold mb-1">AI 助手</p>
|
|
<p>你好！我是基于 DeepSeek 模型的 AI 助手，有什么可以帮助你的吗？</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 输入区域 -->
|
|
<div class="p-4 border-t">
|
|
<form id="chat-form" class="flex space-x-2">
|
|
<input
|
|
type="text"
|
|
id="message-input"
|
|
placeholder="输入消息..."
|
|
class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
>
|
|
<button
|
|
type="submit"
|
|
id="send-button"
|
|
class="bg-primary text-white rounded-lg px-6 py-2 hover:bg-primary/90 transition-colors flex items-center space-x-2"
|
|
>
|
|
<span>发送</span>
|
|
<i class="fa fa-paper-plane"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 功能说明 -->
|
|
<div class="mt-8 bg-white rounded-xl shadow-md p-6">
|
|
<h3 class="text-lg font-semibold mb-4">功能说明</h3>
|
|
<ul class="space-y-2 text-secondary">
|
|
<li class="flex items-center">
|
|
<i class="fa fa-check-circle text-green-500 mr-2"></i>
|
|
支持自然语言对话
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fa fa-check-circle text-green-500 mr-2"></i>
|
|
基于 DeepSeek 大语言模型
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fa fa-check-circle text-green-500 mr-2"></i>
|
|
实时响应生成
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fa fa-check-circle text-green-500 mr-2"></i>
|
|
简洁美观的用户界面
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-white shadow-sm mt-8">
|
|
<div class="container mx-auto px-4 py-4 text-center text-secondary text-sm">
|
|
<p>© 2026 Spring AI 聊天助手 | 基于 DeepSeek 模型</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const chatForm = document.getElementById('chat-form');
|
|
const messageInput = document.getElementById('message-input');
|
|
const chatMessages = document.getElementById('chat-messages');
|
|
const sendButton = document.getElementById('send-button');
|
|
const status = document.getElementById('status');
|
|
|
|
// 发送消息
|
|
chatForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const message = messageInput.value.trim();
|
|
if (message) {
|
|
// 添加用户消息到聊天区
|
|
addMessage('user', message);
|
|
messageInput.value = '';
|
|
|
|
// 禁用发送按钮
|
|
sendButton.disabled = true;
|
|
sendButton.classList.add('opacity-50');
|
|
status.innerHTML = '<span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>处理中...';
|
|
|
|
// 调用后端 API
|
|
fetch(`/ai/generate?message=${encodeURIComponent(message)}`)
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
// 添加 AI 响应到聊天区
|
|
addMessage('ai', data);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
addMessage('ai', '抱歉，处理请求时出错，请稍后再试。');
|
|
})
|
|
.finally(() => {
|
|
// 恢复发送按钮状态
|
|
sendButton.disabled = false;
|
|
sendButton.classList.remove('opacity-50');
|
|
status.innerHTML = '<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>在线';
|
|
});
|
|
}
|
|
});
|
|
|
|
// 添加消息到聊天区
|
|
function addMessage(type, content) {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `chat-message ${type === 'user' ? 'user-message' : 'ai-message'} self-${type === 'user' ? 'end' : 'start'}`;
|
|
|
|
if (type === 'user') {
|
|
messageDiv.innerHTML = `
|
|
<div class="flex items-start justify-end">
|
|
<div>
|
|
<p class="font-semibold mb-1 text-right">你</p>
|
|
<p>${content}</p>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full bg-gray-300 text-dark flex items-center justify-center ml-3 flex-shrink-0">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else {
|
|
messageDiv.innerHTML = `
|
|
<div class="flex items-start">
|
|
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3 flex-shrink-0">
|
|
<i class="fa fa-robot"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold mb-1">AI 助手</p>
|
|
<p>${content}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
chatMessages.appendChild(messageDiv);
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
}
|
|
|
|
// 回车键发送消息
|
|
messageInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
chatForm.dispatchEvent(new Event('submit'));
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|