Update static/appS.js

static/appS.js

@@ -1,85 +1,3 @@
-
-/*
-  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");
@@ -134,34 +52,6 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
-    // 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];
@@ -170,7 +60,7 @@ document.addEventListener('DOMContentLoaded', () => {
             return;
         }
 
-        const length = document.querySelector('input[name="optionS"]:checked').value;
+        const length = document.querySelector('input[name="optionS"]:checked')?.value || 'medium';
         
         try {
             // Show loading state
@@ -182,7 +72,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const result = await summarizeDocument(file, length);
             
             // Display results
-            displaySummaryResult(file.name, result.summary, result.audioUrl, result.pdfUrl);
+            displaySummaryResult(file.name, result.summary, result.audio_url, result.pdf_url);
         } catch (error) {
             displayError(error.message || 'Failed to summarize document');
         }
@@ -203,10 +93,10 @@ document.addEventListener('DOMContentLoaded', () => {
             displayThinkingMessage();
             
             // Call API
-            const caption = await captionImage(file);
+            const result = await captionImage(file);
             
             // Display results
-            displayCaptionResult(file.name, caption);
+            displayCaptionResult(file.name, result.answer, result.audio);
         } catch (error) {
             displayError(error.message || 'Failed to generate caption');
         }
@@ -218,14 +108,14 @@ document.addEventListener('DOMContentLoaded', () => {
         formData.append('file', file);
         formData.append('length', length);
 
-        const response = await fetch('/summarize', {
+        const response = await fetch('/summarize/', {
             method: 'POST',
             body: formData
         });
         
         if (!response.ok) {
             const error = await response.json();
-            throw new Error(error.detail || 'Summarization failed');
+            throw new Error(error.error || 'Summarization failed');
         }
         
         return await response.json();
@@ -235,18 +125,17 @@ document.addEventListener('DOMContentLoaded', () => {
         const formData = new FormData();
         formData.append('file', file);
 
-        const response = await fetch('/caption', {
+        const response = await fetch('/imagecaption/', {
             method: 'POST',
             body: formData
         });
         
         if (!response.ok) {
             const error = await response.json();
-            throw new Error(error.detail || 'Captioning failed');
+            throw new Error(error.error || 'Captioning failed');
         }
         
-        const result = await response.json();
-        return result.caption;
+        return await response.json();
     }
 
     // UI Helper Functions
@@ -287,15 +176,24 @@ document.addEventListener('DOMContentLoaded', () => {
             <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 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;
     }
 
-    function displayCaptionResult(filename, caption) {
+    function displayCaptionResult(filename, caption, audioUrl) {
         // Remove thinking message
         convo.removeChild(convo.lastChild);
         
@@ -306,12 +204,39 @@ document.addEventListener('DOMContentLoaded', () => {
             <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;
     }
 
+    function setupAudioControls() {
+        document.querySelectorAll('.audio-control').forEach(button => {
+            const audioUrl = button.getAttribute('data-audio');
+            const audio = new Audio(audioUrl);
+            const icon = button.querySelector('i');
+            
+            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');
+                }
+            });
+        });
+    }
+
     function displayError(message) {
         const bubble = document.createElement('div');
         bubble.className = 'bubble left';
@@ -340,18 +265,46 @@ document.addEventListener('DOMContentLoaded', () => {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-        .download-link {
-            display: inline-block;
-            margin-top: 10px;
+        .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-link:hover {
+        .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);
 });