Spaces:
Sleeping
Sleeping
File size: 4,229 Bytes
09d3f42 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | 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();
}
|