Update static/script.js

static/script.js

@@ -40,11 +40,11 @@ function loadResumerPage() {
                         </label>
                         <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
                     </div>
-                    <button class="summary-action-btn">RÉSUMER</button>
+                    <button  class="summary-action-btn">RÉSUMER</button>
                 </div>
                 <div class="results-container">
                     <div class="results-placeholder">
-                        <p class="placeholder-text">Le résultat apparaîtra ici...</p>
+                        <div id="documentResult" class="placeholder-text">Le résultat apparaîtra ici...</div>
                     </div>
                 </div>
             </div>
@@ -54,6 +54,66 @@ function loadResumerPage() {
     // 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();
+});
+
+
+async function uploadDocument() { 
+    let fileInput = document.getElementById("fileInput");
+    let resultElement = document.getElementById("documentResult");
+
+    // Vérifier si un fichier a été sélectionné
+    if (fileInput.files.length === 0) {
+        resultElement.innerText = "⚠️ Aucun fichier sélectionné !";
+        return; // Arrêter l'exécution si aucun fichier
+    }
+
+    // Afficher "Chargement..." pendant que le résumé est en cours de préparation
+    resultElement.innerText = "Chargement du résumé... 🕐";
+
+    let formData = new FormData();
+    formData.append("file", fileInput.files[0]);
+
+    try {
+        let response = await fetch("https://malaknihed-smartdocsai.hf.space/summarize/", {
+            method: "POST",
+            body: formData,
+            headers: { "Accept": "application/json" }
+        });
+
+        if (!response.ok) {
+            throw new Error("Erreur de requête !");
+        }
+
+        let data = await response.json();
+        console.log("📤 Réponse du serveur :", data);
+
+        // Vérification si le modèle est encore en cours de chargement
+        if (data.message && data.message.includes("Modèle en cours de chargement")) {
+            resultElement.innerText = "Le résumé est en cours de génération. Veuillez patienter... 🕐";
+            return;  // Ne pas continuer tant que le modèle n'est pas prêt
+        }
+
+        // Afficher le résumé ou un message d'erreur
+      if (data.summary) {
+    resultElement.innerHTML = `
+        <h3 class="centered-title">📝 Résumé généré :</h3>
+        <br>
+        <p>${data.summary}</p>
+    `;
+      } else {
+    resultElement.innerText = "❌ Résumé non disponible.";
+      }
+    } catch (error) {
+        console.error("❌ Erreur : ", error);
+        resultElement.innerText = "Erreur lors de la demande !";
+    }
+}
+
+
+
 
     
     document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
@@ -428,91 +488,138 @@ fileInput.addEventListener('change', function(event) {
     }
 }
 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 = `
-        <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="visualisationButton">VISUALISATION</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>
+        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 = `
+            <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="visualisationButton">VISUALISATION</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>
-        <div class="main-content-area">
-            <div class="document-container">
-                <h1 class="document-main-title">Opérations sur documents</h1>
-                <h2 class="document-subtitle">QUESTION DOCUMENTS 📄❓</h2>
-                <div class="upload-container">
-                    <div class="file-drop-zone" id="fileDropZone">
-                        <label for="fileInput" 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="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
-                    </div>
-                    <div class="question-container">
-                        <div class="question">
-                            <input type="text" id="questionInput" placeholder="Tapez votre question ici...">
+    
+            <div class="main-content-area">
+                <div class="document-container">
+                    <h1 class="document-main-title">Opérations sur documents</h1>
+                    <h2 class="document-subtitle">QUESTION DOCUMENTS 📄❓</h2>
+    
+                    <div class="upload-container">
+                        <div class="file-drop-zone" id="fileDropZone">
+                            <label for="fileInput" 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="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
+                        </div>
+    
+                        <div class="question-container">
+                            <div class="question">
+                                <input type="text" id="questionInput" placeholder="Tapez votre question ici...">
+                            </div>
+                            <button class="question-btn" id="askDocBtn">Envoyer</button>
                         </div>
-                        <button class="question-btn">Envoyer</button>
                     </div>
