Update index.html

index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="es">
 <head>
     <meta charset="UTF-8">
@@ -122,6 +123,12 @@
             cursor: not-allowed;
         }
 
+        #word-queue-info {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+
         #status {
             margin-top: 16px;
             font-size: 0.875rem;
@@ -146,13 +153,14 @@
         </div>
         
         <div class="form-group">
-            <label for="word">Palabra a decir:</label>
+            <label for="word">Palabra actual a decir:</label>
             <input type="text" id="word" value="casa">
+            <div id="word-queue-info">Palabra 1 de N en cola (4 reps c/u)</div>
         </div>
         
-        <div class="form-group">
+        <div class="form-group" style="display:none;">
             <label for="max_repetitions">Máx. Repeticiones:</label>
-            <input type="number" id="max_repetitions" value="5">
+            <input type="number" id="max_repetitions" value="4">
         </div>
 
         <button id="recordBtn">Grabar (3 segundos)</button>
@@ -165,6 +173,23 @@
     </div>
 
     <script>
+        // Lista de palabras de ejemplo (personalízalas o cárgalas dinámicamente)
+        const wordList = ["casa", "perro", "gato", "agua", "luz"];
+        let currentWordIndex = 0;
+        let repeticionesActualesPalabra = {}; // rastrea repeticiones locales en cliente o confía en backend
+
+        // Inicializar primer valor
+        const wordInput = document.getElementById('word');
+        const queueInfo = document.getElementById('word-queue-info');
+        const maxRepInput = document.getElementById('max_repetitions');
+        maxRepInput.value = 4;
+
+        function updateWordDisplay() {
+            wordInput.value = wordList[currentWordIndex] || wordList[0];
+            queueInfo.textContent = `Palabra ${currentWordIndex + 1} de ${wordList.length} ("${wordInput.value}" - meta: 4 reps)`;
+        }
+        updateWordDisplay();
+
         let mediaRecorder;
         let audioChunks = [];
         let timerInterval;
@@ -183,7 +208,6 @@
         }
 
         recordBtn.addEventListener('click', async () => {
-            // Si ya está grabando, ignorar o detener
             if (mediaRecorder && mediaRecorder.state === 'recording') return;
 
             try {
@@ -206,8 +230,8 @@
                     const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                     const formData = new FormData();
                     formData.append('file', audioBlob, 'audio.wav');
-                    formData.append('word', document.getElementById('word').value);
-                    formData.append('max_repetitions', document.getElementById('max_repetitions').value);
+                    formData.append('word', wordInput.value);
+                    formData.append('max_repetitions', maxRepInput.value);
                     formData.append('dataset_name', document.getElementById('dataset_name').value);
 
                     try {
@@ -218,9 +242,23 @@
                         const result = await response.json();
                         
                         if (response.ok) {
-                            setStatus(`✅ Guardado: ${result.repetition}/${result.max_repetitions}`, 'success');
+                            setStatus(`✅ Guardado: Rep. ${result.repetition}/4`, 'success');
+                            
+                            // Si alcanzó o superó las 4 repeticiones, avanzar automáticamente a la siguiente palabra
+                            if (result.repetition >= 4) {
+                                currentWordIndex = (currentWordIndex + 1) % wordList.length;
+                                setTimeout(() => {
+                                    updateWordDisplay();
+                                    setStatus(`🔄 Cambiado automáticamente a: "${wordInput.value}"`);
+                                }, 1200);
+                            }
                         } else {
                             setStatus(`❌ Límite/Error: ${result.detail || 'Error en servidor'}`, 'error');
+                            // Si dice que ya alcanzó el límite, por seguridad avanzamos también de palabra
+                            if (result.detail && result.detail.includes("límite máximo")) {
+                                currentWordIndex = (currentWordIndex + 1) % wordList.length;
+                                setTimeout(() => updateWordDisplay(), 1500);
+                            }
                         }
                     } catch (err) {
                         setStatus(`❌ Error de red: ${err.message}`, 'error');
@@ -230,17 +268,14 @@
                         recordBtn.textContent = 'Grabar (3 segundos)';
                     }
 
-                    // Apagar micrófono
                     stream.getTracks().forEach(track => track.stop());
                 };
 
-                // Iniciar grabación UI
                 mediaRecorder.start();
                 recordBtn.classList.add('recording');
                 recordBtn.textContent = '🔴 Grabando...';
                 setStatus('Habla ahora...');
                 
-                // Mostrar barra de progreso
                 progressContainer.style.display = 'block';
                 progressBar.style.width = '0%';
                 
@@ -253,7 +288,6 @@
                     progressBar.style.width = pct + '%';
                 }, 50);
 
-                // Detener automáticamente a los 3 segundos
                 timeoutHandle = setTimeout(() => {
                     if (mediaRecorder && mediaRecorder.state === 'recording') {
                         mediaRecorder.stop();