fde0fc1c72
Cerrar el panel dejaba el proceso vivo (whisper agarrando la grafica, el microfono escuchando). Ahora hay un boton "cerrar" (dos clics) y cerrar la ultima pestaña apaga JARVIS del todo: para la voz, suelta whisper y cierra el proceso, via SIGINT (la misma limpieza que Ctrl+C).
186 lines
7.5 KiB
HTML
186 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<!-- HUD de JARVIS. Se carga desde config/jarvis-hud/, asi que este fichero
|
|
se puede editar y recargar la pestaña sin recompilar el flatpak. -->
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JARVIS</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<main class="hud">
|
|
|
|
<!-- columna izquierda: constantes de la maquina -->
|
|
<aside class="telemetria" id="telemetria">
|
|
<h2>sistema</h2>
|
|
<div class="medidor" data-clave="cpu">
|
|
<span class="etiqueta">cpu</span>
|
|
<div class="barra"><i></i></div>
|
|
<span class="cifra">--</span>
|
|
</div>
|
|
<div class="medidor" data-clave="ram">
|
|
<span class="etiqueta">ram</span>
|
|
<div class="barra"><i></i></div>
|
|
<span class="cifra">--</span>
|
|
</div>
|
|
<div class="medidor" data-clave="gpu">
|
|
<span class="etiqueta">gpu</span>
|
|
<div class="barra"><i></i></div>
|
|
<span class="cifra">--</span>
|
|
</div>
|
|
<div class="medidor" data-clave="vram">
|
|
<span class="etiqueta">vram</span>
|
|
<div class="barra"><i></i></div>
|
|
<span class="cifra">--</span>
|
|
</div>
|
|
|
|
<div class="medidor" data-clave="swap">
|
|
<span class="etiqueta">swap</span>
|
|
<div class="barra"><i></i></div>
|
|
<span class="cifra">--</span>
|
|
</div>
|
|
<div class="medidor" data-clave="disco">
|
|
<span class="etiqueta">disco</span>
|
|
<div class="barra"><i></i></div>
|
|
<span class="cifra">--</span>
|
|
</div>
|
|
|
|
<h2 class="separado">nucleos</h2>
|
|
<div class="nucleos" id="nucleos"></div>
|
|
|
|
<!-- constantes: no llevan barra porque no son porcentajes de nada -->
|
|
<ul class="constantes" id="constantes">
|
|
<li data-clave="temperatura"><span>temp</span><b>--</b></li>
|
|
<li data-clave="carga"><span>carga</span><b>--</b></li>
|
|
<li data-clave="red"><span>red</span><b>--</b></li>
|
|
<li data-clave="uptime"><span>encendido</span><b>--</b></li>
|
|
<li data-clave="bateria"><span>bateria</span><b>--</b></li>
|
|
</ul>
|
|
|
|
<h2 class="separado">procesos</h2>
|
|
<ul class="procesos" id="procesos"></ul>
|
|
|
|
<!-- rendimiento del propio JARVIS: sale del diario, no del sistema -->
|
|
<h2 class="separado">rendimiento</h2>
|
|
<div class="reparto" id="reparto" title="a donde va cada orden">
|
|
<span class="tramo cerebro" style="--f:0"></span>
|
|
<span class="tramo catalogo" style="--f:0"></span>
|
|
<span class="tramo ruido" style="--f:0"></span>
|
|
</div>
|
|
<ul class="constantes" id="rendimiento">
|
|
<li data-clave="lat_p50"><span>latencia med.</span><b>--</b></li>
|
|
<li data-clave="lat_p95"><span>latencia p95</span><b>--</b></li>
|
|
<li data-clave="pct_cerebro"><span>al cerebro</span><b>--</b></li>
|
|
<li data-clave="pct_ruido"><span>ruido</span><b>--</b></li>
|
|
<li data-clave="vol24"><span>frases 24h</span><b>--</b></li>
|
|
<li data-clave="rag"><span>RAG hit@5</span><b>--</b></li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<!-- centro: el reactor, el estado y lo que hay en marcha -->
|
|
<section class="nucleo">
|
|
<canvas id="reactor" width="520" height="520"></canvas>
|
|
<p class="estado" id="estado">en reposo</p>
|
|
<p class="dicho" id="dicho"></p>
|
|
|
|
<!-- una tarjetita por orden en marcha. Van aqui debajo y no flotando
|
|
sobre el reactor para que quepan varias sin taparlo. -->
|
|
<div class="tareas" id="tareas"></div>
|
|
</section>
|
|
|
|
<!-- columna derecha: lo que va haciendo -->
|
|
<aside class="acciones">
|
|
<h2>
|
|
acciones
|
|
<span class="pestanas">
|
|
<button data-vista="catalogo" class="activa">sabe hacer</button>
|
|
<button data-vista="registro">hechas</button>
|
|
<button data-vista="consola">consola</button>
|
|
</span>
|
|
</h2>
|
|
|
|
<!-- lo que sabe hacer: sale de las acciones rapidas, no esta escrito aqui -->
|
|
<div class="vista" id="vista-catalogo">
|
|
<input id="filtro" type="search" placeholder="filtrar..." autocomplete="off">
|
|
<div id="catalogo"></div>
|
|
</div>
|
|
|
|
<!-- lo que va haciendo -->
|
|
<div class="vista oculta" id="vista-registro">
|
|
<ul id="registro"></ul>
|
|
</div>
|
|
|
|
<!-- La consola: lo que esta pasando AHORA, linea a linea, como en una
|
|
terminal. Con su boton de cortar, que es lo que se echa de menos
|
|
cuando algo se queda pensando y no sabes ni que esta haciendo. -->
|
|
<div class="vista oculta" id="vista-consola">
|
|
<div class="consola-barra">
|
|
<span id="consola-estado">en reposo</span>
|
|
<button id="consola-parar" title="Cortar lo que se este ejecutando (Ctrl+C)">■ cortar</button>
|
|
</div>
|
|
<pre id="consola"></pre>
|
|
</div>
|
|
</aside>
|
|
|
|
</main>
|
|
|
|
<nav class="controles">
|
|
<button data-accion="parar" data-estado="on" class="principal"
|
|
title="Cierra el microfono y corta la voz. Pulsa otra vez para reanudar">
|
|
<span class="punto"></span>
|
|
<span class="rotulo">parar</span>
|
|
</button>
|
|
|
|
<!-- Rota entre las voces disponibles y estrena la nueva diciendo una frase.
|
|
El rotulo lo pone Python al confirmar el cambio, no el clic. -->
|
|
<button id="voz" class="secundario" title="Cambiar la voz. La estrena diciendo una frase">
|
|
<span class="rotulo">voz</span>
|
|
</button>
|
|
|
|
<!-- Dormir / despertar. El rotulo dice como ESTA, no lo que hace el boton:
|
|
leer "dormido" y ver el punto apagado no deja lugar a dudas; "despertar"
|
|
obligaria a deducir si es lo que hace o lo que esta puesto. -->
|
|
<button data-accion="sueno" data-estado="on" class="secundario"
|
|
title="Atiende todo lo que oiga. Pulsa para exigir que le llames «JARVIS» antes de cada orden — util si hay una tele cerca">
|
|
<span class="punto"></span>
|
|
<span class="rotulo">escuchando</span>
|
|
</button>
|
|
|
|
<!-- Con que piensa. Se marca aparte cuando sale de la maquina: es el unico
|
|
boton del panel que cambia donde van a parar las palabras del usuario,
|
|
y eso no puede quedar escondido en un tooltip. -->
|
|
<button id="cerebro" class="secundario" title="Cambiar con que piensa JARVIS">
|
|
<span class="rotulo">cerebro</span>
|
|
</button>
|
|
|
|
<!-- Lanza varias acciones de verdad a la vez, para ver las tarjetas
|
|
trabajando sin tener que darle ordenes por voz. Es la forma de
|
|
comprobar de un vistazo que el panel hace lo que dice. -->
|
|
<button id="prueba" class="secundario" title="Lanza varias tareas reales a la vez para verlas trabajar">
|
|
<span class="rotulo">prueba</span>
|
|
</button>
|
|
|
|
<!-- Apaga JARVIS del todo: para la voz, suelta el microfono y la grafica, y
|
|
cierra el proceso. Dos clics para no apagarlo por un roce. -->
|
|
<button id="cerrar" class="secundario cerrar"
|
|
title="Apagar JARVIS: cierra el panel, para la voz y suelta la gráfica">
|
|
<span class="rotulo">cerrar</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- candado: tapa todo hasta que se teclea la contraseña -->
|
|
<div class="candado oculto" id="candado">
|
|
<div class="candado-caja">
|
|
<div class="candado-icono">▲</div>
|
|
<p class="candado-msg" id="candado-msg">Introduzca la contraseña</p>
|
|
<input id="candado-clave" type="password" autocomplete="off"
|
|
placeholder="Contraseña" autofocus>
|
|
<button id="candado-ok">Desbloquear</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- el puente va antes: hud.js pregunta por window.webkit al cargarse -->
|
|
<script src="puente.js"></script>
|
|
<script src="hud.js"></script>
|
|
</body>
|
|
</html>
|