Spaces:

Cristobal299
/

IAweb

Running

App Files Files Community

Tu Nombre commited on May 22

Commit

683e056

1 Parent(s): f4d8f37

Actualización: Cambio a modelo Llama 3.1 8B

Browse files

Files changed (1) hide show

index.html +742 -66

index.html CHANGED Viewed

@@ -1,74 +1,750 @@
 <!DOCTYPE html>
 <html lang="es">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>IA Web Re-Designer</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style> body { overflow: hidden; } </style>
 </head>
-<body class="bg-slate-50">
-    <div id="setup-panel" class="absolute inset-0 flex items-center justify-center z-50 p-4">
-        <div class="bg-white p-8 md:p-12 rounded-[40px] shadow-2xl shadow-blue-100 w-full max-w-md text-center border border-slate-100">
-            <div class="w-16 h-16 bg-emerald-500 rounded-2xl mx-auto mb-6 flex items-center justify-center text-white text-3xl font-bold shadow-lg shadow-emerald-200">🎨</div>
-            <h1 class="text-3xl font-bold text-slate-900 mb-2">Web Re-Designer</h1>
-            <p class="text-slate-500 mb-8 font-medium">Clona y cambia de color cualquier web</p>
-            <input type="text" id="url" placeholder="URL original (Ej: https://...)" class="w-full p-4 rounded-2xl bg-slate-50 border border-slate-200 mb-4 outline-none focus:ring-2 focus:ring-emerald-500">
-            <input type="text" id="nombre" placeholder="Nuevo Nombre del Negocio" class="w-full p-4 rounded-2xl bg-slate-50 border border-slate-200 mb-4 outline-none focus:ring-2 focus:ring-emerald-500">
-            <input type="text" id="color" placeholder="Color (blue, red, emerald, purple...)" class="w-full p-4 rounded-2xl bg-slate-50 border border-slate-200 mb-6 outline-none focus:ring-2 focus:ring-emerald-500">
-            <button onclick="generarWeb()" id="btn" class="w-full bg-emerald-500 text-white py-4 rounded-2xl font-bold shadow-xl shadow-emerald-200 hover:bg-emerald-600 transition-all">
-                CLONAR Y REDISEÑAR
-            </button>
-        </div>
     </div>
