Skip to content

yaopengcheng11/NexArtWorkFlow

BranchesTags

Repository files navigation

NexArt Workflow Studio

NexArt Workflow Studio hero

可视化即梦创作流平台：把参考图、提示词、链式迭代、批量生成、MCP 调用放进同一块画布。

Dreamina CLI · React Flow · Chain Run · Image / Video · MCP

发布说明 · 快速开始 · 架构 · API

最新发布：新增 Gemini API 图像/视频生成、Append 视频拼接节点、长镜头续接默认策略、视频时长展示，以及生产部署统一走 dist/server.cjs。详情见 CHANGELOG.md。

 ┌────────┐ ┌──────────┐ ┌────────┐
 │ Input  │→│  Prompt  │→│ Output │   每个 Prompt 节点提交 N 个并行任务
 │ (n1.png)│  │ @n1 改成... │  │ (1张图) │   下游 Prompt 自动等上游 Output 完成
 └────────┘ └──────────┘ └────────┘

✨ 功能

画布编辑

  • 可视化节点:Input(参考图/视频)/ Prompt(提示词+参数)/ Output(生成结果)/ Append(视频拼接)/ Group
  • 拖拽即上传:把图直接拖到画布,自动上传到本地数据目录,InputNode 命名取自文件名(n1.png → n1)
  • @-token 引用:在 prompt 里写 @n1 / @output1 引用上游 Input / Output 的本地文件,自动作为 dreamina 的图片输入
  • 节点独立拖拽:每个节点单独移动,不带子节点跟随
  • L 自动布局:dagre 按真实节点尺寸排版,大节点不重叠
  • 多选交互:Shift + 左键 加选节点,Ctrl/Cmd + 左键 从当前选择中减选节点
  • 输出节点配色:Input 保持绿色,Output 恢复黄色系;图片 Output 与视频 Output 用不同黄系深浅区分
  • 视频时长可见:视频 Output 节点显示时长标签,刷新后仍保留

即梦 CLI 集成

  • 真正的图/视频生成(不是 mock 占位图)
  • 支持的 subcommand:text2image / image2image / text2video / image2video(根据上游图自动选)
  • 图片模型:seedream 5.0(锁定,即梦最新)
  • 视频模型:seedance2.0fast(默认) / seedance2.0 / seedance2.0_vip / seedance2.0fast_vip
  • 比例:8 种(1:1 / 4:3 / 3:2 / 16:9 / 21:9 / 3:4 / 2:3 / 9:16),image2video 会自动从输入图推断
  • 生成数量:默认 1 张(可扩到更多;每个独立提交,自动创建对应数量的 OutputNode)
  • 视频时长:4–15 秒(seedance2.0 系列)
  • 长视频耐心轮询:CLI --poll 不够时后端继续 query_result 兜底,最多再等 30 分钟

Gemini API 集成

  • 图像生成:支持 Nano Banana 2 / Nano Banana Pro / Nano Banana
  • 视频生成:支持 veo3.1(前端产品名),后端自动归一到 veo-3.1-generate-preview
  • 视频比例限制:Gemini 视频只开放 16:9 / 9:16
  • 视频时长:Gemini 视频支持 4s / 6s / 8s; 存在参考图时会自动归一到 8s
  • 参考图视频:视频 API 会把参考图与 durationSeconds 一起传给 Google,不是占位开关

长镜头续接 / 视频拼接

  • 长镜头续接默认策略:视频续接优先使用上游视频尾部 2–3s 短片作为参考,自动压到 640px 上限
  • 默认关闭自动尾帧:即梦多模态视频续接默认 autoTailFrames=off,降低人脸风控触发概率
  • 显式角色图增强:如果需要更稳的人物一致性,优先额外连接角色参考图,而不是自动上传尾帧静态图
  • Append 节点:支持 视频 Output -> Append -> Output 拼接工作流,后端使用 ffmpeg concat

