Update static/appS.js

static/appS.js

@@ -173,83 +173,23 @@ document.addEventListener('DOMContentLoaded', () => {
         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 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) {
-                createMessageBubble(
-                    result.summary || "No summary generated.",
-                    "Aidan",
-                    result.audioUrl,
-                    result.pdfUrl
-                );
-            } else {
-                createMessageBubble(
-                    result.caption || result.answer || "No caption generated.",
-                    "Aidan",
-                    result.audio,
-                    null
-                );
-            }
-        } catch (error) {
-            thinkingBubble.remove();
-            createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
-        } finally {
-            selectedFile = null;
-        }
-    } */
-  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
+    
+    const endpoint = isSummarizeMode 
         ? `/Summarization/summarize/`
         : `/Summarization/imagecaption/`;
 
-    const thinkingBubble = createMessageBubble("Thinking...", "Aidan");
+    const thinkingText = isSummarizeMode
+        ? 'Processing document 📄... <div class="loader"></div>'
+        : "Generating caption 🖼️... <div class='loader'></div>";
 
-    // ✅ Inject loader correctly
-    const messageDiv = thinkingBubble.querySelector('.text');
-    const loader = document.createElement('div');
-    loader.className = 'loader';
-    messageDiv.appendChild(loader);
+    const thinkingBubble = createMessageBubble(thinkingText, "Aidan");
 
     const formData = new FormData();
     formData.append('file', selectedFile);
@@ -262,31 +202,39 @@ document.addEventListener('DOMContentLoaded', () => {
         });
 
         if (!response.ok) {
-            const error = await response.json().catch(() => null);
-            throw new Error(error?.detail || error?.error || "Request failed");
+            if (response.status === 404) {
+                throw new Error("Service endpoint not found. Please check the AI service deployment.");
+            }
+            throw new Error("Request failed");
         }
 
         const result = await response.json();
         thinkingBubble.remove();
 
         if (isSummarizeMode) {
-            const answerBubble = createMessageBubble(
+            const bubble = createMessageBubble(
                 result.summary || "No summary generated.",
                 "Aidan",
                 result.audioUrl,
                 result.pdfUrl
             );
-            if (result.audioUrl) injectAudio(answerBubble, result.audioUrl);
+            
+            // Add audio controls if audio exists
+            if (result.audioUrl) {
+                injectAudioPlayer(bubble, result.audioUrl);
+            }
         } else {
-            const answerBubble = createMessageBubble(
+            const bubble = createMessageBubble(
                 result.caption || result.answer || "No caption generated.",
                 "Aidan",
                 result.audio,
                 null
             );
-            if (result.audio) injectAudio(answerBubble, result.audio);
+            
+            if (result.audio) {
+                injectAudioPlayer(bubble, result.audio);
+            }
         }
-
     } catch (error) {
         thinkingBubble.remove();
         createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
@@ -295,14 +243,38 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 }
 
-// ✅ Helper to inject audio player
-function injectAudio(bubble, audioUrl) {
+// ✅ New helper function for audio player
+function injectAudioPlayer(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);
+    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";
+        }
+    });
+
+    audioContainer.appendChild(audioIcon);
+    messageDiv.appendChild(audioContainer);
 }