283 lines
12 KiB
HTML
283 lines
12 KiB
HTML
<!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协作框架 - 真实的多Agent协作系统</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="navbar">
|
||
<div class="nav-container">
|
||
<div class="nav-logo">
|
||
<span class="logo-text">🤖 AI Agent协作</span>
|
||
</div>
|
||
<ul class="nav-menu">
|
||
<li><a href="#home">首页</a></li>
|
||
<li><a href="#features">特性</a></li>
|
||
<li><a href="#demo">演示</a></li>
|
||
<li><a href="#docs">文档</a></li>
|
||
<li><a href="#github" class="github-link">GitHub</a></li>
|
||
</ul>
|
||
<div class="hamburger">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section id="home" class="hero">
|
||
<div class="hero-container">
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">
|
||
从模拟到真实<br>
|
||
<span class="gradient-text">让每个AI Agent都拥有独立Git身份</span>
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
不是让AI Agent假装协作，而是让每个Agent都有真实的Git身份：<br>
|
||
独立的SSH密钥、GPG签名、用户名和邮箱，实现可追溯的团队协作历史
|
||
</p>
|
||
<div class="hero-buttons">
|
||
<button class="btn btn-primary" onclick="startDemo()">
|
||
🚀 立即体验
|
||
</button>
|
||
<button class="btn btn-secondary" onclick="scrollToSection('features')">
|
||
📖 了解更多
|
||
</button>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="stat">
|
||
<span class="stat-number">4</span>
|
||
<span class="stat-label">预定义Agent</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-number">100%</span>
|
||
<span class="stat-label">真实Git提交</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-number">一键</span>
|
||
<span class="stat-label">快速启动</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="terminal-window">
|
||
<div class="terminal-header">
|
||
<div class="terminal-buttons">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
<div class="terminal-title">Agent协作演示</div>
|
||
</div>
|
||
<div class="terminal-content">
|
||
<div class="terminal-line">
|
||
<span class="prompt">$</span>
|
||
<span class="command">./agents/switch_agent.sh claude-ai</span>
|
||
</div>
|
||
<div class="terminal-line">
|
||
<span class="prompt">claude-ai@framework</span>
|
||
<span class="command">git commit -m "设计系统架构"</span>
|
||
</div>
|
||
<div class="terminal-line">
|
||
<span class="prompt">$</span>
|
||
<span class="command">./agents/switch_agent.sh gemini-dev</span>
|
||
</div>
|
||
<div class="terminal-line">
|
||
<span class="prompt">gemini-dev@framework</span>
|
||
<span class="command">git commit -m "实现核心功能"</span>
|
||
</div>
|
||
<div class="terminal-line success">
|
||
✅ 真实的协作历史已创建
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section -->
|
||
<section id="features" class="features">
|
||
<div class="container">
|
||
<h2 class="section-title">核心特性</h2>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔐</div>
|
||
<h3>真实身份系统</h3>
|
||
<p>每个Agent拥有独立的SSH密钥、GPG签名和Git配置，确保每次提交都可追溯到具体Agent</p>
|
||
<ul>
|
||
<li>独立SSH密钥对</li>
|
||
<li>GPG签名验证</li>
|
||
<li>独立Git配置</li>
|
||
<li>完整审计日志</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🎭</div>
|
||
<h3>专业化角色</h3>
|
||
<p>预定义四种专业化Agent角色，每个都有明确的责任边界和专长领域</p>
|
||
<div class="roles-list">
|
||
<div class="role-item">
|
||
<strong>claude-ai</strong> - 架构师
|
||
</div>
|
||
<div class="role-item">
|
||
<strong>gemini-dev</strong> - 开发者
|
||
</div>
|
||
<div class="role-item">
|
||
<strong>qwen-ops</strong> - 运维
|
||
</div>
|
||
<div class="role-item">
|
||
<strong>llama-research</strong> - 研究员
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📊</div>
|
||
<h3>实时协作监控</h3>
|
||
<p>实时查看所有Agent的协作状态、提交统计和代码贡献分析</p>
|
||
<div class="stats-preview">
|
||
<div class="stat-bar">
|
||
<span>claude-ai</span>
|
||
<div class="bar"><div style="width: 25%"></div></div>
|
||
<span>5次提交</span>
|
||
</div>
|
||
<div class="stat-bar">
|
||
<span>gemini-dev</span>
|
||
<div class="bar"><div style="width: 40%"></div></div>
|
||
<span>8次提交</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Demo Section -->
|
||
<section id="demo" class="demo">
|
||
<div class="container">
|
||
<h2 class="section-title">实时演示</h2>
|
||
<div class="demo-container">
|
||
<div class="demo-panel">
|
||
<h3>Agent状态监控</h3>
|
||
<div id="agent-status" class="agent-grid">
|
||
<!-- 动态加载Agent状态 -->
|
||
</div>
|
||
</div>
|
||
<div class="demo-panel">
|
||
<h3>最近活动</h3>
|
||
<div id="recent-activity" class="activity-feed">
|
||
<!-- 动态加载活动数据 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-actions">
|
||
<button class="btn btn-primary" onclick="runDemo()">
|
||
🎬 运行演示
|
||
</button>
|
||
<button class="btn btn-secondary" onclick="resetDemo()">
|
||
🔄 重置演示
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Quick Start Section -->
|
||
<section class="quick-start">
|
||
<div class="container">
|
||
<h2 class="section-title">快速开始</h2>
|
||
<div class="install-options">
|
||
<div class="install-card">
|
||
<h3>🚀 一键安装</h3>
|
||
<div class="code-block">
|
||
<pre><code class="language-bash">curl -fsSL https://raw.githubusercontent.com/your-org/agent-collaboration-framework/main/install.sh | bash</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="install-card">
|
||
<h3>📦 手动安装</h3>
|
||
<div class="code-block">
|
||
<pre><code class="language-bash">git clone https://github.com/your-org/agent-collaboration-framework.git
|
||
cd agent-collaboration-framework
|
||
./install.sh</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="install-card">
|
||
<h3>🐳 Docker</h3>
|
||
<div class="code-block">
|
||
<pre><code class="language-bash">docker run -it -v $(pwd):/workspace agent-collaboration:latest</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Documentation Section -->
|
||
<section id="docs" class="documentation">
|
||
<div class="container">
|
||
<h2 class="section-title">文档中心</h2>
|
||
<div class="docs-grid">
|
||
<div class="doc-card">
|
||
<h3>📚 快速入门</h3>
|
||
<p>从零开始了解AI Agent协作框架</p>
|
||
<a href="docs/quickstart.html" class="doc-link">开始阅读 →</a>
|
||
</div>
|
||
<div class="doc-card">
|
||
<h3>🏗️ 架构指南</h3>
|
||
<p>深入理解系统架构和设计原理</p>
|
||
<a href="docs/architecture.html" class="doc-link">查看详情 →</a>
|
||
</div>
|
||
<div class="doc-card">
|
||
<h3>🔧 API文档</h3>
|
||
<p>完整的API参考和开发指南</p>
|
||
<a href="docs/api.html" class="doc-link">浏览API →</a>
|
||
</div>
|
||
<div class="doc-card">
|
||
<h3>🎯 使用案例</h3>
|
||
<p>真实场景下的使用示例和最佳实践</p>
|
||
<a href="docs/examples.html" class="doc-link">查看案例 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-section">
|
||
<h4>AI Agent协作框架</h4>
|
||
<p>让AI Agent拥有真实的Git身份，实现可追溯的团队协作</p>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>快速链接</h4>
|
||
<ul>
|
||
<li><a href="#home">首页</a></li>
|
||
<li><a href="#features">特性</a></li>
|
||
<li><a href="#demo">演示</a></li>
|
||
<li><a href="#docs">文档</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>社区</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/your-org/agent-collaboration-framework">GitHub</a></li>
|
||
<li><a href="https://github.com/your-org/agent-collaboration-framework/issues">问题反馈</a></li>
|
||
<li><a href="https://github.com/your-org/agent-collaboration-framework/discussions">讨论</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2024 AI Agent协作框架. 开源项目，欢迎贡献</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |