Update index.html

index.html

@@ -1,5 +1,3 @@
-<!DOCTYPE html>
-<!DOCTYPE html>
 <html lang="es">
 <head>
     <meta charset="UTF-8">
@@ -124,7 +122,7 @@
         }
 
         #word-queue-info {
-            font-size: 0.8rem;
+            font-size: 0.75rem;
             color: var(--text-secondary);
             margin-top: 4px;
         }
@@ -153,12 +151,12 @@
         </div>
         
         <div class="form-group">
-            <label for="word">Palabra actual a decir:</label>
+            <label for="word">Palabra 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 id="word-queue-info">Palabra 1 de 5 en lista (meta: 4 repeticiones)</div>
         </div>
         
-        <div class="form-group" style="display:none;">
+        <div class="form-group">
             <label for="max_repetitions">Máx. Repeticiones:</label>
             <input type="number" id="max_repetitions" value="4">
         </div>
@@ -173,22 +171,22 @@
     </div>
 
     <script>
-        // Lista de palabras de ejemplo (personalízalas o cárgalas dinámicamente)
+        // Lista de palabras predeterminadas (puedes editar o ampliar)
         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');
+        
+        // Fijar valor inicial en 4
         maxRepInput.value = 4;
+        wordInput.value = wordList[0];
 
-        function updateWordDisplay() {
-            wordInput.value = wordList[currentWordIndex] || wordList[0];
-            queueInfo.textContent = `Palabra ${currentWordIndex + 1} de ${wordList.length} ("${wordInput.value}" - meta: 4 reps)`;
+        function actualizarInfoCola() {
+            wordInput.value = wordList[currentWordIndex];
+            queueInfo.textContent = `Palabra ${currentWordIndex + 1} de ${wordList.length} (meta: 4 repeticiones)`;
         }
-        updateWordDisplay();
 
         let mediaRecorder;
         let audioChunks = [];
@@ -242,22 +240,22 @@
                         const result = await response.json();
                         
                         if (response.ok) {
-                            setStatus(`✅ Guardado: Rep. ${result.repetition}/4`, 'success');
+                            setStatus(`✅ Guardado: Rep. ${result.repetition}/${result.max_repetitions}`, 'success');
                             
-                            // Si alcanzó o superó las 4 repeticiones, avanzar automáticamente a la siguiente palabra
+                            // Si llegó a la 4ta repetición o más, avanza automáticamente a la siguiente palabra
                             if (result.repetition >= 4) {
                                 currentWordIndex = (currentWordIndex + 1) % wordList.length;
                                 setTimeout(() => {
-                                    updateWordDisplay();
-                                    setStatus(`🔄 Cambiado automáticamente a: "${wordInput.value}"`);
+                                    actualizarInfoCola();
+                                    setStatus(`🔄 Siguiente palabra: "${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
+                            // Si el backend avisa que superó o alcanzó el límite, avanza también
                             if (result.detail && result.detail.includes("límite máximo")) {
                                 currentWordIndex = (currentWordIndex + 1) % wordList.length;
-                                setTimeout(() => updateWordDisplay(), 1500);
+                                setTimeout(() => actualizarInfoCola(), 1200);
                             }
                         }
                     } catch (err) {