What this project is about
CourtSight explores how tennis players could review analysis alongside match or training video. The interface combines a shot timeline, filters for groups such as forehands and backhands, landing positions, rally summaries and export. It is a browser-based product prototype: the interactions work, but displayed results come from sample events, not computer vision analysing the selected footage.
That distinction is essential. Messages describing court calibration, tracking and stroke classification demonstrate the intended workflow; they do not mean those models ran. Shot labels, speeds, confidence percentages and landing positions are sample values. The project demonstrates how results could be reviewed and how a future analysis system could connect, not measured recognition or tracking accuracy.
How it works
- Local tennis video
- Staged analysis experience
- Timeline + landing map + JSON export
Keep video review local
The browser opens the selected file through an object URL, a temporary local reference used by the video player. There is no backend server, account system, uploaded-video store or external model service. The prototype demonstrates local review without transferring the footage to a processing service.
Use one event format
Sample events supply timestamps, rally numbers, stroke types, speeds, confidence values, in/out flags and landing positions expressed relative to the court dimensions. Filters group related strokes; the same events feed summaries and a court map drawn with browser styling. A future data source could replace the sample list.
Expose the summary calculations
Session metrics and observations follow fixed calculations, not generated coaching advice. For example, the attack-rate rule counts sufficiently fast shots or those described as deep. Export saves the current mode and event list as a local JSON file, so the values behind the dashboard remain available for inspection.
The important design choices
Separate analysis from review
Develop the interface with explicit sample events before connecting models that analyse the video.
The trade-offThis allows interaction design without model infrastructure, but simulated outputs must be labelled so a polished presentation does not imply real analysis.
Stay in the browser
Keep file selection, visualization and export on the user's device.
The trade-offThe current flow avoids server-side video handling but provides no queue for lengthy processing, saved sessions or signed-in history across devices.
Review sample forehands
Load a local tennis clip and open the clearly labelled sample-analysis view.
- Filter the event timeline to forehand strokes.
- Inspect their sample landing markers and rally context.
- Export the JSON event file to inspect the values behind the interface.
What this showsThis demonstrates the intended review workflow without claiming the selected video produced the displayed measurements.
Illustrative example, not an additional measured result.
How it was tested—and what it shows
The checks
The evidence supports reviewing interface behaviour and data flow, not model quality. No court-mapping error, ball-tracking accuracy, stroke-classification performance, landing error or speed error has been measured. The architecture notes propose evaluating each component separately on labelled test videos excluded from training before claiming performance for the complete system.
What to take from the results
The working deliverable is a review prototype with timeline filtering, court visualization, summaries and local export. Its next technical step is a stable event format: real analysis could replace the sampleEvents data while leaving much of the interface intact. Current confidence percentages are not verified probabilities, and landing coordinates are sample content rather than positions recovered from the selected video.
What to keep in mind
- Uploaded video is not processed by a production tracking model.
- Shot speed, confidence and court positions are sample information, not measured results.
Technical notes & source
Built with
HTML · CSS · JavaScript · browser data visualisation
Terms used in this project
- Prototype
- A working model of part of a product used to explore its design.