/* 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 = `
You
${type === 'document' ? '📄' : '🖼️'} ${filename}
`; convo.appendChild(bubble); } function displayThinkingMessage() { const bubble = document.createElement('div'); bubble.className = 'bubble left'; bubble.innerHTML = `
Aidan
Processing your ${document.querySelector('input[name="option"]:checked').value.toLowerCase()}...
`; 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 = `
Aidan
Summary:

${summary.replace(/\n/g, '
')} ${audioUrl ? `

` : ''} ${pdfUrl ? `
📥 Download PDF Summary` : ''}
`; 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 = `
Aidan
Caption:

${caption}
`; convo.appendChild(bubble); convo.scrollTop = convo.scrollHeight; } function displayError(message) { const bubble = document.createElement('div'); bubble.className = 'bubble left'; bubble.innerHTML = `
Aidan
⚠️ ${message}
`; 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); });