Update static/appS.js

static/appS.js

@@ -1,310 +1,172 @@
 document.addEventListener('DOMContentLoaded', () => {
-    // UI Elements
-    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');
 
-    // Hide explanation after click
-    GotitB.addEventListener("click", () => {
-        explain.style.opacity = "0";
-    });
-
-    // Handle mode switching
-    document.querySelectorAll('.select-options input[type="radio"]').forEach(radio => {
-        radio.addEventListener('change', (e) => {
-            if (e.target.checked) {
-                const selectedValue = e.target.value;
-                if (selectedValue === "Summarize") {
-                    SummarizeInput.classList.add("active");
-                    SummarizeInput.classList.remove("innactive");
-                    CaptionInput.classList.remove("active");
-                    CaptionInput.classList.add("innactive");
-                } else {
-                    SummarizeInput.classList.add("innactive");
-                    SummarizeInput.classList.remove("active");
-                    CaptionInput.classList.remove("innactive");
-                    CaptionInput.classList.add("active");
-                }
-            }
-        });
-    });
+    let selectedFile = null;
+    let filePreviewBubble = null;
 
     // File upload handlers
     fileBtn.addEventListener('click', () => fileUpload.click());
     imageBtn.addEventListener('click', () => imageUpload.click());
 
-    // Send button handlers
-    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);
+        }
     });
 
-    // Handle document summarization
-    async function handleSummarize() {
-        const file = fileUpload.files[0];
-        if (!file) {
-            displayError('Please upload a document first');
-            return;
+    imageUpload.addEventListener('change', (e) => {
+        if (e.target.files.length) {
+            selectedFile = e.target.files[0];
+            displayFilePreview(selectedFile);
         }
+    });
 
-        const length = document.querySelector('input[name="optionS"]:checked')?.value || 'medium';
+    function displayFilePreview(file) {
+        if (filePreviewBubble) filePreviewBubble.remove();
         
-        try {
-            // Show loading state
-            convo.innerHTML = '';
-            displayFileInfo(file.name, 'document');
-            displayThinkingMessage();
-            
-            // Call API
-            const result = await summarizeDocument(file, length);
-            
-            // Display results
-            displaySummaryResult(file.name, result.summary, result.audio_url, result.pdf_url);
-        } catch (error) {
-            displayError(error.message || 'Failed to summarize document');
-        }
-    }
-
-    // Handle image captioning
-    async function handleCaption() {
-        const file = imageUpload.files[0];
-        if (!file) {
-            displayError('Please upload an image first');
-            return;
-        }
-
-        try {
-            // Show loading state
-            convo.innerHTML = '';
-            displayFileInfo(file.name, 'image');
-            displayThinkingMessage();
-            
-            // Call API
-            const result = await captionImage(file);
-            
-            // Display results
-            displayCaptionResult(file.name, result.answer, result.audio);
-        } catch (error) {
-            displayError(error.message || 'Failed to generate caption');
-        }
+        filePreviewBubble = document.createElement('div');
+        filePreviewBubble.className = 'file-preview-bubble bubble right';
+        filePreviewBubble.innerHTML = `
+            <div class="label">You</div>
+            <div class="text">📎 Selected: ${file.name}</div>
+        `;
+        convo.appendChild(filePreviewBubble);
+        convo.scrollTop = convo.scrollHeight;
     }
 
-    // API Functions
-    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
-        });
-        
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Summarization failed');
-        }
-        
-        return await response.json();
-    }
+    function createMessageBubble(text, sender = "You", audioSrc = null) {
+        const bubble = document.createElement('div');
+        bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
 
-    async function captionImage(file) {
-        const formData = new FormData();
-        formData.append('file', file);
+        const label = document.createElement('div');
+        label.className = "label";
+        label.innerText = sender;
 
-        const response = await fetch('/imagecaption/', {
-            method: 'POST',
-            body: formData
-        });
+        const message = document.createElement('div');
+        message.className = "text";
         
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Captioning failed');
+        if (sender === "You") {
+            message.innerText = text;
+        } else {
+            message.innerHTML = text;
+            
+            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.remove('fa-volume-xmark');
+                        audioIcon.classList.add('fa-volume-high');
+                    } else {
+                        audio.pause();
+                        audioIcon.classList.remove('fa-volume-high');
+                        audioIcon.classList.add('fa-volume-xmark');
+                    }
+                });
+                
+                audioContainer.appendChild(audioIcon);
+                audioContainer.appendChild(document.createTextNode('Listen'));
+                message.appendChild(audioContainer);
+            }
         }
-        
-        return await response.json();
-    }
-
-    // UI Helper Functions
-    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);
-    }
 
