Update static/script.js

static/script.js

@@ -8,7 +8,7 @@ document.getElementById('qesimgButton').addEventListener('click', loadImagePage)
 function loadResumerPage() {
     document.body.style.setProperty('--background-image', "url('resumer2.webp')");
 
-    // Effacer uniquement le contenu de la page sans casser le script
+
     let appContainer = document.createElement("div");
     appContainer.classList.add("app-container");
     appContainer.innerHTML = `
@@ -73,11 +73,9 @@ function loadResumerPage() {
         </div>
     `;
 
-    // Insérer la nouvelle interface sans écraser les scripts
     document.body.innerHTML = "";
     document.body.appendChild(appContainer);
 
-    // Ajouter l'événement de clic pour le bouton "RÉSUMER"
     document.querySelector('.summary-action-btn').addEventListener('click', async () => {
         await uploadDocument();
     });
@@ -116,39 +114,14 @@ function loadResumerPage() {
             }
 
            if (data.summary) {
-    resultElement.innerHTML = `
-        <div style="display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px;">
-            <button id="playVoiceBtn" style="
-                background: linear-gradient(125deg, rgba(163, 94, 237, 0.9) 0%, rgba(65, 159, 232, 0.9) 75%);
-                color: white;
-                border: none;
-                padding: 10px 16px;
-                border-radius: 12px;
-                cursor: pointer;
-                font-size: 14px;
-                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-                transition: transform 0.2s;
-            ">
-                🔊 Listen to Summary
-            </button>
-        </div>
-        <h3 class="centered-title">📝 Summary generated :</h3>
-        <br>
-        <p id="summaryText" style="font-size: 16px;">${data.summary}</p>
-    `;
-
-    document.getElementById("documentResult").dataset.summaryText = data.summary;
-    document.getElementById("downloadSection").style.display = "block";
-
-    // 🎤 Ajouter l'effet vocal
-    const playVoiceBtn = document.getElementById("playVoiceBtn");
-    playVoiceBtn.addEventListener("click", function () {
-        const textToRead = document.getElementById("summaryText").textContent;
-        const utterance = new SpeechSynthesisUtterance(textToRead);
-        utterance.lang = "en-US"; // ou "fr-FR" si ton résumé est en français
-        window.speechSynthesis.speak(utterance);
-    });
-}
+           resultElement.innerHTML = 
+                    <h3 class="centered-title">📝 Summary generated :</h3>
+                    <br>
+                    <p>${data.summary}</p>
+                ;
+                document.getElementById("documentResult").dataset.summaryText = data.summary;
+                document.getElementById("downloadSection").style.display = "block";
+            }
  else {
                 resultElement.innerText = "❌ Summary not available.";
             }
@@ -206,14 +179,14 @@ function loadResumerPage() {
         }
     });
 
-    // Reconnexion des boutons du menu latéral
+  
     document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
     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 du dropzone
+    
     const fileInput = document.getElementById('fileInput');
     const dropText = document.getElementById('dropText');
     const uploadIcon = document.getElementById('uploadIcon');
@@ -412,10 +385,9 @@ ici aussi je veuxque leffet vocale lit le resultat de traduction :  resultElemen
     document.body.innerHTML = "";
     document.body.appendChild(appContainer);
 
-    // Chargement des librairies externes
     loadExternalLibs();
 
-    // Gestion des événements
+    
     setupEventListeners();
 
     function loadExternalLibs() {
@@ -437,14 +409,13 @@ ici aussi je veuxque leffet vocale lit le resultat de traduction :  resultElemen
     }
 
     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');
@@ -466,10 +437,8 @@ ici aussi je veuxque leffet vocale lit le resultat de traduction :  resultElemen
             }
         });
 
-        // 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);
@@ -511,9 +480,8 @@ ici aussi je veuxque leffet vocale lit le resultat de traduction :  resultElemen
             
             if (data.translated_text) {
                 resultElement.innerText = "📝 Traduction :\n " + 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 = "❌ Translation not available.";
@@ -585,10 +553,11 @@ ici aussi je veuxque leffet vocale lit le resultat de traduction :  resultElemen
         URL.revokeObjectURL(url);
     }
 }
