Update static/script.js

static/script.js

@@ -14,7 +14,7 @@ function loadResumerPage() {
     appContainer.innerHTML = `
         <div class="sidebar">
             <div class="logo-container">
-                <div class="logo-top">SMARTDOCS</div>
+                <div class="logo-top">SMARTDOC</div>
                 <div class="logo-bottom">AI</div>
             </div>
             <a href="principal.html" class="home-link">
@@ -115,15 +115,41 @@ function loadResumerPage() {
                 return;
             }
 
-            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 {
+           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);
+    });
+}
+ else {
                 resultElement.innerText = "❌ Summary not available.";
             }
         } catch (error) {
@@ -482,13 +508,41 @@ function loadResumerPage() {
 
             const data = await response.json();
             
-            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 {
+            if (data.translation) {
+    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 Translation
+            </button>
+        </div>
+        <h3 class="centered-title">🌍 Translation :</h3>
+        <br>
+        <p id="translationText" style="font-size: 16px;">${data.translation}</p>
+    `;
+
+    document.getElementById("documentResult").dataset.translationText = data.translation;
+    document.getElementById("downloadSection").style.display = "block";
+
+    // 🎤 Ajouter l'effet vocal
+    const playVoiceBtn = document.getElementById("playVoiceBtn");
+    playVoiceBtn.addEventListener("click", function () {
+        const textToRead = document.getElementById("translationText").textContent;
+        const utterance = new SpeechSynthesisUtterance(textToRead);
+        utterance.lang = "en-US"; // adapte ici selon la langue de ta traduction ("fr-FR" pour du français par exemple)
+        window.speechSynthesis.speak(utterance);
+    });
+}
+ else {
                 resultElement.innerText = "❌ Translation not available.";
             }
         } catch (error) {
@@ -683,12 +737,36 @@ askBtn.addEventListener('click', async () => {
 
         const data = await response.json();
         if (data.answer) {
-            
             answerDiv.innerHTML = `
+                <div style="display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px;">
+                    <button id="playAnswerVoiceBtn" 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 Answer
+                    </button>
+                </div>
                 <h3 class="centered-title">✅ The result :</h3>
                 <br>
-                <p>${data.answer}</p>
+                <p id="answerText" style="font-size: 16px;">${data.answer}</p>
             `;
+
+            // 🎤 Ajouter l'effet vocal
+            const playVoiceBtn = document.getElementById("playAnswerVoiceBtn");
+            playVoiceBtn.addEventListener("click", function () {
+                const textToRead = document.getElementById("answerText").textContent;
+                const utterance = new SpeechSynthesisUtterance(textToRead);
+                utterance.lang = "en-US"; // ou adapte ici si tu as des réponses en français
+                window.speechSynthesis.speak(utterance);
+            });
+
         } else {
             answerDiv.innerHTML = `❌ ${data.error || "Erreur inconnue"}`;
         }
@@ -1061,13 +1139,34 @@ interpretButton.addEventListener('click', async function () {
         const data = await response.json();
 
         if (data.caption) {
-            
-           resultContainer.innerHTML = `
+                resultContainer.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 Interpretation
+                        </button>
+                    </div>
     <h3 style="text-align: center; font-size: 1.5rem; font-weight: bold; color: black;">📸 Generated caption :</h3>
     <br>
     <p style="text-align: center; font-size: 1.2rem; font-weight: bold; color: black;">${data.caption}</p>
-`;
-        } else if (data.error) {
+`; // 🎤 Ajouter l'effet vocal
+                const playVoiceBtn = document.getElementById("playVoiceBtn");
+                playVoiceBtn.addEventListener("click", function () {
+                    const textToRead = document.getElementById("interpretationText").textContent;
+                    const utterance = new SpeechSynthesisUtterance(textToRead);
+                    utterance.lang = "en-US"; // adapte ici selon la langue de l'interprétation
+                    window.speechSynthesis.speak(utterance);
+                });
+            } else if (data.error) {
             resultContainer.innerHTML = `<p class="error-text">❌ Erreur : ${data.error}</p>`;
         }
     } catch (error) {
@@ -1208,13 +1307,37 @@ sendBtn.addEventListener("click", async function () {
             const data = await response.json();
             if (data.answer) {
                 
-                resultContainer.innerHTML = `
+               resultContainer.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 Answer
+                    </button>
+                </div>
                     
         <h3 style="text-align: center; font-size: 1.5rem; font-weight: bold; color: black">🧠 Generated answer :</h3>
 <br>
 <p style="text-align: center; font-size: 1.2rem; font-weight: bold; color: black;">${data.answer}</p>
     
                 `;
+                  // 🎤 Ajouter l'effet vocal
+            const playVoiceBtn = document.getElementById("playVoiceBtn");
+            playVoiceBtn.addEventListener("click", function () {
+                const textToRead = data.answer;
+                const utterance = new SpeechSynthesisUtterance(textToRead);
+                utterance.lang = "en-US"; // adapte ici selon la langue de la réponse
+                window.speechSynthesis.speak(utterance);
+            });
+        
             } else {
                 resultContainer.innerHTML = `<p class="placeholder-text">Erreur : ${data.error}</p>`;
             }