Hugging Face's logo

Spaces:
jsulz
/
ready-xet-go
Running

App Files Community
jsulz HF Staff commited on
Commit
0727c42
·
1 Parent(s): ab64d97

wrapping on skeleton

Browse files
Files changed (4) hide show
  1. huggie.png +0 -0
  2. index.html +120 -34
  3. rockxet.png +0 -0
  4. style.css +154 -7
huggie.png ADDED
index.html CHANGED
@@ -10,57 +10,103 @@
10
  </head>
11
  <body>
12
  <div class="hero-band">
13
- <h1 class="hero-title">Ready Xet Go</h1>
14
- <p class="hero-subtitle">At the speed of chunks</p>
15
- </div>
16
-
17
- <div class="stats-card">
18
- <div class="card">
19
- <h2>Xet Migration Progress</h2>
20
- <div class="progress-container">
21
- <div class="progress-bar" id="progressBar">0%</div>
22
  </div>
 
23
  </div>
24
  </div>
25
 
26
- <div class="chart-card">
27
- <div class="card">
28
- <h2>Repos Migrated to Xet</h2>
29
- <div class="chart-container">
30
- <canvas id="progressChart"></canvas>
 
 
31
  </div>
32
  </div>
33
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
 
35
  <script>
36
 
37
 
38
- const CSV_URL = 'https://huggingface.co/datasets/jsulz/ready-xet-go/resolve/main/progress.csv';
39
 
40
- (async () => {
41
 
42
- const rows = [];
 
 
 
 
 
43
 
44
- const csv = await new Promise((resolve, reject) => {
45
- Papa.parse(CSV_URL, {
46
  download: true,
47
  header : true,
48
  complete: resolve,
49
  error : reject
50
  });
51
  });
52
- csv.data.forEach(row => {
53
  if (row.date && row.xet_repos && row.hub_repos) {
54
- rows.push({
55
  date: new Date(row.date),
56
  xet_repos: parseInt(row.xet_repos, 10),
57
  hub_repos: parseInt(row.hub_repos, 10)
58
  });
59
  }
60
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  // Progress Bar Constants
62
  const max_value = 100;
63
- const current_status = Math.round((rows[rows.length - 1].xet_repos / rows[rows.length - 1].hub_repos) * max_value);
64
  // Animate Progress Bar - increments smoothly every 50ms
65
  const progressBar = document.getElementById('progressBar');
66
  let currentProgress = 0;
@@ -75,15 +121,20 @@
75
  }
76
  animateProgressBar();
77
 
78
- // Chart Constants
79
- // Use the latest date from the CSV for the end date
80
- const endDate = rows[rows.length - 1].date;
81
- const startDate = rows[0].date;
82
 
 
 
 
 
 
 
 
 
 
83
  const maxCount = Math.max(
84
- ...rows.map(row => row.xet_repos),
85
  );
86
- const dataPoints = rows.map(row => ({
87
  date: row.date,
88
  value: row.xet_repos
89
  }));
@@ -95,9 +146,9 @@
95
  });
96
  }
97
 
98
- // Initialize Chart with smooth animation
99
- const ctx = document.getElementById('progressChart').getContext('2d');
100
- new Chart(ctx, {
101
  type: 'line',
102
  data: {
103
  labels: dataPoints.map(point => formatDate(point.date)),
@@ -106,7 +157,7 @@
106
  data: dataPoints.map(point => point.value),
107
  borderColor: '#7875FF',
108
  backgroundColor: 'rgba(255, 127, 65, 1)',
109
- tension: 0.4 // Smooth curve
110
  }]
111
  },
112
  options: {
@@ -137,7 +188,42 @@
137
  }
138
  });
139
 
140
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  })();
142
  </script>
143
  </body>
 
10
  </head>
11
  <body>
12
  <div class="hero-band">
13
+ <div class="hero-content">
14
+ <img src="huggie.png" alt="Huggie" class="hero-logo hero-logo-left">
15
+ <div class="hero-text">
16
+ <h1 class="hero-title">Ready Xet Go</h1>
17
+ <p class="hero-subtitle">At the speed of chunks</p>
 
 
 
 
18
  </div>
