Update static/appS.js

static/appS.js

@@ -5,10 +5,41 @@ document.addEventListener('DOMContentLoaded', () => {
     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");
 
     let selectedFile = null;
     let filePreviewBubble = null;
 
+    // Mode switching handler
+    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;
+                }
+            }
+        });
+    });
+
     // File upload handlers
     fileBtn.addEventListener('click', () => fileUpload.click());
     imageBtn.addEventListener('click', () => imageUpload.click());
@@ -100,7 +131,27 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
+        const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
         
+        // Validate file type based on mode
+        if (isSummarizeMode) {
+            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(selectedFile.type)) {
+                alert('Please select a valid document (PDF, DOCX, PPTX, or XLSX)');
+                return;
+            }
+        } else {
+            const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+            if (!validImageTypes.includes(selectedFile.type)) {
+                alert('Please select a valid image (JPEG, PNG, GIF, or WEBP)');
+                return;
+            }
+        }
+
         // User message
         createMessageBubble(
             isSummarizeMode ? "Please summarize this document" : "Please caption this image",
@@ -122,13 +173,17 @@ document.addEventListener('DOMContentLoaded', () => {
                 formData.append('length', length);
             }
 
-            const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
             const response = await fetch(endpoint, {
                 method: 'POST',
                 body: formData
             });
 
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
             const result = await response.json();
+            console.log("API Response:", result);
             
             // Replace thinking message with actual result
             thinkingBubble.remove();
@@ -148,12 +203,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 );
             }
         } catch (error) {
+            console.error("Error:", error);
             thinkingBubble.remove();
             createMessageBubble(
-                "⚠️ Sorry, I encountered an error processing your request",
+                `⚠️ Error: ${error.message}`,
                 "Aidan"
             );
-            console.error(error);
         } finally {
             selectedFile = null;
             fileUpload.value = '';