Hugging Face's logo

Spaces:
reach-vb
/
2025-ai-timeline
Running

App Files Community
2

Update index.html

#1
by reach-vb HF staff - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+371
-19
Files changed (1) hide show
  1. index.html +371 -19
index.html CHANGED
@@ -1,19 +1,371 @@
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>Timeline Template</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Arial', sans-serif;
10
+ background-color: #f4f4f9;
11
+ color: #333;
12
+ margin: 0;
13
+ padding: 0;
14
+ overflow-x: scroll;
15
+ scrollbar-width: thin;
16
+ -ms-overflow-style: -ms-autohiding-scrollbar;
17
+ }
18
+ .timeline {
19
+ display: flex;
20
+ flex-direction: row;
21
+ padding: 20px;
22
+ gap: 10px;
23
+ overflow-x: auto;
24
+ }
25
+ .month {
26
+ display: flex;
27
+ flex-direction: column;
28
+ gap: 10px;
29
+ width: 300px;
30
+ flex: 0 0 300px;
31
+ }
32
+ .month h3 {
33
+ margin: 0;
34
+ padding: 10px;
35
+ background-color: #6200ea;
36
+ color: white;
37
+ border-radius: 5px;
38
+ text-align: center;
39
+ }
40
+ .event {
41
+ background-color: white;
42
+ padding: 10px;
43
+ border-radius: 5px;
44
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
45
+ position: relative;
46
+ transition: all 0.3s ease;
47
+ }
48
+
49
+ /* Make category-1 events more prominent */
50
+ .event:has(.tag.open-source) {
51
+ background-color: #e8f5e9;
52
+ border-left: 4px solid #4caf50;
53
+ transform: scale(1.02);
54
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
55
+ }
56
+
57
+ /* Slightly dim category-2 events */
58
+ .event:has(.tag.api-only) {
59
+ background-color: #fafafa;
60
+ border-left: 4px solid #f44336;
61
+ }
62
+
63
+ /* Hover effects */
64
+ .event:has(.tag.open-source):hover {
65
+ transform: scale(1.03);
66
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
67
+ }
68
+ .event h4 {
69
+ margin: 0;
70
+ font-size: 14px;
71
+ }
72
+ .event p {
73
+ margin: 5px 0 0;
74
+ font-size: 12px;
75
+ color: #666;
76
+ }
77
+ .tag {
78
+ display: inline-block;
79
+ padding: 2px 5px;
80
+ font-size: 10px;
81
+ border-radius: 3px;
82
+ margin-top: 5px;
83
+ }
84
+ .tag.open-source {
85
+ background-color: #4caf50;
86
+ color: white;
87
+ }
88
+ .tag.api-only {
89
+ background-color: #f44336;
90
+ color: white;
91
+ }
92
+ .event p a {
93
+ color: #4caf50;
94
+ text-decoration: none;
95
+ }
96
+ .event p a:hover {
97
+ text-decoration: underline;
98
+ }
99
+ .github-link {
100
+ text-align: center;
101
+ padding: 8px;
102
+ background-color: #24292e;
103
+ color: white;
104
+ font-size: 14px;
105
+ }
106
+ .github-link a {
107
+ color: white;
108
+ text-decoration: none;
109
+ }
110
+ .github-link a:hover {
111
+ text-decoration: underline;
112
+ }
113
+ /* Scrollbar styles */
114
+ body::-webkit-scrollbar {
115
+ height: 8px;
116
+ }
117
+
118
+ body::-webkit-scrollbar-track {
119
+ background: #f1f1f1;
120
+ }
121
+
122
+ body::-webkit-scrollbar-thumb {
123
+ background: #888;
124
+ border-radius: 4px;
125
+ }
126
+
127
+ body::-webkit-scrollbar-thumb:hover {
128
+ background: #555;
129
+ }
130
+
131
+ .tag.text {
132
+ background-color: #9c27b0;
133
+ color: white;
134
+ }
135
+ .tag.audio {
136
+ background-color: #ff9800;
137
+ color: white;
138
+ }
139
+ .tag.vision {
140
+ background-color: #03a9f4;
141
+ color: white;
142
+ }
143
+ .tag.multimodal {
144
+ background-color: #795548;
145
+ color: white;
146
+ }
147
+ .tag.announcement {
148
+ background-color: #607d8b;
149
+ color: white;
150
+ }
151
+
152
+ .filter-group {
153
+ display: flex;
154
+ flex-direction: column;
155
+ align-items: center;
156
+ gap: 15px;
157
+ padding: 20px 0;
158
+ background-color: white;
159
+ border-bottom: 1px solid #eee;
160
+ }
161
+
162
+ .toggle-container {
163
+ display: flex;
164
+ gap: 8px;
165
+ }
166
+
167
+ .dropdown-filters {
168
+ display: flex;
169
+ gap: 8px;
170
+ }
171
+
172
+ .toggle-button {
173
+ padding: 6px 12px;
174
+ border: 1px solid #ddd;
175
+ border-radius: 15px;
176
+ background-color: white;
177
+ font-size: 13px;
178
+ cursor: pointer;
179
+ transition: all 0.2s ease;
180
+ }
181
+
182
+ .toggle-button.active {
183
+ background-color: #2196f3;
184
+ border-color: #2196f3;
185
+ color: white;
186
+ }
187
+
188
+ select {
189
+ padding: 6px 12px;
190
+ border: 1px solid #ddd;
191
+ border-radius: 15px;
192
+ font-size: 13px;
193
+ background-color: white;
194
+ cursor: pointer;
195
+ }
196
+
197
+ .counter-container {
198
+ text-align: center;
199
+ padding: 15px;
200
+ font-size: 14px;
201
+ color: #666;
202
+ background-color: #f8f9fa;
203
+ }
204
+
205
+ .counter-item span {
206
+ font-weight: bold;
207
+ color: #2196f3;
208
+ }
209
+
210
+ .counter-divider {
211
+ margin: 0 10px;
212
+ color: #ddd;
213
+ }
214
+ </style>
215
+ </head>
216
+ <body>
217
+ <div class="github-link">
218
+ <a href="#" target="_blank">View on GitHub</a>
219
+ </div>
220
+ <div class="filter-group">
221
+ <div class="toggle-container">
222
+ <button class="toggle-button active" data-filter="all">All Models</button>
223
+ <button class="toggle-button" data-filter="open-source">Open Source</button>
224
+ <button class="toggle-button" data-filter="api-only">API Only</button>
225
+ </div>
226
+ <div class="dropdown-filters">
227
+ <select id="modalityFilter" onchange="filterByModality(this.value)">
228
+ <option value="all">All Modalities</option>
229
+ <option value="text">Text</option>
230
+ <option value="audio">Audio</option>
231
+ <option value="vision">Vision</option>
232
+ <option value="multimodal">Multimodal</option>
233
+ </select>
234
+ <select id="typeFilter" onchange="filterByType(this.value)">
235
+ <option value="all">All Types</option>
236
+ <option value="model">Models</option>
237
+ <option value="announcement">Announcements</option>
238
+ </select>
239
+ </div>
240
+ </div>
241
+ <div class="counter-container">
242
+ <span class="counter-item">
243
+ <span id="open-source-count">0</span> Open Source
244
+ </span>
245
+ <span class="counter-divider">·</span>
246
+ <span class="counter-item">
247
+ <span id="api-only-count">0</span> API Only
248
+ </span>
249
+ </div>
250
+ <div class="timeline">
251
+ <div class="month">
252
+ <h3>January 2025</h3>
253
+ <div class="event">
254
+ <h4>GPT-5 Announcement</h4>
255
+ <p>OpenAI announces GPT-5 development completion</p>
256
+ <span class="tag api-only">API Only</span>
257
+ <span class="tag text">Text</span>
258
+ <span class="tag announcement">Announcement</span>
259
+ </div>
260
+ <div class="event">
261
+ <h4>Anthropic Claude 4</h4>
262
+ <p>Anthropic releases Claude 4 with enhanced reasoning</p>
263
+ <span class="tag api-only">API Only</span>
264
+ <span class="tag text">Text</span>
265
+ </div>
266
+ </div>
267
+ <div class="month">
268
+ <h3>February 2025</h3>
269
+ <div class="event">
270
+ <h4>Meta's AudioCraft 2.0</h4>
271
+ <p>Open source audio generation model</p>
272
+ <span class="tag open-source">Open Weights</span>
273
+ <span class="tag audio">Audio</span>
274
+ </div>
275
+ <div class="event">
276
+ <h4>Google Gemini Ultra</h4>
277
+ <p>Next generation multimodal model</p>
278
+ <span class="tag api-only">API Only</span>
279
+ <span class="tag multimodal">Multimodal</span>
280
+ </div>
281
+ </div>
282
+ <div class="month">
283
+ <h3>March 2025</h3>
284
+ <div class="event">
285
+ <h4>Stability AI ImageGen V5</h4>
286
+ <p>Open source image generation</p>
287
+ <span class="tag open-source">Open Weights</span>
288
+ <span class="tag vision">Vision</span>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ <script>
293
+ function updateCounts() {
294
+ const openSourceCount = document.querySelectorAll('.tag.open-source').length;
295
+ const apiOnlyCount = document.querySelectorAll('.tag.api-only').length;
296
+
297
+ document.getElementById('open-source-count').textContent = openSourceCount;
298
+ document.getElementById('api-only-count').textContent = apiOnlyCount;
299
+ }
300
+
301
+ let currentFilters = {
302
+ category: 'all',
303
+ modality: 'all',
304
+ type: 'all'
305
+ };
306
+
307
+ function filterByModality(modality) {
308
+ currentFilters.modality = modality;
309
+ applyFilters();
310
+ }
311
+
312
+ function filterByType(type) {
313
+ currentFilters.type = type;
314
+ applyFilters();
315
+ }
316
+
317
+ function filterEvents(category) {
318
+ // Update button states
319
+ const buttons = document.querySelectorAll('.toggle-button');
320
+ buttons.forEach(button => {
321
+ button.classList.remove('active');
322
+ if (button.getAttribute('data-filter') === category) {
323
+ button.classList.add('active');
324
+ }
325
+ });
326
+
327
+ currentFilters.category = category;
328
+ applyFilters();
329
+ }
330
+
331
+ function applyFilters() {
332
+ const events = document.querySelectorAll('.event');
333
+
334
+ events.forEach(event => {
335
+ const matchesCategory = currentFilters.category === 'all' ||
336
+ event.querySelector(`.tag.${currentFilters.category}`);
337
+ const matchesModality = currentFilters.modality === 'all' ||
338
+ event.querySelector(`.tag.${currentFilters.modality}`);
339
+ const matchesType = currentFilters.type === 'all' ||
340
+ (currentFilters.type === 'announcement' ?
341
+ event.querySelector('.tag.announcement') :
342
+ !event.querySelector('.tag.announcement'));
343
+
344
+ event.style.display = (matchesCategory && matchesModality && matchesType) ? 'block' : 'none';
345
+ });
346
+
347
+ // Check for empty months and hide them
348
+ const months = document.querySelectorAll('.month');
349
+ months.forEach(month => {
350
+ const visibleEvents = Array.from(month.querySelectorAll('.event')).filter(event =>
351
+ event.style.display !== 'none'
352
+ );
353
+ month.style.display = visibleEvents.length > 0 ? 'flex' : 'none';
354
+ });
355
+
356
+ updateCounts();
357
+ }
358
+
359
+ // Update event listeners when the page loads
360
+ document.addEventListener('DOMContentLoaded', function() {
361
+ const buttons = document.querySelectorAll('.toggle-button');
362
+ buttons.forEach(button => {
363
+ button.addEventListener('click', function() {
364
+ filterEvents(this.getAttribute('data-filter'));
365
+ });
366
+ });
367
+ updateCounts();
368
+ });
369
+ </script>
370
+ </body>
371
+ </html>