e8fd104bf7
- 修正 package.json 中的服务器启动路径 - 更新快速启动脚本的访问地址提示 - 更新文档中的访问URL为完整路径 - 确保服务器从项目根目录启动而非public目录
152 lines
4.0 KiB
Markdown
152 lines
4.0 KiB
Markdown
# AI Agent 设计工作流 - 宝可梦主题奶茶快闪店
|
||
|
||
## 项目简介
|
||
|
||
这是一个交互式的AI Agent设计工作流展示系统，用于演示宝可梦主题奶茶快闪店的完整设计流程。系统通过可视化的流程图展示从需求输入到最终输出的全过程，包含模型选择、提示词生成、设计执行、质量检测等环节。
|
||
|
||
## 功能特点
|
||
|
||
- 🎯 **交互式流程图**：点击节点查看详细设计内容
|
||
- 🎨 **四大设计板块**：奶茶杯设计、空间设计、海报设计、周边帽子设计
|
||
- 🤖 **AI质检环节**：每个设计都经过AI质量检测
|
||
- 📋 **完整文档输出**：自动生成设计策划方案文档
|
||
- 🖼️ **图片预览**：支持设计效果图的大图查看
|
||
|
||
## 快速开始
|
||
|
||
### 克隆仓库
|
||
|
||
```bash
|
||
git clone http://123.60.55.248:3000/Duguay/agent.git
|
||
cd agent
|
||
```
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动项目
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
项目将在 `http://127.0.0.1:5175` 启动，并自动打开浏览器展示 `linear-workflow.html` 页面。
|
||
|
||
如果浏览器没有自动打开，请手动访问：`http://127.0.0.1:5175/linear-workflow.html`
|
||
|
||
## 部署方式
|
||
|
||
### 方式一：使用 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/linear-workflow.html`
|
||
|
||
### 方式三：直接打开 HTML 文件
|
||
|
||
由于项目使用了本地资源文件，建议使用本地服务器运行。但如果只需要查看基本功能，也可以：
|
||
|
||
1. 直接在浏览器中打开 `linear-workflow.html` 文件
|
||
2. 注意：部分图片资源可能无法正常加载
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
agent/
|
||
├── linear-workflow.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)
|
||
- 初始版本发布
|
||
- 实现完整的工作流展示
|
||
- 支持宝可梦主题设计内容
|
||
- 添加交互式节点导航
|
||
- 集成图片预览功能
|
||
|
||
## 联系方式
|
||
|
||
如有问题或建议，请提交 Issue 到：
|
||
http://123.60.55.248:3000/Duguay/agent/issues
|
||
|
||
---
|
||
|
||
© 2024 Duguay. All rights reserved. |