live-detect-pose

Running

App Files Files Community

mistpe commited on Oct 21, 2024

Commit

a08bbea

verified ·

1 Parent(s): f2d8d0d

Update templates/video_app.html

Browse files

Files changed (1) hide show

templates/video_app.html +662 -601

templates/video_app.html CHANGED Viewed

@@ -1,602 +1,663 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Pose Estimation App</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
-    <style>
-        :root {
-            --primary-color: #4a90e2;
-            --secondary-color: #f5a623;
-            --background-color: #f0f4f8;
-            --card-background: #ffffff;
-            --text-color: #333333;
-            --border-radius: 12px;
-            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            font-family: 'Roboto', sans-serif;
-            background: var(--background-color);
-            color: var(--text-color);
-            line-height: 1.6;
-        }
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        .app-header {
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        .app-title {
-            font-size: 2.5em;
-            color: var(--primary-color);
-            margin-bottom: 10px;
-        }
-        .app-description {
-            font-size: 1.1em;
-            color: var(--text-color);
-            opacity: 0.8;
-        }
-        .card-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 20px;
-        }
-        .card {
-            background: var(--card-background);
-            border-radius: var(--border-radius);
-            box-shadow: var(--box-shadow);
-            overflow: hidden;
-            transition: transform 0.3s ease;
-        }
-        .card:hover {
-            transform: translateY(-5px);
-        }
-        .card-header {
-            background: var(--primary-color);
-            color: white;
-            padding: 15px;
-            font-size: 1.2em;
-            font-weight: bold;
-            display: flex;
-            align-items: center;
-        }
-        .card-header i {
-            margin-right: 10px;
-        }
-        .card-body {
-            padding: 20px;
-        }
-        .view {
-            width: 100%;
-            padding-bottom: 56.25%; /* 16:9 aspect ratio */
-            position: relative;
-            border-radius: var(--border-radius);
-            overflow: hidden;
-        }
-        .view img, .view canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-        .controls {
-            margin-top: 20px;
-        }
-        .slider-container {
-            display: flex;
-            align-items: center;
-            margin-bottom: 15px;
-        }
-        .slider-container label {
-            width: 80px;
-            margin-right: 10px;
-        }
-        .slider {
-            flex-grow: 1;
-            -webkit-appearance: none;
-            height: 5px;
-            background: #d7dcdf;
-            outline: none;
-            opacity: 0.7;
-            transition: opacity .2s;
-            border-radius: 5px;
-        }
-        .slider:hover {
-            opacity: 1;
-        }
-        .slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 18px;
-            height: 18px;
-            background: var(--secondary-color);
-            cursor: pointer;
-            border-radius: 50%;
-        }
-        .btn {
-            padding: 12px 20px;
-            border: none;
-            border-radius: var(--border-radius);
-            background-color: var(--primary-color);
-            color: white;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.1s ease;
-            margin-top: 10px;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1em;
-            font-weight: bold;
-        }
-        .btn:hover {
-            background-color: #3a7bd5;
-            transform: translateY(-2px);
-        }
-        .btn:active {
-            transform: translateY(0);
-        }
-        .btn i {
-            margin-right: 10px;
-        }
-        .chart-container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-around;
-            gap: 20px;
-        }
-        .chart-container canvas {
-            max-width: 100%;
-            height: auto !important;
-        }
-        #message-box {
-            position: fixed;
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: var(--primary-color);
-            color: white;
-            padding: 15px 20px;
-            border-radius: var(--border-radius);
-            z-index: 1000;
-            display: none;
-            box-shadow: var(--box-shadow);
-        }
-        #loading-indicator {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 1000;
-            display: none;
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            padding: 20px;
-            border-radius: var(--border-radius);
-            box-shadow: var(--box-shadow);
-        }
-        #loading-indicator i {
-            margin-right: 10px;
-        }
-        @media (max-width: 1024px) {
-            .card-grid {
-                grid-template-columns: 1fr;
-            }
-            .app-title {
-                font-size: 2em;
-            }
-            .app-description {
-                font-size: 1em;
-            }
-        }
-        @media (max-width: 768px) {
-            .container {
-                padding: 10px;
-            }
-            .card-header {
-                font-size: 1.1em;
-            }
-            .slider-container {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-            .slider-container label {
-                margin-bottom: 5px;
-            }
-            .btn {
-                padding: 10px 15px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="message-box">
-        <span id="message-text"></span>
-    </div>
-    <div id="loading-indicator">
-        <i class="fas fa-spinner fa-spin"></i> Processing...
-    </div>
-    <div class="container">
-        <header class="app-header">
-            <h1 class="app-title">3D Pose Estimation App</h1>
-            <p class="app-description">Analyze and visualize human pose in real-time</p>
-        </header>
-        <div class="card-grid">
-            <div class="card">
-                <div class="card-header">
-                    <i class="fas fa-video"></i> Video Input
-                </div>
-                <div class="card-body">
-                    <div class="view" id="video-container">
-                        <img id="video-feed" src="{{ url_for('video_feed') }}" alt="Video Feed">
-                    </div>
-                    <div class="controls">
-                        <div class="slider-container">
-                            <label for="video-scale"><i class="fas fa-search"></i> Scale:</label>
-                            <input type="range" min="0.5" max="2" step="0.1" value="1" class="slider" id="video-scale" aria-label="Video Scale Slider">
-                        </div>
-                        <label for="video-upload" class="btn">
-                            <i class="fas fa-upload"></i> Upload Video
-                            <input type="file" id="video-upload" accept="video/*" style="display: none;">
-                        </label>
-                    </div>
-                </div>
-            </div>
-            <div class="card">
-                <div class="card-header">
-                    <i class="fas fa-cube"></i> 3D Model Visualization
-                </div>
-                <div class="card-body">
-                    <div class="view" id="model-container"></div>
-                    <div class="controls">
-                        <div class="slider-container">
-                            <label for="model-scale"><i class="fas fa-search"></i> Scale:</label>
-                            <input type="range" min="0.5" max="2" step="0.1" value="1" class="slider" id="model-scale" aria-label="3D Model Scale Slider">
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="card">
-                <div class="card-header">
-                    <i class="fas fa-tachometer-alt"></i> Speed Analysis
-                </div>
-                <div class="card-body">
-                    <canvas id="speedChart" aria-label="Speed Chart" role="img"></canvas>
-                </div>
-            </div>
-            <div class="card">
-                <div class="card-header">
-                    <i class="fas fa-bolt"></i> Acceleration Analysis
-                </div>
-                <div class="card-body">
-                    <canvas id="accelerationChart" aria-label="Acceleration Chart" role="img"></canvas>
-                </div>
-            </div>
-        </div>
-    </div>
-<script>
-    // 连接到Socket.IO服务器
-    const socket = io();
-    // Three.js设置
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0xf0f4f8);
-    const aspect = 4 / 3;
-    const camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000);
-    const renderer = new THREE.WebGLRenderer({ antialias: true });
-    const modelContainer = document.getElementById('model-container');
-    renderer.setSize(modelContainer.clientWidth, modelContainer.clientWidth / aspect);
-    modelContainer.appendChild(renderer.domElement);
-    camera.position.set(0, 0, 1.5);
-    camera.lookAt(0, 0, 0);
-    // 添加灯光
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-    scene.add(ambientLight);
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-    directionalLight.position.set(1, 1, 1);
-    scene.add(directionalLight);
-    // 创建用于标记关键点的球体
-    const spheres = [];
-    for (let i = 0; i < 33; i++) {
-        const geometry = new THREE.SphereGeometry(0.015, 32, 32);
-        const material = new THREE.MeshPhongMaterial({
-            color: 0x3498db,
-            shininess: 100,
-            specular: 0x111111
-        });
-        const sphere = new THREE.Mesh(geometry, material);
-        scene.add(sphere);
-        spheres.push(sphere);
-    }
-    // 创建圆柱体的函数
-    const cylinders = [];
-    function createCylinder(point1, point2) {
-        const direction = new THREE.Vector3().subVectors(point2, point1);
-        const cylinder = new THREE.Mesh(
-            new THREE.CylinderGeometry(0.007, 0.007, direction.length(), 8, 1),
-            new THREE.MeshPhongMaterial({
-                color: 0x2c3e50,
-                shininess: 100,
-                specular: 0x111111
-            })
-        );
-        cylinder.position.copy(point1);
-        cylinder.position.addScaledVector(direction, 0.5);
-        cylinder.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction.normalize());
-        scene.add(cylinder);
-        return cylinder;
-    }
-    // 初始化图表
-    const speedChartCtx = document.getElementById('speedChart').getContext('2d');
-    const accelerationChartCtx = document.getElementById('accelerationChart').getContext('2d');
-    const speedChart = new Chart(speedChartCtx, {
-        type: 'line',
-        data: {
-            labels: [],
-            datasets: [{
-                label: 'Speed',
-                data: [],
-                borderColor: 'rgba(75, 192, 192, 1)',
-                borderWidth: 1,
-                fill: false
-            }]
-        },
-        options: {
-            scales: {
-                y: { beginAtZero: true }
-            }
-        }
-    });
-    const accelerationChart = new Chart(accelerationChartCtx, {
-        type: 'line',
-        data: {
-            labels: [],
-            datasets: [{
-                label: 'Acceleration',
-                data: [],
-                borderColor: 'rgba(255, 99, 132, 1)',
-                borderWidth: 1,
-                fill: false
-            }]
-        },
-        options: {
-            scales: {
-                y: { beginAtZero: true }
-            }
-        }
-    });
-    // 更新图表的函数
-    function updateChart(chart, newData) {
-        const currentTime = new Date().toLocaleTimeString();
-        chart.data.labels.push(currentTime);
-        chart.data.datasets.forEach((dataset) => {
-            dataset.data.push(newData.reduce((a, b) => a + b, 0) / newData.length);
-        });
-        chart.update();
-    }
-    // 监听从服务器发送的pose_data事件
-    socket.on('pose_data', function(data) {
-        // 更新3D模型
-        const landmarks = data.landmarks;
-        landmarks.forEach((coord, index) => {
-            spheres[index].position.set((coord[0] - 0.5) * 2, -(coord[1] - 0.5) * 2, -coord[2] * 0.5);
-        });
-        // 清除现有的圆柱体
-        cylinders.forEach(cylinder => scene.remove(cylinder));
-        cylinders.length = 0;
-        // 创建新的圆柱体
-        const connections = [
-            // Face
-            [0, 1], [1, 4], [4, 7], [7, 8], [8, 5], [5, 2], [2, 0],
-            [0, 9], [9, 10], [0, 10],
-            // Arms
-            [11, 13], [13, 15], [15, 17], [15, 19], [15, 21],
-            [12, 14], [14, 16], [16, 18], [16, 20], [16, 22],
-            // Body
-            [11, 12], [11, 23], [12, 24], [23, 24],
-            // Legs
-            [23, 25], [25, 27], [27, 29],
-            [24, 26], [26, 28], [28, 30], [28, 32]
-        ];
-        connections.forEach(([i, j]) => {
-            cylinders.push(createCylinder(spheres[i].position, spheres[j].position));
-        });
-        // 更新速度和加速度图表
-        if (data.velocities) {
-            updateChart(speedChart, data.velocities);
-        }
-        if (data.accelerations) {
-            updateChart(accelerationChart, data.accelerations);
-        }
-    });
-    function animate() {
-        requestAnimationFrame(animate);
-        renderer.render(scene, camera);
-    }
-    animate();
-   function showMessage(message) {
-    const messageBox = document.getElementById('message-box');
-    const messageText = document.getElementById('message-text');
-    messageText.textContent = message;
-    messageBox.style.display = 'block';
-    // 2秒后自动隐藏
-    setTimeout(() => {
-        messageBox.style.display = 'none';
-    }, 2000);
-}
-// 视频上传处理
-document.getElementById('video-upload').addEventListener('change', function(e) {
-    const file = e.target.files[0];
-    if (file) {
-        const formData = new FormData();
-        formData.append('video', file);
-        // 显示加载指示器
-        showLoadingIndicator(true);
-        fetch('/upload_video', {
-            method: 'POST',
-            body: formData
-        }).then(response => response.json())
-        .then(data => {
-            showLoadingIndicator(false); // 隐藏加载指示器
-            if (data.success) {
-                showMessage(data.message);
-                document.getElementById('video-feed').src = "{{ url_for('video_feed') }}?" + new Date().getTime();
-            } else {
-                showMessage('Error uploading video');
-            }
-        }).catch(error => {
-            showLoadingIndicator(false); // 隐藏加载指示器
-            showMessage('Upload failed: ' + error.message);
-        });
-    }
-});
-// 切换到相机模式
-document.getElementById('camera-switch').addEventListener('click', function() {
-    showLoadingIndicator(true); // 显示加载指示器
-    fetch('/switch_to_camera', {
-        method: 'POST'
-    }).then(response => response.json())
-    .then(data => {
-        showLoadingIndicator(false); // 隐藏加载指示器
-        if (data.success) {
-            showMessage(data.message);
-            document.getElementById('video-feed').src = "{{ url_for('video_feed') }}?" + new Date().getTime();
-        } else {
-            showMessage('Error switching to camera');
-        }
-    }).catch(error => {
-        showLoadingIndicator(false); // 隐藏加载指示器
-        showMessage('Switch failed: ' + error.message);
-    });
-});
-function showLoadingIndicator(isLoading) {
-    const loadingIndicator = document.getElementById('loading-indicator');
-    loadingIndicator.style.display = isLoading ? 'block' : 'none';
-}
-    // 缩放处理
-    document.getElementById('video-scale').addEventListener('input', function(e) {
-        document.getElementById('video-feed').style.transform = `scale(${e.target.value})`;
-    });
-    document.getElementById('model-scale').addEventListener('input', function(e) {
-        const newWidth = modelContainer.clientWidth * e.target.value;
-        const newHeight = newWidth / aspect;
-        renderer.setSize(newWidth, newHeight);
-    });
-    // 窗口大小调整处理
-    window.addEventListener('resize', function() {
-        const width = modelContainer.clientWidth;
-        const height = width / aspect;
-        camera.aspect = aspect;
-        camera.updateProjectionMatrix();
-        renderer.setSize(width, height);
-    });
-   navigator.mediaDevices.getUserMedia({
-    video: {
-        facingMode: 'user',
-        width: { ideal: 640 },
-        height: { ideal: 480 },
-        frameRate: { ideal: 15 }
-    }
-})
-.then(stream => {
-    const video = document.createElement('video');
-    video.srcObject = stream;
-    video.play();
-    const videoFeed = document.getElementById('video-feed');
-    videoFeed.srcObject = stream;
-    videoFeed.play();
-})
-.catch(error => {
-    console.error('Error accessing camera: ', error);
-});
-</script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Pose Estimation App</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #4a90e2;
+            --secondary-color: #f5a623;
+            --background-color: #f0f4f8;
+            --card-background: #ffffff;
+            --text-color: #333333;
+            --border-radius: 12px;
+            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: var(--background-color);
+            color: var(--text-color);
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .app-header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .app-title {
+            font-size: 2.5em;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }
+        .app-description {
+            font-size: 1.1em;
+            color: var(--text-color);
+            opacity: 0.8;
+        }
+        .card-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+        }
+        .card {
+            background: var(--card-background);
+            border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
+            overflow: hidden;
+            transition: transform 0.3s ease;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+        }
+        .card-header {
+            background: var(--primary-color);
+            color: white;
+            padding: 15px;
+            font-size: 1.2em;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+        }
+        .card-header i {
+            margin-right: 10px;
+        }
+        .card-body {
+            padding: 20px;
+        }
+        .view {
+            width: 100%;
+            padding-bottom: 56.25%; /* 16:9 aspect ratio */
+            position: relative;
+            border-radius: var(--border-radius);
+            overflow: hidden;
+        }
+        .view img, .view canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+        .controls {
+            margin-top: 20px;
+        }
+        .slider-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .slider-container label {
+            width: 80px;
+            margin-right: 10px;
+        }
+        .slider {
+            flex-grow: 1;
+            -webkit-appearance: none;
+            height: 5px;
+            background: #d7dcdf;
+            outline: none;
+            opacity: 0.7;
+            transition: opacity .2s;
+            border-radius: 5px;
+        }
+        .slider:hover {
+            opacity: 1;
+        }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            background: var(--secondary-color);
+            cursor: pointer;
+            border-radius: 50%;
+        }
+        .btn {
+            padding: 12px 20px;
+            border: none;
+            border-radius: var(--border-radius);
+            background-color: var(--primary-color);
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.1s ease;
+            margin-top: 10px;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1em;
+            font-weight: bold;
+        }
+        .btn:hover {
+            background-color: #3a7bd5;
+            transform: translateY(-2px);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        .btn i {
+            margin-right: 10px;
+        }
+        .chart-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            gap: 20px;
+        }
+        .chart-container canvas {
+            max-width: 100%;
+            height: auto !important;
+        }
+        #message-box {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--primary-color);
+            color: white;
+            padding: 15px 20px;
+            border-radius: var(--border-radius);
+            z-index: 1000;
+            display: none;
+            box-shadow: var(--box-shadow);
+        }
+        #loading-indicator {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1000;
+            display: none;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 20px;
+            border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
+        }
+        #loading-indicator i {
+            margin-right: 10px;
+        }
+        @media (max-width: 1024px) {
+            .card-grid {
+                grid-template-columns: 1fr;
+            }
+            .app-title {
+                font-size: 2em;
+            }
+            .app-description {
+                font-size: 1em;
+            }
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            .card-header {
+                font-size: 1.1em;
+            }
+            .slider-container {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .slider-container label {
+                margin-bottom: 5px;
+            }
+            .btn {
+                padding: 10px 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="message-box">
+        <span id="message-text"></span>
+    </div>
+    <div id="loading-indicator">
+        <i class="fas fa-spinner fa-spin"></i> Processing...
+    </div>
+    <div class="container">
+        <header class="app-header">
+            <h1 class="app-title">3D Pose Estimation App</h1>
+            <p class="app-description">Analyze and visualize human pose in real-time</p>
+        </header>
+        <div class="card-grid">
+            <div class="card">
+                <div class="card-header">
+                    <i class="fas fa-video"></i> Video Input
+                </div>
+                <div class="card-body">
+                    <div class="view" id="video-container">
+                        <img id="video-feed" src="{{ url_for('video_feed') }}" alt="Video Feed">
+                    </div>
+                    <div class="controls">
+                        <div class="slider-container">
+                            <label for="video-scale"><i class="fas fa-search"></i> Scale:</label>
+                            <input type="range" min="0.5" max="2" step="0.1" value="1" class="slider" id="video-scale" aria-label="Video Scale Slider">
+                        </div>
+                        <label for="video-upload" class="btn">
+                            <i class="fas fa-upload"></i> Upload Video
+                            <input type="file" id="video-upload" accept="video/*" style="display: none;">
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header">
+                    <i class="fas fa-cube"></i> 3D Model Visualization
+                </div>
+                <div class="card-body">
+                    <div class="view" id="model-container"></div>
+                    <div class="controls">
+                        <div class="slider-container">
+                            <label for="model-scale"><i class="fas fa-search"></i> Scale:</label>
+                            <input type="range" min="0.5" max="2" step="0.1" value="1" class="slider" id="model-scale" aria-label="3D Model Scale Slider">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header">
+                    <i class="fas fa-tachometer-alt"></i> Speed Analysis
+                </div>
+                <div class="card-body">
+                    <canvas id="speedChart" aria-label="Speed Chart" role="img"></canvas>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header">
+                    <i class="fas fa-bolt"></i> Acceleration Analysis
+                </div>
+                <div class="card-body">
+                    <canvas id="accelerationChart" aria-label="Acceleration Chart" role="img"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+<script>
+// Three.js setup
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xf0f4f8);
+const aspect = 4 / 3;
+const camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+const modelContainer = document.getElementById('model-container');
+renderer.setSize(modelContainer.clientWidth, modelContainer.clientWidth / aspect);
+modelContainer.appendChild(renderer.domElement);
+camera.position.set(0, 0, 1.5);
+camera.lookAt(0, 0, 0);
+// Add lighting
+const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+scene.add(ambientLight);
+const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+directionalLight.position.set(1, 1, 1);
+scene.add(directionalLight);
+// Create spheres for keypoints
+const spheres = [];
+for (let i = 0; i < 33; i++) {
+    const geometry = new THREE.SphereGeometry(0.015, 32, 32);
+    const material = new THREE.MeshPhongMaterial({
+        color: 0x3498db,
+        shininess: 100,
+        specular: 0x111111
+    });
+    const sphere = new THREE.Mesh(geometry, material);
+    scene.add(sphere);
+    spheres.push(sphere);
+}
+// Function to create cylinders
+const cylinders = [];
+function createCylinder(point1, point2) {
+    const direction = new THREE.Vector3().subVectors(point2, point1);
+    const cylinder = new THREE.Mesh(
+        new THREE.CylinderGeometry(0.007, 0.007, direction.length(), 8, 1),
+        new THREE.MeshPhongMaterial({
+            color: 0x2c3e50,
+            shininess: 100,
+            specular: 0x111111
+        })
+    );
+    cylinder.position.copy(point1);
+    cylinder.position.addScaledVector(direction, 0.5);
+    cylinder.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction.normalize());
+    scene.add(cylinder);
+    return cylinder;
+}
+// Initialize charts
+const speedChartCtx = document.getElementById('speedChart').getContext('2d');
+const accelerationChartCtx = document.getElementById('accelerationChart').getContext('2d');
+const speedChart = new Chart(speedChartCtx, {
+    type: 'line',
+    data: {
+        labels: [],
+        datasets: [{
+            label: 'Speed',
+            data: [],
+            borderColor: 'rgba(75, 192, 192, 1)',
+            borderWidth: 1,
+            fill: false
+        }]
+    },
+    options: {
+        scales: {
+            y: { beginAtZero: true }
+        },
+        animation: false
+    }
+});
+const accelerationChart = new Chart(accelerationChartCtx, {
+    type: 'line',
+    data: {
+        labels: [],
+        datasets: [{
+            label: 'Acceleration',
+            data: [],
+            borderColor: 'rgba(255, 99, 132, 1)',
+            borderWidth: 1,
+            fill: false
+        }]
+    },
+    options: {
+        scales: {
+            y: { beginAtZero: true }
+        },
+        animation: false
+    }
+});
+// Global variables
+let allResults = [];
+let currentFrame = 0;
+let fps = 30;
+let isPlaying = false;
+let videoElement;
+// Function to update 3D model
+function update3DModel(landmarks) {
+    landmarks.forEach((coord, index) => {
+        spheres[index].position.set((coord[0] - 0.5) * 2, -(coord[1] - 0.5) * 2, -coord[2] * 0.5);
+    });
+    // Clear existing cylinders
+    cylinders.forEach(cylinder => scene.remove(cylinder));
+    cylinders.length = 0;
+    // Create new cylinders
+    const connections = [
+        // Face
+        [0, 1], [1, 4], [4, 7], [7, 8], [8, 5], [5, 2], [2, 0],
+        [0, 9], [9, 10], [0, 10],
+        // Arms
+        [11, 13], [13, 15], [15, 17], [15, 19], [15, 21],
+        [12, 14], [14, 16], [16, 18], [16, 20], [16, 22],
+        // Body
+        [11, 12], [11, 23], [12, 24], [23, 24],
+        // Legs
+        [23, 25], [25, 27], [27, 29],
+        [24, 26], [26, 28], [28, 30], [28, 32]
+    ];
+    connections.forEach(([i, j]) => {
+        cylinders.push(createCylinder(spheres[i].position, spheres[j].position));
+    });
+}
+// Function to update charts
+function updateCharts(frame) {
+    const frameData = allResults[frame];
+    if (frameData) {
+        speedChart.data.labels.push(frame);
+        speedChart.data.datasets[0].data.push(frameData.velocities.reduce((a, b) => a + b, 0) / frameData.velocities.length);
+        accelerationChart.data.labels.push(frame);
+        accelerationChart.data.datasets[0].data.push(frameData.accelerations.reduce((a, b) => a + b, 0) / frameData.accelerations.length);
+        // Keep only the last 100 data points
+        if (speedChart.data.labels.length > 100) {
+            speedChart.data.labels.shift();
+            speedChart.data.datasets[0].data.shift();
+        }
+        if (accelerationChart.data.labels.length > 100) {
+            accelerationChart.data.labels.shift();
+            accelerationChart.data.datasets[0].data.shift();
+        }
+        speedChart.update();
+        accelerationChart.update();
+    }
+}
+// Function to animate the scene
+function animate() {
+    requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+    if (isPlaying && allResults.length > 0) {
+        const frameData = allResults[currentFrame];
+        if (frameData) {
+            update3DModel(frameData.landmarks);
+            updateCharts(currentFrame);
+            currentFrame = (currentFrame + 1) % allResults.length;
+            if (videoElement) {
+                videoElement.currentTime = currentFrame / fps;
+            }
+        }
+    }
+}
+// Start animation
+animate();
+// Function to show messages
+function showMessage(message) {
+    const messageBox = document.getElementById('message-box');
+    const messageText = document.getElementById('message-text');
+    messageText.textContent = message;
+    messageBox.style.display = 'block';
+    setTimeout(() => {
+        messageBox.style.display = 'none';
+    }, 2000);
+}
+// Function to show/hide loading indicator
+function showLoadingIndicator(isLoading) {
+    const loadingIndicator = document.getElementById('loading-indicator');
+    loadingIndicator.style.display = isLoading ? 'block' : 'none';
+}
+// Video upload handling
+document.getElementById('video-upload').addEventListener('change', function(e) {
+    const file = e.target.files[0];
+    if (file) {
+        const formData = new FormData();
+        formData.append('video', file);
+        showLoadingIndicator(true);
+        fetch('/upload_video', {
+            method: 'POST',
+            body: formData
+        }).then(response => response.json())
+        .then(data => {
+            showLoadingIndicator(false);
+            if (data.success) {
+                showMessage(data.message);
+                loadResults();
+            } else {
+                showMessage('Error uploading video');
+            }
+        }).catch(error => {
+            showLoadingIndicator(false);
+            showMessage('Upload failed: ' + error.message);
+        });
+    }
+});
+// Function to load results
+function loadResults() {
+    fetch('/get_results')
+        .then(response => response.json())
+        .then(data => {
+            allResults = data.results;
+            fps = data.fps;
+            currentFrame = 0;
+            // Reset charts
+            speedChart.data.labels = [];
+            speedChart.data.datasets[0].data = [];
+            accelerationChart.data.labels = [];
+            accelerationChart.data.datasets[0].data = [];
+            // Load video
+            videoElement = document.createElement('video');
+            videoElement.src = '/uploads/temp_video.mp4';
+            videoElement.load();
+            const videoContainer = document.getElementById('video-container');
+            videoContainer.innerHTML = '';
+            videoContainer.appendChild(videoElement);
+            // Add play/pause button
+            const playPauseBtn = document.createElement('button');
+            playPauseBtn.textContent = 'Play';
+            playPauseBtn.onclick = togglePlayPause;
+            videoContainer.appendChild(playPauseBtn);
+            showMessage('Video and results loaded successfully');
+        })
+        .catch(error => {
+            showMessage('Error loading results: ' + error.message);
+        });
+}
+// Function to toggle play/pause
+function togglePlayPause() {
+    isPlaying = !isPlaying;
+    const playPauseBtn = document.querySelector('#video-container button');
+   playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play';
+    if (isPlaying) {
+        videoElement.play();
+    } else {
+        videoElement.pause();
+    }
+}
+// Sync video with 3D model and charts
+videoElement.addEventListener('timeupdate', function() {
+    currentFrame = Math.floor(videoElement.currentTime * fps);
+    const frameData = allResults[currentFrame];
+    if (frameData) {
+        update3DModel(frameData.landmarks);
+        updateCharts(currentFrame);
+    }
+});
+// Slider for video and 3D model scale
+document.getElementById('video-scale').addEventListener('input', function(e) {
+    videoElement.style.transform = `scale(${e.target.value})`;
+});
+document.getElementById('model-scale').addEventListener('input', function(e) {
+    const newWidth = modelContainer.clientWidth * e.target.value;
+    const newHeight = newWidth / aspect;
+    renderer.setSize(newWidth, newHeight);
+});
+// Window resize handling
+window.addEventListener('resize', function() {
+    const width = modelContainer.clientWidth;
+    const height = width / aspect;
+    camera.aspect = aspect;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height);
+});
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if there's a previously uploaded video
+    fetch('/get_results')
+        .then(response => {
+            if (response.ok) {
+                return response.json();
+            } else {
+                throw new Error('No previous results found');
+            }
+        })
+        .then(data => {
+            allResults = data.results;
+            fps = data.fps;
+            loadResults();
+        })
+        .catch(error => {
+            console.log('No previous video found. Please upload a new video.');
+        });
+});
+</script>
+</body>
 </html>