Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TranslateWorld - Traduza para qualquer idioma</title> | |
| <style> | |
| :root { | |
| --primary: #4361ee; | |
| --secondary: #3f37c9; | |
| --light: #f8f9fa; | |
| --dark: #212529; | |
| --success: #4cc9f0; | |
| --warning: #f72585; | |
| --info: #4895ef; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| color: var(--dark); | |
| } | |
| header { | |
| background: var(--primary); | |
| color: white; | |
| padding: 1rem; | |
| text-align: center; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| flex-grow: 1; | |
| } | |
| .app-card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 2rem; | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| margin-bottom: 2rem; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| h2 { | |
| font-size: 1.8rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary); | |
| } | |
| p { | |
| margin-bottom: 1rem; | |
| line-height: 1.6; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.5rem; | |
| } | |
| @media (max-width: 768px) { | |
| .grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 200px; | |
| padding: 1rem; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| resize: vertical; | |
| margin-bottom: 1rem; | |
| font-size: 1rem; | |
| } | |
| .language-selector { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 1rem; | |
| gap: 1rem; | |
| } | |
| .language-selector select { | |
| flex: 1; | |
| padding: 0.8rem; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| background-color: white; | |
| } | |
| .model-selection { | |
| margin-bottom: 1rem; | |
| } | |
| .model-selection label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: bold; | |
| } | |
| .model-selection select { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| background-color: white; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 0.8rem 1.5rem; | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: bold; | |
| } | |
| .btn:hover { | |
| background-color: var(--secondary); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .action-buttons { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| } | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| margin: 1rem 0; | |
| } | |
| .loading-spinner { | |
| width: 30px; | |
| height: 30px; | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .feature-card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-card h3 { | |
| color: var(--primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .feature-icon { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| text-align: center; | |
| padding: 1rem; | |
| } | |
| .cta { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: white; | |
| padding: 2rem; | |
| text-align: center; | |
| border-radius: 12px; | |
| margin-top: 2rem; | |
| } | |
| .cta h2 { | |
| color: white; | |
| } | |
| .cta .btn { | |
| background: white; | |
| color: var(--primary); | |
| margin-top: 1rem; | |
| } | |
| .cta .btn:hover { | |
| background: var(--light); | |
| } | |
| .badges { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .badge { | |
| background: var(--info); | |
| color: white; | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 4px; | |
| font-size: 0.8rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>TranslateWorld</h1> | |
| <p>Tradução avançada para mais de 100 idiomas</p> | |
| </header> | |
| <div class="container"> | |
| <div class="app-card"> | |
| <h2>Tradutor Universal</h2> | |
| <p>Traduza qualquer texto para múltiplos idiomas com qualidade superior usando modelos de IA avançados.</p> | |
| <div class="model-selection"> | |
| <label for="model">Selecione o modelo de tradução:</label> | |
| <select id="model"> | |
| <option value="facebook/m2m100_418M">M2M100 Padrão (418M) - Mais rápido</option> | |
| <option value="facebook/m2m100_1.2B">M2M100 Premium (1.2B) - Mais preciso</option> | |
| </select> | |
| </div> | |
| <div class="grid"> | |
| <div> | |
| <h3>Texto Original</h3> | |
| <div class="language-selector"> | |
| <select id="sourceLanguage"> | |
| <!-- Adicione mais idiomas conforme necessário --> | |
| </select> | |
| </div> | |
| <textarea id="sourceText" placeholder="Digite seu texto aqui..."></textarea> | |
| </div> | |
| <div> | |
| <h3>Tradução</h3> | |
| <div class="language-selector"> | |
| <select id="targetLanguage"> | |
| <!-- Adicione mais idiomas conforme necessário --> | |
| </select> | |
| </div> | |
| <textarea id="targetText" placeholder="A tradução aparecerá aqui..." readonly></textarea> | |
| </div> | |
| </div> | |
| <div class="loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Traduzindo...</p> | |
| </div> | |
| <div class="action-buttons"> | |
| <button id="translateBtn" class="btn">Traduzir</button> | |
| <button id="copyBtn" class="btn">Copiar Tradução</button> | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🌍</div> | |
| <h3>Mais de 100 Idiomas</h3> | |
| <p>Traduza entre mais de 100 idiomas com precisão e naturalidade.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🤖</div> | |
| <h3>Modelos Premium</h3> | |
| <p>Utilize modelos de IA avançados para traduções de alta qualidade.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">⚡</div> | |
| <h3>Rápido e Eficiente</h3> | |
| <p>Traduções instantâneas para textos de qualquer tamanho.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🔍</div> | |
| <h3>Preserva o Contexto</h3> | |
| <p>Mantém o significado e as nuances do texto original.</p> | |
| </div> | |
| </div> | |
| <div class="cta"> | |
| <h2>Aprenda a Criar Seu Próprio Tradutor com IA</h2> | |
| <p>Adquira nosso eBook e aprenda a desenvolver aplicações de tradução avançadas utilizando modelos de IA.</p> | |
| <button class="btn">Saiba Mais</button> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2025 TranslateWorld. Todos os direitos reservados.</p> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const translateBtn = document.getElementById('translateBtn'); | |
| const copyBtn = document.getElementById('copyBtn'); | |
| const sourceText = document.getElementById('sourceText'); | |
| const targetText = document.getElementById('targetText'); | |
| const sourceLanguage = document.getElementById('sourceLanguage'); | |
| const targetLanguage = document.getElementById('targetLanguage'); | |
| const modelSelect = document.getElementById('model'); | |
| const loading = document.querySelector('.loading'); | |
| translateBtn.addEventListener('click', async function() { | |
| if (!sourceText.value.trim()) { | |
| alert('Por favor, digite algum texto para traduzir.'); | |
| return; | |
| } | |
| loading.style.display = 'block'; | |
| try { | |
| const response = await fetch('https://gleisonnanet-king-translate.hf.space/translate', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| user_input: sourceText.value, | |
| source_lang: sourceLanguage.value, | |
| target_lang: targetLanguage.value, | |
| model: modelSelect.value | |
| }), | |
| }); | |
| const data = await response.json(); | |
| if (data.error) { | |
| alert('Erro na tradução: ' + data.error); | |
| } else { | |
| targetText.value = data.translation; | |
| } | |
| } catch (error) { | |
| alert('Erro ao conectar com o servidor de tradução. Verifique se o servidor está em execução.'); | |
| console.error('Error:', error); | |
| } finally { | |
| loading.style.display = 'none'; | |
| } | |
| }); | |
| copyBtn.addEventListener('click', function() { | |
| if (!targetText.value.trim()) { | |
| alert('Não há tradução para copiar.'); | |
| return; | |
| } | |
| targetText.select(); | |
| document.execCommand('copy'); | |
| alert('Tradução copiada para a área de transferência!'); | |
| }); | |
| }); | |
| const languages = [ | |
| { code: 'af', name: 'Afrikaans' }, | |
| { code: 'am', name: 'Amharic' }, | |
| { code: 'ar', name: 'Arabic' }, | |
| { code: 'ast', name: 'Asturian' }, | |
| { code: 'az', name: 'Azerbaijani' }, | |
| { code: 'ba', name: 'Bashkir' }, | |
| { code: 'be', name: 'Belarusian' }, | |
| { code: 'bg', name: 'Bulgarian' }, | |
| { code: 'bn', name: 'Bengali' }, | |
| { code: 'br', name: 'Breton' }, | |
| { code: 'bs', name: 'Bosnian' }, | |
| { code: 'ca', name: 'Catalan; Valencian' }, | |
| { code: 'ceb', name: 'Cebuano' }, | |
| { code: 'cs', name: 'Czech' }, | |
| { code: 'cy', name: 'Welsh' }, | |
| { code: 'da', name: 'Danish' }, | |
| { code: 'de', name: 'German' }, | |
| { code: 'el', name: 'Greeek' }, | |
| { code: 'en', name: 'English' }, | |
| { code: 'es', name: 'Spanish' }, | |
| { code: 'et', name: 'Estonian' }, | |
| { code: 'fa', name: 'Persian' }, | |
| { code: 'ff', name: 'Fulah' }, | |
| { code: 'fi', name: 'Finnish' }, | |
| { code: 'fr', name: 'French' }, | |
| { code: 'fy', name: 'Western Frisian' }, | |
| { code: 'ga', name: 'Irish' }, | |
| { code: 'gd', name: 'Gaelic; Scottish Gaelic' }, | |
| { code: 'gl', name: 'Galician' }, | |
| { code: 'gu', name: 'Gujarati' }, | |
| { code: 'ha', name: 'Hausa' }, | |
| { code: 'he', name: 'Hebrew' }, | |
| { code: 'hi', name: 'Hindi' }, | |
| { code: 'hr', name: 'Croatian' }, | |
| { code: 'ht', name: 'Haitian; Haitian Creole' }, | |
| { code: 'hu', name: 'Hungarian' }, | |
| { code: 'hy', name: 'Armenian' }, | |
| { code: 'id', name: 'Indonesian' }, | |
| { code: 'ig', name: 'Igbo' }, | |
| { code: 'ilo', name: 'Iloko' }, | |
| { code: 'is', name: 'Icelandic' }, | |
| { code: 'it', name: 'Italian' }, | |
| { code: 'ja', name: 'Japanese' }, | |
| { code: 'jv', name: 'Javanese' }, | |
| { code: 'ka', name: 'Georgian' }, | |
| { code: 'kk', name: 'Kazakh' }, | |
| { code: 'km', name: 'Central Khmer' }, | |
| { code: 'kn', name: 'Kannada' }, | |
| { code: 'ko', name: 'Korean' }, | |
| { code: 'lb', name: 'Luxembourgish; Letzeburgesch' }, | |
| { code: 'lg', name: 'Ganda' }, | |
| { code: 'ln', name: 'Lingala' }, | |
| { code: 'lo', name: 'Lao' }, | |
| { code: 'lt', name: 'Lithuanian' }, | |
| { code: 'lv', name: 'Latvian' }, | |
| { code: 'mg', name: 'Malagasy' }, | |
| { code: 'mk', name: 'Macedonian' }, | |
| { code: 'ml', name: 'Malayalam' }, | |
| { code: 'mn', name: 'Mongolian' }, | |
| { code: 'mr', name: 'Marathi' }, | |
| { code: 'ms', name: 'Malay' }, | |
| { code: 'my', name: 'Burmese' }, | |
| { code: 'ne', name: 'Nepali' }, | |
| { code: 'nl', name: 'Dutch; Flemish' }, | |
| { code: 'no', name: 'Norwegian' }, | |
| { code: 'ns', name: 'Northern Sotho' }, | |
| { code: 'oc', name: 'Occitan (post 1500)' }, | |
| { code: 'or', name: 'Oriya' }, | |
| { code: 'pa', name: 'Panjabi; Punjabi' }, | |
| { code: 'pl', name: 'Polish' }, | |
| { code: 'ps', name: 'Pushto; Pashto' }, | |
| { code: 'pt', name: 'Portuguese' }, | |
| { code: 'ro', name: 'Romanian; Moldavian; Moldovan' }, | |
| { code: 'ru', name: 'Russian' }, | |
| { code: 'sd', name: 'Sindhi' }, | |
| { code: 'si', name: 'Sinhala; Sinhalese' }, | |
| { code: 'sk', name: 'Slovak' }, | |
| { code: 'sl', name: 'Slovenian' }, | |
| { code: 'so', name: 'Somali' }, | |
| { code: 'sq', name: 'Albanian' }, | |
| { code: 'sr', name: 'Serbian' }, | |
| { code: 'ss', name: 'Swati' }, | |
| { code: 'su', name: 'Sundanese' }, | |
| { code: 'sv', name: 'Swedish' }, | |
| { code: 'sw', name: 'Swahili' }, | |
| { code: 'ta', name: 'Tamil' }, | |
| { code: 'th', name: 'Thai' }, | |
| { code: 'tl', name: 'Tagalog' }, | |
| { code: 'tn', name: 'Tswana' }, | |
| { code: 'tr', name: 'Turkish' }, | |
| { code: 'uk', name: 'Ukrainian' }, | |
| { code: 'ur', name: 'Urdu' }, | |
| { code: 'uz', name: 'Uzbek' }, | |
| { code: 'vi', name: 'Vietnamese' }, | |
| { code: 'wo', name: 'Wolof' }, | |
| { code: 'xh', name: 'Xhosa' }, | |
| { code: 'yi', name: 'Yiddish' }, | |
| { code: 'yo', name: 'Yoruba' }, | |
| { code: 'zh', name: 'Chinese' }, | |
| { code: 'zu', name: 'Zulu' } | |
| ]; | |
| // Seleciona os elementos select | |
| const sourceSelect = document.getElementById("sourceLanguage"); | |
| const targetSelect = document.getElementById("targetLanguage"); | |
| // Função para criar options e adicioná-los ao select | |
| const addOptions = (selectElement) => { | |
| languages.forEach(lang => { | |
| const option = document.createElement("option"); | |
| option.value = lang.code; | |
| option.textContent = lang.name; | |
| selectElement.appendChild(option); | |
| }); | |
| }; | |
| // Carrega as options em ambos os selects | |
| if (sourceSelect && targetSelect) { | |
| addOptions(sourceSelect); | |
| addOptions(targetSelect); | |
| } | |
| </script> | |
| </body> | |
| </html> |