Hugging Face's logo

Spaces:
davanstrien
/
progress-test
Running

App Files Community
1
davanstrien HF staff commited on
Commit
cda5236
•
1 Parent(s): d90ef0c

Upload 2 files

Browse files
Files changed (2) hide show
  1. README.md +2 -1
  2. index.html +248 -191
README.md CHANGED
@@ -6,6 +6,7 @@ colorTo: gray
6
  fullWidth: true
7
  sdk: static
8
  pinned: true
 
9
  ---
10
 
11
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
6
  fullWidth: true
7
  sdk: static
8
  pinned: true
9
+ header: mini
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,195 +1,252 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Leaderboards</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
8
- <style>
9
- body {
10
- font-family: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
11
- margin: 0;
12
- padding: 20px;
13
- background: #f5f5f5;
14
- min-height: 100vh;
15
- }
16
-
17
- .container {
18
- max-width: 1200px;
19
- margin: 0 auto;
20
- }
21
-
22
- .header {
23
- text-align: center;
24
- margin-bottom: 2rem;
25
- color: #111827;
26
- }
27
-
28
- .summary {
29
- text-align: center;
30
- margin-bottom: 2rem;
31
- padding: 1rem;
32
- background: white;
33
- border-radius: 12px;
34
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
35
- border: 1px solid #e5e7eb;
36
- }
37
-
38
- .summary p {
39
- font-size: 1.1rem;
40
- color: #374151;
41
- margin: 0;
42
- }
43
-
44
- .grid {
45
- display: flex;
46
- flex-direction: column;
47
- gap: 2rem;
48
- }
49
-
50
- .card {
51
- background: white;
52
- border-radius: 12px;
53
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
54
- padding: 1.5rem;
55
- border: 1px solid #e5e7eb;
56
- }
57
-
58
- .card-title {
59
- font-size: 1.25rem;
60
- font-weight: 600;
61
- margin-bottom: 1rem;
62
- color: #111827;
63
- }
64
-
65
- .iframe-container {
66
- border-radius: 8px;
67
- overflow: hidden;
68
- background: #fff;
69
- position: relative;
70
- padding-bottom: 56.25%;
71
- height: 0;
72
- }
73
-
74
- .iframe-container iframe {
75
- position: absolute;
76
- top: 0;
77
- left: 0;
78
- width: 100%;
79
- height: 100%;
80
- border: none;
81
- }
82
-
83
- .loading {
84
- display: inline-block;
85
- width: 20px;
86
- height: 20px;
87
- border: 3px solid rgba(0,0,0,.1);
88
- border-radius: 50%;
89
- border-top-color: #3b82f6;
90
- animation: spin 1s ease-in-out infinite;
91
- margin-right: 10px;
92
- vertical-align: middle;
93
- }
94
-
95
- @keyframes spin {
96
- to { transform: rotate(360deg); }
97
- }
98
-
99
- .error {
100
- color: #dc2626;
101
- padding: 1rem;
102
- background: #fee2e2;
103
- border-radius: 8px;
104
- margin: 1rem 0;
105
- }
106
-
107
- @media (max-width: 768px) {
108
- body {
109
- padding: 1rem;
110
- }
111
-
112
- .card {
113
- padding: 1rem;
114
- }
115
-
116
- .iframe-container {
117
- padding-bottom: 75%;
118
- }
119
- }
120
- </style>
121
- </head>
122
- <body>
123
- <div class="container">
124
- <header class="header">
125
- <h1>Leaderboards</h1>
126
- </header>
127
-
128
- <div class="summary" id="total-annotations">
129
- <div class="loading"></div>
130
- <span>Loading total annotations...</span>
131
- </div>
132
-
133
- <div class="grid">
134
- <div class="card">
135
- <div class="card-title">User Leaderboard</div>
136
- <div class="iframe-container">
137
- <iframe
138
- src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/NbscKj4"
139
- frameborder="0">
140
- </iframe>
141
- </div>
142
- </div>
143
-
144
- <div class="card">
145
- <div class="card-title">Language Leaderboard</div>
146
- <div class="iframe-container">
147
- <iframe
148
- src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/5Bhx9Ck"
149
- frameborder="0">
150
- </iframe>
151
- </div>
152
- </div>
153
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
154
  </div>
