Project Story – Vybo

La música tiene el poder de cambiar nuestro estado de ánimo. Queríamos traducir esa conexión emocional en una interacción física tangible.

Inspiration

[!NOTE] Nos inspiramos en proyectos de affective computing y en la creciente accesibilidad de herramientas de reconocimiento de audio y microcontroladores como el ESP32.

What it does

Vybo es un robot que reacciona emocionalmente a la música de tu entorno.

Captura: Graba 10 segundos de audio del entorno.
Reconocimiento: Usa ACRCloud para identificar la canción y su posición temporal.
Inferencia Emocional: Envía el audio a un modelo de IA que detecta la emoción predominante (alegría, tristeza, energía, etc.).
Reacción Física: Envía comandos al ESP32 vía Web Serial API. El robot muestra expresiones faciales en una pantalla OLED 128x64 sincronizadas con el ritmo y la emoción.
Exploración 3D: Incluye una escena interactiva 3D de los componentes de hardware.

How we built it

Capa	Tecnología / Detalles
Frontend	Next.js 13 (App Router), React, TypeScript, Tailwind CSS, Lucide icons
Audio Capture	Hook personalizado `useAudioCapture.ts` con MediaRecorder API
Reconocimiento	ACRCloud API vía route handler (`/api/recognize`)
IA Emocional	Modelo ligero de TensorFlow.js para clasificar el espectro de audio
Comunicación	`useSerialPort.ts` vía Web Serial API enviando JSON
Firmware ESP32	C++ (Arduino), OLED SSD1306 vía I²C
Escena 3D	Three.js renderizando modelo GLTF del ESP32
Estilos	Tema oscuro/claro, variables CSS (`#6B8AF2`, `#F4F4F5`)

Challenges we ran into

[!WARNING] Latencia de audio: Grabar, enviar y obtener respuesta tomaba >2s. Lo optimizamos limitando la captura a 10s y usando caché.

Web Serial API: Requiere contexto HTTPS e interacción explícita del usuario. Solución: Añadimos un botón explícito de "Connect".

Sincronismo IA-Hardware: Fue difícil alinear la emoción detectada con el beat. Implementamos un buffer de tiempo y suavizado (interpolación lineal) para las transiciones.

Rendimiento 3D: Renderizar en móviles era pesado. Optimizamos el modelo GLTF (decimation, compresión de texturas) para mantener 60fps.

Gestión de Estado: Prevenimos race conditions al cambiar de canción usando React Query.

Accomplishments that we're proud of

[x] Pipeline completo en tiempo récord: Audio → Reconocimiento → Emoción → Actuador en < 3s después de la interacción inicial.
[x] Interfaz atractiva: Una UI que combina ondas visuales, terminal simulado y una escena 3D interactiva.
[x] Código modular: Uso de TypeScript para lograr un mantenimiento robusto y fácil expansión.
[x] Demostración exitosa: En eventos locales, usuarios novatos conectaron fácilmente al ver su reacción emocional reflejada en el robot.

What we learned

La integración de servicios de audio (como ACRCloud) requiere un manejo sumamente cuidadoso de límites de tasa y costos.
La Web Serial API es muy poderosa, pero es crucial ofrecer fallbacks e instrucciones claras debido a inconsistencias entre navegadores.
El diseño de interacciones visuales y hápticas mejora significativamente la percepción de inteligencia, incluso en dispositivos simples.
La separación de preocupaciones (audio, IA, comunicación serial) fue fundamental para probar cada capa de forma independiente.

What's next for Vybo

[!TIP] El futuro del proyecto

Expresiones Avanzadas: Añadir animaciones complejas usando doble búfer para transiciones más suaves en la OLED.
Control por Voz: Incorporar reconocimiento para comandos directos (ej. "cambia a modo fiesta").
Mejoras en IA: Utilizar características de MFCC y redes LSTM para lograr mayor precisión emocional.
Hardware Portable: Crear una versión autónoma con batería y caja impresa en 3D.
Open-Source: Publicar el firmware y el esquema de circuito en GitHub para la comunidad.