Upload 4 files

frontend/app.js

@@ -0,0 +1,137 @@
+let selectedFile = null;
+let currentTrajectories = null;
+
+// DOM elements
+const uploadBox = document.getElementById('uploadBox');
+const videoInput = document.getElementById('videoInput');
+const uploadBtn = document.getElementById('uploadBtn');
+const loadingSection = document.getElementById('loadingSection');
+const resultsSection = document.getElementById('resultsSection');
+const playBtn = document.getElementById('playBtn');
+const resetBtn = document.getElementById('resetBtn');
+const showTrails = document.getElementById('showTrails');
+
+// Upload box click
+uploadBox.addEventListener('click', () => {
+    videoInput.click();
+});
+
+// File selection
+videoInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) {
+        selectedFile = file;
+        uploadBox.querySelector('h3').textContent = `Selected: ${file.name}`;
+        uploadBox.querySelector('p').textContent = `Size: ${(file.size / 1024 / 1024).toFixed(2)} MB`;
+        uploadBtn.style.display = 'block';
+    }
+});
+
+// Drag and drop
+uploadBox.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    uploadBox.classList.add('dragover');
+});
+
+uploadBox.addEventListener('dragleave', () => {
+    uploadBox.classList.remove('dragover');
+});
+
+uploadBox.addEventListener('drop', (e) => {
+    e.preventDefault();
+    uploadBox.classList.remove('dragover');
+    
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith('video/')) {
+        selectedFile = file;
+        uploadBox.querySelector('h3').textContent = `Selected: ${file.name}`;
+        uploadBox.querySelector('p').textContent = `Size: ${(file.size / 1024 / 1024).toFixed(2)} MB`;
+        uploadBtn.style.display = 'block';
+    } else {
+        alert('Please drop a valid video file');
+    }
+});
+
+// Upload and process
+uploadBtn.addEventListener('click', async () => {
+    if (!selectedFile) return;
+    
+    const formData = new FormData();
+    formData.append('file', selectedFile);
+    
+    // Show loading
+    document.querySelector('.upload-section').style.display = 'none';
+    loadingSection.style.display = 'block';
+    
+    try {
+        const response = await fetch('/api/upload', {
+            method: 'POST',
+            body: formData
+        });
+        
+        if (!response.ok) {
+            throw new Error('Upload failed');
+        }
+        
+        const data = await response.json();
+        currentTrajectories = data.trajectories;
+        
+        // Display results
+        displayResults(data.trajectories);
+        
+        loadingSection.style.display = 'none';
+        resultsSection.style.display = 'block';
+        
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error processing video: ' + error.message);
+        loadingSection.style.display = 'none';
+        document.querySelector('.upload-section').style.display = 'block';
+    }
+});
+
+// Display results
+function displayResults(data) {
+    const metadata = data.metadata;
+    const trajectories = data.trajectories;
+    
+    // Update stats
+    document.getElementById('statObjects').textContent = metadata.num_objects;
+    document.getElementById('statFrames').textContent = metadata.frame_count;
+    document.getElementById('statFPS').textContent = metadata.fps.toFixed(1);
+    document.getElementById('statDuration').textContent = 
+        (metadata.frame_count / metadata.fps).toFixed(1) + 's';
+    
+    // Initialize 3D visualization
+    if (window.visualizer) {
+        window.visualizer.destroy();
+    }
+    window.visualizer = new TrajectoryVisualizer('canvas3d');
+    window.visualizer.loadTrajectories(trajectories);
+}
+
+// Control buttons
+playBtn.addEventListener('click', () => {
+    if (window.visualizer) {
+        if (window.visualizer.isPlaying) {
+            window.visualizer.pause();
+            playBtn.textContent = '▶ Play';
+        } else {
+            window.visualizer.play();
+            playBtn.textContent = '⏸ Pause';
+        }
+    }
+});
+
+resetBtn.addEventListener('click', () => {
+    if (window.visualizer) {
+        window.visualizer.reset();
+        playBtn.textContent = '▶ Play';
+    }
+});
+
+showTrails.addEventListener('change', (e) => {
+    if (window.visualizer) {
+        window.visualizer.setShowTrails(e.target.checked);
+    }
+});

