<!DOCTYPE html>
<html>
<head>
<title>百度千帆对话窗口 (HTML/JavaScript)</title>
<script>
function fetchData(query) {
// 这里只是一个模拟函数，实际中您需要实现真实的请求逻辑
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ result: mock_api_response(query) }); // 调用模拟函数获取答案
}, 1000);
});
}
function mock_api_response(query) {
// 这是一个模拟函数，根据输入参数动态生成答案
var result = "模拟的答案是：" + query;
return {
"result": result
};
}
// function fetchData() {
// fetch('/') // 发送请求到 Flask 后端路由 '/', 返回 JSON 数据
// .then(response => response.json()) // 将响应转换为 JSON 格式
// .then(data => { // 处理返回的 JSON 数据
// console.log(data);// 打印数据到控制台
// var finalResult = mock_api_response(data); // 调用 mock_api_response 函数并传入数据
// console.log(finalResult); // 打印处理后的结果到控制台
// // 在这里你可以根据需要对数据进行处理或显示在页面上
// })
// .catch(error => console.error('Error:', error)); // 处理任何错误
// }
// function mock_api_response(data) {
// var result = "答案是：" + data; // 使用传递的数据
// return {
// "result": result
// };
// }
// console.log()
function onSubmit() {
var query = document.getElementById("inputBox").value;
fetchData(query).then(result => {
var historyRecord = document.getElementById("historyRecord");
historyRecord.innerHTML += query + '\n' + result.result + '\n'; // 添加查询和模拟答案到历史记录中
historyRecord.scrollTop = historyRecord.scrollHeight; // 自动滚动到底部
document.getElementById("inputBox").value = ""; // 清空输入框
}).catch(error => {
alert("发生错误！");
});
}
</script>
</head>
<body>
<h1>百度千帆对话窗口</h1>
<div style="padding: 20px;">
<textarea id="inputBox" style="width: 50%; height: 100px;"></textarea>
<button onclick="onSubmit()">提交</button>
<div id="historyRecord" style="height: 200px; overflow-y: auto; padding: 10px;">
<!-- 历史记录将在此处显示 -->
</div>
</div>
</body>
</html>
