Update static/appS.js

static/appS.js

@@ -173,64 +173,48 @@ document.addEventListener('DOMContentLoaded', () => {
         return bubble;
     }
 
- async function handleSubmit() {
+  /*  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 endpoint = isSummarizeMode 
+    ? `/Summarization/summarize/`
+    : `/Summarization/imagecaption/`;
         const thinkingText = isSummarizeMode
             ? 'Processing document 📄... <div class="loader"></div>'
             : "Generating caption 🖼️... <div class='loader'></div>";
-
         const thinkingBubble = createMessageBubble(thinkingText, "Aidan");
-
         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) {
                 const error = await response.json().catch(() => null);
                 throw new Error(error?.detail || error?.error || "Request failed");
             }
-
             const result = await response.json();
             thinkingBubble.remove();
-
             if (isSummarizeMode) {
-                const bubble = createMessageBubble(
+                createMessageBubble(
                     result.summary || "No summary generated.",
                     "Aidan",
-                    result.audio,  // Using audio from response
+                    result.audioUrl,
                     result.pdfUrl
                 );
-                
-                if (result.audio) {
-                    injectAudioPlayer(bubble, result.audio);
-                }
             } else {
-                const bubble = createMessageBubble(
-                    result.caption || result.answer,
+                createMessageBubble(
+                    result.caption || result.answer || "No caption generated.",
                     "Aidan",
-                    result.audio,  // Using audio from response
+                    result.audio,
                     null
                 );
-                
-                if (result.audio) {
-                    injectAudioPlayer(bubble, result.audio);
-                }
             }
         } catch (error) {
             thinkingBubble.remove();
@@ -238,42 +222,82 @@ document.addEventListener('DOMContentLoaded', () => {
         } finally {
             selectedFile = null;
         }
+    } */
+  async function handleSubmit() {
+    if (!selectedFile) {
+        alert("Please upload a file first");
+        return;
     }
 
-    function injectAudioPlayer(bubble, audioUrl) {
-        const messageDiv = bubble.querySelector('.text');
-        const audioContainer = document.createElement('div');
-        audioContainer.style.marginTop = "10px";
-        audioContainer.style.display = "flex";
-        audioContainer.style.justifyContent = "flex-end";
-        audioContainer.style.gap = "15px";
-
-        const audio = new Audio(audioUrl);
-        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";
-            }
+    const isSummarizeMode = document.querySelector('input[name="mode"]:checked').value === 'Summarize';
+
+    const endpoint = isSummarizeMode
+        ? `/Summarization/summarize/`
+        : `/Summarization/imagecaption/`;
+
+    const thinkingBubble = createMessageBubble("Thinking...", "Aidan");
+
+    // ✅ Inject loader correctly
+    const messageDiv = thinkingBubble.querySelector('.text');
+    const loader = document.createElement('div');
+    loader.className = 'loader';
+    messageDiv.appendChild(loader);
+
+    const formData = new FormData();
+    formData.append('file', selectedFile);
+    if (isSummarizeMode) formData.append('length', 'medium');
+
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            body: formData
         });
 
-        audioContainer.appendChild(audioIcon);
-        messageDiv.appendChild(audioContainer);
+        if (!response.ok) {
+            const error = await response.json().catch(() => null);
+            throw new Error(error?.detail || error?.error || "Request failed");
+        }
+
+        const result = await response.json();
+        thinkingBubble.remove();
+
+        if (isSummarizeMode) {
+            const answerBubble = createMessageBubble(
+                result.summary || "No summary generated.",
+                "Aidan",
+                result.audioUrl,
+                result.pdfUrl
+            );
+            if (result.audioUrl) injectAudio(answerBubble, result.audioUrl);
+        } else {
+            const answerBubble = createMessageBubble(
+                result.caption || result.answer || "No caption generated.",
+                "Aidan",
+                result.audio,
+                null
+            );
+            if (result.audio) injectAudio(answerBubble, result.audio);
+        }
+
+    } catch (error) {
+        thinkingBubble.remove();
+        createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
+    } finally {
+        selectedFile = null;
     }
+}
+
+// ✅ Helper to inject audio player
+function injectAudio(bubble, audioUrl) {
+    const messageDiv = bubble.querySelector('.text');
+    const audioPlayer = document.createElement('audio');
+    audioPlayer.src = audioUrl;
+    audioPlayer.controls = true;
+    audioPlayer.style.marginTop = "10px";
+    messageDiv.appendChild(audioPlayer);
+}
+
 
-    // Add loader styles
     const style = document.createElement('style');
     style.textContent = `
         .loader {
@@ -292,9 +316,8 @@ document.addEventListener('DOMContentLoaded', () => {
     `;
     document.head.appendChild(style);
 
-    // Back button
     var backarrow = document.querySelector(".fa-arrow-left");
     backarrow.addEventListener('click', function () {
         window.location.href = '/';
     });
-});
+});