Update static/appS.js

static/appS.js

@@ -66,7 +66,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const file = e.dataTransfer.files[0];
             const dataTransfer = new DataTransfer();
             dataTransfer.items.add(file);
-            
+
             const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
             if (isSummarizeMode) {
                 fileUpload.files = dataTransfer.files;
@@ -80,19 +80,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Send button handlers
     sendButtons.forEach(button => {
-        button.addEventListener('click', async () => {
-            const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
-            if (isSummarizeMode) {
-                await handleSummarize();
-            } else {
-                await handleCaption();
-            }
-        });
+        button.addEventListener('click', handleSubmit);
     });
 
     function displayFilePreview(file) {
         if (filePreviewBubble) filePreviewBubble.remove();
-        
+
         filePreviewBubble = createMessageBubble(
             `📎 Selected ${file.type.startsWith('image/') ? 'image' : 'document'}: ${file.name}`,
             "You"
@@ -109,24 +102,24 @@ document.addEventListener('DOMContentLoaded', () => {
 
         const message = document.createElement('div');
         message.className = "text";
-        
+
         if (sender === "You") {
             message.textContent = text;
         } else {
             message.innerHTML = typeof text === 'string' ? text : 'Processing...';
-            
+
             if (audioSrc) {
                 const audioContainer = document.createElement('div');
                 audioContainer.style.display = 'flex';
                 audioContainer.style.alignItems = 'center';
                 audioContainer.style.gap = '10px';
                 audioContainer.style.marginTop = '8px';
-                
+
                 const audio = new Audio(audioSrc);
                 const audioIcon = document.createElement('i');
                 audioIcon.className = 'fa-solid fa-volume-high audio-toggle';
                 audioIcon.style.cursor = 'pointer';
-                
+
                 audioIcon.addEventListener('click', () => {
                     if (audio.paused) {
                         audio.play();
@@ -138,7 +131,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         audioIcon.title = "Click to unmute";
                     }
                 });
-                
+
                 audioContainer.appendChild(audioIcon);
                 audioContainer.appendChild(document.createTextNode('Listen'));
                 message.appendChild(audioContainer);
@@ -152,87 +145,66 @@ document.addEventListener('DOMContentLoaded', () => {
         return bubble;
     }
 
-        async function handleSummarize() {
-    if (!selectedFile) return;
-
-    const formData = new FormData();
-    formData.append('file', selectedFile);
-    formData.append('length', 'medium'); // or short/long if you allow user choice
-
-    const bubble = createMessageBubble('Processing document...', 'Assistant');
-
-    try {
-        const response = await fetch('/summarize/', {
-            method: 'POST',
-            body: formData,
-        });
-
-        const data = await response.json();
-        if (response.ok) {
-            let summary = data.summary || "No summary generated.";
-            createMessageBubble(summary, "Assistant");
-
-            if (data.audioUrl) {
-                const audio = document.createElement('audio');
-                audio.src = data.audioUrl;
-                audio.controls = true;
-                bubble.appendChild(audio);
-            }
-
-            if (data.pdfUrl) {
-                const link = document.createElement('a');
-                link.href = data.pdfUrl;
-                link.textContent = 'Download Summary PDF';
-                link.target = "_blank";
-                bubble.appendChild(link);
-            }
-        } else {
-            createMessageBubble(`Error: ${data.detail || "Failed to summarize"}`, "Assistant");
-        }
-    } catch (error) {
-        createMessageBubble(`Error: ${error.message}`, "Assistant");
-    }
-}
-
-
-
-    async function handleCaption() {
+    async function handleSubmit() {
         if (!selectedFile) {
-            alert("Please upload an image first");
+            alert("Please upload a file first");
             return;
         }
 
-        const thinkingBubble = createMessageBubble(
-            "Generating caption... <div class='loader'></div>",
-            "Aidan"
-        );
+        const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
+        const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
+        const thinkingText = isSummarizeMode ? 'Processing document...' : "Generating caption... <div class='loader'></div>";
+        const senderName = isSummarizeMode ? 'Assistant' : 'Aidan';
 
-        try {
-            const formData = new FormData();
-            formData.append('file', selectedFile);
+        const thinkingBubble = createMessageBubble(thinkingText, senderName);
 
-            const response = await fetch('/imagecaption/', {
+        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();
-                throw new Error(error.detail || 'Captioning failed');
+                throw new Error(error.detail || 'Request failed');
             }
 
             const result = await response.json();
             thinkingBubble.remove();
 
-            createMessageBubble(
-                `<strong>Caption:</strong><br><br>${result.answer || result.caption}
-                ${result.audio ? `<br><audio controls src="${result.audio}"></audio>` : ''}`,
-                "Aidan",
-                result.audio
-            );
+            if (isSummarizeMode) {
+                createMessageBubble(result.summary || "No summary generated.", "Assistant");
+
+                if (result.audioUrl) {
+                    const audio = document.createElement('audio');
+                    audio.src = result.audioUrl;
+                    audio.controls = true;
+                    convo.appendChild(audio);
+                }
+
+                if (result.pdfUrl) {
+                    const link = document.createElement('a');
+                    link.href = result.pdfUrl;
+                    link.textContent = 'Download Summary PDF';
+                    link.className = 'download-link';
+                    link.target = "_blank";
+                    convo.appendChild(link);
+                }
+            } else {
+                createMessageBubble(
+                    `<strong>Caption:</strong><br><br>${result.answer || result.caption}
+                    ${result.audio ? `<br><audio controls src="${result.audio}"></audio>` : ''}`,
+                    "Aidan",
+                    result.audio
+                );
+            }
         } catch (error) {
             thinkingBubble.remove();
-            createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
+            createMessageBubble(`⚠️ Error: ${error.message}`, senderName);
         } finally {
             resetFileInputs();
         }
@@ -248,7 +220,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    // Add loader CSS
+    // Loader CSS
     const style = document.createElement('style');
     style.textContent = `
         .loader {
@@ -282,4 +254,4 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     `;
     document.head.appendChild(style);
-});
+});