Call The Score
A voice-activated scorekeeper with client-side AI for toxicity detection in casual games.
About
I created Call The Score after noticing how often my friends and I forgot the score during intense ping pong games. Since we usually counted the score out loud anyway, I thought, why not build a web app to do it for us?
The app uses browser-based speech recognition to respond to natural voice commands like "Red point" or "Blue point," so players can focus on the game instead of remembering the score. I also added a toxicity analysis feature that monitors live conversation and displays a real-time "toxicity score" to promote more respectful gameplay.
I still use Call The Score whenever I play ping pong or badminton. It is built as a Progressive Web App, so you can add it to your home screen for quick access. On iPhone, just tap the share icon and choose "Add to Home Screen", and use in landscape mode. Try it out here!
Features
Voice-Activated Scoring
Score tracking using natural speech commands.
Toxicity Monitoring
AI-powered conversation sentiment analysis with visual toxicity gauge
Manual Controls
Traditional touch/click controls as backup to voice commands.
Cross-Platform Compatibility
Works on any device with a modern web browser.
Technologies Used
React
Framework
Web Speech API
Speech Recognition
Hugging Face
AI/ML
Xenova Transformers
Library
GitHub Pages
Deployment
App Screenshots
Players can update scores with manual controls, or with voice commands ("Red point" or "Blue point") by activating the microphone with the button in the top corner.
Use the dropdown menu to toggle between the scorekeeping and toxicity monitoring.
The real-time toxicity meter uses an in-browser ML model and a custom scoring algorithm to classify live speech.
As "toxic" words are detected, the gauge shifts to reflect the rising intensity of the conversation.
What I Learned
I discovered the power of running machine learning models directly in the browser using Xenova Transformers, eliminating the need for backend infrastructure. The real challenge was maintaining smooth performance while processing live audio transcripts in real-time. Building the toxicity detection system involved creating a weighted scoring algorithm that analyzes speech for "toxic" language. I then translated these scores into an animated gauge that responds to the conversation intensity.
I dove deep into the Web Speech API to understand how browser-based speech recognition works. The biggest challenge was dealing with inconsistent support across different devices and browsers, which pushed me to develop fallback strategies and different error handling systems.
This project taught me responsive design goes far beyond standard breakpoints. I spent considerable time solving the unique challenge of mobile landscape orientation, where screen height becomes extremely constrained. It required creative layout solutions and multiple iterations to get right.