const API_URL = window.location.origin; // Page Navigation function showPage(pageId) { document.querySelectorAll('.page').forEach(page => page.classList.add('hidden')); document.getElementById(pageId).classList.remove('hidden'); } // Drag & Drop Handling const dropZone = document.getElementById('drop-zone'); const fileInput = document.getElementById('file-input'); const analyzeBtn = document.getElementById('analyze-btn'); const audioPlayback = document.getElementById('audio-playback'); let audioFile = null; dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); }); dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('drag-over'); }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('drag-over'); if (e.dataTransfer.files.length > 0) { handleFile(e.dataTransfer.files[0]); } }); fileInput.addEventListener('change', (e) => { handleFile(e.target.files[0]); }); function handleFile(file) { if (file && file.type.startsWith('audio/')) { audioFile = file; analyzeBtn.disabled = false; audioPlayback.src = URL.createObjectURL(file); audioPlayback.classList.remove('hidden'); } else { showError('Please upload a valid audio file'); } } // Voice Recording let mediaRecorder; let audioChunks = []; const recordBtn = document.getElementById('record-btn'); const recordingStatus = document.getElementById('recording-status'); recordBtn.addEventListener('click', async () => { try { if (recordBtn.textContent === '🎤 Record Voice') { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); mediaRecorder = new MediaRecorder(stream); audioChunks = []; mediaRecorder.ondataavailable = (e) => { audioChunks.push(e.data); }; mediaRecorder.onstop = () => { audioFile = new Blob(audioChunks, { type: 'audio/wav' }); analyzeBtn.disabled = false; audioPlayback.src = URL.createObjectURL(audioFile); audioPlayback.classList.remove('hidden'); recordingStatus.textContent = 'Recording saved!'; }; mediaRecorder.start(); recordBtn.textContent = '⏹ Stop Recording'; recordingStatus.textContent = 'Recording...'; } else { mediaRecorder.stop(); recordBtn.textContent = '🎤 Record Voice'; } } catch (error) { showError('Unable to access microphone'); } }); // Processing & Prediction analyzeBtn.addEventListener('click', async () => { showPage('processing-page'); const progressBar = document.getElementById('progress-bar'); try { const formData = new FormData(); formData.append('audio', audioFile, "recorded_audio.wav"); const response = await fetch(`${API_URL}/predict`, { method: 'POST', body: formData }); if (!response.ok) throw new Error('Prediction failed'); const results = await response.json(); progressBar.style.width = '100%'; displayResults(results); } catch (error) { showError('Analysis failed. Please try again.'); } }); function displayResults(results) { document.getElementById('age-result').textContent = results.age_group; document.getElementById('gender-result').textContent = results.gender; showPage('results-page'); } function showError(message) { document.getElementById('error-message').textContent = message; showPage('error-page'); } function downloadReport() { const results = { age: document.getElementById('age-result').textContent, gender: document.getElementById('gender-result').textContent, timestamp: new Date().toISOString() }; const blob = new Blob([JSON.stringify(results, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'voice-analysis-report.json'; a.click(); }