{"id":"OvuZIXwt9mdU2JGK","meta":{"instanceId":"workflow-3b2926cc","versionId":"1.0.0","createdAt":"2025-09-29T07:08:00.019047","updatedAt":"2025-09-29T07:08:00.019067","owner":"n8n-user","license":"MIT","category":"automation","status":"active","priority":"high","environment":"production"},"name":"FLUX-fill standalone","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,"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":{"Respond to Webhook":{"main":[[],[],[],[],[],[],[],[],[]]},"FLUX Fill":{"main":[[],[],[],[],[],[],[],[],[]]},"Check FLUX status":{"main":[[],[],[],[],[],[],[],[],[]]},"Get Fill Image":{"main":[[],[],[],[],[],[],[],[],[]]},"Show the image to user":{"main":[[],[],[],[],[],[],[],[],[]]},"Webhook":{"main":[[],[],[],[],[],[],[],[],[]]}},"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."}