Creation chat
ClarkZhang
帮我做一个网页，我要讲清楚 ai agent的核心代码：
# 什么是AI Agent？
5个字母：GORAE，goal/observation/reasoning/action/evaluation
伪代码
```python
WHILE TRUE:
# 终止条件1：任务完成
IF goal_completed == TRUE:
BREAK
# 终止条件2：超限保护（次数/耗时）
IF count >= MAX_COUNT || duration > 1000MS:
delegate() # 任务降级：换模型/非LLM方案/硬编码逻辑
BREAK
# 1. 感知环境
observation = perception()
# 2. 推理决策（目标 + 观察 + 记忆）
decision = reasoning(goal, observation, memory)
# 3. 执行动作（调用工具）
action(decision)
```
**核心逻辑一句话总结：**
Agent 就是一个**持续循环**，不断做「感知 → 推理 → 行动」，直到任务完成或触发超时/次数限制。
# 关键点
1. Eval（评估）/ 目标
核心问题：**如何判断任务完成？**
- 目标明确、可量化：“赚100万”：路径太多了，无法实现
- 目标模糊、不可量化：帮我做一个电商网站
- 目标清晰，可量化：帮我重构这个函数，并且要通过所有的单元测试。
2. Observation / Tool Use 的运行环境
比如manus，运行环境就是一台电脑，会使用浏览器获取信息、会读写电脑的文件等
cursor/claudeCode，读写电脑文件、搜索、代码推理。
3. 分清楚agent和LLM。
同样是写一个愤怒的小鸟游戏，不同水平的模型，写出来的界面美观、操作顺畅，是模型能力决定的。
同样是写程序，是界面化、命令行化，是否暴露出模型的context window、聊天历史，这个就是agent决定的。
03-26 02:04
暂无回复
No comments yet
登录 后可以评论
Assistant
(HTML code has been generated and updated; see above for the current version.)
▼ Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Agent 核心代码解析</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
}
}
}
}
}
</script>
<style>
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
.code-block {
background-color: #1e293b;
border-radius: 0.5rem;
padding: 1rem;
overflow-x: auto;
}
.gorae-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
</style>
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-200">
<!-- 主题切换按钮 -->
<button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
<svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
<svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
</button>
<script>
function toggleTheme(){ var el=document.documentElement; var isDark=!el.classList.contains('dark'); el.classList.toggle('dark',isDark); localStorage.setItem('theme',isDark?'dark':'light'); applyTheme(isDark); }
function applyTheme(isDark){ document.getElementById('icon-moon').style.display=isDark?'none':'block'; document.getElementById('icon-sun').style.display=isDark?'block':'none'; }
document.addEventListener('DOMContentLoaded',function(){ var saved=localStorage.getItem('theme'); var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark',isDark); applyTheme(isDark); });
</script>
<!-- 主内容 -->
<div class="max-w-4xl mx-auto px-4 py-8">
<header class="mb-12 text-center">
<h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-emerald-500 bg-clip-text text-transparent">AI Agent 核心代码解析</h1>
<p class="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
深入理解 AI Agent 的工作原理：从 GORAE 框架到核心循环逻辑
</p>
</header>
<main>
<!-- 什么是AI Agent -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<span class="bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full mr-3">1</span>
什么是 AI Agent？
</h2>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6 border border-slate-200 dark:border-slate-700">
<p class="mb-4 text-lg">
AI Agent 是一个持续循环的智能实体，遵循 <span class="font-mono font-bold text-emerald-600 dark:text-emerald-400">GORAE</span> 框架：
</p>
<div class="gorae-grid mb-6">
<div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-4 text-center border border-blue-200 dark:border-blue-800">
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">G</div>
<div class="font-semibold mt-1">Goal</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">目标</div>
</div>
<div class="bg-amber-50 dark:bg-amber-900/30 rounded-lg p-4 text-center border border-amber-200 dark:border-amber-800">
<div class="text-2xl font-bold text-amber-600 dark:text-amber-400">O</div>
<div class="font-semibold mt-1">Observation</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">观察</div>
</div>
<div class="bg-purple-50 dark:bg-purple-900/30 rounded-lg p-4 text-center border border-purple-200 dark:border-purple-800">
<div class="text-2xl font-bold text-purple-600 dark:text-purple-400">R</div>
<div class="font-semibold mt-1">Reasoning</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">推理</div>
</div>
<div class="bg-emerald-50 dark:bg-emerald-900/30 rounded-lg p-4 text-center border border-emerald-200 dark:border-emerald-800">
<div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">A</div>
<div class="font-semibold mt-1">Action</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">行动</div>
</div>
<div class="bg-rose-50 dark:bg-rose-900/30 rounded-lg p-4 text-center border border-rose-200 dark:border-rose-800">
<div class="text-2xl font-bold text-rose-600 dark:text-rose-400">E</div>
<div class="font-semibold mt-1">Evaluation</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">评估</div>
</div>
</div>
</div>
</section>
<!-- 核心伪代码 -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<span class="bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full mr-3">2</span>
核心伪代码实现
</h2>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-slate-200 dark:border-slate-700">
<div class="code-block mb-4">
<pre class="text-slate-200 text-sm"><code>WHILE TRUE:
# 终止条件1：任务完成
IF goal_completed == TRUE:
BREAK
# 终止条件2：超限保护（次数/耗时）
IF count >= MAX_COUNT || duration > 1000MS:
delegate() # 任务降级：换模型/非LLM方案/硬编码逻辑
BREAK
# 1. 感知环境
observation = perception()
# 2. 推理决策（目标 + 观察 + 记忆）
decision = reasoning(goal, observation, memory)
# 3. 执行动作（调用工具）
action(decision)</code></pre>
</div>
<div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<p class="font-semibold text-blue-800 dark:text-blue-200 mb-2">核心逻辑总结：</p>
<p>Agent 就是一个<strong class="text-blue-600 dark:text-blue-400">持续循环</strong>，不断做「感知 → 推理 → 行动」，直到任务完成或触发超时/次数限制。</p>
</div>
</div>
</section>
<!-- 关键点解析 -->
<section>
<h2 class="text-2xl font-bold mb-4 flex items-center">
<span class="bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full mr-3">3</span>
关键点解析
</h2>
<div class="space-y-6">
<!-- 关键点1 -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-slate-200 dark:border-slate-700">
<h3 class="text-xl font-bold mb-3 text-amber-600 dark:text-amber-400">1. Evaluation / 目标</h3>
<p class="mb-3"><strong>核心问题：</strong>如何判断任务完成？</p>
<div class="space-y-3">
<div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
<p class="font-semibold text-red-700 dark:text-red-300">❌ 目标不明确/不可量化：</p>
<p class="mt-1">"赚100万" - 路径太多，无法实现</p>
</div>
<div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
<p class="font-semibold text-red-700 dark:text-red-300">❌ 目标模糊：</p>
<p class="mt-1">"帮我做一个电商网站" - 缺乏具体细节</p>
</div>
<div class="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
<p class="font-semibold text-green-700 dark:text-green-300">✅ 目标清晰且可量化：</p>
<p class="mt-1">"帮我重构这个函数，并且要通过所有的单元测试"</p>
</div>
</div>
</div>
<!-- 关键点2 -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-slate-200 dark:border-slate-700">
<h3 class="text-xl font-bold mb-3 text-emerald-600 dark:text-emerald-400">2. Observation / Tool Use 的运行环境</h3>
<p class="mb-3">Agent 的运行环境决定了它能做什么：</p>
<div class="grid md:grid-cols-2 gap-4">
<div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<p class="font-semibold text-blue-700 dark:text-blue-300">Manus</p>
<ul class="mt-2 space-y-1 list-disc list-inside">
<li>使用浏览器获取信息</li>
<li>读写电脑文件</li>
<li>操作系统级交互</li>
</ul>
</div>
<div class="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<p class="font-semibold text-purple-700 dark:text-purple-300">Cursor / Claude Code</p>
<ul class="mt-2 space-y-1 list-disc list-inside">
<li>读写电脑文件</li>
<li>代码搜索与理解</li>
<li>代码推理与生成</li>
</ul>
</div>
</div>
</div>
<!-- 关键点3 -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-slate-200 dark:border-slate-700">
<h3 class="text-xl font-bold mb-3 text-rose-600 dark:text-rose-400">3. 分清 Agent 和 LLM</h3>
<div class="space-y-4">
<div class="p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
<p class="font-semibold mb-2">模型能力决定输出质量：</p>
<p>同样写愤怒小鸟游戏，不同水平的模型输出的界面美观度和操作流畅度不同</p>
</div>
<div class="p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg border border-teal-200 dark:border-teal-800">
<p class="font-semibold mb-2">Agent 决定交互方式：</p>
<ul class="list-disc list-inside space-y-1">
<li>界面化 vs 命令行化</li>
<li>是否暴露模型的上下文窗口</li>
<li>是否保存聊天历史</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="mt-16 pt-8 border-t border-slate-200 dark:border-slate-800 text-center text-slate-600 dark:text-slate-400">
<p>AI Agent 核心原理解析 © 2023</p>
</footer>
</div>
</body>
</html>
03-26 02:06
暂无回复
No comments yet
登录 后可以评论
ClarkZhang
把中间的代码部分，替换成这个：WHILE TRUE:
# 0. 评估：任务是否完成（核心！）
IF evaluate(goal, memory) == COMPLETED:
BREAK
# 超限保护
IF count >= MAX_COUNT || duration > LIMIT:
delegate() # 降级处理
BREAK
# 1. 感知环境 + 上一步动作结果
observation = perceive(environment, last_action_result)
# 2. 推理（目标 + 感知 + 记忆）
plan = reasoning(goal, observation, memory)
# 3. 执行动作
result = execute(plan) # 工具调用/状态修改
# 4. 记忆更新（必须！）
update_memory(observation, plan, result)
# 5. 记录次数/耗时
count += 1
03-26 02:07
暂无回复
No comments yet
登录 后可以评论
Assistant
(HTML code has been generated and updated; see above for the current version.)
▼ Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Agent 核心代码解析</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
}
}
}
}
}
</script>
<style>
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
.code-block {
background-color: #1e293b;
border-radius: 0.5rem;
padding: 1rem;
overflow-x: auto;
}
.gorae-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
</style>
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-200">
<!-- 主题切换按钮 -->
<button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
<svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
<svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
</button>
<script>
function toggleTheme(){ var el=document.documentElement; var isDark=!el.classList.contains('dark'); el.classList.toggle('dark',isDark); localStorage.setItem('theme',isDark?'dark':'light'); applyTheme(isDark); }
function applyTheme(isDark){ document.getElementById('icon-moon').style.display=isDark?'none':'block'; document.getElementById('icon-sun').style.display=isDark?'block':'none'; }
document.addEventListener('DOMContentLoaded',function(){ var saved=localStorage.getItem('theme'); var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark',isDark); applyTheme(isDark); });
</script>
<!-- 主内容 -->
<div class="max-w-4xl mx-auto px-4 py-8">
<header class="mb-12 text-center">
<h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-emerald-500 bg-clip-text text-transparent">AI Agent 核心代码解析</h1>
<p class="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
深入理解 AI Agent 的工作原理：从 GORAE 框架到核心循环逻辑
</p>
</header>
<main>
<!-- 什么是AI Agent -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<span class="bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full mr-3">1</span>
什么是 AI Agent？
</h2>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6 border border-slate-200 dark:border-slate-700">
<p class="mb-4 text-lg">
AI Agent 是一个持续循环的智能实体，遵循 <span class="font-mono font-bold text-emerald-600 dark:text-emerald-400">GORAE</span> 框架：
</p>
<div class="gorae-grid mb-6">
<div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-4 text-center border border-blue-200 dark:border-blue-800">
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">G</div>
<div class="font-semibold mt-1">Goal</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">目标</div>
</div>
<div class="bg-amber-50 dark:bg-amber-900/30 rounded-lg p-4 text-center border border-amber-200 dark:border-amber-800">
<div class="text-2xl font-bold text-amber-600 dark:text-amber-400">O</div>
<div class="font-semibold mt-1">Observation</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">观察</div>
</div>
<div class="bg-purple-50 dark:bg-purple-900/30 rounded-lg p-4 text-center border border-purple-200 dark:border-purple-800">
<div class="text-2xl font-bold text-purple-600 dark:text-purple-400">R</div>
<div class="font-semibold mt-1">Reasoning</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">推理</div>
</div>
<div class="bg-emerald-50 dark:bg-emerald-900/30 rounded-lg p-4 text-center border border-emerald-200 dark:border-emerald-800">
<div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">A</div>
<div class="font-semibold mt-1">Action</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">行动</div>
</div>
<div class="bg-rose-50 dark:bg-rose-900/30 rounded-lg p-4 text-center border border-rose-200 dark:border-rose-800">
<div class="text-2xl font-bold text-rose-600 dark:text-rose-400">E</div>
<div class="font-semibold mt-1">Evaluation</div>
<div class="text-sm text-slate-600 dark:text-slate-300 mt-1">评估</div>
</div>
</div>
</div>
</section>
<!-- 核心伪代码 -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<span class="bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full mr-3">2</span>
核心伪代码实现
</h2>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-slate-200 dark:border-slate-700">
<div class="code-block mb-4">
<pre class="text-slate-200 text-sm"><code>WHILE TRUE:
# 0. 评估：任务是否完成（核心！）
IF evaluate(goal, memory) == COMPLETED:
BREAK
# 超限保护
IF count >= MAX_COUNT || duration > LIMIT:
delegate() # 降级处理
BREAK
# 1. 感知环境 + 上一步动作结果
observation = perceive(environment, last_action_result)
# 2. 推理（目标 + 感知 + 记忆）
plan = reasoning(goal, observation, memory)
# 3. 执行动作
result = execute(plan) # 工具调用/状态修改
# 4. 记忆更新（必须！）
update_memory(observation, plan, result)
# 5. 记录次数/耗时
count += 1</code></pre>
</div>
<div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<p class="font-semibold text-blue-800 dark:text-blue-200 mb-2">核心逻辑总结：</p>
<p>Agent 就是一个<strong class="text-blue-600 dark:text-blue-400">持续循环</strong>，不断做「感知 → 推理 → 行动」，直到任务完成或触发超时/次数限制。</p>
</div>
</div>
</section>
<!-- 关键点解析 -->
<section>
<h2 class="text-2xl font-bold mb-4 flex items-center">
<span class="bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full mr-3">3</span>
关键点解析
</h2>
<div class="space-y-6">
<!-- 关键点1 -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-slate-200 dark:border-slate-700">
<h3 class="text-xl font-bold mb-3 text-amber-600 dark:text-amber-400">1. Evaluation / 目标</h3>
<p class="mb-3"><strong>核心问题：</strong>如何判断任务完成？</p>
<div class="space-y-3">
<div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
<p class="font-semibold text-red-700 dark:text-red-300">❌ 目标不明确/不可量化：</p>
<p class="mt-1">"赚100万" - 路径太多，无法实现</p>
</div>
<div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
<p class="font-semibold text-red-700 dark:text-red-300">❌ 目标模糊：</p>
<p class="mt-1">"帮我做一个电商网站" - 缺乏具体细节</p>
</div>
<div class="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
<p class="font-semibold text-green-700 dark:text-green-300">✅ 目标清晰且可量化：</p>
<p class="mt-1">"帮我重构这个函数，并且要通过所有的单元测试"</p>
</div>
</div>
</div>
<!-- 关键点2 -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-slate-200 dark:border-slate-700">
<h3 class="text-xl font-bold mb-3 text-emerald-600 dark:text-emerald-400">2. Observation / Tool Use 的运行环境</h3>
<p class="mb-3">Agent 的运行环境决定了它能做什么：</p>
<div class="grid md:grid-cols-2 gap-4">
<div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<p class="font-semibold text-blue-700 dark:text-blue-300">Manus</p>
<ul class="mt-2 space-y-1 list-disc list-inside">
<li>使用浏览器获取信息</li>
<li>读写电脑文件</li>
<li>操作系统级交互</li>
</ul>
</div>
<div class="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<p class="font-semibold text-purple-700 dark:text-purple-300">Cursor / Claude Code</p>
<ul class="mt-2 space-y-1 list-disc list-inside">
<li>读写电脑文件</li>
<li>代码搜索与理解</li>
<li>代码推理与生成</li>
</ul>
</div>
</div>
</div>
<!-- 关键点3 -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-slate-200 dark:border-slate-700">
<h3 class="text-xl font-bold mb-3 text-rose-600 dark:text-rose-400">3. 分清 Agent 和 LLM</h3>
<div class="space-y-4">
<div class="p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
<p class="font-semibold mb-2">模型能力决定输出质量：</p>
<p>同样写愤怒小鸟游戏，不同水平的模型输出的界面美观度和操作流畅度不同</p>
</div>
<div class="p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg border border-teal-200 dark:border-teal-800">
<p class="font-semibold mb-2">Agent 决定交互方式：</p>
<ul class="list-disc list-inside space-y-1">
<li>界面化 vs 命令行化</li>
<li>是否暴露模型的上下文窗口</li>
<li>是否保存聊天历史</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="mt-16 pt-8 border-t border-slate-200 dark:border-slate-800 text-center text-slate-600 dark:text-slate-400">
<p>AI Agent 核心原理解析 © 2023</p>
</footer>
</div>
</body>
</html>
03-26 02:10
暂无回复
No comments yet
登录 后可以评论
Comments
暂无回复
No comments yet
登录 后可以评论