add

static/script.js

@@ -444,12 +444,12 @@ function loadResumerPage() {
         const resultElement = document.getElementById("translateResult");
         
         if (!fileInput.files[0]) {
-            resultElement.innerText = "Veuillez sélectionner un fichier";
+            resultElement.innerText = "⚠️Veuillez sélectionner un fichier";
             return;
         }
         
         if (!targetLang) {
-            resultElement.innerText = "Veuillez sélectionner une langue";
+            resultElement.innerText = "⚠️Veuillez sélectionner une langue";
             return;
         }
          
@@ -458,7 +458,7 @@ function loadResumerPage() {
         formData.append("target_lang", targetLang);
 
         try {
-            resultElement.innerText = "Traduction en cours...";
+            resultElement.innerText = "Traduction en cours...🕐";
             const response = await fetch("/translate/", {  
                 method: "POST",
                 body: formData,
@@ -482,7 +482,7 @@ function loadResumerPage() {
             }
         } catch (error) {
             console.error("Erreur:", error);
-            resultElement.innerText = "Échec de la traduction: " + error.message;
+            resultElement.innerText = "⚠️Échec de la traduction: " + error.message;
         }
     }
 
@@ -683,173 +683,238 @@ 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 = `
-            <div class="sidebar">
-                <div class="logo-container">
-                    <div class="logo-top">SMARTDOCS</div>
-                    <div class="logo-bottom">AI</div>
-                </div>
-    
-                <div class="menu-section">
-                    <button class="menu-btn" id="resumerButton">RESUME</button>
-                    <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
-                    <button class="menu-btn" id="qesdocButton">QUESTION</button>
-                </div>
+     function loadVisualisationPage() {
+    // 1. Configuration de l'arrière-plan
+    document.body.style.setProperty('--background-image', "url('visualisation.webp')");
     
-                <div class="menu-section">
-                    <div class="menu-title">IMAGES</div>
-                    <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
-                    <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
-                </div>
+    // 2. Création de la structure HTML
+    const appContainer = document.createElement("div");
+    appContainer.className = "app-container";
+    appContainer.innerHTML = `
+        <div class="sidebar">
+            <div class="logo-container">
+                <div class="logo-top">SMARTDOCS</div>
+                <div class="logo-bottom">AI</div>
             </div>
-    
-            <div class="main-content-area">
-                <div class="document-container">
-                    <h1 class="document-main-title">Opérations sur documents</h1>
-                    <h2 class="document-subtitle">VISUALISATION</h2>
-    
-                    <!-- Conteneur d'upload (pas un formulaire) -->
-                    <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">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="graph-action-container">
-                            <select id="graphTypeSelect" class="language-dropdown">
-                                <option value="">Select type</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="visualiser">Générer</button>
-                        </div>
+            <div class="menu-section">
+                <button class="menu-btn" id="resumerButton">RESUME</button>
+                <button class="menu-btn" id="traductionbutton">TRANSLATE</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">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">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">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>
-    
-                    <!-- Zone de résultats -->
-                    <div class="graph-results-container">
-                        <div class="graph-results-placeholder">
-                            <img id="graphResultImage" class="graph-result-img">
-                            <p class="placeholder-text" id="graphPlaceholderText">Le résultat apparaîtra ici...</p>
+                    
+                    <div class="graph-action-container">
+                        <select id="graphTypeSelect" class="language-dropdown">
+                            <option value="">Select type</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">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">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;">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>
                         </div>
                     </div>
                 </div>
             </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');
-            
-            dropText.addEventListener('click', (e) => {
-                e.preventDefault();
-                fileInput.click();
-            });
-    
-            uploadIcon.addEventListener('click', (e) => {
-                e.preventDefault();
-                fileInput.click();
-            });
+        </div>
+    `;
     
-            fileInput.addEventListener('change', (e) => {
-                if (e.target.files[0]) {
-                    dropText.textContent = e.target.files[0].name;
-                    uploadIcon.style.display = "none";
-                }
+    // 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');
+        
+        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";
+                // 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 = "Prêt à générer le graphique";
+            }
+        });
+
+        // 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');
+        const resultImage = document.getElementById('graphResultImage');
+        const placeholderText = document.getElementById('graphPlaceholderText');
+        const downloadSection = document.getElementById("downloadSection");
+
+        // Validation
+        if (!fileInput.files[0]) {
+            placeholderText.textContent = "⚠️Veuillez sélectionner un fichier";
+            downloadSection.style.display = "none";
+            return;
+        }
+
+        if (!graphTypeSelect.value) {
+            placeholderText.textContent = "⚠️Veuillez sélectionner un type de graphique";
+            downloadSection.style.display = "none";
+            return;
+        }
+
+        // Préparation de l'interface
+        resultImage.style.display = "none";
+        downloadSection.style.display = "none";
+        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("http://localhost:8000/generate_viz/", {
+                method: "POST",
+                body: formData,
+                headers: { 'Accept': 'image/*' }
             });
-    
-            // Génération du graphique
-            document.getElementById('generateGraphBtn').addEventListener('click', generateGraph);
-        };
-    
-        // 5. Fonction de génération du graphique
-        const generateGraph = async () => {
-            const fileInput = document.getElementById('graphFileInput');
-            const graphTypeSelect = document.getElementById('graphTypeSelect');
-            const resultImage = document.getElementById('graphResultImage');
-            const placeholderText = document.getElementById('graphPlaceholderText');
-    
-            // Validation
-            if (!fileInput.files[0]) {
-                placeholderText.textContent = "Veuillez sélectionner un fichier";
-                return;
+
+            // Vérification
+            if (!response.ok) {
+                throw new Error(`Erreur ${response.status}: ${await response.text()}`);
             }
-    
-            if (!graphTypeSelect.value) {
-                placeholderText.textContent = "Veuillez sélectionner un type de graphique";
-                return;
+
+            const contentType = response.headers.get('Content-Type');
+            if (!contentType?.includes('image')) {
+                throw new Error("Réponse non reconnue comme image");
             }
-    
-            // Préparation de l'interface
-            resultImage.style.display = "none";
-            placeholderText.textContent = "Génération du graphique...";
-    
-            try {
-                // Envoi des données
-                const formData = new FormData();
-                formData.append("file", fileInput.files[0]);
-                formData.append("query", graphTypeSelect.value);
-    
-                const response = await fetch("http://localhost:8000/generate_viz/", {
-                    method: "POST",
-                    body: formData,
-                    headers: { 'Accept': 'image/*' }
-                });
-    
-                // Vérification
-                if (!response.ok) {
-                    throw new Error(`Erreur ${response.status}: ${await response.text()}`);
-                }
-    
-                const contentType = response.headers.get('Content-Type');
-                if (!contentType?.includes('image')) {
-                    throw new Error("Réponse non reconnue comme image");
-                }
-    
-                // Affichage
-                const imageBlob = await response.blob();
-                resultImage.onload = () => URL.revokeObjectURL(resultImage.src);
-                resultImage.src = URL.createObjectURL(imageBlob);
-                resultImage.style.display = "block";
+
+            // 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 = "";
-    
-            } catch (error) {
-                console.error("Erreur:", error);
-                placeholderText.textContent = `Erreur: ${error.message}`;
-                resultImage.style.display = "none";
-            }
-        };
-    
-        // Initialisation
-        setupEventListeners();
-    }
+            };
+            
+            resultImage.src = imageUrl;
+            resultImage.style.display = "block";
+
+        } catch (error) {
+            console.error("Erreur:", error);
+            placeholderText.textContent = `Erreur: ${error.message}`;
+            resultImage.style.display = "none";
+            downloadSection.style.display = "none";
+        }
+    };
+
+    // 6. Fonction de téléchargement du graphique
+    const downloadGraph = (format) => {
+        const resultImage = document.getElementById('graphResultImage');
+        if (!resultImage.src || resultImage.style.display === "none") {
+            alert("⚠️Veuillez d'abord générer un graphique");
+            return;
+        }
+
+        // Créer un canvas pour la conversion
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.width = resultImage.naturalWidth;
+        canvas.height = resultImage.naturalHeight;
+        ctx.drawImage(resultImage, 0, 0);
+
+        let mimeType, extension;
+        switch(format) {
+            case 'jpg':
+                mimeType = 'image/jpeg';
+                extension = 'jpg';
+                break;
+
+            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); // 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');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        setTimeout(() => URL.revokeObjectURL(url), 100);
+    };
+
+    // Initialisation
+    setupEventListeners();
+}