Projet1 / index.html
didierdewasseige's picture
Update index.html
7c30189 verified
Raw
History Blame Contribute Delete
2.12 kB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Traducteur IA</title>
<link rel="stylesheet" href="style.css">
<script type="module">
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0';
window.pipeline = pipeline;
document.getElementById('Statut').innerText = "🟢 IA prête à l'action !";
document.getElementById('Statut').style.color = "#2ecc71";
</script>
</head>
<body>
<div class="container">
<h2>Traducteur IA Privé</h2>
<div id="Statut">⏳ Chargement de l'IA en cours...</div>
<p class="consigne">Entrez votre phrase en français :</p>
<textarea id="texteSaisi" rows="4" placeholder="Écrivez votre texte ici..."></textarea>
<button onclick="analyserTexte()">Traduire en Anglais</button>
<div id="resultat"></div>
</div>
<script>
let translator;
async function analyserTexte() {
const texte = document.getElementById('texteSaisi').value;
const divResultat = document.getElementById('resultat');
if(!texte.trim()) {
divResultat.innerText = "Veuillez saisir du texte.";
return;
}
divResultat.style.display = "block";
divResultat.innerText = "⚡ Traduction en cours...";
try {
if (!translator) {
translator = await window.pipeline('translation', 'Xenova/opus-mt-fr-en');
}
const result = await translator(texte);
const texteTraduit = result[0].translation_text;
divResultat.innerHTML = `<strong>Traduction :</strong><br>${texteTraduit}`;
} catch (error) {
divResultat.innerText = "❌ Erreur lors de la traduction.";
console.error(error);
}
}
</script>
</body>
</html>