Hugging Face's logo

Spaces:
Fred808
/
FCORD
Paused

App Files Community
Fred808 commited on
Commit
e5b0ce2
·
verified ·
1 Parent(s): 708ee50

Create index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +229 -0
templates/index.html ADDED
@@ -0,0 +1,229 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Flow Server {{ flow_id }} - Control Panel</title>
7
+ <style>
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 20px;
12
+ background-color: #f4f7f9;
13
+ color: #333;
14
+ }
15
+ .container {
16
+ max-width: 1200px;
17
+ margin: auto;
18
+ background-color: #fff;
19
+ padding: 30px;
20
+ border-radius: 12px;
21
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
22
+ }
23
+ h1 {
24
+ color: #007bff;
25
+ border-bottom: 2px solid #eee;
26
+ padding-bottom: 10px;
27
+ margin-bottom: 20px;
28
+ }
29
+ .status-box {
30
+ display: flex;
31
+ flex-wrap: wrap;
32
+ gap: 20px;
33
+ margin-bottom: 30px;
34
+ }
35
+ .stat-card {
36
+ background-color: #e9ecef;
37
+ padding: 15px 20px;
38
+ border-radius: 8px;
39
+ flex: 1;
40
+ min-width: 200px;
41
+ }
42
+ .stat-card h3 {
43
+ margin-top: 0;
44
+ font-size: 1.1em;
45
+ color: #555;
46
+ }
47
+ .stat-card p {
48
+ font-size: 1.8em;
49
+ font-weight: bold;
50
+ margin: 5px 0 0 0;
51
+ color: #007bff;
52
+ }
53
+ .control-panel {
54
+ display: flex;
55
+ gap: 20px;
56
+ margin-bottom: 30px;
57
+ padding: 20px;
58
+ border: 1px solid #ddd;
59
+ border-radius: 8px;
60
+ background-color: #f8f9fa;
61
+ }
62
+ .control-panel form {
63
+ display: flex;
64
+ gap: 10px;
65
+ align-items: center;
66
+ }
67
+ .control-panel input[type="number"] {
68
+ padding: 8px;
69
+ border: 1px solid #ccc;
70
+ border-radius: 4px;
71
+ width: 150px;
72
+ }
73
+ .control-panel button {
74
+ padding: 10px 15px;
75
+ border: none;
76
+ border-radius: 4px;
77
+ cursor: pointer;
78
+ font-weight: bold;
79
+ transition: background-color 0.3s;
80
+ }
81
+ .btn-primary {
82
+ background-color: #28a745;
83
+ color: white;
84
+ }
85
+ .btn-primary:hover {
86
+ background-color: #218838;
87
+ }
88
+ .btn-danger {
89
+ background-color: #dc3545;
90
+ color: white;
91
+ }
92
+ .btn-danger:hover {
93
+ background-color: #c82333;
94
+ }
95
+ .btn-info {
96
+ background-color: #17a2b8;
97
+ color: white;
98
+ }
99
+ .btn-info:hover {
100
+ background-color: #138496;
101
+ }
102
+ .server-stats table {
103
+ width: 100%;
104
+ border-collapse: collapse;
105
+ margin-top: 20px;
106
+ }
107
+ .server-stats th, .server-stats td {
108
+ border: 1px solid #ddd;
109
+ padding: 10px;
110
+ text-align: left;
111
+ }
112
+ .server-stats th {
113
+ background-color: #007bff;
114
+ color: white;
115
+ font-weight: normal;
116
+ }
117
+ .server-stats tr:nth-child(even) {
118
+ background-color: #f8f9fa;
119
+ }
120
+ .server-stats .busy-true {
121
+ background-color: #fff3cd;
122
+ }
123
+ .current-status {
124
+ padding: 15px;
125
+ background-color: #e9f7ef;
126
+ border: 1px solid #d4edda;
127
+ color: #155724;
128
+ border-radius: 8px;
129
+ margin-bottom: 20px;
130
+ font-size: 1.1em;
131
+ }
132
+ .current-status strong {
133
+ color: #007bff;
134
+ }
135
+ </style>
136
+ <script>
137
+ // Function to refresh the page every 5 seconds
138
+ function autoRefresh() {
139
+ setTimeout(function() {
140
+ window.location.reload();
141
+ }, 5000); // 5000 milliseconds = 5 seconds
142
+ }
143
+
144
+ // Call the function when the page loads
145
+ window.onload = autoRefresh;
146
+ </script>
147
+ </head>
148
+ <body>
149
+ <div class="container">
150
+ <h1>Flow Server {{ flow_id }} Control Panel</h1>
151
+
152
+ <div class="current-status">
153
+ <strong>Current Status:</strong> {{ status }} ({{ "RUNNING" if is_running else "STOPPED" }})
154
+ <br>
155
+ <strong>Current File:</strong> {{ current_file }} ({{ current_file_progress }})
156
+ <br>
157
+ <small>Last Updated: {{ last_update }}</small>
158
+ </div>
159
+
160
+ <div class="status-box">
161
+ <div class="stat-card">
162
+ <h3>Total Files</h3>
163
+ <p>{{ total_files }}</p>
164
+ </div>
165
+ <div class="stat-card">
166
+ <h3>Processed Files</h3>
167
+ <p>{{ processed_count }}</p>
168
+ </div>
169
+ <div class="stat-card">
170
+ <h3>Remaining Files</h3>
171
+ <p>{{ remaining_count }}</p>
172
+ </div>
173
+ <div class="stat-card">
174
+ <h3>Current Index</h3>
175
+ <p>{{ current_index }}</p>
176
+ </div>
177
+ <div class="stat-card">
178
+ <h3>Overall FPS</h3>
179
+ <p>{{ overall_fps }}</p>
180
+ </div>
181
+ </div>
182
+
183
+ <h2>Control Panel</h2>
184
+ <div class="control-panel">
185
+ <!-- Start/Stop Form -->
186
+ <form method="POST" action="/control_processing">
187
+ {% if is_running %}
188
+ <input type="hidden" name="action" value="stop">
189
+ <button type="submit" class="btn-danger">STOP Processing</button>
190
+ {% else %}
191
+ <input type="hidden" name="action" value="start">
192
+ <button type="submit" class="btn-primary">START Processing (from Index {{ current_index }})</button>
193
+ {% endif %}
194
+ </form>
195
+
196
+ <!-- Set Index Form -->
197
+ <form method="POST" action="/set_index">
198
+ <label for="start_index">Set Start Index (0 to {{ total_files - 1 }}):</label>
199
+ <input type="number" id="start_index" name="start_index" min="0" max="{{ total_files }}" value="{{ current_index }}" required>
200
+ <button type="submit" class="btn-info">Set Index & Restart</button>
201
+ </form>
202
+ </div>
203
+
204
+ <h2>Caption Server Stats</h2>
205
+ <div class="server-stats">
206
+ <table>
207
+ <thead>
208
+ <tr>
209
+ <th>Server URL</th>
210
+ <th>Status</th>
211
+ <th>Total Processed</th>
212
+ <th>FPS (Frames/Sec)</th>
213
+ </tr>
214
+ </thead>
215
+ <tbody>
216
+ {% for server in server_stats %}
217
+ <tr class="{{ 'busy-true' if server.busy else '' }}">
218
+ <td>{{ server.url }}</td>
219
+ <td>{{ "BUSY" if server.busy else "IDLE" }}</td>
220
+ <td>{{ server.processed }}</td>
221
+ <td>{{ server.fps }}</td>
222
+ </tr>
223
+ {% endfor %}
224
+ </tbody>
225
+ </table>
226
+ </div>
227
+ </div>
228
+ </body>
229
+ </html>