155
 
156
- <script>
157
- async function fetchTotalAnnotations() {
158
- try {
159
- const response = await fetch(
160
- "https://datasets-server.huggingface.co/rows?dataset=davanstrien%2Fprogress&config=default&split=train&offset=0&length=100"
161
- );
162
-
163
- if (!response.ok) {
164
- throw new Error(`HTTP error! status: ${response.status}`);
165
- }
166
-
167
- const data = await response.json();
168
-
169
- // Calculate total annotations from the rows
170
- const totalAnnotations = data.rows.reduce((sum, row) => {
171
- return sum + (row.row.submitted || 0);
172
- }, 0);
173
-
174
- document.getElementById('total-annotations').innerHTML = `
175
- <p>Total annotations submitted: <strong>${totalAnnotations.toLocaleString()}</strong></p>
176
- `;
177
- } catch (error) {
178
- console.error('Error fetching total annotations:', error);
179
- document.getElementById('total-annotations').innerHTML = `
180
- <div class="error">
181
- Error loading annotations: ${error.message}
182
- </div>
183
- `;
184
- }
185
- }
186
-
187
- // Start fetching when the page loads
188
- if (document.readyState === 'loading') {
189
- document.addEventListener('DOMContentLoaded', fetchTotalAnnotations);
190
- } else {
191
- fetchTotalAnnotations();
192
- }
193
- </script>
194
- </body>
195
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Leaderboards</title>
7
+ <link
8
+ href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"
9
+ rel="stylesheet"
10
+ />
11
+ <style>
12
+ body {
13
+ font-family: "Source Sans Pro", system-ui, -apple-system, sans-serif;
14
+ margin: 0;
15
+ padding: 20px;
16
+ background: linear-gradient(
17
+ 135deg,
18
+ rgb(245, 245, 245) 0%,
19
+ #ffffff 100%
20
+ );
21
+ min-height: 100vh;
22
+ }
23
+
24
+ .container {
25
+ max-width: 768px;
26
+ margin: 0 auto;
27
+ padding: 0 1rem;
28
+ }
29
+
30
+ @media (min-width: 768px) {
31
+ .container {
32
+ max-width: 1200px;
33
+ padding: 0 2rem;
34
+ }
35
+ }
36
+
37
+ .header {
38
+ text-align: center;
39
+ margin-bottom: 2rem;
40
+ color: #111827;
41
+ padding-bottom: 1rem;
42
+ border-bottom: 2px solid rgb(228, 228, 228);
43
+ }
44
+
45
+ .summary {
46
+ text-align: center;
47
+ margin-bottom: 2rem;
48
+ padding: 1rem;
49
+ background: white;
50
+ border-radius: 12px;
51
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
52
+ border: 1px solid rgb(228, 228, 228);
53
+ }
54
+
55
+ .summary p {
56
+ font-size: 1.1rem;
57
+ color: rgb(107, 114, 128);
58
+ margin: 0;
59
+ }
60
+
61
+ .grid {
62
+ display: flex;
63
+ flex-direction: column;
64
+ gap: 2rem;
65
+ }
66
+
67
+ .card {
68
+ background: white;
69
+ border-radius: 12px;
70
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
71
+ padding: 1.5rem;
72
+ border: 1px solid rgb(228, 228, 228);
73
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
74
+ }
75
+
76
+ .card:hover {
77
+ transform: translateY(-2px);
78
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
79
+ }
80
+
81
+ .card-title {
82
+ font-size: 1.25rem;
83
+ font-weight: 600;
84
+ margin-bottom: 1rem;
85
+ color: #007bff;
86
+ border-bottom: 1px solid rgb(228, 228, 228);
87
+ padding-bottom: 0.5rem;
88
+ }
89
+
90
+ .iframe-container {
91
+ border-radius: 8px;
92
+ overflow: hidden;
93
+ background: #fff;
94
+ position: relative;
95
+ padding-bottom: 56.25%;
96
+ height: 0;
97
+ }
98
+
99
+ .iframe-container iframe {
100
+ position: absolute;
101
+ top: 0;
102
+ left: 0;
103
+ width: 100%;
104
+ height: 100%;
105
+ border: none;
106
+ }
107
+
108
+ .loading {
109
+ display: inline-block;
110
+ width: 20px;
111
+ height: 20px;
112
+ border: 2px solid rgb(228, 228, 228);
113
+ border-radius: 50%;
114
+ border-top-color: #007bff;
115
+ border-right-color: #007bff;
116
+ animation: spin 1s ease-in-out infinite;
117
+ margin-right: 10px;
118
+ vertical-align: middle;
119
+ opacity: 0.8;
120
+ }
121
+
122
+ @keyframes spin {
123
+ to {
124
+ transform: rotate(360deg);
125
+ }
126
+ }
127
+
128
+ .error {
129
+ color: #dc2626;
130
+ padding: 1rem;
131
+ background: #fee2e2;
132
+ border-radius: 8px;
133
+ margin: 1rem 0;
134
+ }
135
+
136
+ @media (max-width: 768px) {
137
+ body {
138
+ padding: 1rem;
139
+ }
140
+
141
+ .card {
142
+ padding: 1rem;
143
+ }
144
+
145
+ .iframe-container {
146
+ padding-bottom: 75%;
147
+ }
148
+ }
149
+
150
+ @media (min-width: 768px) {
151
+ .grid {
152
+ display: grid;
153
+ grid-template-columns: repeat(2, 1fr);
154
+ gap: 2rem;
155
+ }
156
+ }
157
+
158
+ .summary p strong {
159
+ color: #007bff;
160
+ font-size: 1.2em;
161
+ }
162
+ </style>
163
+ </head>
164
+ <body>
165
+ <div class="container">
166
+ <header class="header">
167
+ <h1>Progress Leaderboards</h1>
168
+ </header>
169
+
170
+ <div class="summary" id="total-annotations">
171
+ <div class="loading"></div>
172
+ <span>Loading annotation data...</span>
173
+ </div>
174
+
175
+ <div class="grid">
176
+ <div class="card">
177
+ <div class="card-title">Language Leaderboard</div>
178
+ <div class="iframe-container">
179
+ <iframe
180
+ src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/6Zf4iyG"
181
+ frameborder="0"
182
+ width="100%"
183
+ height="560px"
184
+ ></iframe>
185
+ </div>
186
  </div>
