Skip to content

Commit 26b048c

Browse files
MiaoMintMiaoMint
committed
feat: add English README and workflow screenshot
1 parent fe84f43 commit 26b048c

File tree

3 files changed

+315
-108
lines changed

3 files changed

+315
-108
lines changed

‎README.md‎

Lines changed: 120 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -2,182 +2,194 @@
22

33
<div align="center">
44
<img src="build/appicon.png" alt="VisioFlow Logo" width="128" height="128">
5-
<p><strong>基于节点的可视化 AI 内容生成工作流编辑器</strong></p>
5+
<p><strong>Node-based Visual AI Content Generation Workflow Editor</strong></p>
66
</div>
77

8-
## ✨ 功能特性
8+
<div align="center">
9+
<a href="README.zh-CN.md">简体中文</a> | English
10+
</div>
11+
12+
## ✨ Features
13+
14+
- **Visual Workflow Editor**: Drag-and-drop node editing interface powered by ReactFlow
15+
- **Multimodal AI Support**: Generate text, images, videos, and audio content
16+
- **Multiple AI Providers**: Integrated with OpenAI, Claude, and Gemini
17+
- **Local Asset Management**: Built-in asset library with local file storage
18+
- **Project Management**: Save, load, and manage multiple workflow projects
19+
- **Cross-Platform**: Native desktop app for macOS, Windows, and Linux
920

10-
- **可视化工作流编辑器**：基于 ReactFlow 的拖拽式节点编辑界面
11-
- **多模态 AI 支持**：生成文本、图像、视频和音频内容
12-
- **多 AI 提供商**：集成 OpenAI、Claude 和 Gemini
13-
- **本地资源管理**：内置资源库，本地文件存储
14-
- **项目管理**：保存、加载和管理多个工作流项目
15-
- **跨平台**：支持 macOS、Windows 和 Linux 的原生桌面应用
21+
## 📸 Screenshots
22+
23+
<div align="center">
24+
<img src="screenshot/workflow.png" alt="Workflow Editor" width="90%">
25+
<p><em>Visual Node-based Workflow Editor</em></p>
26+
</div>
1627

17-
## 📸 截图
1828

1929
<div align="center">
20-
<img src="screenshot/light_projects.png" alt="亮色主题" width="45%">
21-
<img src="screenshot/dark_projects.png" alt="暗色主题" width="45%">
30+
<img src="screenshot/light_projects.png" alt="Light Theme" width="45%">
31+
<img src="screenshot/dark_projects.png" alt="Dark Theme" width="45%">
32+
<p><em>Light and Dark Theme Support</em></p>
2233
</div>
2334

24-
## 🛠️ 技术栈
2535

26-
**后端：**
36+
## 🛠️ Tech Stack
37+
38+
**Backend:**
2739
- Go 1.24
28-
- Wails v2（桌面应用框架）
29-
- SQLite（sqlx + go-sqlite3）
30-
- AI SDK：anthropic-sdk-go、go-openai、google genai
40+
- Wails v2 (Desktop App Framework)
41+
- SQLite (sqlx + go-sqlite3)
42+
- AI SDKs: anthropic-sdk-go, go-openai, google genai
3143

32-
**前端：**
44+
**Frontend:**
3345
- React 19 + TypeScript
34-
- Vite 7（构建工具）
35-
- ReactFlow（@xyflow/react）- 可视化画布
36-
- Tailwind CSS 4 - 样式
37-
- shadcn/ui - UI 组件库
46+
- Vite 7 (Build Tool)
47+
- ReactFlow (@xyflow/react) - Visual Canvas
48+
- Tailwind CSS 4 - Styling
49+
- shadcn/ui - UI Component Library
3850

39-
## 🚀 快速开始
51+
## 🚀 Quick Start
4052

41-
### 环境要求
53+
### Requirements
4254

4355
- Go 1.24+
44-
- Node.js 18+ 和 pnpm
45-
- Wails CLI：`go install github.com/wailsapp/wails/v2/cmd/wails@latest`
56+
- Node.js 18+ and pnpm
57+
- Wails CLI: `go install github.com/wailsapp/wails/v2/cmd/wails@latest`
4658

47-
### 安装
59+
### Installation
4860

4961
```bash
50-
# 克隆仓库
62+
# Clone the repository
5163
git clone https://github.com/yourusername/visionflow.git
5264
cd visionflow
5365

54-
# 安装前端依赖
66+
# Install frontend dependencies
5567
cd frontend
5668
pnpm install
5769
cd ..
5870
```
5971

60-
### 开发
72+
### Development
6173

