84 lines
2.8 KiB
HTML
84 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Trascrizione Audio</title>
|
|
<style>
|
|
body {font-family: Arial, sans-serif; margin: 2rem;}
|
|
.container {max-width: 600px; margin: auto;}
|
|
.message {color: red; margin-bottom: 1rem;}
|
|
.progress-container {margin-top: 1rem;}
|
|
progress {width: 100%; height: 20px;}
|
|
.status {margin-top: 0.5rem; color: #555;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Carica un file audio</h1>
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
<div class="message">{{ messages[0] }}</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
<form id="uploadForm" method="post" enctype="multipart/form-data">
|
|
<input type="file" name="audio" accept="audio/*" required />
|
|
<br/><br/>
|
|
<button type="submit">Trascrivi</button>
|
|
</form>
|
|
<p class="hint">La trascrizione verrà restituita come file <code>trascrizione.txt</code>.</p>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('uploadForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData();
|
|
formData.append('audio', document.querySelector('input[type="file"]').files[0]);
|
|
|
|
// Mostra la finestra di processing
|
|
document.querySelector('.container').innerHTML = '<h2>Elaborazione in corso...</h2>' +
|
|
'<div class="progress-container">' +
|
|
'<progress id="progressBar" value="0" max="100"></progress>' +
|
|
'<div class="status" id="statusText">Sto caricando il file...</div>' +
|
|
'</div>';
|
|
|
|
fetch('/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.statusUrl) {
|
|
checkStatus(data.statusUrl);
|
|
} else if (data.download) {
|
|
window.location.href = data.download;
|
|
}
|
|
})
|
|
.catch(err => {
|
|
document.getElementById('statusText').textContent = 'Errore: ' + err;
|
|
});
|
|
|
|
function checkStatus(url) {
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const progress = data.progress || 0;
|
|
const progressBar = document.getElementById('progressBar');
|
|
const statusText = document.getElementById('statusText');
|
|
progressBar.value = progress;
|
|
statusText.textContent = data.message || 'Elaborazione in corso...';
|
|
|
|
if (progress < 100) {
|
|
setTimeout(() => checkStatus(url), 1000);
|
|
} else if (data.download) {
|
|
statusText.textContent = 'Completato! Scarico il file...';
|
|
window.location.href = data.download;
|
|
}
|
|
})
|
|
.catch(err => {
|
|
document.getElementById('statusText').textContent = 'Errore nel recupero stato: ' + err;
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |