165 lines
4.5 KiB
HTML
165 lines
4.5 KiB
HTML
<!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 {
|
||
background-color: #fafafa;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
#result {
|
||
font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans",
|
||
"Noto Sans CJK SC", Arial, sans-serif;
|
||
font-size: 16px;
|
||
color: #333;
|
||
line-height: 1.8;
|
||
background-color: #f9f9f9;
|
||
border: 1px solid #ddd;
|
||
padding: 15px;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
max-width: 800px;
|
||
width: 90%;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#return {
|
||
position: absolute; /* 固定在页面的左上角 */
|
||
top: 10px;
|
||
left: 10px;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
color: #007bff; /* 蓝色字体 */
|
||
background: #f1f1f1; /* 浅灰背景 */
|
||
padding: 8px 12px;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
#return:hover {
|
||
background: #e2e6ea; /* 鼠标悬停时背景变化 */
|
||
}
|
||
|
||
p {
|
||
margin: 10px 0;
|
||
text-align: justify;
|
||
}
|
||
|
||
.word.n {
|
||
color: red;
|
||
}
|
||
.word.v {
|
||
color: blue;
|
||
}
|
||
.word.a {
|
||
color: green;
|
||
}
|
||
.word.d {
|
||
color: orange;
|
||
}
|
||
|
||
.word.hidden {
|
||
color: inherit !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>标注结果</h1>
|
||
|
||
<!-- 返回按钮 -->
|
||
<a href="/" id="return">返回</a>
|
||
|
||
<!-- 词性说明与控制 -->
|
||
<div style="margin-bottom: 10px">
|
||
<strong>词性显示控制：</strong>
|
||
<label
|
||
><input type="checkbox" id="toggle-n" checked />
|
||
<span style="color: red">名词</span></label
|
||
>
|
||
<label
|
||
><input type="checkbox" id="toggle-a" checked />
|
||
<span style="color: green">形容词</span></label
|
||
>
|
||
|
||
<label
|
||
><input type="checkbox" id="toggle-v" />
|
||
<span style="color: blue">动词</span></label
|
||
>
|
||
<label
|
||
><input type="checkbox" id="toggle-d" />
|
||
<span style="color: orange">副词</span></label
|
||
>
|
||
</div>
|
||
|
||
<!-- 标注结果 -->
|
||
<div id="result">{{ content | safe }}</div>
|
||
|
||
<div>
|
||
<strong>导出结果：</strong>
|
||
<button onclick="exportFile('html')">导出为 HTML</button>
|
||
<button onclick="exportFile('pdf')">导出为 PDF</button>
|
||
<button onclick="exportFile('rtf')">导出为富文本（RTF）</button>
|
||
</div>
|
||
|
||
<script>
|
||
function exportFile(format) {
|
||
const content = document.getElementById("result").innerHTML; // 获取结果内容
|
||
fetch("/export", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ format: format, content: content }), // 确保键名正确
|
||
})
|
||
.then((response) => {
|
||
if (response.ok) return response.blob();
|
||
throw new Error("导出失败");
|
||
})
|
||
.then((blob) => {
|
||
const url = window.URL.createObjectURL(blob);
|
||
const a = document.createElement("a");
|
||
a.style.display = "none";
|
||
a.href = url;
|
||
a.download = `exported_result.${format}`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
window.URL.revokeObjectURL(url);
|
||
})
|
||
.catch((err) => alert(err.message));
|
||
}
|
||
</script>
|
||
|
||
<script>
|
||
// 获取复选框和结果区域
|
||
const toggles = {
|
||
n: document.getElementById("toggle-n"),
|
||
v: document.getElementById("toggle-v"),
|
||
a: document.getElementById("toggle-a"),
|
||
d: document.getElementById("toggle-d"),
|
||
};
|
||
const resultDiv = document.getElementById("result");
|
||
|
||
// 监听复选框的切换事件
|
||
Object.entries(toggles).forEach(([tag, checkbox]) => {
|
||
checkbox.addEventListener("change", () => {
|
||
const words = resultDiv.querySelectorAll(`.word.${tag}`);
|
||
words.forEach((word) => {
|
||
if (checkbox.checked) {
|
||
word.classList.remove("hidden"); // 恢复颜色
|
||
} else {
|
||
word.classList.add("hidden"); // 移除颜色
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|