main
HuangHai 4 weeks ago
parent ddd73706c7
commit 34dd9d926c

@ -168,6 +168,34 @@
height: auto; height: auto;
overflow-y: auto; /* 添加滚动条 */ overflow-y: auto; /* 添加滚动条 */
} }
.loading-animation {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
color: #666;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 10px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style> </style>
</head> </head>
<body> <body>
@ -231,32 +259,32 @@
</div> </div>
<script> <script>
// 禁用所有按钮 // 禁用所有按钮
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
const buttons = document.querySelectorAll('button'); const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.disabled = true); buttons.forEach(btn => btn.disabled = true);
}); });
MathJax = { MathJax = {
tex: { tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']], inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']] displayMath: [['$$', '$$'], ['\\[', '\\]']]
}, },
svg: { svg: {
fontCache: 'global' fontCache: 'global'
}, },
startup: { startup: {
pageReady: () => { pageReady: () => {
return MathJax.startup.defaultPageReady().then(() => { return MathJax.startup.defaultPageReady().then(() => {
console.log('MathJax initialized'); console.log('MathJax initialized');
// 启用所有按钮 // 启用所有按钮
const buttons = document.querySelectorAll('button'); const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.disabled = false); buttons.forEach(btn => btn.disabled = false);
return MathJax.typesetPromise(); return MathJax.typesetPromise();
}); });
} }
} }
}; };
</script> </script>
<!--国内可以访问的JS,不要使用静态的本地的,因为文件不全的话没有好的显示效果!--> <!--国内可以访问的JS,不要使用静态的本地的,因为文件不全的话没有好的显示效果!-->
<script src="https://cdn.bootcdn.net/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js" id="MathJax-script" async></script> <script src="https://cdn.bootcdn.net/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
@ -283,12 +311,8 @@
const selectedDocs = Array.from(checkboxes).map(cb => cb.value); const selectedDocs = Array.from(checkboxes).map(cb => cb.value);
const answerArea = document.getElementById('answerArea'); const answerArea = document.getElementById('answerArea');
answerArea.innerHTML = ''; // 添加加载动画
answerArea.innerHTML = '<div class="loading-animation"><div class="spinner"></div><div>思考中...</div></div>';
const data = {
query: question,
tags: selectedDocs
};
fetch('/api/rag', { fetch('/api/rag', {
method: 'POST', method: 'POST',
@ -296,52 +320,60 @@
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'text/event-stream' 'Accept': 'text/event-stream'
}, },
body: JSON.stringify(data) body: JSON.stringify({
query: question,
tags: selectedDocs
})
}) })
.then(response => { .then(response => {
const reader = response.body.getReader(); const reader = response.body.getReader();
const decoder = new TextDecoder(); const decoder = new TextDecoder();
let buffer = ''; let buffer = '';
let accumulatedContent = ''; let accumulatedContent = '';
function processChunk() { function processChunk() {
return reader.read().then(({done, value}) => { return reader.read().then(({done, value}) => {
if (done) return; if (done) return;
buffer += decoder.decode(value, {stream: true}); buffer += decoder.decode(value, {stream: true});
const lines = buffer.split('\n'); const lines = buffer.split('\n');
buffer = lines.pop(); buffer = lines.pop();
for (const line of lines) { for (const line of lines) {
if (line.includes('data:')) { if (line.includes('data:')) {
const jsonStr = line.replace(/^data:\s*/, '').replace(/^data:\s*/, '').trim(); const jsonStr = line.replace(/^data:\s*/, '').replace(/^data:\s*/, '').trim();
if (jsonStr) { if (jsonStr) {
try { try {
const data = JSON.parse(jsonStr); const data = JSON.parse(jsonStr);
if (data.reply) { if (data.reply) {
accumulatedContent += data.reply; accumulatedContent += data.reply;
answerArea.innerHTML = marked.parse(accumulatedContent); answerArea.innerHTML = marked.parse(accumulatedContent);
MathJax.typesetPromise(); MathJax.typesetPromise();
}
} catch (e) {
console.log('忽略解析错误:', e);
} }
} catch (e) {
console.log('忽略解析错误:', e);
} }
} }
} }
}
return processChunk().then(() => { return processChunk().then(() => {
// 在流处理完成后保存完整的markdown内容 // 在流处理完成后保存完整的markdown内容
localStorage.setItem('lastMarkdownContent', accumulatedContent); localStorage.setItem('lastMarkdownContent', accumulatedContent);
});
}); });
}); }
}
return processChunk(); return processChunk();
}) })
.catch(error => { .catch(error => {
console.error('Error:', error); // 移除加载动画
}); answerArea.innerHTML = '';
console.error('Error:', error);
// 出错时也移除加载动画
answerArea.innerHTML = '<div style="color:red">请求出错,请重试</div>';
});
} }
function clearAll() { function clearAll() {
@ -393,3 +425,4 @@
</script> </script>
</body> </body>
</html> </html>

@ -1,71 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>SSE测试</title>
<link rel="icon" href="data:,">
</head>
<body>
<button onclick="callRagAPI()">调用RAG接口</button>
<div id="responseArea"></div>
<script>
async function callRagAPI() {
const responseArea = document.getElementById('responseArea');
responseArea.innerHTML = '';
const data = {
query: "小学数学中有哪些模型?",
tags: ["MATH_1"]
};
try {
const response = await fetch('http://127.0.0.1:8000/api/rag', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'text/event-stream'
},
body: JSON.stringify(data)
});
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = '';
while (true) {
const {done, value} = await reader.read();
if (done) break;
buffer += decoder.decode(value, {stream: true});
// 处理可能的多行数据
const lines = buffer.split('\n');
buffer = lines.pop();
for (const line of lines) {
if (line.includes('data:')) {
// 处理可能的多重data:前缀
const jsonStr = line.replace(/^data:\s*/, '').replace(/^data:\s*/, '').trim();
if (jsonStr) {
try {
const data = JSON.parse(jsonStr);
if (data.reply) {
// 将换行符转换为HTML换行标签
const formattedReply = data.reply.replace(/\n/g, '<br>');
responseArea.innerHTML += formattedReply;
}
} catch (e) {
console.log('忽略解析错误:', e);
}
}
}
}
}
} catch (error) {
console.error('请求失败:', error);
responseArea.innerHTML = '请求失败: ' + error.message;
}
}
</script>
</body>
</html>
Loading…
Cancel
Save