工作流编排

  • ▶ 运行:单节点跑一次
  • 运行已选/全部:批量提交,按依赖图分波(B 的上游 Output 来自 A → B 等 A 完成),互不依赖的节点并行
  • 进度浮窗:顶部居中显示 任务数 / 进行中 / 等待 / 完成 / 失败 实时统计
  • 结果立刻显示:乐观更新 + 后端写回双保险,不再卡进度遮罩

工作流库

  • 持久化:每个工作流存为 <dataDir>/workflows/<workflow-name>.json,服务器重启后自动加载
  • 自动迁移旧文件名:旧的 1.json / <id>.json 会在保存或加载时迁移为当前工作流名称对应的 JSON 文件
  • 左侧侧边栏 - "工作流" tab:列出所有工作流,显示节点计数和 JSON 文件名,点击切换,支持卡片内直接重命名,hover 出现 重命名 / 复制 / 删除
  • 导入 / 导出:Save As 导出 JSON,Open 从 JSON 导入

产物归档

~/Documents/NexArtWorkFlow/outputs/
└── 电影感科幻场景/                    ← workflow 名称
    └── 2026-05-24/                   ← 日期
        └── 18-05-45_a3b7/            ← 批次 (HH-MM-SS_rand)
            ├── prompt1__output1.png   ← <prompt 名>__<output 名>.ext
            ├── prompt1__output1.json  ← 该结果的完整元数据
            ├── prompt1__prompt1_2.png
            ├── prompt1__prompt1_2.json
            ├── prompt2__output2.png   ← 链式 batch 的第二轮
            ├── references/            ← 整 batch 共享的参考图
            │   └── n1.png
            └── batch.json             ← 批次索引

MCP 接口(外部 Agent 调用)

  • 暴露 http://localhost:3000/api/mcp/sse 给 Claude Desktop / 兼容 MCP 客户端
  • 工具:get_workflow / add_flow_node / update_node_data / submit_jimeng_task

🚀 快速开始

前置

工具 用途
Node.js ≥ 18 跑前后端
dreamina CLI 真正的生成入口

安装 dreamina CLI(字节官方,装到 ~/.local/bin/dreamina):

curl -s https://jimeng.jianying.com/cli | bash
dreamina login          # OAuth 设备登录,会给你一个 verification URL
dreamina user_credit    # 验证账号 + 看剩余 credit

安装 + 启动

git clone https://github.com/yaopengcheng11/NexArtWorkFlow.git
cd NexArtWorkFlow
npm install

# 日常使用 / 更快
npm run build
npm start               # 默认 :3000, 生产模式

# 本地开发 / 需要热更新
PORT=3001 npm run dev

浏览器打开 http://localhost:3000(或你设的端口)。

