|
|
<!DOCTYPE html> |
|
|
<html lang="zh"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Translation Assistant</title> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); |
|
|
--secondary-gradient: linear-gradient(135deg, #f472b6 0%, #c084fc 100%); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background: #f8fafc; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: var(--primary-gradient); |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.gradient-border { |
|
|
position: relative; |
|
|
background: linear-gradient(#fff, #fff) padding-box, |
|
|
var(--primary-gradient) border-box; |
|
|
border: 2px solid transparent; |
|
|
border-radius: 0.75rem; |
|
|
} |
|
|
|
|
|
.glass-effect { |
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background: var(--primary-gradient); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.progress-bar-animation { |
|
|
background-size: 200% 200%; |
|
|
animation: gradientMove 2s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes gradientMove { |
|
|
0% { background-position: 200% 0; } |
|
|
100% { background-position: -200% 0; } |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="glass-effect fixed w-full top-0 z-50 border-b border-gray-200"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-500 flex items-center justify-center"> |
|
|
<i class="fas fa-language text-white"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold gradient-text">TranslateAI</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 font-medium" data-target="text-trans"> |
|
|
<i class="fas fa-text-width mr-2"></i>文本翻译 |
|
|
</a> |
|
|
<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 font-medium" data-target="file-trans"> |
|
|
<i class="fas fa-file-alt mr-2"></i>文件翻译 |
|
|
</a> |
|
|
<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 font-medium" data-target="about"> |
|
|
<i class="fas fa-info-circle mr-2"></i>关于我们 |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center md:hidden"> |
|
|
<button id="mobile-menu-btn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden animated fadeIn faster"> |
|
|
<div class="glass-effect border-t border-gray-200 py-2"> |
|
|
<a href="#" class="block px-4 py-3 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600" data-target="text-trans"> |
|
|
<i class="fas fa-text-width mr-2"></i>文本翻译 |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-3 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600" data-target="file-trans"> |
|
|
<i class="fas fa-file-alt mr-2"></i>文件翻译 |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-3 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600" data-target="about"> |
|
|
<i class="fas fa-info-circle mr-2"></i>关于我们 |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="pt-20 px-4 pb-12"> |
|
|
|
|
|
<div id="text-trans" class="page max-w-7xl mx-auto"> |
|
|
<div class="mb-8"> |
|
|
<h1 class="text-3xl font-bold gradient-text mb-2">智能文本翻译</h1> |
|
|
<p class="text-gray-600">支持多语言实时翻译，让沟通无国界</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-6"> |
|
|
|
|
|
<div class="lg:w-64"> |
|
|
<div class="gradient-border bg-white p-6 space-y-6"> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">源语言</label> |
|
|
<select id="source-lang" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring focus:ring-indigo-200"> |
|
|
<option value="AUTO">自动检测</option> |
|
|
<option value="ZH">中文</option> |
|
|
<option value="EN">英语</option> |
|
|
<option value="JA">日语</option> |
|
|
<option value="KO">韩语</option> |
|
|
<option value="FR">法语</option> |
|
|
<option value="DE">德语</option> |
|
|
<option value="ES">西班牙语</option> |
|
|
<option value="RU">俄语</option> |
|
|
<option value="IT">意大利语</option> |
|
|
<option value="PT">葡萄牙语</option> |
|
|
<option value="VI">越南语</option> |
|
|
<option value="ID">印尼语</option> |
|
|
<option value="TH">泰语</option> |
|
|
<option value="MS">马来语</option> |
|
|
<option value="AR">阿拉伯语</option> |
|
|
<option value="HI">印地语</option> |
|
|
|
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">目标语言</label> |
|
|
<select id="target-lang" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring focus:ring-indigo-200"> |
|
|
<option value="ZH">中文</option> |
|
|
<option value="EN">英语</option> |
|
|
<option value="JA">日语</option> |
|
|
<option value="KO">韩语</option> |
|
|
<option value="FR">法语</option> |
|
|
<option value="DE">德语</option> |
|
|
<option value="ES">西班牙语</option> |
|
|
<option value="RU">俄语</option> |
|
|
<option value="IT">意大利语</option> |
|
|
<option value="PT">葡萄牙语</option> |
|
|
<option value="VI">越南语</option> |
|
|
<option value="ID">印尼语</option> |
|
|
<option value="TH">泰语</option> |
|
|
<option value="MS">马来语</option> |
|
|
<option value="AR">阿拉伯语</option> |
|
|
<option value="HI">印地语</option> |
|
|
|
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="switch-lang" class="w-full py-2 px-4 rounded-lg border-2 border-indigo-500 text-indigo-600 hover:bg-indigo-50 transition-colors flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-exchange-alt"></i> |
|
|
<span>切换语言</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="gradient-border bg-white p-6"> |
|
|
<div class="mb-4 flex items-center justify-between"> |
|
|
<span class="text-sm font-medium text-gray-700">原文</span> |
|
|
<button id="clear-text" class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<textarea |
|
|
id="source-text" |
|
|
class="w-full h-48 p-4 border-0 focus:ring-0 resize-none rounded-lg bg-gray-50" |
|
|
placeholder="请输入要翻译的文本..." |
|
|
></textarea> |
|
|
<div class="mt-2 flex justify-between text-sm text-gray-500"> |
|
|
<span id="char-count">0/10000</span> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-border bg-white p-6"> |
|
|
<div class="mb-4 flex items-center justify-between"> |
|
|
<span class="text-sm font-medium text-gray-700">译文</span> |
|
|
<button id="copy-result" class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div id="target-text" class="w-full h-48 p-4 border-0 focus:ring-0 resize-none rounded-lg bg-gray-50 overflow-auto"></div> |
|
|
<div class="mt-2 flex justify-end"> |
|
|
<div class="flex space-x-4 text-sm"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="translate-btn" class="mt-6 w-full py-4 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-language text-xl"></i> |
|
|
<span class="text-lg font-medium">立即翻译</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="file-trans" class="page max-w-7xl mx-auto hidden"> |
|
|
<div class="mb-8"> |
|
|
<h1 class="text-3xl font-bold gradient-text mb-2">文档智能翻译</h1> |
|
|
<p class="text-gray-600">支持多种格式文档翻译，保留原文档排版</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-6"> |
|
|
|
|
|
<div class="lg:w-64 space-y-6"> |
|
|
|
|
|
<div class="gradient-border bg-white p-6 space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">源语言</label> |
|
|
<select id="file-source-lang" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring focus:ring-indigo-200"> |
|
|
<option value="AUTO">自动检测</option> |
|
|
<option value="ZH">中文</option> |
|
|
<option value="EN">英语</option> |
|
|
<option value="JA">日语</option> |
|
|
<option value="KO">韩语</option> |
|
|
<option value="FR">法语</option> |
|
|
<option value="DE">德语</option> |
|
|
<option value="ES">西班牙语</option> |
|
|
<option value="RU">俄语</option> |
|
|
<option value="IT">意大利语</option> |
|
|
<option value="PT">葡萄牙语</option> |
|
|
<option value="VI">越南语</option> |
|
|
<option value="ID">印尼语</option> |
|
|
<option value="TH">泰语</option> |
|
|
<option value="MS">马来语</option> |
|
|
<option value="AR">阿拉伯语</option> |
|
|
<option value="HI">印地语</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">目标语言</label> |
|
|
<select id="file-target-lang" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring focus:ring-indigo-200"> |
|
|
<option value="ZH">中文</option> |
|
|
<option value="EN">英语</option> |
|
|
<option value="JA">日语</option> |
|
|
<option value="KO">韩语</option> |
|
|
<option value="FR">法语</option> |
|
|
<option value="DE">德语</option> |
|
|
<option value="ES">西班牙语</option> |
|
|
<option value="RU">俄语</option> |
|
|
<option value="IT">意大利语</option> |
|
|
<option value="PT">葡萄牙语</option> |
|
|
<option value="VI">越南语</option> |
|
|
<option value="ID">印尼语</option> |
|
|
<option value="TH">泰语</option> |
|
|
<option value="MS">马来语</option> |
|
|
<option value="AR">阿拉伯语</option> |
|
|
<option value="HI">印地语</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-border bg-white p-6 space-y-4"> |
|
|
<button id="upload-btn" class="w-full py-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-cloud-upload-alt"></i> |
|
|
<span>上传文件</span> |
|
|
</button> |
|
|
<button id="file-translate-btn" class="w-full py-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center space-x-2" disabled> |
|
|
<i class="fas fa-language"></i> |
|
|
<span>开始翻译</span> |
|
|
</button> |
|
|
<button id="export-btn" class="w-full py-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center space-x-2" disabled> |
|
|
<i class="fas fa-download"></i> |
|
|
<span>导出文档</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="progress-panel" class="gradient-border bg-white p-6 hidden"> |
|
|
<h3 class="text-sm font-medium text-gray-700 mb-4">翻译进度</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>总段落数</span> |
|
|
<span id="total-segments">0</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>已翻译</span> |
|
|
<span id="translated-segments">0</span> |
|
|
</div> |
|
|
<div class="h-2 bg-gray-100 rounded-full overflow-hidden"> |
|
|
<div id="progress-bar" class="h-full bg-gradient-to-r from-indigo-500 to-purple-500 progress-bar-animation w-0"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
|
|
|
<div id="upload-zone" class="gradient-border bg-white h-96 flex flex-col items-center justify-center cursor-pointer group"> |
|
|
<div class="text-center p-8 rounded-2xl"> |
|
|
<div class="w-20 h-20 mx-auto mb-6 floating"> |
|
|
<i class="fas fa-cloud-upload-alt text-6xl text-indigo-500 group-hover:text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-medium text-gray-700 mb-2">拖放文件到这里或点击上传</h3> |
|
|
<p class="text-gray-500">支持 TXT、DOCX、PDF、Markdown 格式</p> |
|
|
<p class="text-sm text-gray-400 mt-2">最大支持 20MB</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="file-preview" class="hidden"> |
|
|
<div class="gradient-border bg-white"> |
|
|
<div class="border-b border-gray-200 p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-file-alt text-indigo-500 text-xl"></i> |
|
|
<span id="file-name" class="font-medium"></span> |
|
|
</div> |
|
|
<button id="close-preview" class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-700 mb-4 flex items-center"> |
|
|
<i class="fas fa-file-alt mr-2 text-indigo-500"></i>原文 |
|
|
</h3> |
|
|
<div id="file-content" class="space-y-4"></div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-700 mb-4 flex items-center"> |
|
|
<i class="fas fa-language mr-2 text-indigo-500"></i>译文 |
|
|
</h3> |
|
|
<div id="file-translation" class="space-y-4"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="about" class="page max-w-7xl mx-auto hidden"> |
|
|
<div class="mb-12 text-center"> |
|
|
<h1 class="text-4xl font-bold gradient-text mb-4">关于 TranslateAI</h1> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto"> |
|
|
我们致力于打造最智能、最准确的翻译助手，让语言不再成为沟通的障碍 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mb-16"> |
|
|
<div class="card-hover gradient-border bg-white p-6 rounded-xl text-center"> |
|
|
<div class="w-16 h-16 mx-auto mb-6 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-brain text-2xl text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-4">AI 智能翻译</h3> |
|
|
<p class="text-gray-600">采用先进的人工智能技术，提供准确、流畅的翻译服务</p> |
|
|
</div> |
|
|
|
|
|
<div class="card-hover gradient-border bg-white p-6 rounded-xl text-center"> |
|
|
<div class="w-16 h-16 mx-auto mb-6 rounded-full bg-purple-100 flex items-center justify-center"> |
|
|
<i class="fas fa-file-alt text-2xl text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-4">多格式支持</h3> |
|
|
<p class="text-gray-600">支持txt、docx、pdf等多种文件格式，保留原文档排版</p> |
|
|
</div> |
|
|
|
|
|
<div class="card-hover gradient-border bg-white p-6 rounded-xl text-center"> |
|
|
<div class="w-16 h-16 mx-auto mb-6 rounded-full bg-pink-100 flex items-center justify-center"> |
|
|
<i class="fas fa-globe text-2xl text-pink-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-4">多语言支持</h3> |
|
|
<p class="text-gray-600">支持全球100+种语言互译，满足各类翻译需求</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-4 gap-6 mb-16"> |
|
|
<div class="gradient-border bg-white p-6 rounded-xl text-center"> |
|
|
<div class="text-3xl font-bold gradient-text mb-2">100+</div> |
|
|
<div class="text-gray-600">支持语言</div> |
|
|
</div> |
|
|
<div class="gradient-border bg-white p-6 rounded-xl text-center"> |
|
|
<div class="text-3xl font-bold gradient-text mb-2">99%</div> |
|
|
<div class="text-gray-600">翻译准确率</div> |
|
|
</div> |
|
|
<div class="gradient-border bg-white p-6 rounded-xl text-center"> |
|
|
<div class="text-3xl font-bold gradient-text mb-2">1M+</div> |
|
|
<div class="text-gray-600">用户数量</div> |
|
|
</div> |
|
|
<div class="gradient-border bg-white p-6 rounded-xl text-center"> |
|
|
<div class="text-3xl font-bold gradient-text mb-2">10M+</div> |
|
|
<div class="text-gray-600">日翻译量</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-border bg-white p-8 rounded-xl text-center"> |
|
|
<h2 class="text-2xl font-bold mb-6">联系我们</h2> |
|
|
<div class="flex justify-center space-x-8"> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition-colors"> |
|
|
<i class="fab fa-github text-2xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition-colors"> |
|
|
<i class="fab fa-twitter text-2xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition-colors"> |
|
|
<i class="fas fa-envelope text-2xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="export-modal" class="fixed inset-0 z-50 hidden"> |
|
|
<div class="absolute inset-0 bg-gray-500 bg-opacity-75"></div> |
|
|
<div class="fixed inset-0 z-10 overflow-y-auto"> |
|
|
<div class="flex min-h-full items-end justify-center p-4 sm:items-center"> |
|
|
<div class="relative gradient-border bg-white w-full max-w-md p-6 rounded-xl"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">导出设置</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">导出格式</label> |
|
|
<select id="export-format" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring focus:ring-indigo-200"> |
|
|
<option value="txt">纯文本 (TXT)</option> |
|
|
<option value="docx">Word文档 (DOCX)</option> |
|
|
<option value="md">Markdown (MD)</option> |
|
|
<option value="html">网页 (HTML)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">导出模式</label> |
|
|
<div class="space-y-2"> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="radio" name="export-mode" value="translated" class="text-indigo-600"> |
|
|
<span class="ml-2">仅译文</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center ml-4"> |
|
|
<input type="radio" name="export-mode" value="parallel" class="text-indigo-600"> |
|
|
<span class="ml-2">对照模式</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-end space-x-3"> |
|
|
<button id="cancel-export" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"> |
|
|
取消 |
|
|
</button> |
|
|
<button id="confirm-export" class="px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-lg hover:opacity-90"> |
|
|
导出 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
|
|
|
const API_ENDPOINTS = { |
|
|
TRANSLATE_TEXT: '/translate_text', |
|
|
UPLOAD_FILE: '/upload', |
|
|
TRANSLATE_FILE: '/translate', |
|
|
EXPORT: '/export' |
|
|
}; |
|
|
|
|
|
|
|
|
const utils = { |
|
|
showError(message) { |
|
|
|
|
|
alert(message); |
|
|
}, |
|
|
|
|
|
async copyToClipboard(text) { |
|
|
try { |
|
|
await navigator.clipboard.writeText(text); |
|
|
return true; |
|
|
} catch (err) { |
|
|
console.error('Copy failed:', err); |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
|
|
|
formatBytes(bytes) { |
|
|
if (bytes === 0) return '0 B'; |
|
|
const k = 1024; |
|
|
const sizes = ['B', 'KB', 'MB', 'GB']; |
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
|
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const api = { |
|
|
async translateText(text, sourceLang, targetLang) { |
|
|
try { |
|
|
const response = await fetch(API_ENDPOINTS.TRANSLATE_TEXT, { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
text, |
|
|
source_lang: sourceLang, |
|
|
target_lang: targetLang |
|
|
}) |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`HTTP error! status: ${response.status}`); |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
return data; |
|
|
} catch (error) { |
|
|
console.error('Translation failed:', error); |
|
|
throw error; |
|
|
} |
|
|
}, |
|
|
|
|
|
async uploadFile(file, sourceLang, targetLang) { |
|
|
const formData = new FormData(); |
|
|
formData.append('file', file); |
|
|
formData.append('source_lang', sourceLang); |
|
|
formData.append('target_lang', targetLang); |
|
|
|
|
|
try { |
|
|
const response = await fetch(API_ENDPOINTS.UPLOAD_FILE, { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`HTTP error! status: ${response.status}`); |
|
|
} |
|
|
|
|
|
return await response.json(); |
|
|
} catch (error) { |
|
|
console.error('File upload failed:', error); |
|
|
throw error; |
|
|
} |
|
|
}, |
|
|
|
|
|
async translateFile(segments, sourceLang, targetLang) { |
|
|
try { |
|
|
const response = await fetch(API_ENDPOINTS.TRANSLATE_FILE, { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
segments, |
|
|
source_lang: sourceLang, |
|
|
target_lang: targetLang |
|
|
}) |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`HTTP error! status: ${response.status}`); |
|
|
} |
|
|
|
|
|
return await response.json(); |
|
|
} catch (error) { |
|
|
console.error('File translation failed:', error); |
|
|
throw error; |
|
|
} |
|
|
}, |
|
|
|
|
|
async exportDocument(segments, format, mode, sourceFileType) { |
|
|
try { |
|
|
const response = await fetch(API_ENDPOINTS.EXPORT, { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
segments, |
|
|
format, |
|
|
mode, |
|
|
source_file_type: sourceFileType |
|
|
}) |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`HTTP error! status: ${response.status}`); |
|
|
} |
|
|
|
|
|
return await response.blob(); |
|
|
} catch (error) { |
|
|
console.error('Export failed:', error); |
|
|
throw error; |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
class TextTranslation { |
|
|
constructor() { |
|
|
this.sourceText = document.getElementById('source-text'); |
|
|
this.targetText = document.getElementById('target-text'); |
|
|
this.translateBtn = document.getElementById('translate-btn'); |
|
|
this.sourceLang = document.getElementById('source-lang'); |
|
|
this.targetLang = document.getElementById('target-lang'); |
|
|
this.charCount = document.getElementById('char-count'); |
|
|
this.clearBtn = document.getElementById('clear-text'); |
|
|
this.copyBtn = document.getElementById('copy-result'); |
|
|
this.switchBtn = document.getElementById('switch-lang'); |
|
|
|
|
|
this.init(); |
|
|
} |
|
|
|
|
|
init() { |
|
|
this.bindEvents(); |
|
|
this.updateCharCount(); |
|
|
} |
|
|
|
|
|
bindEvents() { |
|
|
this.sourceText.addEventListener('input', () => this.updateCharCount()); |
|
|
this.translateBtn.addEventListener('click', () => this.translate()); |
|
|
this.clearBtn.addEventListener('click', () => this.clearText()); |
|
|
this.copyBtn.addEventListener('click', () => this.copyResult()); |
|
|
this.switchBtn.addEventListener('click', () => this.switchLanguages()); |
|
|
} |
|
|
|
|
|
updateCharCount() { |
|
|
const count = this.sourceText.value.length; |
|
|
this.charCount.textContent = `${count}/10000`; |
|
|
this.translateBtn.disabled = count === 0; |
|
|
} |
|
|
|
|
|
clearText() { |
|
|
this.sourceText.value = ''; |
|
|
this.targetText.textContent = ''; |
|
|
this.updateCharCount(); |
|
|
} |
|
|
|
|
|
async copyResult() { |
|
|
const success = await utils.copyToClipboard(this.targetText.textContent); |
|
|
if (success) { |
|
|
this.copyBtn.textContent = '已复制'; |
|
|
setTimeout(() => { |
|
|
this.copyBtn.textContent = '复制结果'; |
|
|
}, 2000); |
|
|
} |
|
|
} |
|
|
|
|
|
switchLanguages() { |
|
|
if (this.sourceLang.value === 'auto') return; |
|
|
[this.sourceLang.value, this.targetLang.value] = |
|
|
[this.targetLang.value, this.sourceLang.value]; |
|
|
} |
|
|
|
|
|
async translate() { |
|
|
if (!this.sourceText.value.trim()) return; |
|
|
|
|
|
this.translateBtn.disabled = true; |
|
|
try { |
|
|
const result = await api.translateText( |
|
|
this.sourceText.value, |
|
|
this.sourceLang.value, |
|
|
this.targetLang.value |
|
|
); |
|
|
|
|
|
this.targetText.textContent = result.translated; |
|
|
} catch (error) { |
|
|
utils.showError('翻译失败，请稍后重试'); |
|
|
} finally { |
|
|
this.translateBtn.disabled = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
class FileTranslation { |
|
|
constructor() { |
|
|
this.uploadZone = document.getElementById('upload-zone'); |
|
|
this.filePreview = document.getElementById('file-preview'); |
|
|
this.uploadBtn = document.getElementById('upload-btn'); |
|
|
this.translateBtn = document.getElementById('file-translate-btn'); |
|
|
this.exportBtn = document.getElementById('export-btn'); |
|
|
this.progressPanel = document.getElementById('progress-panel'); |
|
|
this.closePreviewBtn = document.getElementById('close-preview'); |
|
|
|
|
|
this.sourceLang = document.getElementById('file-source-lang'); |
|
|
this.targetLang = document.getElementById('file-target-lang'); |
|
|
|
|
|
this.currentFile = null; |
|
|
this.segments = []; |
|
|
|
|
|
this.init(); |
|
|
} |
|
|
|
|
|
init() { |
|
|
this.bindEvents(); |
|
|
this.initDragDrop(); |
|
|
} |
|
|
|
|
|
bindEvents() { |
|
|
this.uploadBtn.addEventListener('click', () => this.triggerFileInput()); |
|
|
this.translateBtn.addEventListener('click', () => this.translateFile()); |
|
|
this.exportBtn.addEventListener('click', () => this.showExportModal()); |
|
|
this.closePreviewBtn.addEventListener('click', () => this.closePreview()); |
|
|
|
|
|
|
|
|
document.getElementById('confirm-export').addEventListener('click', () => this.exportFile()); |
|
|
document.getElementById('cancel-export').addEventListener('click', () => this.hideExportModal()); |
|
|
} |
|
|
|
|
|
initDragDrop() { |
|
|
this.uploadZone.addEventListener('dragover', (e) => { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
this.uploadZone.classList.add('border-purple-600'); |
|
|
}); |
|
|
|
|
|
this.uploadZone.addEventListener('dragleave', (e) => { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
this.uploadZone.classList.remove('border-purple-600'); |
|
|
}); |
|
|
|
|
|
this.uploadZone.addEventListener('drop', async (e) => { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
this.uploadZone.classList.remove('border-purple-600'); |
|
|
|
|
|
const file = e.dataTransfer.files[0]; |
|
|
await this.handleFile(file); |
|
|
}); |
|
|
} |
|
|
|
|
|
triggerFileInput() { |
|
|
const input = document.createElement('input'); |
|
|
input.type = 'file'; |
|
|
input.accept = '.txt,.docx,.pdf,.md'; |
|
|
input.onchange = (e) => this.handleFile(e.target.files[0]); |
|
|
input.click(); |
|
|
} |
|
|
|
|
|
async handleFile(file) { |
|
|
if (!file) return; |
|
|
|
|
|
const validTypes = [ |
|
|
'text/plain', |
|
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', |
|
|
'application/pdf', |
|
|
'text/markdown' |
|
|
]; |
|
|
|
|
|
if (!validTypes.includes(file.type)) { |
|
|
utils.showError('不支持的文件格式'); |
|
|
return; |
|
|
} |
|
|
|
|
|
this.currentFile = file; |
|
|
try { |
|
|
const result = await api.uploadFile( |
|
|
file, |
|
|
this.sourceLang.value, |
|
|
this.targetLang.value |
|
|
); |
|
|
|
|
|
this.segments = result.segments; |
|
|
this.updatePreview(); |
|
|
this.translateBtn.disabled = false; |
|
|
this.showProgressPanel(); |
|
|
} catch (error) { |
|
|
utils.showError('文件上传失败，请重试'); |
|
|
} |
|
|
} |
|
|
|
|
|
updatePreview() { |
|
|
this.uploadZone.classList.add('hidden'); |
|
|
this.filePreview.classList.remove('hidden'); |
|
|
|
|
|
document.getElementById('file-name').textContent = this.currentFile.name; |
|
|
|
|
|
const contentDiv = document.getElementById('file-content'); |
|
|
contentDiv.innerHTML = this.segments.map((segment, index) => ` |
|
|
<div class="p-4 bg-gray-50 rounded"> |
|
|
<div class="text-gray-900">${segment.text}</div> |
|
|
${segment.type === 'heading' ? '<div class="text-xs text-gray-500 mt-1">标题</div>' : ''} |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
|
|
|
async translateFile() { |
|
|
if (!this.segments.length) return; |
|
|
|
|
|
this.translateBtn.disabled = true; |
|
|
try { |
|
|
const result = await api.translateFile( |
|
|
this.segments, |
|
|
this.sourceLang.value, |
|
|
this.targetLang.value |
|
|
); |
|
|
|
|
|
this.segments = result.segments; |
|
|
this.updateTranslations(); |
|
|
this.exportBtn.disabled = false; |
|
|
this.updateProgress(); |
|
|
} catch (error) { |
|
|
utils.showError('翻译失败，请重试'); |
|
|
} finally { |
|
|
this.translateBtn.disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
updateTranslations() { |
|
|
const translationDiv = document.getElementById('file-translation'); |
|
|
translationDiv.innerHTML = this.segments.map((segment, index) => ` |
|
|
<div class="p-4 bg-gray-50 rounded"> |
|
|
<div class="text-gray-900">${segment.translated || ''}</div> |
|
|
${segment.confidence ? ` |
|
|
<div class="mt-2 h-1 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-purple-600" style="width: ${segment.confidence * 100}%"></div> |
|
|
</div> |
|
|
` : ''} |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
|
|
|
showProgressPanel() { |
|
|
this.progressPanel.classList.remove('hidden'); |
|
|
this.updateProgress(); |
|
|
} |
|
|
|
|
|
updateProgress() { |
|
|
const total = this.segments.length; |
|
|
const translated = this.segments.filter(s => s.translated).length; |
|
|
|
|
|
document.getElementById('total-segments').textContent = total; |
|
|
document.getElementById('translated-segments').textContent = translated; |
|
|
document.getElementById('progress-bar').style.width = `${(translated / total * 100)}%`; |
|
|
} |
|
|
|
|
|
closePreview() { |
|
|
this.uploadZone.classList.remove('hidden'); |
|
|
this.filePreview.classList.add('hidden'); |
|
|
this.progressPanel.classList.add('hidden'); |
|
|
this.translateBtn.disabled = true; |
|
|
this.exportBtn.disabled = true; |
|
|
this.currentFile = null; |
|
|
this.segments = []; |
|
|
} |
|
|
|
|
|
showExportModal() { |
|
|
document.getElementById('export-modal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
hideExportModal() { |
|
|
document.getElementById('export-modal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
async exportFile() { |
|
|
const formatSelect = document.getElementById('export-format'); |
|
|
const selectedFormat = formatSelect.value; |
|
|
const mode = document.querySelector('input[name="export-mode"]:checked').value; |
|
|
|
|
|
|
|
|
let exportFormat; |
|
|
if (selectedFormat === 'auto') { |
|
|
|
|
|
exportFormat = this.currentFile.name.split('.').pop(); |
|
|
} else { |
|
|
|
|
|
exportFormat = selectedFormat; |
|
|
} |
|
|
|
|
|
try { |
|
|
const blob = await api.exportDocument( |
|
|
this.segments, |
|
|
exportFormat, |
|
|
mode, |
|
|
this.currentFile.name.split('.').pop() |
|
|
); |
|
|
|
|
|
|
|
|
let fileExtension = exportFormat; |
|
|
if (exportFormat === 'auto') { |
|
|
fileExtension = this.currentFile.name.split('.').pop(); |
|
|
} |
|
|
|
|
|
|
|
|
const originalName = this.currentFile.name.split('.')[0]; |
|
|
const newFileName = `translated_${originalName}.${fileExtension}`; |
|
|
|
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = newFileName; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
this.hideExportModal(); |
|
|
} catch (error) { |
|
|
utils.showError('导出失败，请重试'); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
class Navigation { |
|
|
constructor() { |
|
|
|
|
|
this.navLinks = document.querySelectorAll('a[data-target="text-trans"], a[data-target="file-trans"], a[data-target="about"]'); |
|
|
this.mobileMenuBtn = document.getElementById('mobile-menu-btn'); |
|
|
this.mobileMenu = document.getElementById('mobile-menu'); |
|
|
this.pages = { |
|
|
'text-trans': document.getElementById('text-trans'), |
|
|
'file-trans': document.getElementById('file-trans'), |
|
|
'about': document.getElementById('about') |
|
|
}; |
|
|
|
|
|
this.init(); |
|
|
} |
|
|
|
|
|
init() { |
|
|
this.bindEvents(); |
|
|
|
|
|
this.switchPage('text-trans'); |
|
|
} |
|
|
|
|
|
bindEvents() { |
|
|
|
|
|
this.mobileMenuBtn.addEventListener('click', () => { |
|
|
this.mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
this.navLinks.forEach(link => { |
|
|
link.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
const target = link.getAttribute('data-target'); |
|
|
this.switchPage(target); |
|
|
|
|
|
if(!this.mobileMenu.classList.contains('hidden')) { |
|
|
this.mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
switchPage(pageId) { |
|
|
|
|
|
Object.values(this.pages).forEach(page => { |
|
|
page.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
if(this.pages[pageId]) { |
|
|
this.pages[pageId].classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
this.navLinks.forEach(link => { |
|
|
const isActive = link.getAttribute('data-target') === pageId; |
|
|
link.classList.toggle('text-indigo-600', isActive); |
|
|
link.classList.toggle('text-gray-700', !isActive); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
new Navigation(); |
|
|
new TextTranslation(); |
|
|
new FileTranslation(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
