CourtSide

Onboarding
Dashboard
Finish Onboarding
In-Game

CourtSide AI: Personalizing Sports Commentary for the Digital Age

The Inspiration

Sports is the world's largest entertainment category, captivating billions of viewers globally. Yet despite this massive audience, sports commentary has remained fundamentally unchanged for decades—a one-size-fits-all experience that treats every fan the same way.

We asked ourselves: What if sports commentary could be as personalized as your Spotify playlist?

This question sparked the creation of CourtSide AI, an AI-powered sports commentary platform that transforms the way fans experience live games. Instead of listening to generic commentary that may not match your personality, team loyalty, or preferred style, our platform generates real-time, personalized commentary tailored specifically to you.

🎯 The Problem We Solved

The sports entertainment industry faces a fundamental personalization gap:

Generic Commentary: Traditional broadcasts use the same commentary for millions of viewers
Limited Engagement: Fans can't interact with commentators or ask questions in real-time
One-Size-Fits-All: No consideration for individual team preferences, knowledge levels, or entertainment styles
Passive Experience: Viewers are limited to consuming whatever commentary is provided

We envisioned a world where every sports fan could have their own personal AI commentator—one that knows their favorite team, understands their preferred style (analytical vs. entertaining), and can answer questions in real-time.

🛠️ How We Built It

Architecture Overview

We designed a sophisticated real-time system with multiple integrated components:

A[User Onboarding] --> B[Personalized Preferences]
B --> C[Live NBA Data Ingestion]
C --> D[AI Commentary Generation]
D --> E[Text-to-Speech]
E --> F[Real-time Audio Delivery]
F --> G[Interactive Voice Q&A]


 Technical Stack

Frontend (Next.js + TypeScript)
- Built a modern, responsive dashboard using Next.js 14 with TypeScript
- Implemented a comprehensive 5-step onboarding flow to capture user preferences
- Created real-time UI components for live stats, commentary feed, and voice interactions
- Used Tailwind CSS and shadcn/ui for a polished, NBA-themed interface

Backend (Python + Flask)
- Developed a robust Flask API with Socket.IO for real-time communication
- Implemented data ingestion from SportsDataIO APIs for live NBA game data
- Built a commentary engine using Google's Gemini AI for personalized content generation
- Created a voice processing pipeline with speech-to-text and text-to-speech capabilities

AI Integration**
- Gemini AI: Powers the core commentary generation with personality customization
- Google Cloud TTS: Converts AI-generated text to natural-sounding speech
- ElevenLabs**: Premium voice synthesis for enhanced audio quality

Data & Real-time Systems
- MongoDB: Stores user preferences, game data, and commentary history
- Redis + Celery: Handles background tasks for data ingestion and processing
- Socket.IO: Enables real-time updates between backend and frontend

Key Features Implemented

1. Personalized Onboarding Flow
   - Team selection with visual team cards
   - Commentary style customization (energy, humor, analytics depth, team bias)
   - Voice preferences (gender, speed, accent, frequency)
   - Custom instructions for unique personalization
   - Live preview system for immediate feedback

2. Real-time Commentary Engine
   - Ingests live NBA game data every 3-5 seconds
   - Generates contextual commentary based on user preferences
   - Supports multiple personality styles (passionate, analytical, neutral)
   - Maintains commentary history and context

3. Interactive Voice Q&A
   - Speech-to-text processing for natural language queries
   - AI-powered response generation using live game data
   - Text-to-speech output in the user's preferred voice style
   - Examples: "How close is LeBron to a triple-double?" or "What's the current momentum?"

4. Dynamic Dashboard
   - Live player statistics with animated updates
   - Real-time game events feed
   - Commentary history with audio playback
   - Responsive design optimized for both desktop and mobile

Mathematical Modeling

Our personalization algorithm uses a weighted scoring system to determine commentary style:

$$\text{Commentary Style} = \sum_{i=1}^{n} w_i \cdot p_i$$

Where:
- $w_i$ represents the weight for preference category $i$
- $p_i$ represents the user's preference value (0-100) for category $i$
- Categories include: energy level, comedy level, statistical focus, and team bias

