static/appS.js

/*
  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);
});