Samfredoly commited on
Commit
bd044f5
·
verified ·
1 Parent(s): 1b145bd

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +226 -0
index.html ADDED
@@ -0,0 +1,226 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>HF Uploader Dashboard</title>
7
+ <link rel="stylesheet" href="/static/style.css">
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <!-- Header -->
12
+ <header class="header">
13
+ <div class="header-content">
14
+ <h1 class="logo">HF Uploader</h1>
15
+ <nav class="nav">
16
+ <a href="#dashboard" class="nav-link active" data-section="dashboard">Dashboard</a>
17
+ <a href="#queue" class="nav-link" data-section="queue">Queue</a>
18
+ <a href="#config" class="nav-link" data-section="config">Configuration</a>
19
+ <a href="#logs" class="nav-link" data-section="logs">Logs</a>
20
+ </nav>
21
+ </div>
22
+ </header>
23
+
24
+ <!-- Main Content -->
25
+ <main class="main">
26
+ <!-- Dashboard Section -->
27
+ <section id="dashboard" class="section active">
28
+ <div class="section-header">
29
+ <h2>Dashboard</h2>
30
+ <div class="divider-line"></div>
31
+ </div>
32
+
33
+ <!-- Statistics Grid -->
34
+ <div class="stats-grid">
35
+ <div class="stat-card">
36
+ <div class="stat-value" id="stat-processed">0</div>
37
+ <div class="stat-label">Files Processed</div>
38
+ </div>
39
+ <div class="stat-card">
40
+ <div class="stat-value" id="stat-pending">0</div>
41
+ <div class="stat-label">Pending Upload</div>
42
+ </div>
43
+ <div class="stat-card">
44
+ <div class="stat-value" id="stat-uploaded">0</div>
45
+ <div class="stat-label">Uploaded</div>
46
+ </div>
47
+ <div class="stat-card">
48
+ <div class="stat-value" id="stat-failed">0</div>
49
+ <div class="stat-label">Failed</div>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Processing Status -->
54
+ <div class="card">
55
+ <h3>Processing Status</h3>
56
+ <div class="status-content">
57
+ <div class="status-row">
58
+ <span class="status-label">Status:</span>
59
+ <span class="status-value" id="processing-status">Idle</span>
60
+ </div>
61
+ <div class="status-row">
62
+ <span class="status-label">Progress:</span>
63
+ <div class="progress-bar">
64
+ <div class="progress-fill" id="processing-progress" style="width: 0%"></div>
65
+ </div>
66
+ </div>
67
+ <div class="status-row">
68
+ <span class="status-label">Matched Pairs:</span>
69
+ <span class="status-value" id="matched-pairs">0</span>
70
+ </div>
71
+ </div>
72
+ <button class="btn btn-primary" id="btn-start-processing">Start Processing</button>
73
+ </div>
74
+
75
+ <!-- Upload Status -->
76
+ <div class="card">
77
+ <h3>Upload Status</h3>
78
+ <div class="status-content">
79
+ <div class="status-row">
80
+ <span class="status-label">Rate Limit:</span>
81
+ <span class="status-value" id="rate-limit-status">Ready</span>
82
+ </div>
83
+ <div class="status-row">
84
+ <span class="status-label">Remaining Uploads:</span>
85
+ <span class="status-value" id="remaining-uploads">128</span>
86
+ </div>
87
+ <div class="status-row">
88
+ <span class="status-label">Current Upload:</span>
89
+ <span class="status-value" id="current-upload">None</span>
90
+ </div>
91
+ </div>
92
+ <button class="btn btn-primary" id="btn-start-upload">Start Upload</button>
93
+ </div>
94
+ </section>
95
+
96
+ <!-- Queue Section -->
97
+ <section id="queue" class="section">
98
+ <div class="section-header">
99
+ <h2>Upload Queue</h2>
100
+ <div class="divider-line"></div>
101
+ </div>
102
+
103
+ <div class="queue-controls">
104
+ <button class="btn btn-secondary" id="btn-add-to-queue">Add Processed Files</button>
105
+ <button class="btn btn-secondary" id="btn-clear-queue">Clear Queue</button>
106
+ <select id="queue-filter" class="filter-select">
107
+ <option value="">All Files</option>
108
+ <option value="pending">Pending</option>
109
+ <option value="uploading">Uploading</option>
110
+ <option value="completed">Completed</option>
111
+ <option value="failed">Failed</option>
112
+ </select>
113
+ </div>
114
+
115
+ <div class="queue-table">
116
+ <table>
117
+ <thead>
118
+ <tr>
119
+ <th>File Name</th>
120
+ <th>Size</th>
121
+ <th>Status</th>
122
+ <th>Retries</th>
123
+ <th>Action</th>
124
+ </tr>
125
+ </thead>
126
+ <tbody id="queue-tbody">
127
+ <tr class="empty-row">
128
+ <td colspan="5">No files in queue</td>
129
+ </tr>
130
+ </tbody>
131
+ </table>
132
+ </div>
133
+ </section>
134
+
135
+ <!-- Configuration Section -->
136
+ <section id="config" class="section">
137
+ <div class="section-header">
138
+ <h2>Configuration</h2>
139
+ <div class="divider-line"></div>
140
+ </div>
141
+
142
+ <div class="config-form">
143
+ <div class="form-group">
144
+ <label for="hf-token">Hugging Face Token</label>
145
+ <input type="password" id="hf-token" placeholder="hf_..." class="form-input">
146
+ </div>
147
+
148
+ <div class="form-group">
149
+ <label for="source-all-repo">Source ALL Repository</label>
150
+ <input type="text" id="source-all-repo" placeholder="samfred2/ALL" class="form-input">
151
+ </div>
152
+
153
+ <div class="form-group">
154
+ <label for="source-ato-repo">Source ATO Repository</label>
155
+ <input type="text" id="source-ato-repo" placeholder="samfred2/ATO" class="form-input">
156
+ </div>
157
+
158
+ <div class="form-group">
159
+ <label for="target-repo">Target Repository</label>
160
+ <input type="text" id="target-repo" placeholder="samfred2/ALL2" class="form-input">
161
+ </div>
162
+
163
+ <div class="form-row">
164
+ <div class="form-group">
165
+ <label for="batch-size">Upload Batch Size</label>
166
+ <input type="number" id="batch-size" value="10" min="1" max="50" class="form-input">
167
+ </div>
168
+
169
+ <div class="form-group">
170
+ <label for="max-uploads">Max Uploads/Hour</label>
171
+ <input type="number" id="max-uploads" value="128" min="1" max="1000" class="form-input">
172
+ </div>
173
+ </div>
174
+
175
+ <button class="btn btn-primary" id="btn-save-config">Save Configuration</button>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Logs Section -->
180
+ <section id="logs" class="section">
181
+ <div class="section-header">
182
+ <h2>Error Logs</h2>
183
+ <div class="divider-line"></div>
184
+ </div>
185
+
186
+ <div class="logs-controls">
187
+ <button class="btn btn-secondary" id="btn-clear-logs">Clear Logs</button>
188
+ </div>
189
+
190
+ <div class="logs-table">
191
+ <table>
192
+ <thead>
193
+ <tr>
194
+ <th>File Name</th>
195
+ <th>Error Code</th>
196
+ <th>Message</th>
197
+ <th>Retryable</th>
198
+ <th>Time</th>
199
+ </tr>
200
+ </thead>
201
+ <tbody id="logs-tbody">
202
+ <tr class="empty-row">
203
+ <td colspan="5">No errors logged</td>
204
+ </tr>
205
+ </tbody>
206
+ </table>
207
+ </div>
208
+ </section>
209
+ </main>
210
+ </div>
211
+
212
+ <!-- Notification Toast -->
213
+ <div id="toast" class="toast"></div>
214
+
215
+ <!-- Modal for File Preview -->
216
+ <div id="preview-modal" class="modal">
217
+ <div class="modal-content">
218
+ <button class="modal-close">&times;</button>
219
+ <h2>File Preview</h2>
220
+ <div id="preview-content" class="preview-content"></div>
221
+ </div>
222
+ </div>
223
+
224
+ <script src="/static/app.js"></script>
225
+ </body>
226
+ </html>