StageSync AI

Inspiration

Las conferencias de tecnología a gran escala reúnen mentes brillantes de todo el mundo, pero las barreras del idioma siguen limitando el impacto de charlas increíbles. Las herramientas de traducción simultánea existentes suelen ser prohibitivamente caras, de código cerrado o carecen de la arquitectura necesaria para soportar más de 15 escenarios simultáneos. Quería construir una solución Open Source de grado empresarial que cualquier conferencia pudiera desplegar para democratizar el conocimiento, potenciada por la velocidad de Gemini.

What it does

StageSync AI es una plataforma de transcripción y traducción en tiempo real diseñada para eventos masivos.

• Para los Productores: Un panel de control para gestionar la ingesta de audio de múltiples escenarios y una vista con fondo transparente lista para integrarse nativamente en OBS/vMix, "quemando" los subtítulos en el stream oficial.
• Para la Audiencia: Una PWA ultraligera donde los asistentes eligen su escenario y alternan entre el idioma original y la traducción con latencia sub-segundo.

How I built it

Para garantizar escalabilidad, baja latencia y mantenibilidad, diseñé una arquitectura orientada a eventos dentro de un monorepo usando Nx:

• Backend: Construido en NestJS (~11) y TypeScript. Gestiona conexiones WebSocket (Socket.io) para la ingesta de audio en tiempo real y Server-Sent Events (SSE) para el broadcast hacia la audiencia.
• Procesamiento de Audio & IA: El flujo pasa por un pipeline en memoria que utiliza un detector de actividad de voz (Silero VAD) para segmentar el audio inteligentemente por silencios, y luego se procesa mediante el patrón Strategy usando la API de Gemini (1.5 Flash).
• Escalabilidad: Utilicé Redis Pub/Sub para desacoplar el worker de ingesta del motor de distribución, permitiendo escalar las réplicas de NestJS horizontalmente.
• Frontend: Desarrollado en Angular (~20) con Standalone Components y Signals. Incluye un Jitter Buffer que ordena los paquetes asíncronos de la IA basándose en sus sequenceIds para renderizar el texto sin saltos.

Challenges I ran into

Manejar un stream de audio continuo desde el navegador fue el mayor desafío. Inicialmente, utilicé la API MediaRecorder de Chrome para emitir fragmentos en formato WebM. Sin embargo, descubrí que las cabeceras EBML tienen un tamaño de segmento finito, lo que causaba que la decodificación se truncara en el backend, perdiendo milisegundos críticos de audio. Además, enviar chunks de audio demasiado cortos (menores a 300ms) hacía que la IA alucinara traducciones por falta de contexto acústico.

Para solucionarlo, realicé un pivote arquitectónico radical: reemplacé MediaRecorder por la Web Audio API. Capturando el PCM crudo (16kHz, mono, 16-bit) y aplicando un buffer estrictamente controlado con una duración mínima de 800ms antes del corte del VAD, logré un flujo de audio 100% gapless y eliminé por completo el overhead de contenedores multimedia.

Accomplishments that I'm proud of

• Gapless Audio Pipeline: Lograr un flujo constante de PCM directo desde el navegador hacia el backend sin pérdida de paquetes ni necesidad de procesamiento pesado con ffmpeg para la entrada de micrófono.
• Arquitectura Resiliente: Implementar un mecanismo de Jitter Buffer en Angular que garantiza que los subtítulos siempre se rendericen en el orden correcto, independientemente de qué promesa de red (llamada a Gemini) se resuelva primero.
• Diseño Pluggable: Haber construido un Control Plane que permite cambiar fácilmente entre providers de IA sin tocar la lógica core del pipeline de audio.

What I learned

Llevar la Web Audio API y los WebSockets al límite me enseñó lecciones invaluables sobre manipulación de buffers a nivel de bytes (Float32 a Int16) y la sensibilidad extrema de los LLMs ante los límites del contexto de audio. Comprendí que, para un LLM, un audio recortado abruptamente es garantía de alucinación.

What's next

El siguiente paso natural es construir integraciones nativas para clústeres locales con GPUs (Kubernetes) para ejecutar Gemma 2 y Faster-Whisper. Esto convertirá a la plataforma en una solución 100% air-gapped, independiente de proveedores cloud y con el máximo nivel de privacidad y eficiencia de costos para los organizadores.

Built With

• angular.js
• docker
• gemini-api
• node.js
• php
• postgresql
• redis
• server-sent-events
• symfony
• typescript
• web-audio-api
• websockets