Interfaz HUD del asistente de voz EVA con tecnologías Whisper y Piper

EVA HUD es un prototipo de asistente de voz conversacional en español que funciona casi por completo en local: el reconocimiento de voz corre dentro del navegador y un backend ligero en PHP orquesta el resto. Combina transcripción con Whisper (ejecutado en el propio navegador con transformers.js), un cerebro basado en el CLI de Claude Code reutilizando la sesión OAuth del usuario (sin claves de API) y síntesis de voz neural en español con varios motores intercambiables: Piper (offline, local), Edge Neural TTS (gratuito, sin clave, requiere internet) y la voz del sistema como respaldo. Todo se presenta sobre una interfaz tipo HUD con un núcleo de partículas en canvas que reacciona en tiempo real a la energía del audio de la voz.

El problema que aborda es demostrar que se puede construir una experiencia de voz completa (escuchar, razonar, hablar y actuar sobre la interfaz) sin depender de servicios SaaS de voz de pago ni de API keys: el reconocimiento de voz corre en el cliente sin enviar audio fuera, el TTS puede ser 100% offline con Piper, y el razonamiento se apoya en una suscripción Claude existente reutilizando el CLI ya autenticado. Incorpora activación por nombre ("Eva") con tolerancia fonética, un mecanismo de acciones de interfaz validadas (function calling sobre una whitelist) y una capacidad de visión que envía un fotograma de la webcam al modelo.

Es explícitamente un prototipo orientado a Windows con Laragon/PHP, pensado para un único usuario (el servidor PHP integrado es monohilo) y como pieza de demostración técnica. No es un producto cerrado: requiere tener el CLI de Claude instalado y autenticado, e instalar Piper o disponer de Python con edge-tts para la voz neural. Su valor está en mostrar una arquitectura de voz privada, modular y de bajo coste, con degradación elegante (varios motores de voz y un modo de reglas offline de respaldo).

  1. Captura de voz y detección de pausas en el navegador El micrófono se captura con getUserMedia y un AudioContext, usando un ScriptProcessor para procesar el audio por bloques. Un VAD por energía con umbrales adaptativos (calibra el ruido ambiente durante ~0,7 s al activar la escucha) detecta cuándo empieza y termina cada enunciado, con un pre-roll de ~0,4 s para no comerse el ataque de las palabras. Mientras Eva habla, la captura se pausa para evitar la auto-escucha. Existe también un modo de pulsar-para-hablar (mantener pulsado un botón en pantalla) más fiable, y la barra espaciadora activa o detiene la escucha.
  2. Transcripción local con Whisper El audio se remuestrea a 16 kHz y se transcribe con un modelo Whisper ejecutado en el navegador mediante transformers.js (@huggingface/transformers), usando WebGPU si está disponible o WASM como alternativa. Por defecto se carga whisper-small (más preciso en español, descarga única de ~240 MB que queda cacheada), con opción de bajar a base o tiny por velocidad; si small no carga, cae automáticamente a base. No sale audio del equipo en esta fase.
  3. Activación por nombre y filtrado Si está activa la activación por nombre, se busca el wake word 'Eva' al principio de la frase (en los primeros caracteres, admitiendo 'Oye Eva' u 'Hola Eva') con una expresión regular tolerante a las variantes que Whisper produce (eva, heva, eba, ewa, ava, eua). Tras responder, se abre una ventana de seguimiento de 12 s, contada desde que Eva termina de hablar, en la que se puede continuar sin volver a nombrarla. Se descartan transcripciones vacías o de ruido.
  4. Razonamiento con Claude vía CLI (OAuth, sin API key) El texto se envía a chat.php, que lanza el CLI de Claude Code con proc_open (sin shell, prompt por STDIN) reutilizando la sesión OAuth del usuario. Un system prompt fuerza respuestas breves en español de España, texto plano apto para voz, y permite que el modelo añada acciones de interfaz en líneas con formato [[ACTION]]{...}. Para acelerar el arranque se aísla la ejecución (--strict-mcp-config y --setting-sources vacío, ignorando MCP y hooks globales) y se fija un tope de gasto por turno (--max-budget-usd 0.75). Las herramientas peligrosas (Bash, Write, Edit, Task, etc.) se deshabilitan; solo se permiten WebSearch y WebFetch. Si Claude no está disponible, hay un modo de reglas offline para hora, fecha, cálculos y comandos básicos.
  5. Streaming de respuesta y daemon opcional chat.php?stream=1 reenvía los text_delta del CLI como Server-Sent Events para que el cliente empiece a hablar antes de que el modelo termine. Como cada invocación del CLI tarda ~2-3 s en arrancar, un daemon Node (daemon.mjs, puerto 8091) mantiene Claude Code cargado entre turnos en modo stream-json bidireccional; chat.php lo detecta por un health check y le hace de proxy SSE con cURL, bajando la latencia a ~1 s. Si el daemon no está, cae a CLI directo. La parte [[ACTION]] de la respuesta se retiene en el servidor y no se envía como texto hablado.
  6. Síntesis de voz y reacción de las partículas El texto limpio se trocea en frases y se sintetiza con tts.php: motor Edge Neural TTS (vía python -m edge_tts, devuelve MP3) o Piper (binario local + voz .onnx por STDIN, devuelve WAV). El audio se reproduce con un AnalyserNode de la Web Audio API, de modo que el núcleo de partículas en canvas late siguiendo la energía real de la voz. Hay cola de reproducción por frases con prefetch de la siguiente y fallback automático: si Edge falla (por ejemplo, sin internet) se usa Piper, y si no hay ninguno, la voz del sistema (Web Speech API).

