# ImageWorkflow

**Repository Path**: sunhowe/image-workflow

## Basic Information

- **Project Name**: ImageWorkflow
- **Description**: AI图片生成工作流。工具通过Cursor生成。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-21
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI图片生成工作流

一个采用树状图可视化的AI图片生成工作流Web应用，支持图片生成、编辑和完整的工作流管理。

![License](https://img.shields.io/badge/license-MIT-blue.svg)
![React](https://img.shields.io/badge/React-18.2-blue.svg)
![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue.svg)
![Node.js](https://img.shields.io/badge/Node.js-20+-green.svg)

## ✨ 核心特性

- 🌲 **树状图可视化** - 以流程图形式展示完整的生成历史
- 🎨 **独立图片节点** - 每个生成的图片作为独立节点显示
- 📊 **实时进度显示** - 生成过程中实时显示进度条
- 🖼️ **缩略图预览** - 节点上直接显示缩略图，点击查看大图
- 🔄 **灵活的二次编辑** - 点击+按钮基于任意图片继续生成
- 💾 **本地存储** - 图片自动保存到系统应用数据目录
- ⚙️ **多模型管理** - 支持配置和切换多个AI模型
- 🚀 **智能提示词优化** - AI辅助优化提示词

## 📸 界面预览

### 树状工作流
- 初始显示根节点，展开参数填写面板
- 填写参数后点击生成，隐藏面板
- 在当前节点下方生成多个子节点（每个对应一张图片）
- 子节点显示生成进度和缩略图
- 点击+按钮继续生成，自动使用该图作为参考图

## 🚀 快速开始

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

**Windows:**
```bash
start.bat
```

**Linux/Mac:**
```bash
chmod +x start.sh
./start.sh
```

### 方式二：手动启动

1. **安装依赖**
```bash
npm install
cd client && npm install
cd ../server && npm install
```

2. **启动应用**
```bash
# 返回项目根目录
cd ..
npm run dev
```

3. **访问应用**
- 前端: http://localhost:3000
- 后端: http://localhost:5000

## 📖 使用流程

1. **配置模型**
   - 切换到"模型配置"标签页
   - 添加AI模型（需要API密钥）

2. **开始生成**
   - 在根节点的表单中填写参数
   - 输入提示词
   - （可选）上传参考图
   - 选择模型和参数
   - 点击"生成图片"

3. **查看结果**
   - 自动创建多个子节点
   - 显示生成进度
   - 完成后显示缩略图
   - 点击查看大图

4. **继续编辑**
   - 点击节点下方的"+基于此图继续"
   - 系统自动使用该图作为参考
   - 输入新的提示词
   - 生成新的变体

5. **树状展示**
   - 所有节点自动布局
   - 可缩放和拖动
   - 清晰的生成路径

## 📁 图片存储位置

生成的图片自动保存在：

### Windows
```
C:\Users\<用户名>\AppData\Local\com.howegame.ImageWorkflow\
```

### macOS
```
~/Library/Application Support/com.howegame.ImageWorkflow/
```

### Linux
```
~/.local/share/com.howegame.ImageWorkflow/
```

目录结构：
```
com.howegame.ImageWorkflow/
├── images/         # 原始图片
└── thumbnails/     # 缩略图（200x200）
```

## 🛠️ 技术栈

### 前端
- React 18 + TypeScript
- Vite
- Ant Design
- React Flow (树状图可视化)
- Zustand (状态管理)
- ELK.js (自动布局)

### 后端
- Node.js + Express + TypeScript
- Sharp (图片处理)
- OpenAI API兼容接口

## 📋 系统要求

- Node.js 18+
- npm 或 yarn
- 现代浏览器（Chrome, Firefox, Safari, Edge）
- 足够的磁盘空间（用于存储生成的图片）

## 🔧 配置说明

### 模型配置

在"模型配置"页面添加模型：

- **显示名称**: 模型的显示名称
- **模型名**: API使用的模型标识
- **API地址**: API的基础URL
- **API Key**: 你的API密钥
- **接口类型**: 选择OpenAI
- **支持能力**: 
  - 图片生成：从文本生成新图片
  - 图片编辑：基于现有图片进行修改
  - 文本对话：用于提示词优化

## 📚 文档

- [详细安装和使用指南](SETUP.md)
- [API接口文档](API.md)
- [功能特性详解](FEATURES.md)
- [项目概览](PROJECT_OVERVIEW.md)

## 💡 使用技巧

1. **批量生成**：设置数量2-5张，快速生成多个变体
2. **提示词优化**：使用AI优化功能提高生成质量
3. **树状导航**：使用鼠标滚轮缩放，拖动查看不同分支
4. **重新开始**：点击右上角按钮清空工作流

## ❓ 常见问题

**Q: 如何基于已生成的图片继续编辑？**  
A: 点击已完成节点下方的"+基于此图继续"按钮。

**Q: 图片保存在哪里？**  
A: 保存在系统应用数据目录（见上方"图片存储位置"）。

**Q: 可以同时生成多少张？**  
A: 每次1-10张，取决于模型限制。

**Q: 树状图太大怎么办？**  
A: 使用鼠标滚轮缩放，或使用右下角的控件。

## 🤝 贡献

欢迎提交Issue和Pull Request！

## 📄 许可证

[MIT](LICENSE)

---

**注意**: 使用本应用需要有效的AI模型API密钥。请确保遵守相关服务的使用条款。