Update static/appS.js

static/appS.js

@@ -1,82 +1,357 @@
-
-
-  document.addEventListener('DOMContentLoaded', () => {
-   var GotitB = document.querySelector(".explainChoix button")
-var explain = document.querySelector(".explainChoix")
-var SummarizeInput = document.querySelector(".SummarizeInput")
-var CaptionInput = document.querySelector(".CaptionInput")
-GotitB.addEventListener("click",()=>{
-   explain.style.opacity="0"
-})
-
-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")
-        }
-      }
-    });
-  });
-    const fileUpload = document.getElementById('file-upload');
-    const imageUpload = document.getElementById('image-upload');
-    
-    // Get the icon buttons
-    const fileBtn = document.getElementById('file-btn');
-    const imageBtn = document.getElementById('image-btn');
-    
-    // Set up file input for documents (PDF, DOCX, PPTX, XLSX)
-    fileBtn.addEventListener('click', () => {
-      fileUpload.click();
-    });
-    
-    fileUpload.addEventListener('change', (e) => {
-      if (e.target.files.length > 0) {
-        const file = e.target.files[0];
-        const validDocTypes = [
-          'application/pdf',
-          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-          'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-        ];
-        
-        if (validDocTypes.includes(file.type)) {
-          console.log('Valid document selected:', file.name);
-          // Handle the document file here
-        } else {
-          alert('Please select a valid document (PDF, DOCX, PPTX, or XLSX)');
-          fileUpload.value = ''; // Reset the input
-        }
-      }
-    });
-    
-    // Set up file input for images
-    imageBtn.addEventListener('click', () => {
-      imageUpload.click();
-    });
-    
-    imageUpload.addEventListener('change', (e) => {
-      if (e.target.files.length > 0) {
-        const file = e.target.files[0];
-        const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
-        
-        if (validImageTypes.includes(file.type)) {
-          console.log('Valid image selected:', file.name);
-          // Handle the image file here
-        } else {
-          alert('Please select a valid image (JPEG, PNG, GIF, or WEBP)');
-          imageUpload.value = ''; // Reset the input
-        }
-      }
-    });
-  });
+
+/*
+  document.addEventListener('DOMContentLoaded', () => {
+   var GotitB = document.querySelector(".explainChoix button")
+var explain = document.querySelector(".explainChoix")
+var SummarizeInput = document.querySelector(".SummarizeInput")
+var CaptionInput = document.querySelector(".CaptionInput")
+GotitB.addEventListener("click",()=>{
+   explain.style.opacity="0"
+})
+
+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")
+        }
+      }
+    });
+  });
+    const fileUpload = document.getElementById('file-upload');
+    const imageUpload = document.getElementById('image-upload');
+    
+    // Get the icon buttons
+    const fileBtn = document.getElementById('file-btn');
+    const imageBtn = document.getElementById('image-btn');
+    
+    // Set up file input for documents (PDF, DOCX, PPTX, XLSX)
+    fileBtn.addEventListener('click', () => {
+      fileUpload.click();
+    });
+    
+    fileUpload.addEventListener('change', (e) => {
+      if (e.target.files.length > 0) {
+        const file = e.target.files[0];
+        const validDocTypes = [
+          'application/pdf',
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+          'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        ];
+        
+        if (validDocTypes.includes(file.type)) {
+          console.log('Valid document selected:', file.name);
+          // Handle the document file here
+        } else {
+          alert('Please select a valid document (PDF, DOCX, PPTX, or XLSX)');
+          fileUpload.value = ''; // Reset the input
+        }
+      }
+    });
+    
+    // Set up file input for images
+    imageBtn.addEventListener('click', () => {
+      imageUpload.click();
+    });
+    
+    imageUpload.addEventListener('change', (e) => {
+      if (e.target.files.length > 0) {
+        const file = e.target.files[0];
+        const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+        
+        if (validImageTypes.includes(file.type)) {
+          console.log('Valid image selected:', file.name);
+          // Handle the image file here
+        } else {
+          alert('Please select a valid image (JPEG, PNG, GIF, or WEBP)');
+          imageUpload.value = ''; // Reset the input
+        }
+      }
+    });
+  });*/
+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 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');
+
+    // 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");
+                }
+            }
+        });
+    });
+
+    // 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();
+            }
+        });
+    });
+
+    // Drag and drop functionality
+    convo.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        convo.classList.add('drag-over');
+    });
+
+    convo.addEventListener('dragleave', () => {
+        convo.classList.remove('drag-over');
+    });
+
+    convo.addEventListener('drop', async (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';
+            
+            if (isSummarizeMode) {
+                fileUpload.files = e.dataTransfer.files;
+                await handleSummarize();
+            } else {
+                imageUpload.files = e.dataTransfer.files;
+                await handleCaption();
+            }
+        }
+    });
+
+    // Handle document summarization
+    async function handleSummarize() {
+        const file = fileUpload.files[0];
+        if (!file) {
+            displayError('Please upload a document first');
+            return;
+        }
+
+        const length = document.querySelector('input[name="optionS"]:checked').value;
+        
+        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.audioUrl, result.pdfUrl);
+        } 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 caption = await captionImage(file);
+            
+            // Display results
+            displayCaptionResult(file.name, caption);
+        } catch (error) {
+            displayError(error.message || 'Failed to generate caption');
+        }
+    }
+
+    // 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.detail || 'Summarization failed');
+        }
+        
+        return await response.json();
+    }
+
+    async function captionImage(file) {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const response = await fetch('/caption', {
+            method: 'POST',
+            body: formData
+        });
+        
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Captioning failed');
+        }
+        
+        const result = await response.json();
+        return result.caption;
+    }
+
+    // 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>
+        `;
+        convo.appendChild(bubble);
+        convo.scrollTop = convo.scrollHeight;
+    }
+
+    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>')}
+                ${audioUrl ? `<br><br><audio controls src="${audioUrl}" style="width: 100%;"></audio>` : ''}
+                ${pdfUrl ? `<br><a href="${pdfUrl}" download="${filename.split('.')[0]}_summary.pdf" class="download-link">📥 Download PDF Summary</a>` : ''}
+            </div>
+        `;
+        convo.appendChild(bubble);
+        convo.scrollTop = convo.scrollHeight;
+    }
+
+    function displayCaptionResult(filename, caption) {
+        // 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>Caption:</strong><br><br>
+                ${caption}
+            </div>
+        `;
+        convo.appendChild(bubble);
+        convo.scrollTop = convo.scrollHeight;
+    }
+
+    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;
+    }
+
+    // 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-link {
+            display: inline-block;
+            margin-top: 10px;
+            padding: 5px 10px;
+            background: #3b82f6;
+            color: white;
+            border-radius: 5px;
+            text-decoration: none;
+        }
+        .download-link:hover {
+            background: #2563eb;
+        }
+    `;
+    document.head.appendChild(style);
+});