Starboy001 commited on
Commit
8db404a
·
verified ·
1 Parent(s): 968dfbc

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +440 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tracking
3
- emoji: 🦀
4
- colorFrom: yellow
5
  colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tracking
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,440 @@
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>AI Evolution Tracker</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .timeline-item::before {
11
+ content: '';
12
+ position: absolute;
13
+ width: 20px;
14
+ height: 20px;
15
+ left: -10px;
16
+ background: #3b82f6;
17
+ border-radius: 50%;
18
+ top: 0;
19
+ }
20
+
21
+ .gradient-bg {
22
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
23
+ }
24
+
25
+ .card-hover:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
28
+ }
29
+
30
+ .fade-in {
31
+ animation: fadeIn 0.5s ease-in;
32
+ }
33
+
34
+ @keyframes fadeIn {
35
+ from { opacity: 0; }
36
+ to { opacity: 1; }
37
+ }
38
+
39
+ .search-highlight {
40
+ background-color: #fef08a;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50">
45
+ <!-- Header -->
46
+ <header class="gradient-bg text-white shadow-lg">
47
+ <div class="container mx-auto px-4 py-6">
48
+ <div class="flex justify-between items-center">
49
+ <div class="flex items-center space-x-3">
50
+ <i class="fas fa-robot text-3xl"></i>
51
+ <h1 class="text-2xl font-bold">AI Evolution Tracker</h1>
52
+ </div>
53
+ <div class="flex items-center space-x-4">
54
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-blue-700 transition">
55
+ <i class="fas fa-moon"></i>
56
+ </button>
57
+ <button class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
58
+ Subscribe
59
+ </button>
60
+ </div>
61
+ </div>
62
+ <div class="mt-8 text-center">
63
+ <h2 class="text-4xl font-bold mb-4">Journey Through AI's Evolution</h2>
64
+ <p class="text-xl max-w-3xl mx-auto">Explore the milestones that shaped artificial intelligence from its theoretical foundations to today's cutting-edge breakthroughs.</p>
65
+ </div>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Main Content -->
70
+ <main class="container mx-auto px-4 py-8">
71
+ <!-- Search and Filter -->
72
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
73
+ <div class="flex flex-col md:flex-row gap-4">
74
+ <div class="flex-1 relative">
75
+ <input type="text" id="search-input" placeholder="Search AI milestones (e.g., 'Neural Networks', 'GPT')"
76
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
77
+ <i class="fas fa-search absolute right-3 top-3.5 text-gray-400"></i>
78
+ </div>
79
+ <div class="flex space-x-2">
80
+ <select id="decade-filter" class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
81
+ <option value="">All Decades</option>
82
+ <option value="1950">1950s</option>
83
+ <option value="1960">1960s</option>
84
+ <option value="1970">1970s</option>
85
+ <option value="1980">1980s</option>
86
+ <option value="1990">1990s</option>
87
+ <option value="2000">2000s</option>
88
+ <option value="2010">2010s</option>
89
+ <option value="2020">2020s</option>
90
+ </select>
91
+ <select id="category-filter" class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
92
+ <option value="">All Categories</option>
93
+ <option value="theory">Theory</option>
94
+ <option value="hardware">Hardware</option>
95
+ <option value="software">Software</option>
96
+ <option value="application">Application</option>
97
+ </select>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Timeline -->
103
+ <div class="relative">
104
+ <!-- Timeline line -->
105
+ <div class="absolute left-1/2 h-full w-1 bg-blue-200 transform -translate-x-1/2"></div>
106
+
107
+ <!-- Timeline items -->
108
+ <div id="timeline-container" class="space-y-12">
109
+ <!-- Items will be dynamically inserted here -->
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Latest Research Section -->
114
+ <section class="mt-16">
115
+ <h2 class="text-3xl font-bold mb-6 flex items-center">
116
+ <i class="fas fa-flask mr-3 text-blue-600"></i> Latest Research (2023-2024)
117
+ </h2>
118
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
119
+ <!-- Research cards will be dynamically inserted here -->
120
+ </div>
121
+ </section>
122
+
123
+ <!-- Newsletter -->
124
+ <div class="mt-16 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-8 text-center">
125
+ <h2 class="text-2xl font-bold mb-2">Stay Updated on AI Advancements</h2>
126
+ <p class="text-gray-600 mb-6">Get weekly updates on the latest AI research and breakthroughs</p>
127
+ <div class="max-w-md mx-auto flex">
128
+ <input type="email" placeholder="Your email address" class="flex-1 px-4 py-3 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
129
+ <button class="bg-blue-600 text-white px-6 py-3 rounded-r-lg hover:bg-blue-700 transition">Subscribe</button>
130
+ </div>
131
+ </div>
132
+ </main>
133
+
134
+ <!-- Footer -->
135
+ <footer class="bg-gray-800 text-white py-12">
136
+ <div class="container mx-auto px-4">
137
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
138
+ <div>
139
+ <h3 class="text-xl font-bold mb-4">AI Evolution Tracker</h3>
140
+ <p class="text-gray-400">Tracking the journey of artificial intelligence from inception to innovation.</p>
141
+ </div>
142
+ <div>
143
+ <h4 class="font-bold mb-4">Explore</h4>
144
+ <ul class="space-y-2">
145
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Timeline</a></li>
146
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Research Papers</a></li>
147
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Key Figures</a></li>
148
+ </ul>
149
+ </div>
150
+ <div>
151
+ <h4 class="font-bold mb-4">Resources</h4>
152
+ <ul class="space-y-2">
153
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Datasets</a></li>
154
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
155
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Glossary</a></li>
156
+ </ul>
157
+ </div>
158
+ <div>
159
+ <h4 class="font-bold mb-4">Connect</h4>
160
+ <div class="flex space-x-4">
161
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
162
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a>
163
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
168
+ <p>&copy; 2023 AI Evolution Tracker. All rights reserved.</p>
169
+ </div>
170
+ </div>
171
+ </footer>
172
+
173
+ <script>
174
+ // AI Milestones Data
175
+ const milestones = [
176
+ {
177
+ year: 1950,
178
+ title: "Turing Test Proposed",
179
+ description: "Alan Turing publishes 'Computing Machinery and Intelligence' introducing the Turing Test as a measure of machine intelligence.",
180
+ category: "theory",
181
+ icon: "fa-brain"
182
+ },
183
+ {
184
+ year: 1956,
185
+ title: "Dartmouth Conference",
186
+ description: "The term 'Artificial Intelligence' is coined at the Dartmouth Summer Research Project, marking the birth of AI as a field.",
187
+ category: "theory",
188
+ icon: "fa-users"
189
+ },
190
+ {
191
+ year: 1966,
192
+ title: "ELIZA Created",
193
+ description: "Joseph Weizenbaum develops ELIZA, one of the first natural language processing programs that could simulate conversation.",
194
+ category: "software",
195
+ icon: "fa-comments"
196
+ },
197
+ {
198
+ year: 1972,
199
+ title: "First Intelligent Robot",
200
+ description: "Stanford Research Institute builds Shakey, the first mobile robot with the ability to perceive and reason about its surroundings.",
201
+ category: "hardware",
202
+ icon: "fa-robot"
203
+ },
204
+ {
205
+ year: 1980,
206
+ title: "Expert Systems Boom",
207
+ description: "Commercialization of expert systems begins, with applications in medicine, chemistry, and other fields.",
208
+ category: "application",
209
+ icon: "fa-microscope"
210
+ },
211
+ {
212
+ year: 1986,
213
+ title: "Backpropagation Rediscovered",
214
+ description: "Rumelhart, Hinton, and Williams popularize backpropagation for training neural networks, reviving interest in connectionism.",
215
+ category: "theory",
216
+ icon: "fa-project-diagram"
217
+ },
218
+ {
219
+ year: 1997,
220
+ title: "Deep Blue Defeats Kasparov",
221
+ description: "IBM's Deep Blue becomes the first computer to defeat a reigning world chess champion under standard chess tournament time controls.",
222
+ category: "application",
223
+ icon: "fa-chess"
224
+ },
225
+ {
226
+ year: 2011,
227
+ title: "IBM Watson Wins Jeopardy!",
228
+ description: "Watson defeats former Jeopardy! champions Brad Rutter and Ken Jennings in a two-game match.",
229
+ category: "application",
230
+ icon: "fa-trophy"
231
+ },
232
+ {
233
+ year: 2012,
234
+ title: "AlexNet Revolution",
235
+ description: "AlexNet significantly outperforms all other competitors in the ImageNet competition, sparking the deep learning revolution.",
236
+ category: "software",
237
+ icon: "fa-image"
238
+ },
239
+ {
240
+ year: 2016,
241
+ title: "AlphaGo Defeats Lee Sedol",
242
+ description: "Google DeepMind's AlphaGo defeats world champion Lee Sedol in the complex board game Go, a major milestone for AI.",
243
+ category: "application",
244
+ icon: "fa-gamepad"
245
+ },
246
+ {
247
+ year: 2020,
248
+ title: "GPT-3 Released",
249
+ description: "OpenAI releases GPT-3, a 175 billion parameter language model that demonstrates remarkable few-shot learning capabilities.",
250
+ category: "software",
251
+ icon: "fa-language"
252
+ },
253
+ {
254
+ year: 2022,
255
+ title: "DALL-E 2 & Stable Diffusion",
256
+ description: "Text-to-image models like DALL-E 2 and Stable Diffusion demonstrate AI's creative potential in generating high-quality images from text prompts.",
257
+ category: "software",
258
+ icon: "fa-paint-brush"
259
+ },
260
+ {
261
+ year: 2023,
262
+ title: "GPT-4 & Multimodal AI",
263
+ description: "The release of GPT-4 and other multimodal models that can process both text and images, pushing the boundaries of general AI capabilities.",
264
+ category: "software",
265
+ icon: "fa-eye"
266
+ }
267
+ ];
268
+
269
+ // Latest Research Data
270
+ const latestResearch = [
271
+ {
272
+ title: "Gemini: Google's Multimodal Model",
273
+ summary: "Google's latest AI model that can seamlessly understand and operate across text, images, audio, and video.",
274
+ date: "Dec 2023",
275
+ link: "#"
276
+ },
277
+ {
278
+ title: "AI for Scientific Discovery",
279
+ summary: "Breakthroughs in using AI to accelerate scientific research, from drug discovery to materials science.",
280
+ date: "Nov 2023",
281
+ link: "#"
282
+ },
283
+ {
284
+ title: "Autonomous Agent Frameworks",
285
+ summary: "New architectures for creating AI agents that can autonomously perform complex tasks with minimal human intervention.",
286
+ date: "Oct 2023",
287
+ link: "#"
288
+ },
289
+ {
290
+ title: "AI Safety Research",
291
+ summary: "Advances in aligning AI systems with human values and ensuring their safe deployment.",
292
+ date: "Sep 2023",
293
+ link: "#"
294
+ },
295
+ {
296
+ title: "Efficient LLM Training",
297
+ summary: "Techniques to reduce the computational cost of training large language models while maintaining performance.",
298
+ date: "Aug 2023",
299
+ link: "#"
300
+ },
301
+ {
302
+ title: "Neural Rendering Advances",
303
+ summary: "Improved methods for generating photorealistic 3D scenes from 2D images using neural networks.",
304
+ date: "Jul 2023",
305
+ link: "#"
306
+ }
307
+ ];
308
+
309
+ // Initialize the page
310
+ document.addEventListener('DOMContentLoaded', function() {
311
+ renderTimeline();
312
+ renderLatestResearch();
313
+ setupEventListeners();
314
+ setupThemeToggle();
315
+ });
316
+
317
+ // Render the timeline
318
+ function renderTimeline(filteredMilestones = milestones) {
319
+ const container = document.getElementById('timeline-container');
320
+ container.innerHTML = '';
321
+
322
+ filteredMilestones.forEach((milestone, index) => {
323
+ const positionClass = index % 2 === 0 ? 'md:left-0 md:text-right' : 'md:left-1/2 md:pl-8';
324
+
325
+ const item = document.createElement('div');
326
+ item.className = `relative timeline-item pl-8 md:pl-0 md:w-1/2 mx-auto ${positionClass} fade-in`;
327
+
328
+ item.innerHTML = `
329
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover transition-all duration-300">
330
+ <div class="flex items-center mb-2">
331
+ <i class="fas ${milestone.icon} text-blue-600 mr-2"></i>
332
+ <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full
333
+ ${milestone.category === 'theory' ? 'bg-purple-100 text-purple-800' :
334
+ milestone.category === 'hardware' ? 'bg-green-100 text-green-800' :
335
+ milestone.category === 'software' ? 'bg-blue-100 text-blue-800' :
336
+ 'bg-yellow-100 text-yellow-800'}">
337
+ ${milestone.category.charAt(0).toUpperCase() + milestone.category.slice(1)}
338
+ </span>
339
+ </div>
340
+ <h3 class="text-xl font-bold mb-2">${milestone.title}</h3>
341
+ <p class="text-gray-600 mb-3">${milestone.description}</p>
342
+ <div class="text-sm font-semibold text-blue-600">${milestone.year}</div>
343
+ </div>
344
+ `;
345
+
346
+ container.appendChild(item);
347
+ });
348
+ }
349
+
350
+ // Render latest research
351
+ function renderLatestResearch() {
352
+ const container = document.querySelector('#timeline-container + section .grid');
353
+ container.innerHTML = '';
354
+
355
+ latestResearch.forEach(research => {
356
+ const card = document.createElement('div');
357
+ card.className = 'bg-white rounded-xl shadow-md overflow-hidden card-hover transition-all duration-300';
358
+
359
+ card.innerHTML = `
360
+ <div class="p-6">
361
+ <div class="flex justify-between items-start mb-2">
362
+ <h3 class="text-lg font-bold">${research.title}</h3>
363
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">${research.date}</span>
364
+ </div>
365
+ <p class="text-gray-600 text-sm mb-4">${research.summary}</p>
366
+ <a href="${research.link}" class="text-blue-600 text-sm font-medium hover:underline">Read more →</a>
367
+ </div>
368
+ `;
369
+
370
+ container.appendChild(card);
371
+ });
372
+ }
373
+
374
+ // Setup event listeners
375
+ function setupEventListeners() {
376
+ const searchInput = document.getElementById('search-input');
377
+ const decadeFilter = document.getElementById('decade-filter');
378
+ const categoryFilter = document.getElementById('category-filter');
379
+
380
+ searchInput.addEventListener('input', filterMilestones);
381
+ decadeFilter.addEventListener('change', filterMilestones);
382
+ categoryFilter.addEventListener('change', filterMilestones);
383
+ }
384
+
385
+ // Filter milestones based on search and filters
386
+ function filterMilestones() {
387
+ const searchTerm = document.getElementById('search-input').value.toLowerCase();
388
+ const decade = document.getElementById('decade-filter').value;
389
+ const category = document.getElementById('category-filter').value;
390
+
391
+ const filtered = milestones.filter(milestone => {
392
+ // Search term matching
393
+ const matchesSearch = searchTerm === '' ||
394
+ milestone.title.toLowerCase().includes(searchTerm) ||
395
+ milestone.description.toLowerCase().includes(searchTerm);
396
+
397
+ // Decade filtering
398
+ const matchesDecade = decade === '' ||
399
+ (milestone.year >= parseInt(decade) && milestone.year < parseInt(decade) + 10);
400
+
401
+ // Category filtering
402
+ const matchesCategory = category === '' || milestone.category === category;
403
+
404
+ return matchesSearch && matchesDecade && matchesCategory;
405
+ });
406
+
407
+ renderTimeline(filtered);
408
+ }
409
+
410
+ // Theme toggle functionality
411
+ function setupThemeToggle() {
412
+ const themeToggle = document.getElementById('theme-toggle');
413
+ const icon = themeToggle.querySelector('i');
414
+
415
+ // Check for saved user preference or use system preference
416
+ const savedTheme = localStorage.getItem('theme');
417
+ const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
418
+
419
+ if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
420
+ document.documentElement.classList.add('dark');
421
+ icon.classList.replace('fa-moon', 'fa-sun');
422
+ } else {
423
+ document.documentElement.classList.remove('dark');
424
+ }
425
+
426
+ // Toggle theme on button click
427
+ themeToggle.addEventListener('click', () => {
428
+ const isDark = document.documentElement.classList.toggle('dark');
429
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
430
+
431
+ if (isDark) {
432
+ icon.classList.replace('fa-moon', 'fa-sun');
433
+ } else {
434
+ icon.classList.replace('fa-sun', 'fa-moon');
435
+ }
436
+ });
437
+ }
438
+ </script>
439
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Starboy001/tracking" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
440
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ An app that can track advancements in ai from beginning to latest research