Show description
From Pattern to Partner: An Interactive Blueprint for Agentic AI
From Pattern to Partner: An Interactive Blueprint for Agentic AI
Agentic AI Blueprint
Overview
Foundations
Architecture
Roadmap
Ethics
Overview
Foundations
Architecture
Roadmap
Ethics
From Pattern to Partner
This interactive application explores a multi-phase strategic research proposal for creating the next generation of Artificial General Intelligence. The goal is to move beyond mere pattern matching towards a nascent "creative agent" capable of grounded understanding, autonomous goal-setting, and genuine ideation. Use the navigation to explore the core pillars of this vision.
Foundational Synthesis
A truly agentic AI cannot be built in a vacuum. Its architecture must be informed by deep principles from diverse scientific fields. This section synthesizes the state-of-the-art across four key domains, extracting the core concepts that serve as the theoretical bedrock for the proposed system. Click on the tabs to explore each pillar.
Cognitive Neuroscience
Developmental Psychology
Reinforcement Learning
Computer Architecture
Architectural Bottlenecks: A Comparison
The physical hardware, or substrate, is as important as the cognitive model. The dominant Von Neumann architecture presents a significant bottleneck for the kind of parallel, continuous learning an AGI requires. This chart compares its efficiency against more suitable, brain-inspired alternatives.
The Architectural Blueprint
Based on the foundational principles, we propose a modular, neuro-symbolic cognitive architecture. This is not a monolithic model but a system of interacting components. Click on any module in the diagram below to learn about its core function, theoretical basis, and how it interfaces with the other parts of the system.
Perception Engine
Grounded World Model
→
Memory Core
Hybrid Memory System
Motivation Engine
Intrinsic Drive
Ideation Engine
The "Spark"
↓
Action Engine
Planning & Execution
Select a module to see its details.
Developmental & Experimental Roadmap
Building an agentic AI is a developmental process, not a single engineering task.…
From Pattern to Partner: An Interactive Blueprint for Agentic AI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>From Pattern to Partner: An Interactive Blueprint for Agentic AI</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: "Warm Neutral Harmony" -->
<!-- Application Structure Plan: The SPA is structured thematically rather than linearly to promote exploration. The user journey starts with a high-level overview and then allows deep dives into four key areas accessible via a sticky top navigation: 1) Foundations (the "Why"), 2) Architecture (the "How"), 3) Roadmap (the "When"), and 4) Ethics (the "Guardrails"). This structure was chosen because the source report is dense and interconnected. A thematic approach allows a user to explore, for instance, the complete "Motivation Engine" concept by seeing its neuroscientific basis (Foundations), its technical design (Architecture), its validation problem (Roadmap), and its safety constraints (Ethics) without scrolling through the entire document. Key interactions include tabbed interfaces to compare foundational fields, an interactive diagram to explore the AI's cognitive architecture, and a clickable timeline for the developmental roadmap. This transforms a passive reading experience into an active, self-directed exploration of the AGI blueprint. -->
<!-- Visualization & Content Choices:
- Report Info: Comparison of four foundational fields. -> Goal: Compare. -> Viz/Method: Tabbed content cards. -> Interaction: Click tabs to switch content. -> Justification: Allows direct comparison without overwhelming the user with a long list. -> Library: HTML/CSS/JS.
- Report Info: The proposed Neuro-Symbolic Cognitive Architecture. -> Goal: Organize & Relate. -> Viz/Method: Interactive diagram built with HTML/CSS. -> Interaction: Clicking on a module reveals its detailed description. -> Justification: Visually communicates the system's structure and the relationship between modules far more effectively than text alone. -> Library: HTML/CSS/JS.
- Report Info: Comparison of Von Neumann and alternative computer architectures. -> Goal: Compare. -> Viz/Method: Bar chart. -> Interaction: Hover for details. -> Justification: A bar chart provides a quick, quantitative comparison of key features like parallelism and efficiency. -> Library: Chart.js.
- Report Info: The multi-phase developmental roadmap. -> Goal: Show Change/Process. -> Viz/Method: Interactive vertical timeline. -> Interaction: Click on a phase to expand details. -> Justification: A timeline is the most intuitive way to represent a sequential, multi-stage process. -> Library: HTML/CSS/JS.
- Report Info: Metrics for Success. -> Goal: Organize. -> Viz/Method: Accordion list. -> Interaction: Click to expand each metric category. -> Justification: An accordion neatly organizes the detailed metrics, preventing a long, monotonous list and allowing the user to focus on one concept at a time. -> Library: HTML/CSS/JS.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body { font-family: 'Inter', sans-serif; background-color: #f8f7f4; color: #4a4a4a; }
.nav-link { transition: all 0.3s ease; }
.nav-link.active { color: #4f46e5; border-bottom-color: #4f46e5; }
.nav-link:not(.active):hover { color: #6366f1; }
.content-section { display: none; }
.content-section.active { display: block; }
.tab-button.active { background-color: #e0e7ff; color: #3730a3; }
.arch-module { cursor: pointer; transition: all 0.3s ease; border-width: 2px; }
.arch-module:hover, .arch-module.active { border-color: #4f46e5; background-color: #eef2ff; }
.timeline-item { position: relative; padding-left: 2.5rem; }
.timeline-dot { position: absolute; left: 0; top: 0.5rem; height: 1rem; width: 1rem; background-color: #a5b4fc; border-radius: 9999px; border: 2px solid white; }
.timeline-line { position: absolute; left: 0.4375rem; top: 1.5rem; bottom: -1rem; width: 2px; background-color: #e0e7ff; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }
.chart-container { position: relative; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; height: 350px; max-height: 450px; }
@media (min-width: 768px) { .chart-container { height: 400px; } }
</style>
</head>
<body class="antialiased">
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm">
<nav class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<h1 class="text-xl font-bold text-gray-800">Agentic AI Blueprint</h1>
<div class="hidden md:flex space-x-8">
<a href="#overview" class="nav-link text-gray-600 font-medium border-b-2 border-transparent pb-1">Overview</a>
<a href="#foundations" class="nav-link text-gray-600 font-medium border-b-2 border-transparent pb-1">Foundations</a>
<a href="#architecture" class="nav-link text-gray-600 font-medium border-b-2 border-transparent pb-1">Architecture</a>
<a href="#roadmap" class="nav-link text-gray-600 font-medium border-b-2 border-transparent pb-1">Roadmap</a>
<a href="#ethics" class="nav-link text-gray-600 font-medium border-b-2 border-transparent pb-1">Ethics</a>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="text-gray-600 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden py-4">
<a href="#overview" class="block py-2 px-4 text-sm text-gray-600 hover:bg-gray-100 rounded">Overview</a>
<a href="#foundations" class="block py-2 px-4 text-sm text-gray-600 hover:bg-gray-100 rounded">Foundations</a>
<a href="#architecture" class="block py-2 px-4 text-sm text-gray-600 hover:bg-gray-100 rounded">Architecture</a>
<a href="#roadmap" class="block py-2 px-4 text-sm text-gray-600 hover:bg-gray-100 rounded">Roadmap</a>
<a href="#ethics" class="block py-2 px-4 text-sm text-gray-600 hover:bg-gray-100 rounded">Ethics</a>
</div>
</nav>
</header>
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
<section id="overview" class="content-section">
<div class="text-center max-w-3xl mx-auto">
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 tracking-tight">From Pattern to Partner</h2>
<p class="mt-4 text-lg text-gray-600">This interactive application explores a multi-phase strategic research proposal for creating the next generation of Artificial General Intelligence. The goal is to move beyond mere pattern matching towards a nascent "creative agent" capable of grounded understanding, autonomous goal-setting, and genuine ideation. Use the navigation to explore the core pillars of this vision.</p>
</div>
</section>
<section id="foundations" class="content-section">
<div class="text-center max-w-3xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900">Foundational Synthesis</h2>
<p class="mt-4 text-lg text-gray-600">A truly agentic AI cannot be built in a vacuum. Its architecture must be informed by deep principles from diverse scientific fields. This section synthesizes the state-of-the-art across four key domains, extracting the core concepts that serve as the theoretical bedrock for the proposed system. Click on the tabs to explore each pillar.</p>
</div>
<div class="mt-12 max-w-5xl mx-auto">
<div class="flex justify-center border-b border-gray-200">
<button class="tab-button px-4 py-2 font-medium text-gray-500" data-tab="neuroscience">Cognitive Neuroscience</button>
<button class="tab-button px-4 py-2 font-medium text-gray-500" data-tab="psychology">Developmental Psychology</button>
<button class="tab-button px-4 py-2 font-medium text-gray-500" data-tab="rl">Reinforcement Learning</button>
<button class="tab-button px-4 py-2 font-medium text-gray-500" data-tab="hardware">Computer Architecture</button>
</div>
<div id="foundations-content" class="mt-8">
</div>
</div>
<div class="mt-12">
<h3 class="text-2xl font-bold text-center text-gray-800 mb-6">Architectural Bottlenecks: A Comparison</h3>
<p class="text-center text-gray-600 max-w-3xl mx-auto mb-8">The physical hardware, or substrate, is as important as the cognitive model. The dominant Von Neumann architecture presents a significant bottleneck for the kind of parallel, continuous learning an AGI requires. This chart compares its efficiency against more suitable, brain-inspired alternatives.</p>
<div class="chart-container bg-white p-4 rounded-lg shadow-md">
<canvas id="architectureChart"></canvas>
</div>
</div>
</section>
<section id="architecture" class="content-section">
<div class="text-center max-w-3xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900">The Architectural Blueprint</h2>
<p class="mt-4 text-lg text-gray-600">Based on the foundational principles, we propose a modular, neuro-symbolic cognitive architecture. This is not a monolithic model but a system of interacting components. Click on any module in the diagram below to learn about its core function, theoretical basis, and how it interfaces with the other parts of the system.</p>
</div>
<div class="mt-12 max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
<div class="arch-module p-4 rounded-lg border-gray-300 text-center" data-arch="perception">
<h3 class="font-bold text-lg">Perception Engine</h3>
<p class="text-sm">Grounded World Model</p>
</div>
<div class="text-center font-bold text-3xl text-gray-400">→</div>
<div class="space-y-4">
<div class="arch-module p-4 rounded-lg border-gray-300 text-center" data-arch="memory">
<h3 class="font-bold text-lg">Memory Core</h3>
<p class="text-sm">Hybrid Memory System</p>
</div>
<div class="arch-module p-4 rounded-lg border-gray-300 text-center" data-arch="motivation">
<h3 class="font-bold text-lg">Motivation Engine</h3>
<p class="text-sm">Intrinsic Drive</p>
</div>
<div class="arch-module p-4 rounded-lg border-gray-300 text-center" data-arch="ideation">
<h3 class="font-bold text-lg">Ideation Engine</h3>
<p class="text-sm">The "Spark"</p>
</div>
</div>
</div>
<div class="flex justify-center my-4">
<div class="font-bold text-3xl text-gray-400 transform -rotate-90 md:rotate-0">↓</div>
</div>
<div class="arch-module p-4 rounded-lg border-gray-300 text-center max-w-sm mx-auto" data-arch="action">
<h3 class="font-bold text-lg">Action Engine</h3>
<p class="text-sm">Planning & Execution</p>
</div>
</div>
<div id="architecture-details" class="mt-8 p-6 bg-white rounded-lg shadow-md max-w-4xl mx-auto min-h-[200px]">
<p class="text-gray-500 italic text-center">Select a module to see its details.</p>
</div>
</section>
<section id="roadmap" class="content-section">
<div class="text-center max-w-3xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900">Developmental & Experimental Roadmap</h2>
<p class="mt-4 text-lg text-gray-600">Building an agentic AI is a developmental process, not a single engineering task. This roadmap outlines a phased approach to "raising" the agent, from validating individual modules to full integration within increasingly complex environments. Click on each phase to see the details.</p>
</div>
<div class="mt-12 max-w-3xl mx-auto">
<div id="timeline-container"></div>
</div>
<div class="mt-16">
<h3 class="text-2xl font-bold text-center text-gray-800 mb-6">Metrics for Success: Beyond Benchmarks</h3>
<p class="text-center text-gray-600 max-w-3xl mx-auto mb-8">Evaluating true agency and creativity requires novel metrics that go beyond standard NLP benchmarks. We must probe for emergent properties that signify genuine understanding and proactivity.</p>
<div id="metrics-accordion" class="space-y-2 max-w-3xl mx-auto"></div>
</div>
</section>
<section id="ethics" class="content-section">
<div class="text-center max-w-3xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900">Ethical & Safety Framework</h2>
<p class="mt-4 text-lg text-gray-600">An autonomous, goal-setting agent introduces profound safety and alignment challenges. A reactive approach is insufficient. Ethical principles and controllability must be "baked in" to the core architecture from the very beginning.</p>
</div>
<div class="mt-12 max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold text-gray-800 mb-3">Alignment by Design</h3>
<ul class="space-y-4 text-gray-600">
<li class="flex items-start">
<span class="text-indigo-500 font-bold mr-3 mt-1">✓</span>
<span><strong>Inherent Prosocial Motivation:</strong> The core drive for "cognitive coherence" is constrained by a hard-coded axiom to protect human well-being.</span>
</li>
<li class="flex items-start">
<span class="text-indigo-500 font-bold mr-3 mt-1">✓</span>
<span><strong>Constitutional AI in the Core:</strong> The initial semantic memory is populated with an explicit, auditable "constitution" of ethical rules that cannot be overwritten.</span>
</li>
<li class="flex items-start">
<span class="text-indigo-500 font-bold mr-3 mt-1">✓</span>
<span><strong>Curiosity with Constraints:</strong> The curiosity drive is penalized for exploring states flagged as unsafe or that receive negative human feedback.</span>
</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold text-gray-800 mb-3">Controllability & Transparency</h3>
<ul class="space-y-4 text-gray-600">
<li class="flex items-start">
<span class="text-indigo-500 font-bold mr-3 mt-1">✓</span>
<span><strong>Transparent Reasoning:</strong> The symbolic core allows for a logical, step-by-step audit trace of the agent's decisions. We can ask "Why?" and get a coherent answer.</span>
</li>
<li class="flex items-start">
<span class="text-indigo-500 font-bold mr-3 mt-1">✓</span>
<span><strong>Hierarchical Control Levers:</strong> The HRL-based Action Engine provides multi-level control points, from overriding high-level goals to pausing specific actions.</span>
</li>
<li class="flex items-start">
<span class="text-indigo-500 font-bold mr-3 mt-1">✓</span>
<span><strong>The Sandbox as a Failsafe:</strong> All development and operation occurs within a secure, firewalled environment, with any real-world action requiring explicit human approval.</span>
</li>
</ul>
</div>
</div>
</section>
</main>
<script>
const foundationsData = {
neuroscience: {
title: 'Cognitive Neuroscience: The Architecture of Mind',
content: `The human brain provides the only existing proof of general intelligence. Key principles include:
<ul class='list-disc pl-5 mt-4 space-y-2'>
<li><strong>Memory Consolidation:</strong> A "sleep cycle" transforms fragile episodic memories into robust semantic knowledge, solving catastrophic forgetting.</li>
<li><strong>Conceptual Blending:</strong> A formal mechanism for creativity where novel ideas emerge from the structured combination of disparate concepts.</li>
<li><strong>Intrinsic Motivation:</strong> The dopaminergic "wanting" system provides a drive for exploration, computationally modeled as curiosity or prediction error reduction.</li>
<li><strong>Default Mode Network (DMN):</strong> The brain's "sandbox" for spontaneous thought, future simulation, and goal proposal.</li>
</ul>`
},
psychology: {
title: 'Developmental Psychology: The Blueprint of Growth',
content: `An agentic AI must be "raised," not just "built." Piaget's stages of development provide a natural curriculum.
<ul class='list-disc pl-5 mt-4 space-y-2'>
<li><strong>Piaget-Inspired Trajectory:</strong> The agent progresses from sensorimotor grounding to formal abstract reasoning, ensuring knowledge is built on experience.</li>
<li><strong>Low-Data, High-Interaction:</strong> Learning efficiency comes from active, embodied, multimodal interaction within a curated environment, not from massive, static datasets.</li>
</ul>`
},
rl: {
title: 'Reinforcement Learning: The Mechanics of Agency',
content: `RL provides the algorithmic toolkit to implement the principles from neuroscience and psychology.
<ul class='list-disc pl-5 mt-4 space-y-2'>
<li><strong>Hierarchical RL (HRL):</strong> Decomposes complex tasks into manageable sub-goals ("options"), enabling efficient planning and skill reuse.</li>
<li><strong>Intrinsic Curiosity Module (ICM):</strong> Provides an internal reward for exploring novel or surprising states, driving learning without external rewards.</li>
<li><strong>Autonomous Goal Generation:</strong> Adversarial frameworks allow the agent to create its own curriculum of goals at the edge of its capabilities.</li>
</ul>`
},
hardware: {
title: 'Computer Architecture: The Substrate of Thought',
content: `The underlying hardware must support the cognitive architecture's needs.
<ul class='list-disc pl-5 mt-4 space-y-2'>
<li><strong>Beyond Von Neumann:</strong> The standard architecture's "bottleneck" is unsuitable. Alternatives like Dataflow and In-Memory Computing are needed for parallel, continuous learning.</li>
<li><strong>Neuro-Symbolic Design:</strong> A hybrid architecture combining neural networks (for perception and action) with a symbolic reasoning core (for logic, planning, and transparency) offers the best of both worlds.</li>
</ul>`
}
};
const architectureData = {
perception: {
title: 'Perception Engine',
content: '<strong>Core Function:</strong> To process multimodal data (vision, audio, text) and transform it into a structured, symbolic representation. It grounds abstract symbols in sensory experience.<br><br><strong>Theoretical Basis:</strong> The "Neuro (Input)" stage of the neuro-symbolic model, inspired by the brain\'s sensory cortices and developmental psychology.<br><br><strong>Interfaces:</strong> Receives raw data from the environment, outputs symbolic facts (e.g., `(object: cube, color: red)`) to the Memory Core. Its focus can be directed by the Action Engine.'
},
memory: {
title: 'Memory Core',
content: '<strong>Core Function:</strong> A lifelong, multi-system memory that actively combats catastrophic forgetting.<br><br><strong>Theoretical Basis:</strong> The "two-stage" memory consolidation model, comprising three parts: 1) <strong>Episodic ("Hippocampus"):</strong> A fast-learning buffer for experiences. 2) <strong>Semantic ("Neocortex"):</strong> A slow-learning knowledge graph for generalized facts. 3) <strong>Procedural ("Basal Ganglia"):</strong> A store for learned skills (HRL options).<br><br><strong>Interfaces:</strong> Receives data from Perception and skills from Action. Provides contextually relevant information to all other modules.'
},
motivation: {
title: 'Motivation Engine',
content: '<strong>Core Function:</strong> To provide intrinsic drive and autonomously generate high-level goals.<br><br><strong>Theoretical Basis:</strong> A two-tiered system based on the neuroscience of dopamine and autonomous RL. <strong>Tier 1 (Curiosity):</strong> An Intrinsic Curiosity Module (ICM) generates a "wanting" signal based on prediction error. <strong>Tier 2 (Goal Generation):</strong> Analyzes the Semantic Memory for knowledge gaps to generate long-term goals that promote "cognitive coherence."<br><br><strong>Interfaces:</strong> Monitors Semantic Memory. Outputs an intrinsic reward signal and high-level goals to the Action Engine.'
},
ideation: {
title: 'Ideation Engine (The "Spark")',
content: '<strong>Core Function:</strong> The creative core, generating novel ideas by connecting disparate concepts.<br><br><strong>Theoretical Basis:</strong> A computational implementation of Conceptual Blending and the Default Mode Network (DMN). It runs "what-if" simulations by blending concepts from memory to generate novel hypotheses and solutions.<br><br><strong>Interfaces:</strong> Queries the Memory Core for concepts to blend. Proposes novel candidate goals to the Motivation Engine and solutions to the Action Engine.'
},
action: {
title: 'Action Engine',
content: '<strong>Core Function:</strong> To translate abstract goals into a concrete sequence of executable actions.<br><br><strong>Theoretical Basis:</strong> A Hierarchical Reinforcement Learning (HRL) framework. A <strong>High-Level Planner (Symbolic)</strong> decomposes a goal into a sequence of learned skills ("options"). A <strong>Low-Level Controller (Neuro)</strong> executes each option by outputting primitive motor commands.<br><br><strong>Interfaces:</strong> Receives goals from the Motivation Engine and state from the Perception Engine. Outputs action commands to the environment.'
}
};
const timelineData = [
{
phase: 'Phase I: The Digital Crib',
stage: 'Sensorimotor Stage',
goal: 'Learn basic physics, causality, and object permanence. Ground a model of its own embodiment.',
env: 'Simple 2D/3D physics simulator with basic geometric shapes and sensory properties.'
},
{
phase: 'Phase II: The Interactive Playhouse',
stage: 'Preoperational/Concrete Operational Stage',
goal: 'Learn complex object properties, conservation, and basic symbolic reasoning. Ground a vocabulary by associating labels with objects and actions.',
env: 'Environment with containers, liquids, tools, and objects with hidden properties (e.g., magnets).'
},
{
phase: 'Phase III: The Collaborative World',
stage: 'Formal Operational Stage',
goal: 'Develop abstract planning, cooperation, and social reasoning (theory of mind).',
env: 'Rich simulation populated by other agents, requiring multi-step, collaborative tasks.'
},
{
phase: 'Phase IV: The Open-Ended Interface',
stage: 'Real-World Application',
goal: 'Apply learned skills to solve problems using real-world digital tools.',
env: 'Interaction with a sandboxed file system, code interpreter, and restricted web browser.'
}
];
const metricsData = [
{
category: 'Agency & Proactivity',
metrics: [
'<strong>Goal Horizon Index:</strong> Measures the temporal and hierarchical depth of self-generated goals.',
'<strong>Spontaneous Problem Solving:</strong> Time taken to notice, formulate a goal for, and solve an unexpected problem without human prompting.'
]
},
{
category: 'Creativity & Ideation',
metrics: [
'<strong>Conceptual Distance of Blends:</strong> Semantic distance between concepts blended to create a successful, novel solution.',
'<strong>Alternative Uses Test:</strong> Quantity, quality, and novelty of non-obvious uses generated for a simple object.'
]
},
{
category: 'Understanding & Grounding',
metrics: [
'<strong>Counterfactual Instruction Test:</strong> Ability to identify and explain why a physically impossible instruction cannot be executed.',
'<strong>Zero-Shot Generalization to New Physics:</strong> Speed of adapting its world model and behavior when the environment\'s fundamental rules change.'
]
}
];
document.addEventListener('DOMContentLoaded', () => {
const navLinks = document.querySelectorAll('.nav-link, #mobile-menu a');
const contentSections = document.querySelectorAll('.content-section');
const tabButtons = document.querySelectorAll('.tab-button');
const foundationsContent = document.getElementById('foundations-content');
const archModules = document.querySelectorAll('.arch-module');
const archDetails = document.getElementById('architecture-details');
const timelineContainer = document.getElementById('timeline-container');
const metricsAccordion = document.getElementById('metrics-accordion');
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
function navigateTo(hash) {
contentSections.forEach(section => {
section.classList.remove('active');
});
navLinks.forEach(link => {
link.classList.remove('active');
});
const targetSection = document.querySelector(hash);
if (targetSection) {
targetSection.classList.add('active');
}
document.querySelectorAll(`.nav-link[href="${hash}"], #mobile-menu a[href="${hash}"]`).forEach(link => {
link.classList.add('active');
});
if(mobileMenu.classList.contains('md:hidden') === false) {
mobileMenu.classList.add('hidden');
}
}
navLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const hash = e.currentTarget.getAttribute('href');
window.location.hash = hash;
});
});
window.addEventListener('hashchange', () => {
navigateTo(window.location.hash || '#overview');
});
navigateTo(window.location.hash || '#overview');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
function updateFoundationsContent(tab) {
const data = foundationsData[tab];
if (data) {
foundationsContent.innerHTML = `<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold text-gray-800">${data.title}</h3>
<div class="mt-2 text-gray-600">${data.content}</div>
</div>`;
}
}
tabButtons.forEach(button => {
button.addEventListener('click', () => {
tabButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
updateFoundationsContent(button.dataset.tab);
});
});
tabButtons[0].click();
archModules.forEach(module => {
module.addEventListener('click', () => {
archModules.forEach(m => m.classList.remove('active'));
module.classList.add('active');
const data = architectureData[module.dataset.arch];
if (data) {
archDetails.innerHTML = `<h3 class="text-xl font-bold text-gray-800 mb-3">${data.title}</h3><p class="text-gray-600">${data.content}</p>`;
}
});
});
timelineData.forEach((item, index) => {
const isLast = index === timelineData.length - 1;
const timelineItem = document.createElement('div');
timelineItem.className = 'timeline-item cursor-pointer';
timelineItem.innerHTML = `
<div class="timeline-dot"></div>
${!isLast ? '<div class="timeline-line"></div>' : ''}
<div class="ml-4">
<h4 class="font-bold text-lg text-gray-800">${item.phase}</h4>
<p class="text-sm text-indigo-600 font-medium">${item.stage}</p>
<div class="accordion-content overflow-hidden transition-all duration-500 ease-in-out">
<div class="mt-2 p-4 bg-gray-50 rounded-md">
<p class="text-gray-600"><strong>Goal:</strong> ${item.goal}</p>
<p class="text-gray-600 mt-2"><strong>Environment:</strong> ${item.env}</p>
</div>
</div>
</div>
`;
timelineContainer.appendChild(timelineItem);
timelineItem.addEventListener('click', () => {
const content = timelineItem.querySelector('.accordion-content');
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
document.querySelectorAll('#timeline-container .accordion-content').forEach(el => el.style.maxHeight = null);
content.style.maxHeight = content.scrollHeight + "px";
}
});
});
metricsData.forEach(item => {
const accordionItem = document.createElement('div');
accordionItem.className = 'bg-white rounded-lg shadow-md';
accordionItem.innerHTML = `
<button class="w-full text-left p-4 flex justify-between items-center font-semibold text-gray-700 hover:bg-gray-50">
<span>${item.category}</span>
<span class="transform transition-transform duration-300">▼</span>
</button>
<div class="accordion-content px-4 pb-4">
<ul class="list-disc pl-5 mt-2 space-y-2 text-gray-600">
${item.metrics.map(metric => `<li>${metric}</li>`).join('')}
</ul>
</div>
`;
metricsAccordion.appendChild(accordionItem);
accordionItem.querySelector('button').addEventListener('click', (e) => {
const content = accordionItem.querySelector('.accordion-content');
const icon = accordionItem.querySelector('button span:last-child');
if (content.style.maxHeight) {
content.style.maxHeight = null;
icon.style.transform = 'rotate(0deg)';
} else {
content.style.maxHeight = content.scrollHeight + "px";
icon.style.transform = 'rotate(180deg)';
}
});
});
const ctx = document.getElementById('architectureChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Von Neumann', 'Harvard', 'Dataflow', 'In-Memory Computing'],
datasets: [{
label: 'Suitability for Continuous Learning',
data: [2, 4, 8, 10],
backgroundColor: 'rgba(79, 70, 229, 0.7)',
borderColor: 'rgba(79, 70, 229, 1)',
borderWidth: 1
}, {
label: 'Energy Efficiency for AI',
data: [1, 3, 7, 10],
backgroundColor: 'rgba(165, 180, 252, 0.7)',
borderColor: 'rgba(165, 180, 252, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
max: 10,
title: {
display: true,
text: 'Relative Score (Higher is Better)'
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y;
}
return label;
}
}
},
legend: {
position: 'bottom',
}
}
}
});
});
</script>
</body>
</html>