在 WSL 的 /mnt/* 盘上跑 Vite dev 首屏会明显偏慢。想要稳定和速度，优先用 npm run build && npm start。

一次完整生成

  1. 把一张本地图(比如 n1.png)拖进画布 → 自动创建 InputNode,名字 n1
  2. 拉一条线从 n1 到自动出现的 PromptNode
  3. 提示词框里写:将 @n1 改成水彩画风格
  4. 选数量(默认 1 张)→ 画布会自动补对应数量的 OutputNode
  5. 点 PromptNode 右上角 ▶ 运行 → 顶部进度浮窗显示任务进度 → 结果依次出现在 OutputNode 上
  6. 拖一根线从某张 OutputNode → 新的 PromptNode,prompt 里写 @<output 名字> 就能链式生成

视频拼接

  1. 准备两个或更多已生成完成的视频 Output 节点
  2. 新建一个 Append 节点,把这些视频 Output 连到 Append 左侧
  3. 再从 Append 右侧连一个 Output 节点作为结果接收器
  4. 点击 Append 节点右上角 运行 → 后端调用 ffmpeg 拼接 → 结果视频写回下游 Output 节点

工作流模式 + 链式批量

  1. 在画布上搭出 input → prompt1 → output1 → prompt2 → output2 链
  2. 左上角点 运行全部 → 系统先跑 prompt1,等 output1 出图后再跑 prompt2
  3. 顶部进度浮窗实时显示总任务、进行中、等待

⚙️ 配置

数据目录

默认:~/Documents/NexArtWorkFlow/,三个子目录:

目录 内容
inputs/ 拖拽上传的临时参考图/视频
outputs/ 生成结果(按 <workflow>/<日期>/<批次>/ 三层组织)
workflows/ 每个工作流的 JSON 文件,服务器启动时自动加载

修改路径:点右上角齿轮 → 顶部"数据目录"输入框填新路径 → Apply。 也可改 ~/.nexart-workflow/config.json 的 dataDir。

⚠️ 切换数据目录不会自动迁移旧文件,需要手动 mv 过去。

引擎模式

PromptNode 上的"引擎"下拉:

  • 即梦 CLI:走本地 dreamina 命令行,需 OAuth 登录,支持图片和视频
  • Gemini API:支持图片和视频生成,在右上角齿轮里保存 Gemini API Key 后即可使用

Gemini API 当前内置图片模型别名:

  • Nano Banana 2 → gemini-3.1-flash-image-preview
  • Nano Banana Pro → gemini-3-pro-image-preview
  • Nano Banana → gemini-2.5-flash-image

Gemini API 当前视频模型:

  • veo3.1 → 后端归一为 veo-3.1-generate-preview

Gemini 视频约束:

  • 比例仅支持 16:9 / 9:16
  • 时长支持 4s / 6s / 8s
  • 如果当前视频 Prompt 节点带参考图,时长会自动归一到 8s

Gemini API Key 保存在本机:

  • ~/.nexart-workflow/config.json

该文件不在仓库内,不会随项目一起进入 git。

端口

PORT=3002 npm run dev 即可改端口。默认 3000。

🏗️ 架构

┌─────────────────────────────────────────────────────────────┐
│ 浏览器 (React 19 + xyflow + Tailwind v4)                    │
│                                                             │
│ Workspace.tsx                                               │
│  ├─ ReactFlow 画布 (拖拽/连线/批量选择/Append)               │
│  ├─ 节点: InputNode / PromptNode / OutputNode / AppendNode / GroupNode │
│  ├─ 左侧侧边栏: 画布大纲 / 工作流库 / MCP                   │
│  ├─ 顶部进度浮窗 (订阅 task-start/done 事件)                │
│  ├─ 顶左 Run All / Run Selected (依赖图分波调度)            │
│  ├─ Settings (数据目录配置 + Gemini API Key)               │
└────────────────────────┬────────────────────────────────────┘
                         │ /api/run-jimeng, /api/upload,
                         │ /api/workflow, /api/config,
                         │ /api/mcp/sse, /api/mcp-logs
                         ▼
┌─────────────────────────────────────────────────────────────┐
│ Express server (dev: Vite middleware / prod: dist 静态资源)│
│                                                             │
│ ├─ /api/run-jimeng → spawn dreamina <subcommand> --poll N  │
│ │    长任务超时后用 query_result 继续轮询最多 30 分钟        │
│ │    下载远端结果 → outputs/<wf>/<日期>/<批次>/<...>.png     │
│ │    自动写回 outputNode (workflowState + version++)        │
│ │                                                           │
│ ├─ /api/upload → base64 → <dataDir>/inputs/<时间戳>_<名>    │
│ ├─ /api/workflow GET/POST → 内存 + 磁盘 (每个 wf 一个 .json)│
│ ├─ /api/workflows/:id DELETE                                │
│ ├─ /api/config GET/POST → ~/.nexart-workflow/config.json   │
│ ├─ Gemini API → 图像/视频生成 + 结果落盘 + 写回 OutputNode  │
│ ├─ /api/append-video → ffmpeg concat + 写回视频 Output      │
│ ├─ /api/mcp (JSON-RPC) + /api/mcp/sse (SSE) → 外部 Agent   │
│ └─ static /outputs /inputs 经 dataDir wrapper, 支持热切换  │
└────────────────────────┬────────────────────────────────────┘
                         │ spawn child process
                         ▼
            dreamina CLI (~/.local/bin/dreamina)
              ├─ text2image / image2image
              ├─ text2video / image2video
              └─ query_result --submit_id ...

状态同步模型

  • 前端通过 useNodesState / useEdgesState 持有本地 React state
  • 500ms 防抖向后端 POST /api/workflow 推送(version++)
  • 后端 in-memory workflowState 同时被 dreamina 完成回调写入(updateActiveTemplateNode → version++)
  • 前端每 1.5s 轮询 GET /api/workflow?version=N,服务端版本更高时拉新覆盖 setNodes / setEdges
  • isPollingPaused 在每次推送后短暂(1.2s)关掉轮询,避免推-拉冲突
  • 关键 hook:task-start / task-done / batch-start window 事件驱动进度浮窗;prompt-run / prompt-done 给批量调度器同步信号

🧱 主要文件

文件 作用
server.ts Express、runJimengCLI、Gemini、Append、MCP、工作流持久化、配置
src/views/Workspace.tsx 画布、批量调度、进度浮窗、侧边栏、设置面板
src/nodes/InputNode.tsx 参考图节点 + 上传状态
src/nodes/PromptNode.tsx 提示词节点 + 运行按钮 + 自动补 Output
src/nodes/OutputNode.tsx 结果节点 + 打开文件夹 + 视频时长显示
src/nodes/AppendNode.tsx 视频拼接节点
src/nodes/GroupNode.tsx 节点分组容器
src/i18n.tsx 中/英文

🔌 API 速查

Method Endpoint 说明
POST /api/run-jimeng 提交一次生成,body: prompt / generationType / aspectRatio / model / numImages / outputNodeId / mode / images / batchId / promptName / outputName / duration
POST /api/append-video 拼接多个视频输入,写回一个视频 Output
POST /api/upload base64 上传图片,返回 {absPath, url}
GET POST /api/workflow 工作流状态同步
DELETE /api/workflows/:id 删除一个工作流
GET POST /api/config 数据目录配置
POST /api/open-folder 在系统文件管理器里打开路径
GET /api/mcp-logs 实时日志流
POST /api/mcp + GET /api/mcp/sse MCP JSON-RPC + SSE

🤖 接 Claude Desktop / MCP 客户端

把这段贴进客户端的 MCP 配置:

{
  "transport": {
    "type": "sse",
    "url": "http://localhost:3000/api/mcp/sse"
  }
}

可用工具:

  • get_workflow — 拿当前画布
  • add_flow_node — 加节点
  • update_node_data — 改节点 data
  • submit_jimeng_task — 让 agent 替你跑生成

🛠️ 技术栈

  • 前端:React 19、TypeScript、Vite 6、Tailwind CSS v4、@xyflow/react 12、dagre、lucide-react、motion
  • 后端:Express 4、tsx、child_process 跑 dreamina
  • 生成:即梦官方 CLI(seedream 图片 / seedance 视频)
  • 持久化:磁盘 JSON(每工作流一文件)

📝 已知限制

  • 高分辨率长视频与多并发任务仍然比较吃 credit,注意账户余额
  • Dreamina 长镜头续接遇到明显人脸时,即使使用尾部短视频策略,仍可能触发平台风控
  • Append 节点当前只支持视频 Output 作为输入,不支持图片或混合媒体
  • 没有撤销批量删除节点(目前依赖 React Flow 内置 Cmd+Z)
  • 切换数据目录后旧文件不会自动迁移

📄 License

MIT(如需正式发布请加 LICENSE 文件)

About

Visual Dreamina workflow editor for chained image/video generation, batch runs, and MCP automation.

Topics

typescript mcp image-generation workflow-editor video-generation react-flow visual-workflow dreamina

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages

Generated from google-gemini/aistudio-repository-template