62-
运行热重载的开发模式：
74+
Run development mode with hot-reload:
6375

6476
```bash
6577
wails dev
6678
```
6779

68-
应用将启动并包含：
69-
- 带有 React 应用的主窗口
70-
- 开发服务器 http://localhost:34115（用于浏览器测试 Go 方法）
71-
- 本地文件服务器 http://localhost:34116（用于生成的资源）
80+
The application will start with:
81+
- Main window with React app
82+
- Development server at http://localhost:34115 (for testing Go methods in browser)
83+
- Local file server at http://localhost:34116 (for generated assets)
7284

73-
### 构建
85+
### Build
7486

75-
构建生产就绪的安装包：
87+
Build production-ready installer:
7688

7789
```bash
7890
wails build
7991
```
8092

81-
可执行文件将生成在 `build/bin/` 目录。
93+
Executable will be generated in `build/bin/` directory.
8294

83-
## 📖 使用说明
95+
## 📖 Usage Guide
8496

85-
### 创建工作流
97+
### Creating a Workflow
8698

87-
1. 从侧边栏创建新项目
88-
2. 向画布添加节点（文本、图像、视频、音频）
89-
3. 通过拖拽输出到输入句柄来连接节点
90-
4. 为每个节点配置 AI 提供商和模型
91-
5. 点击"运行"执行节点并生成内容
92-
6. 在资源库中查看生成的资源
99+
1. Create a new project from the sidebar
100+
2. Add nodes to the canvas (Text, Image, Video, Audio)
101+
3. Connect nodes by dragging from output to input handles
102+
4. Configure AI provider and model for each node
103+
5. Click "Run" to execute nodes and generate content
104+
6. View generated assets in the asset library
93105

94-
### 节点类型
106+
### Node Types
95107

96-
- **文本节点**：使用 LLM 生成文本内容
97-
- **图像节点**：从文本描述生成图像
98-
- **视频节点**：从提示创建视频
99-
- **音频节点**：生成音频/语音内容
100-
- **分组节点**：组织和分组多个节点
108+
- **Text Node**: Generate text content using LLMs
109+
- **Image Node**: Generate images from text descriptions
110+
- **Video Node**: Create videos from prompts
111+
- **Audio Node**: Generate audio/speech content
112+
- **Group Node**: Organize and group multiple nodes
101113

102-
### 连接节点
114+
### Connecting Nodes
103115

104-
节点可以将内容传递给下游节点：
105-
- 将一个节点的输出句柄连接到另一个节点的输入句柄
106-
- 源节点的输出成为目标节点的输入上下文
107-
- 支持多种输入（文本、图像、视频、音频）
116+
Nodes can pass content to downstream nodes:
117+
- Connect output handle of one node to input handle of another
118+
- Source node's output becomes target node's input context
119+
- Supports multiple input types (text, image, video, audio)
108120

109-
## 🔧 配置
121+
## 🔧 Configuration
110122

111-
### AI 提供商设置
123+
### AI Provider Settings
112124

113-
1. 打开设置（齿轮图标）
114-
2. 导航到"模型提供商"
115-
3. 添加您的 API 密钥：
116-
- OpenAI（文本、图像生成）
117-
- Claude（文本生成）
118-
- Gemini（文本生成）
125+
1. Open Settings (gear icon)
126+
2. Navigate to "Model Providers"
127+
3. Add your API keys:
128+
- OpenAI (text, image generation)
129+
- Claude (text generation)
130+
- Gemini (text generation)
119131

120-
### 存储位置
132+
### Storage Locations
121133

122-
- **数据库**：`~/Library/Application Support/visionflow/visionflow.db`
123-
- **生成的资源**：`~/Library/Application Support/visionflow/generated/`
124-
- **模型能力**：`~/Library/Application Support/visionflow/model_data.json`
134+
- **Database**: `~/Library/Application Support/visionflow/visionflow.db`
135+
- **Generated Assets**: `~/Library/Application Support/visionflow/generated/`
136+
- **Model Capabilities**: `~/Library/Application Support/visionflow/model_data.json`
125137

126-
## 💻 开发指南
138+
## 💻 Development Guide
127139

128-
### 项目结构
140+
### Project Structure
129141

