|
|
from fastapi import FastAPI, HTTPException |
|
|
from fastapi.responses import HTMLResponse |
|
|
from transformers import pipeline |
|
|
|
|
|
|
|
|
app = FastAPI(title="Traduction Anglais → Français") |
|
|
|
|
|
|
|
|
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"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<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> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
|
|
|
@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}") |
|
|
|
|
|
|
|
|
|
