🎮 AI驱动的游戏资产生成工作流编辑器
FrameForgeX 是一个专为游戏开发者、美术设计师和AI内容创作者打造的可视化节点编辑器，帮助您轻松构建AI生成游戏资产的工作流程。
- 🎯 可视化节点编辑器 - 直观的拖拽式界面，轻松构建复杂工作流
- 🧠 AI集成 - 内置AI图像生成功能，支持文本到图像转换
- 💾 数据持久化 - 自动保存和恢复画布状态，包括节点、连接和视图位置
- 🔌 扩展性强 - 支持自定义节点类型，易于扩展新功能
- 🖼️ 图片处理 - 内置图片显示和下载功能
- 💻 跨平台 - 基于Tauri构建，支持Windows、macOS和Linux
- 🎨 现代UI - 使用Material-UI设计，提供优雅的用户体验
- Node.js 18+ (支持React 19)
- Rust 1.68+
- Tauri CLI 2.x
-
克隆项目
git clone https://github.com/your-username/FrameForgeX.git cd FrameForgeX -
安装依赖
npm install
-
安装Tauri CLI
npm install -g @tauri-apps/cli
-
启动开发服务器
npm run tauri dev
# 启动前端开发服务器
npm run dev
# 启动Tauri开发环境
npm run tauri dev# 构建前端
npm run build
# 构建桌面应用
npm run tauri build- 节点 - 工作流的基本单元，每个节点执行特定功能
- 连接线 - 连接节点之间的数据流
- 画布 - 可视化编辑区域
- 项目 - 包含完整工作流的容器
- 文本输入节点 - 输入文本内容
- 提示词节点 - 生成和处理AI提示词
- 文生图节点 - 将文本转换为图像
- 图片显示节点 - 显示和下载图片
- 输出节点 - 显示最终结果
- 创建节点 - 从右侧节点库拖拽或点击添加
- 连接节点 - 拖拽输出端口到输入端口
- 配置节点 - 点击节点进行参数配置
- 运行工作流 - 点击「运行」按钮执行整个流程
- 保存项目 - 自动保存或手动保存画布状态
使用文生图功能需要配置API密钥：
- 在文生图节点中输入您的API Key
- 选择合适的图像参数（尺寸、指导权重等）
- 连接文本输入作为提示词
- 运行工作流生成图像
前端
- React 19.1.0
- ReactFlow 11.11.4 - 节点编辑器核心
- Material-UI 7.3.1 - UI组件库
- React Router - 路由管理
后端
- Rust - 核心逻辑
- Tauri 2.x - 跨平台框架
- reqwest - HTTP客户端
- serde - 序列化/反序列化
构建工具
- Vite 7.0.4 - 前端构建
- Tauri CLI - 应用打包
FrameForgeX/
├── src/ # 前端源码
│ ├── components/ # React组件
│ │ ├── Canvas.jsx # 主画布组件
│ │ └── ProjectManagement.jsx
│ ├── nodes/ # 节点实现
│ │ ├── NodeBase.jsx # 节点基类
│ │ ├── TextNode.jsx # 文本节点
│ │ ├── PromptNode.jsx # 提示词节点
│ │ ├── TextToImageNode.jsx # 文生图节点
│ │ ├── ImageDisplayNode.jsx # 图片显示节点
│ │ ├── OutputNode.jsx # 输出节点
│ │ └── nodeRegistry.js # 节点注册
│ ├── services/ # 业务服务
│ │ └── projectService.js
│ ├── App.jsx # 应用入口
│ └── main.jsx # 主文件
├── src-tauri/ # Tauri后端
│ ├── src/
│ │ ├── lib.rs # 核心逻辑
│ │ └── main.rs # 入口文件
│ ├── Cargo.toml # Rust依赖
│ └── tauri.conf.json # Tauri配置
├── package.json # Node.js依赖
└── vite.config.js # Vite配置
- 创建节点类 - 继承
NodeBase类 - 实现必要方法 -
getType(),getLabel(),getHandles(),execute() - 注册节点 - 在
nodeRegistry.js中注册 - 测试功能 - 在画布中测试新节点
- 使用 ESLint 和 Prettier 进行代码格式化
- 遵循 React Hooks 最佳实践
- 使用 TypeScript 类型注释（推荐）
- 编写单元测试覆盖核心功能
Q: 应用启动失败 A: 检查Node.js和Rust版本是否符合要求，确保已安装Tauri CLI
Q: AI功能无法使用 A: 检查API Key配置是否正确，确保网络连接正常
Q: 图片下载失败 A: 检查图片URL是否有效，确保有足够的磁盘空间
Q: 节点连接异常 A: 检查节点类型是否兼容，确保输入输出端口匹配
我们欢迎社区贡献！请遵循以下步骤：
- Fork 项目
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
- 🐛 Bug修复
- ✨ 新功能
- 📚 文档改进
- 🎨 UI/UX优化
- ⚡ 性能优化
- 🧪 测试覆盖
本项目采用 Apache 许可证 - 查看 LICENSE 文件了解详情。
- React - 用户界面库
- ReactFlow - 节点编辑器核心
- Tauri - 跨平台应用框架
- Material-UI - React UI组件库
- Rust - 系统编程语言
- 项目主页: GitHub Repository
- 问题反馈: Issues
- 功能请求: Feature Requests
如果这个项目对你有帮助，请给我们一个 ⭐