You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

197 lines
5.4 KiB

4 weeks ago
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4 weeks ago
<title>小学数学大模型问答</title>
4 weeks ago
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
4 weeks ago
4 weeks ago
.container {
background: white;
padding: 30px;
border-radius: 8px;
4 weeks ago
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
4 weeks ago
}
4 weeks ago
4 weeks ago
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
4 weeks ago
4 weeks ago
.data-area {
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
min-height: 300px;
max-height: 400px;
4 weeks ago
min-width: 600px; /* Added to ensure sufficient width */
width: 100%; /* Ensure it takes full available width */
4 weeks ago
overflow-y: auto;
background-color: #f8f9fa;
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 1.6;
4 weeks ago
white-space: normal;
4 weeks ago
word-wrap: break-word;
overflow-wrap: break-word;
4 weeks ago
margin-bottom: 20px;
4 weeks ago
}
4 weeks ago
4 weeks ago
.input-area {
display: flex;
gap: 10px;
4 weeks ago
}
4 weeks ago
4 weeks ago
#questionInput {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
4 weeks ago
}
4 weeks ago
4 weeks ago
#submitBtn {
background-color: #007bff;
4 weeks ago
color: white;
border: none;
4 weeks ago
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
4 weeks ago
cursor: pointer;
4 weeks ago
transition: background-color 0.3s;
4 weeks ago
}
4 weeks ago
4 weeks ago
#submitBtn:hover {
background-color: #0056b3;
4 weeks ago
}
4 weeks ago
4 weeks ago
.status {
4 weeks ago
text-align: center;
4 weeks ago
margin-bottom: 20px;
font-weight: bold;
4 weeks ago
}
4 weeks ago
4 weeks ago
.status.connecting {
color: #ffc107;
4 weeks ago
}
4 weeks ago
4 weeks ago
.status.connected {
color: #28a745;
4 weeks ago
}
4 weeks ago
4 weeks ago
.status.error {
4 weeks ago
color: #dc3545;
}
4 weeks ago
4 weeks ago
.status.completed {
color: #17a2b8;
4 weeks ago
}
4 weeks ago
.model {
margin-bottom: 30px;
padding: 15px;
border-left: 4px solid #007bff;
background: #f8f9fa;
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.model-title {
color: #007bff;
margin-bottom: 15px;
}
.model-definition {
font-weight: bold;
}
.model-expression {
font-family: monospace;
background: #e9ecef;
padding: 5px;
}
4 weeks ago
</style>
</head>
<body>
4 weeks ago
<div class="container">
<h1>小学数学大模型问答</h1>
<div id="status" class="status">准备就绪</div>
<div class="data-area" id="dataArea">等待问题...</div>
<div class="input-area">
<input type="text" id="questionInput" placeholder="请输入您的问题,例如:小学数学的学习方法">
<button id="submitBtn" onclick="submitQuestion()">提问</button>
4 weeks ago
</div>
4 weeks ago
</div>
4 weeks ago
4 weeks ago
<script>
let eventSource = null;
let textBuffer = '';
function submitQuestion() {
const question = document.getElementById('questionInput').value.trim();
if (!question) {
alert('请输入问题!');
return;
}
const statusDiv = document.getElementById('status');
const dataArea = document.getElementById('dataArea');
const submitBtn = document.getElementById('submitBtn');
// 清空之前的数据
dataArea.textContent = '';
textBuffer = '';
// 禁用按钮
submitBtn.disabled = true;
submitBtn.textContent = '处理中...';
// 更新状态
statusDiv.textContent = '正在连接...';
statusDiv.className = 'status connecting';
// 使用fetch发送POST请求并获取完整响应
fetch('/api/rag', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({query: question})
})
4 weeks ago
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
4 weeks ago
}
4 weeks ago
return response.json();
})
.then(data => {
dataArea.innerHTML = data.data;
statusDiv.textContent = '回答完成';
statusDiv.className = 'status completed';
submitBtn.disabled = false;
submitBtn.textContent = '提问';
4 weeks ago
})
.catch(error => {
4 weeks ago
console.error('请求错误:', error);
statusDiv.textContent = `请求错误: ${error.message}`;
4 weeks ago
statusDiv.className = 'status error';
4 weeks ago
submitBtn.disabled = false;
submitBtn.textContent = '提问';
});
4 weeks ago
}
</script>
4 weeks ago
</body>
4 weeks ago
</html>