planeta ai logo
Darmowy szablon automatyzacji

馃帹 Interaktywny edytor obraz贸w z narz臋dziem wype艂niania FLUX.1 do malowania

14781
27 dni temu
18
blok贸w


Interfejs do edycji obraz贸w z wykorzystaniem AI

Ten szablon to prototyp interfejsu do edycji obraz贸w z wykorzystaniem sztucznej inteligencji, dzia艂aj膮cy w przegl膮darce internetowej. Oferuje funkcjonalno艣膰 podobn膮 do narz臋dzia Generative Fill w Photoshopie, ale w ca艂o艣ci oparty na rozwi膮zaniach webowych.

Funkcjonalno艣ci edytora

  • Wyb贸r obszar贸w na obrazie za pomoc膮 regulowanego p臋dzla
  • Wprowadzanie tekstowych podpowiedzi dla AI
  • Por贸wnywanie oryginalnego i wygenerowanego obrazu
  • Mo偶liwo艣膰 iteracyjnego wprowadzania zmian
  • Zapisywanie i ponowne wykorzystywanie wygenerowanych obraz贸w

Wymagania

Do dzia艂ania workflow potrzebne b臋d膮:

  • Dost臋p do API FLUX
  • Konfiguracja nag艂贸wk贸w HTTP w n8n z kluczem API FLUX

Kluczowe komponenty

  • API FLUX Fill do generowania obraz贸w z wykorzystaniem AI
  • Konva.js do manipulacji canvasem
  • img-comparison-slider do wizualizacji wynik贸w
  • W艂asny kod CSS/JS zapewniaj膮cy funkcjonalno艣膰 edytora

Prosty interfejs edytora

  • Strona HTML z edytorem dost臋pna przez wywo艂anie Webhook
  • Regulowany p臋dzel do zaznaczania obszar贸w
  • Przyk艂adowe obrazy i mo偶liwo艣膰 wgrywania w艂asnych
  • Podstawowe kontrolki parametr贸w modelu FLUX

Przebieg przetwarzania obraz贸w

  • Osobna obs艂uga obrazu i maski
  • Przetwarzanie 偶膮da艅 do API FLUX Fill
  • Dostarczanie wynik贸w z powrotem do edytora

Podgl膮d wynik贸w

  • Por贸wnanie obraz贸w w widoku dzielonym
  • Interaktywny suwak do por贸wnania wersji przed i po
  • Opcje zapisu i kontynuacji edycji
  • Obs艂uga wielu cykli iteracyjnych

Przyk艂ady zastosowa艅

Ten prototyp szczeg贸lnie dobrze sprawdza si臋 w nast臋puj膮cych scenariuszach:

  • Testowanie koncepcji edycji obraz贸w z wykorzystaniem AI
  • Szybkie eksperymenty z wizualizacj膮 produkt贸w
  • Badanie kreatywnych wariacji obraz贸w
  • Demonstracja mo偶liwo艣ci wype艂niania obraz贸w
  • Aktualizacja katalog贸w produktowych
  • Tworzenie sezonowych wariacji grafik
  • Prototypowanie koncepcji marketingowych

Workflow mo偶na rozbudowa膰 o integracj臋 z r贸偶nymi 藕r贸d艂ami danych i dostosowa膰 do konkretnych potrzeb biznesowych.


   Skopiuj kod szablonu   
{"id":"OvuZIXwt9mdU2JGK","meta":{"instanceId":"fb924c73af8f703905bc09c9ee8076f48c17b596ed05b18c0ff86915ef8a7c4a","templateCredsSetupCompleted":true},"name":"FLUX-fill standalone","tags":[],"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},{"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},{"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},{"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},{"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},{"id":"b32e8e0b-a449-47d9-8de4-c0062235ff99","name":"FLUX Fill","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":"Check FLUX status","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":"Get Fill Image","type":"n8n-nodes-base.httpRequest","position":[1560,780],"parameters":{"url":"={{ $json.result.sample }}","options":{}},"typeVersion":4.2},{"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},{"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},{"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 imagen## Add extra steps to save an edited image"},"typeVersion":1},{"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":"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":"Editor page","type":"n8n-nodes-base.html","position":[1240,120],"parameters":{"html":"nnnnnKonva Image Editorn n nnn nnn
n
n
n n n n
n n
n n
n n 20pxn
n
n
nn
n
n n
n n
n n n
n n Processing...n
n
n n
n
n n n 40n
n n
n n n 60.0n
n
n
n
nn
n
n
nnnnnnn"},"typeVersion":1.2},{"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 arrayn* Load from PCn* Select one of the default imagesnn### Change this node ton### get image URLs from your data source"},"typeVersion":1},{"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 editorn* Konva.jsn* img-comparison-slider to compare edits vs original filen* Additional css + js files for the editor logic"},"typeVersion":1},{"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 ToolnPass the following data:n* original imagen* alpha mask from the editorn* text promptn* additional settings"},"typeVersion":1},{"id":"f4ab042c-d4da-4f1e-aa05-fdd2cca62d66","name":"NO OP","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}]]}}}
  • API
  • Request
  • URL
  • Build
  • cURL
  • extract
  • template
  • table
Planeta AI 2025 
magic-wandmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram