High-Speed Badminton Match AI Analyser is a full-stack web application designed to revolutionise sports analytics. Users can upload raw badminton match footage, which is processed by a sophisticated computer vision pipeline on Google Cloud Platform (GCP). The application returns a detailed breakdown of the match, including shot classification, player statistics, and AI-driven tactical insights.

• Automated CV Pipeline: End-to-end processing including player detection, tracking, shuttlecock trajectory, and contact point detection.
• Smart Video Player: Watch the match with overlaid bounding boxes and annotations, synchronised perfectly with event logs.

• Event Logs: A clickable, scrollable list of every shot detected (e.g., "Smash by Player 1"). Clicking a log entry jumps the video to that exact timestamp.
• Data Visualisation: Interactive bar charts and summary tables powered by Recharts to visualise shot distribution and player dominance.
• Shot Filtering: Easily filter the feed to see only specific actions (e.g., isolate all "Jump Smashes" or "Net Shots").

• Generative AI Summary: The system analyses the statistical data to generate a textual summary of the match, offering professional tactical advice and observations.
• Pro Match Comparisons: References similar professional playstyles or matches based on the detected patterns.

• PDF Export: Generate a professional-grade PDF report containing the AI summary, charts, and match logs with a single click.
• CSV Downloads: Export raw data for further analysis in Excel or Python.

This project is divided into three main repositories to handle the frontend, backend logic, and model development separately:

• Frontend (This Repo): https://github.com/bryanlje/mds06-frontend
• Backend API: https://github.com/bryanlje/mds06-backend
• Model Training & Data Preparation: https://github.com/bryanlje/mds06-ml

The core of this application relies on a multi-stage Deep Learning pipeline hosted on Google Cloud Platform:

1. Ingestion: User uploads video directly to GCS via secure signed URLs.
2. Player Detection & Tracking: Identifies players and maintains their ID (Player 1 vs. Player 2) throughout the clip.
3. Shuttlecock Tracking: Tracks the high-speed projectile path of the shuttlecock.
4. Contact Point Detection: Identifies the exact frame intervals where a racket strikes the shuttle.
5. Shot Classification: A classifier model determines the specific stroke type based on player pose and shuttle trajectory.
6. Aggregation: Results are compiled into a structured JSON format for the frontend to render.

The model is trained to recognise the following specific badminton strokes:

• Framework: React (Vite)
• Language: TypeScript
• Styling: Tailwind CSS
• Visualisation: Recharts
• PDF Generation: jsPDF, html2canvas
• Routing: React Router DOM

• Cloud Provider: Google Cloud Platform (GCP)
• Storage: Google Cloud Storage (GCS)
• Compute: Cloud Run / Compute Engine (for GPU inference)
• API: REST API (for handling upload signatures and triggering models)

Follow these steps to run the frontend application locally.

• Node.js (v16+)
• npm or yarn

1. Clone the repository

   git clone [https://github.com/bryanlje/mds06-frontend.git](https://github.com/bryanlje/mds06-frontend.git)
   cd mds06-frontend

2. Install dependencies

   npm install
   # or
   yarn install

3. Configure Environment Create a .env file in the root directory. You will need to point this to your backend API service.

   VITE_API_BASE_URL=http://localhost:8000/api

4. Run the development server

   npm run dev

5. Open in Browser Navigate to http://localhost:5173 to view the app.

1. Upload:

   • Navigate to the Home page.
   • Drag and drop your .mp4 badminton match file into the upload zone.
   • Click Upload. The progress bar will indicate the transfer to Google Cloud.

2. Process:

   • Once uploaded, the system will automatically trigger the AI pipeline. A loading screen will appear while the GPU processes the footage.

3. Analyse:

   • You will be redirected to the Main dashboard.
   • Use the Video Player to watch the analysed footage.
   • Click on rows in the Event Logs to study specific shots.
   • Review the Bar Charts to compare player statistics.

4. Export:

   • Scroll to the bottom and click Generate Final Report to download the comprehensive PDF.

This project was developed by:

• Bryan Leong Jing Ern
• Phua Yee Yen
• Ting Shu Hui
• Lee Jian Jun Thomas

[License Information]

Email: [email protected]

Project Link: https://github.com/bryanlje/mds06-frontend