Reconocimiento de voz en el navegador

Transcribe el habla en español con Whisper ejecutado localmente (transformers.js), sin enviar audio a servidores. Modelo elegible entre small (por defecto), base y tiny según precisión o velocidad.

Detección de voz adaptativa (VAD)

Calibra el ruido ambiente al arrancar la escucha y decide automáticamente cuándo has terminado de hablar mediante umbrales de energía dinámicos, con pre-roll para no perder el inicio de cada frase. Incluye modo de pulsar-para-hablar manteniendo un botón.

Activación por nombre con tolerancia fonética

Responde solo cuando la nombras ('Eva') al inicio de la frase, reconociendo las variantes que produce el reconocedor (eva, heva, eba, ewa, ava, eua), y mantiene una ventana de conversación de seguimiento de 12 segundos sin tener que repetir el nombre.

Cerebro Claude con sesión OAuth

Usa el CLI de Claude Code ya autenticado, sin claves de API, con elección de modelo (Haiku por defecto, Sonnet u Opus). Aísla la ejecución para arrancar más rápido y fija un tope de gasto por turno. Incluye un modo de reglas offline para hora, fecha, cálculos y comandos básicos cuando no hay IA.

Respuesta en streaming hablada

Empieza a hablar mientras el modelo sigue generando, gracias a Server-Sent Events y una cola de TTS por frases con prefetch, evitando esperas y cortes en respuestas largas.

Voz neural en español con varios motores

Síntesis con Edge Neural TTS (gratuito, sin clave, requiere internet; voces de España, México y Argentina) o Piper (offline, voces .onnx españolas), con fallback automático de Edge a Piper y de ambos a la voz del sistema. Voz, velocidad y hablante configurables en panel.

Acciones sobre la interfaz (function calling validado)

El modelo puede ejecutar solo acciones de una lista validada en el HUD: cambiar el color del núcleo, cambiar de voz, ajustar velocidad o volumen, limpiar pantalla, dejar de escuchar o repetir la última respuesta. Cualquier acción fuera de la whitelist se descarta.

Visión por webcam

Captura un fotograma de la cámara (640x480) y lo adjunta al siguiente turno como imagen temporal para que Claude lo describa o responda preguntas sobre él, con la herramienta Read acotada a la carpeta de esa imagen, que se elimina tras el turno.

HUD reactivo a la voz real

