Hugging Face's logo

Spaces:
Fred808
/
Vis1
Paused

App Files Community
Fred808 commited on
Commit
00f2189
·
verified ·
1 Parent(s): a9605a0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +201 -203
index.html CHANGED
@@ -1,203 +1,201 @@
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
- <meta name="description" content="Advanced web-based dashboard for monitoring and managing cursor tracking operations on video datasets. Real-time processing status, file management, and control interface.">
7
- <meta name="keywords" content="cursor tracking, video processing, dashboard, monitoring, API interface">
8
- <meta name="author" content="Cursor Tracking Dashboard">
9
- <title>Cursor Tracking Dashboard - Real-time Video Processing Monitor</title>
10
- <link rel="stylesheet" href="/static/style.css">
11
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
12
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
- </head>
14
- <body>
15
- <div class="container">
16
- <!-- Header -->
17
- <header class="header">
18
- <div class="header-content">
19
- <div class="logo">
20
- <i class="fas fa-mouse-pointer"></i>
21
- <h1>Cursor Tracking Dashboard</h1>
22
- </div>
23
- <div class="header-actions">
24
- <button id="refreshBtn" class="btn btn-secondary">
25
- <i class="fas fa-sync-alt"></i>
26
- Refresh
27
- </button>
28
- <div class="theme-toggle">
29
- <button id="themeToggle" class="btn btn-icon">
30
- <i class="fas fa-moon"></i>
31
- </button>
32
- </div>
33
- </div>
34
- </div>
35
- </header>
36
-
37
- <!-- Main Content -->
38
- <main class="main-content">
39
- <!-- Status Section -->
40
- <section class="status-section">
41
- <div class="card">
42
- <div class="card-header">
43
- <h2><i class="fas fa-chart-line"></i> Processing Status</h2>
44
- <div class="status-indicator" id="statusIndicator">
45
- <span class="status-dot"></span>
46
- <span class="status-text">Loading...</span>
47
- </div>
48
- </div>
49
- <div class="card-content">
50
- <div class="stats-grid">
51
- <div class="stat-item">
52
- <div class="stat-value" id="totalFiles">-</div>
53
- <div class="stat-label">Total Files</div>
54
- </div>
55
- <div class="stat-item">
56
- <div class="stat-value" id="processedFiles">-</div>
57
- <div class="stat-label">Processed</div>
58
- </div>
59
- <div class="stat-item">
60
- <div class="stat-value" id="extractedCourses">-</div>
61
- <div class="stat-label">Courses</div>
62
- </div>
63
- <div class="stat-item">
64
- <div class="stat-value" id="extractedVideos">-</div>
65
- <div class="stat-label">Videos</div>
66
- </div>
67
- <div class="stat-item">
68
- <div class="stat-value" id="extractedFrames">-</div>
69
- <div class="stat-label">Frames</div>
70
- </div>
71
- <div class="stat-item">
72
- <div class="stat-value" id="trackedCursors">-</div>
73
- <div class="stat-label">Cursors Tracked</div>
74
- </div>
75
- </div>
76
-
77
- <div class="progress-section">
78
- <div class="progress-info">
79
- <span>Current File:</span>
80
- <span id="currentFile" class="current-file">None</span>
81
- </div>
82
- <div class="progress-bar">
83
- <div class="progress-fill" id="progressFill"></div>
84
- </div>
85
- <div class="progress-text" id="progressText">0%</div>
86
- </div>
87
- </div>
88
- </div>
89
- </section>
90
-
91
- <!-- Control Section -->
92
- <section class="control-section">
93
- <div class="card">
94
- <div class="card-header">
95
- <h2><i class="fas fa-cogs"></i> Processing Controls</h2>
96
- </div>
97
- <div class="card-content">
98
- <div class="control-group">
99
- <div class="input-group">
100
- <label for="startIndex">Start Index for RAR Fetching:</label>
101
- <input type="number" id="startIndex" min="0" value="0" class="input">
102
- <span class="input-help">Specify which index to start processing from</span>
103
- </div>
104
- <div class="button-group">
105
- <button id="startProcessing" class="btn btn-primary">
106
- <i class="fas fa-play"></i>
107
- Start Processing
108
- </button>
109
- <button id="stopProcessing" class="btn btn-danger">
110
- <i class="fas fa-stop"></i>
111
- Stop Processing
112
- </button>
113
- </div>
114
- </div>
115
- </div>
116
- </div>
117
- </section>
118
-
119
- <!-- Cursor Data Files Section -->
120
- <section class="files-section">
121
- <div class="card">
122
- <div class="card-header">
123
- <h2><i class="fas fa-file-alt"></i> Cursor Tracking Results</h2>
124
- <div class="file-count" id="fileCount">0 files</div>
125
- </div>
126
- <div class="card-content">
127
- <div class="files-grid" id="filesGrid">
128
- <!-- Files will be populated here -->
129
- </div>
130
- </div>
131
- </div>
132
- </section>
133
-
134
- <!-- Logs Section -->
135
- <section class="logs-section">
136
- <div class="card">
137
- <div class="card-header">
138
- <h2><i class="fas fa-terminal"></i> Processing Logs</h2>
139
- <div class="log-controls">
140
- <button id="clearLogs" class="btn btn-secondary btn-sm">
141
- <i class="fas fa-trash"></i>
142
- Clear
143
- </button>
144
- <button id="autoScroll" class="btn btn-secondary btn-sm active">
145
- <i class="fas fa-arrow-down"></i>
146
- Auto-scroll
147
- </button>
148
- </div>
149
- </div>
150
- <div class="card-content">
151
- <div class="logs-container" id="logsContainer">
152
- <div class="log-entry">
153
- <span class="log-time">[Loading...]</span>
154
- <span class="log-message">Initializing dashboard...</span>
155
- </div>
156
- </div>
157
- </div>
158
- </div>
159
- </section>
160
- </main>
161
- </div>
162
-
163
- <!-- File Details Modal -->
164
- <div id="fileModal" class="modal">
165
- <div class="modal-content">
166
- <div class="modal-header">
167
- <h3 id="modalTitle">File Details</h3>
168
- <button class="modal-close" id="modalClose">
169
- <i class="fas fa-times"></i>
170
- </button>
171
- </div>
172
- <div class="modal-body" id="modalBody">
173
- <!-- File details will be populated here -->
174
- </div>
175
- <div class="modal-footer">
176
- <button id="downloadFile" class="btn btn-primary">
177
- <i class="fas fa-download"></i>
178
- Download JSON
179
- </button>
180
- <button id="viewFrames" class="btn btn-secondary">
181
- <i class="fas fa-images"></i>
182
- View Frames
183
- </button>
184
- </div>
185
- </div>
186
- </div>
187
-
188
- <!-- Loading Overlay -->
189
- <div id="loadingOverlay" class="loading-overlay">
190
- <div class="loading-spinner">
191
- <i class="fas fa-spinner fa-spin"></i>
192
- <p>Loading...</p>
193
- </div>
194
- </div>
195
-
196
- <!-- Toast Notifications -->
197
- <div id="toastContainer" class="toast-container"></div>
198
-
199
-
200
- <script src="/static/script.js"></script>
201
- </body>
202
- </html>
203
-
 
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
+ <meta name="description" content="Advanced web-based dashboard for monitoring and managing video analysis operations. Real-time processing status, file management, and control interface.">
7
+ <meta name="keywords" content="video analysis, vision processing, dashboard, monitoring, API interface">
8
+ <meta name="author" content="Video Analysis Dashboard">
9
+ <title>Video Analysis Dashboard - Real-time Processing Monitor</title>
10
+ <link rel="stylesheet" href="/static/style.css">
11
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ </head>
14
+ <body>
15
+ <div class="container">
16
+ <!-- Header -->
17
+ <header class="header">
18
+ <div class="header-content">
19
+ <div class="logo">
20
+ <i class="fas fa-eye"></i>
21
+ <h1>Video Analysis Dashboard</h1>
22
+ </div>
23
+ <div class="header-actions">
24
+ <button id="refreshBtn" class="btn btn-secondary">
25
+ <i class="fas fa-sync-alt"></i>
26
+ Refresh
27
+ </button>
28
+ <div class="theme-toggle">
29
+ <button id="themeToggle" class="btn btn-icon">
30
+ <i class="fas fa-moon"></i>
31
+ </button>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </header>
36
+
37
+ <!-- Main Content -->
38
+ <main class="main-content">
39
+ <!-- Status Section -->
40
+ <section class="status-section">
41
+ <div class="card">
42
+ <div class="card-header">
43
+ <h2><i class="fas fa-chart-line"></i> Processing Status</h2>
44
+ <div class="status-indicator" id="statusIndicator">
45
+ <span class="status-dot"></span>
46
+ <span class="status-text">Loading...</span>
47
+ </div>
48
+ </div>
49
+ <div class="card-content">
50
+ <div class="stats-grid">
51
+ <div class="stat-item">
52
+ <div class="stat-value" id="totalFiles">-</div>
53
+ <div class="stat-label">Total Files</div>
54
+ </div>
55
+ <div class="stat-item">
56
+ <div class="stat-value" id="processedFiles">-</div>
57
+ <div class="stat-label">Processed</div>
58
+ </div>
59
+ <div class="stat-item">
60
+ <div class="stat-value" id="extractedCourses">-</div>
61
+ <div class="stat-label">Courses</div>
62
+ </div>
63
+ <div class="stat-item">
64
+ <div class="stat-value" id="extractedVideos">-</div>
65
+ <div class="stat-label">Videos</div>
66
+ </div>
67
+ <div class="stat-item">
68
+ <div class="stat-value" id="extractedFrames">-</div>
69
+ <div class="stat-label">Frames</div>
70
+ </div>
71
+ <div class="stat-item">
72
+ <div class="stat-value" id="analyzedFrames">-</div>
73
+ <div class="stat-label">Frames Analyzed</div>
74
+ </div>
75
+ </div>
76
+
77
+ <div class="progress-section">
78
+ <div class="progress-info">
79
+ <span>Current File:</span>
80
+ <span id="currentFile" class="current-file">None</span>
81
+ </div>
82
+ <div class="progress-bar">
83
+ <div class="progress-fill" id="progressFill"></div>
84
+ </div>
85
+ <div class="progress-text" id="progressText">0%</div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Control Section -->
92
+ <section class="control-section">
93
+ <div class="card">
94
+ <div class="card-header">
95
+ <h2><i class="fas fa-cogs"></i> Processing Controls</h2>
96
+ </div>
97
+ <div class="card-content">
98
+ <div class="control-group">
99
+ <div class="input-group">
100
+ <label for="startIndex">Start Index for RAR Fetching:</label>
101
+ <input type="number" id="startIndex" min="0" value="0" class="input">
102
+ <span class="input-help">Specify which index to start processing from</span>
103
+ </div>
104
+ <div class="button-group">
105
+ <button id="startProcessing" class="btn btn-primary">
106
+ <i class="fas fa-play"></i>
107
+ Start Processing
108
+ </button>
109
+ <button id="stopProcessing" class="btn btn-danger">
110
+ <i class="fas fa-stop"></i>
111
+ Stop Processing
112
+ </button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Analysis Data Files Section -->
120
+ <section class="files-section">
121
+ <div class="card">
122
+ <div class="card-header">
123
+ <h2><i class="fas fa-file-alt"></i> Analysis Results</h2>
124
+ <div class="file-count" id="fileCount">0 files</div>
125
+ </div>
126
+ <div class="card-content">
127
+ <div class="files-grid" id="filesGrid">
128
+ <!-- Files will be populated here -->
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Logs Section -->
135
+ <section class="logs-section">
136
+ <div class="card">
137
+ <div class="card-header">
138
+ <h2><i class="fas fa-terminal"></i> Processing Logs</h2>
139
+ <div class="log-controls">
140
+ <button id="clearLogs" class="btn btn-secondary btn-sm">
141
+ <i class="fas fa-trash"></i>
142
+ Clear
143
+ </button>
144
+ <button id="autoScroll" class="btn btn-secondary btn-sm active">
145
+ <i class="fas fa-arrow-down"></i>
146
+ Auto-scroll
147
+ </button>
148
+ </div>
149
+ </div>
150
+ <div class="card-content">
151
+ <div class="logs-container" id="logsContainer">
152
+ <div class="log-entry">
153
+ <span class="log-time">[Loading...]</span>
154
+ <span class="log-message">Initializing dashboard...</span>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </section>
160
+ </main>
161
+ </div>
162
+
163
+ <!-- File Details Modal -->
164
+ <div id="fileModal" class="modal">
165
+ <div class="modal-content">
166
+ <div class="modal-header">
167
+ <h3 id="modalTitle">Analysis Details</h3>
168
+ <button class="modal-close" id="modalClose">
169
+ <i class="fas fa-times"></i>
170
+ </button>
171
+ </div>
172
+ <div class="modal-body" id="modalBody">
173
+ <!-- Analysis details will be populated here -->
174
+ </div>
175
+ <div class="modal-footer">
176
+ <button id="downloadFile" class="btn btn-primary">
177
+ <i class="fas fa-download"></i>
178
+ Download JSON
179
+ </button>
180
+ <button id="viewSummary" class="btn btn-secondary">
181
+ <i class="fas fa-list-alt"></i>
182
+ View Summary
183
+ </button>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Loading Overlay -->
189
+ <div id="loadingOverlay" class="loading-overlay">
190
+ <div class="loading-spinner">
191
+ <i class="fas fa-spinner fa-spin"></i>
192
+ <p>Loading...</p>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Toast Notifications -->
197
+ <div id="toastContainer" class="toast-container"></div>
198
+
199
+ <script src="/static/script.js"></script>
200
+ </body>
201
+ </html>