|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Document Translator - OpenRouter Integration</title> |
|
|
<link rel="stylesheet" href="/static/style.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<header> |
|
|
<h1>📄 Document Translator</h1> |
|
|
<p>Translate PDF and DOCX documents using AI models from OpenRouter</p> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<div class="upload-section"> |
|
|
<div class="upload-area" id="uploadArea"> |
|
|
<div class="upload-content"> |
|
|
<div class="upload-icon">📁</div> |
|
|
<p>Drop your PDF or DOCX file here, or click to browse</p> |
|
|
<input type="file" id="fileInput" accept=".pdf,.docx" hidden> |
|
|
<button type="button" class="browse-btn" onclick="document.getElementById('fileInput').click()"> |
|
|
Browse Files |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="file-info" id="fileInfo" style="display: none;"> |
|
|
<div class="file-details"> |
|
|
<span class="file-name" id="fileName"></span> |
|
|
<span class="file-size" id="fileSize"></span> |
|
|
</div> |
|
|
<button type="button" class="remove-btn" id="removeFile">✕</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="options-section"> |
|
|
<div class="form-group" id="modelGroup"> |
|
|
<label for="modelSelect">Translation Model:</label> |
|
|
<select id="modelSelect" required> |
|
|
<option value="">Loading model...</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="model-info" id="modelInfo" style="display: none;"> |
|
|
<div class="info-card"> |
|
|
<span class="model-icon">🤖</span> |
|
|
<div class="model-details"> |
|
|
<strong>Google Gemini 2.5 Pro</strong> |
|
|
<p>Advanced AI model optimized for high-quality document translation</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-row"> |
|
|
<div class="form-group"> |
|
|
<label for="sourceLanguage">Source Language:</label> |
|
|
<select id="sourceLanguage"> |
|
|
<option value="auto">Auto-detect</option> |
|
|
<option value="en">English</option> |
|
|
<option value="ar">Arabic</option> |
|
|
<option value="es">Spanish</option> |
|
|
<option value="fr">French</option> |
|
|
<option value="de">German</option> |
|
|
<option value="it">Italian</option> |
|
|
<option value="pt">Portuguese</option> |
|
|
<option value="ru">Russian</option> |
|
|
<option value="ja">Japanese</option> |
|
|
<option value="ko">Korean</option> |
|
|
<option value="zh">Chinese</option> |
|
|
<option value="hi">Hindi</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="targetLanguage">Target Language:</label> |
|
|
<select id="targetLanguage"> |
|
|
<option value="en">English</option> |
|
|
<option value="ar">Arabic</option> |
|
|
<option value="es">Spanish</option> |
|
|
<option value="fr">French</option> |
|
|
<option value="de">German</option> |
|
|
<option value="it">Italian</option> |
|
|
<option value="pt">Portuguese</option> |
|
|
<option value="ru">Russian</option> |
|
|
<option value="ja">Japanese</option> |
|
|
<option value="ko">Korean</option> |
|
|
<option value="zh">Chinese</option> |
|
|
<option value="hi">Hindi</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button type="button" id="translateBtn" class="translate-btn" disabled> |
|
|
<span class="btn-text">🔄 Translate Document</span> |
|
|
<span class="btn-spinner" style="display: none;">⏳ Translating...</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="progress-section" id="progressSection" style="display: none;"> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" id="progressFill"></div> |
|
|
</div> |
|
|
<p class="progress-text" id="progressText">Preparing translation...</p> |
|
|
</div> |
|
|
|
|
|
<div class="results-section" id="resultsSection" style="display: none;"> |
|
|
<h3>Translation Complete! ✅</h3> |
|
|
|
|
|
<div class="report-card"> |
|
|
<div class="report-header"> |
|
|
<h4>Translation Report</h4> |
|
|
</div> |
|
|
<div class="report-content" id="reportContent"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="download-section"> |
|
|
<div class="download-item"> |
|
|
<div class="download-info"> |
|
|
<span class="download-label">📄 Original File</span> |
|
|
<span class="download-name" id="originalFileName"></span> |
|
|
</div> |
|
|
<button class="download-btn" id="downloadOriginal">Download</button> |
|
|
</div> |
|
|
|
|
|
<div class="download-item"> |
|
|
<div class="download-info"> |
|
|
<span class="download-label">📄 Translated File</span> |
|
|
<span class="download-name" id="translatedFileName"></span> |
|
|
</div> |
|
|
<button class="download-btn" id="downloadTranslated">Download</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button type="button" class="new-translation-btn" id="newTranslationBtn"> |
|
|
🔄 Translate Another Document |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="error-section" id="errorSection" style="display: none;"> |
|
|
<div class="error-card"> |
|
|
<div class="error-header"> |
|
|
<span class="error-icon">❌</span> |
|
|
<span class="error-title">Translation Failed</span> |
|
|
</div> |
|
|
<div class="error-message" id="errorMessage"></div> |
|
|
<button type="button" class="retry-btn" id="retryBtn">Try Again</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer> |
|
|
<p>Powered by <a href="https://openrouter.ai" target="_blank">OpenRouter</a> • |
|
|
Built for <a href="https://huggingface.co" target="_blank">Hugging Face Spaces</a></p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script src="/static/app.js"></script> |
|
|
</body> |
|
|
</html> |
