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,9 +73,11 @@ 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();
     });
@@ -113,16 +115,15 @@ function loadResumerPage() {
                 return;
             }
 
-           if (data.summary) {
-           resultElement.innerHTML = 
+            if (data.summary) {
+                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 {
+            } else {
                 resultElement.innerText = "❌ Summary not available.";
             }
         } catch (error) {
@@ -179,14 +180,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');
@@ -217,8 +218,7 @@ function loadResumerPage() {
    //Quand on clique sur le boutton traduction ---------------
 
   
-ici aussi je veuxque leffet vocale lit le resultat de traduction :  resultElement.innerText = "📝 Traduction :\n " + data.translated_text; 
- function loadTraductionPage() {
+   function loadTraductionPage() {
     document.body.style.setProperty('--background-image', "url('traduction.webp')");
     let appContainer = document.createElement("div");
     appContainer.classList.add("app-container");
@@ -385,9 +385,10 @@ 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() {
@@ -409,13 +410,14 @@ 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');
@@ -437,8 +439,10 @@ 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);
@@ -480,8 +484,9 @@ 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.";
@@ -553,11 +558,10 @@ 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 = `
@@ -617,9 +621,10 @@ 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);
@@ -650,7 +655,8 @@ 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];
@@ -666,6 +672,7 @@ 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 {
@@ -695,9 +702,10 @@ 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 = `
@@ -712,25 +720,21 @@ askBtn.addEventListener('click', async () => {
      class="home-icon" 
      style="filter: brightness(0) saturate(100%) invert(71%) sepia(16%) saturate(4251%) hue-rotate(180deg) brightness(104%) contrast(91%);">
 </a>
-
             <div class="menu-section">
                 <button class="menu-btn" id="resumerButton">SUMMARIZE</button>
                 <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
                 <button class="menu-btn" id="qesdocButton">DOC-QUESTIONS</button>
             </div>
-
             <div class="menu-section">
                 <div class="menu-title">IMAGES</div>
                 <button class="menu-btn" id="interpretationButton">INTERPRETATION</button>
                 <button class="menu-btn" id="qesimgButton">IMAGES-QUESTIONS</button>
             </div>
         </div>
-
         <div class="main-content-area">
             <div class="document-container">
                 <h1 class="document-main-title">Documents Operations</h1>
                 <h2 class="document-subtitle">VISUALIZATION 📊</h2>
-
                 <div class="upload-container">
                     <div class="file-drop-zone" id="fileDropZone">
                         <label for="graphFileInput" class="file-upload-label">
@@ -753,7 +757,6 @@ askBtn.addEventListener('click', async () => {
                         <button type="button" id="generateGraphBtn" class="graph-generate-btn">Generate</button>
                     </div>
                 </div>
-
                 <div class="graph-results-container">
                     <div class="graph-results-placeholder">
                         <img id="graphResultImage" class="graph-result-img">
@@ -771,16 +774,20 @@ 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');
@@ -799,18 +806,22 @@ 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');
@@ -818,6 +829,7 @@ 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";
@@ -830,12 +842,13 @@ 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);
@@ -855,9 +868,12 @@ 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 = "";
 };
@@ -873,6 +889,7 @@ 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") {
@@ -880,6 +897,7 @@ 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;
@@ -893,17 +911,18 @@ resultImage.style.display = "block";
                 extension = 'jpg';
                 break;
 
-            default: 
+            default: // PNG par défaut
                 mimeType = 'image/png';
                 extension = 'png';
         }
 
- 
+        // Conversion et téléchargement
         canvas.toBlob((blob) => {
             downloadFile(blob, `graphique.${extension}`);
-        }, mimeType, format === 'jpg' ? 0.92 : 1); 
+        }, mimeType, format === 'jpg' ? 0.92 : 1); // Qualité à 92% pour JPG, 100% pour PNG
     };
 
+    // 7. Fonction utilitaire pour le téléchargement
     const downloadFile = (blob, filename) => {
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -915,6 +934,7 @@ resultImage.style.display = "block";
         setTimeout(() => URL.revokeObjectURL(url), 100);
     };
 
+    // Initialisation
     setupEventListeners();
 }
     
@@ -924,7 +944,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 = `
@@ -977,11 +997,12 @@ 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);
@@ -1015,7 +1036,7 @@ fileInput.addEventListener('change', function(event) {
     }
 });
 
-
+ // Appel API backend pour interprétation
 interpretButton.addEventListener('click', async function () {
     let file = fileInput.files[0];
     
@@ -1061,6 +1082,7 @@ 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 = `
@@ -1121,9 +1143,11 @@ 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);
@@ -1172,6 +1196,7 @@ 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 {