Update static/script.js

static/script.js

@@ -4,6 +4,12 @@ document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
 document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
 document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
 document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
+
+
+
+
+
+
 //quand on clique sur le boutton resumer ------------------------
 function loadResumerPage() {
     document.body.style.setProperty('--background-image', "url('resumer2.webp')");
@@ -239,7 +245,7 @@ fileInput.addEventListener('change', function(event) {
             <option value="zh"class="a">Chinese</option>
             <option value="zu"class="a">Zulu</option>
         </select>
-        <button class="translate">TRANSLATE</button>
+        <button class="translate"  id="translateBtn">TRANSLATE</button>
     </div>
                 </div>
 
@@ -251,6 +257,31 @@ fileInput.addEventListener('change', function(event) {
             </div>
         </div>
     `;
+       // Ajout des écouteurs APRES que le HTML soit injecté
+    document.getElementById("translateBtn").addEventListener("click", uploadForTranslation);
+    const fileInput = document.getElementById("fileInput");
+    const dropText = document.getElementById("dropText");
+    const uploadIcon = document.getElementById("uploadIcon");
+
+    dropText.addEventListener("click", function (event) {
+        event.preventDefault();
+        fileInput.click();
+    });
+
+    uploadIcon.addEventListener("click", function (event) {
+        event.preventDefault();
+        fileInput.click();
+    });
+
+    fileInput.addEventListener("change", function (event) {
+        let file = event.target.files[0];
+        if (file) {
+            dropText.textContent = file.name;
+            uploadIcon.style.display = "none";
+        }
+    });
+
+    document.getElementById("backArrow").addEventListener("click", loadHomePage);
     document.body.innerHTML = "";
     document.body.appendChild(appContainer);
 
@@ -681,5 +712,86 @@ fileInput.addEventListener('change', function(event) {
         });
     
     }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+async function uploadForTranslation() {
+    let fileInput = document.getElementById("fileInput");
+    let targetLang = document.getElementById("languageSelect").value;
+    let formData = new FormData();
+    formData.append("file", fileInput.files[0]);
+    formData.append("target_lang", targetLang);
+
+    try {
+        console.log("📤 Envoi du fichier pour traduction...");
+        let response = await fetch("/translate/", {
+            method: "POST",
+            body: formData,
+            headers: { "Accept": "application/json" }
+        });
+
+        let responseText = await response.text();
+        console.log("📤 Réponse brute du serveur :", responseText);
+
+        if (!response.ok) {
+            throw new Error("Erreur de requête ! " + responseText);
+        }
+
+        let data = JSON.parse(responseText);
+        console.log("📤 Réponse JSON du serveur :", data);
+
+        let resultElement = document.createElement("div");
+        resultElement.innerText = data.translated_text ? "📝 Traduction : " + data.translated_text : "❌ Traduction non disponible.";
+        document.querySelector(".results-container").appendChild(resultElement);
+    } catch (error) {
+        console.error("❌ Erreur :", error);
+        let resultElement = document.createElement("div");
+        resultElement.innerText = "Échec de la requête ! " + error.message;
+        document.querySelector(".results-container").appendChild(resultElement);
+    }
+}
+
+
+
+
+