399 lines
13 KiB
Markdown
399 lines
13 KiB
Markdown
|
# AI会展策划多Agent演示系统 - 详细实施计划
|
|||
|
|
|
|||
|
|
## 一、系统架构设计
|
|||
|
|
|
|||
|
|
### 1.1 核心模块划分
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
演示系统
|
|||
|
|
├── 启动页模块
|
|||
|
|
│ ├── 系统介绍
|
|||
|
|
│ ├── Agent团队展示
|
|||
|
|
│ └── 开始演示入口
|
|||
|
|
├── 工作流演示模块
|
|||
|
|
│ ├── Agent协作可视化
|
|||
|
|
│ ├── 执行状态管理
|
|||
|
|
│ ├── 内容生成动画
|
|||
|
|
│ └── 进度控制
|
|||
|
|
└── 结果展示模块
|
|||
|
|
├── 策划方案展示
|
|||
|
|
├── 内容导航
|
|||
|
|
└── 导出功能
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 1.2 数据流设计
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 演示流程时序
|
|||
|
|
const demoSequence = {
|
|||
|
|
phase1: {
|
|||
|
|
duration: 60000, // 60秒
|
|||
|
|
agents: [
|
|||
|
|
{
|
|||
|
|
id: 'retrieval',
|
|||
|
|
startTime: 0,
|
|||
|
|
duration: 8000,
|
|||
|
|
prompt: '分析2024长三角新能源汽车市场现状...',
|
|||
|
|
output: '市场调研报告：\n1. 产业规模：...\n2. 主要企业：...'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'design',
|
|||
|
|
startTime: 2000,
|
|||
|
|
duration: 8000,
|
|||
|
|
prompt: '设计展会视觉方案和空间布局...',
|
|||
|
|
output: '设计方案：\n1. 主视觉：科技蓝绿配色...\n2. 展区布局：...'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'budget',
|
|||
|
|
startTime: 4000,
|
|||
|
|
duration: 8000,
|
|||
|
|
prompt: '制定展会预算方案...',
|
|||
|
|
output: '预算方案：\n总预算：900万元\n收入预期：1200万元...'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
phase2: {
|
|||
|
|
duration: 60000,
|
|||
|
|
coordinator: {
|
|||
|
|
startTime: 12000,
|
|||
|
|
duration: 10000,
|
|||
|
|
prompt: '整合各专家意见，形成初步方案...',
|
|||
|
|
output: '综合方案框架已生成...'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
phase3: {
|
|||
|
|
duration: 60000,
|
|||
|
|
agents: [
|
|||
|
|
{
|
|||
|
|
id: 'format',
|
|||
|
|
startTime: 24000,
|
|||
|
|
duration: 8000,
|
|||
|
|
prompt: '优化文档格式和结构...',
|
|||
|
|
output: '格式优化完成，生成标准策划文档...'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'execution',
|
|||
|
|
startTime: 26000,
|
|||
|
|
duration: 8000,
|
|||
|
|
prompt: '制定执行计划和时间表...',
|
|||
|
|
output: '执行计划：\nD-90：启动招商\nD-60：媒体推广...'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'marketing',
|
|||
|
|
startTime: 28000,
|
|||
|
|
duration: 8000,
|
|||
|
|
prompt: '设计营销推广方案...',
|
|||
|
|
output: '营销策略：\n1. 线上：社交媒体矩阵\n2. 线下：行业展会推广...'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 二、界面详细设计
|
|||
|
|
|
|||
|
|
### 2.1 启动页设计
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌──────────────────────────────────────────────────────────┐
|
|||
|
|
│ │
|
|||
|
|
│ [动画Logo] │
|
|||
|
|
│ │
|
|||
|
|
│ AI 会展策划多Agent系统 │
|
|||
|
|
│ │
|
|||
|
|
│ 7个专业Agent × 智能协作 × 3分钟演示 │
|
|||
|
|
│ │
|
|||
|
|
│ ┌────────────────────────────────────────────────┐ │
|
|||
|
|
│ │ Agent 团队 │ │
|
|||
|
|
│ │ 🔍信息检索 🎨设计 💰财务 📝格式 │ │
|
|||
|
|
│ │ ⚡执行 📢营销 🎯协调 │ │
|
|||
|
|
│ └────────────────────────────────────────────────┘ │
|
|||
|
|
│ │
|
|||
|
|
│ ┌────────────────────────────────────────────────┐ │
|
|||
|
|
│ │ 演示案例预览 │ │
|
|||
|
|
│ │ 项目：2024长三角新能源汽车展 │ │
|
|||
|
|
│ │ 规模：50,000㎡ | 350展商 | 50,000人次 │ │
|
|||
|
|
│ │ 时长：约3分钟完整演示 │ │
|
|||
|
|
│ └────────────────────────────────────────────────┘ │
|
|||
|
|
│ │
|
|||
|
|
│ [✨ 开始演示] [📖 了解更多] │
|
|||
|
|
│ │
|
|||
|
|
└──────────────────────────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2.2 工作流演示页设计
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌──────────────────────────────────────────────────────────┐
|
|||
|
|
│ AI会展策划系统 ⏸暂停 ↻重置 00:45 / 03:00 │
|
|||
|
|
├──────────────────────────────────────────────────────────┤
|
|||
|
|
│ │
|
|||
|
|
│ ┌─────────────── 工作流状态 ──────────────┐ │
|
|||
|
|
│ │ │ │
|
|||
|
|
│ │ ①──→②──→③ │ │
|
|||
|
|
│ │ ↘ ↓ ↙ │ │
|
|||
|
|
│ │ ⑦ │ │
|
|||
|
|
│ │ ↗ ↑ ↖ │ │
|
|||
|
|
│ │ ④──→⑤──→⑥ │ │
|
|||
|
|
│ │ │ │
|
|||
|
|
│ │ ① 信息检索 ✓ ④ 格式编辑 ⚡ │ │
|
|||
|
|
│ │ ② 设计专家 ✓ ⑤ 执行专家 ○ │ │
|
|||
|
|
│ │ ③ 财务预算 ✓ ⑥ 营销专家 ○ │ │
|
|||
|
|
│ │ ⑦ 策划协调 ⚡ │ │
|
|||
|
|
│ └──────────────────────────────────────────┘ │
|
|||
|
|
│ │
|
|||
|
|
│ ┌─────────────── 当前执行 ────────────────┐ │
|
|||
|
|
│ │ 📝 格式编辑专家 │ │
|
|||
|
|
│ │ Model: DeepSeek Chat Model4 │ │
|
|||
|
|
│ │ │ │
|
|||
|
|
│ │ [Prompt] │ │
|
|||
|
|
│ │ 请根据前期收集的信息，优化文档格式... │ │
|
|||
|
|
│ │ 要求： │ │
|
|||
|
|
│ │ 1. 标准化章节结构 │ │
|
|||
|
|
│ │ 2. 统一术语表达█ │ │
|
|||
|
|
│ │ │ │
|
|||
|
|
│ │ [输出] │ │
|
|||
|
|
│ │ 正在优化文档结构... │ │
|
|||
|
|
│ │ ✓ 第一章：策划案概述 │ │
|
|||
|
|
│ │ ⚡ 第二章：展会介绍█ │ │
|
|||
|
|
│ └──────────────────────────────────────────┘ │
|
|||
|
|
│ │
|
|||
|
|
│ ┌─────────────── 内容预览 ────────────────┐ │
|
|||
|
|
│ │ 📄 策划案概述 [████████] 100% │ │
|
|||
|
|
│ │ 📄 展会介绍 [████░░░░] 45% │ │
|
|||
|
|
│ │ 📄 营销方案 [░░░░░░░░] 0% │ │
|
|||
|
|
│ │ 📄 现场运营 [░░░░░░░░] 0% │ │
|
|||
|
|
│ │ 📄 预算分析 [░░░░░░░░] 0% │ │
|
|||
|
|
│ │ 📄 风险评估 [░░░░░░░░] 0% │ │
|
|||
|
|
│ └──────────────────────────────────────────┘ │
|
|||
|
|
│ │
|
|||
|
|
│ 总进度 [████████████░░░░░░░░░░░░░░] 40% │
|
|||
|
|
└──────────────────────────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2.3 动画效果设计
|
|||
|
|
|
|||
|
|
#### 2.3.1 Agent激活动画
|
|||
|
|
```javascript
|
|||
|
|
// Agent节点激活效果
|
|||
|
|
const agentActivation = {
|
|||
|
|
idle: {
|
|||
|
|
scale: 1,
|
|||
|
|
opacity: 0.6,
|
|||
|
|
border: '2px solid #e5e5e5'
|
|||
|
|
},
|
|||
|
|
active: {
|
|||
|
|
scale: 1.2,
|
|||
|
|
opacity: 1,
|
|||
|
|
border: '3px solid #3b82f6',
|
|||
|
|
animation: 'pulse 2s infinite',
|
|||
|
|
glow: '0 0 20px rgba(59, 130, 246, 0.5)'
|
|||
|
|
},
|
|||
|
|
completed: {
|
|||
|
|
scale: 1,
|
|||
|
|
opacity: 1,
|
|||
|
|
border: '2px solid #10b981',
|
|||
|
|
checkmark: '✓'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2.3.2 文字生成动画
|
|||
|
|
```javascript
|
|||
|
|
// 打字机效果配置
|
|||
|
|
const typewriterConfig = {
|
|||
|
|
speed: 35, // 35字/秒
|
|||
|
|
cursor: '█',
|
|||
|
|
cursorBlink: 500, // 光标闪烁间隔
|
|||
|
|
lineDelay: 100, // 换行延迟
|
|||
|
|
punctuationDelay: 200 // 标点停顿
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2.3.3 工作流连线动画
|
|||
|
|
```javascript
|
|||
|
|
// 数据流动效果
|
|||
|
|
const flowAnimation = {
|
|||
|
|
path: 'M0,0 L100,0',
|
|||
|
|
strokeDasharray: '5,5',
|
|||
|
|
animation: 'flow 2s linear infinite',
|
|||
|
|
gradient: 'linear-gradient(90deg, #3b82f6, #8b5cf6)'
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 三、具体实现步骤
|
|||
|
|
|
|||
|
|
### Phase 1: 数据准备（30分钟）
|
|||
|
|
|
|||
|
|
1. **Agent Prompt数据**
|
|||
|
|
```javascript
|
|||
|
|
const agentPrompts = {
|
|||
|
|
retrieval: {
|
|||
|
|
prompt: `作为信息检索专家，请分析以下需求：
|
|||
|
|
1. 调研长三角地区新能源汽车产业现状
|
|||
|
|
2. 收集主要参展商信息
|
|||
|
|
3. 分析竞品展会数据
|
|||
|
|
输出格式：结构化的市场分析报告`,
|
|||
|
|
expectedOutput: `市场分析报告：
|
|||
|
|
一、产业现状
|
|||
|
|
- 长三角新能源汽车产量占全国40%
|
|||
|
|
- 主要企业：特斯拉、蔚来、理想等
|
|||
|
|
二、参展商分析
|
|||
|
|
- 预计参展企业350家
|
|||
|
|
- 国际品牌占比30%`
|
|||
|
|
},
|
|||
|
|
// ... 其他6个Agent的prompt
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **生成内容数据**
|
|||
|
|
```javascript
|
|||
|
|
const generatedContent = {
|
|||
|
|
overview: {
|
|||
|
|
title: '策划案概述',
|
|||
|
|
sections: [
|
|||
|
|
{
|
|||
|
|
subtitle: '展会背景',
|
|||
|
|
content: '在全球碳中和目标推动下...',
|
|||
|
|
images: ['image1.jpg']
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
// ... 其他5个板块
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Phase 2: 核心功能开发（2小时）
|
|||
|
|
|
|||
|
|
1. **演示控制器**
|
|||
|
|
```javascript
|
|||
|
|
class DemoController {
|
|||
|
|
constructor() {
|
|||
|
|
this.currentPhase = 0;
|
|||
|
|
this.currentAgent = null;
|
|||
|
|
this.elapsedTime = 0;
|
|||
|
|
this.isPaused = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
start() {
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
if (!this.isPaused) {
|
|||
|
|
this.tick();
|
|||
|
|
}
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tick() {
|
|||
|
|
this.elapsedTime += 100;
|
|||
|
|
this.updateAgentStates();
|
|||
|
|
this.updateContent();
|
|||
|
|
this.updateProgress();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **Agent状态管理**
|
|||
|
|
```javascript
|
|||
|
|
class AgentManager {
|
|||
|
|
activateAgent(agentId) {
|
|||
|
|
// 1. 更新视觉状态
|
|||
|
|
// 2. 显示Prompt
|
|||
|
|
// 3. 开始输出动画
|
|||
|
|
// 4. 更新工作流连线
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
completeAgent(agentId) {
|
|||
|
|
// 1. 标记完成
|
|||
|
|
// 2. 传递数据到下一个Agent
|
|||
|
|
// 3. 更新进度
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. **内容生成器**
|
|||
|
|
```javascript
|
|||
|
|
class ContentGenerator {
|
|||
|
|
typeWriter(text, element, speed = 35) {
|
|||
|
|
let index = 0;
|
|||
|
|
const interval = setInterval(() => {
|
|||
|
|
if (index < text.length) {
|
|||
|
|
element.textContent += text[index];
|
|||
|
|
index++;
|
|||
|
|
} else {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
}
|
|||
|
|
}, 1000 / speed);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Phase 3: UI实现（1小时）
|
|||
|
|
|
|||
|
|
1. **使用单HTML文件架构**
|
|||
|
|
2. **集成Tailwind CSS**
|
|||
|
|
3. **实现响应式布局**
|
|||
|
|
4. **添加动画效果**
|
|||
|
|
|
|||
|
|
### Phase 4: 测试优化（30分钟）
|
|||
|
|
|
|||
|
|
1. **时序调试**
|
|||
|
|
2. **动画流畅度优化**
|
|||
|
|
3. **内容完整性检查**
|
|||
|
|
4. **交互响应测试**
|
|||
|
|
|
|||
|
|
## 四、关键技术点
|
|||
|
|
|
|||
|
|
### 4.1 状态同步
|
|||
|
|
- 使用单一状态源管理所有Agent状态
|
|||
|
|
- 确保动画与数据同步
|
|||
|
|
- 实时更新UI反馈
|
|||
|
|
|
|||
|
|
### 4.2 性能优化
|
|||
|
|
- 使用requestAnimationFrame优化动画
|
|||
|
|
- 懒加载图片资源
|
|||
|
|
- 防抖处理用户交互
|
|||
|
|
|
|||
|
|
### 4.3 用户体验
|
|||
|
|
- 平滑的过渡动画
|
|||
|
|
- 清晰的进度指示
|
|||
|
|
- 可控的演示节奏
|
|||
|
|
|
|||
|
|
## 五、交付标准
|
|||
|
|
|
|||
|
|
1. **功能完整性**
|
|||
|
|
- 完整的3分钟演示流程
|
|||
|
|
- 7个Agent全部展示
|
|||
|
|
- 6个内容板块生成
|
|||
|
|
|
|||
|
|
2. **视觉效果**
|
|||
|
|
- 流畅的动画效果
|
|||
|
|
- 符合设计规范的UI
|
|||
|
|
- 响应式布局适配
|
|||
|
|
|
|||
|
|
3. **代码质量**
|
|||
|
|
- 模块化设计
|
|||
|
|
- 注释完整
|
|||
|
|
- 易于维护扩展
|
|||
|
|
|
|||
|
|
## 六、时间安排
|
|||
|
|
|
|||
|
|
总计：4小时
|
|||
|
|
|
|||
|
|
- 0:00-0:30 数据准备
|
|||
|
|
- 0:30-2:30 核心功能开发
|
|||
|
|
- 2:30-3:30 UI实现
|
|||
|
|
- 3:30-4:00 测试优化
|
|||
|
|
|
|||
|
|
## 七、风险控制
|
|||
|
|
|
|||
|
|
1. **时序控制风险**
|
|||
|
|
- 方案：预设固定时间节点
|
|||
|
|
- 备选：手动控制模式
|
|||
|
|
|
|||
|
|
2. **动画性能风险**
|
|||
|
|
- 方案：降级处理
|
|||
|
|
- 备选：减少并发动画
|
|||
|
|
|
|||
|
|
3. **内容展示风险**
|
|||
|
|
- 方案：预加载所有内容
|
|||
|
|
- 备选：分段加载
|