这是一个基于React和ReactFlow的无限画布内容创作工具，支持图像和视频生成。

Echo_Creator_Fixed/
├── frontend/              # React前端项目
│   ├── src/
│   │   ├── components/
│   │   │   ├── nodes/
│   │   │   │   └── UnifiedStudioNode.tsx  # 重写的视频/图像生成节点
│   │   │   ├── WorkflowCanvas.tsx
│   │   │   ├── WorkflowNode.tsx
│   │   │   └── ...
│   │   ├── utils/
│   │   │   └── websocket.ts  # WebSocket实时更新客户端
│   │   └── ...
│   ├── package.json
│   └── vite.config.ts
├── backend/               # Python后端API服务
│   ├── main.py           # FastAPI应用
│   ├── node_executors.py # 节点执行器
│   └── ...
├── FIXES_SUMMARY.md      # 修复总结文档
├── VERIFICATION_GUIDE.md # 验证指南
└── README.md            # 本文件

cd frontend
npm install

cd backend
python3 -m venv venv
source venv/bin/activate  # Linux/Mac
# 或
venv\Scripts\activate     # Windows

pip install fastapi uvicorn pydantic python-multipart bcrypt python-jose cryptography

cd backend
source venv/bin/activate
python3 -m main

后端将运行在 http://localhost:8000

cd frontend
npm run dev

前端将运行在 http://localhost:3000

访问 http://localhost:3000

• Sora 2 - 高质量视频生成
• VEO 3.1 - 多平台视频生成
• Kling 1.6 - 快速视频生成
• Hailuo - 中文视频生成
• Seedance 1.5 Pro - 专业视频生成

• Nano Banana Pro - 高质量图像生成
• Nano Banana - 快速图像生成

• ✅ 无限画布工作流编辑
• ✅ 拖拽创建节点
• ✅ 节点连接
• ✅ 实时进度显示
• ✅ WebSocket实时更新
• ✅ 视频预览
• ✅ 参数配置

在应用中点击TopBar的"API Keys"按钮，配置以下密钥：

• t8_api_key - T8平台API密钥
• grsai_api_key - GRSAI平台API密钥
• yijia_api_key - 一家平台API密钥
• wuyin_api_key - 五音平台API密钥

编辑 backend/main.py 中的配置：

API_BASE = "http://localhost:8000"

原问题：点击节点时出现黑屏 解决方案：使用模态对话框设计，完全隔离于ReactFlow画布

1. 模态对话框 - 独立的DOM层，避免事件冒泡
2. WebSocket实时更新 - 实时显示生成进度
3. 完整的参数配置 - 支持所有模型参数
4. 视频预览 - 生成完成后立即显示

详见 FIXES_SUMMARY.md

1. 创建一个视频生成节点
2. 点击节点打开配置对话框
3. 输入提示词
4. 点击Generate提交任务
5. 观察进度条更新
6. 完成后查看视频预览

• 切换不同的视频模型
• 调整参数（时长、质量等）
• 连接多个节点创建工作流
• 测试WebSocket实时更新

• FIXES_SUMMARY.md - 详细的修复总结
• VERIFICATION_GUIDE.md - 验证指南
• backend/main.py - API文档（FastAPI自动生成）

A: 请确保已刷新浏览器（Ctrl+F5）加载最新代码

A: 检查后端是否正在运行，查看 http://localhost:8000/docs

A: 检查API密钥是否正确配置

A: 系统会自动降级到轮询模式，检查浏览器控制台错误

• 所有API调用都支持认证令牌
• API密钥存储在后端，不会暴露给前端
• WebSocket连接使用安全的wss协议

cd frontend
npm run build

输出将在 dist/ 目录中，可以部署到任何静态Web服务器。

欢迎提交问题和改进建议！

MIT License

---

最后更新: 2026年1月8日 版本: 1.0 状态: ✅ 生产就绪