Spaces:

gleisonnanet
/

king-translate

Running

App Files Files Community

gleison commited on Mar 15

Commit

671a925

1 Parent(s): f554f59

added frontend

Browse files

Files changed (2) hide show

main.py +17 -1
static/index.html +430 -0

main.py CHANGED Viewed

@@ -9,8 +9,17 @@ from enum import Enum
 from transformers import M2M100Tokenizer, M2M100ForConditionalGeneration
 import torch
 import uvicorn
 from fastapi.middleware.cors import CORSMiddleware
 app = FastAPI(docs_url="/")
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -36,7 +45,14 @@ def load_model(model: str = 'facebook/m2m100_418M' , cache_dir: str = "models/")
     model.eval()
     return tokenizer, model
 # aparentemente temos um problema ao carregar o modelo então vou tentar carregar no start da aplicação para não dar time-out na request
-load_model()
 @app.post("/translate")
 async def translate(request: TranslationRequest):

 from transformers import M2M100Tokenizer, M2M100ForConditionalGeneration
 import torch
 import uvicorn
+from fastapi.responses import HTMLResponse, FileResponse
 from fastapi.middleware.cors import CORSMiddleware
+from enum import Enum
+from fastapi.staticfiles import StaticFiles
+os.makedirs("static", exist_ok=True)
 app = FastAPI(docs_url="/")
+app.mount("/static", StaticFiles(directory="static"), name="static")
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
     model.eval()
     return tokenizer, model
 # aparentemente temos um problema ao carregar o modelo então vou tentar carregar no start da aplicação para não dar time-out na request
+# load_model()
+@app.get("/", response_class=FileResponse)
+async def read_index():
+    """
+    Serve o arquivo index.html da pasta static
+    """
+    return FileResponse("static/index.html")
 @app.post("/translate")
 async def translate(request: TranslationRequest):

static/index.html ADDED Viewed

	@@ -0,0 +1,430 @@

+<!DOCTYPE html>
+<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">
+                            <option value="en">Inglês</option>
+                            <option value="pt" selected>Português</option>
+                            <option value="es">Espanhol</option>
+                            <option value="fr">Francês</option>
+                            <option value="de">Alemão</option>
+                            <option value="it">Italiano</option>
+                            <option value="ja">Japonês</option>
+                            <option value="zh">Chinês</option>
+                            <option value="ru">Russo</option>
+                            <option value="ar">Árabe</option>
+                            <!-- 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">
+                            <option value="en" selected>Inglês</option>
+                            <option value="pt">Português</option>
+                            <option value="es">Espanhol</option>
+                            <option value="fr">Francês</option>
+                            <option value="de">Alemão</option>
+                            <option value="it">Italiano</option>
+                            <option value="ja">Japonês</option>
+                            <option value="zh">Chinês</option>
+                            <option value="ru">Russo</option>
+                            <option value="ar">Árabe</option>
+                            <!-- 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>&copy; 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('http://localhost:7860/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!');
+            });
+        });
+    </script>
+</body>
+</html>