frontend/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Trajectory Tracker</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🎯 3D Trajectory Tracker</h1>
+            <p>Upload a video to track and visualize object movements in 3D</p>
+        </header>
+
+        <div class="upload-section">
+            <div class="upload-box" id="uploadBox">
+                <input type="file" id="videoInput" accept="video/*" hidden>
+                <div class="upload-content">
+                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="17 8 12 3 7 8"></polyline>
+                        <line x1="12" y1="3" x2="12" y2="15"></line>
+                    </svg>
+                    <h3>Drop video here or click to upload</h3>
+                    <p>Supports MP4, AVI, MOV, MKV</p>
+                </div>
+            </div>
+            <button id="uploadBtn" class="btn primary" style="display: none;">Process Video</button>
+        </div>
+
+        <div id="loadingSection" class="loading-section" style="display: none;">
+            <div class="spinner"></div>
+            <p>Processing video... This may take a few moments.</p>
+        </div>
+
+        <div id="resultsSection" class="results-section" style="display: none;">
+            <div class="stats-panel">
+                <h3>📊 Tracking Statistics</h3>
+                <div class="stats-grid">
+                    <div class="stat-item">
+                        <span class="stat-label">Objects Tracked:</span>
+                        <span class="stat-value" id="statObjects">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Total Frames:</span>
+                        <span class="stat-value" id="statFrames">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">FPS:</span>
+                        <span class="stat-value" id="statFPS">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Duration:</span>
+                        <span class="stat-value" id="statDuration">0s</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="visualization-panel">
+                <h3>🎬 3D Trajectory Visualization</h3>
+                <div class="controls">
+                    <button id="playBtn" class="btn">▶ Play</button>
+                    <button id="resetBtn" class="btn">↻ Reset</button>
+                    <label>
+                        <input type="checkbox" id="showTrails" checked>
+                        Show Trails
+                    </label>
+                </div>
+                <div id="canvas3d"></div>
+            </div>
+        </div>
+
+        <footer>
+            <p>Built with FastAPI, Three.js, and OpenCV</p>
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="/static/visualizer.js"></script>
+    <script src="/static/app.js"></script>
+</body>
+</html>

frontend/styles.css