For team bias calculation specifically:
$$\text{Bias Score} = \frac{\text{User Team Events}}{\text{Total Game Events}} \cdot \text{Bias Level}$$

This ensures that commentary frequency and tone appropriately reflect the user's team preference intensity.

Challenges We Overcame

The API Key Gauntlet

Our biggest challenge was managing API limitations and costs across multiple AI services:

Google Gemini API Trials
- Exhausted multiple free trial accounts due to high request volumes during development
- Had to implement intelligent caching and request batching to optimize usage
- Eventually upgraded to paid tier for consistent access during demo preparation

ElevenLabs Voice Synthesis
- Burned through several free trial accounts testing different voice configurations
- Each voice generation request consumed significant quota during development iterations
- Ultimately invested in a paid subscription to ensure high-quality voice output for the final demo

Cost Management Strategy
We implemented several optimizations to manage API costs:
```python
# Intelligent caching to reduce redundant API calls
@lru_cache(maxsize=100)
def generate_commentary(event_text, user_preferences_hash):
    # Only generate new commentary for unique combinations
    return gemini_api.generate(event_text, user_preferences_hash)

# Request batching for efficiency
def batch_process_events(events, max_batch_size=5):
    # Process multiple events in single API call when possible
    return [process_batch(events[i:i+max_batch_size]) 
            for i in range(0, len(events), max_batch_size)]

Real-time Data Synchronization

Ensuring seamless real-time updates across multiple data sources proved complex:

Challenge: Synchronizing NBA API data, AI commentary generation, and audio synthesis
Solution: Implemented a event-driven architecture with Redis queues and WebSocket communication
Result: Achieved sub-2-second latency from live game event to personalized audio commentary

Audio Processing Pipeline

Creating a smooth audio experience required overcoming several technical hurdles:

Latency Issues: Initial audio generation took 5-8 seconds
Quality vs. Speed: Balancing voice quality with response time
Browser Compatibility: Ensuring audio playback works across all modern browsers

What We Learned

Technical Insights

AI API Management: Learned to implement sophisticated caching and batching strategies to optimize API usage and costs
Real-time Architecture: Gained deep experience with WebSocket implementations and event-driven systems
Audio Processing: Developed expertise in browser audio APIs and cross-platform compatibility
Personalization Algorithms: Created mathematical models for translating user preferences into AI behavior

Product Development

User Experience Design: The importance of progressive disclosure in complex onboarding flows
Performance Optimization: Balancing feature richness with system responsiveness
Scalability Planning: Designing for both demo success and potential production deployment

Team Collaboration

API Resource Sharing: Coordinated API key usage across team members to maximize development efficiency
Rapid Prototyping: Learned to quickly iterate on features while maintaining code quality
Integration Challenges: Successfully coordinated complex integrations between AI services, databases, and real-time systems

The Impact

CourtSide AI represents a paradigm shift in sports entertainment:

Personalization at Scale: Every user gets a unique commentary experience tailored to their preferences
Interactive Engagement: Fans can actively participate through voice questions rather than passive consumption
Accessibility: Makes sports more engaging for fans with different knowledge levels and interests
Future-Ready: Demonstrates how AI can enhance rather than replace human entertainment experiences

Future Vision

Our hackathon prototype proves the concept, but we envision much more:

Multi-Sport Expansion**: Extending beyond NBA to NFL, MLB, soccer, and other major sports
Social Features**: Sharing personalized commentary clips and comparing reactions with friends
Advanced Analytics**: Deeper statistical analysis and predictive commentary
Multi-Language Support**: Breaking down language barriers in sports entertainment
Professional Integration**: Partnerships with sports networks and streaming platforms

Conclusion

CourtSide AI transforms sports from a one-size-fits-all experience into a deeply personal journey. By combining cutting-edge AI technology with thoughtful user experience design, we've created a platform that doesn't just deliver information—it delivers entertainment tailored specifically to each fan's unique preferences and personality.

The challenges we faced with API management and real-time system design only strengthened our resolve and deepened our technical expertise. Every exhausted free trial and every optimization implemented brought us closer to creating something truly revolutionary in the sports entertainment space.

Sports commentary will never be the same again. Welcome to the future of personalized sports entertainment.

Built with ❤️ and countless cups of coffee during Cornell's hackathon