Spaces:
No application file
No application file
File size: 2,303 Bytes
5229a53 308500d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Anomaly Detection</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<main class="main-content">
<div class="header">
<h1>Anomaly Detection Dashboard</h1>
<button id="resetButton">Reset</button>
</div>
<div class="dashboard-grid">
<div class="video-area">
<div class="video-wrapper">
<video id="videoPlayer" width="100%" controls muted>
Your browser does not support the video tag.
</video>
</div>
<p id="statusLabel">Select a video to begin.</p>
</div>
<div class="chart-container">
<h3>Live Anomaly Score</h3>
<canvas id="anomalyChart"></canvas>
</div>
</div>
</main>
<aside class="sidebar">
<h2>Demo Videos</h2>
<select id="anomalySelector" class="custom-select">
<option value="" disabled selected>Select a Demo Video...</option>
{% for name in anomaly_names %}
<option value="{{ name }}">{{ name }}</option>
{% endfor %}
</select>
<hr class="separator">
<h2>Upload Your Own</h2>
<div class="upload-section">
<input type="file" id="videoUpload" accept="video/mp4, video/mov, video/avi">
<button id="uploadButton">Analyze Uploaded Video</button>
</div>
<hr class="separator">
<div class="yolo-container">
<h3>YOLO Detection Result</h3>
<p id="yoloTextLabel">Waiting for anomaly...</p>
<img id="yoloImageFrame" src="" alt="YOLO Frame Preview">
</div>
</aside>
</div>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="main.js"></script>
</body>
</html> |