Spaces:

AtAI2024
/

Camel_AI_Learn

Running

App Files Files Community

Camel_AI_Learn / index.html

AtAI2024

Rename Camel-AI.html to index.html

2b324e7 verified 4 months ago

raw

history blame contribute delete

109 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CAMEL-AI Learning Platform</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	:root {
	--primary: #8C52FF;
	--primary-dark: #6E3CCF;
	--secondary: #FFC107;
	--dark: #1A1A2E;
	--light: #F8F9FA;
	--code-bg: #2D2D3A;
	}

	body {
	font-family: 'Inter', sans-serif;
	color: #333;
	line-height: 1.6;
	}

	.bg-primary {
	background-color: var(--primary);
	}

	.text-primary {
	color: var(--primary);
	}

	.btn-primary {
	background-color: var(--primary);
	color: white;
	}

	.btn-primary:hover {
	background-color: var(--primary-dark);
	}

	.bg-gradient {
	background: linear-gradient(135deg, #8C52FF 0%, #5E17EB 100%);
	}

	.code-block {
	background-color: var(--code-bg);
	border-radius: 0.5rem;
	padding: 1rem;
	margin: 1rem 0;
	overflow-x: auto;
	color: #f8f8f2;
	font-family: 'Courier New', monospace;
	}

	.module-card {
	border-left: 4px solid var(--primary);
	transition: all 0.3s ease;
	}

	.module-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	}

	.toc-link {
	color: #333;
	text-decoration: none;
	display: block;
	padding: 0.25rem 0;
	transition: color 0.2s;
	}

	.toc-link:hover {
	color: var(--primary);
	}

	.toc-link.active {
	color: var(--primary);
	font-weight: 600;
	}

	.sticky-nav {
	position: sticky;
	top: 0;
	background: white;
	z-index: 1000;
	}

	.section-divider {
	height: 4px;
	background: linear-gradient(90deg, var(--primary), transparent);
	margin: 3rem 0;
	}

	.checklist li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
	}

	.checklist li:before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--primary);
	font-weight: bold;
	}

	@media print {
	.sticky-nav {
	position: relative;
	}

	.no-print {
	display: none;
	}

	.print-break-avoid {
	break-inside: avoid;
	}
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<!-- Navigation -->
	<nav class="sticky-nav shadow-sm">
	<div class="container mx-auto px-4 py-3 flex items-center justify-between">
	<div class="flex items-center space-x-2">
	<div class="w-10 h-10 rounded-full bg-gradient flex items-center justify-center">
	<span class="text-white font-bold">C</span>
	</div>
	<span class="font-bold text-xl">CAMEL-AI</span>
	<span class="text-gray-500 text-sm">Learning Platform</span>
	</div>
	<div class="hidden md:flex space-x-6 text-sm">
	<a href="#introduction" class="hover:text-primary">Introduction</a>
	<a href="#modules" class="hover:text-primary">Course Modules</a>
	<a href="#examples" class="hover:text-primary">Examples</a>
	<a href="#business" class="hover:text-primary">Business Cases</a>
	<a href="#cheatsheet" class="hover:text-primary">Cheatsheet</a>
	</div>
	<div class="flex items-center space-x-4">
	<a href="https://github.com/camel-ai/camel" target="_blank" class="text-gray-600 hover:text-primary">
	<i class="fab fa-github text-xl"></i>
	</a>
	<a href="https://discord.camel-ai.org/" target="_blank" class="text-gray-600 hover:text-primary">
	<i class="fab fa-discord text-xl"></i>
	</a>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="bg-gradient text-white py-12 md:py-24">
	<div class="container mx-auto px-4">
	<div class="flex flex-col md:flex-row items-center">
	<div class="md:w-1/2 mb-10 md:mb-0">
	<h1 class="text-4xl md:text-5xl font-bold mb-4">Master CAMEL-AI</h1>
	<p class="text-xl mb-8">Discover the power of multi-agent systems for data generation, world simulation, and task automation</p>
	<div class="flex flex-wrap gap-4">
	<a href="#modules" class="bg-white text-primary px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">
	Start Learning
	</a>
	<a href="#business" class="bg-transparent border-2 border-white px-6 py-2 rounded-full font-medium hover:bg-white hover:text-primary transition">
	Business Applications
	</a>
	</div>
	</div>
	<div class="md:w-1/2 flex justify-center">
	<div class="bg-white bg-opacity-10 rounded-xl p-6 max-w-md">
	<div class="text-sm mb-4">
	<i class="fas fa-quote-left text-secondary opacity-50 text-xl"></i>
	</div>
	<p class="mb-4">CAMEL-AI is the premier open-source framework for building and studying autonomous, communicative agents. It's revolutionizing how we approach multi-agent systems and collaborative AI.</p>
	<div class="flex items-center">
	<div class="mr-4">
	<div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
	<i class="fas fa-robot text-secondary"></i>
	</div>
	</div>
	<div>
	<div class="font-semibold">CAMEL-AI Team</div>
	<div class="text-xs text-gray-300">Finding the Scaling Laws of Agents</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Key Metrics -->
	<section class="py-8 bg-white">
	<div class="container mx-auto px-4">
	<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
	<div class="p-4">
	<div class="text-3xl font-bold text-primary mb-2">20+</div>
	<div class="text-sm text-gray-600">Integrated Model Platforms</div>
	</div>
	<div class="p-4">
	<div class="text-3xl font-bold text-primary mb-2">1000+</div>
	<div class="text-sm text-gray-600">GitHub Stars</div>
	</div>
	<div class="p-4">
	<div class="text-3xl font-bold text-primary mb-2">10+</div>
	<div class="text-sm text-gray-600">Core Components</div>
	</div>
	<div class="p-4">
	<div class="text-3xl font-bold text-primary mb-2">∞</div>
	<div class="text-sm text-gray-600">Possibilities</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Main Content -->
	<div class="container mx-auto px-4 py-12">
	<div class="flex flex-col md:flex-row gap-8">
	<!-- Sidebar Table of Contents (TOC) -->
	<div class="md:w-1/4 md:pr-8">
	<div class="sticky top-20">
	<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
	<h3 class="text-lg font-semibold mb-4">Course Navigation</h3>
	<ul class="space-y-1">
	<li><a href="#introduction" class="toc-link">Introduction to CAMEL-AI</a></li>
	<li><a href="#what-is" class="toc-link">What is CAMEL-AI?</a></li>
	<li><a href="#core-components" class="toc-link">Core Components</a></li>
	<li>
	<a href="#modules" class="toc-link font-medium mt-2">Course Modules</a>
	<ul class="pl-4 mt-1 space-y-1">
	<li><a href="#module-1" class="toc-link text-sm">Module 1: Fundamentals</a></li>
	<li><a href="#module-2" class="toc-link text-sm">Module 2: Agent Creation</a></li>
	<li><a href="#module-3" class="toc-link text-sm">Module 3: Tools & Memory</a></li>
	<li><a href="#module-4" class="toc-link text-sm">Module 4: Multi-Agent Systems</a></li>
	<li><a href="#module-5" class="toc-link text-sm">Module 5: Advanced Applications</a></li>
	</ul>
	</li>
	<li><a href="#examples" class="toc-link font-medium mt-2">Practical Examples</a></li>
	<li><a href="#business" class="toc-link font-medium mt-2">Business Use Cases</a></li>
	<li><a href="#cheatsheet" class="toc-link font-medium mt-2">Comprehensive Cheatsheet</a></li>
	</ul>
	</div>

	<div class="bg-primary bg-opacity-10 rounded-lg p-6">
	<h3 class="text-primary font-semibold mb-3">Ready to Implement?</h3>
	<p class="text-sm mb-4">Get assistance from our community or access full documentation.</p>
	<div class="space-y-2">
	<a href="https://discord.camel-ai.org/" target="_blank" class="flex items-center text-sm text-primary hover:underline">
	<i class="fab fa-discord mr-2"></i> Join Discord Community
	</a>
	<a href="https://docs.camel-ai.org/" target="_blank" class="flex items-center text-sm text-primary hover:underline">
	<i class="fas fa-book mr-2"></i> Documentation
	</a>
	<a href="https://github.com/camel-ai/camel" target="_blank" class="flex items-center text-sm text-primary hover:underline">
	<i class="fab fa-github mr-2"></i> GitHub Repository
	</a>
	</div>
	</div>
	</div>
	</div>

	<!-- Main Content Area -->
	<div class="md:w-3/4">
	<!-- Introduction Section -->
	<section id="introduction" class="mb-12">
	<h2 class="text-3xl font-bold mb-6">Introduction to CAMEL-AI</h2>
	<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
	<p class="mb-4">
	Welcome to the comprehensive learning platform for CAMEL-AI, the cutting-edge open-source framework for building and studying autonomous, communicative agents. This course is designed for both individuals with Python knowledge and businesses looking to harness the power of multi-agent systems.
	</p>
	<p class="mb-4">
	CAMEL-AI (Communicative Agents for "Mind" Exploration of Large Language Model Society) emerged as the earliest LLM-based multi-agent framework and has evolved into a powerful tool for real-world task solving. Whether you're interested in data generation, world simulation, or task automation, CAMEL-AI provides the infrastructure you need.
	</p>
	<div class="bg-gray-100 p-4 rounded-lg mb-4">
	<h4 class="font-semibold mb-2">What you'll learn in this course:</h4>
	<ul class="checklist">
	<li>The core concepts behind CAMEL-AI and multi-agent systems</li>
	<li>How to create and customize agents for specific tasks</li>
	<li>Techniques for enabling agent communication and collaboration</li>
	<li>Practical applications of CAMEL-AI in business contexts</li>
	<li>Advanced implementation strategies with comprehensive code examples</li>
	</ul>
	</div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
	<div class="bg-white rounded-xl shadow-sm p-6">
	<div class="text-primary mb-3">
	<i class="fas fa-code text-2xl"></i>
	</div>
	<h4 class="font-semibold mb-2">For Developers</h4>
	<p class="text-sm text-gray-600">Learn how to implement CAMEL-AI's powerful tools and APIs in your applications.</p>
	</div>
	<div class="bg-white rounded-xl shadow-sm p-6">
	<div class="text-primary mb-3">
	<i class="fas fa-briefcase text-2xl"></i>
	</div>
	<h4 class="font-semibold mb-2">For Businesses</h4>
	<p class="text-sm text-gray-600">Discover how CAMEL-AI can automate workflows and generate valuable data.</p>
	</div>
	<div class="bg-white rounded-xl shadow-sm p-6">
	<div class="text-primary mb-3">
	<i class="fas fa-flask text-2xl"></i>
	</div>
	<h4 class="font-semibold mb-2">For Researchers</h4>
	<p class="text-sm text-gray-600">Explore agent scaling laws and contribute to cutting-edge AI research.</p>
	</div>
	</div>
	</section>

	<!-- What is CAMEL-AI Section -->
	<section id="what-is" class="mb-12">
	<h2 class="text-3xl font-bold mb-6">What is CAMEL-AI?</h2>
	<div class="bg-white rounded-xl shadow-sm p-6">
	<p class="mb-4">
	CAMEL stands for <span class="font-semibold">C</span>ommunicative <span class="font-semibold">A</span>gents for "<span class="font-semibold">M</span>ind" <span class="font-semibold">E</span>xploration of <span class="font-semibold">L</span>arge Language Model Society. It's an advanced framework designed to facilitate autonomous cooperation among communicative agents, enabling them to solve complex tasks with minimal human intervention.
	</p>

	<div class="rounded-lg bg-gray-100 p-5 mb-6">
	<h4 class="font-semibold mb-3">Core Philosophy of CAMEL-AI:</h4>
	<p class="italic text-gray-700 mb-4">
	"Can we design an autonomous communicative agent capable of steering the conversation toward task completion with minimal human supervision?"
	</p>
	<p class="text-sm text-gray-600">
	This guiding question shapes the development of CAMEL-AI, focusing on creating agents that can work independently while effectively collaborating with other agents.
	</p>
	</div>

	<h4 class="font-semibold mb-3">Key Characteristics:</h4>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
	<div class="flex items-start">
	<div class="text-primary mr-3 mt-1">
	<i class="fas fa-robot"></i>
	</div>
	<div>
	<h5 class="font-medium">Autonomous Communication</h5>
	<p class="text-sm text-gray-600">Agents interact and coordinate with minimal human intervention</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="text-primary mr-3 mt-1">
	<i class="fas fa-users"></i>
	</div>
	<div>
	<h5 class="font-medium">Multi-Agent Systems</h5>
	<p class="text-sm text-gray-600">Multiple agents collaborate to solve complex problems</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="text-primary mr-3 mt-1">
	<i class="fas fa-search"></i>
	</div>
	<div>
	<h5 class="font-medium">Behavioral Exploration</h5>
	<p class="text-sm text-gray-600">Examines agent behaviors across different contexts</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="text-primary mr-3 mt-1">
	<i class="fas fa-expand-arrows-alt"></i>
	</div>
	<div>
	<h5 class="font-medium">Scalability</h5>
	<p class="text-sm text-gray-600">Frameworks scales from simple tasks to complex systems</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="text-primary mr-3 mt-1">
	<i class="fas fa-code-branch"></i>
	</div>
	<div>
	<h5 class="font-medium">Open Source</h5>
	<p class="text-sm text-gray-600">Community-driven development and improvement</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="text-primary mr-3 mt-1">
	<i class="fas fa-sync"></i>
	</div>
	<div>
	<h5 class="font-medium">Adaptability</h5>
	<p class="text-sm text-gray-600">Learns from surroundings and improves over time</p>
	</div>
	</div>
	</div>

	<div class="bg-primary bg-opacity-5 rounded-lg p-5 border-l-4 border-primary">
	<h4 class="font-semibold mb-2">CAMEL-AI Framework Overview</h4>
	<p class="text-sm mb-4">
	At its core, CAMEL-AI provides a structured environment for agents with different roles to collaborate on tasks. Each agent utilizes Large Language Models (LLMs) to enhance cognitive capabilities, enabling natural language understanding and generation.
	</p>
	<p class="text-sm">
	The framework facilitates flexible communication between agents, equips them with tools to interact with the external world, and provides memory capabilities for more grounded learning and inference.
	</p>
	</div>
	</div>
	</section>

	<!-- Core Components Section -->
	<section id="core-components" class="mb-12">
	<h2 class="text-3xl font-bold mb-6">Core Components of CAMEL-AI</h2>
	<div class="bg-white rounded-xl shadow-sm p-6">
	<p class="mb-6">
	CAMEL-AI consists of several key modules that work together to create powerful agent systems. Understanding these components is essential for effectively implementing CAMEL-AI in your projects.
	</p>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
	<div class="bg-gray-50 p-5 rounded-lg">
	<div class="flex items-center mb-3">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
	<i class="fas fa-brain text-white"></i>
	</div>
	<h4 class="font-semibold">Models</h4>
	</div>
	<p class="text-sm text-gray-600 mb-3">
	Architectures and customization options for agent intelligence, supporting a wide range of LLMs.
	</p>
	<div class="text-xs bg-gray-100 p-2 rounded">
	<span class="text-primary font-medium">Supports:</span> OpenAI, Llama3, Anthropic, HuggingFace, Ollama, and more
	</div>
	</div>

	<div class="bg-gray-50 p-5 rounded-lg">
	<div class="flex items-center mb-3">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
	<i class="fas fa-comments text-white"></i>
	</div>
	<h4 class="font-semibold">Messages</h4>
	</div>
	<p class="text-sm text-gray-600 mb-3">
	Messaging protocols for agent communication, enabling standardized information exchange.
	</p>
	<div class="text-xs bg-gray-100 p-2 rounded">
	<span class="text-primary font-medium">Includes:</span> Standardized message formats, role-based messaging, content validation
	</div>
	</div>

	<div class="bg-gray-50 p-5 rounded-lg">
	<div class="flex items-center mb-3">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
	<i class="fas fa-memory text-white"></i>
	</div>
	<h4 class="font-semibold">Memory</h4>
	</div>
	<p class="text-sm text-gray-600 mb-3">
	Memory storage and retrieval mechanisms for more grounded learning and inference.
	</p>
	<div class="text-xs bg-gray-100 p-2 rounded">
	<span class="text-primary font-medium">Features:</span> In-context memory, external database connections, persistent storage
	</div>
	</div>

	<div class="bg-gray-50 p-5 rounded-lg">
	<div class="flex items-center mb-3">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
	<i class="fas fa-tools text-white"></i>
	</div>
	<h4 class="font-semibold">Tools</h4>
	</div>
	<p class="text-sm text-gray-600 mb-3">
	Integration with external tools, allowing agents to interact with the external world.
	</p>
	<div class="text-xs bg-gray-100 p-2 rounded">
	<span class="text-primary font-medium">Examples:</span> Search, Twitter, GitHub, Google Maps, Reddit, code execution
	</div>
	</div>

	<div class="bg-gray-50 p-5 rounded-lg">
	<div class="flex items-center mb-3">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
	<i class="fas fa-quote-right text-white"></i>
	</div>
	<h4 class="font-semibold">Prompts</h4>
	</div>
	<p class="text-sm text-gray-600 mb-3">
	Prompt engineering and customization for guiding agent behavior and responses.
	</p>
	<div class="text-xs bg-gray-100 p-2 rounded">
	<span class="text-primary font-medium">Capabilities:</span> Role definition, behavior guidance, task specification
	</div>
	</div>

	<div class="bg-gray-50 p-5 rounded-lg">
	<div class="flex items-center mb-3">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
	<i class="fas fa-tasks text-white"></i>
	</div>
	<h4 class="font-semibold">Tasks</h4>
	</div>
	<p class="text-sm text-gray-600 mb-3">
	Task creation and management for agent workflows and goal-directed behavior.
	</p>
	<div class="text-xs bg-gray-100 p-2 rounded">
	<span class="text-primary font-medium">Functions:</span> Task definition, decomposition, distribution, prioritization
	</div>
	</div>

	<div class="bg-gray-50 p-5 rounded-lg">
	<div class="flex items-center mb-3">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
	<i class="fas fa-project-diagram text-white"></i>
	</div>
	<h4 class="font-semibold">Society</h4>
	</div>
	<p class="text-sm text-gray-600 mb-3">
	Components for building agent societies and facilitating inter-agent collaboration.
	</p>
	<div class="text-xs bg-gray-100 p-2 rounded">
	<span class="text-primary font-medium">Elements:</span> Agent role definition, coordination protocols, workforce management
	</div>
	</div>

	<div class="bg-gray-50 p-5 rounded-lg">
	<div class="flex items-center mb-3">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
	<i class="fas fa-search-plus text-white"></i>
	</div>
	<h4 class="font-semibold">Retrievers</h4>
	</div>
	<p class="text-sm text-gray-600 mb-3">
	Retrieval methods for knowledge access, enhancing agent capabilities with external information.
	</p>
	<div class="text-xs bg-gray-100 p-2 rounded">
	<span class="text-primary font-medium">Types:</span> RAG (Retrieval-Augmented Generation), vector databases, knowledge graphs
	</div>
	</div>
	</div>

	<div class="bg-gray-100 p-5 rounded-lg">
	<h4 class="font-semibold mb-3">How These Components Work Together</h4>
	<p class="text-sm mb-3">
	In a typical CAMEL-AI system, these components interact in the following way:
	</p>
	<ol class="text-sm space-y-2 list-decimal pl-5">
	<li>
	<span class="font-medium">Task Definition:</span> A task is defined using the Task module, specifying what needs to be accomplished.
	</li>
	<li>
	<span class="font-medium">Agent Creation:</span> Agents are created with specific roles, using Models for intelligence and Prompts for behavior guidance.
	</li>
	<li>
	<span class="font-medium">Collaboration Setup:</span> The Society module establishes communication channels and protocols between agents.
	</li>
	<li>
	<span class="font-medium">Task Execution:</span> Agents use Tools to interact with the external world, Memory to maintain context, and Messages to communicate with each other.
	</li>
	<li>
	<span class="font-medium">Information Retrieval:</span> When needed, Retrievers access additional knowledge to enhance agent responses.
	</li>
	<li>
	<span class="font-medium">Task Completion:</span> The collaborative effort leads to task completion, with minimal human intervention.
	</li>
	</ol>
	</div>
	</div>
	</section>

	<div class="section-divider"></div>

	<!-- Course Modules Section -->
	<section id="modules" class="mb-12">
	<h2 class="text-3xl font-bold mb-6">Course Modules</h2>
	<p class="text-gray-600 mb-8">
	Our comprehensive curriculum takes you from CAMEL-AI fundamentals to advanced multi-agent applications. Each module builds on previous knowledge, providing a structured learning path.
	</p>

	<!-- Module 1 -->
	<div id="module-1" class="module-card bg-white rounded-xl shadow-sm p-6 mb-8">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
	<span class="text-primary font-bold">1</span>
	</div>
	<h3 class="text-xl font-bold">Module 1: CAMEL-AI Fundamentals</h3>
	</div>

	<div class="pl-16">
	<p class="mb-4">
	This module introduces the core concepts of CAMEL-AI, its architecture, and the philosophy behind multi-agent systems.
	</p>

	<h4 class="font-semibold mb-2">Key Topics:</h4>
	<ul class="list-disc pl-5 mb-4 space-y-1 text-sm">
	<li>Introduction to agent-based AI systems</li>
	<li>Understanding the CAMEL-AI architecture</li>
	<li>Installation and setup of CAMEL-AI</li>
	<li>Core components overview</li>
	<li>Setting up API keys and environment</li>
	</ul>

	<div class="bg-gray-50 p-4 rounded-lg mb-4">
	<h4 class="font-semibold mb-2 text-sm">Installation</h4>
	<div class="code-block text-sm">
	<pre><code># Install the base CAMEL library
	pip install camel-ai

	# For all dependencies
	pip install 'camel-ai[all]'

	# For HuggingFace agents
	pip install 'camel-ai[huggingface-agent]'

	# For RAG or agent memory
	pip install 'camel-ai[tools]'</code></pre>
	</div>
	</div>

	<div class="bg-gray-50 p-4 rounded-lg mb-4">
	<h4 class="font-semibold mb-2 text-sm">Setting API Keys</h4>
	<div class="code-block text-sm">
	<pre><code>import os

	# For OpenAI models
	os.environ["OPENAI_API_KEY"] = "your-api-key-here"

	# Alternative: Use a .env file
	from dotenv import load_dotenv
	load_dotenv() # This loads variables from .env file</code></pre>
	</div>
	</div>

	<div class="flex items-center justify-between">
	<div class="text-sm text-gray-500">
	<span class="font-medium">Level:</span> Beginner
	</div>
	<a href="#module-2" class="text-primary text-sm hover:underline flex items-center">
	Next Module <i class="fas fa-chevron-right ml-1"></i>
	</a>
	</div>
	</div>
	</div>

	<!-- Module 2 -->
	<div id="module-2" class="module-card bg-white rounded-xl shadow-sm p-6 mb-8">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
	<span class="text-primary font-bold">2</span>
	</div>
	<h3 class="text-xl font-bold">Module 2: Creating Your First Agent</h3>
	</div>

	<div class="pl-16">
	<p class="mb-4">
	Learn how to create, customize, and interact with CAMEL-AI agents. This module covers the essential steps for bringing your first agent to life.
	</p>

	<h4 class="font-semibold mb-2">Key Topics:</h4>
	<ul class="list-disc pl-5 mb-4 space-y-1 text-sm">
	<li>Agent role definition and system messages</li>
	<li>Model selection and configuration</li>
	<li>Basic agent interaction with the step() method</li>
	<li>Understanding agent responses</li>
	<li>Setting agent output language</li>
	</ul>

	<div class="bg-gray-50 p-4 rounded-lg mb-4">
	<h4 class="font-semibold mb-2 text-sm">Creating Your First Agent</h4>
	<div class="code-block text-sm">
	<pre><code>from camel.agents import ChatAgent
	from camel.models import ModelFactory
	from camel.types import ModelPlatformType, ModelType

	# Define the model
	model = ModelFactory.create(
	model_platform=ModelPlatformType.OPENAI,
	model_type=ModelType.GPT_4O_MINI,
	)

	# Create your agent
	agent = ChatAgent(
	system_message="You are a helpful AI assistant that specializes in Python programming.",
	model=model,
	message_window_size=10 # Optional: set chat memory length
	)

	# Interact with the agent
	response = agent.step("Can you explain how to use list comprehensions in Python?")
	print(response.msgs[0].content)</code></pre>
	</div>
	</div>

	<div class="bg-primary bg-opacity-5 p-4 rounded-lg mb-4 border-l-4 border-primary">
	<h4 class="font-semibold mb-2 text-sm">Key Concept: Agent Role Definition</h4>
	<p class="text-sm">
	In CAMEL-AI, an agent's role is defined through its system message, which guides its behavior, expertise, and how it approaches tasks. The more specific and detailed the role definition, the more focused the agent's responses will be.
	</p>
	</div>

	<div class="flex items-center justify-between">
	<div class="text-sm text-gray-500">
	<span class="font-medium">Level:</span> Beginner
	</div>
	<a href="#module-3" class="text-primary text-sm hover:underline flex items-center">
	Next Module <i class="fas fa-chevron-right ml-1"></i>
	</a>
	</div>
	</div>
	</div>

	<!-- Module 3 -->
	<div id="module-3" class="module-card bg-white rounded-xl shadow-sm p-6 mb-8">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
	<span class="text-primary font-bold">3</span>
	</div>
	<h3 class="text-xl font-bold">Module 3: Tools & Memory</h3>
	</div>

	<div class="pl-16">
	<p class="mb-4">
	Enhance your agents with tools for external interaction and memory capabilities for context retention and learning.
	</p>

	<h4 class="font-semibold mb-2">Key Topics:</h4>
	<ul class="list-disc pl-5 mb-4 space-y-1 text-sm">
	<li>Integrating tools with your agents</li>
	<li>Working with search, math, and specialized toolkits</li>
	<li>Understanding tool calling and response handling</li>
	<li>Implementing memory systems</li>
	<li>Working with in-context and external memory</li>
	<li>Memory management and retrieval</li>
	</ul>

	<div class="bg-gray-50 p-4 rounded-lg mb-4">
	<h4 class="font-semibold mb-2 text-sm">Adding Tools to Your Agent</h4>
	<div class="code-block text-sm">
	<pre><code>from camel.agents import ChatAgent
	from camel.models import ModelFactory
	from camel.toolkits import MathToolkit, SearchToolkit

	# Create an agent with tools
	tooled_agent = ChatAgent(
	system_message="You are a research assistant with access to tools.",
	model=ModelFactory.create(),
	tools=[
	*MathToolkit().get_tools(), # Math operations
	*SearchToolkit().get_tools(), # Web search capabilities
	]
	)

	# Use the agent with tools
	response = agent.step("What is the square root of 169, and who discovered it?")
	print(response.msgs[0].content)

	# Check tool calls
	print(response.info['tool_calls'])</code></pre>
	</div>
	</div>

	<div class="bg-gray-50 p-4 rounded-lg mb-4">
	<h4 class="font-semibold mb-2 text-sm">Working with Agent Memory</h4>
	<div class="code-block text-sm">
	<pre><code>from camel.agents import ChatAgent
	from camel.messages import BaseMessage

	# Create an agent with extended memory
	memory_agent = ChatAgent(
	system_message="You are an assistant with a good memory.",
	model=ModelFactory.create(),
	message_window_size=20, # Remember more context
	)

	# Access agent memory
	context = memory_agent.memory.get_context()

	# Add a message to memory
	memory_agent.record_message(BaseMessage.make_user_message(
	content="Remember this important information."
	))</code></pre>
	</div>
	</div>

	<div class="flex items-center justify-between">
	<div class="text-sm text-gray-500">
	<span class="font-medium">Level:</span> Intermediate
	</div>
	<a href="#module-4" class="text-primary text-sm hover:underline flex items-center">
	Next Module <i class="fas fa-chevron-right ml-1"></i>
	</a>
	</div>
	</div>
	</div>

	<!-- Module 4 -->
	<div id="module-4" class="module-card bg-white rounded-xl shadow-sm p-6 mb-8">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
	<span class="text-primary font-bold">4</span>
	</div>
	<h3 class="text-xl font-bold">Module 4: Multi-Agent Systems</h3>
	</div>

	<div class="pl-16">
	<p class="mb-4">
	Discover how to create collaborative agent societies where multiple agents work together to solve complex tasks.
	</p>

	<h4 class="font-semibold mb-2">Key Topics:</h4>
	<ul class="list-disc pl-5 mb-4 space-y-1 text-sm">
	<li>Multi-agent architecture in CAMEL-AI</li>
	<li>Agent role specialization and collaboration</li>
	<li>Creating agent workforces</li>
	<li>Task decomposition and assignment</li>
	<li>Inter-agent communication protocols</li>
	<li>Managing agent collaboration</li>
	</ul>

	<div class="bg-gray-50 p-4 rounded-lg mb-4">
	<h4 class="font-semibold mb-2 text-sm">Building a Multi-Agent System</h4>
	<div class="code-block text-sm">
	<pre><code>from camel.agents import ChatAgent
	from camel.societies.workforce import Workforce
	from camel.tasks.task import Task
	from camel.models import ModelFactory

	# Create individual agents
	researcher = ChatAgent(
	system_message="You are a research specialist who finds information.",
	model=ModelFactory.create(),
	tools=[SearchToolkit().get_tools()]
	)

	analyst = ChatAgent(
	system_message="You analyze information and extract insights.",
	model=ModelFactory.create()
	)

	writer = ChatAgent(
	system_message="You create clear, engaging content from analysis.",
	model=ModelFactory.create()
	)

	# Create workforce
	team = Workforce('Content Creation Team')
	team.add_single_agent_worker("Researcher", worker=researcher)
	team.add_single_agent_worker("Analyst", worker=analyst)
	team.add_single_agent_worker("Writer", worker=writer)

	# Define and process a task
	content_task = Task(
	content="Create a comprehensive blog post about renewable energy trends.",
	id='blog_001',
	)
	result = team.process_task(content_task)
	print(result.result)</code></pre>
	</div>
	</div>

	<div class="bg-primary bg-opacity-5 p-4 rounded-lg mb-4 border-l-4 border-primary">
	<h4 class="font-semibold mb-2 text-sm">Key Concept: Agent Specialization</h4>
	<p class="text-sm">
	In multi-agent systems, each agent should have a specialized role with clear responsibilities. This specialization allows the workforce to handle complex tasks efficiently, with each agent focusing on what it does best. The Workforce module in CAMEL-AI manages the coordination between these specialized agents.
	</p>
	</div>

	<div class="flex items-center justify-between">
	<div class="text-sm text-gray-500">
	<span class="font-medium">Level:</span> Advanced
	</div>
	<a href="#module-5" class="text-primary text-sm hover:underline flex items-center">
	Next Module <i class="fas fa-chevron-right ml-1"></i>
	</a>
	</div>
	</div>
	</div>

	<!-- Module 5 -->
	<div id="module-5" class="module-card bg-white rounded-xl shadow-sm p-6 mb-8">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
	<span class="text-primary font-bold">5</span>
	</div>
	<h3 class="text-xl font-bold">Module 5: Advanced Applications</h3>
	</div>

	<div class="pl-16">
	<p class="mb-4">
	Explore advanced applications of CAMEL-AI, including Retrieval-Augmented Generation (RAG), knowledge graphs, and synthetic data generation.
	</p>

	<h4 class="font-semibold mb-2">Key Topics:</h4>
	<ul class="list-disc pl-5 mb-4 space-y-1 text-sm">
	<li>Implementing RAG with CAMEL-AI</li>
	<li>Building knowledge graph agents</li>
	<li>Synthetic data generation techniques</li>
	<li>Task decomposition with critic agents</li>
	<li>Embodied agents for physical interaction</li>
	<li>Integrating CAMEL-AI with other systems</li>
	</ul>

	<div class="bg-gray-50 p-4 rounded-lg mb-4">
	<h4 class="font-semibold mb-2 text-sm">Implementing RAG with CAMEL-AI</h4>
	<div class="code-block text-sm">
	<pre><code>from camel.agents import ChatAgent
	from camel.retrievers import VectorDBRetriever
	from camel.models import ModelFactory

	# Set up a retriever with vector database (conceptual example)
	retriever = VectorDBRetriever(
	database_url="your-vector-db-connection",
	embedding_model="text-embedding-ada-002",
	)

	# Create a RAG agent
	rag_agent = ChatAgent(
	system_message="You are a knowledge assistant that answers questions using a knowledge base.",
	model=ModelFactory.create(),
	retriever=retriever,
	)

	# Query the agent
	response = rag_agent.step("What are the latest approaches to renewable energy storage?")</code></pre>
	</div>
	</div>

	<div class="bg-gray-50 p-4 rounded-lg mb-4">
	<h4 class="font-semibold mb-2 text-sm">Synthetic Data Generation</h4>
	<div class="code-block text-sm">
	<pre><code>from camel.agents import ChatAgent
	from camel.messages import BaseMessage
	from camel.models import ModelFactory
	from camel.types import ModelPlatformType, ModelType

	# Create customer and service agent for synthetic conversations
	customer_agent = ChatAgent(
	BaseMessage.make_assistant_message(
	role_name="Customer",
	content="You are a customer with specific questions about a product."
	),
	model=ModelFactory.create(
	model_platform=ModelPlatformType.DEFAULT,
	model_type=ModelType.DEFAULT,
	)
	)

	service_agent = ChatAgent(
	BaseMessage.make_assistant_message(
	role_name="Support Agent",
	content="You are a helpful customer support agent for a tech company."
	),
	model=ModelFactory.create(
	model_platform=ModelPlatformType.DEFAULT,
	model_type=ModelType.DEFAULT,
	)
	)

	# Generate synthetic conversation
	conversations = []
	initial_query = "I'm having trouble setting up my new device."

	# Conversation loop
	customer_msg = BaseMessage.make_user_message(content=initial_query)
	for i in range(5): # 5 turns of conversation
	service_response = service_agent.step(customer_msg.content)
	conversations.append({"role": "customer", "message": customer_msg.content})
	conversations.append({"role": "service", "message": service_response.msgs[0].content})

	if i < 4: # Skip last customer turn
	customer_msg = customer_agent.step(service_response.msgs[0].content)

	# Save synthetic data
	import json
	with open("synthetic_support_conversations.json", "w") as f:
	json.dump(conversations, f, indent=2)</code></pre>
	</div>
	</div>

	<div class="flex items-center justify-between">
	<div class="text-sm text-gray-500">
	<span class="font-medium">Level:</span> Advanced
	</div>
	<a href="#examples" class="text-primary text-sm hover:underline flex items-center">
	Go to Practical Examples <i class="fas fa-chevron-right ml-1"></i>
	</a>
	</div>
	</div>
	</div>
	</section>

	<div class="section-divider"></div>

	<!-- Practical Examples Section -->
	<section id="examples" class="mb-12">
	<h2 class="text-3xl font-bold mb-6">Practical Examples</h2>
	<p class="text-gray-600 mb-8">
	Explore real-world implementations of CAMEL-AI through these practical examples, each demonstrating a different aspect of the framework's capabilities.
	</p>

	<!-- Example 1 -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Example 1: Knowledge Graph Generation</h3>
	<div class="mb-4">
	<div class="text-sm text-gray-500 mb-2">
	<span class="font-medium">Difficulty:</span> Intermediate \|
	<span class="font-medium">Focus:</span> Knowledge Representation
	</div>
	<p class="mb-4">
	This example demonstrates how to use CAMEL-AI to automatically generate a knowledge graph from unstructured text, creating a structured representation of entities and their relationships.
	</p>

	<div class="bg-primary bg-opacity-5 p-4 rounded-lg mb-4 border-l-4 border-primary">
	<h4 class="font-semibold mb-2 text-sm">Use Case</h4>
	<p class="text-sm">
	A company with vast amounts of documentation wants to create a navigable knowledge graph to help employees find information more efficiently. Instead of manually creating the graph, they use CAMEL-AI to automatically extract entities and relationships from their documents.
	</p>
	</div>

	<div class="code-block text-sm">
	<pre><code>from camel.agents import ChatAgent
	from camel.models import ModelFactory
	from camel.toolkits import KnowledgeGraphToolkit
	from camel.messages import BaseMessage

	# Create a knowledge graph agent
	kg_agent = ChatAgent(
	BaseMessage.make_assistant_message(
	role_name="Knowledge Graph Specialist",
	content="You are an expert at extracting entities and relationships from text to build knowledge graphs."
	),
	model=ModelFactory.create(),
	tools=KnowledgeGraphToolkit().get_tools(),
	)

	# Sample document text
	document = """
	Renewable energy comes from sources that are naturally replenishing but flow-limited.
	They are virtually inexhaustible in duration but limited in the amount of energy that
	is available per unit of time. Renewable energy sources include biomass, hydropower,
	geothermal, wind, and solar. Wind energy is captured through wind turbines, which convert
	kinetic energy from wind into mechanical power. Solar energy is derived from the sun through
	solar panels using photovoltaic cells.
	"""

	# Generate knowledge graph
	response = kg_agent.step(f"Create a knowledge graph from this text: {document}")

	# The response would contain a structured knowledge graph with entities like
	# "Renewable Energy", "Wind Energy", "Solar Energy" and their relationships</code></pre>
	</div>

	<div class="mt-4">
	<h4 class="font-semibold mb-2 text-sm">Key Learnings</h4>
	<ul class="list-disc pl-5 text-sm">
	<li>How to use specialized agents for knowledge extraction</li>
	<li>Working with the KnowledgeGraphToolkit</li>
	<li>Converting unstructured text to structured relationships</li>
	<li>Creating searchable knowledge representations</li>
	</ul>
	</div>
	</div>
	</div>

	<!-- Example 2 -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Example 2: Customer Support Multi-Agent System</h3>
	<div class="mb-4">
	<div class="text-sm text-gray-500 mb-2">
	<span class="font-medium">Difficulty:</span> Advanced \|
	<span class="font-medium">Focus:</span> Multi-Agent Collaboration
	</div>
	<p class="mb-4">
	This example showcases a sophisticated customer support system with multiple specialized agents working together to handle customer inquiries.
	</p>

	<div class="bg-primary bg-opacity-5 p-4 rounded-lg mb-4 border-l-4 border-primary">
	<h4 class="font-semibold mb-2 text-sm">Use Case</h4>
	<p class="text-sm">
	An e-commerce company wants to automate their customer support to handle common inquiries. They implement a multi-agent system where different agents handle different aspects of customer service, working together to provide comprehensive assistance.
	</p>
	</div>

	<div class="code-block text-sm">
	<pre><code>from camel.agents import ChatAgent
	from camel.societies.workforce import Workforce
	from camel.tasks.task import Task
	from camel.models import ModelFactory
	from camel.toolkits import SearchToolkit

	# Create greeter agent
	greeter_agent = ChatAgent(
	system_message="You are the initial greeter for our customer support. Welcome customers warmly and identify their needs.",
	model=ModelFactory.create()
	)

	# Create product specialist
	product_agent = ChatAgent(
	system_message="You are a product specialist who knows all details about our product catalog.",
	model=ModelFactory.create(),
	tools=[SearchToolkit().get_tools()] # Can search product database
	)

	# Create support specialist
	support_agent = ChatAgent(
	system_message="You handle technical support issues and customer complaints with patience and expertise.",
	model=ModelFactory.create()
	)

	# Set up the workforce
	support_team = Workforce('Customer Support')
	support_team.add_single_agent_worker("Greeter", worker=greeter_agent)
	support_team.add_single_agent_worker("Product Specialist", worker=product_agent)
	support_team.add_single_agent_worker("Support Specialist", worker=support_agent)

	# Process customer query
	customer_query = Task(
	content="I received my order yesterday but the product is damaged. I'd like a replacement or refund.",
	id='customer_123',
	)
	response = support_team.process_task(customer_query)
	print(response.result)</code></pre>
	</div>

	<div class="mt-4">
	<h4 class="font-semibold mb-2 text-sm">Key Learnings</h4>
	<ul class="list-disc pl-5 text-sm">
	<li>Setting up a multi-agent workforce with specialized roles</li>
	<li>Task routing between different agents</li>
	<li>Coordinating responses across multiple agents</li>
	<li>Implementing a complete customer support workflow</li>
	</ul>
	</div>
	</div>
	</div>

	<!-- Example 3 -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Example 3: Dynamic Travel Planning</h3>
	<div class="mb-4">
	<div class="text-sm text-gray-500 mb-2">
	<span class="font-medium">Difficulty:</span> Advanced \|
	<span class="font-medium">Focus:</span> Tools Integration & Planning
	</div>
	<p class="mb-4">
	This example demonstrates a complex travel planning system using multiple agents with specialized tools to create personalized travel itineraries.
	</p>

	<div class="bg-primary bg-opacity-5 p-4 rounded-lg mb-4 border-l-4 border-primary">
	<h4 class="font-semibold mb-2 text-sm">Use Case</h4>
	<p class="text-sm">
	A travel agency wants to create personalized travel itineraries for their clients. They implement a multi-agent system where different agents handle various aspects of travel planning, from destination research to logistics and itinerary creation.
	</p>
	</div>

	<div class="code-block text-sm">
	<pre><code>from camel.agents import ChatAgent
	from camel.societies.workforce import Workforce
	from camel.tasks.task import Task
	from camel.models import ModelFactory
	from camel.toolkits import GoogleMapsToolkit, SearchToolkit

	# Create destination expert agent
	destination_agent = ChatAgent(
	system_message="You are a travel destination expert with deep knowledge about global destinations.",
	model=ModelFactory.create(),
	tools=[SearchToolkit().get_tools()]
	)

	# Create logistics agent with mapping capabilities
	logistics_agent = ChatAgent(
	system_message="You handle travel logistics including flights, accommodations, and local transportation.",
	model=ModelFactory.create(),
	tools=GoogleMapsToolkit().get_tools()
	)

	# Create itinerary planner
	itinerary_agent = ChatAgent(
	system_message="You create detailed day-by-day travel itineraries based on traveler preferences.",
	model=ModelFactory.create()
	)

	# Set up travel planning workforce
	travel_team = Workforce('Travel Planning')
	travel_team.add_single_agent_worker("Destination Expert", worker=destination_agent)
	travel_team.add_single_agent_worker("Logistics Specialist", worker=logistics_agent)
	travel_team.add_single_agent_worker("Itinerary Planner", worker=itinerary_agent)

	# Process travel request
	travel_request = Task(
	content="I want a 5-day trip to Tokyo in October for a family of four with two teenagers. We're interested in technology, anime, and traditional culture.",
	id='travel_001',
	)
	itinerary = travel_team.process_task(travel_request)
	print(itinerary.result)</code></pre>
	</div>

	<div class="mt-4">
	<h4 class="font-semibold mb-2 text-sm">Key Learnings</h4>
	<ul class="list-disc pl-5 text-sm">
	<li>Integrating specialized tools like Google Maps for real-world data</li>
	<li>Coordinating complex planning tasks across multiple agents</li>
	<li>Creating personalized outputs based on user preferences</li>
	<li>Building practical applications with real-world utility</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<div class="section-divider"></div>

	<!-- Business Use Cases Section -->
	<section id="business" class="mb-12">
	<h2 class="text-3xl font-bold mb-6">Business Use Cases</h2>
	<p class="text-gray-600 mb-8">
	Discover how businesses across various industries are leveraging CAMEL-AI to solve real-world challenges, automate processes, and create value.
	</p>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
	<!-- Use Case 1 -->
	<div class="bg-white rounded-xl shadow-sm p-6 h-full">
	<div class="flex items-start mb-4">
	<div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
	<i class="fas fa-cogs text-primary"></i>
	</div>
	<div>
	<h3 class="text-xl font-bold">Workflow Automation</h3>
	<p class="text-sm text-gray-500">Marketing & Content Production</p>
	</div>
	</div>

	<p class="mb-4 text-sm">
	Marketing teams use CAMEL-AI to automate complex content production workflows, from data collection and analysis to report generation.
	</p>

	<div class="mb-4">
	<h4 class="font-semibold mb-2 text-sm">Key Components:</h4>
	<ul class="list-disc pl-5 text-sm">
	<li>Data collection agent with search tools</li>
	<li>Analysis agent for trend identification</li>
	<li>Content creation agent for report generation</li>
	<li>Coordination through Workforce module</li>
	</ul>
	</div>

	<div class="bg-gray-50 p-3 rounded-lg text-sm">
	<h4 class="font-semibold mb-2">Business Impact:</h4>
	<ul class="space-y-1 text-sm">
	<li><span class="text-primary font-medium">⬆️ 70%</span> reduction in report creation time</li>
	<li><span class="text-primary font-medium">⬆️ 50%</span> increase in content output</li>
	<li><span class="text-primary font-medium">⬆️ 30%</span> improvement in data accuracy</li>
	</ul>
	</div>
	</div>

	<!-- Use Case 2 -->
	<div class="bg-white rounded-xl shadow-sm p-6 h-full">
	<div class="flex items-start mb-4">
	<div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
	<i class="fas fa-headset text-primary"></i>
	</div>
	<div>
	<h3 class="text-xl font-bold">Customer Support Automation</h3>
	<p class="text-sm text-gray-500">E-commerce & Service Industries</p>
	</div>
	</div>

	<p class="mb-4 text-sm">
	E-commerce companies implement multi-agent support systems to handle customer inquiries, provide product information, and resolve issues.
	</p>

	<div class="mb-4">
	<h4 class="font-semibold mb-2 text-sm">Key Components:</h4>
	<ul class="list-disc pl-5 text-sm">
	<li>Initial greeting and classification agent</li>
	<li>Product information agent with database access</li>
	<li>Technical support agent for troubleshooting</li>
	<li>Escalation agent for complex issues</li>
	</ul>
	</div>

	<div class="bg-gray-50 p-3 rounded-lg text-sm">
	<h4 class="font-semibold mb-2">Business Impact:</h4>
	<ul class="space-y-1 text-sm">
	<li><span class="text-primary font-medium">⬆️ 85%</span> of queries handled without human intervention</li>
	<li><span class="text-primary font-medium">⬆️ 60%</span> reduction in response time</li>
	<li><span class="text-primary font-medium">⬆️ 40%</span> increase in customer satisfaction</li>
	</ul>
	</div>
	</div>

	<!-- Use Case 3 -->
	<div class="bg-white rounded-xl shadow-sm p-6 h-full">
	<div class="flex items-start mb-4">
	<div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
	<i class="fas fa-database text-primary"></i>
	</div>
	<div>
	<h3 class="text-xl font-bold">Synthetic Data Generation</h3>
	<p class="text-sm text-gray-500">Finance & Healthcare</p>
	</div>
	</div>

	<p class="mb-4 text-sm">
	Financial institutions and healthcare organizations use CAMEL-AI to generate synthetic data for model training while preserving privacy and security.
	</p>

	<div class="mb-4">
	<h4 class="font-semibold mb-2 text-sm">Key Components:</h4>
	<ul class="list-disc pl-5 text-sm">
	<li>Pattern identification agent for real data analysis</li>
	<li>Scenario generation agent for context creation</li>
	<li>Data generation agent for synthetic record creation</li>
	<li>Validation agent for quality assurance</li>
	</ul>
	</div>

	<div class="bg-gray-50 p-3 rounded-lg text-sm">
	<h4 class="font-semibold mb-2">Business Impact:</h4>
	<ul class="space-y-1 text-sm">
	<li><span class="text-primary font-medium">⬆️ 90%</span> reduction in data privacy concerns</li>
	<li><span class="text-primary font-medium">⬆️ 75%</span> faster dataset creation</li>
	<li><span class="text-primary font-medium">⬆️ 25%</span> improvement in model performance</li>
	</ul>
	</div>
	</div>

	<!-- Use Case 4 -->
	<div class="bg-white rounded-xl shadow-sm p-6 h-full">
	<div class="flex items-start mb-4">
	<div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
	<i class="fas fa-plane-departure text-primary"></i>
	</div>
	<div>
	<h3 class="text-xl font-bold">Dynamic Travel Planning</h3>
	<p class="text-sm text-gray-500">Travel & Hospitality</p>
	</div>
	</div>

	<p class="mb-4 text-sm">
	Travel agencies leverage CAMEL-AI to create personalized travel experiences with multi-agent systems that handle all aspects of trip planning.
	</p>

	<div class="mb-4">
	<h4 class="font-semibold mb-2 text-sm">Key Components:</h4>
	<ul class="list-disc pl-5 text-sm">
	<li>Destination research agent with search capabilities</li>
	<li>Logistics agent with mapping and transportation tools</li>
	<li>Preference matching agent for personalization</li>
	<li>Itinerary creation agent for final output</li>
	</ul>
	</div>

	<div class="bg-gray-50 p-3 rounded-lg text-sm">
	<h4 class="font-semibold mb-2">Business Impact:</h4>
	<ul class="space-y-1 text-sm">
	<li><span class="text-primary font-medium">⬆️ 80%</span> reduction in itinerary planning time</li>
	<li><span class="text-primary font-medium">⬆️ 65%</span> increase in customer satisfaction</li>
	<li><span class="text-primary font-medium">⬆️ 45%</span> more personalized travel experiences</li>
	</ul>
	</div>
	</div>
	</div>

	<!-- Implementation Timeline -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Business Implementation Timeline</h3>
	<p class="mb-6 text-sm">
	A practical roadmap for businesses looking to implement CAMEL-AI in their operations, from initial exploration to full deployment.
	</p>

	<div class="relative">
	<!-- Timeline line -->
	<div class="absolute h-full w-0.5 bg-gray-200 left-6 top-0"></div>

	<!-- Phase 1 -->
	<div class="relative flex items-start mb-8">
	<div class="absolute w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold">1</div>
	<div class="ml-20">
	<h4 class="font-bold mb-2">Exploration & Assessment (1-2 Weeks)</h4>
	<ul class="list-disc pl-5 text-sm space-y-1 text-gray-600">
	<li>Identify potential use cases within your organization</li>
	<li>Assess technical requirements and resource availability</li>
	<li>Set clear objectives and success metrics</li>
	<li>Create a small cross-functional implementation team</li>
	</ul>
	</div>
	</div>

	<!-- Phase 2 -->
	<div class="relative flex items-start mb-8">
	<div class="absolute w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold">2</div>
	<div class="ml-20">
	<h4 class="font-bold mb-2">Proof of Concept (2-4 Weeks)</h4>
	<ul class="list-disc pl-5 text-sm space-y-1 text-gray-600">
	<li>Implement a small-scale CAMEL-AI project in a controlled environment</li>
	<li>Test basic agent functionality with simplified tasks</li>
	<li>Gather feedback from stakeholders</li>
	<li>Refine approach based on initial results</li>
	</ul>
	</div>
	</div>

	<!-- Phase 3 -->
	<div class="relative flex items-start mb-8">
	<div class="absolute w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold">3</div>
	<div class="ml-20">
	<h4 class="font-bold mb-2">Development & Integration (1-2 Months)</h4>
	<ul class="list-disc pl-5 text-sm space-y-1 text-gray-600">
	<li>Develop full-featured multi-agent system</li>
	<li>Integrate with existing systems and data sources</li>
	<li>Implement security and compliance measures</li>
	<li>Conduct thorough testing and optimization</li>
	</ul>
	</div>
	</div>

	<!-- Phase 4 -->
	<div class="relative flex items-start mb-8">
	<div class="absolute w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold">4</div>
	<div class="ml-20">
	<h4 class="font-bold mb-2">Pilot Deployment (1 Month)</h4>
	<ul class="list-disc pl-5 text-sm space-y-1 text-gray-600">
	<li>Deploy to a limited user group</li>
	<li>Monitor performance and collect feedback</li>
	<li>Refine agent behavior and system performance</li>
	<li>Address any issues or limitations</li>
	</ul>
	</div>
	</div>

	<!-- Phase 5 -->
	<div class="relative flex items-start">
	<div class="absolute w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold">5</div>
	<div class="ml-20">
	<h4 class="font-bold mb-2">Full Implementation & Scaling (Ongoing)</h4>
	<ul class="list-disc pl-5 text-sm space-y-1 text-gray-600">
	<li>Roll out to entire organization or customer base</li>
	<li>Provide training and documentation</li>
	<li>Continuously monitor and improve the system</li>
	<li>Expand to additional use cases across the organization</li>
	</ul>
	</div>
	</div>
	</div>
	</div>

	<!-- ROI Considerations -->
	<div class="bg-white rounded-xl shadow-sm p-6">
	<h3 class="text-xl font-bold mb-4">ROI Considerations for CAMEL-AI Implementation</h3>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
	<!-- Benefits -->
	<div>
	<h4 class="font-semibold mb-3">Potential Benefits</h4>
	<ul class="space-y-2 text-sm">
	<li class="flex items-start">
	<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">Automation of complex workflows</span>
	<p class="text-gray-600">Reduce manual effort and increase throughput for knowledge-intensive tasks</p>
	</div>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">24/7 operation capability</span>
	<p class="text-gray-600">Provide continuous service without staffing constraints</p>
	</div>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">Scalability without proportional cost increase</span>
	<p class="text-gray-600">Handle growing workloads without linear staffing increases</p>
	</div>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">Higher consistency in outputs</span>
	<p class="text-gray-600">Standardized processes result in more consistent quality</p>
	</div>
	</li>
	<li class="flex items-start">
	<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">Valuable synthetic data generation</span>
	<p class="text-gray-600">Create training data without privacy concerns</p>
	</div>
	</li>
	</ul>
	</div>

	<!-- Costs -->
	<div>
	<h4 class="font-semibold mb-3">Cost Considerations</h4>
	<ul class="space-y-2 text-sm">
	<li class="flex items-start">
	<i class="fas fa-exclamation-circle text-amber-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">API and computing costs</span>
	<p class="text-gray-600">Budget for ongoing LLM API usage and compute resources</p>
	</div>
	</li>
	<li class="flex items-start">
	<i class="fas fa-exclamation-circle text-amber-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">Development and integration effort</span>
	<p class="text-gray-600">Initial investment in building and deploying systems</p>
	</div>
	</li>
	<li class="flex items-start">
	<i class="fas fa-exclamation-circle text-amber-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">Monitoring and maintenance</span>
	<p class="text-gray-600">Ongoing resources for system oversight and updates</p>
	</div>
	</li>
	<li class="flex items-start">
	<i class="fas fa-exclamation-circle text-amber-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">Training and change management</span>
	<p class="text-gray-600">Costs associated with organizational adoption</p>
	</div>
	</li>
	<li class="flex items-start">
	<i class="fas fa-exclamation-circle text-amber-500 mt-1 mr-2"></i>
	<div>
	<span class="font-medium">Potential refinement iterations</span>
	<p class="text-gray-600">Budget for ongoing improvements and adjustments</p>
	</div>
	</li>
	</ul>
	</div>
	</div>

	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="font-semibold mb-3">ROI Calculation Framework</h4>
	<p class="text-sm mb-3">
	A simplified approach to calculating return on investment for CAMEL-AI implementations:
	</p>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
	<div>
	<h5 class="font-medium mb-2">Quantifiable Benefits</h5>
	<ul class="list-disc pl-5 space-y-1 text-gray-600">
	<li>Labor cost savings from automation</li>
	<li>Increased throughput and capacity</li>
	<li>Error reduction and quality improvements</li>
	<li>Customer satisfaction impact on retention</li>
	<li>Revenue increase from improved processes</li>
	</ul>
	</div>

	<div>
	<h5 class="font-medium mb-2">Implementation Costs</h5>
	<ul class="list-disc pl-5 space-y-1 text-gray-600">
	<li>Initial development and setup</li>
	<li>Integration with existing systems</li>
	<li>Ongoing API and infrastructure costs</li>
	<li>Maintenance and monitoring resources</li>
	<li>Training and organizational change costs</li>
	</ul>
	</div>
	</div>

	<div class="mt-4 bg-white p-3 rounded border border-gray-200">
	<p class="font-medium text-center">ROI = (Total Benefits - Total Costs) / Total Costs × 100%</p>
	</div>
	</div>
	</div>
	</section>

	<div class="section-divider"></div>

	<!-- Comprehensive Cheatsheet Section -->
	<section id="cheatsheet" class="mb-12">
	<h2 class="text-3xl font-bold mb-6">Comprehensive Cheatsheet</h2>
	<p class="text-gray-600 mb-8">
	This comprehensive cheatsheet provides quick reference code snippets for implementing CAMEL-AI features, from basic setup to advanced applications.
	</p>

	<!-- Installation and Setup -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Installation and Setup</h3>

	<div class="code-block text-sm mb-4">
	<pre><code># Basic installation
	pip install camel-ai

	# Full installation with all dependencies
	pip install 'camel-ai[all]'

	# Setting up API keys
	import os

	# For OpenAI models
	os.environ["OPENAI_API_KEY"] = "your-api-key-here"

	# Using .env file
	from dotenv import load_dotenv
	load_dotenv() # Loads variables from .env file</code></pre>
	</div>
	</div>

	<!-- Creating Agents -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Creating Agents</h3>

	<div class="code-block text-sm mb-4">
	<pre><code># Simple agent creation
	from camel.agents import ChatAgent
	from camel.models import ModelFactory

	agent = ChatAgent(
	system_message="You are a helpful assistant.",
	model=ModelFactory.create()
	)

	# Agent with specific role using BaseMessage
	from camel.messages import BaseMessage

	role_agent = ChatAgent(
	BaseMessage.make_assistant_message(
	role_name="Marketing Specialist",
	content="You are an expert in digital marketing strategies."
	),
	model=ModelFactory.create()
	)

	# Agent with custom model
	from camel.types import ModelPlatformType, ModelType

	custom_model_agent = ChatAgent(
	system_message="You are a technical writer specializing in documentation.",
	model=ModelFactory.create(
	model_platform=ModelPlatformType.OPENAI,
	model_type=ModelType.GPT_4O_MINI,
	)
	)

	# Interacting with an agent
	response = agent.step("Tell me about machine learning.")
	print(response.msgs[0].content) # Access the response content</code></pre>
	</div>
	</div>

	<!-- Working with Tools -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Working with Tools</h3>

	<div class="code-block text-sm mb-4">
	<pre><code># Adding tools to an agent
	from camel.toolkits import MathToolkit, SearchToolkit, GoogleMapsToolkit

	# Agent with math tools
	math_agent = ChatAgent(
	system_message="You are a math assistant.",
	model=ModelFactory.create(),
	tools=MathToolkit().get_tools()
	)

	# Agent with search capabilities
	search_agent = ChatAgent(
	system_message="You are a research assistant.",
	model=ModelFactory.create(),
	tools=SearchToolkit().get_tools()
	)

	# Agent with multiple tool types
	multi_tool_agent = ChatAgent(
	system_message="You are an assistant with multiple capabilities.",
	model=ModelFactory.create(),
	tools=[
	*MathToolkit().get_tools(),
	*SearchToolkit().get_tools(),
	*GoogleMapsToolkit().get_tools()
	]
	)

	# Checking tool calls in response
	response = search_agent.step("Who won the Nobel Prize in Physics in 2023?")
	print(response.info['tool_calls']) # See which tools were called</code></pre>
	</div>
	</div>

	<!-- Memory Management -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Memory Management</h3>

	<div class="code-block text-sm mb-4">
	<pre><code># Creating an agent with custom memory window
	memory_agent = ChatAgent(
	system_message="You are an assistant with enhanced memory.",
	model=ModelFactory.create(),
	message_window_size=20 # Remember more context
	)

	# Accessing agent memory
	context = memory_agent.memory.get_context()
	print(context) # Shows current memory contents

	# Adding a message to memory
	from camel.messages import BaseMessage

	new_message = BaseMessage.make_user_message(
	content="Remember this important fact for later reference."
	)
	memory_agent.record_message(new_message)

	# Clearing agent memory
	memory_agent.memory.clear()

	# Setting up external memory (conceptual example)
	from camel.memory import VectorDBMemory

	external_memory = VectorDBMemory(
	connection_string="your-vector-db-connection",
	embedding_model="text-embedding-ada-002"
	)

	agent_with_external_memory = ChatAgent(
	system_message="You have access to long-term memory.",
	model=ModelFactory.create(),
	memory=external_memory
	)</code></pre>
	</div>
	</div>

	<!-- Multi-Agent Systems -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Multi-Agent Systems</h3>

	<div class="code-block text-sm mb-4">
	<pre><code># Setting up a multi-agent workforce
	from camel.societies.workforce import Workforce
	from camel.tasks.task import Task

	# Create individual agents
	agent1 = ChatAgent(
	system_message="You are a research specialist.",
	model=ModelFactory.create(),
	tools=SearchToolkit().get_tools()
	)

	agent2 = ChatAgent(
	system_message="You analyze information and extract insights.",
	model=ModelFactory.create()
	)

	agent3 = ChatAgent(
	system_message="You create well-structured reports.",
	model=ModelFactory.create()
	)

	# Create the workforce
	team = Workforce('Research Team')
	team.add_single_agent_worker("Researcher", worker=agent1)
	team.add_single_agent_worker("Analyst", worker=agent2)
	team.add_single_agent_worker("Writer", worker=agent3)

	# Define and process a task
	research_task = Task(
	content="Create a comprehensive report on quantum computing advancements in 2024.",
	id='research_001',
	)
	result = team.process_task(research_task)
	print(result.result) # Final output from all agents</code></pre>
	</div>
	</div>

	<!-- Retrieval-Augmented Generation (RAG) -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Retrieval-Augmented Generation (RAG)</h3>

	<div class="code-block text-sm mb-4">
	<pre><code># Setting up RAG with CAMEL-AI (conceptual example)
	from camel.agents import ChatAgent
	from camel.retrievers import VectorDBRetriever
	from camel.models import ModelFactory

	# Set up a retriever with vector database
	retriever = VectorDBRetriever(
	database_url="your-vector-db-connection",
	embedding_model="text-embedding-ada-002",
	similarity_top_k=3 # Number of documents to retrieve
	)

	# Create a RAG agent
	rag_agent = ChatAgent(
	system_message="You are a knowledge assistant that uses a database to answer questions accurately.",
	model=ModelFactory.create(),
	retriever=retriever,
	)

	# Query the agent (will automatically retrieve relevant information)
	response = rag_agent.step("What are the key benefits of quantum computing for cryptography?")
	print(response.msgs[0].content)</code></pre>
	</div>
	</div>

	<!-- Synthetic Data Generation -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
	<h3 class="text-xl font-bold mb-4">Synthetic Data Generation</h3>

	<div class="code-block text-sm mb-4">
	<pre><code># Generating synthetic conversation data
	from camel.agents import ChatAgent
	from camel.messages import BaseMessage
	from camel.models import ModelFactory

	# Create role-playing agents
	customer_agent = ChatAgent(
	BaseMessage.make_assistant_message(
	role_name="Customer",
	content="You are a customer contacting support about a recent purchase."
	),
	model=ModelFactory.create(),
	)

	support_agent = ChatAgent(
	BaseMessage.make_assistant_message(
	role_name="Support Agent",
	content="You are a helpful customer support representative."
	),
	model=ModelFactory.create(),
	)

	# Generate conversation
	conversations = []
	initial_query = "I recently purchased your product but it's not working as expected."

	# Conversation loop
	customer_msg = BaseMessage.make_user_message(content=initial_query)
	for i in range(5): # 5 turns of conversation
	support_response = support_agent.step(customer_msg.content)
	conversations.append({"role": "customer", "message": customer_msg.content})
	conversations.append({"role": "support", "message": support_response.msgs[0].content})

	if i < 4: # Skip last customer turn
	customer_msg = customer_agent.step(support_response.msgs[0].content)

	# Save synthetic data
	import json
	with open("synthetic_conversations.json", "w") as f:
	json.dump(conversations, f, indent=2)</code></pre>
	</div>
	</div>

	<!-- Advanced Configurations -->
	<div class="bg-white rounded-xl shadow-sm p-6">
	<h3 class="text-xl font-bold mb-4">Advanced Configurations</h3>

	<div class="code-block text-sm mb-4">
	<pre><code># Setting agent output language
	agent = ChatAgent(
	system_message="You are a helpful assistant.",
	model=ModelFactory.create(),
	)
	agent.set_output_language('french') # Responses will be in French

	# Setting token limit
	limited_agent = ChatAgent(
	system_message="You provide concise information.",
	model=ModelFactory.create(),
	token_limit=1000 # Limit response length
	)

	# Using custom response terminators
	terminator_agent = ChatAgent(
	system_message="You help with code examples.",
	model=ModelFactory.create(),
	response_terminators=["END", "STOP"] # Custom signals to end responses
	)

	# Resetting an agent to initial state
	agent.reset()

	# Using a specific model configuration
	from camel.configs import ChatGPTConfig

	custom_config_agent = ChatAgent(
	system_message="You provide detailed explanations.",
	model=ModelFactory.create(
	model_platform=ModelPlatformType.OPENAI,
	model_type=ModelType.GPT_4O_MINI,
	model_config_dict=ChatGPTConfig(
	temperature=0.7,
	top_p=0.9
	).as_dict()
	)
	)</code></pre>
	</div>
	</div>
	</section>

	<!-- Conclusion -->
	<section class="mb-12">
	<div class="bg-primary text-white rounded-xl shadow-sm p-8">
	<h2 class="text-3xl font-bold mb-4">Ready to Build with CAMEL-AI?</h2>
	<p class="mb-6">
	You now have a comprehensive understanding of CAMEL-AI and its capabilities. The next step is to start building your own multi-agent systems for your specific use cases.
	</p>
	<div class="flex flex-wrap gap-4">
	<a href="https://github.com/camel-ai/camel" target="_blank" class="bg-white text-primary px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition inline-flex items-center">
	<i class="fab fa-github mr-2"></i> GitHub Repository
	</a>
	<a href="https://docs.camel-ai.org/" target="_blank" class="bg-transparent border-2 border-white px-6 py-2 rounded-full font-medium hover:bg-white hover:text-primary transition inline-flex items-center">
	<i class="fas fa-book mr-2"></i> Official Documentation
	</a>
	<a href="https://discord.camel-ai.org/" target="_blank" class="bg-transparent border-2 border-white px-6 py-2 rounded-full font-medium hover:bg-white hover:text-primary transition inline-flex items-center">
	<i class="fab fa-discord mr-2"></i> Join Community
	</a>
	</div>
	</div>
	</section>
	</div>
	</div>
	</div>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white py-12">
	<div class="container mx-auto px-4">
	<div class="flex flex-col md:flex-row justify-between mb-8">
	<div class="mb-6 md:mb-0">
	<div class="flex items-center space-x-2 mb-4">
	<div class="w-10 h-10 rounded-full bg-gradient flex items-center justify-center">
	<span class="text-white font-bold">C</span>
	</div>
	<span class="font-bold text-xl">CAMEL-AI</span>
	</div>
	<p class="text-gray-400 max-w-md text-sm">
	CAMEL-AI is an open-source community dedicated to finding the scaling laws of agents for data generation, world simulation, and task automation.
	</p>
	</div>

	<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
	<div>
	<h4 class="font-semibold mb-4">Resources</h4>
	<ul class="space-y-2 text-sm text-gray-400">
	<li><a href="https://docs.camel-ai.org/" class="hover:text-white transition">Documentation</a></li>
	<li><a href="https://github.com/camel-ai/camel/tree/master/examples" class="hover:text-white transition">Examples</a></li>
	<li><a href="https://huggingface.co/camel-ai" class="hover:text-white transition">Hugging Face</a></li>
	</ul>
	</div>

	<div>
	<h4 class="font-semibold mb-4">Community</h4>
	<ul class="space-y-2 text-sm text-gray-400">
	<li><a href="https://github.com/camel-ai/camel" class="hover:text-white transition">GitHub</a></li>
	<li><a href="https://discord.camel-ai.org/" class="hover:text-white transition">Discord</a></li>
	<li><a href="https://twitter.com/CamelAIOrg" class="hover:text-white transition">Twitter</a></li>
	</ul>
	</div>

	<div>
	<h4 class="font-semibold mb-4">Learn More</h4>
	<ul class="space-y-2 text-sm text-gray-400">
	<li><a href="https://arxiv.org/abs/2303.17760" class="hover:text-white transition">Research Paper</a></li>
	<li><a href="https://www.camel-ai.org/" class="hover:text-white transition">CAMEL-AI.org</a></li>
	<li><a href="https://www.camel-ai.org/community" class="hover:text-white transition">Join Us</a></li>
	</ul>
	</div>
	</div>
	</div>

	<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
	<p class="text-sm text-gray-500 mb-4 md:mb-0">
	© 2025 CAMEL-AI Learning Platform. All rights reserved.
	</p>
	<div class="flex space-x-4">
	<a href="https://github.com/camel-ai" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-github text-xl"></i>
	</a>
	<a href="https://discord.camel-ai.org/" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-discord text-xl"></i>
	</a>
	<a href="https://twitter.com/CamelAIOrg" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-twitter text-xl"></i>
	</a>
	</div>
	</div>
	</div>
	</footer>

	<!-- Scripts -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
	<script>
	// Smooth scrolling for anchor links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();
	document.querySelector(this.getAttribute('href')).scrollIntoView({
	behavior: 'smooth'
	});
	});
	});

	// Highlight active TOC link based on scroll position
	window.addEventListener('scroll', function() {
	const sections = document.querySelectorAll('section[id]');
	const scrollY = window.pageYOffset;

	sections.forEach(current => {
	const sectionHeight = current.offsetHeight;
	const sectionTop = current.offsetTop - 100;
	const sectionId = current.getAttribute('id');

	if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
	document.querySelectorAll('.toc-link').forEach(link => {
	link.classList.remove('active');
	if (link.getAttribute('href') === '#' + sectionId) {
	link.classList.add('active');
	}
	});
	}
	});
	});
	</script>
	</body>
	</html>