<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>AI 对话助手</title>
|
<script src="https://cdn.tailwindcss.com"></script>
|
</head>
|
<body class="bg-gray-100 min-h-screen">
|
<div class="container mx-auto p-4 max-w-3xl">
|
<!-- 标题 -->
|
<div class="text-center mb-8">
|
<h1 class="text-3xl font-bold text-gray-800">AI 对话助手</h1>
|
<p class="text-gray-600 mt-2">基于 Spring AI 的流式对话系统 By AhuCodingBeast</p>
|
</div>
|
|
<!-- 聊天容器 -->
|
<div id="chat-container" class="bg-white rounded-xl shadow-lg p-4 mb-4 h-[500px] overflow-y-auto space-y-4">
|
<!-- 初始欢迎消息 -->
|
<div class="ai-message flex items-start gap-3">
|
<div class="bg-green-100 p-3 rounded-lg max-w-[85%]">
|
<span class="text-gray-800">您好！我是AI助手，有什么可以帮您？</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 输入区域 -->
|
<div class="flex gap-2">
|
<input type="text" id="message-input"
|
class="flex-1 border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
placeholder="输入您的问题...">
|
<button id="send-button"
|
class="bg-blue-500 text-white px-6 py-3 rounded-xl hover:bg-blue-600 transition-colors flex items-center">
|
<span>发送</span>
|
<svg id="loading-spinner" class="hidden w-4 h-4 ml-2 animate-spin" fill="none" viewBox="0 0 24 24">
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
</svg>
|
</button>
|
</div>
|
</div>
|
|
<script>
|
const chatContainer = document.getElementById('chat-container');
|
const messageInput = document.getElementById('message-input');
|
const sendButton = document.getElementById('send-button');
|
const loadingSpinner = document.getElementById('loading-spinner');
|
|
// 发送消息处理
|
function handleSend() {
|
const message = messageInput.value.trim();
|
if (!message) return;
|
|
// 添加用户消息
|
addMessage(message, 'user');
|
messageInput.value = '';
|
|
// 构建API URL
|
const apiUrl = new URL('http://localhost:9999/dashscope/chat-client/generate_stream');
|
apiUrl.searchParams.append('id', '01');
|
apiUrl.searchParams.append('prompt', message);
|
|
// 显示加载状态
|
sendButton.disabled = true;
|
loadingSpinner.classList.remove('hidden');
|
|
// 创建EventSource连接
|
const eventSource = new EventSource(apiUrl);
|
let aiMessageElement = null;
|
|
eventSource.onmessage = (event) => {
|
try {
|
const data = JSON.parse(event.data);
|
console.log(data);
|
const content = data.result?.output?.text || '';
|
const finishReason = data.result?.metadata?.finishReason;
|
|
// 创建消息容器（如果不存在）
|
if (!aiMessageElement) {
|
aiMessageElement = addMessage('', 'ai');
|
}
|
|
// 追加内容
|
if (content) {
|
aiMessageElement.querySelector('.message-content').textContent += content;
|
autoScroll();
|
}
|
|
// 处理结束
|
if (finishReason === 'STOP') {
|
eventSource.close();
|
sendButton.disabled = false;
|
loadingSpinner.classList.add('hidden');
|
}
|
} catch (error) {
|
console.error('解析错误:', error);
|
}
|
};
|
|
eventSource.onerror = (error) => {
|
console.error('连接错误:', error);
|
eventSource.close();
|
sendButton.disabled = false;
|
loadingSpinner.classList.add('hidden');
|
addMessage('对话连接异常，请重试', 'ai', true);
|
};
|
}
|
|
// 添加消息到容器
|
function addMessage(content, type, isError = false) {
|
const messageDiv = document.createElement('div');
|
messageDiv.className = `${type}-message flex items-start gap-3`;
|
|
const bubble = document.createElement('div');
|
bubble.className = `p-3 rounded-lg max-w-[85%] ${
|
type === 'user'
|
? 'bg-blue-500 text-white ml-auto'
|
: `bg-green-100 ${isError ? 'text-red-500' : 'text-gray-800'}`
|
}`;
|
|
const contentSpan = document.createElement('span');
|
contentSpan.className = 'message-content';
|
contentSpan.textContent = content;
|
|
bubble.appendChild(contentSpan);
|
messageDiv.appendChild(bubble);
|
chatContainer.appendChild(messageDiv);
|
|
autoScroll();
|
return bubble;
|
}
|
|
// 自动滚动到底部
|
function autoScroll() {
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
}
|
|
// 事件监听
|
sendButton.addEventListener('click', handleSend);
|
messageInput.addEventListener('keypress', (e) => {
|
if (e.key === 'Enter' && !e.shiftKey) {
|
e.preventDefault();
|
handleSend();
|
}
|
});
|
</script>
|
</body>
|
</html>
|
