Hugging Face's logo

Spaces:
jsulz
/
ready-xet-go
Running

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

playing around

Browse files
Files changed (2) hide show
  1. index.html +142 -17
  2. style.css +107 -17
index.html CHANGED
@@ -1,19 +1,144 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
  </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Ready Xet Go</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
9
+ <link rel="stylesheet" href="style.css">
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;
67
+
68
+ function animateProgressBar() {
69
+ if (currentProgress < current_status) {
70
+ currentProgress++;
71
+ progressBar.style.width = `${currentProgress}%`;
72
+ progressBar.textContent = `${currentProgress}%`;
73
+ setTimeout(animateProgressBar, 50);
74
+ }
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
+ }));
90
+
91
+ // Format date for display (MMM D YYYY)
92
+ function formatDate(dateStr) {
93
+ return new Date(dateStr).toLocaleDateString('en-US', {
94
+ year: 'numeric', month: 'short', day: 'numeric'
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)),
104
+ datasets: [{
105
+ label: 'Repos Migrated',
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: {
113
+ responsive: true,
114
+ maintainAspectRatio: false,
115
+ animation: { duration: 2000 },
116
+ scales: {
117
+ y: {
118
+ min: 0,
119
+ max: maxCount,
120
+ ticks: { stepSize: 100000 }
121
+ },
122
+ x: {
123
+ ticks: {
124
+ maxTicksLimit: 20
125
+ }
126
+ },
127
+ },
128
+ plugins: {
129
+ tooltip: {
130
+ callbacks: {
131
+ label: function(context) {
132
+ return `Repos Migrated: ${context.parsed.y.toLocaleString()}`;
133
+ }
134
+ }
135
+ }
136
+ }
137
+ }
138
+ });
139
+
140
+
141
+ })();
142
+ </script>
143
+ </body>
144
+ </html>
style.css CHANGED
@@ -1,28 +1,118 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
  h1 {
7
  font-size: 16px;
 
8
  margin-top: 0;
9
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  h1 {
2
  font-size: 16px;
3
+ font-weight: 00;
4
  margin-top: 0;
5
  }
6
+ html, body {
7
+ margin: 0;
8
+ padding: 0;
9
+ height: 100%;
10
+ }
11
+ body {
12
+ font-family: Arial, sans-serif;
13
+ background: #0b0f19;
14
+ color: oklch(.872 .01 258.338);
15
+ }
16
+
17
+ .progress-container {
18
+ width: 100%;
19
+ height: 30px;
20
+ background: #1E2938;
21
+ border-radius: 15px;
22
+ margin: 20px 0;
23
+ }
24
+
25
+ .progress-bar {
26
+ height: 100%;
27
+ background: linear-gradient(135deg, #0b0f19 0%, #7875FF 100%);
28
+ border-radius: 15px;
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ color: white;
33
+ font-weight: bold;
34
+ transition: width 0.05s ease;
35
+ position: relative;
36
+ overflow: hidden;
37
+ }
38
+
39
+ .progress-bar::after {
40
+ content: '';
41
+ position: absolute;
42
+ top: 0;
43
+ left: -100%;
44
+ width: 100%;
45
+ height: 100%;
46
+ background: linear-gradient(90deg,
47
+ transparent 0%,
48
+ rgba(255, 255, 255, 0.15) 50%,
49
+ transparent 100%
50
+ );
51
+ animation: shimmer 6s infinite;
52
+ }
53
 
54
+ @keyframes shimmer {
55
+ 0% {
56
+ left: -100%;
57
+ opacity: 0;
58
+ }
59
+ 50% {
60
+ opacity: 1.0;
61
+ }
62
+ 100% {
63
+ left: 100%;
64
+ opacity: 0;
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;
76
+ padding: 60px 20px;
77
+ border-bottom: 1px solid #2a3441;
78
+ }
79
+ .hero-title {
80
+ font-size: 3.5rem;
81
+ margin: 0 0 16px 0;
82
+ }
83
+ .hero-subtitle {
84
+ font-size: 1.25rem;
85
+ margin: 0;
86
+ opacity: 0.8;
87
+ font-weight: 300;
88
+ }
89
+
90
+ .stats-card {
91
+ width: 65%;
92
+ margin: 40px auto 40px auto;
93
+ position: relative;
94
+ z-index: 10;
95
  }
96
 
97
  .card {
98
+ backdrop-filter: blur(10px);
99
+ border-radius: 16px;
100
+ padding: 32px;
101
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
102
+ border: 1px solid rgba(255, 255, 255, 0.2);
103
  }
104
 
105
+ .card h2 {
106
+ margin-top: 0;
107
+ margin-bottom: 24px;
108
+ font-weight: 600;
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
+ }