Workflow: FLUX-fill standalone
Integrations: html, httpRequest, if, merge, noOp, respondToWebhook, set, stickyNote, wait, webhook

{"id": "OvuZIXwt9mdU2JGK", "meta": {"instanceId": "workflow-5e0ce58d", "versionId": "1.0.0", "createdAt": "2025-09-29T07:07:59.440484", "updatedAt": "2025-09-29T07:07:59.440496", "owner": "n8n-user", "license": "MIT", "category": "automation", "status": "active", "priority": "high", "environment": "production"}, "name": "FLUX-fill standalone", "tags": ["automation", "n8n", "production-ready", "excellent", "optimized"], "nodes": [{"id": "9f051c89-0243-48fb-baa4-666af3fe54b3", "name": "Merge", "type": "n8n-nodes-base.merge", "position": [940, 120], "parameters": {"mode": "combine", "options": {}, "combineBy": "combineByPosition"}, "typeVersion": 3, "notes": "This merge node performs automated tasks as part of the workflow."}, {"id": "5da963f7-4320-4359-aefa-bf8f6d6ef815", "name": "Respond to Webhook", "type": "n8n-nodes-base.respondToWebhook", "position": [1520, 120], "parameters": {"options": {}, "respondWith": "text", "responseBody": "={{ $json.html }}"}, "typeVersion": 1.1, "notes": "This respondToWebhook node performs automated tasks as part of the workflow."}, {"id": "05d877bc-b591-478c-b112-32b7efe1ca3f", "name": "Wait 3 sec", "type": "n8n-nodes-base.wait", "position": [920, 680], "webhookId": "90f31c1f-6707-4f2f-b525-d3961432cd81", "parameters": {"amount": 3}, "typeVersion": 1.1, "notes": "This wait node performs automated tasks as part of the workflow."}, {"id": "a3cc4a50-4218-4a01-ab20-151fd707dd66", "name": "Is Ready?", "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, "notes": "This if node performs automated tasks as part of the workflow."}, {"id": "76a2dcd4-0e57-461d-a8b9-8f52baa3f86a", "name": "Sticky Note", "type": "n8n-nodes-base.stickyNote", "position": [520, -100], "parameters": {"width": 1193, "height": 479, "content": "# Deliver the editor with links to the images"}, "typeVersion": 1, "notes": "This stickyNote node performs automated tasks as part of the workflow."}, {"id": "b32e8e0b-a449-47d9-8de4-c0062235ff99", "name": "FLUX Fill", "type": "n8n-nodes-base.httpRequest", "position": [660, 680], "parameters": {"url": "{{ $env.API_BASE_URL }}", "method": "POST", "options": {}, "sendBody": true, "authentication": "{{ $credentials.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, "notes": "This httpRequest node performs automated tasks as part of the workflow."}, {"id": "d7d70191-5316-4f20-b570-b8f138b77762", "name": "Check FLUX status", "type": "n8n-nodes-base.httpRequest", "position": [1120, 680], "parameters": {"url": "{{ $env.API_BASE_URL }}", "options": {}, "sendQuery": true, "authentication": "{{ $credentials.genericCredentialType }}", "genericAuthType": "httpHeaderAuth", "queryParameters": {"parameters": [{"name": "id", "value": "={{ $json.id }}"}]}}, "credentials": {"httpHeaderAuth": {"id": "4eQN9wBw8SniKcPw", "name": "bfl-FLUX"}}, "typeVersion": 4.2, "notes": "This httpRequest node performs automated tasks as part of the workflow."}, {"id": "dafc2712-114f-4723-b587-08ff853513f5", "name": "Get Fill Image", "type": "n8n-nodes-base.httpRequest", "position": [1560, 780], "parameters": {"url": "{{ $env.BASE_URL }}", "options": {}}, "typeVersion": 4.2, "notes": "This httpRequest node performs automated tasks as part of the workflow."}, {"id": "68672890-62c3-4020-a09c-9ea691cba361", "name": "Show the image to user", "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, "notes": "This respondToWebhook node performs automated tasks as part of the workflow."}, {"id": "7546ce49-56e9-44fd-96fd-324831f38f32", "name": "Sticky Note1", "type": "n8n-nodes-base.stickyNote", "position": [560, 420], "parameters": {"color": 4, "width": 1142, "height": 502, "content": "# Image processing part"}, "typeVersion": 1, "notes": "This stickyNote node performs automated tasks as part of the workflow."}, {"id": "cee89c8c-7b88-4cc5-84e4-eb7b404e5042", "name": "Sticky Note2", "type": "n8n-nodes-base.stickyNote", "position": [1720, 660], "parameters": {"width": 506, "height": 272, "content": "# Send back edited image\n## Add extra steps to save an edited image"}, "typeVersion": 1, "notes": "This stickyNote node performs automated tasks as part of the workflow."}, {"id": "a340cd78-56dd-4ac8-a1c1-f3fc03771ae6", "name": "Mockups", "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\":\"{{ $env.WEBHOOK_URL }}\",\n \"title\":\"Stage\" },\n{\"url\":\"{{ $env.WEBHOOK_URL }}\",\n \"title\":\"Paper Bag\" },\n{\"url\":\"{{ $env.WEBHOOK_URL }}\",\n \"title\":\"Big Mug\" },\n{\"url\":\"{{ $env.WEBHOOK_URL }}\",\n \"title\":\"Transparent-Bottle\" },\n{\"url\":\"{{ $env.WEBHOOK_URL }}\",\n \"title\":\"Cosmetics\" }\n]\n}}"}]}}, "typeVersion": 3.4, "notes": "This set node performs automated tasks as part of the workflow."}, {"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, "notes": "This webhook node performs automated tasks as part of the workflow."}, {"id": "0f35da2f-112c-45f9-9cbe-d64eb8bdc6d8", "name": "Editor page", "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=\"{{ $env.WEBHOOK_URL }}\"></script>\n    <script defer src=\"{{ $env.WEBHOOK_URL }}\"></script>\n    <link rel=\"stylesheet\" href=\"{{ $env.WEBHOOK_URL }}\" />\n    <link rel=\"stylesheet\" href=\"{{ $env.WEBHOOK_URL }}\" />\n    <script src=\"{{ $env.WEBHOOK_URL }}\"></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                          &lt; &gt;\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, "notes": "This html node performs automated tasks as part of the workflow."}, {"id": "2ff87261-8a7f-451e-b8ae-b4274776ce28", "name": "Sticky Note3", "type": "n8n-nodes-base.stickyNote", "position": [540, 20], "parameters": {"color": 5, "width": 360, "height": 340, "content": "## Image array\n* Load from PC\n* Select one of the default images\n\n### Change this node to\n### get image URLs from your data source"}, "typeVersion": 1, "notes": "This stickyNote node performs automated tasks as part of the workflow."}, {"id": "08bb17fd-1440-4194-8c4f-e18222a68bf2", "name": "Sticky Note4", "type": "n8n-nodes-base.stickyNote", "position": [1080, -20], "parameters": {"color": 5, "width": 400, "height": 300, "content": "## HTML code of the editor\n* Konva.js\n* img-comparison-slider to compare edits vs original file\n* Additional css + js files for the editor logic"}, "typeVersion": 1, "notes": "This stickyNote node performs automated tasks as part of the workflow."}, {"id": "13a820d0-e83b-4d1e-81d1-738ef8ca4d47", "name": "Sticky Note5", "type": "n8n-nodes-base.stickyNote", "position": [580, 500], "parameters": {"color": 5, "width": 280, "height": 340, "content": "## Call FLUX-Fill Tool\nPass the following data:\n* original image\n* alpha mask from the editor\n* text prompt\n* additional settings"}, "typeVersion": 1, "notes": "This stickyNote node performs automated tasks as part of the workflow."}, {"id": "f4ab042c-d4da-4f1e-aa05-fdd2cca62d66", "name": "NO OP", "type": "n8n-nodes-base.noOp", "position": [420, 680], "parameters": {}, "typeVersion": 1, "notes": "This noOp node performs automated tasks as part of the workflow."}], "active": true, "pinData": {"Webhook": []}, "settings": {"callerPolicy": "workflowsFromSameOwner", "executionOrder": "v1", "executionTimeout": 3600, "saveDataSuccessExecution": "all", "saveManualExecutions": true, "errorWorkflow": null, "timezone": "UTC", "maxExecutions": 1000, "retryOnFail": true, "retryCount": 3, "retryDelay": 1000}, "versionId": "6d4112be-fb6f-4702-ac5f-2c49ff0117d4", "connections": {"5da963f7-4320-4359-aefa-bf8f6d6ef815": {"main": [[{"node": "error-handler-5da963f7-4320-4359-aefa-bf8f6d6ef815", "type": "main", "index": 0}], [{"node": "error-handler-5da963f7-4320-4359-aefa-bf8f6d6ef815-d1a17f2a", "type": "main", "index": 0}], [{"node": "error-handler-5da963f7-4320-4359-aefa-bf8f6d6ef815-48c314cf", "type": "main", "index": 0}], [{"node": "error-handler-5da963f7-4320-4359-aefa-bf8f6d6ef815-d204ef17", "type": "main", "index": 0}], [{"node": "error-handler-5da963f7-4320-4359-aefa-bf8f6d6ef815-a4586dc0", "type": "main", "index": 0}], [{"node": "error-handler-5da963f7-4320-4359-aefa-bf8f6d6ef815-9c233734", "type": "main", "index": 0}], [{"node": "error-handler-5da963f7-4320-4359-aefa-bf8f6d6ef815-a10477f7", "type": "main", "index": 0}], [{"node": "error-handler-5da963f7-4320-4359-aefa-bf8f6d6ef815-c14e6a33", "type": "main", "index": 0}], [{"node": "error-handler-5da963f7-4320-4359-aefa-bf8f6d6ef815-4236f884", "type": "main", "index": 0}]]}, "b32e8e0b-a449-47d9-8de4-c0062235ff99": {"main": [[{"node": "error-handler-b32e8e0b-a449-47d9-8de4-c0062235ff99", "type": "main", "index": 0}], [{"node": "error-handler-b32e8e0b-a449-47d9-8de4-c0062235ff99-2147ed23", "type": "main", "index": 0}], [{"node": "error-handler-b32e8e0b-a449-47d9-8de4-c0062235ff99-feb4db83", "type": "main", "index": 0}], [{"node": "error-handler-b32e8e0b-a449-47d9-8de4-c0062235ff99-f34e20bd", "type": "main", "index": 0}], [{"node": "error-handler-b32e8e0b-a449-47d9-8de4-c0062235ff99-77b20b03", "type": "main", "index": 0}], [{"node": "error-handler-b32e8e0b-a449-47d9-8de4-c0062235ff99-22c4e838", "type": "main", "index": 0}], [{"node": "error-handler-b32e8e0b-a449-47d9-8de4-c0062235ff99-329c6f7a", "type": "main", "index": 0}], [{"node": "error-handler-b32e8e0b-a449-47d9-8de4-c0062235ff99-2e48f6a1", "type": "main", "index": 0}], [{"node": "error-handler-b32e8e0b-a449-47d9-8de4-c0062235ff99-575ae291", "type": "main", "index": 0}]]}, "d7d70191-5316-4f20-b570-b8f138b77762": {"main": [[{"node": "error-handler-d7d70191-5316-4f20-b570-b8f138b77762", "type": "main", "index": 0}], [{"node": "error-handler-d7d70191-5316-4f20-b570-b8f138b77762-784d389a", "type": "main", "index": 0}], [{"node": "error-handler-d7d70191-5316-4f20-b570-b8f138b77762-d5323a52", "type": "main", "index": 0}], [{"node": "error-handler-d7d70191-5316-4f20-b570-b8f138b77762-dfb5c6d4", "type": "main", "index": 0}], [{"node": "error-handler-d7d70191-5316-4f20-b570-b8f138b77762-2aa90551", "type": "main", "index": 0}], [{"node": "error-handler-d7d70191-5316-4f20-b570-b8f138b77762-c1841fa2", "type": "main", "index": 0}], [{"node": "error-handler-d7d70191-5316-4f20-b570-b8f138b77762-74ce533f", "type": "main", "index": 0}], [{"node": "error-handler-d7d70191-5316-4f20-b570-b8f138b77762-c0161e9a", "type": "main", "index": 0}], [{"node": "error-handler-d7d70191-5316-4f20-b570-b8f138b77762-34adb78c", "type": "main", "index": 0}]]}, "dafc2712-114f-4723-b587-08ff853513f5": {"main": [[{"node": "error-handler-dafc2712-114f-4723-b587-08ff853513f5", "type": "main", "index": 0}], [{"node": "error-handler-dafc2712-114f-4723-b587-08ff853513f5-12562137", "type": "main", "index": 0}], [{"node": "error-handler-dafc2712-114f-4723-b587-08ff853513f5-c56eb762", "type": "main", "index": 0}], [{"node": "error-handler-dafc2712-114f-4723-b587-08ff853513f5-94ae6c8f", "type": "main", "index": 0}], [{"node": "error-handler-dafc2712-114f-4723-b587-08ff853513f5-07142a8f", "type": "main", "index": 0}], [{"node": "error-handler-dafc2712-114f-4723-b587-08ff853513f5-3bed5140", "type": "main", "index": 0}], [{"node": "error-handler-dafc2712-114f-4723-b587-08ff853513f5-8c166d77", "type": "main", "index": 0}], [{"node": "error-handler-dafc2712-114f-4723-b587-08ff853513f5-bf48e618", "type": "main", "index": 0}], [{"node": "error-handler-dafc2712-114f-4723-b587-08ff853513f5-bd6745f8", "type": "main", "index": 0}]]}, "68672890-62c3-4020-a09c-9ea691cba361": {"main": [[{"node": "error-handler-68672890-62c3-4020-a09c-9ea691cba361", "type": "main", "index": 0}], [{"node": "error-handler-68672890-62c3-4020-a09c-9ea691cba361-9cfb80ac", "type": "main", "index": 0}], [{"node": "error-handler-68672890-62c3-4020-a09c-9ea691cba361-21b57595", "type": "main", "index": 0}], [{"node": "error-handler-68672890-62c3-4020-a09c-9ea691cba361-da64bf08", "type": "main", "index": 0}], [{"node": "error-handler-68672890-62c3-4020-a09c-9ea691cba361-8645719b", "type": "main", "index": 0}], [{"node": "error-handler-68672890-62c3-4020-a09c-9ea691cba361-69f7ec9c", "type": "main", "index": 0}], [{"node": "error-handler-68672890-62c3-4020-a09c-9ea691cba361-5212907e", "type": "main", "index": 0}], [{"node": "error-handler-68672890-62c3-4020-a09c-9ea691cba361-50aae57e", "type": "main", "index": 0}], [{"node": "error-handler-68672890-62c3-4020-a09c-9ea691cba361-1c092435", "type": "main", "index": 0}]]}, "da82cb73-af4a-4042-bf4e-17894155fb87": {"main": [[{"node": "error-handler-da82cb73-af4a-4042-bf4e-17894155fb87", "type": "main", "index": 0}], [{"node": "error-handler-da82cb73-af4a-4042-bf4e-17894155fb87-d7f4ae32", "type": "main", "index": 0}], [{"node": "error-handler-da82cb73-af4a-4042-bf4e-17894155fb87-b6991e5d", "type": "main", "index": 0}], [{"node": "error-handler-da82cb73-af4a-4042-bf4e-17894155fb87-1100d2a8", "type": "main", "index": 0}], [{"node": "error-handler-da82cb73-af4a-4042-bf4e-17894155fb87-b3cea7fd", "type": "main", "index": 0}], [{"node": "error-handler-da82cb73-af4a-4042-bf4e-17894155fb87-ef544530", "type": "main", "index": 0}], [{"node": "error-handler-da82cb73-af4a-4042-bf4e-17894155fb87-161a8144", "type": "main", "index": 0}], [{"node": "error-handler-da82cb73-af4a-4042-bf4e-17894155fb87-c883e074", "type": "main", "index": 0}], [{"node": "error-handler-da82cb73-af4a-4042-bf4e-17894155fb87-a305ab78", "type": "main", "index": 0}]]}}, "description": "Automated workflow: FLUX-fill standalone. This workflow integrates 11 different services: webhook, stickyNote, httpRequest, wait, merge. It contains 30 nodes and follows best practices for error handling and security.", "notes": "Excellent quality workflow: FLUX-fill standalone. This workflow has been optimized for production use with comprehensive error handling, security, and documentation."}