add

static/script.js

@@ -682,7 +682,8 @@ askBtn.addEventListener('click', async () => {
 }
     
     //quand on clique sur visualisation ----------------------
-     function loadVisualisationPage() {
+    //quand on clique sur visualisation ----------------------
+    function loadVisualisationPage() {
     // 1. Configuration de l'arrière-plan
     document.body.style.setProperty('--background-image', "url('visualisation.webp')");
     
@@ -695,50 +696,55 @@ askBtn.addEventListener('click', async () => {
                 <div class="logo-top">SMARTDOCS</div>
                 <div class="logo-bottom">AI</div>
             </div>
+
             <div class="menu-section">
-                <button class="menu-btn" id="resumerButton">SUMMARIZE</button>
+                <button class="menu-btn" id="resumerButton">RESUME</button>
                 <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
-                <button class="menu-btn" id="qesdocButton">DOC-QUESTIONS</button>
+                <button class="menu-btn" id="qesdocButton">QUESTION</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>
+                <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
+                <button class="menu-btn" id="qesimgButton">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>
+                <h1 class="document-main-title">Opérations sur documents</h1>
+                <h2 class="document-subtitle">VISUALISATION</h2>
+
                 <div class="upload-container">
                     <div class="file-drop-zone" id="fileDropZone">
                         <label for="graphFileInput" class="file-upload-label">
                             <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
-                            <span class="drop-text" id="dropText">Drop your file here or click to browse</span>
+                            <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
                         </label>
                         <input type="file" id="graphFileInput" class="file-input" 
                                accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
                     </div>
                     
-                    <div class="action-container">
+                    <div class="graph-action-container">
                         <select id="graphTypeSelect" class="language-dropdown">
                             <option value="">Select type</option>
-                            <option value="histplot">Histogram</option>
-                            <option value="scatterplot">Scatter plot</option>
-                            <option value="lineplot">line plot</option>
-                            <option value="barplot">bar plot</option>
-                            <option value="boxplot">box plot</option>
+                            <option value="histplot">Histogramme</option>
+                            <option value="scatterplot">Nuage de points</option>
+                            <option value="lineplot">Courbe</option>
+                            <option value="barplot">Diagramme en barres</option>
+                            <option value="boxplot">Boîte à moustaches</option>
                         </select>
-                        <button type="button" id="generateGraphBtn" class="graph-generate-btn">Generate</button>
+                        <button type="button" id="generateGraphBtn" class="graph-generate-btn">Générer</button>
                     </div>
                 </div>
+
                 <div class="graph-results-container">
                     <div class="graph-results-placeholder">
                         <img id="graphResultImage" class="graph-result-img">
-                        <p class="placeholder-text" id="graphPlaceholderText">The result will appear here...</p>
+                        <p class="placeholder-text" id="graphPlaceholderText">Le résultat apparaîtra ici...</p>
                     </div>
                     <div id="downloadSection" style="display: none; margin-top: 20px; text-align: center;">
-                        <h3 style="color: white; margin-bottom: 10px;">Download the graph</h3>
+                        <h3 style="color: white; margin-bottom: 10px;">Télécharger le graphique</h3>
                         <div style="display: flex; justify-content: center; gap: 10px;">
                             <button id="downloadPng" class="download-btn">PNG</button>
                             <button id="downloadJpg" class="download-btn">JPG</button>
@@ -806,13 +812,13 @@ askBtn.addEventListener('click', async () => {
 
         // Validation
         if (!fileInput.files[0]) {
-            placeholderText.textContent = "⚠️No file selected";
+            placeholderText.textContent = "Veuillez sélectionner un fichier";
             downloadSection.style.display = "none";
             return;
         }
 
         if (!graphTypeSelect.value) {
-            placeholderText.textContent = "⚠️No graph type selected";
+            placeholderText.textContent = "Veuillez sélectionner un type de graphique";
             downloadSection.style.display = "none";
             return;
         }
@@ -820,43 +826,41 @@ askBtn.addEventListener('click', async () => {
         // Préparation de l'interface
         resultImage.style.display = "none";
         downloadSection.style.display = "none";
-        placeholderText.textContent = "Graph generation in progress...🕐";
+        placeholderText.textContent = "Génération du graphique en cours...";
 
         try {
             // Envoi des données
             const formData = new FormData();
             formData.append("file", fileInput.files[0]);
             formData.append("query", graphTypeSelect.value);
+const response = await fetch("/generate_viz/", {
+    method: "POST",
+    body: formData,
+    headers: { 'Accept': 'application/json' }
+});
 
-            const response = await fetch("/generate_viz/", {
-                method: "POST",
-                body: formData,
-                headers: { 'Accept': 'image/*' }
-            });
+if (!response.ok) {
+    throw new Error(`Erreur ${response.status}: ${await response.text()}`);
+}
 
-            // Vérification
-            if (!response.ok) {
-                throw new Error(`Erreur ${response.status}: ${await response.text()}`);
-            }
+const result = await response.json();
 
-            const contentType = response.headers.get('Content-Type');
-            if (!contentType?.includes('image')) {
-                throw new Error("Réponse non reconnue comme image");
-            }
+if (result.error) {
+    throw new Error(result.error);
+}
 
-            // Affichage du résultat
-            const imageBlob = await response.blob();
-            const imageUrl = URL.createObjectURL(imageBlob);
-            
-            resultImage.onload = () => {
-                URL.revokeObjectURL(imageUrl);
-                // Afficher les options de téléchargement une fois l'image chargée
-                document.getElementById("downloadSection").style.display = "block";
-                placeholderText.textContent = "";
-            };
-            
-            resultImage.src = imageUrl;
-            resultImage.style.display = "block";
+// 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 = "";
+};
+
+resultImage.src = imageUrl;
+resultImage.style.display = "block";
 
         } catch (error) {
             console.error("Erreur:", error);
@@ -870,7 +874,7 @@ askBtn.addEventListener('click', async () => {
     const downloadGraph = (format) => {
         const resultImage = document.getElementById('graphResultImage');
         if (!resultImage.src || resultImage.style.display === "none") {
-            alert("⚠️Veuillez d'abord générer un graphique");
+            alert("Veuillez d'abord générer un graphique");
             return;
         }
 
@@ -896,7 +900,7 @@ askBtn.addEventListener('click', async () => {
         // Conversion et téléchargement
         canvas.toBlob((blob) => {
             downloadFile(blob, `graphique.${extension}`);
-        }, mimeType, format === 'jpg' ? 0.92 : 1); // Qualité à 92% pour JPG, 100% pour PN
+        }, mimeType, format === 'jpg' ? 0.92 : 1); // Qualité à 92% pour JPG, 100% pour PNG
     };
 
     // 7. Fonction utilitaire pour le téléchargement