Hugging Face's logo

Spaces:
data-is-better-together
/
fineweb-c-dashboard
Running

App Files Community
1
davanstrien HF staff commited on
Commit
8ab5f33
·
verified ·
1 Parent(s): 75883a1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +101 -9
index.html CHANGED
@@ -1,9 +1,9 @@
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>SQL Console Demos</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
8
  <style>
9
  body {
@@ -25,6 +25,22 @@
25
  color: #111827;
26
  }
27
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  .grid {
29
  display: flex;
30
  flex-direction: column;
@@ -50,12 +66,42 @@
50
  border-radius: 8px;
51
  overflow: hidden;
52
  background: #fff;
 
 
 
53
  }
54
 
55
- iframe {
56
- border: none;
 
 
57
  width: 100%;
58
- display: block;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  }
60
 
61
  @media (max-width: 768px) {
@@ -66,6 +112,10 @@
66
  .card {
67
  padding: 1rem;
68
  }
 
 
 
 
69
  }
70
  </style>
71
  </head>
@@ -74,6 +124,11 @@
74
  <header class="header">
75
  <h1>Leaderboards</h1>
76
  </header>
 
 
 
 
 
77
 
78
  <div class="grid">
79
  <div class="card">
@@ -81,8 +136,7 @@
81
  <div class="iframe-container">
82
  <iframe
83
  src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/NbscKj4"
84
- frameborder="0"
85
- height="560px">
86
  </iframe>
87
  </div>
88
  </div>
@@ -92,12 +146,50 @@
92
  <div class="iframe-container">
93
  <iframe
94
  src="https://huggingface.co/datasets/davanstrien/progress/embed/sql-console/5Bhx9Ck"
95
- frameborder="0"
96
- height="560px">
97
  </iframe>
98
  </div>
99
  </div>
100
  </div>
101
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  </body>
103
  </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 href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
8
  <style>
9
  body {
 
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;
 
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) {
 
112
  .card {
113
  padding: 1rem;
114
  }
115
+
116
+ .iframe-container {
117
+ padding-bottom: 75%;
118
+ }
119
  }
120
  </style>
121
  </head>
 
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">
 
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>
 
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>