19
+ <img src="rockxet.png" alt="RockXet" class="hero-logo hero-logo-right">
20
  </div>
21
  </div>
22
 
23
+ <div class="container">
24
+ <div class="stats-card">
25
+ <div class="card">
26
+ <h2>Xet Migration Progress</h2>
27
+ <div class="progress-container">
28
+ <div class="progress-bar" id="progressBar">0%</div>
29
+ </div>
30
  </div>
31
  </div>
32
+
33
+ <div class="charts-container">
34
+ <div class="chart-card">
35
+ <div class="card">
36
+ <h2>Repos Migrated to Xet</h2>
37
+ <div class="chart-container">
38
+ <canvas id="progressChart"></canvas>
39
+ </div>
40
+ </div>
41
+ </div>
42
+
43
+ <div class="chart-card">
44
+ <div class="card">
45
+ <h2>LFS vs. Xet Files</h2>
46
+ <div class="chart-container">
47
+ <canvas id="largeFilesChart"></canvas>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
 
54
  <script>
55
 
56
 
57
+ const REPO_CSV_URL = 'https://huggingface.co/datasets/jsulz/ready-xet-go/resolve/main/repo-progress.csv';
58
 
59
+ const FILE_CSV_URL = 'https://huggingface.co/datasets/jsulz/ready-xet-go/resolve/main/file-progress.csv';
60
 
61
+ (async () => {
62
+ /*
63
+ * Data fetching and parsing
64
+ */
65
+ const repo_rows = [];
66
+ const file_rows = [];
67
 
68
+ const repo_csv = await new Promise((resolve, reject) => {
69
+ Papa.parse(REPO_CSV_URL, {
70
  download: true,
71
  header : true,
72
  complete: resolve,
73
  error : reject
74
  });
75
  });
76
+ repo_csv.data.forEach(row => {
77
  if (row.date && row.xet_repos && row.hub_repos) {
78
+ repo_rows.push({
79
  date: new Date(row.date),
80
  xet_repos: parseInt(row.xet_repos, 10),
81
  hub_repos: parseInt(row.hub_repos, 10)
82
  });
83
  }
84
  });
85
+
86
+ const file_csv = await new Promise((resolve, reject) => {
87
+ Papa.parse(FILE_CSV_URL, {
88
+ download: true,
89
+ header : true,
90
+ complete: resolve,
91
+ error : reject
92
+ });
93
+ });
94
+ file_csv.data.forEach(row => {
95
+ if (row.date && row.lfs_files && row.xet_files) {
96
+ file_rows.push({
97
+ date: new Date(row.date),
98
+ lfs_files: parseInt(row.lfs_files, 10),
99
+ xet_files: parseInt(row.xet_files, 10)
100
+ });
101
+ }
102
+ });
103
+
104
+ /*
105
+ * Progress Bar
106
+ */
107
  // Progress Bar Constants
108
  const max_value = 100;
109
+ const current_status = Math.round((repo_rows[repo_rows.length - 1].xet_repos / repo_rows[repo_rows.length - 1].hub_repos) * max_value);
110
  // Animate Progress Bar - increments smoothly every 50ms
111
  const progressBar = document.getElementById('progressBar');
112
  let currentProgress = 0;
 
121
  }
122
  animateProgressBar();
123
 
 
 
 
 
124
 
125
+ /*
126
+ * Charts
127
+ */
128
+
129
+ //
130
+ // Line chart for repo migration progress
131
+ //
132
+
133
+ // Set up chart data
134
  const maxCount = Math.max(
135
+ ...repo_rows.map(row => row.xet_repos),
136
  );
137
+ const dataPoints = repo_rows.map(row => ({
138
  date: row.date,
139
  value: row.xet_repos
140
  }));
 
146
  });
147
  }
148
 
149
+ // Initialize line chart
150
+ const lineChartCtx = document.getElementById('progressChart').getContext('2d');
151
+ let lineChart = new Chart(lineChartCtx, {
152
  type: 'line',
153
  data: {
154
  labels: dataPoints.map(point => formatDate(point.date)),
 
157
  data: dataPoints.map(point => point.value),
158
  borderColor: '#7875FF',
159
  backgroundColor: 'rgba(255, 127, 65, 1)',
160
+ tension: 0.4
161
  }]
162
  },