-    <iframe id="preview" class="w-full h-screen border-none hidden absolute top-0 left-0 z-10"></iframe>
-    <script>
-        async function generarWeb() {
-            const btn = document.getElementById('btn');
-            const panel = document.getElementById('setup-panel');
-            const preview = document.getElementById('preview');
-            const data = {
-                url: document.getElementById('url').value,
-                nuevo_nombre: document.getElementById('nombre').value,
-                color_primario: document.getElementById('color').value
-            };
-            if(!data.url || !data.nuevo_nombre) return alert("Faltan datos por rellenar");
-            btn.innerHTML = "⏳ Escaneando y programando...";
-            btn.disabled = true;
-            try {
-                const res = await fetch('/api/generate', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify(data)
-                });
-                const result = await res.json();
-                if(result.status === "success") {
-                    // Ocultar panel y mostrar web a pantalla completa
-                    panel.style.display = 'none';
-                    preview.style.display = 'block';
-                    preview.srcdoc = result.html;
-                } else {
-                    alert("Error al clonar la web.");
-                    btn.innerHTML = "CLONAR Y REDISEÑAR";
-                    btn.disabled = false;
-                }
-            } catch(e) {
-                alert("Error de conexión con la IA.");
-                btn.innerHTML = "CLONAR Y REDISEÑAR";
-                btn.disabled = false;
-            }
-        }
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="es">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Vigilante Paciente</title>
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:wght@300;600;800&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #030a0e;
+    --panel: #0a1a22;
+    --border: #0e3a50;
+    --cyan: #00e5ff;
+    --green: #00ff88;
+    --red: #ff2244;
+    --yellow: #ffcc00;
+    --text: #c8e8f0;
+    --mono: 'Share Tech Mono', monospace;
+    --display: 'Exo 2', sans-serif;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--display);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+  /* Fondo animado */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      radial-gradient(ellipse at 20% 50%, rgba(0,229,255,0.04) 0%, transparent 60%),
+      radial-gradient(ellipse at 80% 20%, rgba(0,255,136,0.03) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+  }
+  .grid-bg {
+    position: fixed;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
+    background-size: 40px 40px;
+    pointer-events: none;
+    z-index: 0;
+  }
+  .container {
+    position: relative;
+    z-index: 1;
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 16px;
+  }
+  /* Header */
+  .header {
+    text-align: center;
+    padding: 20px 0 16px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 16px;
+  }
+  .header h1 {
+    font-size: 1.4rem;
+    font-weight: 800;
+    letter-spacing: 0.15em;
+    color: var(--cyan);
+    text-shadow: 0 0 20px rgba(0,229,255,0.5);
+    text-transform: uppercase;
+  }
+  .header p {
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    color: #4a7a8a;
+    margin-top: 4px;
+    letter-spacing: 0.1em;
+  }
+  /* Estado principal */
+  .estado-box {
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 14px;
+    background: var(--panel);
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.3s, box-shadow 0.3s;
+  }
+  .estado-box.normal { border-color: var(--green); box-shadow: 0 0 20px rgba(0,255,136,0.1); }
+  .estado-box.critico { border-color: var(--red); box-shadow: 0 0 30px rgba(255,34,68,0.3); animation: pulseRed 0.8s infinite; }
+  .estado-box.esperando { border-color: var(--border); }
+  @keyframes pulseRed {
+    0%, 100% { box-shadow: 0 0 20px rgba(255,34,68,0.3); }
+    50% { box-shadow: 0 0 50px rgba(255,34,68,0.7); }
+  }
+  .estado-label {
+    font-family: var(--mono);
+    font-size: 0.6rem;
+    letter-spacing: 0.2em;
+    color: #4a7a8a;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+  }
+  .estado-valor {
+    font-size: 2rem;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  .estado-valor.normal { color: var(--green); text-shadow: 0 0 15px rgba(0,255,136,0.5); }
+  .estado-valor.critico { color: var(--red); text-shadow: 0 0 15px rgba(255,34,68,0.7); }
+  .estado-valor.esperando { color: #4a7a8a; }
+  .motivo-texto {
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    color: var(--yellow);
+    margin-top: 8px;
+    min-height: 16px;
+  }
+  /* Cámara */
+  .camara-container {
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 14px;
+    position: relative;
+    background: #000;
+    aspect-ratio: 4/3;
+  }
+  #video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transform: scaleX(-1);
+  }
+  .camara-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  /* Esquinas decorativas */
+  .corner {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-color: var(--cyan);
+    border-style: solid;
+    opacity: 0.7;
+  }
+  .corner.tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
+  .corner.tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
+  .corner.bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
+  .corner.br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
+  .camara-label {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: var(--mono);
+    font-size: 0.6rem;
+    color: var(--cyan);
+    letter-spacing: 0.15em;
+    opacity: 0.8;
+  }
+  .rec-dot {
+    position: absolute;
+    top: 10px;
+    right: 32px;
+    width: 8px;
+    height: 8px;
+    background: var(--red);
+    border-radius: 50%;
+    animation: blink 1.2s infinite;
+  }
+  @keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.2; }
+  }
+  /* Panel de constantes */
+  .constantes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+  .constante-card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px;
+  }
+  .constante-label {
+    font-family: var(--mono);
+    font-size: 0.55rem;
+    color: #4a7a8a;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    margin-bottom: 4px;
+  }
+  .constante-valor {
+    font-family: var(--mono);
+    font-size: 1.6rem;
+    font-weight: bold;
+    color: var(--cyan);
+  }
+  .constante-unidad {
+    font-size: 0.6rem;
+    color: #4a7a8a;
+    margin-left: 2px;
+  }
+  /* Sonido */
+  .sonido-card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 14px;
+  }
+  .sonido-label {
+    font-family: var(--mono);
+    font-size: 0.55rem;
+    color: #4a7a8a;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .sonido-barra-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .sonido-barra {
+    flex: 1;
+    height: 6px;
+    background: var(--border);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  .sonido-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--green), var(--cyan));
+    border-radius: 3px;
+    transition: width 0.15s;
+    width: 0%;
+  }
+  .sonido-estado {
+    font-family: var(--mono);
+    font-size: 0.7rem;
+    color: var(--green);
+    min-width: 60px;
+    text-align: right;
+  }
+  /* Nombre */
+  .nombre-input {
+    width: 100%;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 10px 14px;
+    color: var(--text);
+    font-family: var(--mono);
+    font-size: 0.85rem;
+    margin-bottom: 14px;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+  .nombre-input:focus { border-color: var(--cyan); }
+  .nombre-input::placeholder { color: #2a4a5a; }
+  /* Botones */
+  .botones {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+  .btn {
+    padding: 14px;
+    border: none;
+    border-radius: 8px;
+    font-family: var(--display);
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .btn-iniciar {
+    background: var(--cyan);
+    color: var(--bg);
+  }
+  .btn-iniciar:hover { background: #00ccee; transform: translateY(-1px); }
+  .btn-iniciar:disabled { background: #0a3040; color: #2a5060; cursor: not-allowed; transform: none; }
+  .btn-parar {
+    background: transparent;
+    color: var(--red);
+    border: 1px solid var(--red);
+  }
+  .btn-parar:hover { background: rgba(255,34,68,0.1); }
+  .btn-parar:disabled { opacity: 0.3; cursor: not-allowed; }
+  /* Log */
+  .log-box {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 14px;
+    max-height: 120px;
+    overflow-y: auto;
+  }
+  .log-label {
+    font-family: var(--mono);
+    font-size: 0.55rem;
+    color: #4a7a8a;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .log-entry {
+    font-family: var(--mono);
+    font-size: 0.7rem;
+    color: #5a8a9a;
+    padding: 2px 0;
+    border-bottom: 1px solid rgba(14,58,80,0.4);
+  }
+  .log-entry:last-child { border-bottom: none; }
+  .log-entry.critico { color: var(--red); }
+  .log-entry.normal { color: var(--green); }
+  .log-entry.info { color: var(--cyan); }
+  /* Alarma overlay */
+  .alarma-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(255,34,68,0.15);
+    z-index: 100;
+    backdrop-filter: blur(2px);
+    animation: flashRed 0.5s infinite;
+  }
+  .alarma-overlay.activa { display: flex; align-items: center; justify-content: center; }
+  @keyframes flashRed {
+    0%, 100% { background: rgba(255,34,68,0.1); }
+    50% { background: rgba(255,34,68,0.3); }
+  }
+  .alarma-card {
+    background: #1a0508;
+    border: 2px solid var(--red);
+    border-radius: 12px;
+    padding: 30px;
+    text-align: center;
+    max-width: 300px;
+    box-shadow: 0 0 60px rgba(255,34,68,0.5);
+  }
+  .alarma-icono { font-size: 3rem; margin-bottom: 10px; }
+  .alarma-titulo {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--red);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+  }
+  .alarma-motivo {
+    font-family: var(--mono);
+    font-size: 0.8rem;
+    color: var(--text);
+    margin-bottom: 20px;
+    line-height: 1.5;
+  }
+  .btn-silenciar {
+    background: var(--red);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 24px;
+    font-family: var(--display);
+    font-weight: 600;
+    font-size: 0.85rem;
+    cursor: pointer;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 4px; }
+  ::-webkit-scrollbar-track { background: var(--bg); }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+</style>
 </head>
+<body>
+<div class="grid-bg"></div>
+<!-- Alarma overlay -->
+<div class="alarma-overlay" id="alarmaOverlay">
+  <div class="alarma-card">
+    <div class="alarma-icono">🚨</div>
+    <div class="alarma-titulo">¡ALERTA CRÍTICA!</div>
+    <div class="alarma-motivo" id="alarmaMotivo">Detectado problema en el paciente</div>
+    <button class="btn-silenciar" onclick="silenciarAlarma()">SILENCIAR</button>
+  </div>
+</div>
+<div class="container">
+  <div class="header">
+    <h1>⚕ Vigilante Paciente</h1>
+    <p>SISTEMA DE MONITORIZACIÓN SIN CONTACTO · v1.0</p>
+  </div>
+  <!-- Estado IA -->
+  <div class="estado-box esperando" id="estadoBox">
+    <div class="estado-label">// ESTADO DEL SISTEMA</div>
+    <div class="estado-valor esperando" id="estadoValor">EN ESPERA</div>
+    <div class="motivo-texto" id="motivoTexto"></div>
+  </div>
+  <!-- Cámara -->
+  <div class="camara-container">
+    <video id="video" autoplay playsinline muted></video>
+    <div class="camara-overlay">
+      <div class="corner tl"></div>
+      <div class="corner tr"></div>
+      <div class="corner bl"></div>
+      <div class="corner br"></div>
+      <div class="camara-label">CÁMARA ACTIVA</div>
+      <div class="rec-dot" id="recDot" style="display:none"></div>
+    </div>
+  </div>
+  <!-- Constantes -->
+  <div class="constantes">
+    <div class="constante-card">
+      <div class="constante-label">// Pulso estimado</div>
+      <div class="constante-valor" id="pulsoValor">--<span class="constante-unidad">BPM</span></div>
+    </div>
+    <div class="constante-card">
+      <div class="constante-label">// Oxígeno estimado</div>
+      <div class="constante-valor" id="oxigenoValor">--<span class="constante-unidad">%</span></div>
+    </div>
+  </div>
+  <!-- Sonido -->
+  <div class="sonido-card">
+    <div class="sonido-label">// Nivel de sonido ambiente</div>
+    <div class="sonido-barra-container">
+      <div class="sonido-barra">
+        <div class="sonido-fill" id="sonidoFill"></div>
+      </div>
+      <div class="sonido-estado" id="sonidoEstado">SILENCIO</div>
+    </div>
+  </div>
+  <!-- Nombre -->
+  <input type="text" class="nombre-input" id="nombreInput" placeholder="Nombre del paciente..." value="Paciente">
+  <!-- Botones -->
+  <div class="botones">
+    <button class="btn btn-iniciar" id="btnIniciar" onclick="iniciarVigilancia()">▶ Iniciar</button>
+    <button class="btn btn-parar" id="btnParar" onclick="pararVigilancia()" disabled>■ Parar</button>
+  </div>
+  <!-- Log -->
+  <div class="log-box">
+    <div class="log-label">// Registro de eventos</div>
+    <div id="logContainer">
+      <div class="log-entry info">Sistema iniciado. Listo para vigilar.</div>
     </div>
+  </div>
+</div>
+<script>
+  // ─── CONFIGURACIÓN ───────────────────────────────────────────
+  const BACKEND_URL = "https://cristobal299-iaweb.hf.space/vigilar";
+  const INTERVALO_SEGUNDOS = 15;
+  // ─── ESTADO GLOBAL ───────────────────────────────────────────
+  let vigilanciaActiva = false;
+  let intervalId = null;
+  let audioContext = null;
+  let analyser = null;
+  let microfonoStream = null;
+  let camaraStream = null;
+  let nivelSonido = 0;
+  let alarmaAudio = null;
+  // ─── INICIAR VIGILANCIA ──────────────────────────────────────
+  async function iniciarVigilancia() {
+    try {
+      // Cámara
+      camaraStream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: 'user', width: 640, height: 480 },
+        audio: false
+      });
+      document.getElementById('video').srcObject = camaraStream;
+      // Micrófono
+      microfonoStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      const source = audioContext.createMediaStreamSource(microfonoStream);
+      analyser = audioContext.createAnalyser();
+      analyser.fftSize = 256;
+      source.connect(analyser);
+      iniciarVisualizacionSonido();
+      vigilanciaActiva = true;
+      document.getElementById('btnIniciar').disabled = true;
+      document.getElementById('btnParar').disabled = false;
+      document.getElementById('recDot').style.display = 'block';
+      agregarLog('Vigilancia iniciada ✓', 'info');
+      // Primera llamada inmediata
+      await bucleVigilancia();
+      // Bucle cada X segundos
+      intervalId = setInterval(bucleVigilancia, INTERVALO_SEGUNDOS * 1000);
+    } catch (err) {
+      agregarLog('Error: ' + err.message, 'critico');
+      alert('Necesito acceso a cámara y micrófono para funcionar.');
+    }
+  }
+  // ─── PARAR VIGILANCIA ────────────────────────────────────────
+  function pararVigilancia() {
+    vigilanciaActiva = false;
+    clearInterval(intervalId);
+    if (camaraStream) camaraStream.getTracks().forEach(t => t.stop());
+    if (microfonoStream) microfonoStream.getTracks().forEach(t => t.stop());
+    if (audioContext) audioContext.close();
+    document.getElementById('video').srcObject = null;
+    document.getElementById('btnIniciar').disabled = false;
+    document.getElementById('btnParar').disabled = true;
+    document.getElementById('recDot').style.display = 'none';
+    document.getElementById('sonidoFill').style.width = '0%';
+    document.getElementById('sonidoEstado').textContent = 'SILENCIO';
+    actualizarEstado('EN ESPERA', 'esperando', '');
+    agregarLog('Vigilancia detenida', 'info');
+  }
+  // ─── BUCLE PRINCIPAL ─────────────────────────────────────────
+  async function bucleVigilancia() {
+    if (!vigilanciaActiva) return;
+    const nombre = document.getElementById('nombreInput').value || 'Paciente';
+    // Simular pulso con variación realista (paciente en reposo)
+    const pulso = Math.floor(65 + Math.random() * 20 + (nivelSonido > 60 ? 15 : 0));
+    const oxigeno = Math.floor(94 + Math.random() * 4);
+    // Clasificar sonido
+    let descripcionSonido = "silencio";
+    if (nivelSonido > 75) descripcionSonido = "sonido muy alto detectado, posible grito o golpe";
+    else if (nivelSonido > 55) descripcionSonido = "ruido elevado, posible quejido o movimiento brusco";
+    else if (nivelSonido > 30) descripcionSonido = "ruido leve de fondo";
+    // Actualizar UI
+    document.getElementById('pulsoValor').innerHTML = pulso + '<span class="constante-unidad">BPM</span>';
+    document.getElementById('oxigenoValor').innerHTML = oxigeno + '<span class="constante-unidad">%</span>';
+    agregarLog(`Enviando → Pulso:${pulso} O2:${oxigeno}% Sonido:"${descripcionSonido}"`, 'info');
+    try {
+      const resp = await fetch(BACKEND_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          nombre: nombre,
+          pulso: pulso,
+          oxigeno: oxigeno,
+          sonido_ambiente: descripcionSonido,
+          movimiento_respiracion: "regular"
+        })
+      });
+      const texto = await resp.text();
+      let data;
+      try {
+        // A veces viene como string JSON dentro de string
+        data = JSON.parse(texto);
+        if (typeof data === 'string') data = JSON.parse(data);
+      } catch(e) {
+        agregarLog('Error parseando respuesta', 'critico');
+        return;
+      }
+      if (data.estado === 'CRITICO') {
+        actualizarEstado('⚠ CRÍTICO', 'critico', data.motivo || '');
+        agregarLog('CRÍTICO: ' + (data.motivo || ''), 'critico');
+        dispararAlarma(data.motivo || 'Estado crítico detectado');
+      } else {
+        actualizarEstado('NORMAL', 'normal', '');
+        agregarLog('Estado: NORMAL ✓', 'normal');
+      }
+    } catch (err) {
+      agregarLog('Error de conexión: ' + err.message, 'critico');
+    }
+  }
+  // ─── VISUALIZACIÓN SONIDO ────────────────────────────────────
+  function iniciarVisualizacionSonido() {
+    const dataArray = new Uint8Array(analyser.frequencyBinCount);
+    function actualizar() {
+      if (!vigilanciaActiva) return;
+      analyser.getByteFrequencyData(dataArray);
+      const promedio = dataArray.reduce((a, b) => a + b) / dataArray.length;
+      nivelSonido = promedio;
+      const porcentaje = Math.min(100, (promedio / 128) * 100);
+      document.getElementById('sonidoFill').style.width = porcentaje + '%';
+      let estado = 'SILENCIO';
+      let color = 'var(--green)';
+      if (promedio > 75) { estado = 'ALERTA'; color = 'var(--red)'; }
+      else if (promedio > 55) { estado = 'RUIDO'; color = 'var(--yellow)'; }
+      else if (promedio > 30) { estado = 'LEVE'; color = 'var(--cyan)'; }
+      document.getElementById('sonidoEstado').textContent = estado;
+      document.getElementById('sonidoEstado').style.color = color;
+      requestAnimationFrame(actualizar);
+    }
+    actualizar();
+  }
+  // ─── ESTADO UI ───────────────────────────────────────────────
+  function actualizarEstado(texto, clase, motivo) {
+    const box = document.getElementById('estadoBox');
+    const valor = document.getElementById('estadoValor');
+    const motivoEl = document.getElementById('motivoTexto');
+    box.className = 'estado-box ' + clase;
+    valor.className = 'estado-valor ' + clase;
+    valor.textContent = texto;
+    motivoEl.textContent = motivo;
+  }
+  // ─── LOG ─────────────────────────────────────────────────────
+  function agregarLog(mensaje, tipo) {
+    const container = document.getElementById('logContainer');
+    const entry = document.createElement('div');
+    entry.className = 'log-entry ' + (tipo || '');
+    const hora = new Date().toLocaleTimeString('es', {hour:'2-digit', minute:'2-digit', second:'2-digit'});
+    entry.textContent = `[${hora}] ${mensaje}`;
+    container.appendChild(entry);
+    container.scrollTop = container.scrollHeight;
+    // Máximo 50 entradas
+    while (container.children.length > 50) {
+      container.removeChild(container.firstChild);
+    }
+  }
+  // ─── ALARMA ──────────────────────────────────────────────────
+  function dispararAlarma(motivo) {
+    document.getElementById('alarmaMotivo').textContent = motivo;
+    document.getElementById('alarmaOverlay').classList.add('activa');
+    // Sonido de alarma con Web Audio API
+    try {
+      const ctx = new AudioContext();
+      function beep(freq, start, dur) {
+        const osc = ctx.createOscillator();
+        const gain = ctx.createGain();
+        osc.connect(gain);
+        gain.connect(ctx.destination);
+        osc.frequency.value = freq;
+        osc.type = 'square';
+        gain.gain.setValueAtTime(0.3, ctx.currentTime + start);
+        gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + start + dur);
+        osc.start(ctx.currentTime + start);
+        osc.stop(ctx.currentTime + start + dur);
+      }
+      // Patrón de alarma
+      for (let i = 0; i < 6; i++) {
+        beep(880, i * 0.4, 0.3);
+        beep(660, i * 0.4 + 0.2, 0.15);
+      }
+    } catch(e) {}
+  }
+  function silenciarAlarma() {
+    document.getElementById('alarmaOverlay').classList.remove('activa');
+  }
+</script>
 </body>
 </html>