Relator Virtual

rubengarcia0510 — Fri, 10 Jul 2026 19:12:00 +0000

This is a submission for Weekend Challenge: Passion Edition

What I Built

El Relator Virtual — a penalty-kick simulator that turns every shot into a moment of pure football passion, narrated live by an AI commentator with the energy of a classic South American match announcer.

With the World Cup happening right now, I wanted to capture something every fan knows: the roar of the commentator's voice is half the magic of a goal. So instead of just building "another penalty game," I built one where every kick — save, post, or GOOOOL — gets narrated in real time with dynamically generated audio, so the emotional payoff feels as big as the moment itself.

The player picks a side, takes the shot, and the AI relator reacts instantly with a burst of commentary matching the outcome — different phrasing and intensity depending on whether it's a save, a miss, or a screamer into the top corner.

Demo

🎥 Mirá el video demo acá

Code

Backend (Spring Boot + ElevenLabs):

rubengarcia0510 / relator-virtual

⚽ Relator Virtual

Simulador de penales donde cada jugada es narrada en tiempo real por un relator generado con IA (ElevenLabs), con la energía de un relato clásico sudamericano.

Proyecto para el DEV Weekend Challenge: Passion Edition.

Cómo funciona

El usuario patea un penal (gol, atajada o palo)
El backend arma un texto de narración con variación aleatoria
Se envía ese texto a la API de ElevenLabs para generar el audio
El audio se devuelve al frontend y se reproduce en el momento justo

Stack

Java 17 + Spring Boot 3.3
ElevenLabs API (Text-to-Speech)
WebFlux (WebClient) para las llamadas HTTP

Cómo correrlo localmente

export ELEVENLABS_API_KEY=tu-api-key
export ELEVENLABS_VOICE_ID=id-de-la-voz-que-elijas
./mvnw spring-boot:run

Endpoint

POST /api/jugada

{
  "resultado": "GOL",
  "direccion": "IZQUIERDA",
  "nombreJugador": "el 10"
}

Devuelve:

{
  "textoNarracion": "¡La reconquista, la tiene el 10, y... GOOOOOL!..."
  "audioBase64":

…

View on GitHub

Frontend (Angular):

rubengarcia0510 / relator-virtual-frontend

⚽ Relator Virtual — Frontend

Mini-juego de penales en Angular (standalone components) que consume el backend Spring Boot de relator-virtual para narrar cada jugada con voz generada por ElevenLabs.

Cómo correrlo

npm install
npm start

Se levanta en http://localhost:4200. Necesitás el backend corriendo en http://localhost:8080 (ver src/app/services/jugada.service.ts para cambiar la URL).

Para producción

Antes de deployar, actualizá API_URL en jugada.service.ts con la URL de tu backend en Render.

npm run build