-                </div>
-                <div class="results-container">
-                    <div class="results-placeholder">
-                        <p class="placeholder-text">Le résultat apparaîtra ici...</p>
+    
+                    <div class="results-container">
+                        <div class="results-placeholder">
+                            <p id="documentAnswer" class="placeholder-text">Le résultat apparaîtra ici...</p>
+                        </div>
                     </div>
                 </div>
             </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('visualisationButton').addEventListener('click', loadVisualisationPage);
-    document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
-    document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
-
+        `;
+    
+        // 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);
+        document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
+        document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
+    
 const fileInput = document.getElementById('fileInput');
 const dropText = document.getElementById('dropText');
 const uploadIcon = document.getElementById('uploadIcon');
 +
 
 dropText.addEventListener('click', function(event) {
-event.preventDefault();  
-event.stopPropagation(); 
-fileInput.click();
+    event.preventDefault();  
+    event.stopPropagation(); 
+    fileInput.click();
 });
 
 uploadIcon.addEventListener('click', function(event) {
-event.preventDefault();
-event.stopPropagation();
-fileInput.click();
+    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";
-}
+    let file = event.target.files[0];
+    if (file) {
+        dropText.textContent = file.name;
+        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];
+    const question = document.getElementById('questionInput').value;
+    const answerDiv = document.getElementById('documentAnswer');
+
+    if (!file || !question) {
+        answerDiv.innerHTML = "⚠️ Veuillez ajouter un fichier et une question.";
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("question", question);
+
+    // Afficher "⏳ Analyse du document en cours..." pendant le traitement
+    answerDiv.innerHTML = "⏳ Analyse du document en cours...";
+
+    try {
+        const response = await fetch("/doc-qa/", {
+            method: "POST",
+            body: formData
+        });
+
+        const data = await response.json();
+        if (data.answer) {
+            
+            answerDiv.innerHTML = `
+                <h3 class="centered-title">✅ La réponse :</h3>
+                <br>
+                <p>${data.answer}</p>
+            `;
+        } else {
+            answerDiv.innerHTML = `❌ ${data.error || "Erreur inconnue"}`;
+        }
+    } catch (error) {
+        answerDiv.innerHTML = "❌ Erreur lors de l'envoi de la requête.";
+    }
 });
+
 }
     
     //quand on clique sur visualisation ----------------------
@@ -687,8 +794,7 @@ if (file) {
     
 
     //quand on clique sur interpretation ---------------------
-
-    function loadInterpretationPage() {
+function loadInterpretationPage() {
         document.body.style.setProperty('--background-image', "url('interpreter.webp')");
     
         // Créer une nouvelle structure pour ne pas écraser les événements
@@ -727,11 +833,11 @@ if (file) {
                             </label>
                             <input type="file" id="fileInput" class="file-input" accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" hidden>
                         </div>
-                        <button class="summary-action-btn">INTERPRET</button>
+                        <button class="summary-action-btn" id="interpretButton">INTERPRET</button>
                     </div>
     
                     <div class="results-container">
-                        <div class="results-placeholder">
+                        <div class="results-placeholder" id="imageCaptionResult">
                             <p class="placeholder-text">Le résultat apparaîtra ici...</p>
                         </div>
                     </div>
@@ -749,10 +855,12 @@ if (file) {
         document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
         document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
         document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
-    
+
+        const interpretButton = document.getElementById('interpretButton');
+        const resultContainer = document.getElementById('imageCaptionResult');
         const fileInput = document.getElementById('fileInput');
-const dropText = document.getElementById('dropText');
-const uploadIcon = document.getElementById('uploadIcon');
+        const dropText = document.getElementById('dropText');
+        const uploadIcon = document.getElementById('uploadIcon');
 +
 
 dropText.addEventListener('click', function(event) {
@@ -774,7 +882,47 @@ fileInput.addEventListener('change', function(event) {
         uploadIcon.style.display = "none";
     }
 });
+
+ // Appel API backend pour interprétation
+interpretButton.addEventListener('click', async function () {
+    let file = fileInput.files[0];
+    
+
+    if (!file) {
+        resultContainer.innerHTML = `<p class="placeholder-text">⚠️ Veuillez sélectionner une image.</p>`;
+        return;
+    }
+
+    let formData = new FormData();
+    formData.append("file", file);
+
+    // Afficher le message de chargement pendant l'analyse
+    resultContainer.innerHTML = `<p class="placeholder-text">⏳ Analyse en cours...</p>`;
+
+    try {
+        const response = await fetch("/image-caption/", {
+            method: "POST",
+            body: formData,
+        });
+
+        const data = await response.json();
+
+        if (data.caption) {
+            
+            resultContainer.innerHTML = `
+                <h3 class="centered-title">📸 Légende générée :</h3>
+                <br>
+                <p class="result-text">${data.caption}</p>
+            `;
+        } else if (data.error) {
+            resultContainer.innerHTML = `<p class="error-text">❌ Erreur : ${data.error}</p>`;
+        }
+    } catch (error) {
+        resultContainer.innerHTML = `<p class="error-text">❌ Erreur lors de l'envoi de l'image.</p>`;
     }
+});
+
+}
     
     //quand on clique sur quesion image ---------------
 
@@ -815,7 +963,7 @@ fileInput.addEventListener('change', function(event) {
                                 <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
                                 <span class="drop-text" id="dropText">Déposez votre image ici ou cliquez pour parcourir</span>
                             </label>
-                            <input type="file" id="fileInput" class="file-input" accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" hidden>
+                            <input type="file" id="imageInput" class="file-input" accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" hidden>
                         </div>
                     
     
@@ -823,11 +971,11 @@ fileInput.addEventListener('change', function(event) {
                           <div class="question">
                             <input type="text" id="questionInput" placeholder="Tapez votre question ici...">
                           </div>
-                            <button class="question-btn">Envoyer</button>
+                            <button class="question-btn" id="sendImageQuestionBtn">Envoyer</button>
                      </div>
                     </div>
     
-                    <div class="results-container">
+                    <div  id="imageAnswer" class="results-container">
                         <div class="results-placeholder">
                             <p class="placeholder-text">Le résultat apparaîtra ici...</p>
                         </div>
@@ -839,7 +987,7 @@ fileInput.addEventListener('change', function(event) {
         // 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);
@@ -847,7 +995,7 @@ fileInput.addEventListener('change', function(event) {
         document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
         document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
     
-        const fileInput = document.getElementById('fileInput');
+        const fileInput = document.getElementById('imageInput');
 const dropText = document.getElementById('dropText');
 const uploadIcon = document.getElementById('uploadIcon');
 +
@@ -871,16 +1019,48 @@ fileInput.addEventListener('change', function(event) {
         uploadIcon.style.display = "none";
     }
 });
-    
-    
-        // Gestion du bouton "Envoyer"
-        document.getElementById('sendQuestionBtn').addEventListener('click', function() {
-            const questionText = document.getElementById('questionInput').value;
-            if (questionText.trim() === "") {
-                alert("Veuillez entrer une question !");
-                return;
+
+const sendBtn = document.getElementById("sendImageQuestionBtn");
+const questionInput = document.getElementById("questionInput");
+const resultContainer = document.getElementById("imageAnswer");
+
+sendBtn.addEventListener("click", async function () {
+        const file = fileInput.files[0];
+        const question = questionInput.value.trim();
+
+        if (!file || !question) {
+            resultContainer.innerHTML = "<p class='placeholder-text'>⚠️ Veuillez sélectionner une image et poser une question.</p>";
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("question", question);
+
+        // Afficher le message de chargement
+        resultContainer.innerHTML = `<p class="placeholder-text">⏳ En attente de la réponse...</p>`;
+
+        try {
+            const response = await fetch("/image-qa/", {
+                method: "POST",
+                body: formData
+            });
+
+            const data = await response.json();
+            if (data.answer) {
+                
+                resultContainer.innerHTML = `
+                    <h3 class="centered-title">🧠 Réponse générée :</h3>
+                    <br>
+                    <p class="result-text">${data.answer}</p>
+                `;
+            } else {
+                resultContainer.innerHTML = `<p class="placeholder-text">Erreur : ${data.error}</p>`;
             }
-            alert("Question envoyée : " + questionText);
-        });
-    
-    }
+        } catch (error) {
+            resultContainer.innerHTML = `<p class="placeholder-text">Erreur lors de l'envoi : ${error.message}</p>`;
+        }
+    });
+}
+
+