The History of Artificial Intelligencehttps://cdn.tailwindcss.comhttps://cdn.jsdelivr.net/npm/chart.js
/* Chart Container Styling - Critical for Responsiveness */
.chart-container {
position: relative;
width: 100%;
max-width: 800px; /* Max width to prevent stretching on large screens */
height: 40vh; /* Responsive height */
max-height: 400px; /* Cap height */
min-height: 300px; /* Min height for mobile */
margin: 0 auto;
}
/* Custom Scrollbar for text areas */
.custom-scroll::-webkit-scrollbar {
width: 8px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
body {
background-color: #fcfbf9; /* Warm neutral background */
color: #1f2937;
}
.tab-active {
border-bottom: 3px solid #ea580c; /* Orange-600 */
color: #ea580c;
font-weight: 600;
}
.tab-inactive {
color: #6b7280;
border-bottom: 3px solid transparent;
}
.tab-inactive:hover {
color: #374151;
border-bottom: 3px solid #d1d5db;
}
/* Card Hover Effect */
.founder-card {
transition: all 0.3s ease;
}
.founder-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
Show details.
- No SVG used.
2. Founder Cards (HTML/Tailwind):
- Goal: Present biographical data from Part I.
- Method: Flex/Grid cards with Unicode icons for visual interest.
- Interaction: Hover effects, Filtering by category.
- No SVG used.
-->
History of Artificial Intelligence
From Theoretical Origins to Generative AI
The Cycles of Boom and Bust
AI history is defined by "Summers" (periods of extreme optimism and funding) and "Winters" (periods of disappointment).
Use the interactive chart below to trace the trajectory of the field. Click on any data point to reveal the watershed moments of that era.
👆
Select a point on the chart to explore the era.
Chronological Key Events
The Founding Fathers
AI was not discovered; it was invented by a small group of thinkers. They approached the problem from different angles: some focused on logic and symbols, others on biology and learning. Use the filters below to explore their distinct contributions.
// --- DATA STORE ---
// Part I: The Founding Fathers
const foundersData = [
{
id: 1,
name: "Alan Turing",
years: "1912–1954",
role: "The Theoretical Pioneer",
category: "Theory",
icon: "📐",
contribution: "Universal Turing Machine",
desc: "Before computers existed, Turing conceptualized them. He proposed a practical test for intelligence: can a machine converse indistinguishably from a human?",
keyWork: "The Turing Test (1950)"
},
{
id: 2,
name: "John McCarthy",
years: "1927–2011",
role: "The Father of the Name",
category: "Logic",
icon: "🏷️",
contribution: "Coined 'Artificial Intelligence'",
desc: "McCarthy gave the field its identity in 1955 and created LISP (1958), the standard programming language for AI research for decades.",
keyWork: "LISP (1958)"
},
{
id: 3,
name: "Marvin Minsky",
years: "1927–2016",
role: "The Cognitive Architect",
category: "Theory",
icon: "🧠",
contribution: "SNARC Neural Network",
desc: "Co-founder of the MIT AI Lab. Built the first neural network simulator using vacuum tubes and developed 'Frames Theory' for knowledge representation.",
keyWork: "SNARC (1951)"
},
{
id: 4,
name: "Newell & Simon",
years: "1927–1992 / 1916–2001",
role: "The Symbolic Reasoners",
category: "Logic",
icon: "🧩",
contribution: "Logic Theorist",
desc: "Believed intelligence was symbol manipulation. Created the first running AI program that proved mathematical theorems more elegantly than humans.",
keyWork: "General Problem Solver (1957)"
},
{
id: 5,
name: "Arthur Samuel",
years: "1901–1990",
role: "The Machine Learning Pioneer",
category: "Learning",
icon: "♟️",
contribution: "Coined 'Machine Learning'",
desc: "Wrote a checkers program that learned by playing thousands of games against itself, proving computers could learn rather than just be programmed.",
keyWork: "Checkers Program (1959)"
},
{
id: 6,
name: "Frank Rosenblatt",
years: "1928–1971",
role: "The Connectionist",
category: "Learning",
icon: "👁️",
contribution: "The Perceptron",
desc: "Looked to biology for inspiration. Built the Mark I Perceptron, an electronic device that learned to recognize shapes—the ancestor of modern Deep Learning.",
keyWork: "The Perceptron (1957)"
}
];
// Part II: Watershed Moments (mapped for Chart)
// Sentiment Score: Arbitrary 0-100 scale representing "Hype/Optimism"
const timelineData = [
{
year: 1943,
label: "Pre-History",
sentiment: 30,
title: "The Theoretical Roots",
events: [
{ year: "1943", title: "McCulloch-Pitts Neuron", text: "First mathematical model of a neural network." },
{ year: "1950", title: "Turing Test", text: "Alan Turing proposes the imitation game." }
]
},
{
year: 1956,
label: "The Birth",
sentiment: 75,
title: "The Dartmouth Conference",
events: [
{ year: "1956", title: "Official Birth of AI", text: "McCarthy, Minsky, and others predict machines will equal human intelligence within a generation." }
]
},
{
year: 1966,
label: "Early Optimism",
sentiment: 90,
title: "The Golden Years",
events: [
{ year: "1966", title: "ELIZA", text: "First chatbot simulating a psychotherapist." },
{ year: "1969", title: "Shakey the Robot", text: "First mobile robot that could reason about its actions." }
]
},
{
year: 1974,
label: "Winter I",
sentiment: 20,
title: "The First AI Winter",
events: [
{ year: "1973", title: "Lighthill Report", text: "Scathing critique leading to massive funding cuts in US and UK." }
]
},
{
year: 1982,
label: "Expert Boom",
sentiment: 80,
title: "Expert Systems",
events: [
{ year: "1980", title: "R1/XCON", text: "Commercial success saving DEC millions." },
{ year: "1982", title: "Japan's 5th Gen Project", text: "Massive investment in AI supercomputers." }
]
},
{
year: 1987,
label: "Winter II",
sentiment: 15,
title: "The Second AI Winter",
events: [
{ year: "1987", title: "Lisp Machine Collapse", text: "Specialized hardware becomes obsolete; 'AI' becomes a toxic term." }
]
},
{
year: 1997,
label: "Narrow AI",
sentiment: 50,
title: "Triumph of Narrow AI",
events: [
{ year: "1997", title: "Deep Blue", text: "IBM's system defeats chess champion Kasparov." },
{ year: "2002", title: "Roomba", text: "Autonomous robots enter the home." },
{ year: "2011", title: "Watson", text: "IBM Watson wins Jeopardy!" }
]
},
{
year: 2012,
label: "Deep Learning",
sentiment: 85,
title: "The Deep Learning Revolution",
events: [
{ year: "2012", title: "AlexNet", text: "Hinton & students crush image recognition benchmarks." },
{ year: "2016", title: "AlphaGo", text: "DeepMind defeats Go master Lee Sedol." }
]
},
{
year: 2022,
label: "Generative AI",
sentiment: 100,
title: "The Age of Generative AI",
events: [
{ year: "2017", title: "Transformer Paper", text: "'Attention Is All You Need' enables LLMs." },
{ year: "2022", title: "ChatGPT", text: "AI becomes a mass consumer utility." }
]
}
];
// --- UI LOGIC ---
// State
let currentTab = 'timeline';
let chartInstance = null;
// Navigation
function switchTab(tab) {
currentTab = tab;
const timelineView = document.getElementById('view-timeline');
const foundersView = document.getElementById('view-founders');
const navTimeline = document.getElementById('nav-timeline');
const navFounders = document.getElementById('nav-founders');
if (tab === 'timeline') {
timelineView.classList.remove('hidden');
foundersView.classList.add('hidden');
navTimeline.className = "tab-active pb-2 text-sm uppercase tracking-wide transition-colors";
navFounders.className = "tab-inactive pb-2 text-sm uppercase tracking-wide transition-colors cursor-pointer";
} else {
timelineView.classList.add('hidden');
foundersView.classList.remove('hidden');
navTimeline.className = "tab-inactive pb-2 text-sm uppercase tracking-wide transition-colors cursor-pointer";
navFounders.className = "tab-active pb-2 text-sm uppercase tracking-wide transition-colors";
}
}
// --- CHART IMPLEMENTATION ---
function initChart() {
const ctx = document.getElementById('hypeChart').getContext('2d');
const labels = timelineData.map(d => d.year);
const dataPoints = timelineData.map(d => d.sentiment);
chartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Optimism & Hype Level',
data: dataPoints,
borderColor: '#ea580c', // Orange-600
backgroundColor: 'rgba(234, 88, 12, 0.1)',
borderWidth: 3,
pointBackgroundColor: '#fff',
pointBorderColor: '#ea580c',
pointHoverBackgroundColor: '#ea580c',
pointRadius: 6,
pointHoverRadius: 9,
tension: 0.3, // Smooth curves
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
const index = context.dataIndex;
return timelineData[index].label;
}
},
backgroundColor: '#1f2937',
titleFont: { size: 14 },
bodyFont: { size: 14 },
padding: 10,
displayColors: false
},
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
max: 110,
ticks: { display: false },
grid: { display: false },
title: {
display: true,
text: 'Optimism / Hype Level',
font: { weight: 'bold' }
}
},
x: {
grid: {
borderDash: [5, 5]
}
}
},
onClick: (e, activeEls) => {
if (activeEls.length > 0) {
const index = activeEls[0].index;
updateEventDisplay(index);
}
}
}
});
// Initialize with the first "real" era (1956)
updateEventDisplay(1);
}
function updateEventDisplay(index) {
const data = timelineData[index];
const display = document.getElementById('event-display');
let eventsHtml = data.events.map(ev => `
