Initial commit: SmallWhisper - web app per trascrizione audio con faster-whisper

templates/index.html

@@ -0,0 +1,84 @@
+<!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>