agent/README.md

# AI Agent 设计工作流 - 宝可梦主题奶茶快闪店

## 项目简介

这是一个交互式的AI Agent设计工作流展示系统，用于演示宝可梦主题奶茶快闪店的完整设计流程。系统通过可视化的流程图展示从需求输入到最终输出的全过程，包含模型选择、提示词生成、设计执行、质量检测等环节。

## 功能特点

- 🎯 **交互式流程图**：点击节点查看详细设计内容
- 🎨 **四大设计板块**：奶茶杯设计、空间设计、海报设计、周边帽子设计
- 🤖 **AI质检环节**：每个设计都经过AI质量检测
- 📋 **完整文档输出**：自动生成设计策划方案文档
- 🖼️ **图片预览**：支持设计效果图的大图查看

## 快速开始

### 克隆仓库

```bash
git clone http://123.60.55.248:3000/Duguay/agent.git .
# 或者
git clone http://123.60.55.248:3000/Duguay/agent.git ai-workflow
cd ai-workflow
```

### 安装依赖

```bash
npm install
```

### 启动项目

```bash
npm run dev
```

项目将在 `http://127.0.0.1:5175/` 启动，并自动打开浏览器展示页面

## 部署方式

### 方式一：使用 npm 脚本（推荐）

1. 确保已安装 Node.js（版本 >= 14.0.0）
2. 运行以下命令：

```bash
# 安装依赖
npm install

# 启动开发服务器（自动打开浏览器）
npm run dev

# 或者只启动服务器（不自动打开浏览器）
npm run serve
```

### 方式二：使用 Python 简单服务器

如果您的系统已安装 Python，可以使用以下命令：

```bash
# Python 3
python3 -m http.server 5175 --bind 127.0.0.1

# Python 2
python -m SimpleHTTPServer 5175
```

然后在浏览器中访问：`http://127.0.0.1:5175/`

### 方式三：直接打开 HTML 文件

由于项目使用了本地资源文件，建议使用本地服务器运行。但如果只需要查看基本功能，也可以：

1. 直接在浏览器中打开 `index.html` 文件
2. 注意：部分图片资源可能无法正常加载

## 项目结构

```
agent/
├── index.html             # 主页面文件
├── package.json          # 项目配置文件
├── README.md            # 说明文档
├── .gitignore          # Git忽略文件
└── public/             # 公共资源目录
    ├── images/          # 图片资源
    │   ├── 1.杯子设计/
    │   ├── 2.空间设计/
    │   ├── 3.海报设计/
    │   ├── 4.帽子设计/
    │   └── 5.ai质检后的图片/
    └── 输出/            # 输出文件
        └── *.md        # 设计文档

```

## 技术栈

- **React 18**：使用 CDN 版本，无需构建工具
- **Babel Standalone**：实时编译 JSX
- **原生 CSS3**：动画和样式
- **HTML5**：页面结构

## 使用说明

1. **总览模式**：默认展示完整的工作流程图
2. **详细模式**：点击任意节点进入详细视图
3. **查看设计图**：在设计节点中点击图片可放大查看
4. **导航切换**：使用顶部切换按钮在总览和详细视图间切换

## 系统要求

- 现代浏览器（Chrome、Firefox、Safari、Edge）
- Node.js >= 14.0.0（如使用 npm 方式）
- 屏幕分辨率建议 1366x768 或更高

## 常见问题

**Q: 为什么图片无法加载？**
A: 请确保使用本地服务器运行项目，而不是直接打开 HTML 文件。

**Q: 如何修改运行端口？**
A: 编辑 `package.json` 中的 scripts 部分，修改 `-p 5175` 为您需要的端口。

**Q: 支持哪些浏览器？**
A: 支持所有现代浏览器，建议使用 Chrome 或 Firefox 的最新版本。

## 开发者信息

- **作者**：Duguay
- **版本**：1.0.0
- **许可**：MIT

## 更新日志

### v1.0.0 (2024-08-24)
- 初始版本发布
- 实现完整的工作流展示
- 支持宝可梦主题设计内容
- 添加交互式节点导航
- 集成图片预览功能

## 部署注意事项

### 克隆方式说明

由于项目文件直接在仓库根目录，建议使用以下方式克隆：

```bash
# 推荐：克隆到指定文件夹
git clone http://123.60.55.248:3000/Duguay/agent.git my-workflow
cd my-workflow

# 或克隆到当前空目录
mkdir my-workflow && cd my-workflow
git clone http://123.60.55.248:3000/Duguay/agent.git .
```

避免直接使用 `git clone url` 以防止路径混乱。

## 联系方式

如有问题或建议，请提交 Issue 到：
http://123.60.55.248:3000/Duguay/agent/issues

---

© 2024 Duguay. All rights reserved.