-    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 your ${document.querySelector('input[name="option"]:checked').value.toLowerCase()}...</span>
-                    <div class="loader"></div>
-                </div>
-            </div>
-        `;
+        bubble.appendChild(label);
+        bubble.appendChild(message);
         convo.appendChild(bubble);
         convo.scrollTop = convo.scrollHeight;
+        return bubble;
     }
 
-    function displaySummaryResult(filename, summary, audioUrl, pdfUrl) {
-        // Remove thinking message
-        convo.removeChild(convo.lastChild);
-        
-        const bubble = document.createElement('div');
-        bubble.className = 'bubble left';
-        bubble.innerHTML = `
-            <div class="label">Aidan</div>
-            <div class="text">
-                <strong>Summary:</strong><br><br>
-                ${summary.replace(/\n/g, '<br>')}
-                <div class="action-buttons" style="margin-top: 10px; display: flex; gap: 10px;">
-                    ${audioUrl ? `
-                    <button class="audio-control" data-audio="${audioUrl}">
-                        <i class="fa-solid fa-volume-high"></i> Audio
-                    </button>` : ''}
-                    ${pdfUrl ? `
-                    <a href="${pdfUrl}" download="${filename.split('.')[0]}_summary.pdf" class="download-btn">
-                        <i class="fa-solid fa-download"></i> PDF
-                    </a>` : ''}
-                </div>
-            </div>
-        `;
-        convo.appendChild(bubble);
-        setupAudioControls();
-        convo.scrollTop = convo.scrollHeight;
-    }
+    async function handleSend() {
+        if (!selectedFile) {
+            alert("Please upload a file first");
+            return;
+        }
 
-    function displayCaptionResult(filename, caption, audioUrl) {
-        // Remove thinking message
-        convo.removeChild(convo.lastChild);
+        const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
         
-        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}
-                ${audioUrl ? `
-                <div class="action-buttons" style="margin-top: 10px;">
-                    <button class="audio-control" data-audio="${audioUrl}">
-                        <i class="fa-solid fa-volume-high"></i> Audio
-                    </button>
-                </div>` : ''}
-            </div>
-        `;
-        convo.appendChild(bubble);
-        setupAudioControls();
-        convo.scrollTop = convo.scrollHeight;
-    }
+        // User message
+        createMessageBubble(
+            isSummarizeMode ? "Please summarize this document" : "Please caption this image",
+            "You"
+        );
+
+        // Thinking message
+        const thinkingBubble = createMessageBubble(
+            isSummarizeMode ? "Summarizing your document..." : "Generating caption for your image...",
+            "Aidan"
+        );
 
-    function setupAudioControls() {
-        document.querySelectorAll('.audio-control').forEach(button => {
-            const audioUrl = button.getAttribute('data-audio');
-            const audio = new Audio(audioUrl);
-            const icon = button.querySelector('i');
+        try {
+            const formData = new FormData();
+            formData.append('file', selectedFile);
             
-            button.addEventListener('click', () => {
-                if (audio.paused) {
-                    audio.play();
-                    icon.classList.remove('fa-volume-xmark');
-                    icon.classList.add('fa-volume-high');
-                } else {
-                    audio.pause();
-                    icon.classList.remove('fa-volume-high');
-                    icon.classList.add('fa-volume-xmark');
-                }
+            if (isSummarizeMode) {
+                const length = document.querySelector('input[name="optionS"]:checked').value;
+                formData.append('length', length);
+            }
+
+            const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                body: formData
             });
-        });
-    }
 
-    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;
+            const result = await response.json();
+            
+            // Replace thinking message with actual result
+            thinkingBubble.remove();
+            
+            if (isSummarizeMode) {
+                createMessageBubble(
+                    `<strong>Summary:</strong><br><br>${result.summary.replace(/\n/g, '<br>')}` +
+                    (result.pdf_url ? `<br><br><a href="${result.pdf_url}" download target="_blank">Download PDF</a>` : ''),
+                    "Aidan",
+                    result.audio_url
+                );
+            } else {
+                createMessageBubble(
+                    `<strong>Caption:</strong><br><br>${result.answer}`,
+                    "Aidan",
+                    result.audio
+                );
+            }
+        } catch (error) {
+            thinkingBubble.remove();
+            createMessageBubble(
+                "⚠️ Sorry, I encountered an error processing your request",
+                "Aidan"
+            );
+            console.error(error);
+        } finally {
+            selectedFile = null;
+            fileUpload.value = '';
+            imageUpload.value = '';
+            if (filePreviewBubble) {
+                filePreviewBubble.remove();
+                filePreviewBubble = null;
+            }
+        }
     }
 
-    // Add loader CSS
-    const style = document.createElement('style');
-    style.textContent = `
-        .loader {
-            border: 2px solid #f3f3f3;
-            border-top: 2px solid #3b82f6;
-            border-radius: 50%;
-            width: 16px;
-            height: 16px;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .download-btn, .audio-control {
-            display: inline-flex;
-            align-items: center;
-            gap: 5px;
-            padding: 5px 10px;
-            background: #3b82f6;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            text-decoration: none;
-            font-size: 14px;
-        }
-        .download-btn:hover, .audio-control:hover {
-            background: #2563eb;
-        }
-        .bubble {
-            max-width: 80%;
-            padding: 12px 16px;
-            margin: 8px 0;
-            border-radius: 18px;
-            position: relative;
-            clear: both;
-        }
-        .bubble.left {
-            background: #f1f1f1;
-            float: left;
-            margin-right: auto;
-        }
-        .bubble.right {
-            background: #3b82f6;
-            color: white;
-            float: right;
-            margin-left: auto;
-        }
-        .label {
-            font-weight: bold;
-            font-size: 12px;
-            margin-bottom: 4px;
-        }
-    `;
-    document.head.appendChild(style);
+    // Attach send handlers
+    sendButtons.forEach(button => {
+        button.addEventListener('click', handleSend);
+    });
 });