lostecho/mark_word_fastapi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format code

Browse Source
This commit is contained in:
lostecho
2025-07-06 21:49:41 +08:00
parent 8b6542dc91
commit afc49a4ea4
5 changed files with 250 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
__pycache__/main.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
app/__pycache__/main.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
app/__pycache__/main.cpython-313.pyc Normal file
View File

Binary file not shown.

252
app/templates/index.html
View File

@@ -1,150 +1,156 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>词性标注工具</title> <title>词性标注工具</title>
<style> <style>
/* 全局样式 */ /* 全局样式 */
body { body {
font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans", Arial, sans-serif; font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans", Arial,
margin: 0; sans-serif;
padding: 0; margin: 0;
background-color: #f9f9f9; padding: 0;
} background-color: #f9f9f9;
}
/* 页面容器 */ /* 页面容器 */
.container { .container {
max-width: 800px; max-width: 800px;
margin: 50px auto; margin: 50px auto;
padding: 20px; padding: 20px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} }
/* 标题样式 */ /* 标题样式 */
h1 { h1 {
text-align: center; text-align: center;
color: #333; color: #333;
margin-bottom: 20px; margin-bottom: 20px;
} }
/* 切换按钮样式 */ /* 切换按钮样式 */
.switch-buttons { .switch-buttons {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.switch-buttons button { .switch-buttons button {
background-color: #007bff; background-color: #007bff;
color: #fff; color: #fff;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
margin: 0 10px; margin: 0 10px;
border-radius: 5px; border-radius: 5px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.switch-buttons button:hover { .switch-buttons button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
/* 输入框容器 */ /* 输入框容器 */
.input-container { .input-container {
display: none; display: none;
} }
.input-container.active { .input-container.active {
display: block !important; display: block !important;
} }
/* 表单元素 */ /* 表单元素 */
label { label {
font-size: 14px; font-size: 14px;
color: #555; color: #555;
margin-bottom: 8px; margin-bottom: 8px;
display: block; display: block;
} }
input[type="file"], input[type="file"],
textarea { textarea {
width: 97%; width: 97%;
padding: 10px; padding: 10px;
font-size: 14px; font-size: 14px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 5px; border-radius: 5px;
margin-bottom: 20px; margin-bottom: 20px;
} }
/* 提交按钮右对齐 */ /* 提交按钮右对齐 */
.form-actions { .form-actions {
text-align: right; text-align: right;
} }
button[type="submit"] { button[type="submit"] {
background-color: #28a745; background-color: #28a745;
color: #fff; color: #fff;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button[type="submit"]:hover { button[type="submit"]:hover {
background-color: #218838; background-color: #218838;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>词性标注工具</h1> <h1>词性标注工具</h1>
<!-- 切换方式 --> <!-- 切换方式 -->
<div class="switch-buttons"> <div class="switch-buttons">
<button onclick="toggleInputMethod('file')">上传文件</button> <button onclick="toggleInputMethod('file')">上传文件</button>
<button onclick="toggleInputMethod('text')">粘贴文本</button> <button onclick="toggleInputMethod('text')">粘贴文本</button>
</div> </div>
<!-- 文件上传 --> <!-- 文件上传 -->
<div id="file-upload-container" class="input-container active"> <div id="file-upload-container" class="input-container active">
<form action="/process" method="post" enctype="multipart/form-data"> <form action="/process" method="post" enctype="multipart/form-data">
<label for="file">选择文件：</label> <label for="file">选择文件：</label>
<input type="file" name="file" id="file"> <input type="file" name="file" id="file" />
<div class="form-actions"> <div class="form-actions">
<button type="submit">提交文本</button> <button type="submit">提交文本</button>
</div> </div>
</form> </form>
</div> </div>
<!-- 粘贴文本 --> <!-- 粘贴文本 -->
<div id="text-paste-container" class="input-container"> <div id="text-paste-container" class="input-container">
<form action="/process" method="post"> <form action="/process" method="post">
<label for="text">粘贴文本：</label> <label for="text">粘贴文本：</label>
<textarea name="text" id="text" rows="10" placeholder="在这里粘贴要处理的文本"></textarea> <textarea
<div class="form-actions"> name="text"
<button type="submit">提交文本</button> id="text"
</div> rows="10"
</form> placeholder="在这里粘贴要处理的文本"
</div> ></textarea>
<div class="form-actions">
<button type="submit">提交文本</button>
</div>
</form>
</div>
</div> </div>
<script> <script>
function toggleInputMethod(method) { function toggleInputMethod(method) {
const fileContainer = document.getElementById("file-upload-container"); const fileContainer = document.getElementById("file-upload-container");
const textContainer = document.getElementById("text-paste-container"); const textContainer = document.getElementById("text-paste-container");
if (method === "file") { if (method === "file") {
fileContainer.classList.add("active"); fileContainer.classList.add("active");
textContainer.classList.remove("active"); textContainer.classList.remove("active");
} else { } else {
textContainer.classList.add("active"); textContainer.classList.add("active");
fileContainer.classList.remove("active"); fileContainer.classList.remove("active");
}
} }
}
</script> </script>
</body> </body>
</html> </html>

221
app/templates/result.html
View File

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