coder/pdf-translate-web
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始提交: PDF翻译网站

Browse Source 
功能:
- 上传PDF自动翻译成中文
- 不登录可用(次数限制)
- 登录后获得更多次数
- 会员等级制度(不同权益)
- 智能缓存(相同文件秒出结果)
- 原文译文对比查看
- 支持重新翻译(自定义要求)
- 翻译历史记录

技术栈: Flask + SQLAlchemy + Bootstrap5
This commit is contained in:
coder
2026-04-07 19:01:14 +08:00
commit be1e01a8c6
14 changed files with 2463 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/history.html
+62
View File
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻译历史 - PDF翻译助手</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">📄 PDF翻译助手</a>
<div class="navbar-nav ms-auto">
<span class="nav-link text-light">👋 {{ user.username }}</span>
<a class="nav-link" href="/logout">退出</a>
</div>
</div>
</nav>
<main class="container my-5">
<h2 class="mb-4">翻译历史</h2>
{% if translations %}
<div class="card">
<div class="card-body">
{% for t in translations %}
<div class="history-item">
<div>
<strong>{{ t.original_filename }}</strong>
<small class="text-muted ms-2">{{ t.page_count }}页</small>
{% if t.from_cache %}
<span class="badge bg-success ms-2">缓存</span>
{% endif %}
<small class="text-muted d-block">{{ t.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
</div>
<div>
<span class="badge
{% if t.status == 'completed' %}bg-success{% endif %}
{% if t.status == 'processing' %}bg-warning{% endif %}
{% if t.status == 'failed' %}bg-danger{% endif %}
">{{ t.status }}</span>
{% if t.status == 'completed' %}
<a href="/translate/{{ t.id }}" class="btn btn-sm btn-outline-primary ms-2">查看</a>
<a href="/api/download/{{ t.id }}" class="btn btn-sm btn-success ms-2">下载</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div class="alert alert-info">
还没有翻译记录，<a href="/">开始翻译</a>吧！
</div>
{% endif %}
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
templates/index.html
+162
View File
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF翻译助手 - 英文PDF翻译中文</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">📄 PDF翻译助手</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="/">首页</a></li>
<li class="nav-item"><a class="nav-link" href="/pricing">会员套餐</a></li>
{% if user %}
<li class="nav-item"><a class="nav-link" href="/history">翻译历史</a></li>
{% endif %}
</ul>
<div class="navbar-nav">
{% if user %}
<span class="nav-link text-light">👋 {{ user.username }}</span>
<a class="nav-link" href="/logout">退出</a>
{% else %}
<a class="nav-link" href="/login">登录</a>
<a class="nav-link" href="/register">注册</a>
{% endif %}
</div>
</div>
</div>
</nav>
<!-- 主内容 -->
<main class="container my-5">
<!-- 用户信息卡片 -->
<div class="row mb-4">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">📊 今日翻译额度</h5>
{% if user %}
<p class="card-text">
用户类型: <strong>{{ user.user_type }}</strong><br>
今日剩余: <strong class="text-success">{{ daily_remaining }}次</strong><br>
单文件最大: <strong>{{ max_pages }}页</strong>
</p>
{% if not user.is_vip() %}
<a href="/pricing" class="btn btn-outline-primary btn-sm">升级会员</a>
{% endif %}
{% else %}
<p class="card-text">
访客模式<br>
今日剩余: <strong class="text-warning">{{ daily_remaining }}次</strong><br>
单文件最大: <strong>{{ max_pages }}页</strong><br>
<small class="text-muted">登录后可获得更多翻译次数</small>
</p>
<a href="/login" class="btn btn-primary btn-sm">登录获取更多</a>
{% endif %}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">✨ 功能特点</h5>
<ul class="list-unstyled">
<li>✅ 自动翻译缓存，相同文件秒出结果</li>
<li>✅ 支持自定义翻译要求</li>
<li>✅ 原文译文对比查看</li>
<li>✅ 翻译历史记录</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 上传区域 -->
<div class="card shadow">
<div class="card-header bg-primary text-white">
<h4 class="mb-0">📤 上传PDF文件</h4>
</div>
<div class="card-body">
<form id="uploadForm">
<div class="mb-3">
<label class="form-label">选择PDF文件（最大{{ max_pages }}页）</label>
<input type="file" class="form-control" id="pdfFile" name="file" accept=".pdf" required>
<div class="form-text">支持英文PDF翻译为中文</div>
</div>
{% if user %}
<div class="mb-3">
<label class="form-label">翻译要求（可选）</label>
<textarea class="form-control" id="instruction" name="instruction" rows="2"
placeholder="例如：保持专业术语原文、使用口语化表达等"></textarea>
</div>
{% endif %}
<button type="submit" class="btn btn-primary btn-lg w-100" id="submitBtn">
<span id="btnText">开始翻译</span>
<span id="btnSpinner" class="spinner-border spinner-border-sm" style="display:none"></span>
</button>
</form>
</div>
</div>
<!-- 翻译进度 -->
<div id="progressSection" class="card mt-4" style="display:none">
<div class="card-header">
<h5 class="mb-0">🔄 翻译进度</h5>
</div>
<div class="card-body">
<div class="progress mb-3">
<div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%">0%</div>
</div>
<p id="progressMessage" class="text-muted">等待开始...</p>
<div id="cacheNotice" class="alert alert-success" style="display:none">
✅ 使用缓存结果，无需重新翻译
</div>
</div>
</div>
<!-- 翻译结果 -->
<div id="resultSection" class="card mt-4" style="display:none">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">📝 翻译结果</h5>
<div>
<button class="btn btn-outline-primary btn-sm" id="viewCompare">对比查看</button>
<button class="btn btn-success btn-sm" id="downloadBtn">下载结果</button>
</div>
</div>
<div class="card-body">
<div id="resultContent" class="translation-content"></div>
{% if user %}
<div class="mt-3">
<label class="form-label">不满意？重新翻译</label>
<textarea class="form-control" id="retranslateInstruction" rows="2"
placeholder="输入新的翻译要求，如：更口语化、保留更多原文术语等"></textarea>
<button class="btn btn-outline-secondary mt-2" id="retranslateBtn">重新翻译</button>
</div>
{% endif %}
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-light py-4 mt-5">
<div class="container text-center">
<p class="text-muted">PDF翻译助手 v1.0.0 | 基于本地LLM服务</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/main.js"></script>
</body>
</html>
templates/login.html
+80
View File
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 - PDF翻译助手</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body class="bg-light">
<nav class="navbar navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">📄 PDF翻译助手</a>
</div>
</nav>
<div class="auth-form">
<h3 class="text-center mb-4">登录</h3>
<form id="loginForm">
<div class="mb-3">
<label class="form-label">用户名</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label class="form-label">密码</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary w-100">登录</button>
</form>
<hr>
<p class="text-center text-muted">
还没有账号？ <a href="/register">立即注册</a>
</p>
<div class="alert alert-info mt-3">
<strong>注册福利：</strong>
<ul class="mb-0">
<li>每日翻译次数提升至10次</li>
<li>单文件最大50页</li>
<li>翻译历史记录</li>
<li>支持重新翻译</li>
</ul>
</div>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', async function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
try {
const response = await fetch('/login', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({username, password})
});
const result = await response.json();
if (!response.ok) {
throw new Error(result.error || '登录失败');
}
// 登录成功，跳转首页
window.location.href = '/';
} catch (error) {
alert('登录失败: ' + error.message);
}
});
</script>
</body>
</html>
templates/pricing.html
+195
View File
@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会员套餐 - PDF翻译助手</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">📄 PDF翻译助手</a>
<div class="navbar-nav ms-auto">
<a class="nav-link" href="/">首页</a>
<a class="nav-link" href="/login">登录</a>
</div>
</div>
</nav>
<main class="container my-5">
<h2 class="text-center mb-5">会员套餐</h2>
<div class="row justify-content-center">
<!-- 基础会员 -->
<div class="col-md-4 mb-4">
<div class="card pricing-card h-100">
<div class="card-body text-center">
<h4 class="card-title">基础会员</h4>
<div class="price my-3">¥29<small>/月</small></div>
<ul class="features text-start">
<li>✅ 每日翻译50次</li>
<li>✅ 单文件最大100页</li>
<li>✅ 翻译历史记录</li>
<li>✅ 优先处理队列</li>
<li>✅ 导出PDF格式</li>
</ul>
<button class="btn btn-outline-primary w-100 mt-3">立即购买</button>
</div>
</div>
</div>
<!-- 专业会员 -->
<div class="col-md-4 mb-4">
<div class="card pricing-card h-100 border-primary">
<div class="card-header bg-primary text-white text-center">
<strong>推荐</strong>
</div>
<div class="card-body text-center">
<h4 class="card-title">专业会员</h4>
<div class="price my-3">¥99<small>/月</small></div>
<ul class="features text-start">
<li>✅ 每日翻译200次</li>
<li>✅ 单文件最大500页</li>
<li>✅ 所有基础会员功能</li>
<li>✅ 批量翻译</li>
<li>✅ 自定义术语库</li>
</ul>
<button class="btn btn-primary w-100 mt-3">立即购买</button>
</div>
</div>
</div>
<!-- 企业会员 -->
<div class="col-md-4 mb-4">
<div class="card pricing-card h-100">
<div class="card-body text-center">
<h4 class="card-title">企业会员</h4>
<div class="price my-3">¥999<small>/年</small></div>
<ul class="features text-start">
<li>✅ 翻译次数无限制</li>
<li>✅ 页数无限制</li>
<li>✅ 所有功能解锁</li>
<li>✅ 专属客服支持</li>
<li>✅ API接口调用</li>
</ul>
<button class="btn btn-outline-primary w-100 mt-3">联系购买</button>
</div>
</div>
</div>
</div>
<!-- 功能对比表 -->
<div class="card mt-5">
<div class="card-header">
<h4 class="mb-0">功能对比</h4>
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>功能</th>
<th>访客</th>
<th>免费用户</th>
<th>基础会员</th>
<th>专业会员</th>
<th>企业会员</th>
</tr>
</thead>
<tbody>
<tr>
<td>每日翻译次数</td>
<td>3次</td>
<td>10次</td>
<td>50次</td>
<td>200次</td>
<td>无限制</td>
</tr>
<tr>
<td>单文件最大页数</td>
<td>20页</td>
<td>50页</td>
<td>100页</td>
<td>500页</td>
<td>无限制</td>
</tr>
<tr>
<td>翻译缓存</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
</tr>
<tr>
<td>翻译历史</td>
<td class="text-danger">❌</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
</tr>
<tr>
<td>重新翻译</td>
<td class="text-danger">❌</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
</tr>
<tr>
<td>对比查看</td>
<td class="text-danger">❌</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
</tr>
<tr>
<td>导出PDF</td>
<td class="text-danger">❌</td>
<td class="text-danger">❌</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
</tr>
<tr>
<td>批量翻译</td>
<td class="text-danger">❌</td>
<td class="text-danger">❌</td>
<td class="text-danger">❌</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
</tr>
<tr>
<td>自定义术语</td>
<td class="text-danger">❌</td>
<td class="text-danger">❌</td>
<td class="text-danger">❌</td>
<td class="text-success">✅</td>
<td class="text-success">✅</td>
</tr>
<tr>
<td>API调用</td>
<td class="text-danger">❌</td>
<td class="text-danger">❌</td>
<td class="text-danger">❌</td>
<td class="text-danger">❌</td>
<td class="text-success">✅</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
templates/register.html
+82
View File
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册 - PDF翻译助手</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body class="bg-light">
<nav class="navbar navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">📄 PDF翻译助手</a>
</div>
</nav>
<div class="auth-form">
<h3 class="text-center mb-4">注册账号</h3>
<form id="registerForm">
<div class="mb-3">
<label class="form-label">用户名</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label class="form-label">邮箱</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label class="form-label">密码</label>
<input type="password" class="form-control" id="password" name="password" required minlength="6">
<div class="form-text">密码至少6位</div>
</div>
<button type="submit" class="btn btn-primary w-100">注册</button>
</form>
<hr>
<p class="text-center text-muted">
已有账号？ <a href="/login">立即登录</a>
</p>
</div>
<script>
document.getElementById('registerForm').addEventListener('submit', async function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
if (password.length < 6) {
alert('密码至少6位');
return;
}
try {
const response = await fetch('/register', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({username, email, password})
});
const result = await response.json();
if (!response.ok) {
throw new Error(result.error || '注册失败');
}
alert('注册成功！');
window.location.href = '/';
} catch (error) {
alert('注册失败: ' + error.message);
}
});
</script>
</body>
</html>
templates/translation.html
+157
View File
@@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻译详情 - PDF翻译助手</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">📄 PDF翻译助手</a>
<div class="navbar-nav ms-auto">
{% if user %}
<span class="nav-link text-light">👋 {{ user.username }}</span>
<a class="nav-link" href="/logout">退出</a>
{% endif %}
</div>
</div>
</nav>
<main class="container my-5">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h4 class="mb-0">{{ translation.original_filename }}</h4>
<div>
<a href="/api/download/{{ translation.id }}" class="btn btn-success btn-sm">下载结果</a>
<button class="btn btn-outline-primary btn-sm" id="toggleCompare">切换对比</button>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<small class="text-muted">
页数: {{ translation.page_count }} |
时间: {{ translation.created_at.strftime('%Y-%m-%d %H:%M') }} |
{% if translation.from_cache %}
<span class="text-success">来自缓存</span>
{% endif %}
</small>
</div>
<div id="resultContent" class="translation-content">
加载中...
</div>
{% if user %}
<hr>
<div class="mt-3">
<h5>重新翻译</h5>
<textarea class="form-control" id="retranslateInstruction" rows="2"
placeholder="输入新的翻译要求，如：更口语化、保留更多原文术语等"></textarea>
<button class="btn btn-primary mt-2" id="retranslateBtn">重新翻译</button>
</div>
{% endif %}
</div>
</div>
</main>
<script>
// 加载翻译结果
const translationId = {{ translation.id }};
let showCompare = false;
async function loadResult() {
try {
const response = await fetch(`/api/result/${translationId}`);
const result = await response.json();
document.getElementById('resultContent').innerHTML = renderMarkdown(result.content);
} catch (error) {
document.getElementById('resultContent').innerHTML = '加载失败: ' + error.message;
}
}
// 切换对比视图
document.getElementById('toggleCompare').addEventListener('click', async function() {
showCompare = !showCompare;
if (showCompare) {
try {
const response = await fetch(`/api/compare/${translationId}`);
const result = await response.json();
document.getElementById('resultContent').innerHTML = `
<div class="compare-container">
<div class="compare-panel original">
<h5>原文</h5>
<div>${escapeHtml(result.original)}</div>
</div>
<div class="compare-panel translated">
<h5>译文</h5>
<div>${renderMarkdown(result.translated)}</div>
</div>
</div>
`;
} catch (error) {
alert('加载对比失败');
}
} else {
loadResult();
}
});
// 重新翻译
document.getElementById('retranslateBtn')?.addEventListener('click', async function() {
const instruction = document.getElementById('retranslateInstruction').value;
if (!instruction.trim()) {
alert('请输入翻译要求');
return;
}
try {
const response = await fetch(`/api/retranslate/${translationId}`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({instruction: instruction})
});
const result = await response.json();
if (!response.ok) {
throw new Error(result.error);
}
alert('重译任务已创建，请稍后查看');
window.location.reload();
} catch (error) {
alert('重译失败: ' + error.message);
}
});
// 简单Markdown渲染
function renderMarkdown(text) {
text = text.replace(/^## (.*)$/gm, '<h2>$1</h2>');
text = text.replace(/^# (.*)$/gm, '<h1>$1</h1>');
text = text.replace(/^---$/gm, '<hr>');
text = text.replace(/^> (.*)$/gm, '<blockquote>$1</blockquote>');
text = text.replace(/\n\n/g, '</p><p>');
text = '<p>' + text + '</p>';
return text;
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// 初始化加载
loadResult();
</script>
</body>
</html>