166 lines
7.8 KiB
HTML
166 lines
7.8 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>PDF翻译助手 - 英文PDF翻译中文</title>
|
||
<link rel="icon" href="/static/img/favicon.svg" type="image/svg+xml">
|
||
<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>
|
||
{% for feat in features %}
|
||
<li>{% if feat.has %}✅{% else %}❌{% endif %} {{ feat.name }}</li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% if not user or user.user_type == 'free' %}
|
||
<small class="text-muted">❌ 标记为会员专属功能，<a href="/pricing">升级会员</a>解锁</small>
|
||
{% endif %}
|
||
</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> |