Hugging Face's logo

Spaces:
foreversheikh
/
ano_app
Running

App Files Community
foreversheikh commited on
Commit
9252ad7
·
verified ·
1 Parent(s): f32a2fc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +60 -65
index.html CHANGED
@@ -1,66 +1,61 @@
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>Real-Time Anomaly Detection</title>
7
- <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
8
- </head>
9
- <body>
10
- <div class="container">
11
- <main class="main-content">
12
- <div class="header">
13
- <h1>Anomaly Detection Dashboard</h1>
14
- <button id="resetButton">Reset</button>
15
- </div>
16
-
17
- <div class="dashboard-grid">
18
-
19
- <div class="video-area">
20
- <div class="video-wrapper">
21
- <video id="videoPlayer" width="100%" controls muted>
22
- Your browser does not support the video tag.
23
- </video>
24
- </div>
25
- <p id="statusLabel">Select a video to begin.</p>
26
- </div>
27
-
28
- <div class="chart-container">
29
- <h3>Live Anomaly Score</h3>
30
- <canvas id="anomalyChart"></canvas>
31
- </div>
32
-
33
- </div>
34
- </main>
35
-
36
- <aside class="sidebar">
37
- <h2>Demo Videos</h2>
38
- <select id="anomalySelector" class="custom-select">
39
- <option value="" disabled selected>Select a Demo Video...</option>
40
- {% for name in anomaly_names %}
41
- <option value="{{ name }}">{{ name }}</option>
42
- {% endfor %}
43
- </select>
44
-
45
- <hr class="separator">
46
- <h2>Upload Your Own</h2>
47
- <div class="upload-section">
48
- <input type="file" id="videoUpload" accept="video/mp4, video/mov, video/avi">
49
- <button id="uploadButton">Analyze Uploaded Video</button>
50
- </div>
51
-
52
- <hr class="separator">
53
-
54
- <div class="yolo-container">
55
- <h3>YOLO Detection Result</h3>
56
- <p id="yoloTextLabel">Waiting for anomaly...</p>
57
- <img id="yoloImageFrame" src="" alt="YOLO Frame Preview">
58
- </div>
59
- </aside>
60
- </div>
61
-
62
- <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
63
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
64
- <script src="{{ url_for('static', filename='js/main.js') }}"></script>
65
- </body>
66
  </html>
 
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>Real-Time Anomaly Detection</title>
7
+
8
+ <link rel="stylesheet" href="style.css">
9
+
10
+ </head>
11
+ <body>
12
+ <div class="container">
13
+ <main class="main-content">
14
+ <div class="header">
15
+ <h1>Anomaly Detection Dashboard</h1>
16
+ <button id="resetButton">Reset</button>
17
+ </div>
18
+ <div class="dashboard-grid">
19
+ <div class="video-area">
20
+ <div class="video-wrapper">
21
+ <video id="videoPlayer" width="100%" controls muted>
22
+ Your browser does not support the video tag.
23
+ </video>
24
+ </div>
25
+ <p id="statusLabel">Select a video to begin.</p>
26
+ </div>
27
+ <div class="chart-container">
28
+ <h3>Live Anomaly Score</h3>
29
+ <canvas id="anomalyChart"></canvas>
30
+ </div>
31
+ </div>
32
+ </main>
33
+ <aside class="sidebar">
34
+ <h2>Demo Videos</h2>
35
+ <select id="anomalySelector" class="custom-select">
36
+ <option value="" disabled selected>Select a Demo Video...</option>
37
+ {% for name in anomaly_names %}
38
+ <option value="{{ name }}">{{ name }}</option>
39
+ {% endfor %}
40
+ </select>
41
+ <hr class="separator">
42
+ <h2>Upload Your Own</h2>
43
+ <div class="upload-section">
44
+ <input type="file" id="videoUpload" accept="video/mp4, video/mov, video/avi">
45
+ <button id="uploadButton">Analyze Uploaded Video</button>
46
+ </div>
47
+ <hr class="separator">
48
+ <div class="yolo-container">
49
+ <h3>YOLO Detection Result</h3>
50
+ <p id="yoloTextLabel">Waiting for anomaly...</p>
51
+ <img id="yoloImageFrame" src="" alt="YOLO Frame Preview">
52
+ </div>
53
+ </aside>
54
+ </div>
55
+
56
+ <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
57
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
58
+
59
+ <script src="main.js"></script>
60
+ </body>
 
 
 
 
 
61
  </html>