163
  options: {
 
188
  }
189
  });
190
 
191
+ //
192
+ // Donut chart for large files
193
+ //
194
+ console.log(file_rows);
195
+ lfs_file_count = file_rows[file_rows.length - 1].lfs_files;
196
+ xet_file_count = file_rows[file_rows.length - 1].xet_files;
197
+ // Initialize donut chart
198
+ const donutChartCtx = document.getElementById('largeFilesChart').getContext('2d');
199
+ let donutChart = new Chart(donutChartCtx, {
200
+ type: 'doughnut',
201
+ data: {
202
+ labels: [
203
+ 'LFS Files',
204
+ 'Xet Files',
205
+ ],
206
+ datasets: [{
207
+ label: 'My First Dataset',
208
+ data: [lfs_file_count, xet_file_count],
209
+ backgroundColor: [
210
+ 'oklch(0.577 0.245 27.325 / 75.56%)',
211
+ 'oklch(0.6361 0.1994 280.07 / 71.37%)',
212
+ ],
213
+ hoverOffset: 4
214
+ }]
215
+ },
216
+ options: {
217
+ responsive: true,
218
+ maintainAspectRatio: false,
219
+ animation: { duration: 2000 },
220
+ plugins: {
221
+ legend: {
222
+ position: 'top',
223
+ },
224
+ }
225
+ }
226
+ });
227
  })();
228
  </script>
229
  </body>
rockxet.png ADDED
style.css CHANGED
@@ -12,6 +12,89 @@ body {
12
  font-family: Arial, sans-serif;
13
  background: #0b0f19;
14
  color: oklch(.872 .01 258.338);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
 
17
  .progress-container {
@@ -65,11 +148,6 @@ body {
65
  }
66
  }
67
 
68
- .chart-container {
69
- width: 100%;
70
- height: 400px;
71
- margin: 20px 0;
72
- }
73
  .hero-band {
74
  background: linear-gradient(180deg, #0b0f19 0%, #0b0f19 40%, #7875FF 150%);
75
  text-align: center;
@@ -87,6 +165,45 @@ body {
87
  font-weight: 300;
88
  }
89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  .stats-card {
91
  width: 65%;
92
  margin: 40px auto 40px auto;
@@ -109,10 +226,40 @@ body {
109
  }
110
 
111
  .chart-card {
112
- width: 85%;
113
- margin: 40px auto;
 
 
 
114
  backdrop-filter: blur(10px);
115
  border-radius: 16px;
116
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
117
  border: 1px solid rgba(255, 255, 255, 0.2);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  }
 
12
  font-family: Arial, sans-serif;
13
  background: #0b0f19;
14
  color: oklch(.872 .01 258.338);
15
+ position: relative;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ body::before {
20
+ content: '';
21
+ position: fixed;
22
+ top: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ height: 100%;
26
+ background-image:
27
+ radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.8), transparent),
28
+ radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.6), transparent),
29
+ radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.9), transparent),
30
+ radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.4), transparent),
31
+ radial-gradient(1px 1px at 160px 30px, rgba(255, 255, 255, 0.7), transparent),
32
+ radial-gradient(1px 1px at 200px 90px, rgba(255, 255, 255, 0.5), transparent),
33
+ radial-gradient(1px 1px at 240px 50px, rgba(255, 255, 255, 0.8), transparent),
34
+ radial-gradient(1px 1px at 280px 10px, rgba(255, 255, 255, 0.6), transparent),
35
+ radial-gradient(1px 1px at 320px 70px, rgba(255, 255, 255, 0.9), transparent),
36
+ radial-gradient(1px 1px at 360px 40px, rgba(255, 255, 255, 0.4), transparent);
37
+ background-repeat: repeat;
38
+ background-size: 400px 100px;
39
+ animation: starfield 60s linear infinite;
40
+ pointer-events: none;
41
+ z-index: 1;
42
+ }
43
+
44
+ body::after {
45
+ content: '';
46
+ position: fixed;
47
+ top: 0;
48
+ left: 0;
49
+ width: 100%;
50
+ height: 100%;
51
+ background-image:
52
+ radial-gradient(0.5px 0.5px at 15px 25px, rgba(120, 117, 255, 0.6), transparent),
53
+ radial-gradient(0.5px 0.5px at 75px 15px, rgba(120, 117, 255, 0.4), transparent),
54
+ radial-gradient(0.5px 0.5px at 115px 60px, rgba(120, 117, 255, 0.7), transparent),
55
+ radial-gradient(0.5px 0.5px at 180px 35px, rgba(120, 117, 255, 0.3), transparent),
56
+ radial-gradient(0.5px 0.5px at 220px 85px, rgba(120, 117, 255, 0.5), transparent);
57
+ background-repeat: repeat;
58
+ background-size: 300px 120px;
59
+ animation: starfield-slow 80s linear infinite reverse;
60
+ pointer-events: none;
61
+ z-index: 1;
62
+ }
63
+
64
+ @keyframes starfield {
65
+ 0% {
66
+ transform: translateY(0) translateX(0);
67
+ opacity: 1;
68
+ }
69
+ 50% {
70
+ opacity: 0.8;
71
+ }
72
+ 100% {
73
+ transform: translateY(-100px) translateX(-50px);
74
+ opacity: 1;
75
+ }
76
+ }
77
+
78
+ @keyframes starfield-slow {
79
+ 0% {
80
+ transform: translateY(0) translateX(0);
81
+ opacity: 0.8;
82
+ }
83
+ 50% {
84
+ opacity: 1;
85
+ }
86
+ 100% {
87
+ transform: translateY(-120px) translateX(30px);
88
+ opacity: 0.8;
89
+ }
90
+ }
91
+
92
+ .hero-band,
93
+ .container,
94
+ .stats-card,
95
+ .charts-container {
96
+ position: relative;
97
+ z-index: 2;
98
  }
