Update static/appS.js

static/appS.js

@@ -1,18 +1,17 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const GotitB = document.querySelector(".explainChoix button");
-    const explain = document.querySelector(".explainChoix");
-    const SummarizeInput = document.querySelector(".SummarizeInput");
-    const CaptionInput = document.querySelector(".CaptionInput");
+    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 convo = document.querySelector('.convo');
+    const sendButtons = document.querySelectorAll('.sendingQA');
+    const SummarizeInput = document.querySelector(".SummarizeInput");
+    const CaptionInput = document.querySelector(".CaptionInput");
 
-    GotitB.addEventListener("click", () => {
-        explain.style.opacity = "0";
-    });
+    let selectedFile = null;
+    let filePreviewBubble = null;
 
+    // Mode switching
     document.querySelectorAll('.select-options input[type="radio"]').forEach(radio => {
         radio.addEventListener('change', (e) => {
             if (e.target.checked) {
@@ -32,20 +31,25 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
+    // File upload handlers
     fileBtn.addEventListener('click', () => fileUpload.click());
     imageBtn.addEventListener('click', () => imageUpload.click());
 
-    document.querySelectorAll('.sendingQA').forEach(button => {
-        button.addEventListener('click', async () => {
-            const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
-            if (isSummarizeMode) {
-                await handleSummarize();
-            } else {
-                await handleCaption();
-            }
-        });
+    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);
+        }
     });
 
+    // Drag and drop
     convo.addEventListener('dragover', (e) => {
         e.preventDefault();
         convo.classList.add('drag-over');
@@ -55,199 +59,201 @@ document.addEventListener('DOMContentLoaded', () => {
         convo.classList.remove('drag-over');
     });
 
-    convo.addEventListener('drop', async (e) => {
+    convo.addEventListener('drop', (e) => {
         e.preventDefault();
         convo.classList.remove('drag-over');
-        
         if (e.dataTransfer.files.length) {
             const file = e.dataTransfer.files[0];
-            const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(file);
             
+            const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
+            if (isSummarizeMode) {
+                fileUpload.files = dataTransfer.files;
+            } else {
+                imageUpload.files = dataTransfer.files;
+            }
+            selectedFile = file;
+            displayFilePreview(file);
+        }
+    });
+
+    // Send button handlers
+    sendButtons.forEach(button => {
+        button.addEventListener('click', async () => {
+            const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
             if (isSummarizeMode) {
-                fileUpload.files = e.dataTransfer.files;
                 await handleSummarize();
             } else {
-                imageUpload.files = e.dataTransfer.files;
                 await handleCaption();
             }
-        }
+        });
     });
 
-async function handleSummarize() {
-    const file = fileUpload.files[0];
-    if (!file) {
-        displayError('Please upload a document first');
-        return;
+    function displayFilePreview(file) {
+        if (filePreviewBubble) filePreviewBubble.remove();
+        
+        filePreviewBubble = createMessageBubble(
+            `📎 Selected ${file.type.startsWith('image/') ? 'image' : 'document'}: ${file.name}`,
+            "You"
+        );
     }
 
-    console.log("Selected file:", file.name, "Type:", file.type);
-    const length = document.querySelector('input[name="optionS"]:checked')?.value || "medium";
+    function createMessageBubble(text, sender = "You", audioSrc = null) {
+        const bubble = document.createElement('div');
+        bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
 
-    try {
-        convo.innerHTML = '';
-        displayFileInfo(file.name, 'document');
-        displayThinkingMessage();
+        const label = document.createElement('div');
+        label.className = "label";
+        label.textContent = sender;
 
-        console.log("Starting summarization...");
-        const result = await summarizeDocument(file, length);
-        console.log("Summarization result:", result);
+        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();
+                        audioIcon.classList.replace('fa-volume-xmark', 'fa-volume-high');
+                        audioIcon.title = "Click to mute";
+                    } else {
+                        audio.pause();
+                        audioIcon.classList.replace('fa-volume-high', 'fa-volume-xmark');
+                        audioIcon.title = "Click to unmute";
+                    }
+                });
+                
+                audioContainer.appendChild(audioIcon);
+                audioContainer.appendChild(document.createTextNode('Listen'));
+                message.appendChild(audioContainer);
+            }
+        }
 
-        displaySummaryResult(file.name, result.summary, result.audioUrl, result.pdfUrl);
-    } catch (error) {
-        console.error("Summarization failed:", error);
-        displayError(error.message || 'Failed to summarize document');
+        bubble.appendChild(label);
+        bubble.appendChild(message);
+        convo.appendChild(bubble);
+        convo.scrollTop = convo.scrollHeight;
+        return bubble;
     }
-}
-    async function handleCaption() {
-        const file = imageUpload.files[0];
-        if (!file) {
-            displayError('Please upload an image first');
+
+    async function handleSummarize() {
+        if (!selectedFile) {
+            alert("Please upload a document first");
             return;
         }
-        try {
-            convo.innerHTML = '';
-            displayFileInfo(file.name, 'image');
-            displayThinkingMessage();
 
-            const caption = await captionImage(file);
+        const length = document.querySelector('input[name="optionS"]:checked')?.value || "medium";
+        const thinkingBubble = createMessageBubble(
+            "Analyzing your document... <div class='loader'></div>",
+            "Aidan"
+        );
 
-            displayCaptionResult(file.name, caption);
-        } catch (error) {
-            displayError(error.message || 'Failed to generate caption');
-        }
-    }
+        try {
+            const formData = new FormData();
+            formData.append('file', selectedFile);
+            formData.append('length', length);
 
-async function summarizeDocument(file, length) {
-    const formData = new FormData();
-    formData.append('file', file);
-    formData.append('length', length);
+            const response = await fetch('/summarize/', {
+                method: 'POST',
+                body: formData
+            });
 
-    try {
-        const response = await fetch('/summarize/', {
-            method: 'POST',
-            body: formData
-        });
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.detail || 'Summarization failed');
+            }
 
-        const result = await response.json();
-        
-        if (!response.ok) {
-            throw new Error(result.detail || result.message || "Summarization failed");
-        }
+            const result = await response.json();
+            thinkingBubble.remove();
 
-        // Map backend fields to frontend expectations
-        return {
-            summary: result.summary,
-            audioUrl: result.audio_url || result.audioUrl,
-            pdfUrl: result.pdf_url || result.pdfUrl
-        };
-    } catch (error) {
-        console.error("Summarization error:", error);
-        throw error;
+            createMessageBubble(
+                `<strong>Summary:</strong><br><br>${result.summary.replace(/\n/g, '<br>')}
+                ${result.audio_url ? `<br><br><audio controls src="${result.audio_url}"></audio>` : ''}
+                ${result.pdf_url ? `<br><a href="${result.pdf_url}" download class="download-link">📄 Download PDF</a>` : ''}`,
+                "Aidan",
+                result.audio_url
+            );
+        } catch (error) {
+            thinkingBubble.remove();
+            createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
+        } finally {
+            resetFileInputs();
+        }
     }
-}
-    async function captionImage(file) {
-        const formData = new FormData();
-        formData.append('file', file);
-
-        const response = await fetch('/imagecaption/', {
-            method: 'POST',
-            body: formData
-        });
 
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.detail || 'Captioning failed');
+    async function handleCaption() {
+        if (!selectedFile) {
+            alert("Please upload an image first");
+            return;
         }
 
-        const result = await response.json();
-        return result.caption;
-    }
-
-    function displayFileInfo(filename, type) {
-        const bubble = document.createElement('div');
-        bubble.className = 'bubble right';
-        bubble.innerHTML = `
-            <div class="label">You</div>
-            <div class="text">${type === 'document' ? '📄' : '🖼️'} ${filename}</div>
-        `;
-        convo.appendChild(bubble);
-    }
+        const thinkingBubble = createMessageBubble(
+            "Generating caption... <div class='loader'></div>",
+            "Aidan"
+        );
 
-    function displayThinkingMessage() {
-        const bubble = document.createElement('div');
-        bubble.className = 'bubble left';
-        bubble.innerHTML = `
-            <div class="label">Aidan</div>
-            <div class="text">
-                <div style="display:flex;align-items:center;gap:8px">
-                    <span>Processing...</span>
-                    <div class="loader"></div>
-                </div>
-            </div>
-        `;
-        convo.appendChild(bubble);
-        convo.scrollTop = convo.scrollHeight;
-    }
+        try {
+            const formData = new FormData();
+            formData.append('file', selectedFile);
 
-   function displaySummaryResult(filename, summary, audioUrl, pdfUrl) {
-    // Remove thinking message if it exists
-    const lastBubble = convo.lastChild;
-    if (lastBubble && lastBubble.querySelector('.loader')) {
-        convo.removeChild(lastBubble);
-    }
+            const response = await fetch('/imagecaption/', {
+                method: 'POST',
+                body: formData
+            });
 
-    const bubble = document.createElement('div');
-    bubble.className = 'bubble left';
-    
-    // Safely handle missing summary
-    const summaryContent = summary ? summary.replace(/\n/g, '<br>') : "No summary generated";
-    
-    bubble.innerHTML = `
-        <div class="label">Aidan</div>
-        <div class="text">
-            <strong>Summary:</strong><br><br>
-            ${summaryContent}
-            ${audioUrl ? `<br><br><audio controls src="${audioUrl}" style="width: 100%;"></audio>` : ''}
-            ${pdfUrl ? `<br><a href="${pdfUrl}" download="${filename.replace(/\.[^/.]+$/, '')}_summary.pdf" class="download-link">📥 Download PDF Summary</a>` : ''}
-        </div>
-    `;
-    
-    convo.appendChild(bubble);
-    convo.scrollTop = convo.scrollHeight;
-}
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.detail || 'Captioning failed');
+            }
 
-    function displayCaptionResult(filename, caption) {
-        convo.removeChild(convo.lastChild);
+            const result = await response.json();
+            thinkingBubble.remove();
 
-        const bubble = document.createElement('div');
-        bubble.className = 'bubble left';
-        bubble.innerHTML = `
-            <div class="label">Aidan</div>
-            <div class="text">
-                <strong>Caption:</strong><br><br>
-                ${caption}
-            </div>
-        `;
-        convo.appendChild(bubble);
-        convo.scrollTop = convo.scrollHeight;
+            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");
+        } finally {
+            resetFileInputs();
+        }
     }
 
-    function displayError(message) {
-        const bubble = document.createElement('div');
-        bubble.className = 'bubble left';
-        bubble.innerHTML = `
-            <div class="label">Aidan</div>
-            <div class="text" style="color: #ef4444;">
-                ⚠️ ${message}
-            </div>
-        `;
-        convo.appendChild(bubble);
-        convo.scrollTop = convo.scrollHeight;
+    function resetFileInputs() {
+        selectedFile = null;
+        fileUpload.value = '';
+        imageUpload.value = '';
+        if (filePreviewBubble) {
+            filePreviewBubble.remove();
+            filePreviewBubble = null;
+        }
     }
 
+    // Add loader CSS
     const style = document.createElement('style');
     style.textContent = `
         .loader {
+            display: inline-block;
             border: 2px solid #f3f3f3;
             border-top: 2px solid #3b82f6;
             border-radius: 50%;
@@ -271,6 +277,10 @@ async function summarizeDocument(file, length) {
         .download-link:hover {
             background: #2563eb;
         }
+        .audio-toggle {
+            cursor: pointer;
+            transition: all 0.2s;
+        }
     `;
     document.head.appendChild(style);
-});
+});