Update static/appS.js

static/appS.js

@@ -1,218 +1,80 @@
-document.addEventListener('DOMContentLoaded', () => {
-    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 sendButtons = document.querySelectorAll('.sendingQA');
-    const SummarizeInput = document.querySelector(".SummarizeInput");
-    const CaptionInput = document.querySelector(".CaptionInput");
-     var GotitB = document.querySelector(".explainChoix button")
-
-    GotitB.addEventListener("click",()=>{
+  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"
 })
-    let selectedFile = null;
-    let filePreviewBubble = null;
 
-    // Initialize 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");
-                }
-                
-                // Clear current selection when switching modes
-                selectedFile = null;
-                fileUpload.value = '';
-                imageUpload.value = '';
-                if (filePreviewBubble) {
-                    filePreviewBubble.remove();
-                    filePreviewBubble = null;
-                }
-            }
-        });
+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
+  });
+    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();
-    });
-
-    imageBtn.addEventListener('click', () => {
-        imageUpload.click();
+      fileUpload.click();
     });
-
+    
     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);
-        }
-    });
-
-    function displayFilePreview(file) {
-        if (filePreviewBubble) filePreviewBubble.remove();
-        
-        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;
-    }
-
-    function createMessageBubble(text, sender = "You", audioSrc = null) {
-        const bubble = document.createElement('div');
-        bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
-
-        const label = document.createElement('div');
-        label.className = "label";
-        label.innerText = sender;
-
-        const message = document.createElement('div');
-        message.className = "text";
+      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 (sender === "You") {
-            message.innerText = text;
+        if (validDocTypes.includes(file.type)) {
+          console.log('Valid document selected:', file.name);
+          // Handle the document file here
         } 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);
-            }
+          alert('Please select a valid document (PDF, DOCX, PPTX, or XLSX)');
+          fileUpload.value = ''; // Reset the input
         }
-
-        bubble.appendChild(label);
-        bubble.appendChild(message);
-        convo.appendChild(bubble);
-        convo.scrollTop = convo.scrollHeight;
-        return bubble;
-    }
-
-async function handleSend() {
-    if (!selectedFile) {
-        alert("Please upload a file first");
-        return;
-    }
-
-    const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
+      }
+    });
     
-    // 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"
-    );
-
-    try {
-        const formData = new FormData();
-        formData.append('file', selectedFile);
-        
-        const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
-        
-        // For summarize mode, add length parameter
-        if (isSummarizeMode) {
-            const length = document.querySelector('input[name="optionS"]:checked').value;
-            formData.append('length', length);
-        }
-
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            body: formData
-        });
-
-        const result = await response.json();
-        
-        if (!response.ok) {
-            throw new Error(result.detail || result.message || "Request failed");
-        }
-
-        // Replace thinking message with actual result
-        thinkingBubble.remove();
+    // 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 (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
-            );
+        if (validImageTypes.includes(file.type)) {
+          console.log('Valid image selected:', file.name);
+          // Handle the image file here
         } else {
-            createMessageBubble(
-                `<strong>Caption:</strong><br><br>${result.answer || result.caption}`,
-                "Aidan",
-                result.audio
-            );
-        }
-    } catch (error) {
-        console.error("Error:", error);
-        thinkingBubble.remove();
-        createMessageBubble(
-            `⚠️ Error: ${error.message}`,
-            "Aidan"
-        );
-    } finally {
-        // Reset file inputs
-        selectedFile = null;
-        fileUpload.value = '';
-        imageUpload.value = '';
-        if (filePreviewBubble) {
-            filePreviewBubble.remove();
-            filePreviewBubble = null;
+          alert('Please select a valid image (JPEG, PNG, GIF, or WEBP)');
+          imageUpload.value = ''; // Reset the input
         }
-    }
-}
-    // Attach send handlers
-    sendButtons.forEach(button => {
-        button.addEventListener('click', handleSend);
+      }
     });
-});
+  });