audio_to_text / static /script.js
missvector's picture
Upd
51c858c
const copyBtn = document.getElementById('copyBtn');
const copyFeedback = document.getElementById('copyFeedback');
const transcriptText = document.getElementById('transcriptText');
const dropZone = document.getElementById('dropZone');
const attachBtn = document.getElementById('attachBtn');
const transcriptArea = document.getElementById('transcriptArea');
// Copy button functionality
copyBtn.addEventListener('click', async () => {
if (transcriptText.value) {
await navigator.clipboard.writeText(transcriptText.value);
copyFeedback.classList.add('show');
setTimeout(() => {
copyFeedback.classList.remove('show');
}, 2000);
}
});
// Prevent defaults for drag events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
// Drag over effects
['dragenter', 'dragover'].forEach(eventName => {
dropZone.addEventListener(eventName, () => {
dropZone.classList.add('drag-over');
});
});
['dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, () => {
dropZone.classList.remove('drag-over');
});
});
// Handle dropped files
dropZone.addEventListener('drop', (e) => {
const files = e.dataTransfer.files;
if (files.length) {
handleFile(files[0]);
}
});
// Attach button click
attachBtn.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'audio/*';
input.onchange = (e) => {
if (e.target.files.length) {
handleFile(e.target.files[0]);
}
};
input.click();
});
// Click on drop zone (except attach button)
dropZone.addEventListener('click', (e) => {
if (e.target !== attachBtn && !attachBtn.contains(e.target)) {
attachBtn.click();
}
});
// Handle file upload and transcription
async function handleFile(file) {
console.log('файл получен:', file.name);
dropZone.style.display = 'none';
transcriptArea.classList.add('active');
transcriptText.value = 'расшифровка...\n\nэто занимает несколько секунд';
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/transcribe', {
method: 'POST',
body: formData
});
const data = await response.json();
if (data.status === 'ok') {
transcriptText.value = data.text;
} else {
transcriptText.value = 'Ошибка: ' + data.text;
}
} catch (error) {
transcriptText.value = 'Ошибка соединения с сервером';
console.error('Fetch error:', error);
}
}