+
+//Quand on clique sur le boutton QSTDOC---------------
 function loadDocPage() {
         document.body.style.setProperty('--background-image', "url('qstdoc2.webp')");
     
-        // Créer une nouvelle structure pour ne pas écraser les événements
         let appContainer = document.createElement("div");
         appContainer.classList.add("app-container");
         appContainer.innerHTML = `
@@ -648,10 +617,9 @@ function loadDocPage() {
             </div>
         `;
     
-        // Insérer la nouvelle structure sans écraser les événements
+      
         document.body.innerHTML = "";
         document.body.appendChild(appContainer);
-      // Réassocier les événements aux boutons
         document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
         document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
         document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
@@ -682,8 +650,7 @@ fileInput.addEventListener('change', function(event) {
         uploadIcon.style.display = "none";
     }
 });
- // 👉 Fonction d'envoi de la question/document
-   // 👉 Fonction d'envoi de la question/document
+
 const askBtn = document.getElementById('askDocBtn');
 askBtn.addEventListener('click', async () => {
     const file = fileInput.files[0];
@@ -699,7 +666,6 @@ askBtn.addEventListener('click', async () => {
     formData.append("file", file);
     formData.append("question", question);
 
-    // Afficher "⏳ Analyse du document en cours..." pendant le traitement
     answerDiv.innerHTML = "⏳Document analysis in progress...";
 
     try {
@@ -729,10 +695,9 @@ askBtn.addEventListener('click', async () => {
     
     //quand on clique sur visualisation ----------------------
     function loadVisualisationPage() {
-    // 1. Configuration de l'arrière-plan
+  
     document.body.style.setProperty('--background-image', "url('visualisation.webp')");
-    
-    // 2. Création de la structure HTML
+
     const appContainer = document.createElement("div");
     appContainer.className = "app-container";
     appContainer.innerHTML = `
@@ -806,20 +771,16 @@ askBtn.addEventListener('click', async () => {
         </div>
     `;
     
-    // 3. Nettoyage et insertion
     document.body.innerHTML = "";
     document.body.appendChild(appContainer);
 
-    // 4. Gestion des événements
     const setupEventListeners = () => {
-        // Navigation
         document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
         document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
         document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
         document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
         document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
 
-        // Gestion des fichiers
         const fileInput = document.getElementById('graphFileInput');
         const dropText = document.getElementById('dropText');
         const uploadIcon = document.getElementById('uploadIcon');
@@ -838,22 +799,18 @@ askBtn.addEventListener('click', async () => {
             if (e.target.files[0]) {
                 dropText.textContent = e.target.files[0].name;
                 uploadIcon.style.display = "none";
-                // Réinitialiser l'affichage quand un nouveau fichier est sélectionné
                 document.getElementById("downloadSection").style.display = "none";
                 document.getElementById("graphResultImage").style.display = "none";
                 document.getElementById("graphPlaceholderText").textContent = "Ready to generate the chart";
             }
         });
 
-        // Génération du graphique
         document.getElementById('generateGraphBtn').addEventListener('click', generateGraph);
 
-        // Téléchargement du graphique
         document.getElementById('downloadPng').addEventListener('click', () => downloadGraph('png'));
         document.getElementById('downloadJpg').addEventListener('click', () => downloadGraph('jpg'));
     };
 
-    // 5. Fonction de génération du graphique
     const generateGraph = async () => {
         const fileInput = document.getElementById('graphFileInput');
         const graphTypeSelect = document.getElementById('graphTypeSelect');
@@ -861,7 +818,6 @@ askBtn.addEventListener('click', async () => {
         const placeholderText = document.getElementById('graphPlaceholderText');
         const downloadSection = document.getElementById("downloadSection");
 
-        // Validation
         if (!fileInput.files[0]) {
             placeholderText.textContent = "⚠️No file selected";
             downloadSection.style.display = "none";
@@ -874,13 +830,12 @@ askBtn.addEventListener('click', async () => {
             return;
         }
 
-        // Préparation de l'interface
         resultImage.style.display = "none";
         downloadSection.style.display = "none";
         placeholderText.textContent = "⏳ Graph generation in progress...";
 
         try {
-            // Envoi des données
+          
             const formData = new FormData();
             formData.append("file", fileInput.files[0]);
             formData.append("query", graphTypeSelect.value);
@@ -900,12 +855,9 @@ if (result.error) {
     throw new Error(result.error);
 }
 
-// Créer une URL de l'image à partir de la chaîne base64
 const imageUrl = `data:image/png;base64,${result.image_base64}`;
 
-// Afficher l'image
 resultImage.onload = () => {
-    // Afficher les options de téléchargement une fois l'image chargée
     document.getElementById("downloadSection").style.display = "block";
     placeholderText.textContent = "";
 };
@@ -921,7 +873,6 @@ resultImage.style.display = "block";
         }
     };
 
-    // 6. Fonction de téléchargement du graphique
     const downloadGraph = (format) => {
         const resultImage = document.getElementById('graphResultImage');
         if (!resultImage.src || resultImage.style.display === "none") {
@@ -929,7 +880,6 @@ resultImage.style.display = "block";
             return;
         }
 
-        // Créer un canvas pour la conversion
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
         canvas.width = resultImage.naturalWidth;
@@ -943,18 +893,17 @@ resultImage.style.display = "block";
                 extension = 'jpg';
                 break;
 
-            default: // PNG par défaut
+            default: 
                 mimeType = 'image/png';
                 extension = 'png';
         }
 
-        // Conversion et téléchargement
+ 
         canvas.toBlob((blob) => {
             downloadFile(blob, `graphique.${extension}`);
-        }, mimeType, format === 'jpg' ? 0.92 : 1); // Qualité à 92% pour JPG, 100% pour PNG
+        }, mimeType, format === 'jpg' ? 0.92 : 1); 
     };
 
-    // 7. Fonction utilitaire pour le téléchargement
     const downloadFile = (blob, filename) => {
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -966,7 +915,6 @@ resultImage.style.display = "block";
         setTimeout(() => URL.revokeObjectURL(url), 100);
     };
 
-    // Initialisation
     setupEventListeners();
 }
     
@@ -976,7 +924,7 @@ resultImage.style.display = "block";
 function loadInterpretationPage() {
         document.body.style.setProperty('--background-image', "url('interpreter.webp')");
     
-        // Créer une nouvelle structure pour ne pas écraser les événements
+       
         let appContainer = document.createElement("div");
         appContainer.classList.add("app-container");
         appContainer.innerHTML = `
@@ -1029,12 +977,11 @@ function loadInterpretationPage() {
                 </div>
             </div>
         `;
-    
-        // Insérer la nouvelle structure sans écraser les événements
+
         document.body.innerHTML = "";
         document.body.appendChild(appContainer);
     
-        // Réassocier les événements aux boutons
+
         document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
         document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
         document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
@@ -1068,7 +1015,7 @@ fileInput.addEventListener('change', function(event) {
     }
 });
 
- // Appel API backend pour interprétation
+
 interpretButton.addEventListener('click', async function () {
     let file = fileInput.files[0];
     
@@ -1114,7 +1061,6 @@ interpretButton.addEventListener('click', async function () {
     function loadImagePage() {
         document.body.style.setProperty('--background-image', "url('qstimage.webp')");
     
-        // Créer une nouvelle structure pour éviter d’écraser les événements
         let appContainer = document.createElement("div");
         appContainer.classList.add("app-container");
         appContainer.innerHTML = `
@@ -1175,11 +1121,9 @@ interpretButton.addEventListener('click', async function () {
             </div>
         `;
     
-        // Insérer la nouvelle structure sans écraser les événements
         document.body.innerHTML = "";
         document.body.appendChild(appContainer);
         
-        // Réassocier les événements aux boutons
         document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
         document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
         document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
@@ -1228,7 +1172,6 @@ sendBtn.addEventListener("click", async function () {
         formData.append("file", file);
         formData.append("question", question);
 
-        // Afficher le message de chargement
         resultContainer.innerHTML = `<p class="placeholder-text" style="text-align: center; color: black; font-weight: bold;">⏳ Waiting for the answer...</p>`;
 
         try {