File size: 7,628 Bytes
0a32234 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | <!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">
<!-- Report details will be inserted here -->
</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> |