187
 
188
+ <div class="card">
189
+ <div class="card-title">User Leaderboard</div>
190
+ <div class="iframe-container">
191
+ <iframe
192
+ src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/py5k9gY"
193
+ frameborder="0"
194
+ width="100%"
195
+ height="560px"
196
+ ></iframe>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <script>
203
+ async function fetchTotalAnnotations() {
204
+ try {
205
+ const response = await fetch(
206
+ "https://datasets-server.huggingface.co/rows?dataset=davanstrien%2Fprogress&config=default&split=train&offset=0&length=100"
207
+ );
208
+
209
+ if (!response.ok) {
210
+ throw new Error(`HTTP error! status: ${response.status}`);
211
+ }
212
+
213
+ const data = await response.json();
214
+
215
+ // Calculate total annotations and count languages with submissions
216
+ const stats = data.rows.reduce(
217
+ (acc, row) => {
218
+ const submissions = row.row.submitted || 0;
219
+ if (submissions > 0) {
220
+ acc.languages.add(row.row.language_dataset_name);
221
+ }
222
+ acc.total += submissions;
223
+ return acc;
224
+ },
225
+ { total: 0, languages: new Set() }
226
+ );
227
+
228
+ document.getElementById("total-annotations").innerHTML = `
229
+ <p>Total annotations submitted: <strong>${stats.total.toLocaleString()}</strong></p>
230
+ <p>Languages with annotations: <strong>${
231
+ stats.languages.size
232
+ }</strong></p>
233
+ `;
234
+ } catch (error) {
235
+ console.error("Error fetching total annotations:", error);
236
+ document.getElementById("total-annotations").innerHTML = `
237
+ <div class="error">
238
+ Error loading annotations: ${error.message}
239
+ </div>
240
+ `;
241
+ }
242
+ }
243
+
244
+ // Start fetching when the page loads
245
+ if (document.readyState === "loading") {
246
+ document.addEventListener("DOMContentLoaded", fetchTotalAnnotations);
247
+ } else {
248
+ fetchTotalAnnotations();
249
+ }
250
+ </script>
251
+ </body>
252
+ </html>