HumanCenteredAI/Ollie
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>🏄♂️ Prediction Result</title>7 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">8</head>9<body>10 <div class="container">11 <h1>🏄♂️ <span class="highlight">Prediction Result</span></h1>12 <h2>{{ prediction }}</h2>13 14 <video width="480" controls class="result-video">15 <source src="{{ video_path }}" type="video/mp4">16 </video>17 18 <a href="/multi" class="back">⬅ Back</a>19 </div>20 21 <canvas id="bgCanvas"></canvas>22 23 <script>24 const canvas = document.getElementById('bgCanvas');25 const ctx = canvas.getContext('2d');26 canvas.width = window.innerWidth;27 canvas.height = window.innerHeight;28 let particles = Array(100).fill().map(() => ({29 x: Math.random() * canvas.width,30 y: Math.random() * canvas.height,31 r: Math.random() * 1.5,32 s: Math.random() * 233 }));34 function animate() {35 ctx.fillStyle = 'rgba(15,32,39,0.3)';36 ctx.fillRect(0,0,canvas.width,canvas.height);37 ctx.fillStyle = '#00c6ff';38 particles.forEach(p=>{39 ctx.beginPath();40 ctx.arc(p.x,p.y,p.r,0,Math.PI*2);41 ctx.fill();42 p.y += p.s*0.3;43 if(p.y>canvas.height) p.y=0;44 });45 requestAnimationFrame(animate);46 }47 animate();48 </script>49</body>50</html>51