| <!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> |
