add

static/script.js

@@ -117,7 +117,7 @@ fileInput.addEventListener('change', function(event) {
         <div class="main-content-area">
             <div class="document-container">
                 <h1 class="document-main-title">Opérations sur documents</h1>
-                <h2 class="document-subtitle">TRANSLATE </h2>
+                <h2 class="document-subtitle">TRANSLATE</h2>
                 <div class="upload-container">
                     <div class="file-drop-zone" id="fileDropZone">
                         <label for="translateFile" class="file-upload-label">
@@ -237,6 +237,15 @@ fileInput.addEventListener('change', function(event) {
                 <div class="results-container">
                     <div class="results-placeholder">
                         <p class="placeholder-text" id="translateResult">Le résultat apparaîtra ici...</p>
+                        <div id="downloadSection" style="display: none; margin-top: 20px;">
+                            <h3 style="color: white; margin-bottom: 10px;">Télécharger la traduction</h3>
+                            <div style="display: flex; gap: 10px;">
+                                <button id="downloadPdf" class="download-btn">PDF</button>
+                                <button id="downloadWord" class="download-btn">Word</button>
+                                <button id="downloadPpt" class="download-btn">PowerPoint</button>
+                                <button id="downloadTxt" class="download-btn">Texte</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -245,86 +254,178 @@ fileInput.addEventListener('change', function(event) {
     document.body.innerHTML = "";
     document.body.appendChild(appContainer);
 
-    document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
-    document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
-    document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
-    document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
-    document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
-    
-    const fileInput = document.getElementById('translateFile');
-    const dropText = document.getElementById('dropText');
-    const uploadIcon = document.getElementById('uploadIcon');
-
-    dropText.addEventListener('click', function(event) {
-        event.preventDefault();  
-        event.stopPropagation(); 
-        fileInput.click();
-    });
-
-    uploadIcon.addEventListener('click', function(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        fileInput.click();
-    });
-
-    fileInput.addEventListener('change', function(event) {
-        let file = event.target.files[0];
-        if (file) {
-            dropText.textContent = file.name;
-            uploadIcon.style.display = "none";
+    // Chargement des librairies externes
+    loadExternalLibs();
+
+    // Gestion des événements
+    setupEventListeners();
+
+    function loadExternalLibs() {
+        if (!window.jspdf) {
+            const script = document.createElement('script');
+            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
+            document.head.appendChild(script);
         }
-    });
+        if (!window.docx) {
+            const script = document.createElement('script');
+            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/docx/7.8.2/docx.min.js';
+            document.head.appendChild(script);
+        }
+        if (!window.PptxGenJS) {
+            const script = document.createElement('script');
+            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/PptxGenJS/3.11.0/pptxgen.min.js';
+            document.head.appendChild(script);
+        }
+    }
 
-    // Ajout de l'événement pour le bouton de traduction
-    document.getElementById('translateButton').addEventListener('click', uploadForTranslation);
+    function setupEventListeners() {
+        // Navigation
+        document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
+        document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
+        document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
+        document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
+        document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
+
+        // Gestion des fichiers
+        const fileInput = document.getElementById('translateFile');
+        const dropText = document.getElementById('dropText');
+        const uploadIcon = document.getElementById('uploadIcon');
+
+        dropText.addEventListener('click', (e) => {
+            e.preventDefault();
+            fileInput.click();
+        });
+
+        uploadIcon.addEventListener('click', (e) => {
+            e.preventDefault();
+            fileInput.click();
+        });
+
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files[0]) {
+                dropText.textContent = e.target.files[0].name;
+                uploadIcon.style.display = "none";
+            }
+        });
+
+        // Traduction
+        document.getElementById('translateButton').addEventListener('click', uploadForTranslation);
+
+        // Téléchargements
+        document.getElementById('downloadPdf').addEventListener('click', downloadAsPdf);
+        document.getElementById('downloadWord').addEventListener('click', downloadAsWord);
+        document.getElementById('downloadPpt').addEventListener('click', downloadAsPowerPoint);
+        document.getElementById('downloadTxt').addEventListener('click', downloadAsText);
+    }
 
     async function uploadForTranslation() {
-        let fileInput = document.getElementById("translateFile");
-        let targetLang = document.getElementById("targetLanguageSelect").value;
+        const fileInput = document.getElementById("translateFile");
+        const targetLang = document.getElementById("targetLanguageSelect").value;
+        const resultElement = document.getElementById("translateResult");
         
         if (!fileInput.files[0]) {
-            document.getElementById("translateResult").innerText = "Veuillez sélectionner un fichier";
+            resultElement.innerText = "Veuillez sélectionner un fichier";
             return;
         }
         
         if (!targetLang) {
-            document.getElementById("translateResult").innerText = "Veuillez sélectionner une langue";
+            resultElement.innerText = "Veuillez sélectionner une langue";
             return;
         }
-        
-        let formData = new FormData();
+         
+        const 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/", {  
+            resultElement.innerText = "Traduction en cours...";
+            const 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);
+                throw new Error("Erreur de requête: " + await response.text());
             }
 
-            let data = JSON.parse(responseText);
-            console.log("📤 Réponse JSON du serveur :", data);
-
-            let resultElement = document.getElementById("translateResult");
+            const data = await response.json();
+            
             if (data.translated_text) {
                 resultElement.innerText = "📝 Traduction : " + data.translated_text;
+                // Stocker le texte traduit pour le téléchargement
+                resultElement.dataset.translatedText = data.translated_text;
+                // Afficher les options de téléchargement
+                document.getElementById("downloadSection").style.display = "block";
             } else {
                 resultElement.innerText = "❌ Traduction non disponible.";
             }
         } catch (error) {
-            console.error("❌ Erreur :", error);
-            document.getElementById("translateResult").innerText = "Échec de la requête ! " + error.message;
+            console.error("Erreur:", error);
+            resultElement.innerText = "Échec de la traduction: " + error.message;
         }
     }
+
+    function downloadAsPdf() {
+        const text = document.getElementById("translateResult").dataset.translatedText;
+        if (!text) return;
+
+        const { jsPDF } = window.jspdf;
+        const doc = new jsPDF();
+        doc.text(text, 10, 10);
+        doc.save('traduction.pdf');
+    }
+
+    async function downloadAsWord() {
+        const text = document.getElementById("translateResult").dataset.translatedText;
+        if (!text) return;
+
+        const { Document, Paragraph, TextRun, Packer } = window.docx;
+        const doc = new Document({
+            sections: [{
+                properties: {},
+                children: [
+                    new Paragraph({
+                        children: [
+                            new TextRun(text)
+                        ]
+                    })
+                ]
+            }]
+        });
+
+        Packer.toBlob(doc).then(blob => {
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'traduction.docx';
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+    }
+
+    function downloadAsPowerPoint() {
+        const text = document.getElementById("translateResult").dataset.translatedText;
+        if (!text) return;
+
+        const pptx = new window.PptxGenJS();
+        const slide = pptx.addSlide();
+        slide.addText(text, { x: 1, y: 1, w: 8, h: 4 });
+        pptx.writeFile({ fileName: 'traduction.pptx' });
+    }
+
+    function downloadAsText() {
+        const text = document.getElementById("translateResult").dataset.translatedText;
+        if (!text) return;
+
+        const blob = new Blob([text], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'traduction.txt';
+        a.click();
+        URL.revokeObjectURL(url);
+    }
 }
 function loadDocPage() {
     document.body.style.setProperty('--background-image', "url('qstdoc2.webp')");