From 0daa145265c2d7cfccdda7867d39043f2c744ad2 Mon Sep 17 00:00:00 2001 From: BinilTomJose1278 Date: Sun, 12 Oct 2025 11:21:47 +1100 Subject: [PATCH 1/6] Complete Technical Documentation --- .../project4docs/technicaldocumentation.md | 2389 +++++++++++++++++ 1 file changed, 2389 insertions(+) create mode 100644 docs/orion-playertracking&crowdmonitoring/project4docs/technicaldocumentation.md diff --git a/docs/orion-playertracking&crowdmonitoring/project4docs/technicaldocumentation.md b/docs/orion-playertracking&crowdmonitoring/project4docs/technicaldocumentation.md new file mode 100644 index 00000000..31702977 --- /dev/null +++ b/docs/orion-playertracking&crowdmonitoring/project4docs/technicaldocumentation.md @@ -0,0 +1,2389 @@ +# AFL Player Tracking & Crowd Monitoring System +## Complete Technical Documentation + +--- + +**Document Version:** 1.0 +**Last Updated:** October 2025 +**Project:** Redback Operations - Project 4 +**Classification:** Technical Specification & Architecture Document + +--- + +## πŸ“‹ Table of Contents + +1. [Executive Summary](#1-executive-summary) +2. [System Architecture](#2-system-architecture) +3. [Technology Stack](#3-technology-stack) +4. [Frontend Architecture](#4-frontend-architecture) +5. [Backend Architecture](#5-backend-architecture) +6. [Database Design](#6-database-design) +7. [AI/ML Components](#7-aiml-components) +8. [API Documentation](#8-api-documentation) +9. [Authentication & Security](#9-authentication--security) +10. [Core Features](#10-core-features) +11. [Data Flow & Processing](#11-data-flow--processing) +12. [Deployment Architecture](#12-deployment-architecture) +13. [Setup & Installation](#13-setup--installation) +14. [Performance & Optimization](#14-performance--optimization) +15. [Testing & Quality Assurance](#15-testing--quality-assurance) +16. [Future Enhancements](#16-future-enhancements) + +--- +## 1. Executive Summary + +### 1.1 Project Overview + +The **AFL Player Tracking and Crowd Monitoring System** is an advanced AI-powered platform designed to enhance safety, analytics, and performance insights during Australian Football League (AFL) matches. The system leverages state-of-the-art computer vision, deep learning, and real-time analytics through **two independent AI processing pipelines**: + +1. **Player Tracking Logic**: GPU-accelerated YOLOv11 and ByteTrack algorithms for multi-player detection, tracking, and performance analytics +2. **Crowd Monitoring Logic**: Automated crowd density analysis and safety monitoring through person detection and heatmap generation + +Both pipelines integrate seamlessly through a unified dashboard, providing comprehensive monitoring capabilities for coaches, analysts, and stadium safety teams. + +### 1.2 Key Objectives + +**Player Tracking Pipeline Objectives:** +- **Multi-Player Detection**: Real-time detection and tracking of individual players using YOLOv11 and ByteTrack algorithms +- **Performance Analytics**: Distance traveled, speed metrics (avg/max), movement patterns, and intensity scores +- **Movement Heatmaps**: Individual player, team-wide, and zone-based (Back 50, Midfield, Forward 50) visualizations +- **Annotated Video**: Output videos with bounding boxes, player IDs, and tracking overlays +- **Strategic Insights**: CSV data export for advanced coaching analysis and tactical planning + +**Crowd Monitoring Pipeline Objectives:** +- **Crowd Density Analysis**: Automated person detection and crowd concentration measurement +- **Safety Heatmaps**: Visual representation of crowd density for safety management +- **Spatial Distribution**: Frame-by-frame analysis of crowd movement and positioning +- **Alert Generation**: Real-time notifications for high-density areas and potential safety concerns +- **Capacity Monitoring**: People count tracking for stadium capacity management + +**Shared System Objectives:** +- **Secure Access**: JWT-based authentication with OAuth integration (Google/Apple) +- **Unified Dashboard**: Single interface displaying both player and crowd analytics +- **Scalable Architecture**: Microservices design supporting independent pipeline scaling +- **Real-Time Processing**: Fast analysis with GPU acceleration and optimized algorithms + +### 1.3 Business Value + +**Player Tracking Benefits:** +- **Performance Optimization**: Data-driven training regimens based on distance, speed, and movement patterns +- ** Injury Prevention**: Workload monitoring to prevent player fatigue and overexertion +- **Competitive Analysis**: Detailed movement analytics for tactical advantage +- **Coaching Efficiency**: Automated statistics reduce manual video analysis time by 80% +- ** Player Development**: Track individual progress over time with historical data + +**Crowd Monitoring Benefits:** +- **Enhanced Stadium Safety**: Real-time crowd density alerts prevent overcrowding incidents +- **Emergency Response**: Quick identification of problem areas for rapid intervention +- **Compliance**: Meet stadium capacity regulations and safety standards +- **Resource Optimization**: Efficient security and staff deployment based on crowd patterns +- **Revenue Protection**: Prevent crowd-related incidents that could lead to fines or closures + +**Combined System Value:** +- **Holistic View**: Single platform for all match monitoring needs +- **Cost Efficiency**: Integrated solution reduces need for multiple separate systems +- **Data-Driven Decisions**: Comprehensive analytics for stakeholders across departments +- **Innovation Leadership**: Cutting-edge AI technology enhances organizational reputation + +--- + +## 2. System Architecture + +### 2.1 High-Level Architecture + +The system follows a **microservices architecture** with three primary tiers and **two core AI processing pipelines**: + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ CLIENT TIER β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ React 18 + Vite + TypeScript Frontend β”‚ β”‚ +β”‚ β”‚ - Dashboard UI - Auth UI - Player Analytics - Crowd Analytics β”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + ↕ HTTP/REST API +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ APPLICATION TIER β”‚ +β”‚ β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ Backend API Gateway (FastAPI) β”‚ β”‚ +β”‚ β”‚ Port 8000 β”‚ β”‚ +β”‚ β”‚ - Authentication & JWT - Video Upload Management β”‚ β”‚ +β”‚ β”‚ - User Authorization - Analysis Orchestration β”‚ β”‚ +β”‚ β”‚ - Analytics Aggregation - Static File Serving β”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β”‚ β”‚ β”‚ β”‚ +β”‚ ↓ ↓ β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”β”‚ +β”‚ β”‚ PLAYER TRACKING LOGIC β”‚ β”‚ CROWD MONITORING LOGIC β”‚β”‚ +β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”‚ +β”‚ β”‚ Tracking Microservice (FastAPI) β”‚ β”‚ External Crowd API (ngrok) β”‚β”‚ +β”‚ β”‚ Port 8001 | GPU-Accelerated β”‚ β”‚ External Service Integration β”‚β”‚ +β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”‚ +β”‚ β”‚ YOLOv11 Object Detection β”‚ β”‚ Person Detection β”‚β”‚ +β”‚ β”‚ ByteTrack Multi-Object Trackingβ”‚ β”‚ Crowd Density Analysis β”‚β”‚ +β”‚ β”‚ Player Speed & Distance Calc β”‚ β”‚ Density Heatmap Generation β”‚β”‚ +β”‚ β”‚ Movement Heatmap Generation β”‚ β”‚ People Count Per Frame β”‚β”‚ +β”‚ β”‚ Zone Analysis (Back 50, etc.) β”‚ β”‚ Spatial Distribution Analysis β”‚β”‚ +β”‚ β”‚ Per-Player Analytics β”‚ β”‚ Temporal Density Tracking β”‚β”‚ +β”‚ β”‚ Team-Wide Statistics β”‚ β”‚ Frame-by-Frame Processing β”‚β”‚ +β”‚ β”‚ CSV & JSON Export β”‚ β”‚ Safety Alert Generation β”‚β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜β”‚ +β”‚ ↓ ↓ β”‚ +β”‚ Returns: Returns: β”‚ +β”‚ - Tracked video - Heatmap images β”‚ +β”‚ - Player analytics JSON - People count data β”‚ +β”‚ - Heatmap images - Frame snapshots β”‚ +β”‚ - CSV tracking data - Density metrics β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + ↕ SQL Queries +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ DATA TIER β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ PostgreSQL Database (Port 5432) β”‚ β”‚ +β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”‚ +β”‚ β”‚ Tables: β”‚ β”‚ +β”‚ β”‚ β€’ users β†’ User accounts & authentication β”‚ β”‚ +β”‚ β”‚ β€’ uploads β†’ Video file metadata β”‚ β”‚ +β”‚ β”‚ β€’ inferences β†’ Job tracking (player/crowd tasks) β”‚ β”‚ +β”‚ β”‚ β€’ player_analysis β†’ Player tracking results & metrics β”‚ β”‚ +β”‚ β”‚ β€’ crowd_analysis β†’ Crowd monitoring results & heatmaps β”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +**Key Components:** + +1. **Player Tracking Logic** (Microservice on Port 8001) + - GPU-accelerated YOLO-based detection + - Real-time multi-object tracking + - Movement analytics and heatmaps + - Per-player and team statistics + +2. **Crowd Monitoring Logic** (External API Integration) + - Person detection in crowd scenes + - Density heatmap generation + - Safety monitoring capabilities + - Frame sampling and analysis + +### 2.2 Dual-Pipeline Architecture + +The system implements **two independent AI processing pipelines** that can run simultaneously or separately: + +**Pipeline 1: Player Tracking Logic** +``` +Video Input + ↓ +YOLOv11 Object Detection (GPU) + ↓ +ByteTrack Multi-Object Tracking + ↓ +Movement Path Extraction + ↓ +Speed & Distance Calculation + ↓ +Heatmap Generation (Individual + Team) + ↓ +Zone Analysis (Back 50, Midfield, Forward 50) + ↓ +Analytics JSON + CSV Export +``` + +**Pipeline 2: Crowd Monitoring Logic** +``` +Video Input + ↓ +Frame Sampling (Every 30th frame) + ↓ +Person Detection (External API) + ↓ +Crowd Density Analysis + ↓ +Heatmap Generation + ↓ +People Count Extraction + ↓ +Safety Metrics & Alerts + ↓ +Frame-by-Frame Storage +``` + +**Integration Benefits**: +- **Parallel Processing**: Both pipelines can run simultaneously on different videos +- **Independent Scaling**: Each pipeline scales based on its workload +- **Flexible Deployment**: Can be deployed together or separately +- **Unified Dashboard**: Both results displayed in single interface +- **Shared Infrastructure**: Common authentication, storage, and API gateway + +### 2.3 Architecture Principles + +- **Separation of Concerns**: Each service handles specific responsibilities +- **Dual-Pipeline Design**: Player tracking and crowd monitoring as independent modules +- **Scalability**: Independent microservices can scale horizontally +- **Resilience**: Service isolation prevents cascading failures +- **Modularity**: Components can be updated or replaced independently +- **Security by Design**: Authentication at every layer + +### 2.4 Communication Patterns + +**Frontend ↔ Backend Gateway**: +- **REST API**: Primary communication protocol +- **HTTP Multipart**: Video file uploads +- **JSON Payloads**: Structured data exchange +- **JWT Tokens**: Bearer token authentication +- **WebSocket** (Future): Real-time updates + +**Backend Gateway ↔ Player Tracking Microservice**: +- **Internal HTTP/REST**: Service-to-service communication +- **Video File Transfer**: Multipart video upload +- **JSON Response**: Analytics and tracking data +- **Static URLs**: Links to heatmaps and processed videos + +**Backend Gateway ↔ Crowd Monitoring API**: +- **External HTTP/REST**: Third-party API integration +- **Frame Upload**: Individual frame images (JPEG) +- **Image Response**: Heatmap PNG files +- **Custom Headers**: People count metadata + +**Backend Gateway ↔ PostgreSQL Database**: +- **SQLAlchemy ORM**: Object-relational mapping +- **Connection Pooling**: Efficient database access +- **Transactions**: ACID compliance for data integrity + +**Data Flow Summary**: +``` +User Upload β†’ Backend Gateway β†’ { + Player Tracking: Backend β†’ Tracking Service β†’ DB + Crowd Monitoring: Backend β†’ Crowd API β†’ DB +} β†’ Analytics Aggregation β†’ Frontend Display +``` + +--- + +## 3. Technology Stack + +### 3.1 Frontend Technologies + +| Technology | Version | Purpose | +|------------|---------|---------| +| **React** | 18.3.1 | UI framework for component-based development | +| **TypeScript** | 5.9.2 | Type-safe JavaScript for reduced runtime errors | +| **Vite** | 7.1.2 | Fast build tool and development server | +| **TailwindCSS** | 3.4.17 | Utility-first CSS framework | +| **React Router** | 6.30.1 | Client-side routing and navigation | +| **TanStack Query** | 5.84.2 | Server state management and caching | +| **Radix UI** | Various | Accessible component primitives | +| **Recharts** | 2.12.7 | Data visualization and charting | +| **Framer Motion** | 12.23.12 | Animation library | +| **Axios** | 1.12.2 | HTTP client with interceptors | +| **Zod** | 3.25.76 | Schema validation | +| **React Hook Form** | 7.62.0 | Form state management | + +### 3.2 Backend Technologies + +#### Main Backend Service (Port 8000) + +| Technology | Version | Purpose | +|------------|---------|---------| +| **FastAPI** | 0.116.1 | High-performance async web framework | +| **Uvicorn** | 0.35.0 | ASGI server for FastAPI | +| **SQLAlchemy** | 2.0.43 | ORM for database operations | +| **PostgreSQL** | 15 | Relational database | +| **psycopg2-binary** | 2.9.10 | PostgreSQL adapter | +| **Alembic** | 1.13.2 | Database migration tool | +| **Pydantic** | 2.11.7 | Data validation | +| **PassLib** | 1.7.4 | Password hashing | +| **python-jose** | 3.5.0 | JWT token generation | +| **OpenCV** | 4.10.0.84 | Image processing | +| **NumPy** | 1.26.4 | Numerical computing | +| **Pandas** | 2.2.2 | Data manipulation | +| **Matplotlib** | 3.9.0 | Plotting and visualization | + +#### Tracking Microservice (Port 8001) + +| Technology | Version | Purpose | +|------------|---------|---------| +| **FastAPI** | 0.111.0 | API framework | +| **PyTorch** | 2.5.1+cu121 | Deep learning framework with CUDA | +| **Ultralytics** | 8.3.161 | YOLOv11 implementation | +| **OpenCV** | 4.10.0.84 | Video processing | +| **EasyOCR** | 1.7.2 | Optical character recognition | +| **SciPy** | 1.15.1 | Scientific computing | +| **scikit-image** | 0.25.2 | Image processing algorithms | + +### 3.3 Infrastructure & DevOps + +- **Docker**: Containerization (PostgreSQL container) +- **Git**: Version control +- **GitHub**: Repository hosting +- **VS Code**: Primary development environment +- **Google Colab**: Cloud GPU for model training +- **Jupyter Notebooks**: Experimentation and analysis + +### 3.4 AI/ML Models + +- **YOLOv11**: State-of-the-art object detection +- **ByteTrack**: Multi-object tracking algorithm +- **Custom AFL Player Model**: Fine-tuned on AFL footage +- **Gaussian Filtering**: Heatmap smoothing algorithm + +--- + +## 4. Frontend Architecture + +### 4.1 Project Structure + +``` +frontend/ +β”œβ”€β”€ client/ +β”‚ β”œβ”€β”€ pages/ # Route-level components +β”‚ β”‚ β”œβ”€β”€ Index.tsx # Landing page +β”‚ β”‚ β”œβ”€β”€ Login.tsx # Authentication page +β”‚ β”‚ β”œβ”€β”€ AFLDashboard.tsx # Main dashboard +β”‚ β”‚ β”œβ”€β”€ PlayerPerformance.tsx # Player analytics +β”‚ β”‚ β”œβ”€β”€ CrowdMonitor.tsx # Crowd monitoring +β”‚ β”‚ β”œβ”€β”€ Analytics.tsx # Advanced analytics +β”‚ β”‚ β”œβ”€β”€ Reports.tsx # Report generation +β”‚ β”‚ └── TeamMatchPerformance.tsx +β”‚ β”œβ”€β”€ components/ +β”‚ β”‚ β”œβ”€β”€ auth/ # Authentication components +β”‚ β”‚ β”œβ”€β”€ dashboard/ # Dashboard components +β”‚ β”‚ β”‚ β”œβ”€β”€ tabs/ # Tab panels +β”‚ β”‚ β”‚ β”œβ”€β”€ DashboardHeader.tsx +β”‚ β”‚ β”‚ β”œβ”€β”€ PlayerStatsGrid.tsx +β”‚ β”‚ β”‚ β”œβ”€β”€ VideoUploadPanel.tsx +β”‚ β”‚ β”‚ └── ... +β”‚ β”‚ β”œβ”€β”€ ui/ # Reusable UI primitives +β”‚ β”‚ β”œβ”€β”€ ErrorBoundary.tsx +β”‚ β”‚ └── ... +β”‚ β”œβ”€β”€ hooks/ # Custom React hooks +β”‚ β”‚ β”œβ”€β”€ useDashboardState.ts +β”‚ β”‚ β”œβ”€β”€ use-processing-queue.ts +β”‚ β”‚ └── use-oauth.ts +β”‚ β”œβ”€β”€ lib/ # Utility functions +β”‚ β”‚ β”œβ”€β”€ auth.ts +β”‚ β”‚ β”œβ”€β”€ video.ts +β”‚ β”‚ β”œβ”€β”€ crowd.ts +β”‚ β”‚ β”œβ”€β”€ reports.ts +β”‚ β”‚ β”œβ”€β”€ download.ts +β”‚ β”‚ └── utils.ts +β”‚ β”œβ”€β”€ types/ # TypeScript definitions +β”‚ β”‚ β”œβ”€β”€ api.ts +β”‚ β”‚ └── dashboard.ts +β”‚ β”œβ”€β”€ api/ +β”‚ β”‚ └── axiosInstance.ts # Configured Axios client +β”‚ β”œβ”€β”€ App.tsx # Root component & routing +β”‚ β”œβ”€β”€ main.tsx # Application entry point +β”‚ └── global.css # Global styles +β”œβ”€β”€ server/ # Express server (OAuth) +β”‚ β”œβ”€β”€ routes/ +β”‚ β”‚ β”œβ”€β”€ oauth.ts +β”‚ β”‚ └── demo.ts +β”‚ └── index.ts +β”œβ”€β”€ shared/ # Shared types (client & server) +β”‚ β”œβ”€β”€ api.ts +β”‚ └── oauth.ts +β”œβ”€β”€ package.json +β”œβ”€β”€ vite.config.ts +β”œβ”€β”€ tailwind.config.ts +└── tsconfig.json +``` + +### 4.2 Routing Architecture + +**React Router 6 Configuration** (SPA Mode): + +```typescript +Routes: + / β†’ Login Page + /login β†’ Login Page + /home β†’ AFL Dashboard (authenticated) + /afl-dashboard β†’ AFL Dashboard + /player-performance β†’ Player Performance Analytics + /crowd-monitor β†’ Crowd Monitoring + /analytics β†’ Advanced Analytics + /reports β†’ Report Generation + /team-match-performance β†’ Team Comparison + /api-diagnostics β†’ System Diagnostics + * β†’ 404 Not Found +``` + +### 4.3 State Management Strategy + +#### Global State (TanStack Query) +- Server data caching +- Automatic refetching +- Optimistic updates +- Error retry logic + +#### Local State (useState/useReducer) +- UI state (modals, tabs, selections) +- Form state (React Hook Form) +- Dashboard state (custom hook) + +#### Authentication State +- JWT token in localStorage +- User email in localStorage +- Axios interceptor for token injection +- Auto-redirect on 401 responses + +### 4.4 Key Frontend Components + +#### AFLDashboard Component +- **Purpose**: Main application interface +- **Features**: Tab-based navigation, video upload, analysis results +- **State**: Managed by `useDashboardState` hook +- **Tabs**: Video Analysis, Player Performance, Crowd Monitor, Reports + +#### VideoUploadPanel Component +- Drag-and-drop file upload +- Progress tracking +- Analysis type selection (Player/Crowd) +- Queue management + +#### PlayerStatsGrid Component +- Real-time player metrics +- Distance traveled +- Speed (avg/max) +- Heatmap visualization +- Zone activity analysis + +### 4.5 API Integration Layer + +**Axios Instance Configuration**: +```typescript +- Base URL: http://127.0.0.1:8000 +- Request Interceptor: Inject JWT token +- Response Interceptor: Handle 401 β†’ redirect to /login +- Timeout: 30 seconds +- Error handling: Centralized error mapping +``` + +--- + +## 5. Backend Architecture + +### 5.1 Main Backend Service (Port 8000) + +#### Service Structure + +``` +backend/ +β”œβ”€β”€ main.py # FastAPI application entry point +β”œβ”€β”€ storage.py # Database ORM models & helpers +β”œβ”€β”€ routes/ +β”‚ β”œβ”€β”€ __init__.py +β”‚ β”œβ”€β”€ auth.py # Authentication endpoints +β”‚ β”œβ”€β”€ upload.py # Video upload handling +β”‚ β”œβ”€β”€ inference.py # Inference orchestration +β”‚ β”œβ”€β”€ tracking_analysis_simple.py # Tracking analytics +β”‚ β”œβ”€β”€ crowd.py # Crowd monitoring +β”‚ β”œβ”€β”€ analysis.py # Analysis retrieval +β”‚ β”œβ”€β”€ metrics.py # Metrics APIs +β”‚ └── metrics_store.py # Metrics storage +β”œβ”€β”€ config/ +β”‚ └── cors.py # CORS configuration +β”œβ”€β”€ static/ # Static file serving +β”‚ β”œβ”€β”€ heatmaps/ +β”‚ β”œβ”€β”€ analytics/ +β”‚ └── crowd/ +β”œβ”€β”€ uploaded_videos/ # Video storage +β”œβ”€β”€ requirements.txt +└── README.md +``` + +#### Core Responsibilities + +1. **Authentication & Authorization** + - User registration with bcrypt password hashing + - JWT token generation and validation + - OAuth integration (Google/Apple) + - Role-based access control + +2. **Video Management** + - Multipart file upload handling + - Unique UUID generation per upload + - File path storage in PostgreSQL + - Original filename preservation + +3. **Inference Orchestration** + - Player tracking service coordination + - Crowd monitoring API integration + - Job status tracking (Analyzing/Completed/Failed) + - Result aggregation and storage + +4. **Analytics Processing** + - Heatmap localization (download from microservice) + - JSON analytics storage + - Per-player statistics calculation + - Zone-based analysis (Back 50, Midfield, Forward 50) + +5. **Static File Serving** + - Annotated videos + - Heatmap images + - Analytics JSON + - Crowd detection frames + +### 5.2 Tracking Microservice (Port 8001) + +#### Service Structure + +``` +tracking_code/ +β”œβ”€β”€ main.py # FastAPI tracking service +β”œβ”€β”€ track.py # YOLO tracking implementation +β”œβ”€β”€ afl_heatmap.py # Heatmap generation pipeline +β”œβ”€β”€ demo.py # Standalone demo +β”œβ”€β”€ best.pt # YOLOv11 trained weights +β”œβ”€β”€ uploads/ # Temporary video storage +β”œβ”€β”€ outputs/ # Tracked videos & CSVs +β”œβ”€β”€ analytics/ # JSON analytics +β”œβ”€β”€ heatmaps/ # Generated heatmaps +β”‚ β”œβ”€β”€