Show description
Interactive Report: Architectures of Autonomy
Interactive Report: Architectures of Autonomy
Architectures of Autonomy
Core Concepts
Architectures
Multi-Agent Systems
Best Practices
Interactive Demo
From Language Models to Autonomous Agents
This interactive report explores the shift from passive AI to goal-oriented systems. Discover the core components, architectural patterns, and best practices for building intelligent agents that can reason, plan, and act.
The Anatomy of an AI Agent
An effective agent is built on three fundamental pillars. Click each card to learn more.
🧠
The LLM as a Reasoning Engine
The "brain" of the agent, responsible for task decomposition, planning, and decision-making.
🛠️
The Action Mechanism (Tools)
The "hands" of the agent, enabling it to interact with external systems like APIs and files.
💾
The Persistence of Knowledge (Memory)
Allows the agent to maintain context, learn from experience, and track progress over time.
Single-Agent Architectures
Explore the two dominant patterns for orchestrating an agent's behavior. Each has unique strengths and trade-offs.
ReAct Framework
Plan-and-Execute
ReAct (Reason-Act)
This framework operates on a dynamic, iterative loop of Thought → Action → Observation. It's highly adaptable and excels in unpredictable environments where the solution path must be discovered.
Thought:
Analyze problem, form hypothesis.
↓
Action:
Use a tool to gather information.
↓
Observation:
Receive new data from the tool.
Advanced Paradigm: Multi-Agent Systems
For problems too complex for a single agent, teams of specialized agents collaborate, dividing labor to achieve a common goal.
Centralized (Manager-Worker)
A central "manager" agent decomposes the main goal and delegates sub-tasks to specialized "worker" agents. Simple and effective for clear workflows.
Manager Agent
Worker A
Worker B
Worker C
Decentralized (Peer-to-Peer)
Agents communicate directly with each other, negotiating tasks and sharing information without a central controller.…
Interactive Report: Architectures of Autonomy
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Report: Architectures of Autonomy</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@400;500;600;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: "Cool Gray" - A professional and modern palette with a neutral base (slate grays), a calming blue for primary actions, and a subtle green for positive feedback or highlights. This creates a focused, tech-oriented aesthetic suitable for the report's content. -->
<!-- Application Structure Plan: The SPA is designed as a thematic, non-linear dashboard to maximize user exploration and understanding. Instead of mirroring the report's sections, the navigation is organized by user-centric goals: 'Core Concepts', 'Architectures', 'Multi-Agent Systems', and an 'Interactive Demo'. This structure encourages users to jump between related ideas, compare concepts directly (e.g., ReAct vs. Plan-and-Execute via an interactive chart), and engage with the material through a simulated agent run. This is more effective for learning and retention than a static, linear presentation. -->
<!-- Visualization & Content Choices:
- Report Info: Core Components (LLM, Tools, Memory) -> Goal: Inform -> Viz/Presentation: Interactive Cards -> Interaction: Click-to-reveal details -> Justification: Breaks down foundational concepts into digestible, engaging chunks. -> Library/Method: HTML/CSS/JS.
- Report Info: ReAct vs. Plan-and-Execute Comparison -> Goal: Compare -> Viz/Presentation: Radar Chart & Side-by-side diagrams -> Interaction: Buttons to toggle chart data and view architecture flows -> Justification: The radar chart provides a powerful, multi-dimensional comparison at a glance, far superior to a static table. -> Library/Method: Chart.js, HTML/CSS/JS.
- Report Info: Multi-Agent System Topologies -> Goal: Organize -> Viz/Presentation: HTML/CSS diagrams -> Interaction: Static visualization -> Justification: Clearly illustrates structural concepts without unnecessary complexity. -> Library/Method: HTML/CSS (Flexbox).
- Report Info: Practical Python Agent Example -> Goal: Engage -> Viz/Presentation: Simulated Terminal UI -> Interaction: User clicks buttons to trigger pre-scripted agent steps (Thought, Action, Observation) -> Justification: Transforms a static code block into a "live" demonstration of the ReAct loop, making the abstract concept tangible and memorable. This is the "wow" factor. -> Library/Method: HTML/CSS/JS.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc; /* slate-50 */
color: #334155; /* slate-700 */
}
.nav-link {
position: relative;
transition: color 0.3s ease;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
background-color: #3b82f6; /* blue-500 */
transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.chart-container {
position: relative;
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 40vh;
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
.terminal {
background-color: #1e293b; /* slate-800 */
color: #e2e8f0; /* slate-200 */
font-family: 'Courier New', Courier, monospace;
}
.terminal-output .prompt { color: #4ade80; /* green-400 */ }
.terminal-output .thought { color: #94a3b8; /* slate-400 */ }
.terminal-output .action { color: #60a5fa; /* blue-400 */ }
.terminal-output .observation { color: #facc15; /* yellow-400 */ }
</style>
</head>
<body class="antialiased">
<!-- Header & Navigation -->
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<h1 class="text-xl font-bold text-slate-800">Architectures of Autonomy</h1>
<div class="hidden md:flex items-center space-x-8">
<a href="#concepts" class="nav-link text-slate-600 hover:text-blue-500 font-medium">Core Concepts</a>
<a href="#architectures" class="nav-link text-slate-600 hover:text-blue-500 font-medium">Architectures</a>
<a href="#mas" class="nav-link text-slate-600 hover:text-blue-500 font-medium">Multi-Agent Systems</a>
<a href="#practices" class="nav-link text-slate-600 hover:text-blue-500 font-medium">Best Practices</a>
<a href="#demo" class="nav-link text-slate-600 hover:text-blue-500 font-medium">Interactive Demo</a>
</div>
</nav>
</header>
<main class="container mx-auto px-6 py-12">
<!-- Hero Section -->
<section class="text-center mb-20">
<h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">From Language Models to Autonomous Agents</h2>
<p class="max-w-3xl mx-auto text-lg text-slate-600">
This interactive report explores the shift from passive AI to goal-oriented systems. Discover the core components, architectural patterns, and best practices for building intelligent agents that can reason, plan, and act.
</p>
</section>
<!-- Section 1: Core Concepts -->
<section id="concepts" class="mb-20 scroll-mt-20">
<h3 class="text-3xl font-bold text-center text-slate-800 mb-2">The Anatomy of an AI Agent</h3>
<p class="text-center text-slate-600 mb-12">An effective agent is built on three fundamental pillars. Click each card to learn more.</p>
<div class="grid md:grid-cols-3 gap-8">
<!-- LLM Card -->
<div class="card bg-white p-8 rounded-xl shadow-md cursor-pointer" onclick="showConceptDetail('llm')">
<div class="text-4xl mb-4">🧠</div>
<h4 class="text-xl font-bold text-slate-900 mb-2">The LLM as a Reasoning Engine</h4>
<p class="text-slate-600">The "brain" of the agent, responsible for task decomposition, planning, and decision-making.</p>
</div>
<!-- Tools Card -->
<div class="card bg-white p-8 rounded-xl shadow-md cursor-pointer" onclick="showConceptDetail('tools')">
<div class="text-4xl mb-4">🛠️</div>
<h4 class="text-xl font-bold text-slate-900 mb-2">The Action Mechanism (Tools)</h4>
<p class="text-slate-600">The "hands" of the agent, enabling it to interact with external systems like APIs and files.</p>
</div>
<!-- Memory Card -->
<div class="card bg-white p-8 rounded-xl shadow-md cursor-pointer" onclick="showConceptDetail('memory')">
<div class="text-4xl mb-4">💾</div>
<h4 class="text-xl font-bold text-slate-900 mb-2">The Persistence of Knowledge (Memory)</h4>
<p class="text-slate-600">Allows the agent to maintain context, learn from experience, and track progress over time.</p>
</div>
</div>
</section>
<!-- Section 2: Architectures -->
<section id="architectures" class="mb-20 scroll-mt-20">
<h3 class="text-3xl font-bold text-center text-slate-800 mb-2">Single-Agent Architectures</h3>
<p class="text-center text-slate-600 mb-12">Explore the two dominant patterns for orchestrating an agent's behavior. Each has unique strengths and trade-offs.</p>
<div class="bg-white p-8 rounded-xl shadow-lg">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="flex justify-center space-x-4 mb-6">
<button id="btn-react" class="px-4 py-2 font-semibold rounded-lg text-white bg-blue-500 shadow-md" onclick="updateArchitectureChart('react')">ReAct Framework</button>
<button id="btn-plan" class="px-4 py-2 font-semibold rounded-lg bg-slate-200 text-slate-700" onclick="updateArchitectureChart('plan')">Plan-and-Execute</button>
</div>
<div class="chart-container">
<canvas id="architectureChart"></canvas>
</div>
</div>
<div>
<h4 id="arch-title" class="text-2xl font-bold text-slate-900 mb-4">ReAct (Reason-Act)</h4>
<p id="arch-desc" class="text-slate-600 mb-6">This framework operates on a dynamic, iterative loop of Thought → Action → Observation. It's highly adaptable and excels in unpredictable environments where the solution path must be discovered.</p>
<div id="arch-diagram" class="space-y-2">
<div class="flex items-center p-3 bg-slate-100 rounded-lg">
<span class="font-mono text-blue-600 mr-3">Thought:</span>
<span>Analyze problem, form hypothesis.</span>
</div>
<div class="text-center text-2xl text-slate-400">↓</div>
<div class="flex items-center p-3 bg-slate-100 rounded-lg">
<span class="font-mono text-blue-600 mr-3">Action:</span>
<span>Use a tool to gather information.</span>
</div>
<div class="text-center text-2xl text-slate-400">↓</div>
<div class="flex items-center p-3 bg-slate-100 rounded-lg">
<span class="font-mono text-blue-600 mr-3">Observation:</span>
<span>Receive new data from the tool.</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: Multi-Agent Systems -->
<section id="mas" class="mb-20 scroll-mt-20">
<h3 class="text-3xl font-bold text-center text-slate-800 mb-2">Advanced Paradigm: Multi-Agent Systems</h3>
<p class="text-center text-slate-600 mb-12">For problems too complex for a single agent, teams of specialized agents collaborate, dividing labor to achieve a common goal.</p>
<div class="grid md:grid-cols-2 gap-8">
<div class="card bg-white p-8 rounded-xl shadow-md">
<h4 class="text-xl font-bold text-slate-900 mb-4">Centralized (Manager-Worker)</h4>
<p class="text-slate-600 mb-6">A central "manager" agent decomposes the main goal and delegates sub-tasks to specialized "worker" agents. Simple and effective for clear workflows.</p>
<div class="flex flex-col items-center p-4 bg-slate-50 rounded-lg">
<div class="p-3 bg-blue-200 text-blue-800 font-semibold rounded-md">Manager Agent</div>
<div class="h-8 w-px bg-slate-300 my-2"></div>
<div class="flex space-x-4">
<div class="p-3 bg-green-200 text-green-800 rounded-md">Worker A</div>
<div class="p-3 bg-green-200 text-green-800 rounded-md">Worker B</div>
<div class="p-3 bg-green-200 text-green-800 rounded-md">Worker C</div>
</div>
</div>
</div>
<div class="card bg-white p-8 rounded-xl shadow-md">
<h4 class="text-xl font-bold text-slate-900 mb-4">Decentralized (Peer-to-Peer)</h4>
<p class="text-slate-600 mb-6">Agents communicate directly with each other, negotiating tasks and sharing information without a central controller. More robust and resilient.</p>
<div class="flex justify-center items-center p-4 bg-slate-50 rounded-lg h-full">
<div class="flex items-center space-x-2">
<div class="p-3 bg-purple-200 text-purple-800 rounded-md">Agent 1</div>
<div class="text-purple-400 font-bold">↔</div>
<div class="p-3 bg-purple-200 text-purple-800 rounded-md">Agent 2</div>
<div class="text-purple-400 font-bold">↔</div>
<div class="p-3 bg-purple-200 text-purple-800 rounded-md">Agent 3</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: Best Practices -->
<section id="practices" class="mb-20 scroll-mt-20">
<h3 class="text-3xl font-bold text-center text-slate-800 mb-2">Best Practices in Agent Design</h3>
<p class="text-center text-slate-600 mb-12">Building reliable and safe agents requires a disciplined engineering approach. Here are key principles to follow.</p>
<div class="max-w-3xl mx-auto space-y-4">
<div class="practice-item bg-white rounded-lg shadow-sm">
<button class="w-full flex justify-between items-center p-5 text-left font-semibold text-slate-800" onclick="togglePractice(this)">
<span>Foundational Principles</span>
<span class="transform transition-transform duration-300">▼</span>
</button>
<div class="practice-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5">
<ul class="list-disc list-inside text-slate-600 pb-5 space-y-2">
<li><strong>Model Selection:</strong> Start with the most capable model to set a baseline, then optimize for cost/speed.</li>
<li><strong>Robust Tool Library:</strong> Design simple, single-responsibility tools with clear documentation.</li>
<li><strong>Human-in-the-Loop:</strong> Implement human oversight for critical or high-risk decisions.</li>
</ul>
</div>
</div>
<div class="practice-item bg-white rounded-lg shadow-sm">
<button class="w-full flex justify-between items-center p-5 text-left font-semibold text-slate-800" onclick="togglePractice(this)">
<span>Robustness and Reliability</span>
<span class="transform transition-transform duration-300">▼</span>
</button>
<div class="practice-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5">
<ul class="list-disc list-inside text-slate-600 pb-5 space-y-2">
<li><strong>Stateless Sub-Agents:</strong> Design sub-agents as pure functions for predictability and parallelization.</li>
<li><strong>Structured I/O:</strong> Force LLMs to produce structured output (e.g., JSON) to avoid parsing errors.</li>
<li><strong>Graceful Degradation:</strong> Implement intelligent retry mechanisms and fallback strategies for failures.</li>
<li><strong>Observability:</strong> Use comprehensive logging and tracing to understand and debug agent behavior.</li>
</ul>
</div>
</div>
<div class="practice-item bg-white rounded-lg shadow-sm">
<button class="w-full flex justify-between items-center p-5 text-left font-semibold text-slate-800" onclick="togglePractice(this)">
<span>Governance and Safety</span>
<span class="transform transition-transform duration-300">▼</span>
</button>
<div class="practice-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5">
<ul class="list-disc list-inside text-slate-600 pb-5 space-y-2">
<li><strong>Layered Guardrails:</strong> Use multiple safety checks like relevance classifiers and risk assessors.</li>
<li><strong>Constrained Action Space:</strong> Apply the principle of least privilege, giving agents only the tools they absolutely need.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Section 5: Interactive Demo -->
<section id="demo" class="scroll-mt-20">
<h3 class="text-3xl font-bold text-center text-slate-800 mb-2">Interactive File System Agent Demo</h3>
<p class="text-center text-slate-600 mb-12">Experience the ReAct framework in action. Click the "Run Next Step" button to walk through a simulated agent task, observing its thought process at each stage.</p>
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden">
<div class="p-4 bg-slate-200 border-b border-slate-300">
<p class="font-mono text-sm text-slate-700"><strong>Task:</strong> List 'project_dir', view 'main.py', then create 'docs/instructions.txt'.</p>
</div>
<div class="terminal p-6 h-96 overflow-y-auto">
<div id="terminal-output" class="terminal-output space-y-4">
<p><span class="prompt">></span> Agent Initialized. Ready to start.</p>
</div>
</div>
<div class="p-4 bg-slate-100 border-t border-slate-200 text-center">
<button id="run-step-btn" class="px-6 py-3 font-bold text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors shadow-lg" onclick="runAgentStep()">Run Next Step</button>
</div>
</div>
</section>
</main>
<!-- Concept Detail Modal -->
<div id="concept-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" onclick="closeConceptModal()">
<div class="bg-white rounded-lg shadow-xl w-11/12 max-w-2xl p-8" onclick="event.stopPropagation()">
<h3 id="modal-title" class="text-2xl font-bold text-slate-900 mb-4"></h3>
<div id="modal-content" class="text-slate-600 space-y-4"></div>
<button class="mt-6 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600" onclick="closeConceptModal()">Close</button>
</div>
</div>
<script>
const conceptDetails = {
llm: {
title: '🧠 The LLM as a Reasoning Engine',
content: `
<p>The Large Language Model is the cognitive core of the agent. It's not just generating text; it's actively problem-solving.</p>
<ul class="list-disc list-inside mt-4 space-y-2">
<li><strong>Task Decomposition:</strong> Breaking a high-level goal like "plan a trip" into smaller steps: find flights, book hotel, create itinerary.</li>
<li><strong>Planning:</strong> Formulating the sequence of those steps to achieve the goal efficiently.</li>
<li><strong>Decision-Making:</strong> Choosing the right tool at the right time. For example, deciding to use a 'search_flights' tool before a 'book_hotel' tool.</li>
</ul>
`
},
tools: {
title: '🛠️ The Action Mechanism (Tools)',
content: `
<p>Tools give the agent capabilities beyond its pre-trained knowledge, allowing it to interact with the world in real-time.</p>
<ul class="list-disc list-inside mt-4 space-y-2">
<li><strong>External APIs:</strong> Get current weather data, stock prices, or search results from the web.</li>
<li><strong>Local File System:</strong> Read, write, and list files to manage projects or analyze data.</li>
<li><strong>Code Execution:</strong> Run code in a secure sandbox to perform complex calculations or data manipulation.</li>
</ul>
<p class="mt-4 p-3 bg-slate-100 rounded-md text-sm">Each tool must be well-documented so the LLM understands its purpose, inputs, and outputs, enabling it to call the tool correctly.</p>
`
},
memory: {
title: '💾 The Persistence of Knowledge (Memory)',
content: `
<p>Memory allows an agent to maintain context over time, preventing it from repeating mistakes and enabling it to learn.</p>
<ul class="list-disc list-inside mt-4 space-y-2">
<li><strong>Short-Term Memory:</strong> A "scratchpad" for the current task. It holds the history of recent thoughts, actions, and observations, ensuring the agent doesn't lose its place.</li>
<li><strong>Long-Term Memory:</strong> A persistent knowledge base, often stored in a vector database. This allows the agent to recall information from past interactions to solve new problems more effectively.</li>
</ul>
`
}
};
function showConceptDetail(concept) {
const modal = document.getElementById('concept-modal');
document.getElementById('modal-title').innerHTML = conceptDetails[concept].title;
document.getElementById('modal-content').innerHTML = conceptDetails[concept].content;
modal.classList.remove('hidden');
modal.classList.add('flex');
}
function closeConceptModal() {
const modal = document.getElementById('concept-modal');
modal.classList.add('hidden');
modal.classList.remove('flex');
}
const architectureData = {
react: {
title: 'ReAct (Reason-Act)',
description: "This framework operates on a dynamic, iterative loop of Thought → Action → Observation. It's highly adaptable and excels in unpredictable environments where the solution path must be discovered.",
diagram: `
<div class="flex items-center p-3 bg-slate-100 rounded-lg"><span class="font-mono text-blue-600 mr-3">Thought:</span><span>Analyze problem, form hypothesis.</span></div>
<div class="text-center text-2xl text-slate-400">↓</div>
<div class="flex items-center p-3 bg-slate-100 rounded-lg"><span class="font-mono text-blue-600 mr-3">Action:</span><span>Use a tool to gather information.</span></div>
<div class="text-center text-2xl text-slate-400">↓</div>
<div class="flex items-center p-3 bg-slate-100 rounded-lg"><span class="font-mono text-blue-600 mr-3">Observation:</span><span>Receive new data from the tool.</span></div>
`,
chartData: [8, 5, 6, 9] // Adaptability, Cost-Efficiency, Latency, Interpretability
},
plan: {
title: 'Plan-and-Execute',
description: 'This framework separates planning from execution. A powerful LLM first creates a complete, step-by-step plan, which is then carried out by a simpler executor. It is efficient for complex, well-defined tasks.',
diagram: `
<div class="flex items-center p-3 bg-slate-100 rounded-lg"><span class="font-mono text-blue-600 mr-3">Planner:</span><span>Generate a complete, step-by-step plan.</span></div>
<div class="text-center text-2xl text-slate-400">↓</div>
<div class="flex flex-col space-y-2 p-3 bg-slate-100 rounded-lg">
<span class="font-mono text-blue-600">Executor:</span>
<span>- Execute Step 1</span>
<span>- Execute Step 2</span>
<span>- Execute Step 3</span>
</div>
`,
chartData: [4, 8, 8, 6] // Adaptability, Cost-Efficiency, Latency, Interpretability
}
};
let myChart;
function createOrUpdateChart(data) {
const ctx = document.getElementById('architectureChart').getContext('2d');
const chartConfig = {
type: 'radar',
data: {
labels: ['Adaptability', 'Cost-Efficiency', 'Speed (Low Latency)', 'Interpretability'],
datasets: [{
label: 'Framework Score',
data: data,
backgroundColor: 'rgba(59, 130, 246, 0.2)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(59, 130, 246, 1)',
}]
},
options: {
maintainAspectRatio: false,
scales: {
r: {
angleLines: { color: '#cbd5e1' },
grid: { color: '#e2e8f0' },
pointLabels: { font: { size: 12 }, color: '#475569' },
suggestedMin: 0,
suggestedMax: 10,
ticks: {
backdropColor: '#f8fafc',
color: '#64748b',
stepSize: 2
}
}
},
plugins: {
legend: { display: false }
}
}
};
if (myChart) {
myChart.data.datasets[0].data = data;
myChart.update();
} else {
myChart = new Chart(ctx, chartConfig);
}
}
function updateArchitectureChart(type) {
const data = architectureData[type];
document.getElementById('arch-title').innerText = data.title;
document.getElementById('arch-desc').innerText = data.description;
document.getElementById('arch-diagram').innerHTML = data.diagram;
const btnReact = document.getElementById('btn-react');
const btnPlan = document.getElementById('btn-plan');
if(type === 'react') {
btnReact.classList.add('bg-blue-500', 'text-white', 'shadow-md');
btnReact.classList.remove('bg-slate-200', 'text-slate-700');
btnPlan.classList.add('bg-slate-200', 'text-slate-700');
btnPlan.classList.remove('bg-blue-500', 'text-white', 'shadow-md');
} else {
btnPlan.classList.add('bg-blue-500', 'text-white', 'shadow-md');
btnPlan.classList.remove('bg-slate-200', 'text-slate-700');
btnReact.classList.add('bg-slate-200', 'text-slate-700');
btnReact.classList.remove('bg-blue-500', 'text-white', 'shadow-md');
}
createOrUpdateChart(data.chartData);
}
function togglePractice(button) {
const content = button.nextElementSibling;
const icon = button.querySelector('span:last-child');
if (content.style.maxHeight && content.style.maxHeight !== '0px') {
content.style.maxHeight = '0px';
icon.style.transform = 'rotate(0deg)';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
icon.style.transform = 'rotate(180deg)';
}
}
const agentSteps = [
{ type: 'thought', content: "Okay, I need to start by listing the contents of 'project_dir' to see what's inside. The `list_directory` tool seems perfect for this." },
{ type: 'action', content: "list_directory(path='project_dir')" },
{ type: 'observation', content: "Contents of 'project_dir':\nsrc\nREADME.md" },
{ type: 'thought', content: "Great, I see a 'src' directory and a 'README.md'. The next step is to view the content of 'project_dir/src/main.py'. I'll use the `view_file` tool." },
{ type: 'action', content: "view_file(file_path='project_dir/src/main.py')" },
{ type: 'observation', content: "Content of 'project_dir/src/main.py':\n---\n# This is the main Python file.\n\nprint('Hello, World!')\n---" },
{ type: 'thought', content: "I've viewed the file content. The final step is to create a new file 'project_dir/docs/instructions.txt'. The path 'docs' doesn't exist, but the `create_file` tool should handle creating it. I'll use that tool now." },
{ type: 'action', content: "create_file(file_path='project_dir/docs/instructions.txt', content='This is a new instruction file.')" },
{ type: 'observation', content: "An error occurred while creating the file 'project_dir/docs/instructions.txt': [Errno 2] No such file or directory: 'project_dir/docs/instructions.txt'" },
{ type: 'thought', content: "Ah, the `create_file` tool can't create directories. I need to first create the 'docs' directory. I don't have a tool for that. I must inform the user that I cannot complete the task as I lack the capability to create a directory." },
{ type: 'final', content: "I have successfully listed the directory and viewed the file. However, I cannot create 'project_dir/docs/instructions.txt' because I lack a tool to create new directories. The task is partially complete." },
];
let currentStep = 0;
const terminalOutput = document.getElementById('terminal-output');
const runBtn = document.getElementById('run-step-btn');
function runAgentStep() {
if (currentStep >= agentSteps.length) return;
const step = agentSteps[currentStep];
let html = '';
if (step.type === 'final') {
html = `<p><span class="prompt">></span> <strong>Final Answer:</strong> ${step.content}</p>`;
runBtn.innerText = 'Finished';
runBtn.disabled = true;
runBtn.classList.add('bg-gray-500', 'cursor-not-allowed');
runBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
} else {
const prefix = step.type.charAt(0).toUpperCase() + step.type.slice(1);
html = `<p class="${step.type}"><span class="font-bold">${prefix}:</span> ${step.content.replace(/\n/g, '<br>')}</p>`;
}
terminalOutput.innerHTML += html;
terminalOutput.scrollTop = terminalOutput.scrollHeight;
currentStep++;
if (currentStep >= agentSteps.length) {
runBtn.innerText = 'Finished';
runBtn.disabled = true;
runBtn.classList.add('bg-gray-500', 'cursor-not-allowed');
runBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
}
}
window.onload = function() {
updateArchitectureChart('react');
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === entry.target.id) {
link.classList.add('active');
}
});
}
});
}, { rootMargin: "-50% 0px -50% 0px" });
sections.forEach(section => {
observer.observe(section);
});
};
</script>
</body>
</html>