| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Evolution Interactive Timeline</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <header> |
| <h1>The Evolution of AI</h1> |
| <p>Click a card to explore each era's technical depth</p> |
| </header> |
|
|
| <div class="timeline-wrapper"> |
| <div class="era-card" onclick="toggleCard(this)"> |
| <div class="card-header"> |
| <span class="year">1950 – 1980</span> |
| <h2 class="era-name">Foundational & Symbolic AI</h2> |
| </div> |
| <div class="card-content"> |
| <div class="grid-section"> |
| <div class="info-block"> |
| <h3>Key Shift</h3> |
| <p><strong>Symbolic Logic:</strong> The belief that intelligence is the formal manipulation of symbols and rules.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Main Concepts & Tech</h3> |
| <ul> |
| <li>The Turing Test</li> |
| <li>Lisp & Prolog Languages</li> |
| <li>Search Algorithms (BFS/DFS)</li> |
| <li>The Perceptron (Early Neural Nets)</li> |
| </ul> |
| </div> |
| <div class="info-block"> |
| <h3>Advantages</h3> |
| <p>High transparency; every decision can be traced back to a specific logical rule.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Challenges</h3> |
| <p>Moravec's Paradox: Logic is easy, but perception/mobility is hard. Resulted in the 1st AI Winter.</p> |
| </div> |
| <div class="card-footer"> |
| <a href="foundational.html" class="details-link">View Full Technical Details →</a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="era-card" onclick="toggleCard(this)"> |
| <div class="card-header"> |
| <span class="year">1980 – 1995</span> |
| <h2 class="era-name">Expert Systems Era</h2> |
| </div> |
| <div class="card-content"> |
| <div class="grid-section"> |
| <div class="info-block"> |
| <h3>Key Shift</h3> |
| <p><strong>Knowledge Engineering:</strong> Transferring specific human domain knowledge into "If-Then" engines.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Main Concepts & Tech</h3> |
| <ul> |
| <li>Inference Engines</li> |
| <li>Knowledge Bases</li> |
| <li>MYCIN & XCON Systems</li> |
| <li>Backpropagation Revival</li> |
| </ul> |
| </div> |
| <div class="info-block"> |
| <h3>Advantages</h3> |
| <p>Commercial viability in specialized fields like medicine and oil exploration.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Challenges</h3> |
| <p>The "Knowledge Acquisition Bottleneck"—it was too hard to manually code everything a human knows.</p> |
| </div> |
| <div class="card-footer"> |
| <a href="expert-systems.html" class="details-link">View Full Technical Details →</a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="era-card" onclick="toggleCard(this)"> |
| <div class="card-header"> |
| <span class="year">1995 – 2010</span> |
| <h2 class="era-name">Statistical Machine Learning</h2> |
| </div> |
| <div class="card-content"> |
| <div class="grid-section"> |
| <div class="info-block"> |
| <h3>Key Shift</h3> |
| <p><strong>Data over Rules:</strong> Moving from "telling" the AI what to do to "showing" it patterns in data.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Main Concepts & Tech</h3> |
| <ul> |
| <li>Support Vector Machines (SVM)</li> |
| <li>Random Forests</li> |
| <li>Bayesian Networks</li> |
| <li>Initial Big Data Mining</li> |
| </ul> |
| </div> |
| <div class="info-block"> |
| <h3>Advantages</h3> |
| <p>Robustness; can handle noisy, real-world data better than rigid logical rules.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Challenges</h3> |
| <p>Feature Engineering: Humans still had to manually tell the AI which parts of the data were important.</p> |
| </div> |
| <div class="card-footer"> |
| <a href="statistical-ml.html" class="details-link">View Full Technical Details →</a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="era-card" onclick="toggleCard(this)"> |
| <div class="card-header"> |
| <span class="year">2011 – 2020</span> |
| <h2 class="era-name">Deep Learning Era</h2> |
| </div> |
| <div class="card-content"> |
| <div class="grid-section"> |
| <div class="info-block"> |
| <h3>Key Shift</h3> |
| <p><strong>Hidden Representations:</strong> Deep Neural Networks that learn their own features directly from raw data.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Main Concepts & Tech</h3> |
| <ul> |
| <li>CNNs (Vision) & RNNs (Sequence)</li> |
| <li>GPU Computing (Nvidia)</li> |
| <li>GANs (Generative Adversarial Nets)</li> |
| <li>ImageNet Breakthrough</li> |
| </ul> |
| </div> |
| <div class="info-block"> |
| <h3>Advantages</h3> |
| <p>Superhuman performance in image recognition and speech-to-text.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Challenges</h3> |
| <p>The "Black Box": Hard to explain *why* a deep network made a specific decision.</p> |
| </div> |
| <div class="card-footer"> |
| <a href="deep-learning.html" class="details-link">View Full Technical Details →</a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="era-card current" onclick="toggleCard(this)"> |
| <div class="card-header"> |
| <span class="year">2021 – 2026</span> |
| <h2 class="era-name">Generative & Agentic AI</h2> |
| </div> |
| <div class="card-content"> |
| <div class="grid-section"> |
| <div class="info-block"> |
| <h3>Key Shift</h3> |
| <p><strong>Autonomy & Multimodality:</strong> From AI that predicts to AI that creates and acts across all media.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Main Concepts & Tech</h3> |
| <ul> |
| <li>Transformers & Attention Mechanisms</li> |
| <li>LLMs & Multimodal Models (Vision/Audio)</li> |
| <li>AI Agents (Planning & Tool-Use)</li> |
| <li>RLHF (Human Feedback Tuning)</li> |
| </ul> |
| </div> |
| <div class="info-block"> |
| <h3>Advantages</h3> |
| <p>Drastic reduction in the barrier to entry for complex tasks; autonomous problem solving.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Challenges</h3> |
| <p>Hallucinations, AI safety, and the massive compute energy required for training.</p> |
| </div> |
| <div class="card-footer"> |
| <a href="generative-agentic.html" class="details-link">View Full Technical Details →</a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="era-card future" onclick="toggleCard(this)"> |
| <div class="card-header"> |
| <span class="year">2026+</span> |
| <h2 class="era-name">Quantum AI Frontier</h2> |
| </div> |
| <div class="card-content"> |
| <div class="grid-section"> |
| <div class="info-block"> |
| <h3>Key Shift</h3> |
| <p><strong>Exponential Processing:</strong> Utilizing quantum mechanics to break the limits of classical silicon.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Main Concepts & Tech</h3> |
| <ul> |
| <li>Quantum Machine Learning (QML)</li> |
| <li>Superposition & Entanglement</li> |
| <li>Quantum Annealing</li> |
| <li>Hybrid Quantum-Classical Models</li> |
| </ul> |
| </div> |
| <div class="info-block"> |
| <h3>Advantages</h3> |
| <p>Solving optimization problems and molecular simulations that are impossible for current supercomputers.</p> |
| </div> |
| <div class="info-block"> |
| <h3>Challenges</h3> |
| <p>Error Correction (Decoherence) and the extreme cold temperatures required for hardware.</p> |
| </div> |
| <div class="card-footer"> |
| <a href="quantum-ai.html" class="details-link">View Full Technical Details →</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="script.js"></script> |
| </body> |
| </html> |
