237 lines
8.7 KiB
HTML
237 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>流式功能测试</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.test-section {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
h2 {
|
|
color: #333;
|
|
margin-top: 0;
|
|
}
|
|
.test-button {
|
|
background: #6366f1;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.test-button:hover {
|
|
background: #4f46e5;
|
|
}
|
|
.status-display {
|
|
margin-top: 20px;
|
|
min-height: 60px;
|
|
}
|
|
.answer-display {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background: #f9f9f9;
|
|
border-radius: 6px;
|
|
min-height: 100px;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
}
|
|
.log-area {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background: #1e1e1e;
|
|
color: #0f0;
|
|
border-radius: 6px;
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🚀 AIEC-server 流式功能测试</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>1. 基础连接测试</h2>
|
|
<button class="test-button" onclick="testConnection()">测试后端连接</button>
|
|
<button class="test-button" onclick="testStreamEndpoint()">测试流式端点</button>
|
|
<div id="connection-result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>2. 流式响应测试</h2>
|
|
<input type="text" id="test-query" placeholder="输入测试问题" value="什么是RAG?" style="width: 100%; padding: 10px; margin-bottom: 10px;">
|
|
<br>
|
|
<button class="test-button" onclick="testStreaming(false)">测试流式（无缓存）</button>
|
|
<button class="test-button" onclick="testStreaming(true)">测试流式（带缓存）</button>
|
|
|
|
<div id="status-container" class="status-display"></div>
|
|
<div id="answer-container" class="answer-display">答案将显示在这里...</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>3. 调试日志</h2>
|
|
<button class="test-button" onclick="clearLogs()">清除日志</button>
|
|
<div id="log-area" class="log-area"></div>
|
|
</div>
|
|
|
|
<!-- 加载必要的脚本 -->
|
|
<script src="services/api/chat-service.js"></script>
|
|
<script src="js/stream-status.js"></script>
|
|
|
|
<script>
|
|
let statusDisplay = null;
|
|
|
|
function log(message, type = 'info') {
|
|
const logArea = document.getElementById('log-area');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const logEntry = document.createElement('div');
|
|
logEntry.style.color = type === 'error' ? '#f00' : type === 'success' ? '#0f0' : '#0ff';
|
|
logEntry.textContent = `[${timestamp}] ${message}`;
|
|
logArea.appendChild(logEntry);
|
|
logArea.scrollTop = logArea.scrollHeight;
|
|
console.log(message);
|
|
}
|
|
|
|
function clearLogs() {
|
|
document.getElementById('log-area').innerHTML = '';
|
|
}
|
|
|
|
async function testConnection() {
|
|
log('测试后端连接...');
|
|
try {
|
|
const response = await fetch('http://localhost:8000/health');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
log(`✅ 后端连接成功: ${JSON.stringify(data)}`, 'success');
|
|
document.getElementById('connection-result').innerHTML =
|
|
'<span style="color: green;">✅ 后端连接正常</span>';
|
|
} else {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
} catch (error) {
|
|
log(`❌ 后端连接失败: ${error.message}`, 'error');
|
|
document.getElementById('connection-result').innerHTML =
|
|
'<span style="color: red;">❌ 后端连接失败，请确保服务运行在 localhost:8000</span>';
|
|
}
|
|
}
|
|
|
|
async function testStreamEndpoint() {
|
|
log('测试流式端点...');
|
|
try {
|
|
const response = await fetch('http://localhost:8000/retrieve/stream', {
|
|
method: 'OPTIONS'
|
|
});
|
|
if (response.ok || response.status === 405) {
|
|
log(`✅ 流式端点存在`, 'success');
|
|
document.getElementById('connection-result').innerHTML =
|
|
'<span style="color: green;">✅ 流式端点可用</span>';
|
|
} else {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
} catch (error) {
|
|
log(`❌ 流式端点不可用: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async function testStreaming(useCache) {
|
|
const query = document.getElementById('test-query').value;
|
|
if (!query) {
|
|
alert('请输入测试问题');
|
|
return;
|
|
}
|
|
|
|
log(`开始测试流式响应 (缓存: ${useCache ? '启用' : '禁用'})`);
|
|
|
|
// 清空显示区域
|
|
document.getElementById('answer-container').textContent = '';
|
|
const statusContainer = document.getElementById('status-container');
|
|
statusContainer.innerHTML = '';
|
|
|
|
// 创建状态显示组件
|
|
if (statusDisplay) {
|
|
statusDisplay.destroy();
|
|
}
|
|
statusDisplay = new StreamStatusDisplay(statusContainer);
|
|
|
|
try {
|
|
// 确保ChatAPIService存在
|
|
if (!window.ChatAPIService) {
|
|
log('❌ ChatAPIService未加载', 'error');
|
|
return;
|
|
}
|
|
|
|
let answerText = '';
|
|
const startTime = Date.now();
|
|
|
|
// 调用流式接口
|
|
const abortController = await window.ChatAPIService.sendMessageStream(
|
|
{
|
|
message: query,
|
|
conversationId: 'test-' + Date.now(),
|
|
deepResearch: false,
|
|
useCache: useCache
|
|
},
|
|
// onMessage
|
|
(chunk) => {
|
|
answerText += chunk;
|
|
document.getElementById('answer-container').textContent = answerText;
|
|
log(`收到chunk: ${chunk.length}字符`);
|
|
},
|
|
// onComplete
|
|
(result) => {
|
|
const duration = ((Date.now() - startTime) / 1000).toFixed(2);
|
|
log(`✅ 流式响应完成，耗时: ${duration}秒`, 'success');
|
|
log(`答案长度: ${result.content.length}字符`, 'success');
|
|
if (result.reference && result.reference.length > 0) {
|
|
log(`支撑事实: ${result.reference.length}个`, 'success');
|
|
}
|
|
},
|
|
// onError
|
|
(error) => {
|
|
log(`❌ 错误: ${error.message}`, 'error');
|
|
document.getElementById('answer-container').innerHTML =
|
|
`<span style="color: red;">错误: ${error.message}</span>`;
|
|
},
|
|
// onThinking
|
|
null,
|
|
// onStatus
|
|
(status) => {
|
|
log(`状态更新: ${status.type} - ${status.message || ''}`);
|
|
if (statusDisplay) {
|
|
statusDisplay.updateStatus(status);
|
|
}
|
|
}
|
|
);
|
|
|
|
log('已启动流式请求，等待响应...');
|
|
|
|
} catch (error) {
|
|
log(`❌ 测试失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// 页面加载完成后自动测试连接
|
|
window.onload = () => {
|
|
log('页面加载完成，准备测试...');
|
|
setTimeout(() => {
|
|
testConnection();
|
|
}, 1000);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |