document.addEventListener("DOMContentLoaded", () => { const fileInput = document.getElementById("fileInput"); const fileNameDisplay = document.getElementById("file-name-display"); const choixLangueBtn = document.getElementById("choix-langue"); const langOptions = document.getElementById("lang-options"); const translateBtn = document.getElementById("traduction"); const resultatDiv = document.getElementById("resultat"); // Correspondance entre affichage et code langue const languageMap = { "Français": "fr", "Anglais": "en", "Allemand": "de", "Espagnol": "es", "Italien": "it", "Chinois": "zh", "Arabe": "ar" }; let selectedLanguage = ""; let uploadedFile = null; // Gestion de l'upload du fichier fileInput.addEventListener("change", (event) => { uploadedFile = event.target.files[0]; if (uploadedFile) { // Affiche le nom dans deux endroits : le bouton et sous le bouton fileNameDisplay.textContent = ` Fichier sélectionné : ${uploadedFile.name}`; resultatDiv.innerHTML = `
Fichier sélectionné : ${uploadedFile.name}
`; } }); // Toggle du menu des langues avec animation choixLangueBtn.addEventListener("click", () => { langOptions.style.display = langOptions.style.display === "block" ? "none" : "block"; langOptions.classList.toggle("fade-in"); }); // Sélection de la langue document.querySelectorAll(".lang-btn").forEach(button => { button.addEventListener("click", () => { selectedLanguage = button.getAttribute("data-lang"); // Utilise le data-lang choixLangueBtn.innerHTML = `🌍 ${button.textContent.trim()}`; langOptions.style.display = "none"; console.log("Langue sélectionnée :", selectedLanguage); // Debug }); }); // Fonction pour envoyer le fichier et récupérer la traduction async function uploadFileForTranslation() { if (!uploadedFile) { showMessage(" Aucun fichier sélectionné.", "error"); return; } if (!selectedLanguage) { showMessage(" Veuillez choisir une langue.", "error"); return; } const formData = new FormData(); formData.append("file", uploadedFile); formData.append("language", selectedLanguage); console.log("Données envoyées :", [...formData.entries()]); try { showMessage(" Traduction en cours...", "loading"); const response = await fetch("http://127.0.0.1:8000/translate", { method: "POST", body: formData }); const data = await response.json(); console.log("Réponse de l'API :", data); if (data.error) { showMessage(` Erreur : ${data.error}`, "error"); } else { showMessage(`${data.translation.replace(/\n/g, "
")}