FLUX-fill 独立版
高级
这是一个Design, AI领域的自动化工作流，包含 18 个节点。主要使用 If, Set, Html, Wait, Merge 等节点，结合人工智能技术实现智能自动化。 🎨 使用 FLUX.1 填充工具的交互式图像编辑器，用于图像修复
前置要求
- •HTTP Webhook 端点（n8n 会自动生成）
- •可能需要目标 API 的认证凭证
工作流预览
可视化展示节点连接关系，支持缩放和平移
导出工作流
复制以下 JSON 配置到 n8n 导入，即可使用此工作流
{
"id": "OvuZIXwt9mdU2JGK",
"meta": {
"instanceId": "fb924c73af8f703905bc09c9ee8076f48c17b596ed05b18c0ff86915ef8a7c4a",
"templateCredsSetupCompleted": true
},
"name": "FLUX-fill 独立版",
"tags": [],
"nodes": [
{
"id": "9f051c89-0243-48fb-baa4-666af3fe54b3",
"name": "合并",
"type": "n8n-nodes-base.merge",
"position": [
940,
120
],
"parameters": {
"mode": "combine",
"options": {},
"combineBy": "combineByPosition"
},
"typeVersion": 3
},
{
"id": "5da963f7-4320-4359-aefa-bf8f6d6ef815",
"name": "响应 Webhook",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
1520,
120
],
"parameters": {
"options": {},
"respondWith": "text",
"responseBody": "={{ $json.html }}"
},
"typeVersion": 1.1
},
{
"id": "05d877bc-b591-478c-b112-32b7efe1ca3f",
"name": "等待 3 秒",
"type": "n8n-nodes-base.wait",
"position": [
920,
680
],
"webhookId": "90f31c1f-6707-4f2f-b525-d3961432cd81",
"parameters": {
"amount": 3
},
"typeVersion": 1.1
},
{
"id": "a3cc4a50-4218-4a01-ab20-151fd707dd66",
"name": "是否就绪？",
"type": "n8n-nodes-base.if",
"position": [
1340,
680
],
"parameters": {
"options": {},
"conditions": {
"options": {
"version": 2,
"leftValue": "",
"caseSensitive": true,
"typeValidation": "strict"
},
"combinator": "and",
"conditions": [
{
"id": "3cf5b451-9ff5-4c2a-864f-9aa7d286871a",
"operator": {
"name": "filter.operator.equals",
"type": "string",
"operation": "equals"
},
"leftValue": "={{ $json.status }}",
"rightValue": "Ready"
}
]
}
},
"typeVersion": 2.2
},
{
"id": "76a2dcd4-0e57-461d-a8b9-8f52baa3f86a",
"name": "便签",
"type": "n8n-nodes-base.stickyNote",
"position": [
520,
-100
],
"parameters": {
"width": 1193,
"height": 479,
"content": "# 提供带有图片链接的编辑器"
},
"typeVersion": 1
},
{
"id": "b32e8e0b-a449-47d9-8de4-c0062235ff99",
"name": "FLUX 填充",
"type": "n8n-nodes-base.httpRequest",
"position": [
660,
680
],
"parameters": {
"url": "https://api.bfl.ml/v1/flux-pro-1.0-fill",
"method": "POST",
"options": {},
"sendBody": true,
"authentication": "genericCredentialType",
"bodyParameters": {
"parameters": [
{
"name": "prompt",
"value": "={{ $json.body.prompt }}"
},
{
"name": "steps",
"value": "={{ $json.body.steps }}"
},
{
"name": "prompt_upsampling",
"value": "={{ $json.body.prompt_upsampling }}"
},
{
"name": "guidance",
"value": "={{ $json.body.guidance }}"
},
{
"name": "output_format",
"value": "png"
},
{
"name": "safety_tolerance",
"value": "6"
},
{
"name": "image",
"value": "={{ $json.body.image.split(',')[1] }}"
},
{
"name": "mask",
"value": "={{ $json.body.mask.split(',')[1] }}"
}
]
},
"genericAuthType": "httpHeaderAuth"
},
"credentials": {
"httpHeaderAuth": {
"id": "4eQN9wBw8SniKcPw",
"name": "bfl-FLUX"
}
},
"typeVersion": 4.2
},
{
"id": "d7d70191-5316-4f20-b570-b8f138b77762",
"name": "检查 FLUX 状态",
"type": "n8n-nodes-base.httpRequest",
"position": [
1120,
680
],
"parameters": {
"url": "https://api.bfl.ml/v1/get_result",
"options": {},
"sendQuery": true,
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth",
"queryParameters": {
"parameters": [
{
"name": "id",
"value": "={{ $json.id }}"
}
]
}
},
"credentials": {
"httpHeaderAuth": {
"id": "4eQN9wBw8SniKcPw",
"name": "bfl-FLUX"
}
},
"typeVersion": 4.2
},
{
"id": "dafc2712-114f-4723-b587-08ff853513f5",
"name": "获取填充图片",
"type": "n8n-nodes-base.httpRequest",
"position": [
1560,
780
],
"parameters": {
"url": "={{ $json.result.sample }}",
"options": {}
},
"typeVersion": 4.2
},
{
"id": "68672890-62c3-4020-a09c-9ea691cba361",
"name": "向用户显示图片",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
1900,
780
],
"parameters": {
"options": {
"responseHeaders": {
"entries": [
{
"name": "Content-Type",
"value": "={{ $binary.data.mimeType }}"
}
]
}
},
"respondWith": "binary",
"responseDataSource": "set"
},
"typeVersion": 1.1
},
{
"id": "7546ce49-56e9-44fd-96fd-324831f38f32",
"name": "便签1",
"type": "n8n-nodes-base.stickyNote",
"position": [
560,
420
],
"parameters": {
"color": 4,
"width": 1142,
"height": 502,
"content": "# 图片处理部分"
},
"typeVersion": 1
},
{
"id": "cee89c8c-7b88-4cc5-84e4-eb7b404e5042",
"name": "便签2",
"type": "n8n-nodes-base.stickyNote",
"position": [
1720,
660
],
"parameters": {
"width": 506,
"height": 272,
"content": "# 返回编辑后的图片"
},
"typeVersion": 1
},
{
"id": "a340cd78-56dd-4ac8-a1c1-f3fc03771ae6",
"name": "模拟图",
"type": "n8n-nodes-base.set",
"position": [
660,
220
],
"parameters": {
"options": {},
"assignments": {
"assignments": [
{
"id": "20c39c67-3cf8-4e29-b871-3202f2e20a3c",
"name": "Images",
"type": "array",
"value": "={{\n[\n{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/creative-arrangement-minimalist-podium_23-2148959328.jpg\",\n \"title\":\"Stage\" },\n{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/Standing-Big-Paper-Bag-Mockup.jpg\",\n \"title\":\"Paper Bag\" },\n{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/Ceramic-Mug-on-Table-Mockup.jpg\",\n \"title\":\"Big Mug\" },\n{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/Transparent-Bottle-on-Sunny-Beach-Mockup-D.jpg\",\n \"title\":\"Transparent-Bottle\" },\n{\"url\":\"https://byuroscope.fra1.digitaloceanspaces.com/nc/uploads/noco/fluxtest/skin-products-arrangement-wooden-blocks_23-2148761445.jpg\",\n \"title\":\"Cosmetics\" }\n]\n}}"
}
]
}
},
"typeVersion": 3.4
},
{
"id": "da82cb73-af4a-4042-bf4e-17894155fb87",
"name": "Webhook",
"type": "n8n-nodes-base.webhook",
"position": [
260,
120
],
"webhookId": "9c864ee6-e4d3-46e7-98d4-bea43739963e",
"parameters": {
"path": "flux-fill",
"options": {},
"responseMode": "responseNode",
"multipleMethods": true
},
"typeVersion": 2
},
{
"id": "0f35da2f-112c-45f9-9cbe-d64eb8bdc6d8",
"name": "编辑器页面",
"type": "n8n-nodes-base.html",
"position": [
1240,
120
],
"parameters": {
"html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Konva Image Editor</title>\n <script src=\"https://unpkg.com/konva@9/konva.min.js\"></script>\n <script defer src=\"https://unpkg.com/img-comparison-slider@8/dist/index.js\"></script>\n <link rel=\"stylesheet\" href=\"https://unpkg.com/img-comparison-slider@8/dist/styles.css\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ed-parsadanyan/n8n-flux-fill-demo/flux-fill-style.css\" />\n <script src=\"https://cdn.jsdelivr.net/gh/ed-parsadanyan/n8n-flux-fill-demo/flux-fill-canvas.js\"></script>\n</head>\n<body>\n <div class=\"controls-wrapper\">\n <div class=\"left-panel\">\n <div class=\"image-controls\">\n <select id=\"imageSelector\">\n <option value=\"\">Select an image...</option>\n <option value=\"local\">Load from PC...</option>\n </select>\n <input type=\"file\" id=\"fileInput\" style=\"display: none\" accept=\"image/*\">\n <button id=\"clearButton\">Clear All</button>\n </div>\n \n <div class=\"brush-controls\">\n <label for=\"brushSize\" title=\"Use mouse wheel to adjust brush size\">Brush Size:</label>\n <div class=\"slider-container\">\n <input type=\"range\" id=\"brushSize\" min=\"5\" max=\"40\" value=\"20\">\n <span class=\"slider-value\" id=\"brushSizeValue\">20px</span>\n </div>\n </div>\n </div>\n\n <div class=\"right-panel\">\n <div class=\"prompt-row\">\n <input type=\"text\" id=\"promptInput\" placeholder=\"Enter your prompt (optional)\">\n </div>\n \n <div class=\"main-controls\">\n <label class=\"checkbox-container\">\n <input type=\"checkbox\" id=\"improvePrompt\" checked>\n <span>Improve prompt</span>\n </label>\n \n <div>\n <button id=\"sendButton\">Generate</button>\n <span class=\"loading\" id=\"loadingIndicator\">Processing...</span>\n </div>\n </div>\n \n <div class=\"parameters\">\n <div class=\"slider-container\">\n <label for=\"stepsSlider\">Steps:</label>\n <input type=\"range\" id=\"stepsSlider\" min=\"15\" max=\"50\" value=\"40\">\n <span class=\"slider-value\" id=\"stepsValue\">40</span>\n </div>\n \n <div class=\"slider-container\">\n <label for=\"guidanceSlider\">Guidance:</label>\n <input type=\"range\" id=\"guidanceSlider\" min=\"1.5\" max=\"100\" value=\"60\" step=\"0.1\">\n <span class=\"slider-value\" id=\"guidanceValue\">60.0</span>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"info\" id=\"imageInfo\"></div>\n <div id=\"container\"></div>\n <div id=\"cursor\"></div>\n\n <div id=\"resultModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-image-container\">\n <div class=\"comparison-container\">\n <div class=\"image-container\">\n <img class=\"image-before\" id=\"originalImage\" src=\"\" alt=\"Original\">\n <img class=\"image-after\" id=\"resultImage\" src=\"\" alt=\"Generated\">\n </div>\n <input type=\"range\" min=\"0\" max=\"100\" value=\"10\" class=\"slider\">\n <div class=\"slider-line\"></div>\n <div class=\"slider-button\" aria-hidden=\"true\">\n < >\n </div>\n <div class=\"labels\">\n <div class=\"label-before\">Original</div>\n <div class=\"label-after\">Generated</div>\n </div>\n </div>\n </div>\n <div class=\"modal-buttons\">\n <button id=\"reuseButton\">Use Generated</button>\n <button id=\"saveButton\">Save Image</button>\n <button id=\"closeButton\">Close</button>\n </div>\n </div>\n </div>\n\n<script>\n const urlParams = new URLSearchParams(window.location.search);\n const pageId = urlParams.get('id');\n\n // Image data will be populated by n8n\n const imageData = {{ JSON.stringify($json.Images,'',2) }};\n const webhookUrl = '{{ $json.webhookUrl }}';\n\n // Initialize the editor when the page loads\n document.addEventListener('DOMContentLoaded', function() {\n initializeEditor({\n images: imageData,\n webhookUrl: webhookUrl,\n pageId: pageId\n });\n });\n</script>\n</body>\n</html>\n"
},
"typeVersion": 1.2
},
{
"id": "2ff87261-8a7f-451e-b8ae-b4274776ce28",
"name": "便签3",
"type": "n8n-nodes-base.stickyNote",
"position": [
540,
20
],
"parameters": {
"color": 5,
"width": 360,
"height": 340,
"content": "## 图片数组"
},
"typeVersion": 1
},
{
"id": "08bb17fd-1440-4194-8c4f-e18222a68bf2",
"name": "便签4",
"type": "n8n-nodes-base.stickyNote",
"position": [
1080,
-20
],
"parameters": {
"color": 5,
"width": 400,
"height": 300,
"content": "## 编辑器的 HTML 代码"
},
"typeVersion": 1
},
{
"id": "13a820d0-e83b-4d1e-81d1-738ef8ca4d47",
"name": "便签5",
"type": "n8n-nodes-base.stickyNote",
"position": [
580,
500
],
"parameters": {
"color": 5,
"width": 280,
"height": 340,
"content": "## 调用 FLUX-Fill 工具"
},
"typeVersion": 1
},
{
"id": "f4ab042c-d4da-4f1e-aa05-fdd2cca62d66",
"name": "无操作",
"type": "n8n-nodes-base.noOp",
"position": [
420,
680
],
"parameters": {},
"typeVersion": 1
}
],
"active": true,
"pinData": {
"Webhook": []
},
"settings": {
"callerPolicy": "workflowsFromSameOwner",
"executionOrder": "v1",
"executionTimeout": 120,
"saveDataSuccessExecution": "all"
},
"versionId": "6d4112be-fb6f-4702-ac5f-2c49ff0117d4",
"connections": {
"Merge": {
"main": [
[
{
"node": "Editor page",
"type": "main",
"index": 0
}
]
]
},
"NO OP": {
"main": [
[
{
"node": "FLUX Fill",
"type": "main",
"index": 0
}
]
]
},
"Mockups": {
"main": [
[
{
"node": "Merge",
"type": "main",
"index": 1
}
]
]
},
"Webhook": {
"main": [
[
{
"node": "Merge",
"type": "main",
"index": 0
},
{
"node": "Mockups",
"type": "main",
"index": 0
}
],
[
{
"node": "NO OP",
"type": "main",
"index": 0
}
]
]
},
"FLUX Fill": {
"main": [
[
{
"node": "Wait 3 sec",
"type": "main",
"index": 0
}
]
]
},
"Is Ready?": {
"main": [
[
{
"node": "Get Fill Image",
"type": "main",
"index": 0
}
],
[
{
"node": "Wait 3 sec",
"type": "main",
"index": 0
}
]
]
},
"Wait 3 sec": {
"main": [
[
{
"node": "Check FLUX status",
"type": "main",
"index": 0
}
]
]
},
"Editor page": {
"main": [
[
{
"node": "Respond to Webhook",
"type": "main",
"index": 0
}
]
]
},
"Get Fill Image": {
"main": [
[
{
"node": "Show the image to user",
"type": "main",
"index": 0
}
]
]
},
"Check FLUX status": {
"main": [
[
{
"node": "Is Ready?",
"type": "main",
"index": 0
}
]
]
}
}
}常见问题
如何使用这个工作流？
复制上方的 JSON 配置代码，在您的 n8n 实例中创建新工作流并选择「从 JSON 导入」，粘贴配置后根据需要修改凭证设置即可。
这个工作流适合什么场景？
高级 - 设计, 人工智能
需要付费吗？
本工作流完全免费，您可以直接导入使用。但请注意，工作流中使用的第三方服务（如 OpenAI API）可能需要您自行付费。
相关工作流推荐
Docsify示例
📚 使用GPT和Docsify自动生成n8n工作流文档
If
N8n
Set
+17
60 节点Eduard
其他
上传发布和FLUX Kontext
使用FLUX Kontext创建角色一致的图像并通过上传发布到社交媒体
If
Set
Wait
+9
27 节点Eduard
设计
GitHub 同步仪表板 - V2
具有提交历史和回滚功能的 GitHub 工作流版本控制仪表板
If
N8n
Set
+20
94 节点Eduard
开发运维
实时Notion Todoist双向同步模板
使用Redis的Notion Todoist实时双向同步
If
Set
Code
+26
246 节点Mario
销售
YouTube RAG 搜索前端（使用 Apify、Qdrant 和 AI）
基于 Apify、Qdrant 和 AI 的 YouTube RAG 搜索前端
If
Set
Html
+23
62 节点Jimleuk
人工智能
LLM 链式调用示例
使用 Claude 3.7 比较顺序、基于代理和并行的 LLM 处理
Set
Merge
Webhook
+11
38 节点Eduard
构建模块
