Update static/appS.js

static/appS.js

@@ -173,7 +173,7 @@ document.addEventListener('DOMContentLoaded', () => {
         return bubble;
     }
 
- async function handleSubmit() {
+ /*async function handleSubmit() {
     if (!selectedFile) {
         alert("Please upload a file first");
         return;
@@ -275,8 +275,110 @@ function injectAudioPlayer(bubble, audioUrl) {
 
     audioContainer.appendChild(audioIcon);
     messageDiv.appendChild(audioContainer);
-}
+}  */
+  async function handleSubmit() {
+        if (!selectedFile) {
+            alert("Please upload a file first");
+            return;
+        }
+
+        const isSummarizeMode = document.querySelector('input[name="mode"]:checked').value === 'Summarize';
+        
+        // ✅ Use the correct endpoint paths
+        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) {
+                // Handle summarization response
+                const bubble = createMessageBubble(
+                    result.summary || "No summary generated.",
+                    "Aidan",
+                    result.audioUrl,  // From summarization endpoint
+                    result.pdfUrl
+                );
+                
+                if (result.audioUrl) {
+                    injectAudioPlayer(bubble, result.audioUrl);
+                }
+            } else {
+                // Handle image captioning response
+                const bubble = createMessageBubble(
+                    result.caption || result.answer, // From image captioning
+                    "Aidan",
+                    result.audio,  // From image captioning
+                    null
+                );
+                
+                if (result.audio) {
+                    injectAudioPlayer(bubble, result.audio);
+                }
+            }
+        } catch (error) {
+            thinkingBubble.remove();
+            createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
+        } finally {
+            selectedFile = null;
+        }
+    }
+
+    // Audio player helper function
+    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";
+            }
+        });
+
+        audioContainer.appendChild(audioIcon);
+        messageDiv.appendChild(audioContainer);
+    }
 
     const style = document.createElement('style');
     style.textContent = `