|
|
|
@ -149,8 +149,6 @@
|
|
|
|
|
|
|
|
|
|
#answerArea {
|
|
|
|
|
min-height: 240px;
|
|
|
|
|
max-height: 500px; /* 设置最大高度 */
|
|
|
|
|
overflow-y: auto; /* 添加垂直滚动条 */
|
|
|
|
|
height: auto;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
@ -198,8 +196,8 @@
|
|
|
|
|
<div class="example-item" onclick="fillExample('“先写后编”的历史写作方式是什么意思?')">
|
|
|
|
|
“先写后编”的历史写作方式是什么意思?
|
|
|
|
|
</div>
|
|
|
|
|
<div class="example-item" onclick="fillExample('“皇帝”称号的由来')">
|
|
|
|
|
“皇帝”称号的由来
|
|
|
|
|
<div class="example-item" onclick="fillExample('“皇帝”称号的由来')">
|
|
|
|
|
“皇帝”称号的由来
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
@ -209,7 +207,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
<button id="submitBtn" onclick="submitQuestion()"><span class="icon">💡</span>提问</button>
|
|
|
|
|
<button id="clearBtn" onclick="clearAll()"><span class="icon">🗑️</span>清空</button>
|
|
|
|
|
<button id="relationBtn" onclick="generateRelation()" style="background-color:#9c27b0"><span class="icon">👥</span>生成刘帮集团的人物关系图</button>
|
|
|
|
|
<button id="relationBtn" onclick="generateRelation()" style="background-color:#9c27b0"><span class="icon">👥</span>生成刘帮集团的人物关系图
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
@ -346,76 +345,74 @@
|
|
|
|
|
document.getElementById('answerArea').innerHTML = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 在script部分添加新函数
|
|
|
|
|
function generateRelation() {
|
|
|
|
|
const answerArea = document.getElementById('answerArea');
|
|
|
|
|
answerArea.innerHTML = '<div class="loading-animation"><div class="spinner"></div><div>正在生成人物关系图...</div></div>';
|
|
|
|
|
// 在script部分添加新函数
|
|
|
|
|
function generateRelation() {
|
|
|
|
|
const answerArea = document.getElementById('answerArea');
|
|
|
|
|
answerArea.innerHTML = '<div class="loading-animation"><div class="spinner"></div><div>正在生成人物关系图...</div></div>';
|
|
|
|
|
|
|
|
|
|
fetch('/api/rag', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
'Accept': 'text/event-stream'
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
query: "生成刘帮集团的人物关系图",
|
|
|
|
|
topic: "ShiJi",
|
|
|
|
|
mode: "hybrid",
|
|
|
|
|
output_model: "html"
|
|
|
|
|
fetch('/api/rag', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
'Accept': 'text/event-stream'
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
query: "生成刘帮集团的人物关系图",
|
|
|
|
|
topic: "ShiJi",
|
|
|
|
|
mode: "hybrid",
|
|
|
|
|
output_model: "html"
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.then(response => {
|
|
|
|
|
const reader = response.body.getReader();
|
|
|
|
|
const decoder = new TextDecoder();
|
|
|
|
|
let buffer = '';
|
|
|
|
|
let accumulatedContent = '';
|
|
|
|
|
|
|
|
|
|
function processChunk() {
|
|
|
|
|
return reader.read().then(({done, value}) => {
|
|
|
|
|
if (done) {
|
|
|
|
|
// 在HTML内容完全接收后执行其中的脚本
|
|
|
|
|
const scripts = answerArea.getElementsByTagName('script');
|
|
|
|
|
for (let i = 0; i < scripts.length; i++) {
|
|
|
|
|
try {
|
|
|
|
|
eval(scripts[i].innerHTML);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error('脚本执行错误:', e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
.then(response => {
|
|
|
|
|
const reader = response.body.getReader();
|
|
|
|
|
const decoder = new TextDecoder();
|
|
|
|
|
let buffer = '';
|
|
|
|
|
let accumulatedContent = '';
|
|
|
|
|
|
|
|
|
|
function processChunk() {
|
|
|
|
|
return reader.read().then(({done, value}) => {
|
|
|
|
|
if (done) return;
|
|
|
|
|
|
|
|
|
|
buffer += decoder.decode(value, {stream: true});
|
|
|
|
|
const lines = buffer.split('\n');
|
|
|
|
|
buffer = lines.pop();
|
|
|
|
|
|
|
|
|
|
buffer += decoder.decode(value, {stream: true});
|
|
|
|
|
const lines = buffer.split('\n');
|
|
|
|
|
buffer = lines.pop();
|
|
|
|
|
|
|
|
|
|
for (const line of lines) {
|
|
|
|
|
if (line.includes('data:')) {
|
|
|
|
|
const jsonStr = line.replace(/^data:\s*/, '').replace(/^data:\s*/, '').trim();
|
|
|
|
|
if (jsonStr) {
|
|
|
|
|
try {
|
|
|
|
|
const data = JSON.parse(jsonStr);
|
|
|
|
|
if (data.reply) {
|
|
|
|
|
accumulatedContent += data.reply;
|
|
|
|
|
answerArea.innerHTML = marked.parse(accumulatedContent, markedOptions);
|
|
|
|
|
MathJax.typesetPromise();
|
|
|
|
|
answerArea.scrollTop = answerArea.scrollHeight;
|
|
|
|
|
for (const line of lines) {
|
|
|
|
|
if (line.includes('data:')) {
|
|
|
|
|
const jsonStr = line.replace(/^data:\s*/, '').replace(/^data:\s*/, '').trim();
|
|
|
|
|
if (jsonStr) {
|
|
|
|
|
try {
|
|
|
|
|
const data = JSON.parse(jsonStr);
|
|
|
|
|
if (data.reply) {
|
|
|
|
|
accumulatedContent += data.reply;
|
|
|
|
|
answerArea.innerHTML = marked.parse(accumulatedContent, markedOptions);
|
|
|
|
|
MathJax.typesetPromise();
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.log('忽略解析错误:', e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.log('忽略解析错误:', e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return processChunk().then(() => {
|
|
|
|
|
// 在流处理完成后保存完整的markdown内容
|
|
|
|
|
localStorage.setItem('lastMarkdownContent', accumulatedContent);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return processChunk();
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
// 移除加载动画
|
|
|
|
|
answerArea.innerHTML = '';
|
|
|
|
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
// 出错时也移除加载动画
|
|
|
|
|
answerArea.innerHTML = '<div style="color:red">请求出错,请重试</div>';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return processChunk();
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
answerArea.innerHTML = '<div style="color:red">生成关系图出错,请重试</div>';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script src="/static/mathjax/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
|
|
|
|
|
<script src="/static/js/marked.min.js"></script>
|
|
|
|
|