yanxulong/AIEC-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
闫旭隆
2025-10-17 09:31:28 +08:00
commit 4698145045
589 changed files with 196795 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
AIEC-server/test_streaming.html Normal file
View File

@ -0,0 +1,237 @@
<!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>