Skip to content

SB00

This is an agent that inputs footage of a full-length soccer match, intelligently scans the footage for key highlights and tactical analysis, and presents the highlights to the user in a friendly UI providing description

Code Video Cerebral Valley

Core trick

Gemini Vision scans a full match for highlight windows and writes timestamped events that the web player auto-seeks to, with TTS commentary.

Tags

visionvoice

Description

This is an agent that inputs footage of a full-length soccer match, intelligently scans the footage for key highlights and tactical analysis, and presents the highlights to the user in a friendly UI providing descriptions of each selected highlight as well as TTS commentary playback over each highlight.
sanilb19/sports-commentary-agent-demo★ 00 forksJavaScriptCreated Mar 21, 2026 · last push Mar 22, 2026

README excerpt

# Sports Commentary Agent Demo

This is a minimal end‑to‑end demo that:

- embeds a YouTube match in a single‑page UI (Vercel‑hosted)
- plays synchronized, autonomous tactical commentary (Google TTS)
- uses a long‑running worker to detect highlight windows via Gemini Vision

The UI polls for highlight events and auto‑seeks the YouTube player to the right timestamps, then plays the TTS audio alongside the video.

## Architecture

- **Web UI (Vercel)**: Next.js app in `web/`
- **Worker (long‑running)**: Node script in `worker/`
- **Storage + events**: Supabase (Postgres + Storage)

## Supabase Setup

1. Create a Supabase project.
2. Create a public Storage bucket named `commentary`.
3. Run the SQL below in the SQL editor:

```sql
create extension if not exists pgcrypto;

create table if not exists highlights (
  id uuid primary key default gen_random_uuid(),
  video_id text not null,
  start_sec numeric not null,
  end_sec numeric not null,
  text text not null,
  audio_url text not null,
  created_at timestamptz default now()
);

create index if not exists highlights_video_id_idx on highlights (video_id, created_at);

alter table highlights enable row level security;

create policy "public read highlights" on highlights
  for select
  using (true);
```

## Web App (Vercel)

### Environment variables

```
SUPABASE_URL=...
SUPABASE_SERVICE_ROLE_KEY=...
NEXT_PUBLIC_YOUTUBE_URL=https://www.youtube.com/watch?v=Rfylh5wwReI&t=6486s
```

### Run locally

```bash
cd web
npm install
npm

Team