Update static/appS.js

static/appS.js

@@ -1,489 +1,3 @@
-/*document.addEventListener('DOMContentLoaded', () => {
-    const convo = document.querySelector(".convo");
-    const fileUpload = document.getElementById('file-upload');
-    const imageUpload = document.getElementById('image-upload');
-    const fileBtn = document.getElementById('file-btn');
-    const imageBtn = document.getElementById('image-btn');
-    const sendButtons = document.querySelectorAll('.sendingQA');
-    const SummarizeInput = document.querySelector(".SummarizeInput");
-    const CaptionInput = document.querySelector(".CaptionInput");
-    const gotItButton = document.querySelector('.explainChoix button');
-    const explainChoixDiv = document.querySelector('.explainChoix');
-
-    let selectedFile = null;
-
-    const summarizeRadio = document.getElementById('summarize-radio');
-    if (summarizeRadio) summarizeRadio.checked = true;
-
-    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");
-                }
-            }
-        });
-    });
-
-    fileBtn.addEventListener('click', () => fileUpload.click());
-    imageBtn.addEventListener('click', () => imageUpload.click());
-
-    fileUpload.addEventListener('change', (e) => {
-        if (e.target.files.length) {
-            selectedFile = e.target.files[0];
-            displayFilePreview(selectedFile);
-        }
-    });
-
-    imageUpload.addEventListener('change', (e) => {
-        if (e.target.files.length) {
-            selectedFile = e.target.files[0];
-            displayFilePreview(selectedFile);
-        }
-    });
-
-    gotItButton.addEventListener('click', () => {
-        explainChoixDiv.style.display = "none";
-    });
-
-    sendButtons.forEach(button => {
-        button.addEventListener('click', handleSubmit);
-    });
-
-    function displayFilePreview(file) {
-        const previewBubble = document.createElement("div");
-        previewBubble.className = "file-preview-bubble bubble right";
-        previewBubble.style.display = "flex";
-        previewBubble.style.flexDirection = "column";
-        previewBubble.style.maxWidth = "50%";
-
-        if (file.type.startsWith('image/')) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                const img = document.createElement("img");
-                img.src = e.target.result;
-                img.style.width = "100%";
-                img.style.height = "200px";
-                img.style.objectFit = "cover";
-                img.style.borderRadius = "10px";
-                img.style.marginBottom = "8px";
-
-                const text = document.createElement("span");
-                text.textContent = `📎 Selected image: ${file.name}`;
-                text.style.fontSize = "13px";
-
-                previewBubble.appendChild(img);
-                previewBubble.appendChild(text);
-                convo.appendChild(previewBubble);
-                convo.scrollTop = convo.scrollHeight;
-            };
-            reader.readAsDataURL(file);
-        } else {
-            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;
-        }
-    }
-
-    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";
-        label.textContent = sender;
-
-        const message = document.createElement('div');
-        message.className = "text";
-        message.style.whiteSpace = "pre-wrap";
-        message.style.display = "flex";
-        message.style.flexDirection = "column";
-
-        const textSpan = document.createElement("span");
-        textSpan.innerHTML = text;
-        message.appendChild(textSpan);
-
-        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";
-
-            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", () => {
-                    if (audio.paused) {
-                        audio.play();
-                        audioIcon.classList.remove("fa-volume-xmark");
-                        audioIcon.classList.add("fa-volume-high");
-                        audioIcon.title = "Mute Audio";
-                    } else {
-                        audio.pause();
-                        audioIcon.classList.remove("fa-volume-high");
-                        audioIcon.classList.add("fa-volume-xmark");
-                        audioIcon.title = "Unmute Audio";
-                    }
-                });
-
-                iconContainer.appendChild(audioIcon);
-            }
-
-            if (fileName) {
-                const downloadLink = document.createElement('a');
-                downloadLink.href = fileName;
-                downloadLink.target = "_blank";
-                downloadLink.download = "summary.pdf";
-                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);
-            }
-
-            message.appendChild(iconContainer);
-        }
-
-        bubble.appendChild(label);
-        bubble.appendChild(message);
-        convo.appendChild(bubble);
-        convo.scrollTop = convo.scrollHeight;
-        return bubble;
-    }
-
-
- 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 senderName = "Aidan";
-
-    const thinkingBubble = createMessageBubble(thinkingText, senderName);
-
-    const formData = new FormData();
-    formData.append('file', selectedFile);
-    if (isSummarizeMode) formData.append('length', 'medium');
-
-    try {
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            body: formData
-        });
-
-        if (!response.ok) {
-            let errorMessage = 'Request failed';
-            try {
-                const error = await response.json();
-                errorMessage = error.detail || error.error || errorMessage;
-            } catch (e) {}
-            throw new Error(errorMessage);
-        }
-
-        const result = await response.json();
-        thinkingBubble.remove();
-
-        if (isSummarizeMode) {
-            createMessageBubble(
-                result.summary || "No summary generated.",
-                "Aidan",
-                null,  // Removed audioUrl
-                result.pdfUrl
-            );
-        } else {
-            createMessageBubble(
-                result.caption || result.answer || "No caption generated.",
-                "Aidan",
-                null,  // Removed audio
-                null
-            );
-        }
-    } catch (error) {
-        thinkingBubble.remove();
-        createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
-    } finally {
-        selectedFile = null;
-    }
-}
-
-    const style = document.createElement('style');
-    style.textContent = `
-        .loader {
-            display: inline-block;
-            border: 2px solid #f3f3f3;
-            border-top: 2px solid #3b82f6;
-            border-radius: 50%;
-            width: 16px;
-            height: 16px;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-    `;
-    document.head.appendChild(style);
-
-    var backarrow = document.querySelector(".fa-arrow-left");
-    backarrow.addEventListener('click', function () {
-        window.location.href = '/';
-    });
-});  */ 
-/*  document.addEventListener('DOMContentLoaded', () => {
-    const convo = document.querySelector(".convo");
-    const fileUpload = document.getElementById('file-upload');
-    const imageUpload = document.getElementById('image-upload');
-    const fileBtn = document.getElementById('file-btn');
-    const imageBtn = document.getElementById('image-btn');
-    const sendButtons = document.querySelectorAll('.sendingQA');
-    const SummarizeInput = document.querySelector(".SummarizeInput");
-    const CaptionInput = document.querySelector(".CaptionInput");
-    const gotItButton = document.querySelector('.explainChoix button');
-    const explainChoixDiv = document.querySelector('.explainChoix');
-
-    let selectedFile = null;
-
-    const summarizeRadio = document.getElementById('summarize-radio');
-    if (summarizeRadio) summarizeRadio.checked = true;
-
-    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");
-                }
-            }
-        });
-    });
-
-    fileBtn.addEventListener('click', () => fileUpload.click());
-    imageBtn.addEventListener('click', () => imageUpload.click());
-
-    fileUpload.addEventListener('change', (e) => {
-        if (e.target.files.length) {
-            selectedFile = e.target.files[0];
-            displayFilePreview(selectedFile);
-        }
-    });
-
-    imageUpload.addEventListener('change', (e) => {
-        if (e.target.files.length) {
-            selectedFile = e.target.files[0];
-            displayFilePreview(selectedFile);
-        }
-    });
-
-    gotItButton.addEventListener('click', () => {
-        explainChoixDiv.style.display = "none";
-    });
-
-    sendButtons.forEach(button => {
-        button.addEventListener('click', handleSubmit);
-    });
-
-    function displayFilePreview(file) {
-        const previewBubble = document.createElement("div");
-        previewBubble.className = "file-preview-bubble bubble right";
-        previewBubble.style.display = "flex";
-        previewBubble.style.flexDirection = "column";
-        previewBubble.style.maxWidth = "50%";
-
-        if (file.type.startsWith('image/')) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                const img = document.createElement("img");
-                img.src = e.target.result;
-                img.style.width = "100%";
-                img.style.height = "200px";
-                img.style.objectFit = "cover";
-                img.style.borderRadius = "10px";
-                img.style.marginBottom = "8px";
-
-                const text = document.createElement("span");
-                text.textContent = `📎 Selected image: ${file.name}`;
-                text.style.fontSize = "13px";
-
-                previewBubble.appendChild(img);
-                previewBubble.appendChild(text);
-                convo.appendChild(previewBubble);
-                convo.scrollTop = convo.scrollHeight;
-            };
-            reader.readAsDataURL(file);
-        } else {
-            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;
-        }
-    }
-
-    function createMessageBubble(text, sender = "You", 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";
-        label.textContent = sender;
-
-        const message = document.createElement('div');
-        message.className = "text";
-        message.style.whiteSpace = "pre-wrap";
-        message.style.display = "flex";
-        message.style.flexDirection = "column";
-
-        const textSpan = document.createElement("span");
-        textSpan.innerHTML = text;
-        message.appendChild(textSpan);
-
-        if (sender !== "You" && fileName) {
-            const iconContainer = document.createElement('div');
-            iconContainer.style.marginTop = "10px";
-            iconContainer.style.display = "flex";
-            iconContainer.style.justifyContent = "flex-end";
-            iconContainer.style.gap = "15px";
-
-            const downloadLink = document.createElement('a');
-            downloadLink.href = fileName;
-            downloadLink.target = "_blank";
-            downloadLink.download = "summary.pdf";
-            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);
-
-            message.appendChild(iconContainer);
-        }
-
-        bubble.appendChild(label);
-        bubble.appendChild(message);
-        convo.appendChild(bubble);
-        convo.scrollTop = convo.scrollHeight;
-        return bubble;
-    }
-
-    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 senderName = "Aidan";
-
-        const thinkingBubble = createMessageBubble(thinkingText, senderName);
-
-        const formData = new FormData();
-        formData.append('file', selectedFile);
-        if (isSummarizeMode) formData.append('length', summarizeRadio.selectedItem);
-
-        try {
-            const response = await fetch(endpoint, {
-                method: 'POST',
-                body: formData
-            });
-
-            if (!response.ok) {
-                let errorMessage = 'Request failed';
-                try {
-                    const error = await response.json();
-                    errorMessage = error.detail || error.error || errorMessage;
-                } catch (e) {}
-                throw new Error(errorMessage);
-            }
-
-            const result = await response.json();
-            thinkingBubble.remove();
-
-            if (isSummarizeMode) {
-                createMessageBubble(
-                    result.summary || "No summary generated.",
-                    "Aidan",
-                    result.pdfUrl
-                );
-            } else {
-                createMessageBubble(
-                    result.caption || result.answer || "No caption generated.",
-                    "Aidan",
-                    null
-                );
-            }
-        } catch (error) {
-            thinkingBubble.remove();
-            createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
-        } finally {
-            selectedFile = null;
-        }
-    }
-
-    const style = document.createElement('style');
-    style.textContent = `
-        .loader {
-            display: inline-block;
-            border: 2px solid #f3f3f3;
-            border-top: 2px solid #3b82f6;
-            border-radius: 50%;
-            width: 16px;
-            height: 16px;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-    `;
-    document.head.appendChild(style);
-
-    var backarrow = document.querySelector(".fa-arrow-left");
-    backarrow.addEventListener('click', function () {
-        window.location.href = '/';
-    });
-}); */  
-
-
 document.addEventListener('DOMContentLoaded', () => {
     const convo = document.querySelector(".convo");
     const fileUpload = document.getElementById('file-upload');
@@ -498,11 +12,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     let selectedFile = null;
 
-    // ✅ Default mode
+    // Default mode is summarize 
     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) => {
             const selected = e.target.value;
@@ -583,7 +97,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
+/*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%";
@@ -603,7 +117,7 @@ function createMessageBubble(text, sender = "You", audioSrc = null, fileName = n
     textSpan.innerHTML = text;
     message.appendChild(textSpan);
 
-    // ✅ Only define and append icon container if needed
+  
     if (sender !== "You" && (audioSrc || fileName)) {
         const iconContainer = document.createElement('div');
         iconContainer.style.marginTop = "10px";
@@ -660,8 +174,92 @@ function createMessageBubble(text, sender = "You", audioSrc = null, fileName = n
     convo.appendChild(bubble);
     convo.scrollTop = convo.scrollHeight;
     return 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";
+    label.textContent = sender;
+
+    const message = document.createElement('div');
+    message.className = "text";
+    message.style.whiteSpace = "pre-wrap";
+    message.style.display = "flex";
+    message.style.flexDirection = "column";
+
+    const textSpan = document.createElement("span");
+    textSpan.innerHTML = text;
+    message.appendChild(textSpan);
+
+    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";
+
+        // Audio Player 
+        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";
+
+          
+            const updateAudioIcon = () => {
+                if (audio.paused) {
+                    audioIcon.classList.replace("fa-volume-xmark", "fa-volume-high");
+                    audioIcon.title = "Play Audio";
+                } else {
+                    audioIcon.classList.replace("fa-volume-high", "fa-volume-xmark");
+                    audioIcon.title = "Pause Audio";
+                }
+            };
+
+            audio.addEventListener('play', updateAudioIcon);
+            audio.addEventListener('pause', updateAudioIcon);
+            audio.addEventListener('ended', updateAudioIcon);
+
+            audioIcon.addEventListener("click", () => {
+                audio.paused ? audio.play().catch(e => console.error("Audio error:", e)) : audio.pause();
+            });
+
+            iconContainer.appendChild(audioIcon);
+        }
+
+        // PDF Download 
+        if (fileName) {
+            const downloadLink = document.createElement('a');
+            downloadLink.href = fileName;
+            downloadLink.target = "_blank";
+            downloadLink.download = fileName.split('/').pop() || "summary.pdf";
+            
+            const downloadIcon = document.createElement("i");
+            downloadIcon.className = "fa-solid fa-file-arrow-down";
+            downloadIcon.style.fontSize = "18px";
+            downloadIcon.style.cursor = "pointer";
+            downloadIcon.title = "Download Summary PDF";
+            
+            downloadLink.appendChild(downloadIcon);
+            iconContainer.appendChild(downloadLink);
+        }
+
+        message.appendChild(iconContainer);
+    }
 
+    bubble.appendChild(label);
+    bubble.appendChild(message);
+    convo.appendChild(bubble);
+    convo.scrollTop = convo.scrollHeight;
+    
+    return bubble;
+}
     async function handleSubmit() {
         if (!selectedFile) {
             alert("Please upload a file first");