@@ -0,0 +1,235 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+header {
+    text-align: center;
+    color: white;
+    margin-bottom: 40px;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+header p {
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+.upload-section {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    margin-bottom: 30px;
+}
+
+.upload-box {
+    border: 3px dashed #667eea;
+    border-radius: 12px;
+    padding: 60px 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: #f8f9ff;
+}
+
+.upload-box:hover {
+    background: #f0f2ff;
+    border-color: #764ba2;
+}
+
+.upload-box.dragover {
+    background: #e8ebff;
+    border-color: #764ba2;
+    transform: scale(1.02);
+}
+
+.upload-content svg {
+    color: #667eea;
+    margin-bottom: 20px;
+}
+
+.upload-content h3 {
+    font-size: 1.3rem;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.upload-content p {
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.btn {
+    padding: 12px 30px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 600;
+    margin: 10px 5px;
+}
+
+.btn.primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    width: 100%;
+    margin-top: 20px;
+}
+
+.btn.primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.loading-section {
+    background: white;
+    border-radius: 16px;
+    padding: 60px;
+    text-align: center;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.results-section {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+
+.stats-panel {
+    margin-bottom: 30px;
+    padding: 20px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-radius: 12px;
+}
+
+.stats-panel h3 {
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+}
+
+.stat-item {
+    background: white;
+    padding: 15px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.stat-label {
+    font-weight: 600;
+    color: #666;
+}
+
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #667eea;
+}
+
+.visualization-panel h3 {
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 8px;
+}
+
+.controls label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    margin-left: auto;
+}
+
+.controls input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+#canvas3d {
+    width: 100%;
+    height: 600px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    overflow: hidden;
+}
+
+footer {
+    text-align: center;
+    color: white;
+    margin-top: 40px;
+    opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+    header h1 {
+        font-size: 2rem;
+    }
+    
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    #canvas3d {
+        height: 400px;
+    }
+}

frontend/visualizer.js

@@ -0,0 +1,244 @@
+class TrajectoryVisualizer {
+    constructor(containerId) {
+        this.container = document.getElementById(containerId);
+        this.trajectories = [];
+        this.objects = [];
+        this.trails = [];
+        this.isPlaying = false;
+        this.currentFrame = 0;
+        this.maxFrames = 0;
+        this.showTrails = true;
+        
+        this.init();
+    }
+    
+    init() {
+        // Scene
+        this.scene = new THREE.Scene();
+        this.scene.fog = new THREE.Fog(0x1a1a2e, 5, 15);
+        
+        // Camera
+        this.camera = new THREE.PerspectiveCamera(
+            75,
+            this.container.clientWidth / this.container.clientHeight,
+            0.1,
+            1000
+        );
+        this.camera.position.set(3, 3, 3);
+        this.camera.lookAt(0, 0, 0);
+        
+        // Renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+        this.renderer.setClearColor(0x1a1a2e);
+        this.container.appendChild(this.renderer.domElement);
+        
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        this.scene.add(ambientLight);
+        
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(5, 5, 5);
+        this.scene.add(directionalLight);
+        
+        const pointLight = new THREE.PointLight(0x667eea, 1, 100);
+        pointLight.position.set(0, 3, 0);
+        this.scene.add(pointLight);
+        
+        // Grid helper
+        const gridHelper = new THREE.GridHelper(4, 20, 0x444444, 0x222222);
+        gridHelper.position.y = -1;
+        this.scene.add(gridHelper);
+        
+        // Axes helper
+        const axesHelper = new THREE.AxesHelper(2);
+        this.scene.add(axesHelper);
+        
+        // Handle window resize
+        window.addEventListener('resize', () => this.onWindowResize());
+        
+        // Mouse controls
+        this.setupControls();
+        
+        // Start animation loop
+        this.animate();
+    }
+    
+    setupControls() {
+        let isDragging = false;
+        let previousMousePosition = { x: 0, y: 0 };
+        
+        this.container.addEventListener('mousedown', (e) => {
+            isDragging = true;
+        });
+        
+        this.container.addEventListener('mousemove', (e) => {
+            if (isDragging) {
+                const deltaX = e.offsetX - previousMousePosition.x;
+                const deltaY = e.offsetY - previousMousePosition.y;
+                
+                const rotationSpeed = 0.005;
+                this.camera.position.applyAxisAngle(
+                    new THREE.Vector3(0, 1, 0),
+                    deltaX * rotationSpeed
+                );
+                
+                const lookAt = new THREE.Vector3(0, 0, 0);
+                this.camera.lookAt(lookAt);
+            }
+            
+            previousMousePosition = { x: e.offsetX, y: e.offsetY };
+        });
+        
+        this.container.addEventListener('mouseup', () => {
+            isDragging = false;
+        });
+        
+        // Zoom with mouse wheel
+        this.container.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            const zoomSpeed = 0.1;
+            const direction = new THREE.Vector3();
+            this.camera.getWorldDirection(direction);
+            
+            if (e.deltaY < 0) {
+                this.camera.position.addScaledVector(direction, zoomSpeed);
+            } else {
+                this.camera.position.addScaledVector(direction, -zoomSpeed);
+            }
+        });
+    }
+    
+    loadTrajectories(trajectories) {
+        this.trajectories = trajectories;
+        this.currentFrame = 0;
+        this.isPlaying = false;
+        
+        // Find max frames
+        this.maxFrames = 0;
+        trajectories.forEach(traj => {
+            const maxFrame = Math.max(...traj.points.map(p => p.frame));
+            if (maxFrame > this.maxFrames) this.maxFrames = maxFrame;
+        });
+        
+        // Clear existing objects
+        this.objects.forEach(obj => this.scene.remove(obj));
+        this.trails.forEach(line => this.scene.remove(line));
+        this.objects = [];
+        this.trails = [];
+        
+        // Create objects for each trajectory
+        const colors = [0xff6b6b, 0x4ecdc4, 0xffe66d, 0x95e1d3, 0xf38181, 0xaa96da, 0xfcbad3, 0xa8e6cf];
+        
+        trajectories.forEach((traj, index) => {
+            const color = colors[index % colors.length];
+            const points = traj.points;
+            
+            // Create trail line
+            const positions = new Float32Array(points.length * 3);
+            points.forEach((point, i) => {
+                positions[i * 3] = point.x;
+                positions[i * 3 + 1] = point.y;
+                positions[i * 3 + 2] = point.z;
+            });
+            
+            const geometry = new THREE.BufferGeometry();
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            
+            const material = new THREE.LineBasicMaterial({ 
+                color: color,
+                linewidth: 2
+            });
+            
+            const line = new THREE.Line(geometry, material);
+            line.geometry.setDrawRange(0, 0);
+            this.scene.add(line);
+            this.trails.push(line);
+            
+            // Create sphere for current position
+            const sphereGeometry = new THREE.SphereGeometry(0.05, 16, 16);
+            const sphereMaterial = new THREE.MeshPhongMaterial({ 
+                color: color,
+                emissive: color,
+                emissiveIntensity: 0.5
+            });
+            const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+            sphere.visible = false;
+            this.scene.add(sphere);
+            this.objects.push(sphere);
+        });
+    }
+    
+    play() {
+        this.isPlaying = true;
+    }
+    
+    pause() {
+        this.isPlaying = false;
+    }
+    
+    reset() {
+        this.currentFrame = 0;
+        this.isPlaying = false;
+        this.objects.forEach(obj => obj.visible = false);
+        this.trails.forEach(trail => {
+            trail.geometry.setDrawRange(0, 0);
+        });
+    }
+    
+    setShowTrails(show) {
+        this.showTrails = show;
+        this.trails.forEach(trail => trail.visible = show);
+    }
+    
+    update() {
+        if (this.isPlaying && this.trajectories.length > 0) {
+            this.currentFrame++;
+            
+            // Update each trajectory
+            this.trajectories.forEach((traj, idx) => {
+                const points = traj.points;
+                const currentPoint = points.find(p => p.frame === this.currentFrame);
+                
+                if (currentPoint) {
+                    const obj = this.objects[idx];
+                    obj.position.set(currentPoint.x, currentPoint.y, currentPoint.z);
+                    obj.visible = true;
+                    
+                    // Update trail
+                    if (this.showTrails) {
+                        const trail = this.trails[idx];
+                        const visiblePoints = points.filter(p => p.frame <= this.currentFrame);
+                        trail.geometry.setDrawRange(0, visiblePoints.length);
+                    }
+                }
+            });
+            
+            // Loop animation
+            if (this.currentFrame >= this.maxFrames) {
+                this.currentFrame = 0;
+            }
+        }
+    }
+    
+    animate() {
+        requestAnimationFrame(() => this.animate());
+        
+        this.update();
+        this.renderer.render(this.scene, this.camera);
+    }
+    
+    onWindowResize() {
+        this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+    }
+    
+    destroy() {
+        window.removeEventListener('resize', () => this.onWindowResize());
+        this.renderer.dispose();
+        while(this.container.firstChild) {
+            this.container.removeChild(this.container.firstChild);
+        }
+    }
+}