99
 
100
  .progress-container {
 
148
  }
149
  }
150
 
 
 
 
 
 
151
  .hero-band {
152
  background: linear-gradient(180deg, #0b0f19 0%, #0b0f19 40%, #7875FF 150%);
153
  text-align: center;
 
165
  font-weight: 300;
166
  }
167
 
168
+ .hero-content {
169
+ display: flex;
170
+ align-items: center;
171
+ justify-content: center;
172
+ gap: 40px;
173
+ max-width: 800px;
174
+ margin: 0 auto;
175
+ }
176
+
177
+ .hero-text {
178
+ text-align: center;
179
+ }
180
+
181
+ .hero-logo {
182
+ width: 80px;
183
+ height: 80px;
184
+ object-fit: contain;
185
+ opacity: 0.9;
186
+ transition: transform 0.3s ease, opacity 0.3s ease;
187
+ }
188
+
189
+ .hero-logo:hover {
190
+ transform: scale(1.1);
191
+ opacity: 1;
192
+ }
193
+
194
+ @media (max-width: 768px) {
195
+ .hero-content {
196
+ gap: 20px;
197
+ }
198
+
199
+ .hero-logo {
200
+ width: 60px;
201
+ height: 60px;
202
+ }
203
+ }
204
+
205
+
206
+
207
  .stats-card {
208
  width: 65%;
209
  margin: 40px auto 40px auto;
 
226
  }
227
 
228
  .chart-card {
229
+ flex: 1 1 0; /* allow shrinking and growing */
230
+ min-width: 0;
231
+ max-width: 100%;
232
+ display: flex;
233
+ flex-direction: column;
234
  backdrop-filter: blur(10px);
235
  border-radius: 16px;
236
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
237
  border: 1px solid rgba(255, 255, 255, 0.2);
238
+ }
239
+
240
+
241
+ .charts-container {
242
+ position: relative;
243
+ display: flex;
244
+ gap: 32px;
245
+ max-width: 1440px;
246
+ margin: 40px auto;
247
+ padding: 20px;
248
+
249
+ }
250
+
251
+ .chart-container {
252
+ width: 100%;
253
+ height: 400px;
254
+ margin: 20px 0;
255
+ }
256
+ canvas {
257
+ max-width: 100% !important;
258
+ height: auto;
259
+ }
260
+ @media (max-width: 1440px) {
261
+ .charts-container {
262
+ flex-direction: column;
263
+ gap: 24px;
264
+ }
265
  }