Update index.html

index.html

@@ -713,7 +713,12 @@
       if (level3Slider) level3Slider.disabled = false;
 
       // Permitir sembrar también en modo anónimo (no se guardará en la nube)
-      visualizeButton.addEventListener('click', handleAnalysisAndVisualization);
+      // Evitar múltiples bindings si la escena se reinstala
+      if (!visualizeButton.dataset.bound) {
+        visualizeButton.dataset.originalHtml = visualizeButton.innerHTML;
+        visualizeButton.addEventListener('click', handleAnalysisAndVisualization);
+        visualizeButton.dataset.bound = '1';
+      }
       if (isAnonymous) {
         console.log('Modo anónimo: podrás visualizar neuronas, pero no se guardarán en Firestore.');
         topicInput.placeholder = 'Ingresa un tema para sembrar (modo anónimo)';
@@ -794,14 +799,25 @@
       renderer.render(scene, camera);
     }
 
-    // Fetch helper with backoff
-    async function fetchWithBackoff(url, options, retries = 3, delay = 1000) {
+    // Fetch helper with timeout + backoff
+    async function fetchWithTimeout(url, options = {}, timeoutMs = 25000) {
+      const controller = new AbortController();
+      const id = setTimeout(() => controller.abort(), timeoutMs);
+      try {
+        const resp = await fetch(url, { ...options, signal: controller.signal });
+        return resp;
+      } finally {
+        clearTimeout(id);
+      }
+    }
+
+    async function fetchWithBackoff(url, options, retries = 2, delay = 1000, timeoutMs = 25000) {
       try {
-        return await fetch(url, options);
+        return await fetchWithTimeout(url, options, timeoutMs);
       } catch (err) {
         if (retries > 0) {
           await new Promise(resolve => setTimeout(resolve, delay));
-          return fetchWithBackoff(url, options, retries - 1, delay * 2);
+          return fetchWithBackoff(url, options, retries - 1, delay * 2, timeoutMs);
         } else {
           throw err;
         }
@@ -896,7 +912,7 @@
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ model: modelId, payload })
-          });
+          }, /*retries*/ 1, /*delay*/ 1000, /*timeoutMs*/ 25000);
           if (proxyResp.ok) {
             return await proxyResp.json();
           } else {
@@ -918,7 +934,7 @@
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(payload)
-      });
+      }, /*retries*/ 2, /*delay*/ 1000, /*timeoutMs*/ 25000);
       if (!directResp.ok) {
         const errorBody = await directResp.text();
         console.error('Error en la API de Gemini (fallback):', directResp.status, errorBody);
@@ -949,7 +965,16 @@
       }
 
       button.disabled = true;
-      button.innerText = 'Analizando...';
+      // Guardar HTML original si no existe y colocar estado "Analizando..."
+      if (!button.dataset.originalHtml) button.dataset.originalHtml = button.innerHTML;
+      button.innerHTML = 'Analizando...';
+
+      // Watchdog: si algo se queda colgado, restaurar UI en 30s
+      const watchdog = setTimeout(() => {
+        try { button.disabled = false; } catch {}
+        try { if (button.dataset.originalHtml) button.innerHTML = button.dataset.originalHtml; } catch {}
+        try { progressBarContainer.style.display = 'none'; } catch {}
+      }, 30000);
 
       progressBar.style.transition = 'none';
       progressBar.style.width = '0%';
@@ -1006,8 +1031,13 @@
       } catch (error) {
         console.error("Error en handleAnalysisAndVisualization:", error);
       } finally {
+        clearTimeout(watchdog);
         button.disabled = false;
-        button.innerText = 'Sembrar';
+        if (button.dataset.originalHtml) {
+          button.innerHTML = button.dataset.originalHtml;
+        } else {
+          button.innerText = 'Sembrar';
+        }
         // Limpiar el input para permitir nueva siembra inmediata
         const ti = document.getElementById('topicInput');
         if (ti) ti.value = '';