| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Tradutor IA com T5 (JS)</title> |
| <style> |
| :root { |
| --bg-color: #f4f6f9; |
| --card-bg: #ffffff; |
| --primary: #2563eb; |
| --primary-hover: #1d4ed8; |
| --text: #1f2937; |
| --border: #e5e7eb; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
| background-color: var(--bg-color); |
| color: var(--text); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| margin: 0; |
| padding: 20px; |
| } |
| |
| .container { |
| background-color: var(--card-bg); |
| border-radius: 12px; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| width: 100%; |
| max-width: 650px; |
| padding: 30px; |
| box-sizing: border-box; |
| } |
| |
| h1 { |
| margin-top: 0; |
| font-size: 1.5rem; |
| text-align: center; |
| } |
| |
| p.description { |
| text-align: center; |
| color: #6b7280; |
| font-size: 0.9rem; |
| margin-bottom: 24px; |
| } |
| |
| .form-group { |
| margin-bottom: 20px; |
| } |
| |
| label { |
| display: block; |
| font-weight: 600; |
| margin-bottom: 8px; |
| font-size: 0.9rem; |
| } |
| |
| textarea { |
| width: 100%; |
| height: 120px; |
| padding: 12px; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| resize: vertical; |
| font-family: inherit; |
| font-size: 1rem; |
| box-sizing: border-box; |
| } |
| |
| textarea:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
| |
| button { |
| width: 100%; |
| background-color: var(--primary); |
| color: white; |
| border: none; |
| padding: 12px; |
| border-radius: 8px; |
| font-size: 1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background-color 0.2s; |
| } |
| |
| button:hover { |
| background-color: var(--primary-hover); |
| } |
| |
| button:disabled { |
| background-color: #9ca3af; |
| cursor: not-allowed; |
| } |
| |
| .status { |
| margin-top: 15px; |
| font-size: 0.85rem; |
| color: #4b5563; |
| text-align: center; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container"> |
| <h1>Tradutor IA com T5</h1> |
| <p class="description">Insira uma frase em inglês para gerar a tradução em alemão rodando direto no seu navegador.</p> |
|
|
| <div class="form-group"> |
| <label for="inputText">Inglês:</label> |
| <textarea id="inputText" placeholder="Digite o texto em inglês aqui..."></textarea> |
| </div> |
|
|
| <button id="translateBtn">Carregando Modelo...</button> |
|
|
| <div class="form-group" style="margin-top: 20px;"> |
| <label for="outputText">Tradução em Alemão:</label> |
| <textarea id="outputText" readonly placeholder="A tradução aparecerá aqui..."></textarea> |
| </div> |
|
|
| <div id="status" class="status">Baixando bibliotecas...</div> |
| </div> |
|
|
| <script type="module"> |
| |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2'; |
| |
| const inputText = document.getElementById('inputText'); |
| const outputText = document.getElementById('outputText'); |
| const translateBtn = document.getElementById('translateBtn'); |
| const statusDiv = document.getElementById('status'); |
| |
| let generator = null; |
| |
| |
| async function initModel() { |
| try { |
| statusDiv.innerText = "Carregando modelo T5 na memória do navegador (isso pode demorar no primeiro acesso)..."; |
| translateBtn.disabled = true; |
| |
| |
| generator = await pipeline('text2text-generation', 'Xenova/t5-base'); |
| |
| statusDiv.innerText = "Modelo pronto!"; |
| translateBtn.innerText = "Traduzir"; |
| translateBtn.disabled = false; |
| } catch (error) { |
| statusDiv.innerText = "Erro ao carregar o modelo: " + error.message; |
| console.error(error); |
| } |
| } |
| |
| |
| async function traduzirTexto() { |
| const text = inputText.value.trim(); |
| if (!text) return; |
| |
| translateBtn.disabled = true; |
| translateBtn.innerText = "Traduzindo..."; |
| statusDiv.innerText = "Processando entrada..."; |
| |
| try { |
| const prompt = `translate English to German: ${text}`; |
| const output = await generator(prompt, { max_new_tokens: 512 }); |
| |
| outputText.value = output[0].generated_text; |
| statusDiv.innerText = "Tradução concluída com sucesso!"; |
| } catch (error) { |
| statusDiv.innerText = "Erro durante a tradução: " + error.message; |
| console.error(error); |
| } finally { |
| translateBtn.disabled = false; |
| translateBtn.innerText = "Traduzir"; |
| } |
| } |
| |
| |
| translateBtn.addEventListener('click', traduzirTexto); |
| |
| |
| initModel(); |
| </script> |
|
|
| </body> |
| </html> |
