Update static/appS.js

static/appS.js

@@ -502,27 +502,24 @@ document.addEventListener('DOMContentLoaded', () => {
     const summarizeRadio = document.getElementById('summarize-radio');
     if (summarizeRadio) summarizeRadio.checked = true;
 
-    // ✅ Mode Switching
+    // ✅ Mode switching
     document.querySelectorAll('.select-options input[name="mode"]').forEach(radio => {
         radio.addEventListener('change', (e) => {
-            if (e.target.checked) {
-                const selectedValue = e.target.value;
-                if (selectedValue === "Summarize") {
-                    SummarizeInput.classList.add("active");
-                    SummarizeInput.classList.remove("innactive");
-                    CaptionInput.classList.remove("active");
-                    CaptionInput.classList.add("innactive");
-                } else {
-                    SummarizeInput.classList.add("innactive");
-                    SummarizeInput.classList.remove("active");
-                    CaptionInput.classList.remove("innactive");
-                    CaptionInput.classList.add("active");
-                }
+            const selected = e.target.value;
+            if (selected === "Summarize") {
+                SummarizeInput.classList.add("active");
+                SummarizeInput.classList.remove("innactive");
+                CaptionInput.classList.remove("active");
+                CaptionInput.classList.add("innactive");
+            } else {
+                SummarizeInput.classList.add("innactive");
+                SummarizeInput.classList.remove("active");
+                CaptionInput.classList.remove("innactive");
+                CaptionInput.classList.add("active");
             }
         });
     });
 
-    // ✅ File triggers
     fileBtn.addEventListener('click', () => fileUpload.click());
     imageBtn.addEventListener('click', () => imageUpload.click());
 
@@ -540,18 +537,20 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // ✅ Hide intro
     gotItButton.addEventListener('click', () => {
         explainChoixDiv.style.display = "none";
     });
 
-    // ✅ File preview in convo
+    sendButtons.forEach(button => {
+        button.addEventListener('click', handleSubmit);
+    });
+
     function displayFilePreview(file) {
         const previewBubble = document.createElement("div");
         previewBubble.className = "file-preview-bubble bubble right";
+        previewBubble.style.maxWidth = "50%";
         previewBubble.style.display = "flex";
         previewBubble.style.flexDirection = "column";
-        previewBubble.style.maxWidth = "50%";
 
         if (file.type.startsWith('image/')) {
             const reader = new FileReader();
@@ -564,12 +563,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 img.style.borderRadius = "10px";
                 img.style.marginBottom = "8px";
 
-                const text = document.createElement("span");
-                text.textContent = `📎 Selected image: ${file.name}`;
-                text.style.fontSize = "13px";
+                const label = document.createElement("span");
+                label.textContent = `📎 Selected image: ${file.name}`;
+                label.style.fontSize = "13px";
 
                 previewBubble.appendChild(img);
-                previewBubble.appendChild(text);
+                previewBubble.appendChild(label);
                 convo.appendChild(previewBubble);
                 convo.scrollTop = convo.scrollHeight;
             };
@@ -578,19 +577,16 @@ document.addEventListener('DOMContentLoaded', () => {
             const text = document.createElement("span");
             text.textContent = `📎 Selected document: ${file.name}`;
             text.style.fontSize = "13px";
-
             previewBubble.appendChild(text);
             convo.appendChild(previewBubble);
             convo.scrollTop = convo.scrollHeight;
         }
     }
 
-    // ✅ Create message bubble
     function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
         const bubble = document.createElement('div');
         bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
         bubble.style.maxWidth = "50%";
-        bubble.style.wordWrap = "break-word";
 
         const label = document.createElement('div');
         label.className = "label";
@@ -602,58 +598,52 @@ document.addEventListener('DOMContentLoaded', () => {
         message.style.display = "flex";
         message.style.flexDirection = "column";
 
-        const textSpan = document.createElement("span");
-        textSpan.innerHTML = text;
-        message.appendChild(textSpan);
+        const span = document.createElement("span");
+        span.innerHTML = text;
+        message.appendChild(span);
 
         if (sender !== "You" && (audioSrc || fileName)) {
-            const iconContainer = document.createElement('div');
-            iconContainer.style.marginTop = "10px";
-            iconContainer.style.display = "flex";
-            iconContainer.style.justifyContent = "flex-end";
-            iconContainer.style.gap = "15px";
+            const iconRow = document.createElement('div');
+            iconRow.style.marginTop = "10px";
+            iconRow.style.display = "flex";
+            iconRow.style.justifyContent = "flex-end";
+            iconRow.style.gap = "15px";
 
             if (audioSrc) {
                 const audio = new Audio(audioSrc);
-                const audioIcon = document.createElement("i");
-                audioIcon.className = "fa-solid fa-volume-high audio-toggle";
-                audioIcon.title = "Play Audio";
-                audioIcon.style.cursor = "pointer";
-                audioIcon.style.fontSize = "18px";
-
-                audioIcon.addEventListener("click", () => {
+                const icon = document.createElement("i");
+                icon.className = "fa-solid fa-volume-high audio-toggle";
+                icon.style.cursor = "pointer";
+                icon.title = "Play Audio";
+                icon.addEventListener("click", () => {
                     if (audio.paused) {
                         audio.play();
-                        audioIcon.classList.remove("fa-volume-xmark");
-                        audioIcon.classList.add("fa-volume-high");
-                        audioIcon.title = "Mute Audio";
+                        icon.classList.replace("fa-volume-xmark", "fa-volume-high");
+                        icon.title = "Mute Audio";
                     } else {
                         audio.pause();
-                        audioIcon.classList.remove("fa-volume-high");
-                        audioIcon.classList.add("fa-volume-xmark");
-                        audioIcon.title = "Unmute Audio";
+                        icon.classList.replace("fa-volume-high", "fa-volume-xmark");
+                        icon.title = "Unmute Audio";
                     }
                 });
-
-                iconContainer.appendChild(audioIcon);
+                iconRow.appendChild(icon);
             }
 
             if (fileName) {
-                const downloadLink = document.createElement('a');
+                const downloadLink = document.createElement("a");
                 downloadLink.href = fileName;
-                downloadLink.target = "_blank";
                 downloadLink.download = "summary.pdf";
+                downloadLink.target = "_blank";
 
                 const downloadIcon = document.createElement("i");
                 downloadIcon.className = "fa-solid fa-file-arrow-down";
-                downloadIcon.style.fontSize = "18px";
                 downloadIcon.style.cursor = "pointer";
 
                 downloadLink.appendChild(downloadIcon);
-                iconContainer.appendChild(downloadLink);
+                iconRow.appendChild(downloadLink);
             }
 
-            message.appendChild(iconContainer);
+            message.appendChild(iconRow);
         }
 
         bubble.appendChild(label);
@@ -663,34 +653,32 @@ document.addEventListener('DOMContentLoaded', () => {
         return bubble;
     }
 
-    // ✅ Main send logic
     async function handleSubmit() {
         if (!selectedFile) {
             alert("Please upload a file first");
             return;
         }
 
-        const isSummarizeMode = document.querySelector('input[name="mode"]:checked').value === 'Summarize';
-        const endpoint = isSummarizeMode ? '/Summarization/summarize/' : '/Summarization/imagecaption/';
-        const thinkingText = isSummarizeMode
-            ? 'Processing document 📄... <div class="loader"></div>'
-            : "Generating caption 🖼️ ... <div class='loader'></div>";
+        const isSummarize = document.querySelector('input[name="mode"]:checked').value === "Summarize";
+        const length = document.querySelector('input[name="length"]:checked')?.value || "Medium";
 
-        const thinkingBubble = createMessageBubble(thinkingText, "Aidan");
+        const endpoint = isSummarize
+            ? "/Summarization/summarize/"
+            : "/Summarization/imagecaption/";
 
-        const formData = new FormData();
-        formData.append('file', selectedFile);
+        const loaderText = isSummarize
+            ? "Processing document 📄... <div class='loader'></div>"
+            : "Generating caption 🖼️... <div class='loader'></div>";
 
-        // ✅ Add summary length from selected radio
-        if (isSummarizeMode) {
-            const lengthChoice = document.querySelector('input[name="lenght"]:checked');
-            const summaryLength = lengthChoice ? lengthChoice.value.toLowerCase() : 'medium';
-            formData.append('length', summaryLength);
-        }
+        const thinkingBubble = createMessageBubble(loaderText, "Aidan");
+
+        const formData = new FormData();
+        formData.append("file", selectedFile);
+        if (isSummarize) formData.append("length", length);
 
         try {
             const response = await fetch(endpoint, {
-                method: 'POST',
+                method: "POST",
                 body: formData
             });
 
@@ -702,21 +690,12 @@ document.addEventListener('DOMContentLoaded', () => {
             const result = await response.json();
             thinkingBubble.remove();
 
-            if (isSummarizeMode) {
-                createMessageBubble(
-                    result.summary || "No summary generated.",
-                    "Aidan",
-                    result.audioUrl,
-                    result.pdfUrl
-                );
-            } else {
-                createMessageBubble(
-                    result.caption || result.answer || "No caption generated.",
-                    "Aidan",
-                    result.audio,
-                    null
-                );
-            }
+            createMessageBubble(
+                isSummarize ? (result.summary || "No summary generated.") : (result.caption || "No caption generated."),
+                "Aidan",
+                result.audio || result.audioUrl || null,
+                result.pdfUrl || null
+            );
         } catch (error) {
             thinkingBubble.remove();
             createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
@@ -725,7 +704,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    // ✅ Spinner CSS
+    // Add loader CSS dynamically
     const style = document.createElement('style');
     style.textContent = `
         .loader {
@@ -742,15 +721,13 @@ document.addEventListener('DOMContentLoaded', () => {
             100% { transform: rotate(360deg); }
         }
         .audio-toggle {
-            cursor: pointer;
-            transition: all 0.2s;
+            transition: 0.2s;
         }
     `;
     document.head.appendChild(style);
 
-    // Back to home
-    const backarrow = document.querySelector(".fa-arrow-left");
-    backarrow.addEventListener('click', () => {
-        window.location.href = '/';
+    // Back button
+    document.querySelector(".fa-arrow-left").addEventListener("click", () => {
+        window.location.href = "/";
     });
 });