130142
```
131143
visionflow/
132-
├── main.go # 应用入口
133-
├── binding/ # Wails 绑定（暴露给前端）
134-
│ ├── ai/ # AI 服务绑定
135-
│ └── database/ # 数据库服务绑定
136-
├── service/ # 核心业务逻辑
137-
│ ├── ai/ # AI 提供商实现
138-
│ └── storage/ # 文件存储工具
139-
├── database/ # 数据持久化层
140-
│ ├── models.go # 数据模型
141-
│ └── repository.go # 数据库操作
142-
└── frontend/ # React 应用
144+
├── main.go # Application entry point
145+
├── binding/ # Wails bindings (exposed to frontend)
146+
│ ├── ai/ # AI service bindings
147+
│ └── database/ # Database service bindings
148+
├── service/ # Core business logic
149+
│ ├── ai/ # AI provider implementations
150+
│ └── storage/ # File storage utilities
151+
├── database/ # Data persistence layer
152+
│ ├── models.go # Data models
153+
│ └── repository.go # Database operations
154+
└── frontend/ # React application
143155
├── src/
144-
│ ├── components/ # UI 组件
145-
│ │ ├── nodes/ # 节点实现
146-
│ │ ├── settings/ # 设置对话框
147-
│ │ └── ui/ # shadcn/ui 组件
148-
│ └── hooks/ # 自定义 React Hooks
149-
└── wailsjs/ # 自动生成的 Wails 绑定
156+
│ ├── components/ # UI components
157+
│ │ ├── nodes/ # Node implementations
158+
│ │ ├── settings/ # Settings dialogs
159+
│ │ └── ui/ # shadcn/ui components
160+
│ └── hooks/ # Custom React Hooks
161+
└── wailsjs/ # Auto-generated Wails bindings
150162
```
151163

152-
### 添加新的 AI 提供商
164+
### Adding a New AI Provider
153165

154-
1. 在 `service/ai/{provider}.go` 中实现 `AIClient` 接口
155-
2. 在 `NewClient()` 工厂函数中添加提供商分支（`service/ai/utils.go`）
156-
3. 在 `database/models.go` 中添加提供商常量
157-
4. 更新 `model_data.json` 添加提供商的模型
158-
5. 通过 `binding/ai/service.go` 暴露方法
166+
1. Implement `AIClient` interface in `service/ai/{provider}.go`
167+
2. Add provider case in `NewClient()` factory function (`service/ai/utils.go`)
168+
3. Add provider constant in `database/models.go`
169+
4. Update `model_data.json` with provider's models
170+
5. Expose methods through `binding/ai/service.go`
159171

160-
### 关键开发模式
172+
### Key Development Patterns
161173

162-
- **服务层优先**：先在 `service/` 中实现逻辑，再通过 `binding/` 暴露
163-
- **Wails 绑定**：永远不要手动编辑 `frontend/wailsjs/go/` - 它们是自动生成的
164-
- **节点执行**：使用 `useNodeRun` Hook，通过 `runTrigger` UUID 管理状态
165-
- **资源访问**：前端使用 `http://localhost:34116/{filename}` 访问生成的文件
174+
- **Service Layer First**: Implement logic in `service/` first, then expose through `binding/`
175+
- **Wails Bindings**: Never manually edit `frontend/wailsjs/go/` - they are auto-generated
176+
- **Node Execution**: Use `useNodeRun` Hook with `runTrigger` UUID to manage state
177+
- **Asset Access**: Frontend accesses generated files via `http://localhost:34116/{filename}`
166178

167-
## 🤝 贡献
179+
## 🤝 Contributing
168180

169-
欢迎贡献！请随时提交 Pull Request。
181+
Contributions are welcome! Feel free to submit a Pull Request.
170182

171-
## 📄 许可证
183+
## 📄 License
172184

173-
本项目采用 Creative Commons Attribution 4.0 International License 许可 - 详见 [LICENSE](LICENSE) 文件。
185+
This project is licensed under the Creative Commons Attribution 4.0 International License - see the [LICENSE](LICENSE) file for details.
174186

175-
## 🙏 致谢
187+
## 🙏 Acknowledgments
176188

177-
- [Wails](https://wails.io/) - 桌面应用框架
178-
- [ReactFlow](https://reactflow.dev/) - 基于节点的可视化编辑器
179-
- [shadcn/ui](https://ui.shadcn.com/) - UI 组件库
189+
- [Wails](https://wails.io/) - Desktop application framework
190+
- [ReactFlow](https://reactflow.dev/) - Node-based visual editor
191+
- [shadcn/ui](https://ui.shadcn.com/) - UI component library
180192

181-
## 📞 支持
193+
## 📞 Support
182194

183-
问题和功能请求请使用 [GitHub Issues](https://github.com/miaomint/vision-flow/issues) 页面。
195+
For issues and feature requests, please use the [GitHub Issues](https://github.com/miaomint/vision-flow/issues) page.

0 commit comments

Comments
 (0)