Núcleo de partículas, anillos segmentados y medidor de señal en canvas que reaccionan a la energía real del audio mediante un analizador de frecuencia, dando feedback visual de los estados de escucha, proceso y habla.

  • Whisper (transformers.js / @huggingface/transformers 3.7.5): Reconocimiento de voz a texto ejecutado dentro del navegador, en local y offline tras la primera descarga; convierte el habla en español a texto. Modelos onnx-community whisper small/base/tiny.
  • WebGPU / WASM: Backends de ejecución del modelo Whisper en el cliente; usa WebGPU si está disponible para acelerar y cae a WASM si no.
  • Web Audio API (AudioContext, ScriptProcessor, AnalyserNode): Captura del micrófono, remuestreo a 16 kHz, VAD por energía con calibración de ruido, y análisis de frecuencia del audio de respuesta para animar las partículas con la voz real.
  • Canvas 2D: Renderiza el HUD: núcleo de partículas, anillos segmentados y medidor de señal, todos reactivos al estado y al audio.
  • PHP (servidor integrado php -S): Backend ligero monohilo que expone chat.php (cerebro) y tts.php (voz); orquesta los subprocesos con proc_open sin shell y hace de proxy SSE hacia el daemon.
  • Claude Code CLI (sesión OAuth): Motor de razonamiento del asistente; se invoca como subproceso reutilizando las credenciales OAuth del usuario, evitando claves de API. Soporta Haiku, Sonnet y Opus, con herramientas peligrosas deshabilitadas y solo WebSearch/WebFetch permitidas.
  • Node.js (daemon.mjs): Daemon opcional sin dependencias externas que mantiene Claude Code cargado entre turnos en modo stream-json bidireccional, reduciendo la latencia de cada respuesta de ~3 s a ~1 s; expone HTTP local en el puerto 8091.
  • Server-Sent Events (SSE): Transporta los fragmentos de texto del modelo en tiempo real desde el backend al navegador para empezar a hablar antes de que termine la generación.
  • Piper TTS (binario + voces .onnx): Síntesis de voz neural en español 100% offline en el backend; recibe el texto por STDIN y devuelve audio WAV. Voces es_ES (davefx, sharvard, carlfm) y es_MX (ald), con sharvard-medium como predeterminada.
  • Edge Neural TTS (edge_tts vía Python): Motor de voz neural por defecto cuando hay internet, gratuito y sin clave; voces femeninas de España (Ximena), México (Dalia) y Argentina (Elena) y una masculina de España (Álvaro); devuelve audio MP3.
  • Web Speech API (SpeechSynthesis): Voz del sistema como último fallback cuando no hay Piper ni Edge disponibles; en Edge/Windows también ofrece voces neuronales 'Natural'.
  • PowerShell (setup-piper.ps1): Instalador para Windows x64 que descarga el binario de Piper y la voz española es_ES-davefx-medium y los deja en bin/ listos para tts.php.
  • Quiosco o recepción con asistente de voz que responde consultas frecuentes sin enviar audio a la nube, manteniendo la privacidad de las conversaciones en el propio equipo.
  • Demostrador interno para que un equipo evalúe una arquitectura de voz privada y de bajo coste antes de invertir en servicios SaaS de STT/TTS de pago.
  • Asistente de manos libres para entornos de taller o trabajo donde el operario consulta información por voz, con activación por nombre y ventana de seguimiento.
  • Prueba de concepto de copiloto de voz para soporte interno que reutiliza una suscripción Claude existente sin gestionar claves de API ni facturación por token adicional.
  • Herramienta de accesibilidad para consulta por voz de información (hora, fecha, cálculos, búsquedas web resumidas) en español, con respuesta hablada natural y modo offline de respaldo.
  • Escaparate comercial o evento donde el HUD reactivo a la voz sirve como demostración visual e interactiva de capacidades de IA conversacional.
  • Integración de IA generativa por voz de extremo a extremo: escuchar, transcribir, razonar, hablar y actuar sobre la interfaz.
  • Ejecución de modelos de ML en el navegador (Whisper con WebGPU/WASM) para procesar voz en local sin coste por uso ni envío de audio externo.
  • Diseño de latencia: streaming SSE, daemon que precalienta el CLI entre turnos y cola de TTS con prefetch para empezar a hablar de inmediato.
  • Function calling controlado: el modelo ejecuta solo acciones de una lista validada (whitelist), con las herramientas peligrosas del CLI deshabilitadas y solo lectura web permitida.
  • Buenas prácticas de seguridad en backend: proc_open sin shell, entrada por STDIN, validación de modelos/sesiones/voces, límites de tamaño, tope de gasto por turno y aislamiento de la visión con Read acotado a una carpeta temporal.
  • Arquitectura modular y con degradación elegante: tres motores de voz (Edge, Piper, voz del sistema) con fallback en cascada y cerebro Claude con modo de reglas offline de respaldo.

De prototipo a producción

Si algo de esto encaja con un problema real de tu negocio, lo convertimos en una solución mantenible y con control total.

Hablemos de tu proyecto

Diagnóstico gratuito — Detecta dónde se pierden horas y qué automatización tiene más retorno

Pedir diagnóstico