Spaces:

luck210
/

gemma

Running

App Files Files Community

luck210 commited on Mar 27

Commit

a0e137a

verified ·

1 Parent(s): dac3f07

Update app.py

Browse files

Files changed (1) hide show

app.py +52 -29

app.py CHANGED Viewed

@@ -5,12 +5,12 @@ from transformers import pipeline
 # Création de l'application FastAPI
 app = FastAPI(title="Traduction Anglais → Français")
-# Chargement du modèle une seule fois pour éviter les rechargements inutiles
-translator = pipeline("translation_en_to_fr", model="facebook/wmt19-en-fr")
 @app.get("/", response_class=HTMLResponse)
-def home():
-    # Interface Web (HTML, CSS, JS intégrés)
     return """
     <!DOCTYPE html>
     <html lang="fr">
@@ -19,36 +19,58 @@ def home():
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Traduction Anglais → Français</title>
         <style>
-            body { font-family: Arial, sans-serif; text-align: center; background-color: #f4f4f4; }
-            .container { max-width: 500px; margin: 50px auto; padding: 20px; background: white; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
-            textarea { width: 100%; height: 100px; margin-bottom: 10px; padding: 10px; border-radius: 5px; border: 1px solid #ccc; }
-            button { padding: 10px 20px; border: none; background: #007BFF; color: white; font-size: 16px; border-radius: 5px; cursor: pointer; }
-            button:hover { background: #0056b3; }
-            .result { margin-top: 20px; padding: 10px; background: #e0ffe0; border-radius: 5px; }
         </style>
     </head>
     <body>
-        <div class="container">
-            <h2>Traduction Anglais → Français</h2>
-            <textarea id="inputText" placeholder="Entrez du texte en anglais..."></textarea>
-            <button onclick="translateText()">Traduire</button>
-            <div id="output" class="result"></div>
-        </div>
         <script>
             async function translateText() {
-                const text = document.getElementById("inputText").value;
-                if (!text) {
-                    alert("Veuillez entrer du texte !");
                     return;
                 }
-                const response = await fetch("/translate/?text=" + encodeURIComponent(text), { method: "POST" });
-                const data = await response.json();
-                if (response.ok) {
-                    document.getElementById("output").innerText = "Traduction: " + data.translated;
-                } else {
-                    alert("Erreur: " + data.detail);
                 }
             }
         </script>
@@ -58,13 +80,14 @@ def home():
 @app.post("/translate/")
 def translate(text: str):
-    """Traduit un texte de l'anglais vers le français."""
     if not text:
         raise HTTPException(status_code=400, detail="Le texte est vide.")
     try:
         translated_text = translator(text)[0]['translation_text']
         return {"original": text, "translated": translated_text}
     except Exception as e:
         raise HTTPException(status_code=500, detail=f"Erreur de traduction : {e}")

 # Création de l'application FastAPI
 app = FastAPI(title="Traduction Anglais → Français")
+# Chargement du modèle de traduction
+translator = pipeline("translation_en_to_fr", model="Helsinki-NLP/opus-mt-en-fr")
 @app.get("/", response_class=HTMLResponse)
+def serve_html():
+    """ Sert l'interface utilisateur en HTML """
     return """
     <!DOCTYPE html>
     <html lang="fr">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Traduction Anglais → Français</title>
         <style>
+            body { font-family: Arial, sans-serif; text-align: center; margin: 50px; background-color: #f4f4f4; }
+            h2 { color: #333; }
+            textarea { width: 80%; height: 100px; margin: 10px; padding: 10px; font-size: 16px; }
+            button { padding: 10px 20px; font-size: 16px; background-color: #007BFF; color: white; border: none; cursor: pointer; }
+            button:hover { background-color: #0056b3; }
+            #output { margin-top: 20px; font-size: 18px; font-weight: bold; color: #28a745; }
+            .loader { display: none; margin: 10px auto; border: 5px solid #f3f3f3; border-top: 5px solid #007BFF; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
+            @keyframes spin { 100% { transform: rotate(360deg); } }
         </style>
     </head>
     <body>
+        <h2>Traduction Anglais → Français</h2>
+        <textarea id="textInput" placeholder="Entrez votre texte en anglais..."></textarea><br>
+        <button onclick="translateText()">Traduire</button>
+        <div class="loader" id="loader"></div>
+        <p id="output"></p>
         <script>
             async function translateText() {
+                let text = document.getElementById("textInput").value;
+                let output = document.getElementById("output");
+                let loader = document.getElementById("loader");
+                if (!text.trim()) {
+                    output.innerText = "Veuillez entrer du texte !";
+                    output.style.color = "red";
                     return;
                 }
+                loader.style.display = "block";
+                output.innerText = "";
+                try {
+                    let response = await fetch("/translate/", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ text: text })
+                    });
+                    let data = await response.json();
+                    if (response.ok) {
+                        output.innerText = "Traduction : " + data.translated;
+                        output.style.color = "#28a745";
+                    } else {
+                        output.innerText = "Erreur : " + data.detail;
+                        output.style.color = "red";
+                    }
+                } catch (error) {
+                    output.innerText = "Erreur de connexion.";
+                    output.style.color = "red";
+                } finally {
+                    loader.style.display = "none";
                 }
             }
         </script>
 @app.post("/translate/")
 def translate(text: str):
+    """ Traduit un texte de l'anglais vers le français """
     if not text:
         raise HTTPException(status_code=400, detail="Le texte est vide.")
     try:
         translated_text = translator(text)[0]['translation_text']
         return {"original": text, "translated": translated_text}
     except Exception as e:
         raise HTTPException(status_code=500, detail=f"Erreur de traduction : {e}")